/* System Follows — hoja única. Escala fija: 6 tamaños, 7 espaciados, 1 acento. */

/* Inter variable, autoalojada (licencia SIL OFL): un solo archivo para todos los pesos */
@font-face {
    font-family: 'Inter';
    src: url('../fonts/InterVariable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
/* Tipografía de titulares del manual CRESCAVIA (SIL OFL, servida en local) */
@font-face {
    font-family: 'Space Grotesk';
    src: url('../fonts/SpaceGroteskVariable.woff2') format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}
:root {
    /* Espaciado, base 4px */
    --e-1: 0.25rem;  --e-2: 0.5rem;   --e-3: 0.75rem;  --e-4: 1rem;
    --e-5: 1.5rem;   --e-6: 2rem;     --e-7: 3rem;

    /* Tipografía: seis pasos */
    --t-1: 0.75rem;   --t-2: 0.8125rem; --t-3: 0.875rem;
    --t-4: 1rem;      --t-5: 1.25rem;   --t-6: 1.5625rem;

    --p-normal: 400; --p-medio: 500; --p-fuerte: 600;

    /* Tema copiado de JAP: radio 6px, página blanca, tarjetas con borde
       #eceef6 y sombra lavanda muy suave. Valores medidos en su panel. */
    --radio: 6px;
    --radio-control: 6px;
    --linea: 1px;

    /* Color: tinta, gris, línea, fondo, un acento y estados */
    --tinta: #020e21;         /* tinta JAP */
    --gris: #515c6b;          /* texto de cuerpo JAP: 6.8:1 sobre blanco */
    --borde: #e8e8e8;
    --borde-tarjeta: #eceef6; /* borde de tarjetas y de la ficha de login JAP */
    --borde-control: #dee2e6; /* borde de inputs y selects JAP */
    --pagina: #ffffff;        /* JAP trabaja sobre blanco, no sobre gris */
    --fondo: #ffffff;
    --fondo-suave: #f6f6f6;   /* relleno de inputs y hover del menú JAP */
    --acento: #c8430e;        /* naranja JAP oscurecido: 4.9:1 sobre blanco */
    --peligro: #b42318;
    --aviso: #92400e;
    /* Texto que va ENCIMA del acento o de un estado (botones, contadores) */
    --sobre-acento: #ffffff;
    --sombra: 0 20px 50px rgba(220, 224, 249, .5);
}

/* Tema oscuro: paleta propia, no la clara aclarada. Valores medidos sobre
   el fondo #15181b — tinta 14.5:1 · gris 7.0:1 · peligro 7.8:1 · aviso 9.6:1.
   El acento lo inyecta el servidor con su variante viva (entre 6.5:1 y 10.5:1). */
:root[data-tema="oscuro"] {
    --tinta: #e6e8ea;
    --gris: #9aa4ae;
    --borde: #39414a;
    --borde-tarjeta: #2b323a;
    --borde-control: #39414a;
    --pagina: #0f1215;
    --fondo: #191d21;
    --fondo-suave: #21262c;
    --peligro: #ff8a7a;
    --aviso: #f0b429;
    /* En oscuro el acento y los estados son claros: el texto encima va oscuro */
    --sobre-acento: #15181b;
    --sombra: 0 1px 3px rgba(0, 0, 0, .45), 0 4px 16px rgba(0, 0, 0, .35);
    color-scheme: dark;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    /* Inter primero; Trebuchet y el sistema como respaldo mientras carga */
    font-family: 'Inter', "Trebuchet MS", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
    font-size: var(--t-3);
    color: var(--tinta);
    background: var(--pagina);
    line-height: 1.5;
}

a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Estructura ---- */
.shell { display: flex; min-height: 100vh; }

.sidebar {
    width: 240px; flex-shrink: 0;
    background: var(--fondo);
    border-right: var(--linea) solid var(--borde);
    box-shadow: var(--sombra);
    padding: var(--e-4) 0;
    display: flex; flex-direction: column; gap: var(--e-5);
    transition: width .12s linear;
    /* Como en JAP: la barra queda fija y desplaza su propio contenido */
    position: sticky; top: 0; z-index: 5;
    height: 100vh; overflow-y: auto;
}

/* Barras de desplazamiento finas y redondeadas, como las de JAP */
* { scrollbar-width: thin; scrollbar-color: #c8cdd5 transparent; }
:root[data-tema="oscuro"] * { scrollbar-color: #39414a transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c8cdd5; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #aab1bb; }
:root[data-tema="oscuro"] ::-webkit-scrollbar-thumb { background: #39414a; }
.sidebar-cabecera {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--e-2); padding: 0 var(--e-4) 0 var(--e-5);
}
.brand { font-size: var(--t-4); font-weight: var(--p-fuerte); text-decoration: none; color: var(--tinta); white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand span { color: var(--acento); }
.plegar {
    font: inherit; font-size: var(--t-4); line-height: 1;
    width: 22px; height: 22px; flex-shrink: 0;
    padding: 0; background: none; color: var(--gris);
    border: var(--linea) solid var(--borde); border-radius: var(--radio);
    cursor: pointer;
}
.plegar:hover { color: var(--tinta); opacity: 1; }

.nav { display: flex; flex-direction: column; gap: 2px; padding: 0 var(--e-3); }
/* Items del menú altos y con letra de 16px, como los de JAP */
.nav a {
    display: flex; align-items: center; gap: var(--e-3);
    color: var(--gris); padding: var(--e-3) var(--e-3);
    font-size: var(--t-4); font-weight: var(--p-medio);
    text-decoration: none; white-space: nowrap;
    border-radius: var(--radio-control);
}
.nav a .aviso-conteo { margin-left: auto; }
/* Al pasar el cursor: texto en acento sobre gris claro con la barrita debajo, como JAP */
.nav a:hover {
    color: var(--acento); background: var(--fondo-suave); text-decoration: none;
    box-shadow: inset 0 -3px 0 var(--acento);
}
/* En JAP el item activo no es un bloque relleno: texto en acento sobre gris muy claro,
   con una barrita de acento pegada al borde izquierdo */
.nav a.activo {
    color: var(--acento); background: var(--fondo-suave); font-weight: var(--p-fuerte);
    box-shadow: inset 3px 0 0 var(--acento);
    border-top-left-radius: 0; border-bottom-left-radius: 0;
}
.nav a .icono { width: 22px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* Botón "Mostrar más" al pie del menú, como en JAP */
.nav-mas {
    font: inherit; font-size: var(--t-2); font-weight: var(--p-medio);
    text-transform: none; letter-spacing: 0;
    margin: var(--e-2) var(--e-3) 0; padding: var(--e-2);
    background: var(--fondo-suave); color: var(--tinta);
    border: none; border-radius: var(--radio-control);
    cursor: pointer; text-align: center;
}
.nav-mas:hover { background: var(--borde); opacity: 1; }

/* Iconos SVG de trazo: heredan el color del texto */
svg.ico { width: 1.1em; height: 1.1em; vertical-align: -0.2em; flex-shrink: 0; }
.nav a .icono svg.ico { width: 17px; height: 17px; vertical-align: middle; }
.admin-nav a svg.ico { width: 15px; height: 15px; margin-right: 2px; }
.filtro-plataformas .chip svg.ico { width: 14px; height: 14px; vertical-align: -0.15em; }
.estrella svg.ico, .ojo svg.ico { width: 16px; height: 16px; vertical-align: middle; }
.campana summary svg.ico { width: 17px; height: 17px; vertical-align: -0.25em; }
.nav .seccion {
    font-size: var(--t-1); color: var(--gris);
    padding: var(--e-4) var(--e-3) var(--e-1);
}

/* Menú plegado: quedan solo los emoticonos */
.shell.plegado .sidebar { width: 60px; }
.shell.plegado .brand,
.shell.plegado .nav .seccion,
.shell.plegado .nav a .texto-nav,
.shell.plegado .nav a .aviso-conteo { display: none; }
/* Con la barra plegada no hay texto: el bloque extra queda siempre a la vista */
.shell.plegado .nav-extra[hidden] { display: block; }
.shell.plegado .nav-mas { display: none; }
.shell.plegado .sidebar-cabecera { justify-content: center; padding: 0; }
.shell.plegado .nav { padding: 0 var(--e-1); }
.shell.plegado .nav a { justify-content: center; padding: var(--e-2) 0; }

/* Barra superior del cliente: cada dato en su pastilla redondeada */
.resumen-cliente { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }

/* Buscador en píldora con la lupa dentro, como el de JAP */
.busca-topbar { position: relative; }
.busca-topbar .lupa {
    position: absolute; left: var(--e-3); top: 50%; transform: translateY(-50%);
    color: var(--gris); pointer-events: none; display: inline-flex;
}
.busca-topbar input {
    width: 200px; padding: var(--e-2) var(--e-3) var(--e-2) calc(var(--e-3) + 22px);
    border-radius: 999px;
}
.boton-icono {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0; flex-shrink: 0;
    background: none; border: none; color: var(--gris);
    border-radius: var(--radio-control); cursor: pointer;
    text-transform: none;
}
.boton-icono:hover { color: var(--tinta); background: var(--fondo-suave); opacity: 1; text-decoration: none; }
.boton-icono svg.ico { width: 17px; height: 17px; }

/* Cabecera de la tarjeta del filtro de redes */
.cabecera-filtro {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--e-3); margin-bottom: var(--e-4);
}
/* Rótulo de sección en mayúsculas grises, como "CHOOSE A SOCIAL NETWORK" */
.cabecera-filtro .titulo-filtro, .pedido-ficha .titulo-filtro {
    font-weight: var(--p-fuerte); color: var(--gris);
    text-transform: uppercase; letter-spacing: .04em; font-size: var(--t-2);
}
.tarjeta-filtro .filtro-plataformas[hidden] { display: none; }
.pestañas-pedido a { cursor: pointer; }

/* Fila de pestañas con el buscador a la derecha, como en JAP */
.fila-pestañas { align-items: center; }
.busca-pestañas { margin-left: auto; }
.busca-pestañas input {
    width: 200px; padding: var(--e-2) var(--e-3);
    font-size: var(--t-3); border-radius: var(--radio-control);
}

/* Botón pequeño para copiar el ID */
.boton-copiar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; padding: 0; flex-shrink: 0;
    background: var(--acento); color: var(--sobre-acento);
    border: none; border-radius: var(--radio-control); cursor: pointer;
}
.boton-copiar svg.ico { width: 13px; height: 13px; }
.boton-copiar.copiado { background: var(--fondo-suave); color: var(--acento); }
/* Cancelar el pedido, pegado al estado como en JAP */
.boton-cancelar { background: var(--peligro); vertical-align: middle; margin-left: var(--e-1); }
/* Pastillas de la barra teñidas con un poco del acento, como las de JAP */
.resumen-cliente > span:not(.separador) {
    display: inline-flex; align-items: center; gap: var(--e-1);
    padding: var(--e-2) var(--e-3);
    background: color-mix(in srgb, var(--acento) 6%, var(--fondo));
    border: var(--linea) solid color-mix(in srgb, var(--acento) 14%, var(--fondo));
    border-radius: var(--radio);
    white-space: nowrap;
}
.resumen-cliente .separador { display: none; }
.resumen-cliente .num { font-variant-numeric: tabular-nums; }
.ojo {
    font: inherit; font-size: var(--t-2); line-height: 1;
    padding: 0 var(--e-1); background: none; border: none; color: var(--gris);
    cursor: pointer;
}
.ojo:hover { opacity: 1; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--e-4) var(--e-6);
    background: var(--fondo);
    box-shadow: var(--sombra);
    font-size: var(--t-2);
    position: relative; z-index: 4;
}
.topbar .saldo { font-variant-numeric: tabular-nums; }
.topbar .saldo strong { font-weight: var(--p-fuerte); }

/* Estilo JAP: cada sección de la página es una tarjeta flotante */
.contenido {
    padding: 0; max-width: 1080px; width: 100%;
    margin: var(--e-5) auto;
}
.contenido > * {
    background: var(--fondo);
    border: var(--linea) solid var(--borde-tarjeta);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: var(--e-5);
}
.contenido > * + * { margin-top: var(--e-4); }
.contenido > table { padding: 0; overflow: hidden; }
.contenido > .tabla-ancha { padding: 0; }
.contenido > .paginacion { background: transparent; box-shadow: none; border: none; padding: 0; }
/* Cada fila de una tabla lleva sus formularios auxiliares fuera de ella (no se
   pueden anidar formularios). Solo llevan el token, y el botón que los envía
   está dentro de la tabla: aquí no deben pintar una tarjeta vacía. */
.contenido > form:not(:has(> :not(input[type="hidden"]))) { display: none; }

/* Paginación: dos botones y en qué página vas */
/* Centrada: pegada a la izquierda de una tabla ancha queda perdida, y en un
   monitor grande hay que cruzar media pantalla para pasar de página. */
.paginas { display: flex; align-items: center; justify-content: center; gap: var(--e-3); flex-wrap: wrap; }
.paginas-cuenta { color: var(--gris); font-size: var(--t-2); font-variant-numeric: tabular-nums; }
.paginas .deshabilitado { opacity: 0.45; pointer-events: none; }
.contenido > .titulo { border-bottom: none; padding-bottom: var(--e-5); }
/* Pantallas de tabla ancha. El panel se lee mejor en 1080 px —una línea de
   texto más larga cansa—, pero eso vale para formularios y prosa, no para una
   tabla de diez columnas: ahí el ancho de más no es adorno, es lo que evita
   que el enlace se corte y el servicio ocupe media pantalla en alto. */
.contenido-ancho { max-width: 1560px; }
.main > .contenido { margin-left: var(--e-6); margin-right: var(--e-6); }
@media (min-width: 1200px) { .main > .contenido { margin-left: auto; margin-right: auto; } }

/* Pie estilo JAP: una tarjeta al final con la marca */
.pie {
    margin: var(--e-5) var(--e-6);
    margin-top: auto;
    /* Presencia del pie de JAP: relleno generoso y letra de 14px */
    padding: var(--e-7) var(--e-5);
    background: var(--fondo);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    font-size: var(--t-3); color: var(--gris);
    display: flex; justify-content: space-between; align-items: center;
    gap: var(--e-4); flex-wrap: wrap;
}
.pie .brand { font-size: var(--t-5); }
.pie .pie-enlaces { display: flex; gap: var(--e-4); }
.main .pie { margin-top: var(--e-5); }

/* Páginas del CMS con el diseño de JAP: título centrado en grande
   y, si la página trae acordeón (FAQ), una caja tintada con el + en acento */
.titulo-pagina-cms {
    text-align: center; font-size: var(--t-6); font-weight: var(--p-fuerte);
    margin: var(--e-5) 0 var(--e-6);
}
.prosa:has(> details) {
    max-width: none;
    background: color-mix(in srgb, var(--acento) 5%, var(--fondo));
    border-radius: var(--radio);
    padding: var(--e-5) var(--e-7);
}
.prosa:has(> details) > details { margin-top: 0; }
.prosa details { border-bottom: var(--linea) solid var(--borde); }
.prosa details:last-of-type { border-bottom: none; }
.prosa details summary {
    cursor: pointer; list-style: none; position: relative;
    padding: var(--e-5) var(--e-6) var(--e-5) 0;
    font-weight: var(--p-medio);
}
.prosa details summary::-webkit-details-marker { display: none; }
.prosa details summary::after {
    content: '+'; position: absolute; right: var(--e-2); top: 50%;
    transform: translateY(-50%);
    color: var(--acento); font-size: var(--t-5); line-height: 1;
}
.prosa details[open] summary::after { content: '−'; }
.prosa details p { color: var(--gris); padding-bottom: var(--e-5); max-width: 780px; }

/* Blog en rejilla de tarjetas, como el del panel viejo */
.tarjetas-blog { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-4); }
.tarjeta-blog {
    background: var(--fondo); border: var(--linea) solid var(--borde-tarjeta);
    border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden;
    display: flex; flex-direction: column;
}
.tarjeta-blog > a img { width: 100%; height: 180px; object-fit: cover; display: block; }
.tarjeta-blog-cuerpo { padding: var(--e-4); display: flex; flex-direction: column; gap: var(--e-2); flex: 1; }
.tarjeta-blog-cuerpo h2 { font-size: var(--t-4); }
.tarjeta-blog-cuerpo h2 a { color: var(--tinta); text-decoration: none; }
.tarjeta-blog-cuerpo h2 a:hover { color: var(--acento); }
.tarjeta-blog-cuerpo .fecha-blog { font-size: var(--t-1); }
.tarjeta-blog-cuerpo p { font-size: var(--t-2); color: var(--gris); }
.tarjeta-blog-cuerpo .boton { margin-top: auto; align-self: flex-start; }

/* Ojito para ver/ocultar la contraseña */
.campo-clave { position: relative; }
.campo-clave input { width: 100%; padding-right: 44px; }
.ojito {
    position: absolute; right: var(--e-2); top: 50%; transform: translateY(-50%);
    background: none; border: none; color: var(--gris);
    padding: var(--e-1); min-height: 0; display: flex; cursor: pointer;
}
.ojito:hover { color: var(--tinta); background: none; }
.ojito svg.ico { width: 18px; height: 18px; }

/* Columna de lectura centrada (API pública, contenidos largos) */
.columna-centrada { max-width: 52rem; margin: 0 auto; }
.columna-centrada .ficha-datos, .columna-centrada dl { max-width: none !important; }

/* Entrada del blog centrada con portada */
.entrada-blog { max-width: 48rem; margin: 0 auto; }
.portada-blog { width: 100%; border-radius: var(--radio); margin-bottom: var(--e-5); }
/* El logo del pie es la firma de la marca, no un icono suelto: va al tamaño
   del de JAP, más grande que el de la barra lateral (34px). */
.pie .marca-logo img,
.pie-superior img { height: auto; max-height: 44px; width: auto; }

h1 { font-size: var(--t-5); font-weight: var(--p-fuerte); }
h2 { font-size: var(--t-4); font-weight: var(--p-fuerte); }
/* Titulares y cifras en Space Grotesk, como manda el manual de marca;
   el cuerpo sigue en Inter */
h1, h2, h3, .brand, .dato {
    font-family: 'Space Grotesk', 'Inter', "Trebuchet MS", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
    letter-spacing: -0.01em;
}
.titulo { border-bottom: var(--linea) solid var(--borde); padding-bottom: var(--e-3); }
.titulo p { color: var(--gris); font-size: var(--t-2); margin-top: var(--e-1); }

/* ---- Tablas: tarjeta con cabecera sombreada ---- */
table {
    width: 100%; font-size: var(--t-2);
    border-collapse: separate; border-spacing: 0;
    border-radius: var(--radio);
    overflow: hidden;
    background: var(--fondo);
}
th {
    text-align: left; font-weight: var(--p-medio); color: var(--gris);
    padding: var(--e-2) var(--e-3);
    background: var(--fondo-suave);
    border-bottom: var(--linea) solid var(--borde);
}
td { padding: var(--e-2) var(--e-3); border-bottom: var(--linea) solid var(--borde); vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Acciones de la ficha del pedido, una debajo de otra con su explicación */
.acciones-pedido > form + form,
.acciones-pedido > .acciones-sueltas { margin-top: var(--e-5); padding-top: var(--e-4); border-top: var(--linea) solid var(--borde); }
.acciones-sueltas { display: flex; gap: var(--e-3); flex-wrap: wrap; }
.ficha-datos dd .boton-mini { margin-left: var(--e-2); }

/* Pastilla con el ID del servicio, delante de su nombre */
.pastilla-id {
    display: inline-block; vertical-align: 1px;
    padding: 1px var(--e-2); margin-right: var(--e-1);
    border: var(--linea) solid var(--borde); border-radius: var(--radio);
    background: var(--fondo-suave);
    font-size: var(--t-1); font-variant-numeric: tabular-nums;
    color: var(--gris); text-decoration: none;
}
a.pastilla-id:hover { color: var(--tinta); border-color: var(--borde-fuerte, var(--gris)); }

/* El enlace del pedido: se ve y se pulsa, pero recortado para que una URL
   larga no empuje al resto de columnas fuera de la pantalla */
.celda-enlace { max-width: 220px; }
/* El nombre del servicio y el enlace se acomodan en su columna en vez de
   estirarla: el alto de la fila es espacio que la tabla ya tiene ocupado por
   las otras diez columnas, y el ancho no. Es como lo pinta JAP.

   Las URL no traen espacios donde partir, así que se parten por donde caigan;
   si no, una sola de Facebook decide el ancho de toda la columna. */
/* La columna de cantidades del pedido masivo va plegada: es la excepción, casi
   todos los envíos llevan la misma cantidad en todos los enlaces. */
#detalle-cantidades > summary, #detalle-pegado > summary {
    cursor: pointer; color: var(--gris); font-size: var(--t-2);
    margin-bottom: var(--e-2);
}
#detalle-cantidades > textarea { max-width: 220px; }
.aviso-cuenta { color: var(--peligro); }

.celda-servicio { max-width: 220px; }
.celda-enlace-envuelto { max-width: 200px; overflow-wrap: anywhere; }
.celda-enlace a {
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Envoltorio para las tablas de muchas columnas: se desplazan dentro de su
   tarjeta en vez de sobresalir y arrastrar la página entera. */
.tabla-ancha { overflow-x: auto; border-radius: var(--radio); }
.tabla-ancha table { min-width: 100%; width: max-content; }
tbody tr:hover td { background: var(--fondo-suave); }
tfoot th { border-top: var(--linea) solid var(--borde); border-bottom: none; color: var(--tinta); font-weight: var(--p-fuerte); }

/* ---- Formularios ---- */
label { display: block; font-size: var(--t-3); font-weight: var(--p-medio); margin-bottom: var(--e-1); }
/* Controles de 50px con letra de 16px, medidos en JAP */
input, select, textarea {
    width: 100%; font: inherit; font-size: var(--t-4); color: var(--tinta);
    /* Sin esta altura de línea el navegador da 'normal' a los desplegables y
       salen 4px más bajos que los campos de texto: la fila queda desnivelada */
    line-height: 1.5;
    padding: var(--e-3) var(--e-4);
    border: var(--linea) solid var(--borde-control); border-radius: var(--radio-control);
    background: var(--fondo-suave);
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--acento); background: var(--fondo);
}
.campo { margin-bottom: var(--e-4); }
.campos-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-4); }
.campos-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--e-4); }
@media (max-width: 900px) { .campos-3 { grid-template-columns: 1fr; } }

/* Acceso con Google: separador "o" y botón claro con el logo */
.separador-o {
    display: flex; align-items: center; gap: var(--e-3);
    margin: var(--e-4) 0; color: var(--gris); font-size: var(--t-2);
}
.separador-o::before, .separador-o::after {
    content: ''; flex: 1; border-top: var(--linea) solid var(--borde);
}
.boton-google {
    display: flex; align-items: center; justify-content: center; gap: var(--e-2);
    width: 100%; text-align: center;
    background: var(--fondo); color: var(--tinta);
    border: var(--linea) solid var(--borde-control);
    text-transform: none; letter-spacing: 0; font-weight: var(--p-medio);
}
.boton-google:hover { background: var(--fondo-suave); text-decoration: none; opacity: 1; }

/* Tabla de niveles con sellos, como la del panel de referencia */
.tabla-niveles th, .tabla-niveles td { text-align: center; padding-top: var(--e-4); padding-bottom: var(--e-4); }
.tabla-niveles th:first-child, .tabla-niveles td:first-child { text-align: left; }
.tabla-niveles thead th {
    text-transform: uppercase; letter-spacing: .04em;
    font-size: var(--t-2); color: var(--gris);
}
.tabla-niveles thead th.nivel-actual { color: var(--acento); }
.tabla-niveles .umbral { font-weight: var(--p-normal); font-size: var(--t-1); text-transform: none; letter-spacing: 0; }
.tabla-niveles .sello { color: color-mix(in srgb, var(--gris) 38%, var(--fondo)); }
.tabla-niveles .sello.sello-actual { color: var(--acento); }
.tabla-niveles .sello svg.ico { width: 20px; height: 20px; }
.tabla-niveles td.nivel-actual { background: color-mix(in srgb, var(--acento) 4%, var(--fondo)); }

/* Activación del 2FA: el QR a la izquierda, los pasos a la derecha */
.fila-2fa { display: flex; gap: var(--e-6); align-items: flex-start; flex-wrap: wrap; }
.qr-2fa {
    background: #ffffff; padding: var(--e-3);
    border: var(--linea) solid var(--borde-tarjeta); border-radius: var(--radio);
    line-height: 0; flex-shrink: 0;
}

/* Cabecera de Mi cuenta: nombre a la izquierda, insignia de nivel a la derecha */
.cuenta-cabecera {
    display: flex; justify-content: space-between; align-items: center;
    gap: var(--e-4); flex-wrap: wrap;
    padding-bottom: var(--e-4); margin-bottom: var(--e-4);
    border-bottom: var(--linea) solid var(--borde);
}
.ayuda { font-size: var(--t-1); color: var(--gris); margin-top: var(--e-1); }

/* Botones de 50px: 12px×32px de relleno y letra de 16px, medidos en JAP */
button, .boton {
    font: inherit; font-size: var(--t-4); font-weight: var(--p-fuerte);
    text-transform: uppercase; letter-spacing: .03em;
    padding: var(--e-3) var(--e-6);
    border: var(--linea) solid var(--acento); border-radius: var(--radio-control);
    background: var(--acento); color: var(--sobre-acento); cursor: pointer;
}
/* Un enlace-botón en línea desborda su caja de línea y tapa el texto de arriba */
a.boton { display: inline-block; text-align: center; }
.boton-mini { text-transform: none; letter-spacing: 0; }
/* El botón principal de un formulario ocupa el ancho completo, como manda el género */
.pedido-form > button[type="submit"],
.auth form > button[type="submit"] { width: 100%; padding: var(--e-3) var(--e-5); }
button:hover, .boton:hover { opacity: .92; text-decoration: none; }
.boton-borde { background: var(--fondo); color: var(--acento); }
.boton-mini { font-size: var(--t-1); padding: var(--e-1) var(--e-2); }
.boton-peligro { background: var(--fondo); color: var(--peligro); border-color: var(--borde); }

/* ---- Estados: insignias sólidas estilo JAP ---- */
.estado {
    display: inline-block;
    font-size: var(--t-1); font-weight: var(--p-fuerte); white-space: nowrap;
    color: var(--sobre-acento);
    padding: 2px var(--e-2); border-radius: var(--radio-control);
    background: var(--gris);
}
.estado-completed, .estado-approved { background: var(--acento); }
.estado-partial, .estado-processing, .estado-pending, .estado-in_progress { background: var(--aviso); }
.estado-canceled { background: var(--gris); }
.estado-error, .estado-rejected { background: var(--peligro); }

/* ---- Avisos ---- */
.aviso-ok, .aviso-error, .aviso-info {
    padding: var(--e-3) var(--e-4);
    border: var(--linea) solid var(--borde); border-radius: var(--radio);
    font-size: var(--t-2);
}
.aviso-ok { border-left: 2px solid var(--acento); }
.aviso-error { border-left: 2px solid var(--peligro); color: var(--peligro); }
.aviso-info { border-left: 2px solid var(--borde-fuerte, var(--gris)); color: var(--gris); }
.aviso-info strong { color: var(--tinta); }

/* Contraseña temporal recién generada: se enseña una vez y no vuelve */
.clave-temporal {
    padding: var(--e-4);
    border: var(--linea) solid var(--acento); border-radius: var(--radio);
    margin-bottom: var(--e-4);
}
.clave-caja {
    display: flex; align-items: center; gap: var(--e-3);
    margin: var(--e-3) 0;
}
.clave-caja code {
    font-size: var(--t-5); font-weight: var(--p-fuerte);
    letter-spacing: 1px;
    padding: var(--e-2) var(--e-3);
    background: var(--fondo-suave); border-radius: var(--radio);
    user-select: all;
}

/* ---- Fila de cifras (una superficie, líneas verticales) ---- */
.cifras {
    display: flex;
    border: var(--linea) solid var(--borde); border-radius: var(--radio);
    background: var(--fondo);
}
.contenido > .cifras { border: none; padding: 0; overflow: hidden; }
.cifras > div { flex: 1; padding: var(--e-4); }
.cifras > div + div { border-left: var(--linea) solid var(--borde); }
.cifras .dato { font-size: var(--t-5); font-weight: var(--p-fuerte); font-variant-numeric: tabular-nums; }
.cifras .etiqueta { font-size: var(--t-1); color: var(--gris); }
/* Con cinco cifras la fila no cabe en móvil: pasan a dos columnas */
@media (max-width: 760px) {
    .cifras { flex-wrap: wrap; }
    .cifras > div { flex: 1 1 50%; }
}

/* ---- Auth ---- */
.auth {
    max-width: 380px; margin: 10vh auto; padding: var(--e-6);
    background: var(--fondo);
    border: var(--linea) solid var(--borde); border-radius: var(--radio);
}
.auth .brand { padding: 0; margin-bottom: var(--e-6); font-size: var(--t-5); }
.auth form { margin-top: var(--e-5); }
.auth .pie-auth { margin-top: var(--e-5); font-size: var(--t-2); color: var(--gris); }

/* ---- Paginación ---- */
/* La barra va centrada bajo la tabla. Pegada a la izquierda de una tabla de
   mil filas se pierde, y en un monitor ancho obliga a cruzar media pantalla
   para pasar de página. */
.paginacion { display: flex; justify-content: center; gap: var(--e-2); font-size: var(--t-2); flex-wrap: wrap; }
.paginacion a, .paginacion span {
    padding: var(--e-1) var(--e-2);
    border: var(--linea) solid var(--borde); border-radius: var(--radio);
}
.paginacion span[aria-current] { border-color: var(--acento); color: var(--acento); font-weight: var(--p-medio); }

.filtros { display: flex; gap: var(--e-3); align-items: end; flex-wrap: wrap; }
.filtros .campo { margin-bottom: 0; }
.filtros input, .filtros select { width: auto; }

.mono { font-family: ui-monospace, Consolas, monospace; font-size: var(--t-2); }
/* Bloques de ejemplo de la página de API */
.bloque-codigo {
    background: var(--fondo-suave);
    border: var(--linea) solid var(--borde-control);
    border-radius: var(--radio-control);
    padding: var(--e-3) var(--e-4);
    overflow-x: auto; white-space: pre;
    max-width: 720px;
}
.gris { color: var(--gris); }
.derecha { text-align: right; }
code {
    font-family: ui-monospace, Consolas, monospace; font-size: var(--t-2);
    background: var(--fondo-suave); padding: 1px var(--e-1); border-radius: var(--radio);
}

/* ---- Filas y categorías reordenables ---- */
td.asa, .asa-cat { cursor: grab; color: var(--gris); user-select: none; }
td.asa { width: 20px; }
td.asa:hover, .asa-cat:hover { color: var(--tinta); }
tr.arrastrando, details.arrastrando { opacity: .4; }
tbody.guardando, #categorias.guardando { opacity: .6; }

/* ---- Selector de color de acento ---- */
.opcion-color {
    display: flex; align-items: center; gap: var(--e-2); cursor: pointer;
    padding: var(--e-2) var(--e-3);
    border: var(--linea) solid var(--borde); border-radius: var(--radio);
    font-size: var(--t-2); font-weight: var(--p-normal);
    /* También funciona como botón: sin mayúsculas ni fondo de acento */
    background: var(--fondo); color: var(--tinta);
    text-transform: none; letter-spacing: 0; text-align: left;
}
.opcion-color:hover { background: var(--fondo-suave); opacity: 1; }
.opcion-color .muestra { width: 18px; height: 18px; border-radius: var(--radio); flex-shrink: 0; }

/* Campo de código de color con su muestrario al lado */
.campo-color { display: flex; gap: var(--e-2); align-items: stretch; }
.campo-color input[type="text"] { flex: 1; font-variant-numeric: tabular-nums; }
.campo-color input[type="color"] {
    width: 44px; padding: var(--e-1); flex-shrink: 0;
    border: var(--linea) solid var(--borde-control); border-radius: var(--radio-control);
    background: var(--fondo-suave); cursor: pointer;
}

/* ---- Interruptor deslizante ---- */
.interruptor { display: inline-flex; align-items: center; gap: var(--e-2); cursor: pointer; }
.interruptor input { position: absolute; opacity: 0; width: 0; height: 0; }
.interruptor .pista {
    width: 34px; height: 18px; flex-shrink: 0;
    background: var(--borde); border-radius: 9px;
    position: relative; transition: background .12s linear;
}
.interruptor .pista::after {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 14px; height: 14px; background: #fff; border-radius: 50%;
    transition: transform .12s linear;
}
.interruptor input:checked + .pista { background: var(--acento); }
.interruptor input:checked + .pista::after { transform: translateX(16px); }
.interruptor input:focus-visible + .pista { outline: 2px solid var(--acento); outline-offset: 2px; }
.interruptor input:disabled + .pista { opacity: .5; cursor: not-allowed; }
.interruptor .texto { font-size: var(--t-2); font-weight: var(--p-normal); }

/* ---- Estrella de favorito ---- */
.estrella {
    font: inherit; font-size: var(--t-4); line-height: 1;
    padding: 0; background: none; border: none;
    color: var(--gris); cursor: pointer;
}
.estrella:hover { color: var(--tinta); opacity: 1; }
.estrella.activa { color: var(--acento); }

/* Banner del último aviso, descartable, como el de JAP */
.banner-aviso {
    display: flex; align-items: center; justify-content: space-between; gap: var(--e-4);
    margin: var(--e-4) var(--e-6) 0;
    padding: var(--e-3) var(--e-4);
    background: color-mix(in srgb, var(--acento) 8%, var(--fondo));
    border: var(--linea) solid color-mix(in srgb, var(--acento) 18%, var(--fondo));
    border-radius: var(--radio);
    font-size: var(--t-3); color: var(--tinta);
}
.banner-aviso button {
    background: none; border: none; color: var(--tinta); cursor: pointer;
    font-size: var(--t-5); line-height: 1; padding: 0 var(--e-1);
}
@media (min-width: 1200px) { .banner-aviso { max-width: 1140px; margin-left: auto; margin-right: auto; } }

/* Referidos al estilo JAP: enlace a la izquierda, estadísticas con círculos a la derecha */
.fila-referidos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--e-6); align-items: start; }
.stats-referidos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-4); }
.stat-ref { display: flex; align-items: center; gap: var(--e-3); font-size: var(--t-2); }
.stat-ref strong { font-size: var(--t-4); font-variant-numeric: tabular-nums; }
.icono-circulo {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex-shrink: 0;
    background: color-mix(in srgb, var(--acento) 10%, var(--fondo));
    color: var(--acento); border-radius: 999px;
}
.icono-circulo svg.ico { width: 18px; height: 18px; }
@media (max-width: 900px) {
    .fila-referidos { grid-template-columns: 1fr; }
    .stats-referidos { grid-template-columns: 1fr 1fr; }
}

/* Aviso previo a abrir ticket, como el recuadro de términos de JAP */
.aviso-terminos {
    padding: var(--e-4);
    background: color-mix(in srgb, var(--aviso) 9%, var(--fondo));
    border: var(--linea) solid color-mix(in srgb, var(--aviso) 22%, var(--fondo));
    border-radius: var(--radio);
    font-size: var(--t-3); color: var(--tinta);
}
.aviso-terminos a { color: var(--tinta); text-decoration: underline; font-weight: var(--p-medio); }

/* Sobre de respuesta sin leer en la lista de tickets */
.sobre-nuevo { color: var(--acento); margin-left: var(--e-1); vertical-align: middle; }
.sobre-nuevo svg.ico { width: 15px; height: 15px; }

/* ---- Avisos del equipo en Novedades ---- */
.avisos-equipo { display: flex; flex-direction: column; gap: var(--e-3); }
.aviso-equipo {
    background: var(--fondo); border: var(--linea) solid var(--borde-tarjeta);
    border-radius: var(--radio); box-shadow: var(--sombra); padding: var(--e-4);
}
.aviso-equipo-cabecera {
    display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap;
    margin-bottom: var(--e-2);
}
.aviso-equipo-cabecera .gris { margin-left: auto; font-size: var(--t-1); }

/* ---- Sorteos ---- */
.sorteo {
    display: flex; justify-content: space-between; gap: var(--e-5); align-items: flex-start;
    background: var(--fondo); border: var(--linea) solid var(--borde-tarjeta);
    border-radius: var(--radio); box-shadow: var(--sombra); padding: var(--e-5);
}
.sorteo + .sorteo { margin-top: var(--e-4); }
.sorteo-titulo { font-size: var(--t-5); font-weight: var(--p-fuerte); margin-bottom: var(--e-2); }
.sorteo-accion { flex-shrink: 0; text-align: right; }

/* ---- Barra de avance del pedido ---- */
.avance {
    width: 110px; height: 4px;
    background: var(--borde); border-radius: var(--radio);
    overflow: hidden; margin-bottom: var(--e-1);
}
.avance-barra { height: 100%; background: var(--acento); }

/* ---- Filtro por red social: rejilla de botones grandes ---- */
/* Botones de red anchos y centrados, como la parrilla de JAP */
.filtro-plataformas {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: var(--e-3);
}
.filtro-plataformas .chip {
    font: inherit; font-size: var(--t-3); font-weight: var(--p-medio);
    text-transform: none; letter-spacing: 0;
    padding: var(--e-4) var(--e-3); text-align: center; text-decoration: none;
    background: var(--fondo-suave); color: var(--tinta);
    border: var(--linea) solid var(--borde-tarjeta); border-radius: var(--radio-control);
    cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Los botones de red también se encienden en acento al pasar el cursor */
.filtro-plataformas .chip:hover { color: var(--acento); background: var(--fondo); opacity: 1; text-decoration: none; }
.filtro-plataformas .chip.activo {
    color: var(--sobre-acento); border-color: var(--acento); font-weight: var(--p-fuerte);
    background: var(--acento);
}

/* ---- Nuevo pedido: tarjeta del formulario + tarjeta de la ficha ---- */
.pedido { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--e-4); align-items: start; scroll-margin-top: var(--e-4); }
.contenido > .pedido { background: transparent; box-shadow: none; padding: 0; }
.pedido-form {
    min-width: 0;
    background: var(--fondo); border: var(--linea) solid var(--borde-tarjeta);
    border-radius: var(--radio);
    box-shadow: var(--sombra); padding: var(--e-5);
}
.pedido-ficha {
    background: var(--fondo); border: var(--linea) solid var(--borde-tarjeta);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: var(--e-4); font-size: var(--t-2);
    /* Acompaña el desplazamiento, como la columna derecha de JAP */
    position: sticky; top: var(--e-4); align-self: start;
}
.pedido-ficha .ficha-cabecera {
    display: flex; flex-direction: column; gap: var(--e-3);
    padding-bottom: var(--e-4); margin-bottom: var(--e-4);
    border-bottom: var(--linea) solid var(--borde);
}
.pedido-ficha .ficha-titulo { font-weight: var(--p-medio); margin-bottom: var(--e-3); }
/* Rejilla de datos con el valor en acento, como en JAP */
.ficha-datos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3) var(--e-4); }
.ficha-datos dt { color: var(--tinta); font-weight: var(--p-fuerte); font-size: var(--t-1); }
.ficha-datos dd { color: var(--acento); font-weight: var(--p-medio); margin-top: var(--e-1); }
.ficha-datos > div {
    display: flex; justify-content: space-between; gap: var(--e-3);
    padding: var(--e-2) 0;
    border-bottom: var(--linea) solid var(--borde);
}
.ficha-datos dt { color: var(--gris); }
.ficha-datos dd { font-variant-numeric: tabular-nums; }
.ficha-desc { margin-top: var(--e-3); color: var(--gris); white-space: pre-wrap; }

@media (max-width: 900px) {
    .pedido { grid-template-columns: 1fr; }
}

/* ---- Barra de perfil (avisos y cuenta) ---- */
.barra-perfil { display: inline-flex; gap: var(--e-2); align-items: center; }
.barra-perfil .campana > summary { border-color: transparent; font-size: var(--t-3); }
.barra-perfil .opciones .vacio {
    display: block; padding: var(--e-2) var(--e-3);
    font-size: var(--t-2); color: var(--gris); white-space: nowrap;
}
.opcion-tema { padding: var(--e-2) var(--e-3); width: 100%; }

/* ---- Menú de acciones por fila ---- */
.menu-acciones { position: relative; display: inline-block; }
.menu-acciones > summary {
    list-style: none; cursor: pointer;
    font-size: var(--t-1); font-weight: var(--p-medio);
    padding: var(--e-1) var(--e-2);
    border: var(--linea) solid var(--borde); border-radius: var(--radio);
    color: var(--acento); white-space: nowrap;
}
.menu-acciones > summary::-webkit-details-marker { display: none; }
.menu-acciones > summary:hover { background: var(--fondo-suave); }
.menu-acciones[open] > summary { border-color: var(--acento); }
.menu-acciones .opciones {
    position: absolute; right: 0; top: calc(100% + 2px); z-index: 20;
    min-width: 190px; text-align: left;
    background: var(--fondo);
    border: var(--linea) solid var(--borde-tarjeta); border-radius: var(--radio);
    box-shadow: var(--sombra);
}
/* Todas las tablas llevan `overflow: hidden` para que el radio recorte la
   cabecera, y eso recortaba también el menú de la última fila: se quedaba a
   medias y no se llegaba a «Eliminar». Mientras hay un menú abierto, la tabla
   deja de recortar. Va en CSS y no solo en JavaScript a propósito: si el
   script no llega a cargar, el menú se sigue viendo entero. */
table:has(details.menu-acciones[open]) { overflow: visible; }

/* Dentro de una tabla que se desplaza, un menú colocado en absoluto lo recorta
   el propio contenedor. Al abrirlo se pasa a posición fija sobre la ventana
   (las medidas se las pone menus.js) y así se ve entero. */
.menu-acciones .opciones.suelto {
    position: fixed; right: auto; top: auto; z-index: 60;
}

/* Selectores de moneda e idioma en la barra: texto plano, sin caja */
.menu-acciones.selector > summary {
    border: none; background: none;
    font-size: var(--t-2); color: var(--gris);
    padding: var(--e-1) var(--e-2);
}
.menu-acciones.selector > summary:hover { color: var(--tinta); background: var(--fondo-suave); border-radius: var(--radio-control); }
.menu-acciones.selector svg.ico { width: 14px; height: 14px; }
.menu-acciones .opciones a,
.menu-acciones .opciones button {
    display: block; width: 100%; text-align: left;
    padding: var(--e-2) var(--e-3);
    font-size: var(--t-2); font-weight: var(--p-normal);
    background: none; border: none; border-radius: 0;
    color: var(--tinta); text-decoration: none; cursor: pointer;
}
.menu-acciones .opciones a:hover,
.menu-acciones .opciones button:hover { background: var(--fondo-suave); text-decoration: none; opacity: 1; }
.menu-acciones .opciones .peligro { color: var(--peligro); }
.menu-acciones .opciones hr { border: none; border-top: var(--linea) solid var(--borde); margin: 0; }

/* ---- Categorías plegables ---- */
.grupo-categoria > summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; gap: var(--e-3);
    padding: var(--e-3);
    border-bottom: var(--linea) solid var(--borde);
    font-weight: var(--p-medio); font-size: var(--t-3);
}
.grupo-categoria > summary::-webkit-details-marker { display: none; }
.grupo-categoria > summary:hover { background: var(--fondo-suave); }
.grupo-categoria > summary::before { content: "▸"; color: var(--gris); }
.grupo-categoria[open] > summary::before { content: "▾"; }
.grupo-categoria .conteo { color: var(--gris); font-weight: var(--p-normal); font-size: var(--t-2); }
.grupo-categoria .acciones-cat { margin-left: auto; display: flex; gap: var(--e-2); align-items: center; }

/* ---- Encabezados ordenables ---- */
th a.orden { color: var(--gris); text-decoration: none; white-space: nowrap; }
th a.orden:hover { color: var(--tinta); }
th a.orden-activo { color: var(--tinta); font-weight: var(--p-medio); }
th a.orden .flecha { margin-left: var(--e-1); font-size: var(--t-1); }

/* ---- Barra de acciones en lote ---- */
/* La barra de marcados del cliente y la de lote del admin son la misma cosa:
   lo que se puede hacer con lo que hay marcado, pegado encima de la tabla. */
.barra-lote, .barra-marcados {
    display: flex; gap: var(--e-3); align-items: center; flex-wrap: wrap;
    padding: var(--e-2) var(--e-3);
    border: var(--linea) solid var(--borde); border-bottom: none;
    border-radius: var(--radio) var(--radio) 0 0;
    font-size: var(--t-2);
}
.barra-lote select { font-size: var(--t-2); padding: var(--e-1) var(--e-2); }
.barra-marcados { color: var(--gris); }
.barra-marcados[hidden] { display: none; }
#ticket-marcados { margin-left: auto; }

/* ---- Pestañas segmentadas estilo JAP: la activa va rellena del acento ---- */
/* Pestañas como botones separados en mayúsculas, al estilo NEW ORDER / MY FAVORITE */
.pestañas {
    display: flex; flex-wrap: wrap; gap: var(--e-3);
    padding: var(--e-2);
    background: var(--fondo);
    border-radius: var(--radio);
}
.pestañas a {
    color: var(--tinta); text-decoration: none;
    padding: var(--e-3) var(--e-5);
    font-size: var(--t-3); font-weight: var(--p-fuerte);
    text-transform: uppercase; letter-spacing: .03em;
    background: var(--fondo-suave);
    border: var(--linea) solid var(--borde-tarjeta);
    border-radius: var(--radio-control);
}
.pestañas a:hover { color: var(--tinta); text-decoration: none; }
.pestañas a.activo { color: var(--sobre-acento); background: var(--acento); border-color: var(--acento); }
.pestañas a span {
    font-variant-numeric: tabular-nums; color: var(--gris);
    font-size: var(--t-1); margin-left: var(--e-1);
}
.pestañas a.activo span { color: var(--sobre-acento); }
/* El contador rojo conserva su texto legible, esté la pestaña activa o no */
/* Contador de pendientes en naranja de acento, como la pastilla de Tickets de JAP */
.aviso-conteo {
    display: inline-block;
    color: var(--sobre-acento); background: var(--acento);
    font-size: var(--t-1); font-weight: var(--p-medio); line-height: 1.5;
    padding: 0 var(--e-2); border-radius: var(--radio);
    font-variant-numeric: tabular-nums;
}
/* El contador dentro de una pestaña: `.pestañas a span` le ganaba por
   especificidad y lo dejaba gris sobre el acento (1.08:1). Se repite aquí
   con el mismo peso para que conserve su texto legible. */
.pestañas a span.aviso-conteo { color: var(--sobre-acento); background: var(--acento); }
/* Dentro de una pestaña activa (fondo de acento) el contador se invierte */
.pestañas a.activo .aviso-conteo,
.pestañas a.activo span.aviso-conteo { background: var(--sobre-acento); color: var(--acento); }

/* ---- Administración: barra horizontal ---- */
.admin-shell { min-height: 100vh; display: flex; flex-direction: column; }
.admin-cabecera { background: var(--fondo); box-shadow: var(--sombra); position: relative; z-index: 4; }
.admin-cabecera-fila {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--e-3) var(--e-6);
    border-bottom: var(--linea) solid var(--borde);
    font-size: var(--t-2);
}
.admin-nav {
    display: flex; gap: var(--e-1); padding: var(--e-2) var(--e-6);
    overflow-x: auto; white-space: nowrap;
    /* La barrita de abajo sobra: la cinta se coloca sola y se puede mover con
       la rueda o arrastrándola. Se queda desplazable, solo deja de verse. */
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    cursor: grab;
}
.admin-nav::-webkit-scrollbar { display: none; }
.admin-nav.arrastrando { cursor: grabbing; scroll-behavior: auto; user-select: none; }

/* Degradado en el borde por el que queda menú, para que se note que hay más.
   Lo ponen y lo quitan las clases que gestiona barra-admin.js. */
.admin-nav.hay-mas-izq { mask-image: linear-gradient(to right, transparent, #000 32px); }
.admin-nav.hay-mas-der { mask-image: linear-gradient(to left, transparent, #000 32px); }
.admin-nav.hay-mas-izq.hay-mas-der {
    mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
}

/* Quien prefiera menos movimiento, que no vea el desplazamiento animado */
@media (prefers-reduced-motion: reduce) {
    .admin-nav { scroll-behavior: auto; }
}
.admin-nav a {
    color: var(--gris); padding: var(--e-2) var(--e-3);
    font-size: var(--t-2); font-weight: var(--p-medio); text-decoration: none;
    border-radius: var(--radio-control);
}
.admin-nav a:hover {
    color: var(--acento); background: var(--fondo-suave); text-decoration: none;
    box-shadow: inset 0 -3px 0 var(--acento);
}
.admin-nav a.activo { color: var(--acento); background: var(--fondo-suave); font-weight: var(--p-fuerte); }
.admin-nav a.volver { margin-left: auto; }
/* El admin aprovecha toda la pantalla: sus tablas tienen muchas columnas y
   cualquier tope deja los lados vacíos en un monitor ancho. Los formularios
   sueltos siguen centrados con .col-admin, que ahí sí molesta el ancho. */
.contenido-admin { max-width: none; width: auto; margin: var(--e-4); }

/* Densidad del admin.
   El panel del cliente entra a mirar dos cosas y se va: le viene bien el aire.
   Tú te pasas el día aquí revisando tablas de mil filas, así que esta zona va
   apretada: menos margen, menos relleno y las pestañas en una sola fila. Con
   esto la primera fila de la tabla sube más de media pantalla. */
.contenido-admin > * { padding: var(--e-4); }
.contenido-admin > * + * { margin-top: var(--e-3); }
.contenido-admin > .titulo { padding-bottom: var(--e-3); }
.contenido-admin td, .contenido-admin th { padding: var(--e-2) var(--e-3); }
.contenido-admin .pestañas { padding: var(--e-1); gap: var(--e-2); }
.contenido-admin .pestañas a {
    padding: var(--e-2) var(--e-3);
    font-size: var(--t-2); letter-spacing: 0;
}
.contenido-admin .filtros { gap: var(--e-3) var(--e-4); }

/* Cabecera de una lista: pestañas a la izquierda, buscador a la derecha */
.barra-lista { align-items: center; }
.busca-lista {
    display: flex; align-items: center; gap: var(--e-2);
    margin-left: auto;
}
.busca-lista input, .busca-lista select {
    width: auto; font-size: var(--t-2);
    padding: var(--e-2) var(--e-3);
}
.busca-lista input { min-width: 150px; }
/* Alta plegada dentro de la barra: el formulario aparece bajo su botón */
.alta-plegable { margin-left: auto; position: relative; }
.alta-plegable > summary { list-style: none; cursor: pointer; }
.alta-plegable > summary::-webkit-details-marker { display: none; }
.alta-plegable > form {
    position: absolute; right: 0; top: calc(100% + var(--e-2)); z-index: 25;
    min-width: 520px; padding: var(--e-4);
    background: var(--fondo);
    border: var(--linea) solid var(--borde-tarjeta); border-radius: var(--radio);
    box-shadow: var(--sombra);
}
@media (max-width: 900px) {
    .alta-plegable { margin-left: 0; position: static; }
    .alta-plegable > form { position: static; min-width: 0; }
}

/* Formulario de alta plegado en su sitio: cerrado ocupa una línea, abierto se
   despliega entero. Lo normal al entrar a una sección es mirar la lista, no
   crear algo nuevo, así que se abre solo cuando hace falta. */
.contenido-admin > .alta-inline { padding: 0; }
.alta-inline > summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; gap: var(--e-2);
    padding: var(--e-3) var(--e-4);
    font-size: var(--t-3); font-weight: var(--p-medio); color: var(--acento);
}
.alta-inline > summary::-webkit-details-marker { display: none; }
.alta-inline > summary::before { content: '+'; font-weight: var(--p-fuerte); }
.alta-inline[open] > summary::before { content: '−'; }
.alta-inline[open] > summary { border-bottom: var(--linea) solid var(--borde); }
.alta-inline > summary:hover { background: var(--fondo-suave); }
.alta-inline > form, .alta-inline > .cuerpo-alta { padding: var(--e-4); }

/* ---- Importación guiada de servicios ---- */
.contenido-admin > .pasos-import {
    display: flex; gap: var(--e-5); flex-wrap: wrap;
    list-style: none; font-size: var(--t-2); color: var(--gris);
}
.pasos-import li { display: flex; align-items: center; gap: var(--e-2); }
.pasos-import .paso-numero {
    width: 22px; height: 22px; flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: 50%; border: var(--linea) solid var(--borde);
    font-size: var(--t-1); font-variant-numeric: tabular-nums;
}
.pasos-import .actual { color: var(--tinta); font-weight: var(--p-medio); }
.pasos-import .actual .paso-numero { background: var(--acento); color: var(--sobre-acento); border-color: var(--acento); }
.pasos-import .hecho .paso-numero { border-color: var(--acento); color: var(--acento); }

.contenido-admin > .grupos-import { padding: 0; }
.grupo-import + .grupo-import { border-top: var(--linea) solid var(--borde); }
.grupo-import > summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap;
    padding: var(--e-3) var(--e-4);
}
.grupo-import > summary::-webkit-details-marker { display: none; }
.grupo-import > summary:hover { background: var(--fondo-suave); }
.grupo-import[data-todo-importado] > summary { opacity: .55; }
.grupo-import .acciones-grupo { margin-left: auto; display: flex; gap: var(--e-2); align-items: center; }
.grupo-import .acciones-grupo select { width: auto; font-size: var(--t-2); padding: var(--e-1) var(--e-2); }
.grupo-import > .tabla-ancha { border-top: var(--linea) solid var(--borde); }

/* El resumen de la lista, una línea suelta sin tarjeta */
.contenido-admin > .resumen-lista {
    background: none; border: none; box-shadow: none;
    padding: 0 var(--e-1); margin-top: var(--e-2);
    color: var(--gris); font-size: var(--t-2);
}
/* Cuando el resumen lleva un control al lado, va pegado al borde derecho */
.barra-resumen {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--e-3); flex-wrap: wrap;
    margin-bottom: var(--e-2);
}
@media (max-width: 900px) {
    .busca-lista { margin-left: 0; width: 100%; flex-wrap: wrap; }
    .busca-lista input { flex: 1 1 100%; }
}
.admin-shell .pie { margin-top: auto; }

/* Accesos del dashboard admin */
.accesos {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    border-radius: var(--radio);
    overflow: hidden; background: var(--fondo);
}
.contenido > .accesos { padding: 0; }
.accesos a {
    display: flex; flex-direction: column; padding: var(--e-4);
    color: var(--tinta); text-decoration: none;
    border-right: var(--linea) solid var(--borde);
    border-bottom: var(--linea) solid var(--borde);
    margin-right: -1px; margin-bottom: -1px;
}
.accesos a:hover { background: var(--fondo-suave); }
.accesos strong { display: block; font-weight: var(--p-fuerte); }
.accesos .dato-acceso { font-size: var(--t-5); font-weight: var(--p-fuerte); font-variant-numeric: tabular-nums; }
.accesos p { color: var(--gris); font-size: var(--t-1); }

/* Icono a la izquierda y cifra a la derecha, como en los paneles del sector */
.acceso-cabeza { display: flex; align-items: center; gap: var(--e-3); }
.acceso-texto { display: flex; flex-direction: column; gap: 2px; }
.acceso-icono {
    flex-shrink: 0;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border-radius: var(--radio);
    background: var(--tono-fondo);
    color: var(--tono);
}
.acceso-icono .ico { width: 24px; height: 24px; }

/* El pie se pega abajo aunque las tarjetas tengan textos de distinto largo */
.acceso-pie {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: auto; padding-top: var(--e-3);
    border-top: var(--linea) solid var(--borde);
    color: var(--acento); font-size: var(--t-1); font-weight: var(--p-medio);
}
.acceso-pie .ico { width: 16px; height: 16px; }
.accesos a:hover .acceso-pie .ico { transform: translateX(3px); }
.acceso-pie .ico { transition: transform .15s; }
.accesos p { margin: var(--e-3) 0 var(--e-4); }

/* Tonos de los iconos. Van en dos versiones porque un color que se lee sobre
   blanco se apaga sobre el fondo oscuro, y al revés. Todos por encima de 3:1. */
.tono-azul   { --tono: #1668b8; --tono-fondo: #1668b81f; }
/* Verde y ámbar van más oscuros de lo que pediría un icono: en el catálogo de
   integraciones la baldosa lleva una letra, y una letra es texto (4.5:1). */
.tono-verde  { --tono: #0d6b48; --tono-fondo: #0d6b481f; }
.tono-ambar  { --tono: #8a5308; --tono-fondo: #8a53081f; }
.tono-agua   { --tono: #0b6b78; --tono-fondo: #0b6b781f; }
.tono-rojo   { --tono: #b32d2d; --tono-fondo: #b32d2d1f; }
.tono-morado { --tono: #6b3fa0; --tono-fondo: #6b3fa01f; }

:root[data-tema="oscuro"] .tono-azul   { --tono: #4da3f0; --tono-fondo: #4da3f024; }
:root[data-tema="oscuro"] .tono-verde  { --tono: #35c78f; --tono-fondo: #35c78f24; }
:root[data-tema="oscuro"] .tono-ambar  { --tono: #e0a33c; --tono-fondo: #e0a33c24; }
:root[data-tema="oscuro"] .tono-agua   { --tono: #3fc0d4; --tono-fondo: #3fc0d424; }
:root[data-tema="oscuro"] .tono-rojo   { --tono: #f07070; --tono-fondo: #f0707024; }
:root[data-tema="oscuro"] .tono-morado { --tono: #a98cf0; --tono-fondo: #a98cf024; }

/* ---- Sitio público ---- */
/* La página va a ancho completo (cabecera, bandas y pie de borde a borde)
   y el contenido se centra en un lienzo de 1320px, como el container de JAP */
.publico { background: var(--fondo); min-height: 100vh; overflow-x: clip; }
.lienzo { max-width: 1320px; margin: 0 auto; padding-inline: var(--e-7); }
@media (max-width: 720px) { .lienzo { padding-inline: var(--e-4); } }

/* La cabecera queda fija arriba y la página se desliza por debajo, como en JAP */
.pub-cabecera {
    border-bottom: var(--linea) solid var(--borde);
    position: sticky; top: 0; z-index: 40;
    background: var(--fondo);
}
/* Tres zonas: marca · navegación · acciones. La del medio se estira, así
   que la navegación queda centrada sin depender de cuántos enlaces haya.
   Sin `wrap`: si algo no cabe, se encoge la navegación, no se parte la fila. */
.cabecera-fila {
    display: flex; align-items: center;
    gap: var(--e-5);
    padding-block: var(--e-4);
}
.cabecera-fila > .marca-pub { flex: 0 0 auto; }

.pub-nav {
    flex: 1 1 auto; min-width: 0;
    display: flex; justify-content: center; align-items: center;
    gap: var(--e-5);
    font-size: var(--t-3);
}
/* Enlaces de texto, no botones: así la jerarquía la marcan las acciones */
.pub-nav a {
    color: var(--tinta); text-decoration: none; white-space: nowrap;
    padding-block: var(--e-2);
    border-bottom: 2px solid transparent;
}
.pub-nav a:hover { color: var(--acento); text-decoration: none; }
.pub-nav a.activo { color: var(--acento); border-bottom-color: var(--acento); }

.pub-acciones { flex: 0 0 auto; display: flex; align-items: center; gap: var(--e-3); }

/* Idioma y tema: utilitarios, así que discretos y cuadrados */
.pub-utilidad {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; padding: 0; min-height: 0;
    background: none; border: var(--linea) solid var(--borde);
    border-radius: var(--radio-control);
    color: var(--gris); font-size: var(--t-2); font-weight: var(--p-medio);
    text-decoration: none;
}
.pub-utilidad:hover { color: var(--tinta); border-color: var(--tinta); text-decoration: none; }
.pub-utilidad svg.ico { width: 18px; height: 18px; }


/* El héroe va sobre una banda de fondo suave que cruza toda la pantalla,
   como el banner gris de JAP: así la sección no queda flotando en blanco */
.pub-hero {
    margin-inline: calc(50% - 50vw);
    padding-inline: calc(50vw - 50%);
    background: var(--fondo-suave);
    padding-block: var(--e-7);
    display: grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--e-6); align-items: center;
}
.pub-hero h1 { font-size: var(--t-6); font-weight: var(--p-fuerte); max-width: 560px; }
.pub-hero p { color: var(--gris); font-size: var(--t-4); margin-top: var(--e-3); max-width: 560px; }
.pub-hero .acciones { margin-top: var(--e-5); display: flex; gap: var(--e-3); }

/* Tarjeta de acceso incrustada en el hero, estilo JAP */
.tarjeta-acceso {
    background: var(--fondo); border: var(--linea) solid var(--borde-tarjeta);
    border-radius: var(--radio); box-shadow: var(--sombra); padding: var(--e-5);
}
.tarjeta-acceso h2 { margin-bottom: var(--e-4); }
.tarjeta-acceso .pie-acceso { margin-top: var(--e-4); font-size: var(--t-2); color: var(--gris); }

/* Pestañas de redes en la portada */
.panel-red {
    margin-top: var(--e-4); padding: var(--e-5);
    background: var(--fondo); border: var(--linea) solid var(--borde-tarjeta);
    border-radius: var(--radio); box-shadow: var(--sombra);
}
.panel-red h3 { margin-bottom: var(--e-2); }

/* Ventajas en rejilla */
.ventajas { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-4); }
.ventajas > div {
    background: var(--fondo); border: var(--linea) solid var(--borde-tarjeta);
    border-radius: var(--radio); box-shadow: var(--sombra); padding: var(--e-5);
}
.ventajas svg.ico { width: 22px; height: 22px; color: var(--acento); }
.ventajas h3 { margin: var(--e-3) 0 var(--e-2); font-size: var(--t-4); }
.ventajas p { color: var(--gris); font-size: var(--t-2); }

/* CTA con mini-tarjetas */
.cta-lider { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-6); align-items: center; }
.mini-tarjetas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); }
.mini-tarjetas > div {
    background: var(--fondo); border: var(--linea) solid var(--borde-tarjeta);
    border-radius: var(--radio); box-shadow: var(--sombra); padding: var(--e-4);
}
.mini-tarjetas strong { display: block; font-weight: var(--p-fuerte); margin-bottom: var(--e-1); }
.mini-tarjetas p { color: var(--gris); font-size: var(--t-2); }

/* Pasos con maqueta al lado */
.paso-maqueta {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-6);
    align-items: center; padding: var(--e-5) 0;
}
.paso-maqueta + .paso-maqueta { border-top: var(--linea) solid var(--borde); }
.paso-maqueta.invertido > div:first-child { order: 2; }
.paso-maqueta h3 { font-size: var(--t-5); margin-bottom: var(--e-2); }
.maqueta {
    background: var(--fondo); border: var(--linea) solid var(--borde-tarjeta);
    border-radius: var(--radio); box-shadow: var(--sombra); padding: var(--e-5);
    display: flex; flex-direction: column; gap: var(--e-3);
}
.maqueta-titulo { font-weight: var(--p-fuerte); }
.maqueta input, .maqueta select { width: 100%; }
.maqueta .boton { text-align: center; }
.maqueta .metodo {
    padding: var(--e-3); background: var(--fondo-suave);
    border-radius: var(--radio-control); font-weight: var(--p-medio);
}

.pub-seccion { padding: var(--e-6) 0; border-bottom: var(--linea) solid var(--borde); }
.pub-seccion > h2 { margin-bottom: var(--e-4); }
.pub-seccion .pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: var(--linea) solid var(--borde); border-radius: var(--radio); }
.pub-seccion .pasos > div { padding: var(--e-4); }
.pub-seccion .pasos > div + div { border-left: var(--linea) solid var(--borde); }
.pub-seccion .pasos strong { display: block; margin-bottom: var(--e-1); font-weight: var(--p-fuerte); }
.pub-seccion .pasos p { color: var(--gris); font-size: var(--t-2); }

/* Racimo de iconos del héroe, como la bola de JAP: círculos grandes superpuestos
   en dos variantes de color, colocados por coordenadas (--x/--y) y tamaño (--t) */
.ilustracion-redes { position: relative; min-height: 460px; }
.ilustracion-redes > span {
    position: absolute; left: var(--x); top: var(--y);
    width: var(--t); height: var(--t); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--fondo); border: var(--linea) solid var(--borde-tarjeta);
    color: var(--acento);
}
.ilustracion-redes > span.vivo { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.ilustracion-redes > span.oscuro { background: var(--tinta); border-color: var(--tinta); color: var(--fondo); }
.ilustracion-redes > span svg.ico { width: 50%; height: 50%; }

/* El racimo se mueve como en los exteriores de estos paneles: cada burbuja
   entra con un pequeño rebote y después deriva arriba y abajo, cada una a su
   ritmo, para que el bloque respire en vez de estar clavado.

   La entrada anima `scale` y la deriva anima `translate` —las propiedades
   sueltas, no `transform`—: dos animaciones sobre transform se pisan y la
   segunda mataría a la primera. */
@keyframes redes-aparecer {
    from { opacity: 0; scale: .4; }
    to   { opacity: 1; scale: 1; }
}
@keyframes redes-flotar {
    from { translate: 0 4px; }
    to   { translate: 0 -9px; }
}
.ilustracion-redes > span {
    animation:
        redes-aparecer .5s cubic-bezier(.2, .9, .3, 1.25) backwards,
        redes-flotar 6s ease-in-out infinite alternate;
}
/* El desfase de cada burbuja: la entrada escalonada (positivo) y la deriva
   empezada a mitad de ciclo (negativo), para que ninguna vaya a compás.
   Los números no siguen una fórmula a propósito: en fila india se nota. */
.ilustracion-redes > span:nth-child(1)  { animation-delay: .05s, -1.3s; }
.ilustracion-redes > span:nth-child(2)  { animation-delay: .30s, -4.1s; animation-duration: .5s, 7.4s; }
.ilustracion-redes > span:nth-child(3)  { animation-delay: .12s, -2.6s; animation-duration: .5s, 5.2s; }
.ilustracion-redes > span:nth-child(4)  { animation-delay: .48s, -0.8s; }
.ilustracion-redes > span:nth-child(5)  { animation-delay: .22s, -5.5s; animation-duration: .5s, 6.8s; }
.ilustracion-redes > span:nth-child(6)  { animation-delay: .08s, -3.4s; animation-duration: .5s, 7.9s; }
.ilustracion-redes > span:nth-child(7)  { animation-delay: .40s, -1.9s; animation-duration: .5s, 5.6s; }
.ilustracion-redes > span:nth-child(8)  { animation-delay: .18s, -4.7s; }
.ilustracion-redes > span:nth-child(9)  { animation-delay: .55s, -0.4s; animation-duration: .5s, 5.0s; }
.ilustracion-redes > span:nth-child(10) { animation-delay: .28s, -2.2s; animation-duration: .5s, 6.4s; }
.ilustracion-redes > span:nth-child(11) { animation-delay: .10s, -5.1s; animation-duration: .5s, 7.1s; }
.ilustracion-redes > span:nth-child(12) { animation-delay: .45s, -3.0s; }
.ilustracion-redes > span:nth-child(13) { animation-delay: .20s, -1.6s; animation-duration: .5s, 5.9s; }
.ilustracion-redes > span:nth-child(14) { animation-delay: .60s, -4.4s; animation-duration: .5s, 6.6s; }
.ilustracion-redes > span:nth-child(15) { animation-delay: .35s, -2.9s; animation-duration: .5s, 7.6s; }

/* Quien pidió menos movimiento en su sistema, lo tiene: todo quieto y visible */
@media (prefers-reduced-motion: reduce) {
    .ilustracion-redes > span { animation: none; }
}

/* Titular del héroe al tamaño de JAP, con subtítulo ligero */
.pub-hero h1 { font-size: 2.5rem; line-height: 1.15; }
.sub-hero {
    font-size: var(--t-5) !important; color: var(--tinta) !important;
    font-weight: var(--p-normal); margin-top: var(--e-4) !important;
}

/* Cabecera pública: enlaces como botones de borde al tamaño de JAP
   (mayúsculas, ~50px de alto y relleno generoso, como SIGN IN / SIGN UP) */
.boton-nav {
    display: inline-block; padding: var(--e-3) var(--e-6);
    border: var(--linea) solid var(--tinta); border-radius: var(--radio-control);
    font-size: var(--t-3); font-weight: var(--p-medio);
    text-transform: uppercase; letter-spacing: .03em;
    color: var(--tinta); text-decoration: none; white-space: nowrap;
}
.boton-nav:hover { background: var(--tinta); color: var(--fondo); text-decoration: none; }
/* Al ser <button>, el estilo global le pintaría el fondo de acento */
.boton-tema { min-height: 0; background: transparent; color: var(--tinta); }
.boton-tema:hover { background: var(--tinta); color: var(--fondo); }

/* La única sólida de toda la cabecera: la que quieres que pulsen.
   Va DESPUÉS de .boton-nav a propósito: las dos reglas tienen la misma
   especificidad, así que manda la última, y puesta antes el color de la
   base ganaba y el texto quedaba ilegible sobre el acento. */
.boton-nav-lleno {
    background: var(--acento); border-color: var(--acento); color: var(--sobre-acento);
}
.boton-nav-lleno:hover { background: var(--tinta); border-color: var(--tinta); color: var(--fondo); }
.boton-tema svg.ico { width: 18px; height: 18px; display: block; }

/* Los saltos por ancla (#acceso, #registro) descuentan la cabecera fija */
.publico [id] { scroll-margin-top: 96px; }

/* Buscador del héroe: aterriza en el catálogo ya filtrado */
.buscador-hero { display: flex; gap: var(--e-2); margin-top: var(--e-4); max-width: 560px; }
.buscador-hero input { flex: 1; }
.buscador-hero button { white-space: nowrap; }

/* Logo con variante para modo oscuro: se muestra el que toca según el tema */
.logo-oscuro { display: none; }
:root[data-tema="oscuro"] .logo-claro { display: none; }
:root[data-tema="oscuro"] .logo-oscuro { display: inline; }

/* La marca como imagen dentro del panel (barra lateral, cabecera admin, pie).
   Ojo: sin display aquí, para no pisar el ocultado de la variante que no toca */
.marca-logo { display: inline-flex; align-items: center; }
.marca-logo img { max-height: 34px; }

/* Marca con eslogan debajo, como el logo de JAP */
/* Marca y eslogan en la misma línea. Debajo sumaban tres renglones —el logo
   ya trae su propia bajada— y eso estiraba la cabecera de más. */
.marca-pub { display: inline-flex; align-items: center; gap: var(--e-3); }
.marca-pub .eslogan {
    font-size: var(--t-1); font-weight: var(--p-medio); color: var(--acento);
    text-transform: uppercase; letter-spacing: .08em;
    white-space: nowrap;
    padding-left: var(--e-3);
    border-left: var(--linea) solid var(--borde);
}
/* En estrecho manda el logo: el eslogan se lee en el héroe igualmente */
@media (max-width: 1080px) { .marca-pub .eslogan { display: none; } }
.hamburguesa {
    display: none; background: none; border: var(--linea) solid var(--borde);
    color: var(--tinta); padding: var(--e-2); min-height: 0;
}
.hamburguesa svg.ico { width: 22px; height: 22px; display: block; }
.pub-menu-movil { display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-4) 0; }
/* El display:flex de arriba le ganaría al atributo hidden */
.pub-menu-movil[hidden] { display: none; }
.pub-menu-movil .boton-nav { text-align: center; }

/* Acceso en caja ancha horizontal, como el signin del exterior viejo */
.acceso-ancho { max-width: 860px; margin: 0 auto; }
.acceso-fila { display: flex; flex-direction: column; }

/* Correo, contraseña y el botón, los tres en una rejilla y alineados por el
   borde de abajo. Antes el botón vivía en su propia columna al lado de todo el
   bloque de campos, así que empezaba a la altura de las ETIQUETAS y quedaba un
   renglón por encima de los campos. */
.acceso-linea {
    display: grid;
    grid-template-columns: 1fr 1fr minmax(200px, auto);
    gap: var(--e-4);
    align-items: end;
}
.acceso-opciones {
    display: flex; justify-content: space-between; align-items: center;
    gap: var(--e-3); flex-wrap: wrap; font-size: var(--t-2);
}
.casilla { display: inline-flex; align-items: center; gap: var(--e-2); cursor: pointer; }
.casilla input { width: 16px; height: 16px; accent-color: var(--acento); }
.acceso-boton button { width: 100%; }

/* Acordeón de respaldo, como el acc_section del exterior viejo */
.acordeon-respaldo details { border-bottom: var(--linea) solid var(--borde); }
.acordeon-respaldo summary {
    cursor: pointer; font-weight: var(--p-fuerte); padding: var(--e-3) 0;
    list-style: none; position: relative; padding-right: var(--e-6);
}
.acordeon-respaldo summary::-webkit-details-marker { display: none; }
.acordeon-respaldo summary::after {
    content: '+'; position: absolute; right: var(--e-2); color: var(--acento);
    font-size: var(--t-5); line-height: 1;
}
.acordeon-respaldo details[open] summary::after { content: '−'; }
.acordeon-respaldo p { color: var(--gris); font-size: var(--t-2); padding: 0 0 var(--e-3); max-width: 640px; }

/* Registro al pie con burbujas de chat, como el cierre del exterior viejo */
.registro-cierre { align-items: start; }
.burbujas-chat { display: grid; gap: var(--e-4); align-content: center; }
.burbuja { display: flex; align-items: flex-end; gap: var(--e-3); justify-content: flex-end; }
.burbuja p {
    background: var(--fondo); border: var(--linea) solid var(--borde-tarjeta);
    border-radius: var(--radio); border-bottom-right-radius: 0;
    box-shadow: var(--sombra); padding: var(--e-3) var(--e-4);
    font-size: var(--t-2); max-width: 360px;
}
.burbuja span {
    flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
    background: var(--acento); color: var(--sobre-acento);
    display: flex; align-items: center; justify-content: center;
    font-weight: var(--p-fuerte);
}

/* Mini-tarjetas con icono grande, como las cajas del exterior viejo */
.mini-tarjetas.con-iconos svg.ico { width: 28px; height: 28px; color: var(--acento); margin-bottom: var(--e-2); }

/* Marca en el pie público */

/* Cómo funciona: seis pasos numerados, como los de JAP */
.pasos-6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-4); }
.pasos-6 > div {
    background: var(--fondo); border: var(--linea) solid var(--borde-tarjeta);
    border-radius: var(--radio); box-shadow: var(--sombra); padding: var(--e-4);
}
.pasos-6 p { color: var(--gris); font-size: var(--t-2); margin-top: var(--e-3); }
/* Número + icono de trazo en el acento, como las tarjetas del tema viejo */
.paso-cabecera { display: flex; align-items: center; justify-content: space-between; }
.paso-cabecera svg.ico { width: 26px; height: 26px; color: var(--acento); }
.num-paso {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--acento); color: var(--sobre-acento);
    font-size: var(--t-4); font-weight: var(--p-fuerte);
}

/* Texto largo bajo "Mostrar más" en la sección de redes */
.panel-red .texto-largo { margin-top: var(--e-3); max-width: 720px; }

/* Lista de respaldo con vistos */
.lista-checks { list-style: none; display: grid; gap: var(--e-3); align-content: center; }
.lista-checks li { display: flex; align-items: center; gap: var(--e-3); font-weight: var(--p-medio); }
.lista-checks svg.ico { width: 20px; height: 20px; color: var(--acento); flex-shrink: 0; }

/* Carrusel de testimonios */
.testimonios { overflow: hidden; }
.testimonios-pista { display: flex; transition: transform .4s ease; }
.testimonio {
    flex: 0 0 100%; box-sizing: border-box; max-width: 100%;
    background: var(--fondo); border: var(--linea) solid var(--borde-tarjeta);
    border-radius: var(--radio); box-shadow: var(--sombra); padding: var(--e-5);
}
.testimonio blockquote { font-size: var(--t-4); max-width: 780px; }
.testimonio figcaption { margin-top: var(--e-4); font-weight: var(--p-fuerte); font-size: var(--t-2); }
.testimonios-puntos { display: flex; gap: var(--e-2); justify-content: center; margin-top: var(--e-4); }
.testimonios-puntos button {
    width: 10px; height: 10px; padding: 0; border-radius: 50%;
    background: var(--borde); border: none; min-height: 0;
}
.testimonios-puntos button.activo { background: var(--acento); }

/* Carrusel continuo de métodos de pago, como el slider de JAP:
   la pista lleva el contenido duplicado y se desplaza a la mitad en bucle */
.carrusel-metodos { overflow: hidden; }
.carrusel-pista { display: flex; width: max-content; animation: desfile-metodos 25s linear infinite; }
.carrusel-metodos:hover .carrusel-pista { animation-play-state: paused; }
.carrusel-grupo { display: flex; gap: var(--e-4); padding-right: var(--e-4); }
@keyframes desfile-metodos { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
    .carrusel-pista { animation: none; flex-wrap: wrap; width: auto; }
}
.logo-metodo {
    display: inline-flex; align-items: center; gap: var(--e-2);
    background: var(--fondo); border: var(--linea) solid var(--borde-tarjeta);
    border-radius: var(--radio); box-shadow: var(--sombra);
    padding: var(--e-4) var(--e-6); font-weight: var(--p-medio);
    min-width: 170px; justify-content: center; white-space: nowrap;
}
.logo-metodo svg.ico { width: 18px; height: 18px; color: var(--acento); }
.logo-palabra { font-size: var(--t-5); font-weight: var(--p-fuerte); letter-spacing: -0.01em; }
.logo-cursiva { font-style: italic; }
/* Colores de marca de cada método. Los tonos oficiales no se leen sobre el
   fondo oscuro, así que ahí van sus variantes claras (todas medidas ≥4.5:1) */
/* En claro se usan variantes oscurecidas de las marcas cuyo tono oficial no
   llega a 4.5:1 sobre blanco (Binance 3.14, ₿ 2.30, Mercado Pago 4.08) */
.logo-yape { color: #742384; }        /* 9.07:1  */
.logo-binance { color: #94700a; }     /* 4.58:1  */
.logo-btc { color: #a8650a; }         /* 4.63:1  */
.logo-tinta { color: var(--tinta); }
.logo-mp { color: #0c749f; }          /* 5.23:1  */
.logo-paypal { color: #003087; }      /* 11.85:1 */
.logo-paypal span { color: #0070ba; } /* 5.22:1  */
/* En oscuro vuelven los tonos oficiales de Binance y ₿ (5.41 y 7.38 sobre el
   fondo oscuro) y las marcas azules y el morado usan sus variantes claras */
:root[data-tema="oscuro"] .logo-yape { color: #c77fd6; }
:root[data-tema="oscuro"] .logo-binance { color: #b98a00; }
:root[data-tema="oscuro"] .logo-btc { color: #f7931a; }
:root[data-tema="oscuro"] .logo-mp { color: #4db8e8; }
:root[data-tema="oscuro"] .logo-paypal { color: #7aa5e8; }
:root[data-tema="oscuro"] .logo-paypal span { color: #4db8e8; }

/* Pie público con un tinte suave del acento, como el pie celeste de JAP.
   Los enlaces van en tinta: el acento sobre el tinte queda al límite del 4.5:1 */
/* Pie público en dos filas con línea separadora, al tamaño del de JAP */
.pub-pie { background: var(--fondo); margin-top: var(--e-6); }
.pie-superior {
    display: flex; justify-content: space-between; align-items: center;
    gap: var(--e-4); flex-wrap: wrap;
    padding-block: var(--e-7);
    border-bottom: var(--linea) solid var(--borde);
}
.pie-superior .brand { font-size: var(--t-5); }
.pie-enlaces { display: flex; gap: var(--e-6); flex-wrap: wrap; }
.pie-enlaces a { color: var(--tinta); text-decoration: none; font-size: var(--t-3); }
.pie-enlaces a:hover { color: var(--acento); }
.pie-inferior {
    /* Centrado vertical: la placa de LATAM Suite mide más que la línea del
       copyright, y sin esto el texto quedaba arriba, desnivelado. */
    display: flex; justify-content: space-between; align-items: center;
    gap: var(--e-4); flex-wrap: wrap;
    padding-block: var(--e-5);
    font-size: var(--t-2); color: var(--gris);
}
/* Botón flotante de WhatsApp */
.boton-wa {
    position: fixed; right: var(--e-5); bottom: var(--e-5);
    background: var(--acento); color: var(--sobre-acento); text-decoration: none;
    font-size: var(--t-2); font-weight: var(--p-medio);
    padding: var(--e-2) var(--e-4); border-radius: var(--radio);
}
.boton-wa:hover { opacity: .92; text-decoration: none; }

/* Texto largo de páginas y entradas del blog */
/* El texto, centrado en la página. Tenía ancho máximo pero sin márgenes
   automáticos: se quedaba pegado a la izquierda mientras el título iba
   centrado, y en una pantalla ancha dejaba media página vacía a la derecha. */
.prosa { max-width: 42rem; margin-inline: auto; }
.prosa > * + * { margin-top: var(--e-4); }
.prosa h2 { font-size: var(--t-5); font-weight: var(--p-fuerte); }
.prosa h3 { font-size: var(--t-4); font-weight: var(--p-fuerte); }
.prosa ul, .prosa ol { padding-left: var(--e-5); }
.prosa li + li { margin-top: var(--e-2); }
.prosa img { max-width: 100%; }

@media (max-width: 720px) {
    .pub-seccion .pasos { grid-template-columns: 1fr; }
    .pub-seccion .pasos > div + div { border-left: none; border-top: var(--linea) solid var(--borde); }
    .pub-hero, .cta-lider, .paso-maqueta { grid-template-columns: 1fr; }
    .pasos-6 { grid-template-columns: 1fr; }
    .pub-seccion table { display: block; overflow-x: auto; }
    /* En estrecho la navegación se va al menú desplegable y en la barra solo
       queda la marca, «Crear cuenta» y la hamburguesa: el resto no cabe sin
       apretujarse, y apretujado no lo pulsa nadie. */
    .pub-nav { display: none; }
    .hamburguesa { display: block; }
    .pub-acciones { margin-left: auto; gap: var(--e-2); }
    .pub-acciones .boton-nav:not(.boton-nav-lleno) { display: none; }
    .pub-acciones .boton-nav-lleno { padding-inline: var(--e-4); }
}

/* Por debajo de 480 no caben marca, idioma, tema, botón y hamburguesa a la
   vez: medido, la hamburguesa acababa 74px fuera de la pantalla. Idioma y
   tema salen de la barra —están en el menú desplegable igual— y se queda lo
   único que importa: la marca, «Crear cuenta» y el menú. */
@media (max-width: 480px) {
    .pub-acciones .pub-utilidad { display: none; }
    .pub-acciones .boton-nav-lleno { padding-inline: var(--e-3); font-size: var(--t-1); }
    .cabecera-fila { gap: var(--e-3); }
    .ilustracion-redes { min-height: 360px; overflow: hidden; }
    .pub-hero h1 { font-size: var(--t-6); }
    .tarjetas-blog { grid-template-columns: 1fr; }
    .acceso-linea { grid-template-columns: 1fr; }
    .burbuja p { max-width: 100%; }
    .paso-maqueta.invertido > div:first-child { order: 0; }
    .ventajas { grid-template-columns: 1fr; }
    .cifras { flex-direction: column; }
    .cifras > div + div { border-left: none; border-top: var(--linea) solid var(--borde); }
}

/* ---- Interacción: transiciones suaves y foco visible ---- */
.nav a, button, .boton, .boton-icono, .filtro-plataformas .chip,
.pestañas a, .admin-nav a, .menu-acciones > summary, .opciones a, .opciones button {
    transition: background-color .15s ease, color .15s ease,
                border-color .15s ease, box-shadow .15s ease, opacity .15s ease;
}
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--acento); outline-offset: 2px;
}

/* ---- Panel en pantallas pequeñas: el menú se vuelve un cajón deslizante ---- */
.solo-movil { display: none; }
.fondo-menu {
    position: fixed; inset: 0; z-index: 45;
    background: rgba(2, 14, 33, .45);
}
@media (max-width: 900px) {
    .solo-movil { display: inline-flex; }
    .sidebar {
        position: fixed; top: 0; left: 0; height: 100dvh; width: 260px;
        transform: translateX(-100%); transition: transform .2s ease;
        z-index: 50;
    }
    .shell.menu-abierto .sidebar { transform: translateX(0); }
    .shell.plegado .sidebar { width: 260px; } /* plegado no aplica en móvil */
    .shell.plegado .texto-nav, .shell.plegado .nav a .aviso-conteo { display: inline; }
    .topbar { padding: var(--e-3) var(--e-4); gap: var(--e-2); flex-wrap: wrap; }
    /* El grupo derecho envuelve para no desbordar la pantalla */
    .topbar > div:last-child { flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
    .busca-topbar input { width: 110px; }
    /* Columna centrada: en el teléfono girado el contenido no se estira
       de borde a borde, queda con aire a los lados */
    .main > .contenido {
        width: calc(100% - 2 * var(--e-4));
        max-width: 620px;
        margin-left: auto; margin-right: auto;
    }
    .banner-aviso {
        width: calc(100% - 2 * var(--e-4));
        max-width: 620px;
        margin: var(--e-3) auto 0;
    }
    .pie {
        width: calc(100% - 2 * var(--e-4));
        max-width: 620px;
        margin: var(--e-4) auto;
    }
    /* Las tablas se desplazan dentro de su tarjeta, sin romper la página */
    .contenido table { display: block; overflow-x: auto; }
    /* Salvo las que ya van dentro de un envoltorio: dos barras anidadas molestan */
    .tabla-ancha table { display: table; overflow-x: visible; }
    .campos-2 { grid-template-columns: 1fr; }
    .pedido-ficha { position: static; }
    .sorteo { flex-direction: column; }
    .sorteo-accion { text-align: left; }
    .filtro-plataformas { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--e-2); }
    .admin-nav { overflow-x: auto; flex-wrap: nowrap; }
    .admin-nav a { flex-shrink: 0; }
    .resumen-cliente { font-size: var(--t-1); }
    .cabecera-filtro { flex-wrap: wrap; }
    /* El admin también respira en pantallas pequeñas */
    .admin-cabecera-fila { padding: var(--e-3) var(--e-4); flex-wrap: wrap; gap: var(--e-2); }
    .admin-nav { padding: var(--e-2) var(--e-4); }
    .contenido-admin { margin: var(--e-4); }
    /* Menos bombillas en móvil: con 40 se amontonan */
    .guirnalda .bombilla:nth-child(n+21) { display: none; }
}

/* Columna centrada para las pantallas del admin que son un solo formulario.
   Sin esto el contenido se queda pegado a la izquierda y en un monitor ancho
   media pantalla se ve vacía. */
.col-admin { max-width: 760px; margin-inline: auto; }

/* Bloque estrecho que se centra en la tarjeta que lo contiene, en vez de
   quedarse pegado al borde izquierdo con la mitad derecha vacía. */
.centrada { margin-inline: auto; }

/* ---- Catálogo de integraciones ---- */
.integraciones {
    border: var(--linea) solid var(--borde); border-radius: var(--radio);
    background: var(--fondo);
    overflow: hidden;
}
.integracion {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center; gap: var(--e-4);
    padding: var(--e-4);
}
.integracion + .integracion { border-top: var(--linea) solid var(--borde); }
.integracion-sigla { font-size: var(--t-5); font-weight: var(--p-fuerte); }
.integracion-texto strong { display: block; }
.integracion-texto p { color: var(--gris); font-size: var(--t-2); }
.integracion-falta { color: var(--peligro) !important; margin-top: var(--e-1); }
.integracion-acciones { display: flex; gap: var(--e-2); align-items: center; }
.integracion-codigo { grid-column: 1 / -1; padding-top: var(--e-3); }
.integracion-codigo[hidden] { display: none; }

@media (max-width: 720px) {
    .integracion { grid-template-columns: auto 1fr; }
    .integracion-acciones { grid-column: 1 / -1; }
}

/* ---- Botón flotante de contacto ---- */
/* El botón es fijo: sin este hueco se planta encima de la última línea del pie */
.deja-sitio { padding-bottom: 84px; }
@media (max-width: 720px) { .deja-sitio { padding-bottom: 72px; } }

.contacto-flotante {
    position: fixed; bottom: var(--e-5);
    z-index: 44;
    display: flex; flex-direction: column; gap: var(--e-3);
}
.contacto-der { right: var(--e-5); align-items: flex-end; }
.contacto-izq { left: var(--e-5); align-items: flex-start; }

.contacto-canales { display: flex; flex-direction: column; gap: var(--e-2); }
.contacto-canales[hidden] { display: none; }

.contacto-canal {
    display: flex; align-items: center; gap: var(--e-3);
    padding: var(--e-2) var(--e-4);
    border-radius: 999px;
    color: #fff; text-decoration: none;
    font-size: var(--t-3); font-weight: var(--p-medio);
    white-space: nowrap;
}
.contacto-canal .ico { width: 18px; height: 18px; flex-shrink: 0; }
.contacto-canal:hover { filter: brightness(1.12); }

/* Tonos de marca oscurecidos: los oficiales no llegan a 4.5:1 con texto blanco */
.canal-whatsapp  { background: #075e54; }
.canal-telegram  { background: #0069a3; }
.canal-instagram { background: #a32d70; }
.canal-tiktok    { background: #1a1a1a; }
.canal-youtube   { background: #b80000; }
.canal-correo    { background: #4a4a4a; }

.contacto-boton {
    display: flex; align-items: center; gap: var(--e-3);
    background: none; border: none; padding: 0;
    cursor: pointer;
}
.contacto-izq .contacto-boton { flex-direction: row-reverse; }

.contacto-llamada {
    background: var(--fondo);
    border: var(--linea) solid var(--borde);
    border-radius: 999px;
    padding: var(--e-2) var(--e-3);
    color: var(--tinta); font-size: var(--t-2); font-weight: var(--p-medio);
    white-space: nowrap;
}
.contacto-flotante.abierto .contacto-llamada { display: none; }

.contacto-circulo {
    width: 52px; height: 52px; flex-shrink: 0;
    border-radius: 50%;
    background: var(--acento); color: var(--sobre-acento);
    display: grid; place-items: center;
}
.contacto-circulo .ico { width: 24px; height: 24px; grid-area: 1 / 1; }
.contacto-circulo .ico-cerrar { display: none; }
.contacto-flotante.abierto .contacto-circulo .ico-abrir { display: none; }
.contacto-flotante.abierto .contacto-circulo .ico-cerrar { display: block; }

@media (max-width: 720px) {
    .contacto-flotante { bottom: var(--e-4); }
    .contacto-der { right: var(--e-4); }
    .contacto-izq { left: var(--e-4); }
    /* En móvil la llamada a la acción roba demasiado ancho */
    .contacto-llamada { display: none; }
}

/* ---- Adornos de temporada ---- */
#adornos {
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 30;
}
/* Dentro del panel el cliente está trabajando: los adornos se apagan un poco
   para no competir con el formulario de pedido. */
#adornos.adornos-panel { opacity: 0.5; }

.guirnalda {
    position: fixed; top: 0; left: 0; right: 0;
    height: 22px;
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 0 2vw;
    pointer-events: none;
    z-index: 41;
    /* El cable: una línea de 2px de la que cuelgan las bombillas */
    background: linear-gradient(#3a3a3a 0 2px, transparent 2px);
}

.guirnalda .bombilla {
    position: relative;
    width: 9px; height: 12px;
    margin-top: 7px;
    border-radius: 50% 50% 46% 46%;
    animation: parpadeo 2.6s ease-in-out infinite;
    animation-delay: var(--retraso, 0s);
}
.guirnalda .bombilla::before {
    content: '';
    position: absolute; top: -5px; left: 50%;
    width: 2px; height: 5px; margin-left: -1px;
    background: #3a3a3a;
}
.guirnalda .bombilla:nth-child(4n+1) { background: #e63946; box-shadow: 0 0 6px #e6394688; }
.guirnalda .bombilla:nth-child(4n+2) { background: #ffd166; box-shadow: 0 0 6px #ffd16688; }
.guirnalda .bombilla:nth-child(4n+3) { background: #06d6a0; box-shadow: 0 0 6px #06d6a088; }
.guirnalda .bombilla:nth-child(4n)   { background: #4cc9f0; box-shadow: 0 0 6px #4cc9f088; }

@keyframes parpadeo {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
    .guirnalda .bombilla { animation: none; }
}

/* Editor de adornos: ajustes a la izquierda, previa pegada a la derecha */
.adornos-editor { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-6); align-items: start; }
.adornos-ajustes { max-width: 520px; }
.adornos-previa { position: sticky; top: var(--e-5); }

.previa-marco {
    position: relative;
    height: 380px;
    overflow: hidden;
    border: var(--linea) solid var(--borde);
    border-radius: var(--radio);
    background: linear-gradient(#1b2430, #2b3a4d);
}
.previa-marco #previa-adornos { position: absolute; inset: 0; width: 100%; height: 100%; }
.previa-marco .previa-guirnalda { position: absolute; z-index: 2; }
.previa-texto {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    /* Color fijo: el marco es oscuro en los dos temas (8:1 sobre el degradado) */
    color: #cfd8e3; font-size: var(--t-3);
}

@media (max-width: 900px) {
    .adornos-editor { grid-template-columns: 1fr; }
    .adornos-previa { position: static; }
}

/* ---- Planes de socio ---- */
/* Tarjetas en rejilla, como las «Membresías Activas» del panel de referencia.
   El acento se reserva para la tarjeta destacada y para la cifra del ahorro:
   son las dos cosas que el cliente tiene que leer. */
.planes {
    display: grid; gap: var(--e-4); margin-top: var(--e-5);
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.plan {
    position: relative; display: flex; flex-direction: column; gap: var(--e-3);
    background: var(--fondo); border: var(--linea) solid var(--borde-tarjeta);
    border-radius: var(--radio); box-shadow: var(--sombra);
    padding: var(--e-5);
}
.plan-destacado { border-color: var(--acento); }
.plan-mio { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 4%, var(--fondo)); }
.plan-cinta {
    position: absolute; top: 0; right: var(--e-4); transform: translateY(-50%);
    background: var(--acento); color: var(--sobre-acento);
    font-size: var(--t-1); font-weight: var(--p-medio);
    padding: var(--e-1) var(--e-3); border-radius: var(--radio);
}
.plan-cabecera { display: flex; align-items: center; gap: var(--e-2); }
.plan-cabecera h2 { font-size: var(--t-5); }
.plan-precio { display: flex; align-items: baseline; gap: var(--e-2); }
.plan-precio .dato { font-size: var(--t-6); font-weight: var(--p-fuerte); }
.plan-gancho { font-size: var(--t-3); color: var(--gris); }

/* La cuenta con sus propios pedidos: el argumento que de verdad convence */
.plan-cuenta {
    font-size: var(--t-2); color: var(--gris); line-height: 1.55;
    border-top: var(--linea) solid var(--borde-tarjeta);
    border-bottom: var(--linea) solid var(--borde-tarjeta);
    padding: var(--e-3) 0;
}
.plan-cuenta strong { color: var(--tinta); font-variant-numeric: tabular-nums; }
.plan-cuenta.sale strong, .plan-veredicto { color: var(--acento); font-weight: var(--p-medio); }
.plan-ventajas { list-style: none; display: flex; flex-direction: column; gap: var(--e-2); font-size: var(--t-3); }
.plan-ventajas li { display: flex; gap: var(--e-2); align-items: flex-start; }
.plan-ventajas .ico { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--acento); }
.plan-accion { margin-top: auto; display: flex; flex-direction: column; gap: var(--e-2); align-items: flex-start; }
.plan-accion button { width: 100%; }
.plan-accion .ayuda { margin: 0; }

/* Etiqueta PRO: la misma pastilla en el plan, en el menú y en el catálogo */
.pastilla-plan {
    display: inline-flex; align-items: center; gap: var(--e-1);
    background: var(--acento); color: var(--sobre-acento);
    font-size: var(--t-1); font-weight: var(--p-fuerte);
    padding: 2px var(--e-2); border-radius: var(--radio);
    letter-spacing: 0; text-transform: none;
}

/* Ficha del socio: días restantes y lo que lleva ahorrado */
.socio-activo {
    background: var(--fondo); border: var(--linea) solid var(--acento);
    border-radius: var(--radio); box-shadow: var(--sombra);
    padding: var(--e-5); margin-top: var(--e-5);
    display: flex; flex-direction: column; gap: var(--e-4);
}
.socio-cabecera { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); flex-wrap: wrap; }
.socio-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--e-4); }
.socio-cifras > div { display: flex; flex-direction: column; gap: var(--e-1); }
.socio-cifras .dato { font-size: var(--t-5); font-weight: var(--p-fuerte); font-variant-numeric: tabular-nums; }
.etiqueta-cifra { font-size: var(--t-2); color: var(--gris); }
.socio-veredicto { font-size: var(--t-3); color: var(--gris); }
.socio-veredicto.bueno { color: var(--acento); font-weight: var(--p-medio); }
.socio-renovacion { display: flex; flex-direction: column; gap: var(--e-1); }
.socio-renovacion .ayuda { margin: 0; }

/* Precio doble en el catálogo: lo que paga ahora y lo que pagaría con plan */
.precio-doble { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; line-height: 1.3; }
.precio-pro { font-size: var(--t-1); color: var(--acento); font-weight: var(--p-medio); white-space: nowrap; }
.precio-pro a { color: inherit; }

@media (max-width: 700px) {
    .planes { grid-template-columns: 1fr; }
}

/* Gancho del plan bajo el cargo del pedido */
.gancho-pro { font-size: var(--t-2); margin-top: var(--e-1); }
.gancho-pro a { color: var(--acento); font-weight: var(--p-medio); }

/* ---- Marcas del servicio en el listado del admin ---- */
/* Un icono por característica, con el detalle en el tooltip del navegador.
   Se lee en un golpe de vista, como en el panel viejo. */
.marcas-servicio {
    white-space: nowrap;
    line-height: 1;
}
.marcas-servicio .marca {
    display: inline-flex; align-items: center; gap: 3px;
    color: var(--gris); cursor: help;
    margin-right: var(--e-2);
    vertical-align: middle;
}
.marcas-servicio .marca:last-child { margin-right: 0; }
.marcas-servicio .marca .ico { width: 15px; height: 15px; }
/* El tiempo medio manda: lleva icono y cifra, y en tinta para que destaque */
.marcas-servicio .marca-tiempo { color: var(--tinta); }
.marcas-servicio .texto-marca {
    font-size: var(--t-1); font-variant-numeric: tabular-nums;
}
/* Sin muestra suficiente el reloj se atenúa, pero se queda para no descuadrar.
   0.7 y no menos: por debajo de ahí el icono baja del 3:1 que pide un elemento
   gráfico y deja de distinguirse del fondo. Medido: 0.35 daba 1.72:1. */
.marcas-servicio .apagada { opacity: 0.7; }
/* El aviso del vigilante va en color de alerta, no en gris: es lo único de la
   fila que pide una decisión tuya. */
.marcas-servicio .marca-aviso { color: var(--aviso); }

/* Marca de servicio recién dado de alta: la misma pastilla en la fila y en la
   cabecera de su categoría, para encontrarlo sin abrir nada. */
.pastilla-nuevo {
    display: inline-block;
    background: var(--acento); color: var(--sobre-acento);
    font-size: var(--t-1); font-weight: var(--p-medio);
    padding: 1px var(--e-2); border-radius: var(--radio);
    margin-right: var(--e-1); vertical-align: 1px;
}

/* Selector de orden del listado: tres enlaces separados por una línea fina,
   sin cajas ni pestañas — es un ajuste de la vista, no una sección. */
.grupo-orden {
    display: inline-flex; align-items: center; gap: var(--e-2);
    font-size: var(--t-2);
}
.grupo-orden a {
    color: var(--gris); text-decoration: none;
    padding: 2px var(--e-2); border-radius: var(--radio);
}
.grupo-orden a:hover { color: var(--tinta); background: var(--fondo-suave); }
.grupo-orden a.activo {
    color: var(--tinta); font-weight: var(--p-medio);
    background: var(--fondo-suave);
}
@media (max-width: 900px) {
    .grupo-orden { flex-wrap: wrap; }
}

/* ---- Galería de imágenes subidas ----
   Rejilla que se adapta sola: en un portátil salen tres por fila y en el
   monitor grande seis, sin puntos de corte a mano. */
.galeria {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--e-4);
}
.galeria-pieza {
    margin: 0;
    border: var(--linea) solid var(--borde);
    border-radius: var(--radio);
    background: var(--fondo);
    overflow: hidden;
}
/* Alto fijo para que la rejilla no baile con imágenes de distinta proporción */
.galeria-lienzo {
    height: 150px;
    display: flex; align-items: center; justify-content: center;
    background: var(--fondo-suave);
    padding: var(--e-2);
}
.galeria-lienzo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.galeria-pieza figcaption { padding: var(--e-3); }
.galeria-nombre {
    font-size: var(--t-2); font-weight: var(--p-medio);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- Ficha en ventana (métodos de pago) ----
   El panel viejo edita cada método en una ventana propia en vez de meter doce
   campos en la fila de una tabla. Se usa <dialog>, que ya trae el fondo, el
   foco atrapado y el cierre con Escape sin JavaScript. */
dialog.ficha {
    /* El navegador centra los diálogos con «margin: auto», pero el reset de
       arriba («* { margin: 0 }») se lo lleva por delante y la ventana se queda
       pegada a la esquina. Por eso el centrado va aquí, explícito. */
    position: fixed;
    inset: 0;
    margin: auto;

    width: min(560px, calc(100vw - 2rem));
    max-height: calc(100vh - 4rem);
    padding: 0;
    /* Solo se desplaza el cuerpo, no la ventana entera */
    overflow: hidden;
    border: var(--linea) solid var(--borde);
    border-radius: var(--radio);
    background: var(--fondo);
    color: var(--tinta);
}
dialog.ficha::backdrop { background: rgba(0, 0, 0, .45); }
/* Abierta es una columna flexible: cabecera y pie fijos, y el cuerpo se
   queda con lo que sobra. Va en «[open]» para no romper el ocultado que hace
   el navegador cuando la ventana está cerrada.

   El alto no puede darse en porcentaje: «max-height: 100%» necesita un padre
   con alto definido, y el de la ficha es automático, así que se ignoraba y el
   pie se salía por abajo. */
dialog.ficha[open] { display: flex; flex-direction: column; }
dialog.ficha form { display: flex; flex-direction: column; min-height: 0; flex: 1; }

.ficha-cabecera {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--e-3);
    padding: var(--e-4) var(--e-5);
    border-bottom: var(--linea) solid var(--borde);
}
.ficha-cabecera h2 { margin: 0; font-size: var(--t-5); }
.ficha-cerrar {
    background: none; border: 0; color: var(--gris);
    font-size: var(--t-6); line-height: 1; cursor: pointer; padding: 0 var(--e-2);
}
.ficha-cerrar:hover { color: var(--tinta); }

/* El cuerpo es lo único que se desplaza: cabecera y botones quedan fijos, así
   «Guardar» siempre está a la vista aunque el formulario sea largo. */
.ficha-cuerpo { padding: var(--e-5); overflow-y: auto; flex: 1; min-height: 0; }
.ficha-pie {
    display: flex; gap: var(--e-3);
    padding: var(--e-4) var(--e-5);
    border-top: var(--linea) solid var(--borde);
    background: var(--fondo-suave);
}

/* Grupo de campos con su título, para separar tarifa y credenciales */
.recuadro {
    border: var(--linea) solid var(--borde);
    border-radius: var(--radio);
    padding: var(--e-4);
    margin-bottom: var(--e-4);
}
.recuadro legend {
    padding: 0 var(--e-2);
    font-size: var(--t-2); font-weight: var(--p-medio); color: var(--gris);
}

/* Fila de un método apagado: se ve, pero se nota que no está en juego */
tr.fila-apagada td { opacity: .55; }
tr.fila-apagada td:last-child, tr.fila-apagada .interruptor { opacity: 1; }

/* Asa de arrastre */
td.agarre { cursor: grab; color: var(--gris); user-select: none; text-align: center; }
td.agarre:active { cursor: grabbing; }

/* ---- Menú por grupos (Apariencia → Menú) ----
   Cada grupo dice a quién se le enseña a la izquierda y lleva su lista a la
   derecha, como el panel viejo. */
.grupo-menu {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--e-5);
    padding: var(--e-5) 0;
    border-bottom: var(--linea) solid var(--borde);
}
.grupo-menu:last-of-type { border-bottom: 0; }
.grupo-menu-titulo h2 { font-size: var(--t-4); margin: 0 0 var(--e-1); }
.grupo-menu-titulo p { font-size: var(--t-2); margin: 0; }

.lista-menu { list-style: none; margin: 0 0 var(--e-3); padding: 0; }
.lista-menu li {
    display: flex; align-items: center; gap: var(--e-3);
    padding: var(--e-3) var(--e-4);
    border: var(--linea) solid var(--borde);
    border-radius: var(--radio);
    background: var(--fondo);
}
.lista-menu li + li { margin-top: var(--e-2); }
.lista-menu li.apagado { opacity: .55; }
/* El nombre empuja al resto a la derecha */
.lista-menu-texto { flex: 1; font-weight: var(--p-medio); }
.lista-menu .agarre { cursor: grab; color: var(--gris); user-select: none; }
.lista-menu .agarre:active { cursor: grabbing; }
.lista-menu li.arrastrando { opacity: .4; }

@media (max-width: 800px) {
    .grupo-menu { grid-template-columns: 1fr; gap: var(--e-3); }
}

/* ---- Editor de idioma (Apariencia → Idiomas → Editar) ----
   Dos columnas como el del panel viejo: las pantallas a la izquierda y los
   textos de la elegida a la derecha. */
.editor-idioma {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: var(--e-5);
    align-items: start;
}
.editor-idioma-indice {
    display: flex; flex-direction: column; gap: 2px;
    position: sticky; top: var(--e-4);
    max-height: calc(100vh - 2 * var(--e-4));
    overflow-y: auto;
}
.editor-idioma-indice a {
    display: flex; align-items: center; gap: var(--e-2);
    padding: var(--e-2) var(--e-3);
    border-radius: var(--radio-control);
    color: var(--tinta); text-decoration: none;
    font-size: var(--t-2);
}
.editor-idioma-indice a .gris { margin-left: auto; font-variant-numeric: tabular-nums; }
.editor-idioma-indice a:hover { background: var(--fondo-suave); }
.editor-idioma-indice a.activo { background: var(--fondo-suave); color: var(--acento); font-weight: var(--p-medio); }

/* Cada texto con su etiqueta encima, más compacto que un formulario normal */
.editor-idioma .campo-texto { margin-bottom: var(--e-3); }
.editor-idioma .campo-texto label {
    font-weight: var(--p-normal); color: var(--gris);
    font-size: var(--t-2); margin-bottom: 2px;
}

@media (max-width: 900px) {
    .editor-idioma { grid-template-columns: 1fr; }
    .editor-idioma-indice { position: static; max-height: none; flex-direction: row; flex-wrap: wrap; }
}

/* ---- Guía del primer pedido ----
   Una tarjeta que se va marcando sola y desaparece cuando está completa. */
.guia-inicio {
    border: var(--linea) solid var(--borde);
    border-radius: var(--radio);
    background: var(--fondo);
    padding: var(--e-5);
    margin-bottom: var(--e-4);
}
.guia-cabecera {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--e-4); margin-bottom: var(--e-3);
}
.guia-cabecera h2 { margin: 0 0 2px; font-size: var(--t-5); }
.guia-cabecera p { margin: 0; font-size: var(--t-2); }
.guia-cuenta {
    font-size: var(--t-5); font-weight: var(--p-fuerte);
    color: var(--acento); font-variant-numeric: tabular-nums; white-space: nowrap;
}

.guia-pasos { list-style: none; margin: var(--e-4) 0 0; padding: 0; counter-reset: paso; }
.guia-pasos li {
    display: flex; align-items: center; gap: var(--e-3);
    padding: var(--e-3) 0;
    border-top: var(--linea) solid var(--borde);
}
.guia-pasos li:first-child { border-top: 0; }
.guia-texto { flex: 1; }
.guia-texto .gris { font-size: var(--t-2); }

/* La marca: un número mientras está pendiente, un visto cuando se cumple */
.guia-marca {
    counter-increment: paso;
    width: 26px; height: 26px; flex: 0 0 26px;
    display: flex; align-items: center; justify-content: center;
    border: var(--linea) solid var(--borde); border-radius: 50%;
    font-size: var(--t-2); font-weight: var(--p-medio); color: var(--gris);
}
.guia-marca::before { content: counter(paso); }
.guia-pasos li.hecho .guia-marca {
    border-color: var(--exito, var(--acento));
    background: var(--exito, var(--acento));
    color: #fff;
}
.guia-pasos li.hecho .guia-marca::before { content: '✓'; }
.guia-pasos li.hecho .guia-texto strong { text-decoration: line-through; color: var(--gris); }

/* Aviso de enlace que no cuadra con el servicio elegido */
.aviso-enlace {
    margin-top: var(--e-1);
    font-size: var(--t-2);
    color: var(--peligro);
}

/* Precio con plan en el catálogo público: el gancho es el ahorro, así que va
   con el acento y el porcentaje debajo, en pequeño. */
.precio-pro { color: var(--acento); font-weight: var(--p-medio); white-space: nowrap; }
.precio-pro .ahorro { font-size: var(--t-1); font-weight: var(--p-normal); }

/* --- Cómo funciona: los cuatro pasos y el glosario de estados --- */

/* Los mismos naipes de la portada, pero en cuatro columnas */
.pasos-4 { grid-template-columns: repeat(4, 1fr); }
.pasos-4 h3 { font-size: var(--t-4); margin-top: var(--e-3); }
.pasos-4 p { margin-top: var(--e-2); }

/* El glosario va en una sola superficie separada por líneas, no en siete
   tarjetas sueltas: se lee de arriba abajo como una tabla. */
.glosario-estados {
    border: var(--linea) solid var(--borde-tarjeta);
    border-radius: var(--radio);
    background: var(--fondo);
    box-shadow: var(--sombra);
    overflow: hidden;
}
.glosario-fila {
    display: grid; grid-template-columns: 150px 1fr;
    gap: var(--e-4); padding: var(--e-4) var(--e-5);
    border-top: var(--linea) solid var(--borde);
}
.glosario-fila:first-child { border-top: 0; }
.glosario-marca { padding-top: 2px; }
.glosario-texto p { margin: 0 0 var(--e-2); font-size: var(--t-3); }
.glosario-texto p:last-child { margin-bottom: 0; }

/* La devolución es lo que el cliente viene a buscar: se marca aparte */
.glosario-dinero {
    display: flex; align-items: flex-start; gap: var(--e-2);
    color: var(--acento); font-weight: var(--p-medio);
}
.glosario-dinero svg.ico { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 3px; }

.cierre-como {
    display: flex; justify-content: center; flex-wrap: wrap;
    gap: var(--e-3); margin-top: var(--e-7);
}

/* Glosario plegado dentro de Mis pedidos */
.leyenda-estados { margin-bottom: var(--e-4); }
.leyenda-estados > summary {
    cursor: pointer; font-size: var(--t-2); color: var(--gris);
    padding: var(--e-2) 0; list-style: none;
}
.leyenda-estados > summary::-webkit-details-marker { display: none; }
.leyenda-estados > summary::before { content: '▸ '; }
.leyenda-estados[open] > summary::before { content: '▾ '; }
.leyenda-estados > summary:hover { color: var(--tinta); }
/* Dentro del panel, «.contenido > *» ya pinta la tarjeta: el glosario se
   queda desnudo para no meter un rectángulo dentro de otro. Y se estira
   hasta el borde para que las líneas separen de lado a lado. */
.leyenda-estados .glosario-estados {
    border: 0; border-radius: 0; box-shadow: none; background: none;
    margin: var(--e-2) calc(var(--e-5) * -1) calc(var(--e-5) * -1);
    border-top: var(--linea) solid var(--borde);
}
.leyenda-estados .glosario-fila { padding: var(--e-3) var(--e-5); }

@media (max-width: 900px) {
    .pasos-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .pasos-4 { grid-template-columns: 1fr; }
    .glosario-fila { grid-template-columns: 1fr; gap: var(--e-2); padding: var(--e-4); }
}

/* --- Programa de monedas de fidelidad --- */

/* Importes que suben y que bajan. El verde va medido: 5,3:1 sobre blanco y
   9,8:1 sobre la tarjeta oscura. */
.positivo { color: #0a7c42; }
.negativo { color: var(--peligro); }
:root[data-tema="oscuro"] .positivo { color: #5ddba0; }

/* La fila del nivel que le toca al cliente, en la escalera */
.fila-activa > td { background: var(--fondo-suave); font-weight: var(--p-medio); }

.canje-monedas {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: var(--e-4);
    margin-bottom: var(--e-4);
}
.canje-monedas h2 { font-size: var(--t-5); margin-bottom: var(--e-1); }
.canje-monedas p { max-width: 52ch; font-size: var(--t-2); }
.canje-monedas form { text-align: right; }
.canje-monedas .ayuda { margin-top: var(--e-2); }

@media (max-width: 640px) {
    .canje-monedas form, .canje-monedas form button { width: 100%; }
    .canje-monedas form { text-align: left; }
}

/* --- Tour del producto --- */

/* La capa oscura con un agujero recortado encima del elemento. Sin puntero:
   los clics que caen en el hueco llegan al panel de abajo. */
.tour-capa {
    position: fixed; inset: 0; z-index: 900;
    background: rgba(15, 18, 21, .62);
}
/* En oscuro esa capa es del color exacto del fondo de la página: medido daba
   contraste 1,00, o sea que no oscurecía absolutamente nada. Va casi negra,
   que sí hunde las tarjetas, y el anillo del elemento enfocado se refuerza
   porque en un tema oscuro la señal fiable es lo que se ilumina, no lo que
   se apaga. */
:root[data-tema="oscuro"] .tour-capa { background: rgba(0, 0, 0, .78); }

.tour-enfocado {
    position: relative; z-index: 901;
    box-shadow: 0 0 0 3px var(--acento);
    border-radius: var(--radio);
}
:root[data-tema="oscuro"] .tour-enfocado {
    box-shadow: 0 0 0 3px var(--acento), 0 0 0 12px rgba(255, 255, 255, .10);
}
body.con-tour { overflow: hidden; }

.tour-globo {
    position: fixed; z-index: 902;
    width: min(360px, calc(100vw - 2rem));
    background: var(--fondo);
    border: var(--linea) solid var(--borde-tarjeta);
    border-radius: var(--radio);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
    padding: var(--e-4);
}
.tour-globo h2 { font-size: var(--t-4); margin: 0 var(--e-5) var(--e-2) 0; }
.tour-globo .tour-texto { font-size: var(--t-2); color: var(--gris); margin: 0; }
.tour-cerrar {
    position: absolute; top: var(--e-2); right: var(--e-2);
    width: 28px; height: 28px; padding: 0;
    background: none; border: 0; color: var(--gris);
    font-size: var(--t-5); line-height: 1; cursor: pointer;
}
.tour-cerrar:hover { color: var(--tinta); }
.tour-pie {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--e-3); margin-top: var(--e-4);
    padding-top: var(--e-3); border-top: var(--linea) solid var(--borde);
}
.tour-cuenta { font-size: var(--t-1); color: var(--gris); font-variant-numeric: tabular-nums; }
.tour-botones { display: flex; gap: var(--e-2); }
.tour-botones button:disabled { opacity: .45; cursor: default; }

/* Índice de tours */
.rejilla-tours {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-4);
    margin-bottom: var(--e-5);
}
.tarjeta-tour {
    display: flex; flex-direction: column; gap: var(--e-3);
    background: var(--fondo);
    border: var(--linea) solid var(--borde-tarjeta);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: var(--e-4);
}
.tarjeta-tour h2 { font-size: var(--t-4); margin: 0; }
.tarjeta-tour p { font-size: var(--t-2); flex: 1; margin: 0; }
.tarjeta-tour .boton { align-self: flex-start; }
.tour-cabecera-tarjeta {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--e-2); flex-wrap: wrap;
}

.tour-completo {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: var(--e-4);
}
.tour-completo h2 { font-size: var(--t-5); margin-bottom: var(--e-1); }
.tour-completo p { max-width: 60ch; font-size: var(--t-2); margin: 0; }

@media (max-width: 1000px) { .rejilla-tours { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
    .rejilla-tours { grid-template-columns: 1fr; }
    .tour-completo button { width: 100%; }
}

/* --- Ficha y actividad de cada pedido --- */

.nombre-servicio { margin-bottom: var(--e-4); font-size: var(--t-3); }

/* Línea de tiempo del pedido: una raya vertical con un punto por hito */
.linea-tiempo { list-style: none; margin: 0; padding: 0 0 0 var(--e-5); position: relative; }
.linea-tiempo::before {
    content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px;
    width: var(--linea); background: var(--borde);
}
.linea-tiempo li { position: relative; padding: 0 0 var(--e-4) 0; }
.linea-tiempo li:last-child { padding-bottom: 0; }
.linea-tiempo li::before {
    content: ''; position: absolute; left: calc(var(--e-5) * -1); top: 5px;
    width: 11px; height: 11px; border-radius: 50%;
    background: var(--fondo); border: 2px solid var(--gris);
}
.linea-tiempo .hito-que { font-weight: var(--p-medio); font-size: var(--t-3); }
.linea-tiempo .gris { font-size: var(--t-2); }
.linea-tiempo time { display: block; font-size: var(--t-1); margin-top: 2px; }

/* El color solo donde significa algo: entregado, a medias, o roto */
.linea-tiempo li.hito-bien::before { border-color: var(--acento); background: var(--acento); }
.linea-tiempo li.hito-aviso::before { border-color: var(--aviso); background: var(--aviso); }
.linea-tiempo li.hito-malo::before { border-color: var(--peligro); background: var(--peligro); }

/* --- Fila de filtros del formulario de pedido --- */

.fila-filtros { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-4); }
.fila-filtros .campo { margin-bottom: 0; }

/* Cuántos quedan y la salida para volver a verlo todo */
.barra-resultados {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--e-3); flex-wrap: wrap;
    margin: var(--e-3) 0 var(--e-4);
    padding-bottom: var(--e-3);
    border-bottom: var(--linea) solid var(--borde);
    font-size: var(--t-2);
}

@media (max-width: 760px) {
    .fila-filtros { grid-template-columns: 1fr; gap: 0; }
    .fila-filtros .campo { margin-bottom: var(--e-4); }
}

/* --- El héroe vivo: frase que gira, brillo y actividad --- */

/* Un resplandor suave del acento detrás del racimo, para que las burbujas
   no floten sobre la nada */
.ilustracion-redes::before {
    content: ''; position: absolute; inset: 6% 4%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--acento) 16%, transparent), transparent 72%);
    border-radius: 50%;
}

/* La frase que gira bajo el subtítulo */
.frase-rota {
    min-height: 1.5em;
    font-size: var(--t-5) !important;
    font-weight: var(--p-fuerte);
    color: var(--acento) !important;
    margin-top: var(--e-2) !important;
}
#palabra-rota {
    display: inline-block;
    transition: opacity .26s ease, translate .26s ease;
}
#palabra-rota.saliendo { opacity: 0; translate: 0 -10px; }

/* La tarjeta de actividad, montada sobre el racimo como una ventana real */
.actividad-hero {
    position: absolute; left: -4%; bottom: 2%; z-index: 2;
    width: min(310px, 92%);
    background: var(--fondo);
    border: var(--linea) solid var(--borde-tarjeta);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: var(--e-3) var(--e-4);
}
.actividad-titulo {
    display: flex; align-items: center; gap: var(--e-2);
    font-size: var(--t-1); font-weight: var(--p-medio); color: var(--gris);
    padding-bottom: var(--e-2); border-bottom: var(--linea) solid var(--borde);
}
.punto-vivo {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--acento);
    animation: punto-late 1.6s ease-in-out infinite;
}
@keyframes punto-late {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acento) 45%, transparent); }
    60% { box-shadow: 0 0 0 7px transparent; }
}

#actividad-lista { list-style: none; margin: 0; padding: 0; }
#actividad-lista li {
    display: flex; align-items: center; gap: var(--e-2);
    padding: var(--e-2) 0;
    border-top: var(--linea) solid var(--borde);
    font-size: var(--t-1);
}
#actividad-lista li:first-child { border-top: 0; }
.act-icono {
    flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--fondo-suave); color: var(--acento);
}
.act-icono svg.ico { width: 14px; height: 14px; }
.act-texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-cola { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.act-cola .estado { font-size: 10px; padding: 1px 6px; }
.act-cola time { color: var(--gris); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* La entrada de cada pedido: cae desde arriba y empuja a los demás */
#actividad-lista li.entrando { animation: acto-entra .45s cubic-bezier(.2, .9, .3, 1.1); }
@keyframes acto-entra {
    from { opacity: 0; translate: 0 -14px; }
    to   { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .punto-vivo { animation: none; }
    #palabra-rota { transition: none; }
}
@media (max-width: 900px) {
    .actividad-hero { left: 0; }
}

/* --- El héroe en 3D y el revelado por scroll --- */

/* La perspectiva vive en el padre; el racimo es el plano que gira y cada
   burbuja lleva su profundidad real según su tamaño: al inclinar el plano,
   la perspectiva separa sola lo cercano de lo lejano. */
.pub-hero { perspective: 1100px; }
.ilustracion-redes { transform-style: preserve-3d; }
.ilustracion-redes > span { transform: translateZ(calc((var(--t) - 40px) * .9)); }
/* La tarjeta de actividad, por delante de todas las burbujas */
.actividad-hero { transform: translateZ(95px); }

/* La constelación, un plano por detrás de las burbujas */
.constelacion {
    position: absolute; inset: 0; width: 100%; height: 100%;
    overflow: visible; pointer-events: none;
}
.constelacion path {
    fill: none;
    stroke: var(--acento);
    stroke-width: 1;
    opacity: .16;
}

/* Revelado al entrar en pantalla. Solo transforma y desvanece: nada que
   recalcule el diseño de la página. */
.rev { opacity: 0; translate: 0 26px; transition: opacity .6s ease, translate .6s ease; }
.rev.visto { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
    .rev { opacity: 1; translate: none; transition: none; }
    .ilustracion-redes { transform: none !important; }
}

/* --- Logo propio de cada método de pago --- */

/* En el carrusel de la portada: alto fijo y ancho libre, para que marcas
   anchas (mercado pago) y cuadradas (Yape) queden a la misma escala visual. */
.logo-metodo img {
    height: 26px; width: auto; max-width: 150px;
    object-fit: contain; display: block;
}

/* En el admin, la muestra junto al selector de archivo */
.logo-pago { display: flex; align-items: center; gap: var(--e-4); flex-wrap: wrap; }
.logo-pago-muestra {
    flex: 0 0 auto;
    min-width: 130px; height: 54px;
    display: flex; align-items: center; justify-content: center;
    padding: var(--e-2) var(--e-3);
    background: var(--fondo-suave);
    border: var(--linea) solid var(--borde);
    border-radius: var(--radio);
}
.logo-pago-muestra img { max-height: 34px; max-width: 120px; object-fit: contain; }
.logo-pago > div:last-child { flex: 1; min-width: 220px; }

/* --- Libro de Reclamaciones --- */

.aviso-libro {
    display: flex; gap: var(--e-4); align-items: flex-start;
    padding: var(--e-4);
    border: var(--linea) solid var(--borde);
    border-radius: var(--radio);
    background: var(--fondo-suave);
    margin-bottom: var(--e-4);
}
.aviso-libro svg.ico { width: 28px; height: 28px; flex: 0 0 28px; color: var(--acento); }
.aviso-libro p { margin: 0 0 var(--e-2); font-size: var(--t-2); }
.aviso-libro p:last-child { margin-bottom: 0; }

.form-libro .cabecera-filtro { margin-top: var(--e-5); }

/* Reclamo o queja, explicados: la distinción la exige el reglamento y casi
   nadie la conoce, así que no puede ir como dos siglas sueltas. */
.dos-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); }
.opcion-radio {
    display: flex; gap: var(--e-3); align-items: flex-start;
    padding: var(--e-3);
    border: var(--linea) solid var(--borde); border-radius: var(--radio);
    cursor: pointer; font-size: var(--t-2);
}
.opcion-radio:has(input:checked) { border-color: var(--acento); background: var(--fondo-suave); }
.opcion-radio input { width: auto; margin-top: 3px; }

/* La hoja, pensada para imprimirse en un folio */
.hoja-reclamacion {
    border: var(--linea) solid var(--borde);
    border-radius: var(--radio);
    padding: var(--e-5);
    background: var(--fondo);
}
.hoja-reclamacion > header {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: var(--e-4); padding-bottom: var(--e-4); margin-bottom: var(--e-4);
    border-bottom: var(--linea) solid var(--borde);
}
.hoja-reclamacion h2 { margin: 0; font-size: var(--t-5); }
.hoja-reclamacion h3 {
    font-size: var(--t-3); margin: var(--e-5) 0 var(--e-2);
    padding-bottom: var(--e-2); border-bottom: var(--linea) solid var(--borde);
}
.hoja-numero { text-align: right; font-size: var(--t-2); }
.hoja-numero strong { display: block; font-size: var(--t-5); font-variant-numeric: tabular-nums; }
.parrafo-hoja { white-space: pre-line; font-size: var(--t-3); margin: 0; }
.pie-hoja {
    margin-top: var(--e-5); padding-top: var(--e-3);
    border-top: var(--linea) solid var(--borde); font-size: var(--t-1);
}
.acciones-constancia { display: flex; gap: var(--e-3); margin-top: var(--e-4); flex-wrap: wrap; }

/* El sello del pie: obligatorio y visible, pero sin gritar */
.sello-libro {
    display: inline-flex; align-items: center; gap: var(--e-3);
    padding: var(--e-3) var(--e-4); margin-top: var(--e-4);
    border: var(--linea) solid var(--borde); border-radius: var(--radio);
    text-decoration: none; color: var(--tinta);
}
.sello-libro:hover { border-color: var(--acento); text-decoration: none; }
/* La placa azul es de color fijo: se lee igual en claro y en oscuro */
.sello-libro img { display: block; flex: 0 0 auto; border-radius: 6px; }
.sello-libro strong { display: block; font-size: var(--t-2); }
.sello-libro .gris { font-size: var(--t-1); }

/* La firma de LATAM Suite: una placa, con la misma factura que el sello del
   Libro. Un icono de 17px con texto corrido parecía un enlace perdido. */
.firma-suite {
    display: inline-flex; align-items: center; gap: var(--e-3);
    padding: var(--e-2) var(--e-4);
    background: var(--fondo);
    border: var(--linea) solid var(--borde);
    border-radius: var(--radio);
    text-decoration: none; color: inherit; white-space: nowrap;
    line-height: 1.2;
}
.firma-suite:hover {
    text-decoration: none;
    border-color: #2DE1A9;
    box-shadow: 0 4px 14px color-mix(in srgb, #2DE1A9 22%, transparent);
}
.firma-suite-marca { flex: 0 0 26px; }
.firma-suite-texto { display: flex; flex-direction: column; }
.firma-suite-texto small {
    font-size: 10px; color: var(--gris);
    text-transform: uppercase; letter-spacing: .06em;
}
.firma-suite-texto strong { font-size: var(--t-2); color: var(--tinta); }
.firma-suite:hover .firma-suite-texto strong { color: var(--acento); }

/* Al pasar el ratón, el cuadro verde del centro late */
.ls-centro { transform-box: fill-box; transform-origin: center; }
.firma-suite:hover .ls-centro { animation: ls-late 1s ease-in-out infinite; }
@keyframes ls-late {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.35); }
}
@media (prefers-reduced-motion: reduce) {
    .firma-suite:hover .ls-centro { animation: none; }
}

/* El azul de marca de LatamSuite. En oscuro el original (#16325C) se pierde
   sobre el fondo, así que se aclara lo justo para que la rejilla se lea:
   el verde del centro, que es lo que identifica la marca, no se toca. */
.ls-azul { fill: #16325C; }
:root[data-tema="oscuro"] .ls-azul { fill: #5B7BB0; }

/* Al imprimir la constancia sobra todo lo que no es la hoja */
@media print {
    .pub-cabecera, .pub-pie, .no-imprimir, .flotante-contacto, .pub-menu-movil { display: none !important; }
    .hoja-reclamacion { border: none; padding: 0; }
    .pub-seccion { padding: 0; }
}

@media (max-width: 640px) {
    .dos-opciones { grid-template-columns: 1fr; }
}

/* --- Pie público: columnas, redes y tiendas de apps --- */

.pie-columnas {
    display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr));
    gap: var(--e-5);
}
.pie-columnas h3 {
    font-size: var(--t-1); font-weight: var(--p-fuerte); color: var(--tinta);
    margin: 0 0 var(--e-3);
}
.pie-columnas a {
    display: block; padding: var(--e-1) 0;
    font-size: var(--t-2); color: var(--gris); text-decoration: none;
}
.pie-columnas a:hover { color: var(--acento); text-decoration: none; }

/* Redes y tiendas, en su propia banda separada por una línea */
.pie-social {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: var(--e-4);
    margin-top: var(--e-5); padding-top: var(--e-4);
    border-top: var(--linea) solid var(--borde);
}
.redes-pie { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; font-size: var(--t-2); }
.redes-pie a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border: var(--linea) solid var(--borde); border-radius: 50%;
    color: var(--gris);
}
.redes-pie a:hover { color: var(--sobre-acento); background: var(--acento); border-color: var(--acento); }
.redes-pie svg.ico { width: 17px; height: 17px; }

/* Los botones de tienda, con la misma forma que los de Apple y Google */
.tiendas-app { display: flex; gap: var(--e-3); flex-wrap: wrap; }
.boton-tienda {
    display: inline-flex; align-items: center; gap: var(--e-3);
    padding: var(--e-2) var(--e-4);
    background: var(--tinta); color: var(--fondo);
    border-radius: var(--radio); text-decoration: none;
    line-height: 1.15;
}
.boton-tienda:hover { background: var(--acento); color: var(--sobre-acento); text-decoration: none; }
.boton-tienda svg.ico { width: 22px; height: 22px; }
.boton-tienda small { display: block; font-size: 10px; opacity: .85; }
.boton-tienda strong { display: block; font-size: var(--t-3); }

@media (max-width: 720px) {
    .pie-columnas { grid-template-columns: repeat(2, 1fr); gap: var(--e-4); }
    .pie-social { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 420px) {
    .pie-columnas { grid-template-columns: 1fr; }
    .tiendas-app { width: 100%; }
    .boton-tienda { flex: 1; justify-content: center; }
}

/* --- Documentos legales: índice y salto entre ellos --- */

/* Las tres políticas y el libro, como pestañas sobre el documento */
.nav-legal {
    display: flex; justify-content: center; flex-wrap: wrap;
    gap: var(--e-2);
    margin-bottom: var(--e-6);
}
.nav-legal a {
    padding: var(--e-2) var(--e-4);
    border: var(--linea) solid var(--borde); border-radius: var(--radio);
    font-size: var(--t-2); color: var(--gris); text-decoration: none;
}
.nav-legal a:hover { color: var(--tinta); border-color: var(--tinta); text-decoration: none; }
.nav-legal a.activo {
    background: var(--acento); border-color: var(--acento);
    color: var(--sobre-acento); font-weight: var(--p-medio);
}

/* El índice de apartados */
.indice-doc {
    background: var(--fondo-suave);
    border: var(--linea) solid var(--borde);
    border-radius: var(--radio);
    padding: var(--e-4) var(--e-5);
}
.indice-doc h2 {
    font-size: var(--t-1) !important; font-weight: var(--p-fuerte);
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--gris); margin: 0 0 var(--e-3);
}
.indice-doc ol { margin: 0; padding: 0; list-style: none; counter-reset: apartado; }
.indice-doc li { counter-increment: apartado; }
.indice-doc li + li { margin-top: var(--e-1); }
.indice-doc a {
    display: block; padding: var(--e-1) 0;
    font-size: var(--t-2); color: var(--tinta); text-decoration: none;
}
.indice-doc a:hover { color: var(--acento); text-decoration: underline; }

/* Que al saltar a un apartado no quede tapado por la cabecera fija */
.prosa h2[id] { scroll-margin-top: 96px; }

@media (min-width: 720px) {
    /* En pantalla ancha el índice va en dos columnas: dieciocho apartados
       en una sola lista empujan el documento demasiado hacia abajo. */
    .indice-doc ol { columns: 2; column-gap: var(--e-5); }
    .indice-doc li { break-inside: avoid; }
}

/* --- Documentos legales plegados, con el mismo trato que la FAQ --- */

.intro-doc { margin-bottom: var(--e-4); }

/* El cuerpo de cada apartado: recupera el ritmo vertical que .prosa solo da
   a sus hijos directos, y respira por abajo antes del siguiente pliegue */
.doc-plegable .apartado-cuerpo { padding-bottom: var(--e-5); }
.doc-plegable .apartado-cuerpo > * + * { margin-top: var(--e-3); }
.doc-plegable .apartado-cuerpo p,
.doc-plegable .apartado-cuerpo li { color: var(--gris); }
.doc-plegable .apartado-cuerpo strong { color: var(--tinta); }
.doc-plegable .apartado-cuerpo table { width: 100%; border-collapse: collapse; }
.doc-plegable .apartado-cuerpo th,
.doc-plegable .apartado-cuerpo td {
    text-align: left; padding: var(--e-2) var(--e-3);
    border-bottom: var(--linea) solid var(--borde);
}

/* Que llegar con #ancla no esconda el título bajo la cabecera fija */
.doc-plegable details { scroll-margin-top: 96px; }

.abrir-todo { text-align: center; margin-top: var(--e-4); }

/* --- Cabecera de los documentos legales --- */

/* Banda a ancho completo, como la del héroe: el título suelto sobre blanco
   era lo que hacía pobre la zona. */
.cabecera-doc {
    margin-inline: calc(50% - 50vw);
    padding-inline: calc(50vw - 50%);
    background: var(--fondo-suave);
    border-bottom: var(--linea) solid var(--borde);
    padding-block: var(--e-6);
    text-align: center;
}
.cabecera-doc .doc-sobrelinea {
    font-size: var(--t-1); font-weight: var(--p-medio); color: var(--acento);
    text-transform: uppercase; letter-spacing: .08em;
    margin: 0 0 var(--e-2);
}
.cabecera-doc h1 {
    font-size: var(--t-6); font-weight: var(--p-fuerte);
    margin: 0 0 var(--e-4);
}
.cabecera-doc .nav-legal { margin-bottom: var(--e-4); }

/* La fecha como sello, no como párrafo en negrita */
.doc-fecha {
    display: inline-flex; align-items: center; gap: var(--e-2);
    padding: var(--e-1) var(--e-3);
    border: var(--linea) solid var(--borde);
    border-radius: 999px;
    background: var(--fondo);
    font-size: var(--t-1); color: var(--gris);
    margin: 0 0 var(--e-4);
}
.doc-fecha svg.ico { width: 13px; height: 13px; }

/* El resumen del documento: la regla de oro en tarjeta, con su filo de acento */
.doc-resumen {
    max-width: 42rem; margin: 0 auto;
    background: var(--fondo);
    border: var(--linea) solid var(--borde-tarjeta);
    border-left: 3px solid var(--acento);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: var(--e-4) var(--e-5);
    text-align: left;
    font-size: var(--t-3);
}
.doc-resumen p { margin: 0; color: var(--gris); }
.doc-resumen p + p { margin-top: var(--e-3); }
.doc-resumen strong { color: var(--tinta); }

@media (max-width: 640px) {
    .cabecera-doc h1 { font-size: var(--t-5); }
}

/* --- Franja de cifras de la portada, con relieve --- */

/* Perspectiva para que la inclinación del hover sea 3D de verdad */
.banda-cifras {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--e-4);
    perspective: 900px;
}

.cifra-3d {
    position: relative;
    padding: var(--e-5);
    background: linear-gradient(180deg, var(--fondo), var(--fondo-suave));
    border: var(--linea) solid var(--borde-tarjeta);
    border-radius: var(--radio);
    /* Dos sombras y un filo de luz arriba: eso es lo que da el relieve */
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 60%, transparent),
        0 1px 2px rgba(15, 18, 21, .06),
        var(--sombra);
    transition: transform .25s ease, box-shadow .25s ease;
}
.cifra-3d:hover {
    transform: translateY(-5px) rotateX(3deg);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 60%, transparent),
        0 14px 30px color-mix(in srgb, var(--acento) 14%, transparent),
        var(--sombra);
}

/* Un resplandor del acento detrás del número, muy tenue */
.cifra-3d::before {
    content: ''; position: absolute; inset: 0;
    border-radius: inherit;
    background: radial-gradient(120px 60px at 24% 30%, color-mix(in srgb, var(--acento) 7%, transparent), transparent 70%);
    pointer-events: none;
}

.cifra-icono {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 10px;
    background: color-mix(in srgb, var(--acento) 12%, var(--fondo));
    color: var(--acento);
    margin-bottom: var(--e-3);
}
.cifra-icono svg.ico { width: 20px; height: 20px; }

.cifra-3d .dato {
    font-size: var(--t-6); font-weight: var(--p-fuerte);
    font-variant-numeric: tabular-nums; line-height: 1.1;
}
.cifra-3d .dato-unidad { font-size: var(--t-4); color: var(--gris); font-weight: var(--p-medio); }
.cifra-3d .etiqueta { margin-top: var(--e-1); font-size: var(--t-2); color: var(--gris); }

/* En oscuro el filo de luz blanco gritaría: se apaga a un brillo mínimo */
:root[data-tema="oscuro"] .cifra-3d {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .06),
        var(--sombra);
}

@media (prefers-reduced-motion: reduce) {
    .cifra-3d, .cifra-3d:hover { transform: none; transition: none; }
}

/* --- El gancho del héroe: tres promesas con visto --- */
.gancho-lista {
    list-style: none; margin: var(--e-4) 0 0; padding: 0;
    display: grid; gap: var(--e-3);
    max-width: 560px;
}
.gancho-lista li { display: flex; gap: var(--e-3); align-items: flex-start; }
.gancho-lista svg.ico {
    flex: 0 0 22px; width: 22px; height: 22px;
    padding: 3px; border-radius: 50%;
    background: color-mix(in srgb, var(--acento) 14%, var(--fondo));
    color: var(--acento);
    margin-top: 1px;
}
.gancho-lista span { font-size: var(--t-3); color: var(--gris); }
.gancho-lista strong { color: var(--tinta); }

/* La palabra clave del titular, en el acento y con su subrayado a mano */
.h1-acento {
    color: var(--acento);
    position: relative; white-space: nowrap;
}
.h1-acento::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -2px;
    height: 3px; border-radius: 2px;
    background: var(--acento); opacity: .35;
}

/* --- «Cómo funciona» con relieve: los pasos como camino --- */

.pasos-3d { perspective: 900px; }
.pasos-3d > div {
    position: relative;
    background: linear-gradient(180deg, var(--fondo), var(--fondo-suave));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 60%, transparent),
        0 1px 2px rgba(15, 18, 21, .06),
        var(--sombra);
    transition: transform .25s ease, box-shadow .25s ease;
}
.pasos-3d > div:hover {
    transform: translateY(-5px) rotateX(3deg);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 60%, transparent),
        0 14px 30px color-mix(in srgb, var(--acento) 14%, transparent),
        var(--sombra);
}
/* El número respira al entrar en la tarjeta */
.pasos-3d > div:hover .num-paso { transform: scale(1.12); }
.pasos-3d .num-paso { transition: transform .25s ease; }

/* La flecha que une cada paso con el siguiente: es un camino, no cuatro
   cajas sueltas. Solo en escritorio, donde van en fila. */
@media (min-width: 901px) {
    .pasos-3d > div:not(:last-child)::after {
        content: '→';
        position: absolute; right: calc(var(--e-4) * -1 + 2px); top: 42px;
        width: var(--e-4); text-align: center;
        color: var(--acento); font-size: var(--t-4); font-weight: var(--p-fuerte);
        opacity: .55;
    }
}

/* El glosario gana vida sin perder sobriedad: la fila se ilumina al pasar
   y su pastilla de estado se asoma */
.glosario-fila { transition: background-color .2s ease; }
.glosario-fila:hover { background: var(--fondo-suave); }
.glosario-fila .estado { transition: transform .2s ease; }
.glosario-fila:hover .estado { transform: scale(1.08); }

:root[data-tema="oscuro"] .pasos-3d > div {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), var(--sombra);
}
@media (prefers-reduced-motion: reduce) {
    .pasos-3d > div, .pasos-3d > div:hover,
    .pasos-3d .num-paso, .glosario-fila .estado { transform: none; transition: none; }
}

/* --- Ventana de condiciones antes del primer pedido --- */

.ventana-condiciones {
    /* El navegador centra los diálogos con «margin: auto», pero el reset de
       arriba («* { margin: 0 }») se lo lleva por delante y la ventana se queda
       en la esquina. Igual que en dialog.ficha, el centrado va explícito. */
    position: fixed;
    inset: 0;
    margin: auto;

    width: min(560px, calc(100vw - var(--e-5)));
    max-height: calc(100vh - var(--e-6));
    overflow-y: auto;
    padding: var(--e-5);
    border: none;
    border-radius: var(--radio-tarjeta, 10px);
    background: var(--fondo);
    color: var(--texto);
    box-shadow: 0 24px 60px rgba(15, 18, 21, .28);
}
.ventana-condiciones::backdrop {
    background: rgba(10, 12, 16, .62);
    backdrop-filter: blur(3px);
}
/* Entra subiendo y creciendo un pelo: se siente como algo que se te acerca */
.ventana-condiciones[open] { animation: vc-entra .28s cubic-bezier(.2, .8, .3, 1); }
@keyframes vc-entra {
    from { opacity: 0; transform: translateY(14px) scale(.96); }
    to   { opacity: 1; transform: none; }
}

.vc-cabecera {
    display: flex; gap: var(--e-3); align-items: flex-start;
    padding-bottom: var(--e-4); margin-bottom: var(--e-4);
    border-bottom: var(--linea) solid var(--borde);
}
.vc-cabecera h2 { margin: 0 0 var(--e-1); font-size: var(--t-5); }
.vc-cabecera p { margin: 0; color: var(--gris); font-size: var(--t-3); }

/* El sello del acento, con un halo suave que lo despega del fondo */
.vc-sello {
    flex: none; display: grid; place-items: center;
    width: 44px; height: 44px; border-radius: 50%;
    background: color-mix(in srgb, var(--acento) 12%, transparent);
    color: var(--acento);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--acento) 6%, transparent);
}
.vc-sello svg { width: 22px; height: 22px; }

.vc-reglas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-4); }
.vc-reglas li { display: flex; gap: var(--e-3); align-items: flex-start; }
.vc-reglas h3 { margin: 0 0 2px; font-size: var(--t-3); font-weight: var(--p-fuerte); }
.vc-reglas p { margin: 0; color: var(--gris); font-size: var(--t-2); line-height: 1.55; }
.vc-num {
    flex: none; display: grid; place-items: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--acento); color: var(--sobre-acento);
    font-size: var(--t-1); font-weight: var(--p-fuerte);
}

.vc-casilla {
    display: flex; gap: var(--e-3); align-items: flex-start; cursor: pointer;
    margin: var(--e-5) 0 var(--e-4); padding: var(--e-3);
    border: var(--linea) solid var(--borde); border-radius: var(--radio);
    background: var(--fondo-suave);
    font-size: var(--t-2); line-height: 1.55;
    transition: border-color .2s ease, background-color .2s ease;
}
.vc-casilla:hover { border-color: color-mix(in srgb, var(--acento) 45%, var(--borde)); }
.vc-casilla:has(:checked) {
    border-color: var(--acento);
    background: color-mix(in srgb, var(--acento) 7%, var(--fondo));
}
.vc-casilla input { flex: none; width: 17px; height: 17px; margin-top: 1px; accent-color: var(--acento); }

.vc-pie { display: flex; gap: var(--e-3); justify-content: flex-end; }
.vc-pie .boton:disabled { opacity: .45; cursor: not-allowed; }

.vc-nota {
    display: flex; gap: var(--e-2); align-items: flex-start;
    margin: var(--e-4) 0 0; padding-top: var(--e-3);
    border-top: var(--linea) solid var(--borde);
    color: var(--gris); font-size: var(--t-1); line-height: 1.5;
}
.vc-nota svg { flex: none; width: 14px; height: 14px; margin-top: 2px; }

@media (max-width: 520px) {
    .ventana-condiciones { padding: var(--e-4); }
    .vc-pie { flex-direction: column-reverse; }
    .vc-pie button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .ventana-condiciones[open] { animation: none; }
}

/* Contraste medido de la ventana de condiciones.
   El acento de la marca es un violeta claro: sobre fondo claro no llega ni a
   3:1 como texto, y en oscuro no aguanta texto blanco encima. Aquí importa
   más que en otros sitios, porque el enlace lleva al documento que se acepta. */
.vc-casilla a { color: color-mix(in srgb, var(--acento) 72%, #000); }
:root[data-tema="oscuro"] .vc-casilla a { color: var(--acento); }
:root[data-tema="oscuro"] .vc-sello { color: var(--acento); }

/* --- Ajustes → Redes sociales --- */
.red-celda { display: flex; gap: var(--e-3); align-items: center; }
.red-celda svg { width: 18px; height: 18px; flex: none; color: var(--gris); }
.fila-icono { display: flex; gap: var(--e-3); align-items: center; }
.fila-icono select { flex: 1; }
.muestra-icono {
    flex: none; display: grid; place-items: center;
    width: 38px; height: 38px; border-radius: var(--radio-control);
    border: var(--linea) solid var(--borde-control);
    background: var(--fondo-suave); color: var(--acento);
}
.muestra-icono svg { width: 20px; height: 20px; }

/* La celda de IP en Actividad: el botón solo se enseña al pasar por la fila,
   para que la columna no parezca una fila de botones rojos */
.celda-ip { white-space: nowrap; }
.celda-ip .boton-mini { opacity: 0; transition: opacity .15s ease; margin-left: var(--e-2); }
tr:hover .celda-ip .boton-mini,
.celda-ip .boton-mini:focus-visible { opacity: 1; }
@media (hover: none) {
    .celda-ip .boton-mini { opacity: 1; }
}

/* --- Agregar fondos: los métodos en tarjetas, todos a la vista --- */

.zona-pago { max-width: 720px; margin-inline: auto; }

.rejilla-metodos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
    gap: var(--e-3);
    margin-top: var(--e-3);
}

.tarjeta-metodo {
    position: relative;
    display: flex; flex-direction: column; gap: var(--e-2);
    min-height: 122px; padding: var(--e-3);
    border: var(--linea) solid var(--borde-tarjeta);
    border-radius: var(--radio-tarjeta, 10px);
    background: var(--fondo);
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.tarjeta-metodo:hover {
    border-color: color-mix(in srgb, var(--acento) 45%, var(--borde-tarjeta));
    transform: translateY(-2px);
    box-shadow: var(--sombra);
}
/* El radio de verdad se esconde, pero sigue ahí para el teclado y el lector */
.tarjeta-metodo input {
    position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none;
}
.tarjeta-metodo:has(:checked) {
    border-color: var(--acento);
    background: color-mix(in srgb, var(--acento) 6%, var(--fondo));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--acento) 28%, transparent);
}
.tarjeta-metodo:has(:focus-visible) {
    outline: 2px solid var(--acento); outline-offset: 2px;
}

.tm-marca { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); min-height: 20px; }
.tm-etiqueta {
    font-size: var(--t-1); color: var(--gris);
    border: var(--linea) solid var(--borde); border-radius: 999px;
    padding: 1px var(--e-2);
}
.tm-bono {
    color: var(--exito, #1b7f4d); border-color: currentColor; font-weight: var(--p-medio);
}
/* El visto solo aparece en la elegida */
.tm-visto {
    display: none; flex: none; width: 18px; height: 18px; border-radius: 50%;
    background: var(--acento); color: var(--sobre-acento);
    align-items: center; justify-content: center;
}
.tm-visto svg { width: 11px; height: 11px; }
.tarjeta-metodo:has(:checked) .tm-visto { display: inline-flex; }

.tm-nombre { font-weight: var(--p-fuerte); font-size: var(--t-3); line-height: 1.25; }
.tm-logo {
    margin-top: auto; display: flex; align-items: center; min-height: 34px;
}
.tm-logo img { max-height: 30px; max-width: 100%; object-fit: contain; }
.tm-logo svg { width: 26px; height: 26px; color: var(--gris); }

/* Importes de un toque */
.montos-rapidos { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: var(--e-3) 0; }
.montos-rapidos .chip { font-variant-numeric: tabular-nums; }

.instrucciones-pago {
    white-space: pre-line;
    padding: var(--e-3); margin-bottom: var(--e-3);
    border-left: 3px solid var(--acento);
    background: var(--fondo-suave);
    border-radius: var(--radio-control);
}

.sello-seguro {
    display: flex; gap: var(--e-2); align-items: center;
    margin: var(--e-4) 0 var(--e-3);
    color: var(--gris); font-size: var(--t-2);
}
.sello-seguro svg { flex: none; width: 15px; height: 15px; color: var(--exito, #1b7f4d); }

.boton-pagar { width: 100%; }

.visualmente-oculto {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .tarjeta-metodo, .tarjeta-metodo:hover { transform: none; transition: none; }
}

/* --- Remate de Agregar fondos --- */

/* Los importes rápidos heredaban el estilo del botón principal y salían como
   cinco bloques morados. Son un atajo, no la acción: pastilla de contorno. */
.montos-rapidos .monto-rapido {
    flex: 0 0 auto;
    padding: var(--e-2) var(--e-4);
    font-size: var(--t-3); font-weight: var(--p-medio);
    font-variant-numeric: tabular-nums;
    color: var(--tinta);
    background: var(--fondo);
    border: var(--linea) solid var(--borde-control);
    border-radius: 999px;
    box-shadow: none;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.montos-rapidos .monto-rapido:hover {
    border-color: var(--acento); color: var(--acento); background: var(--fondo);
}
.montos-rapidos .monto-rapido.activo {
    border-color: var(--acento);
    background: color-mix(in srgb, var(--acento) 12%, var(--fondo));
    color: var(--acento);
    font-weight: var(--p-fuerte);
}

/* El hueco del logo, con medida fija: los logos vienen de tamaños dispares y
   sin caja propia uno pequeño se queda de sello y otro ocupa la tarjeta. */
.tm-logo {
    width: 100%; height: 32px;
    justify-content: flex-start;
}
.tm-logo img { max-height: 32px; max-width: 108px; }

/* En pantalla estrecha la tarjeta se tumba: logo, nombre y marca en una fila.
   Apiladas ocupaban 122px cada una y había que desplazar para ver la tercera. */
@media (max-width: 560px) {
    .rejilla-metodos { grid-template-columns: 1fr; gap: var(--e-2); }

    .tarjeta-metodo {
        display: grid;
        grid-template-columns: 44px 1fr auto;
        grid-template-areas: "logo nombre marca";
        align-items: center;
        gap: var(--e-3);
        min-height: 0;
        padding: var(--e-3);
    }
    .tarjeta-metodo:hover { transform: none; }

    .tm-logo {
        grid-area: logo;
        width: 44px; height: 28px;
        justify-content: center;
    }
    .tm-logo img { max-height: 26px; max-width: 44px; }
    .tm-logo svg { width: 22px; height: 22px; }

    .tm-nombre { grid-area: nombre; font-size: var(--t-3); }
    .tm-marca { grid-area: marca; min-height: 0; }

    .montos-rapidos { gap: var(--e-2); }
    .montos-rapidos .monto-rapido { padding: var(--e-2) var(--e-3); font-size: var(--t-2); }
}

/* ——— Blog: entradas largas para posicionar ———
   El panel es una interfaz densa: 14px y líneas de 93 caracteres. Un artículo
   de diez minutos no se lee así, se abandona. Aquí la columna es de lectura
   —un paso más de la misma escala, 68 caracteres, más aire entre párrafos— y
   la jerarquía se ve: cada sección se abre con una línea de 1px, como en el
   resto del panel. Ni un tamaño ni un color fuera de la escala. */

.prosa { max-width: 34rem; margin-inline: auto; font-size: var(--t-4); line-height: 1.7; }
.prosa > * + * { margin-top: var(--e-5); }
.prosa a { color: var(--acento); }

/* La entradilla: el primer párrafo hace de arranque y da el primer escalón */
.entrada-blog .prosa > p:first-of-type { font-size: var(--t-5); line-height: 1.55; color: var(--gris); }

.prosa h2 {
    font-size: var(--t-6); line-height: 1.25; font-weight: var(--p-fuerte);
    margin-top: var(--e-7); padding-top: var(--e-5);
    border-top: var(--linea) solid var(--borde);
}
.prosa h3 { font-size: var(--t-5); line-height: 1.35; font-weight: var(--p-fuerte); margin-top: var(--e-6); }
.prosa ul, .prosa ol { padding-left: var(--e-5); }
.prosa li + li { margin-top: var(--e-3); }
.prosa img { max-width: 100%; }
.prosa blockquote { border-left: 2px solid var(--acento); padding-left: var(--e-4); color: var(--gris); }

/* Enlace al apartado: aparece al pasar por encima, no ocupa sitio */
.prosa h2[id] { position: relative; }
.prosa h2[id] > a.ancla {
    position: absolute; left: -1.25em; top: 0; opacity: 0;
    color: var(--borde); text-decoration: none; font-weight: var(--p-normal);
}
.prosa h2[id]:hover > a.ancla { opacity: 1; }
.prosa h2[id] > a.ancla:hover { color: var(--acento); }

/* Tablas: cifras tabulares y solo líneas horizontales (lo que no es dato, sobra).
   En pantalla ancha se salen de la columna de lectura: el contraste de anchos
   rompe el bloque de texto y de paso caben cuatro columnas sin apreturas. */
.prosa table {
    width: 100%; border-collapse: collapse;
    font-size: var(--t-3); font-variant-numeric: tabular-nums;
    display: block; overflow-x: auto;
}
.prosa th, .prosa td {
    border: 0; border-bottom: var(--linea) solid var(--borde);
    padding: var(--e-3); text-align: left; vertical-align: top;
}
.prosa thead th { color: var(--gris); font-weight: var(--p-medio); border-bottom-color: var(--tinta); }
@media (min-width: 900px) {
    .entrada-blog .prosa table { display: table; width: calc(100% + 8rem); margin-inline: -4rem; }
}

/* Dos anchos y no más: el texto a 34rem, y lo que es imagen o tabla a 42rem.
   Ese salto es el que rompe la columna sin necesidad de adornar nada. */
.portada-blog { display: block; width: 100%; max-width: 42rem; margin: 0 auto var(--e-6); }

/* Cabecera de la entrada */
.entrada-cabecera { max-width: 34rem; margin: 0 auto var(--e-5); }
.migas { font-size: var(--t-2); color: var(--gris); display: flex; gap: var(--e-2); flex-wrap: wrap; margin-bottom: var(--e-4); }
.migas a { color: var(--gris); text-decoration: none; }
.migas a:hover { color: var(--acento); }
.entrada-meta { display: flex; gap: var(--e-2); flex-wrap: wrap; font-size: var(--t-2); color: var(--gris); margin-top: var(--e-2); }

/* Cuerpo: la columna de lectura, y el índice al margen cuando hay sitio */
.entrada-cuerpo { max-width: 34rem; margin-inline: auto; position: relative; }
.indice-articulo { margin-bottom: var(--e-6); font-size: var(--t-2); }
.indice-articulo > div {
    border-top: var(--linea) solid var(--borde);
    border-bottom: var(--linea) solid var(--borde);
    padding: var(--e-4) 0;
}
.indice-articulo p { font-weight: var(--p-medio); margin-bottom: var(--e-2); }
.indice-articulo ol { padding-left: var(--e-5); display: grid; gap: var(--e-1); }
.indice-articulo a { color: var(--gris); text-decoration: none; }
.indice-articulo a:hover, .indice-articulo a.aqui { color: var(--acento); }

@media (min-width: 1240px) {
    /* Fuera de la columna, en el margen: el texto sigue centrado en la página */
    .indice-articulo {
        position: absolute; top: 0; left: -17rem;
        width: 14rem; height: 100%; margin: 0;
    }
    .indice-articulo > div { position: sticky; top: 5.5rem; }
    .indice-articulo ol { padding-left: var(--e-4); }
}

/* Barra de avance de lectura: una línea del acento, sin más */
.progreso-lectura {
    position: fixed; top: 0; left: 0; z-index: 50;
    height: 2px; width: 0; background: var(--acento);
}

.chip-categoria {
    display: inline-flex; gap: var(--e-1); align-items: center;
    border: var(--linea) solid var(--borde); border-radius: var(--radio);
    padding: 0 var(--e-2); font-size: var(--t-2); color: var(--gris); text-decoration: none; line-height: 1.75rem;
}
.chip-categoria:hover, .chip-categoria.activa { border-color: var(--acento); color: var(--acento); }
.filtro-categorias { display: flex; gap: var(--e-2); flex-wrap: wrap; margin-bottom: var(--e-5); }

.cta-articulo {
    margin: var(--e-7) 0 0; padding: var(--e-5) 0;
    border-top: var(--linea) solid var(--borde); border-bottom: var(--linea) solid var(--borde);
    display: flex; justify-content: space-between; align-items: center; gap: var(--e-4); flex-wrap: wrap;
}
.cta-articulo p { max-width: 22rem; }
.cta-articulo .acciones { display: flex; gap: var(--e-2); flex-wrap: wrap; }

.relacionadas { margin-top: var(--e-7); }
.relacionadas h2 { font-size: var(--t-4); margin-bottom: var(--e-4); }
.relacionadas h3 { font-size: var(--t-3); }
.relacionadas h3 a { color: var(--tinta); text-decoration: none; }
.relacionadas h3 a:hover { color: var(--acento); }
.tarjeta-blog .meta-tarjeta { display: flex; gap: var(--e-2); flex-wrap: wrap; font-size: var(--t-1); color: var(--gris); }
.tarjeta-blog .meta-tarjeta a { color: var(--gris); text-decoration: none; }
.tarjeta-blog .meta-tarjeta a:hover { color: var(--acento); }

@media (max-width: 900px) {
    .prosa h2[id] > a.ancla { display: none; }
}
@media (max-width: 720px) {
    .prosa { font-size: var(--t-3); }
    .entrada-blog .prosa > p:first-of-type { font-size: var(--t-4); }
    .prosa h2 { font-size: var(--t-5); margin-top: var(--e-6); }
    .prosa h3 { font-size: var(--t-4); }
}

/* Las dos maneras de activar el segundo factor, una al lado de la otra:
   una sola superficie partida por una línea, no dos tarjetas flotando. */
.opciones-2fa {
    display: grid; grid-template-columns: 1fr 1fr;
    border: var(--linea) solid var(--borde); border-radius: var(--radio);
    max-width: 640px;
}
.opciones-2fa > div { padding: var(--e-4); }
.opciones-2fa > div + div { border-left: var(--linea) solid var(--borde); }
.dispositivos {
    border-top: var(--linea) solid var(--borde);
    border-bottom: var(--linea) solid var(--borde);
    padding: var(--e-4) 0; margin-bottom: var(--e-4); max-width: 640px;
}
@media (max-width: 720px) {
    .opciones-2fa { grid-template-columns: 1fr; }
    .opciones-2fa > div + div { border-left: 0; border-top: var(--linea) solid var(--borde); }
}

/* Marca junto al cliente cuando el pedido entró por la API: detrás hay un
   revendedor con su panel conectado, y el cliente final no es nuestro.
   Discreta a propósito — es un dato, no una alarma. */
.marca-origen {
    display: inline-block; margin-left: var(--e-2);
    padding: 0 var(--e-1);
    border: var(--linea) solid var(--borde); border-radius: var(--radio);
    font-size: var(--t-1); font-weight: var(--p-medio);
    color: var(--gris); vertical-align: middle; line-height: 1.4;
}

/* Interruptor del refresco automático de las listas de pedidos (cliente y
   administración). En gris y pequeño: es un ajuste, no un dato. En la lista
   del cliente va en la línea del título; en la del admin, en la barra de lote. */
.titulo-con-accion {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--e-4); flex-wrap: wrap;
}
.auto-refresco {
    display: inline-flex; align-items: center; gap: var(--e-2);
    font-size: var(--t-2); color: var(--gris); cursor: pointer;
    margin: 0; font-weight: var(--p-normal);
}
.auto-refresco input { width: auto; margin: 0; }
.barra-lote .auto-refresco { margin-left: auto; }
#refresco-aviso { font-variant-numeric: tabular-nums; }