/* 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 > .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); }
.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; }
.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);
}
/* 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 ---- */
.barra-lote {
    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); }

/* ---- 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); }
}