/* ==========================================================================
   EVEN's Team — Tienda
   Mismos colores, tipografía y formas que el panel y que la página de estado.
   Verde oscuro plano, tarjetas de borde fino y verde de acento. Sin degradados.
   ========================================================================== */

:root {
    --fondo: #070508;
    --panel: #121117;
    --panel-2: #1a1922;
    --linea: #2b2936;
    --linea-suave: #3a3848;
    --titulo: #89f500;
    --acento: #89f500;
    --acento-hover: #a6ff33;
    --texto: #f4f3f7;
    --texto-suave: #d6d4dd;
    --tenue: #9d9aa8;
    --tenue-2: #9d9aa8;
    --error: #ed4245;
    --radio: 14px;
}

* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--fondo);
    color: var(--texto);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

/* Barra de scroll oscura, como en el panel: por defecto sale blanca del
   sistema y desentona con todo lo demás. */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--fondo); }
::-webkit-scrollbar-thumb { background: #3a3848; border-radius: 6px; border: 2px solid var(--fondo); }
::-webkit-scrollbar-thumb:hover { background: #4b495c; }
* { scrollbar-color: #3a3848 var(--fondo); scrollbar-width: thin; }

a { color: var(--titulo); }
.enlace { color: var(--titulo); text-decoration: none; border-bottom: 1px solid rgba(137,245,0, .3); }
.enlace:hover { border-bottom-color: var(--titulo); }
.contenedor { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* --- Banner de actualización (igual que el del panel) --- */
.banner-actualizacion {
    display: none;
    position: sticky;
    top: 0;
    z-index: 9999;
    background: var(--acento);
    color: #0a0a06;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
}
.banner-actualizacion.visible { display: flex; }
.banner-actualizacion button {
    background: white; color: var(--fondo); border: none;
    border-radius: 20px; padding: 6px 14px; font-weight: bold; cursor: pointer;
}
.banner-actualizacion button:hover { background: #e4e4e4; }

/* --- Cabecera --- */
.cabecera {
    border-bottom: 1px solid var(--linea);
    background: var(--fondo);
    position: sticky;
    top: 0;
    z-index: 100;
}
.cabecera-int {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 68px;
}
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--texto); }
.marca-logo {
    /* El emblema oficial (engranaje + circuitos). Va como <img>, no como
       letra: por eso object-fit. Sale de `img/icon-192.png`, que genera
       `herramientas/generar_recursos.py` desde los logos de marca. */
    width: 34px; height: 34px; border-radius: 10px;
    object-fit: cover; display: block; flex-shrink: 0;
}
.marca-texto { font-weight: 700; font-size: 17px; }
.nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav a {
    color: var(--texto-suave); text-decoration: none;
    padding: 8px 12px; border-radius: 8px; font-size: 15px;
}
.nav a:hover { background: var(--panel); color: var(--texto); }
.nav a.activo { background: var(--panel); color: var(--titulo); font-weight: 600; }

/* --- Botones --- */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 12px 22px; border-radius: 10px;
    font-weight: 600; font-size: 15px; text-decoration: none;
    border: 1px solid transparent; cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.btn-primario { background: var(--acento); color: #0a0a06; }
.btn-primario:hover { background: var(--acento-hover); }
.btn-secundario { border-color: var(--linea-suave); color: var(--texto); background: var(--panel); }
.btn-secundario:hover { background: var(--panel-2); border-color: var(--tenue); }
.btn-ancho { width: 100%; }


/* --- Portada --- */
.hero { padding: 68px 0 44px; }
.hero-etiqueta {
    display: inline-block; margin: 0 0 18px;
    color: var(--titulo); font-size: 13px; font-weight: 600;
    letter-spacing: 1.4px; text-transform: uppercase;
}
.hero-titulo {
    margin: 0 0 18px;
    font-size: clamp(30px, 5vw, 48px);
    line-height: 1.15; letter-spacing: -0.02em; font-weight: 700;
    max-width: 15ch;
}
.hero-titulo span { color: var(--titulo); }
.hero-texto { margin: 0 0 28px; max-width: 60ch; color: var(--texto-suave); font-size: 17px; }
.hero-botones { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 44px; }
.hero-datos { display: flex; gap: 40px; flex-wrap: wrap; padding-top: 28px; border-top: 1px solid var(--linea); }
.dato { display: flex; flex-direction: column; }
.dato-valor { font-size: 22px; font-weight: 700; color: var(--titulo); }
.dato-texto { font-size: 14px; color: var(--tenue); }

/* --- Bloques de sección --- */
/* El borde va en el ::before con position:absolute en vez de border-top en la
   caja. Motivo: la linea separaba las tarjetas de su titulo, pero quedaba PEGADA
   a las tarjetas (0px por encima) y a 65px del titulo. Asi la separacion queda
   repartida: la linea cae en medio del hueco y el bloque mantiene su aire. */
.bloque {
    position: relative;
    padding: 64px 0;
    margin-top: 56px;
}
.bloque::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: var(--linea);
}
.bloque-titulo { margin: 0 0 10px; font-size: 24px; font-weight: 700; letter-spacing: -0.01em; }
.bloque-sub { margin: 0 0 30px; color: var(--tenue); font-size: 16px; }
.bloque-texto { color: var(--texto-suave); max-width: 70ch; line-height: 1.7; }
/* Los <p> de un bloque salían sin margen: el texto se pegaba al título de
   arriba y al de abajo. 16px arriba y abajo lo despeja. */
.bloque-texto p { margin: 0 0 16px; }
.bloque-texto p:last-child { margin-bottom: 0; }
.bloque-texto ul { margin: 0 0 16px; padding-left: 22px; }
.bloque-texto li { margin-bottom: 8px; line-height: 1.65; }
.bloque-texto h3 { margin: 24px 0 10px; font-size: 17px; color: var(--titulo); }
.bloque-texto h3:first-child { margin-top: 0; }
.bloque-mas { margin-top: 28px; text-align: center; }

/* --- Rejilla de tarjetas --- */
.rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    /* 28px en vez de 18px: con 18 las tarjetas quedaban demasiado juntas y
       costaba distinguir una de otra. */
    gap: 28px;
}
.tarjeta {
    background: var(--panel);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    /* Las tarjetas de una misma fila tienen la misma altura: si una tiene el
       resumen en 2 lineas y otra en 3, la rejilla las estiraba y la que
       "sobra" (p.ej. la del mantenimiento, que solo tiene un precio) quedaba
       mas alta que sus vecinas y se veia salida de la fila. */
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.tarjeta:hover {
    transform: translateY(-3px);
    border-color: var(--linea-suave);
    box-shadow: 0 6px 18px rgba(0,0,0, 0.35);
}
.tarjeta-enlace {
    display: flex; flex-direction: column; height: 100%;
    /* Más aire dentro de la tarjeta: 22px de padding dejaban el texto y el
       precio casi pegados al borde. */
    padding: 30px 26px 24px; text-decoration: none; color: inherit;
}
.tarjeta-icono { font-size: 30px; line-height: 1; margin-bottom: 16px; }
.tarjeta-cuerpo { flex: 1; }
.tarjeta-categoria { margin: 0 0 8px; font-size: 12px; color: var(--tenue); text-transform: uppercase; letter-spacing: .6px; }
/* El resumen es el último elemento de la parte de arriba: necesita aire hacia
   abajo para que no quede pegado a la línea que separa del precio. */
.tarjeta-resumen { margin: 0; font-size: 14px; color: var(--tenue); line-height: 1.6; }

/* --- Categorías en la portada --- */
.rejilla-categorias { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; }
.cat-tarjeta {
    background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio);
    padding: 22px 20px; text-decoration: none; color: inherit;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.cat-tarjeta:hover { transform: translateY(-3px); border-color: var(--acento); background: var(--panel-2); }
.cat-icono { font-size: 26px; display: block; margin-bottom: 12px; }
.cat-tarjeta h3 { margin: 0 0 8px; font-size: 17px; color: var(--texto); }
.cat-tarjeta p { margin: 0 0 12px; font-size: 14px; color: var(--tenue); line-height: 1.55; }
.cat-conteo { font-size: 12px; color: var(--titulo); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }

/* --- Pasos --- */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.pasos li { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 22px 20px; }
.pasos h3 { margin: 12px 0 8px; font-size: 17px; color: var(--texto); }
.pasos p { margin: 0; font-size: 14px; color: var(--tenue); line-height: 1.6; }
.paso-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--panel-2); border: 1px solid var(--linea);
    color: var(--titulo); font-weight: 700; font-size: 15px;
}
.pasos-detallados { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* --- Cabecera de página interna --- */
/* La cabecera de página lleva aire debajo para que el título y la descripción
   no se peguen al contenido que viene después. */
.pagina-cabecera { padding: 56px 0 28px; }
.pagina-titulo { margin: 0 0 12px; font-size: clamp(26px, 4vw, 34px); font-weight: 700; letter-spacing: -0.01em; }
.pagina-sub { margin: 0 0 8px; color: var(--tenue); font-size: 16px; max-width: 65ch; line-height: 1.6; }

/* --- Filtros --- */
.filtros { margin: 32px 0 8px; }
.filtros-barra { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; }
.buscador { position: relative; flex: 1; min-width: 240px; max-width: 420px; }
.buscador input {
    width: 100%; padding: 11px 46px 11px 16px;
    border-radius: 22px; border: 1px solid var(--linea-suave);
    background: var(--panel); color: var(--texto); font-size: 15px; font-family: inherit;
}
.buscador input::placeholder { color: var(--tenue); }
.buscador input:focus { outline: none; border-color: var(--acento); }
.buscador button {
    position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
    width: 32px; height: 32px; border: none; border-radius: 50%;
    background: var(--acento); color: #0a0a06; cursor: pointer; font-size: 14px;
}
.buscador button:hover { background: var(--acento-hover); }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo span { font-size: 13px; color: var(--tenue); }
.campo select {
    padding: 10px 14px; border-radius: 8px;
    border: 1px solid var(--linea-suave); background: var(--panel);
    color: var(--texto); font-size: 14px; font-family: inherit; cursor: pointer;
}
.pildoras { display: flex; gap: 10px; flex-wrap: wrap; }
.pildora {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 15px; border-radius: 20px;
    background: var(--panel); border: 1px solid var(--linea);
    color: var(--texto-suave); text-decoration: none; font-size: 14px; white-space: nowrap;
}
.pildora:hover { background: var(--panel-2); }
.pildora.activa { background: var(--acento); border-color: var(--acento); color: #0a0a06; font-weight: 600; }
.pildora-cuenta { opacity: .7; font-size: 12px; }
.resultados { margin: 22px 0 18px; color: var(--tenue); font-size: 14px; }

/* --- Estado vacío --- */

/* --- Migas de navegación --- */
.migas { margin: 28px 0 20px; font-size: 14px; color: var(--tenue); }
.migas a { color: var(--tenue); text-decoration: none; }
.migas a:hover { color: var(--titulo); }
.migas span { margin: 0 6px; opacity: .6; }
.miga-actual { color: var(--texto-suave); }

/* --- Ficha de producto --- */
.ficha {
    background: var(--panel); border: 1px solid var(--linea);
    border-radius: var(--radio); padding: 28px 26px; margin-bottom: 48px;
}
.ficha-cabecera {
    display: flex; gap: 20px; align-items: flex-start;
    padding-bottom: 24px; border-bottom: 1px solid var(--linea);
}
.ficha-icono {
    width: 64px; height: 64px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 32px; background: var(--panel-2);
    border: 1px solid var(--linea); border-radius: 12px;
}
.ficha-titulos { flex: 1; }
.ficha-categoria { margin: 0 0 6px; font-size: 13px; color: var(--tenue); text-transform: uppercase; letter-spacing: .6px; }
.ficha-nombre { margin: 0 0 8px; font-size: clamp(24px, 4vw, 32px); font-weight: 700; letter-spacing: -0.01em; }
.ficha-resumen { margin: 0; color: var(--tenue); font-size: 16px; }
.ficha-precio { text-align: right; flex-shrink: 0; }
.precio-grande { display: block; font-size: 26px; font-weight: 700; color: var(--titulo); line-height: 1.2; }
.precio-nota { display: block; font-size: 12px; color: var(--tenue); margin-top: 4px; }
.ficha-cuerpo { display: grid; grid-template-columns: 1fr 320px; gap: 36px; padding-top: 26px; }
.ficha-seccion { margin: 26px 0 12px; font-size: 18px; color: var(--titulo); }
.ficha-seccion:first-child { margin-top: 0; }
.ficha-texto { margin: 0; color: var(--texto-suave); max-width: 62ch; }
.lista-check { list-style: none; margin: 0; padding: 0; }
.lista-check li { position: relative; padding-left: 28px; margin-bottom: 10px; color: var(--texto-suave); }
.lista-check li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--titulo); font-weight: 700; }


/* --- Compras: estado e importes --- */
/* Cada estado con su color, para que el cliente sepa de un vistazo si su
   compra esta esperando algo. Los de "parado" (cerrado, cancelado,
   reembolsado) en gris, que es lo mismo que usa el resto de la web para lo
   que ya no esta activo. */
.estado-pill {
    display: inline-block;
    margin: 0;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    background: var(--panel-2);
    border: 1px solid var(--linea);
    color: var(--tenue);
}
.estado-pill.grande { font-size: 15px; padding: 9px 18px; }
.estado-pendiente_pago { color: #ffca3a; border-color: #ffca3a; }
.estado-pagado { color: var(--titulo); border-color: var(--acento); }
.estado-en_curso { color: #5fa8d3; border-color: #5fa8d3; }
.estado-esperando_cliente { color: #f4a259; border-color: #f4a259; }
.estado-esperando_evens { color: #b5838d; border-color: #b5838d; }
.estado-entregado { color: #8ac926; border-color: #8ac926; }
.estado-cerrado, .estado-cancelado, .estado-reembolsado {
    color: var(--tenue); border-color: var(--linea);
}

/* --- Calculadora de almacenamiento a medida --- */
/* El bloque va antes de la tabla de precios: es lo primero que el cliente ve
   de esta ficha, porque es la razon de que el producto no tenga precio. */
.calculadora {
    background: var(--panel-2);
    border: 1px solid var(--linea-suave);
    border-left: 4px solid var(--acento);
    border-radius: 12px;
    padding: 22px 24px;
    margin-bottom: 30px;
}
.calculadora .ficha-seccion { margin-top: 0; }
.calculadora-intro { margin: 0 0 20px; color: var(--tenue); font-size: 15px; line-height: 1.6; }

.campo-calculo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.campo-calculo label { font-size: 14px; color: var(--tenue); font-weight: 600; }
.campo-calculo input {
    width: 100%;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid var(--linea-suave);
    background: var(--fondo);
    color: var(--texto);
    font-size: 20px;
    font-family: inherit;
    font-weight: 600;
}
.campo-calculo input:focus { outline: none; border-color: var(--acento); }
.campo-ayuda { font-size: 12px; color: var(--tenue); }

.pila-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.pildora-rapida {
    padding: 9px 14px;
    border-radius: 18px;
    background: var(--panel);
    border: 1px solid var(--linea);
    color: var(--texto-suave);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.pildora-rapida:hover { border-color: var(--acento); color: var(--titulo); }

.resultado-calculo {
    background: var(--fondo);
    border: 1px solid var(--linea);
    border-radius: 10px;
    padding: 18px 20px;
}
.resultado-linea {
    margin: 0 0 6px;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 17px;
    color: var(--texto-suave);
}
.resultado-igual { color: var(--tenue); }
.resultado-precio { font-size: 26px; font-weight: 700; color: var(--titulo); }
.resultado-nota { margin: 0; font-size: 13px; color: var(--tenue); }

.calculadora-error {
    margin: 12px 0 0;
    padding: 11px 14px;
    border-radius: 8px;
    background: rgba(237,66,69, 0.12);
    border-left: 3px solid var(--error);
    color: #ffb4b6;
    font-size: 14px;
}

.calculadora-tabla { margin-top: 18px; }
.calculadora-tabla summary {
    cursor: pointer;
    color: var(--tenue);
    font-size: 14px;
    padding: 6px 0;
}
.calculadora-tabla summary:hover { color: var(--titulo); }
.calculadora-tabla .tabla { margin-top: 12px; }
.calculadora-nota { margin: 10px 0 0; font-size: 13px; color: var(--tenue); line-height: 1.6; }

/* El precio grande de la ficha: cuando no hay precio fijo se muestra "N/A" en
   lugar de un importe, para que nadie lo lea como que el almacenamiento es
   gratis. */
.precio-na { color: var(--tenue); }


.caja { background: var(--panel-2); border: 1px solid var(--linea); border-radius: 12px; padding: 20px 18px; }
.caja + .caja { margin-top: 16px; }
.caja-tenue { background: var(--panel); }
.caja-titulo { margin: 0 0 14px; font-size: 16px; color: var(--texto); }
.caja-aviso { margin: 0 0 12px; font-size: 14px; color: var(--tenue); }
.caja-lista { list-style: none; margin: 16px 0 0; padding: 0; }
.caja-lista li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--linea); font-size: 14px; }
.caja-lista span { color: var(--tenue); }
.caja-lista strong { color: var(--texto); text-align: right; }
.caja-nota { margin: 14px 0 0; font-size: 13px; color: var(--tenue); line-height: 1.6; }

/* --- Tablas de precios --- */
.tabla-envoltorio { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--radio); }
.tabla { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabla th, .tabla td { padding: 13px 18px; text-align: left; }
.tabla thead th { background: var(--panel-2); color: var(--tenue); font-size: 12px; text-transform: uppercase; letter-spacing: .6px; font-weight: 600; border-bottom: 1px solid var(--linea); }
.tabla tbody tr { border-bottom: 1px solid var(--linea); }
.tabla tbody tr:last-child { border-bottom: none; }
.tabla tbody tr:hover { background: var(--panel); }
.tabla-precio { color: var(--titulo); font-weight: 700; white-space: nowrap; }
.tabla-categoria { color: var(--tenue); font-size: 14px; white-space: nowrap; }

/* --- Bloques de información --- */
.rejilla-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.info-tarjeta { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 20px 18px; }
.info-tarjeta h3 { margin: 0 0 10px; font-size: 16px; color: var(--texto); }
.info-tarjeta p { margin: 0; font-size: 14px; color: var(--tenue); line-height: 1.6; }
.info-tarjeta .enlace { display: inline-block; margin-top: 8px; font-size: 14px; }

/* --- Aviso destacado (términos, estado) --- */
.aviso-legal {
    display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
    background: var(--panel); border: 1px solid var(--linea); border-left: 4px solid var(--acento);
    border-radius: 12px; padding: 24px 26px; margin: 32px 0 8px;
}
.aviso-legal p { margin: 0; color: var(--texto-suave); font-size: 15px; max-width: 60ch; }
.bloque-cta { text-align: center; }
.bloque-cta .bloque-sub { margin: 0 auto; max-width: 60ch; }

/* --- Pie --- */
/* main no tenia padding arriba ni abajo: el contenido se pegaba a la
   cabecera sticky y el ultimo bloque se apoyaba en el pie con solo los
   48px de margin. Estos 40px de aire en cada extremo hacen que la pagina
   respire y el header pegajoso no se coma el primer bloque. */
main.contenedor { padding-top: 40px; padding-bottom: 40px; }
.pie { border-top: 1px solid var(--linea); margin-top: 48px; padding: 56px 0 40px; }
.pie-int { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 36px; }
.pie-marca { margin: 0 0 8px; font-weight: 700; font-size: 16px; color: var(--titulo); }
.pie-titulo { margin: 0 0 12px; font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--tenue); font-weight: 600; }
.pie-col a { display: block; color: var(--texto-suave); text-decoration: none; font-size: 14px; margin-bottom: 9px; line-height: 1.5; }
.pie-col a:hover { color: var(--titulo); }
.pie-nota { margin: 0; font-size: 13px; color: var(--tenue); line-height: 1.6; }
.pie-legal { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--linea); }
.pie-legal p { margin: 0; font-size: 12px; color: var(--tenue); }

/* --- Móvil y tableta --- */
@media (max-width: 900px) {
    .ficha-cuerpo { grid-template-columns: 1fr; gap: 26px; }
}

@media (max-width: 768px) {
    .contenedor { padding: 0 16px; }
    .cabecera-int { flex-direction: column; align-items: flex-start; height: auto; padding: 14px 0; gap: 12px; }
    .nav { overflow-x: auto; width: 100%; -webkit-overflow-scrolling: touch; }
    .hero { padding: 40px 0 32px; }
    .hero-datos { gap: 24px; }
    .ficha { padding: 20px 16px; }
    .ficha-cabecera { flex-wrap: wrap; }
    .ficha-precio { text-align: left; width: 100%; }
    .bloque { padding: 36px 0; }
    .buscador { max-width: none; }
}

/* ==========================================================================
   Panel de staff
   Solo se pinta si hay sesión de staff. Se parece a un embed de Discord:
   barra de color a la izquierda y botones con los mismos colores que el bot.
   ========================================================================== */

.staff-panel {
    background: var(--panel);
    border: 1px solid var(--linea);
    border-left: 4px solid var(--acento);
    border-radius: var(--radio);
    padding: 18px;
    margin-bottom: 24px;
}
.staff-badge { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.staff-badge-icono {
    width: 38px; height: 38px; flex-shrink: 0; font-size: 19px;
    display: flex; align-items: center; justify-content: center;
    background: var(--panel-2); border: 1px solid var(--linea); border-radius: 10px;
}
.staff-badge-titulo { margin: 0; font-weight: 700; font-size: 15px; color: var(--texto); }
.staff-badge-rol {
    margin: 0; font-size: 12px; color: var(--titulo);
    text-transform: uppercase; letter-spacing: .6px; font-weight: 600;
}
.staff-estado { border-top: 1px solid var(--linea); padding-top: 14px; margin-top: 14px; }
.staff-estado:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.staff-estado-titulo {
    margin: 0 0 10px; font-size: 12px; color: var(--tenue);
    text-transform: uppercase; letter-spacing: .6px; font-weight: 600;
}
.staff-estado-lista { list-style: none; margin: 0 0 12px; padding: 0; }
.staff-estado-lista li {
    display: flex; justify-content: space-between; gap: 10px;
    padding: 7px 0; border-bottom: 1px solid var(--linea); font-size: 13px;
}
.staff-estado-lista li:last-child { border-bottom: none; }
.staff-estado-lista span { color: var(--tenue); }
.staff-estado-lista strong { color: var(--texto); text-align: right; }
.staff-enlace-canal { font-size: 13px; color: var(--titulo); text-decoration: none; }
.staff-enlace-canal:hover { text-decoration: underline; }
.staff-vacio { margin: 0; font-size: 13px; color: var(--tenue); line-height: 1.6; }
.staff-hecho { margin: 0; font-size: 13px; color: var(--tenue); }

/* --- Botones de acción (los mismos colores que el bot) --- */
.staff-acciones form { margin-bottom: 8px; }
.btn-accion {
    width: 100%; padding: 10px 14px; border-radius: 8px; border: none;
    font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer;
    transition: filter 0.15s ease;
}
.btn-accion:hover { filter: brightness(1.15); }
.btn-accion.exito { background: #3f7a00; color: white; }
.btn-accion.primario { background: var(--acento); color: #0a0a06; }
.btn-accion.peligro { background: #c33a3d; color: white; }
.staff-form label { display: block; font-size: 13px; color: var(--tenue); margin-bottom: 10px; }
.staff-form input {
    width: 100%; margin-top: 5px; padding: 9px 12px; border-radius: 8px;
    border: 1px solid var(--linea-suave); background: var(--panel-2);
    color: var(--texto); font-size: 14px; font-family: inherit;
}
.staff-form input:focus { outline: none; border-color: var(--acento); }

/* --- Etiquetas de estado (mismos colores que el bot) --- */
.staff-etiqueta {
    display: inline-block; padding: 2px 9px; border-radius: 20px;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
    background: var(--linea); color: var(--texto);
}
.estado-nuevo { background: rgba(88,101,242,.25); color: #8b9dff; }
.estado-sin_asignar { background: rgba(254,231,92,.2); color: #FEE75C; }
.estado-pendiente { background: rgba(237,66,69,.2); color: #ED4245; }
.estado-completado { background: rgba(137,245,0,.2); color: #89f500; }
.si { color: #89f500; }
.no { color: #ED4245; }



/* --- Avisos de los botones de staff --- */
.avisos { display: flex; flex-direction: column; gap: 8px; margin: 20px 0 0; }
.aviso {
    margin: 0; padding: 12px 16px; border-radius: 10px; font-size: 14px;
    border: 1px solid var(--linea); border-left-width: 4px; background: var(--panel);
}
.aviso-ok { border-left-color: #89f500; color: #c6f0a0; }
.aviso-aviso { border-left-color: #FEE75C; color: #f5ebbd; }

/* --- Cabecera del panel --- */
.staff-cabecera {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; flex-wrap: wrap; padding: 34px 0 20px;
}
.staff-cabecera .pagina-cabecera { padding: 0; }
.staff-identidad { display: flex; align-items: center; gap: 12px; }
.btn-salir {
    padding: 7px 14px; border-radius: 8px; border: 1px solid var(--linea-suave);
    background: transparent; color: var(--tenue); font-size: 13px; cursor: pointer;
    font-family: inherit;
}
.btn-salir:hover { color: var(--error); border-color: var(--error); }

/* --- Lista de tickets --- */
.staff-lista { display: flex; flex-direction: column; gap: 10px; margin-bottom: 40px; }
.staff-fila {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    background: var(--panel); border: 1px solid var(--linea);
    border-left: 4px solid var(--acento); border-radius: 10px;
    padding: 14px 18px; text-decoration: none; color: var(--texto-suave); font-size: 14px;
}
.staff-fila:hover { background: var(--panel-2); border-left-color: var(--titulo); }
.staff-fila-razon { font-weight: 700; color: var(--texto); }
.staff-fila-cliente { color: var(--tenue); font-size: 13px; }
.staff-fila-canal { color: var(--tenue); font-size: 13px; margin-left: auto; }

/* --- Detalle de ticket: dos columnas --- */
.staff-ticket { display: grid; grid-template-columns: 340px 1fr; gap: 24px; align-items: start; }
.staff-panel { margin-bottom: 0; }
.staff-detalle { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 22px 20px; }
.staff-pago { border: 1px solid var(--linea); border-radius: 10px; padding: 16px; margin-bottom: 14px; background: var(--panel-2); }
.staff-pago.resuelto { opacity: .8; }
.staff-pago-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.staff-pago-top strong { font-size: 19px; color: var(--titulo); }
.staff-pago-asunto { margin: 8px 0 0; font-size: 14px; color: var(--tenue); }
.staff-pago-botones { display: flex; gap: 10px; margin-top: 14px; }
.staff-pago-botones form { flex: 1; margin: 0; }

.miga-staff { margin-left: auto; color: var(--titulo); }
.miga-staff a { color: var(--titulo); text-decoration: none; }

/* --- Botón de PayPal --- */
.btn-paypal { background: #003087; color: #ffffff; }
.btn-paypal:hover { background: #0056b8; }
.btn-separado { margin-top: 10px; }

@media (max-width: 900px) {
    .staff-ticket { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .staff-cabecera { padding: 24px 0 16px; }
    .staff-fila-canal { margin-left: 0; }
}

@media (max-width: 480px) {
    .rejilla, .rejilla-categorias, .rejilla-info { grid-template-columns: 1fr; }
    .hero-botones .btn { width: 100%; }
    .tabla th, .tabla td { padding: 11px 12px; }
}


.vacio {
    text-align: center; padding: 56px 24px;
    background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio);
    color: var(--texto-suave);
}
.vacio-grande { margin: 48px 0 72px; }
.vacio-icono { font-size: 40px; margin: 0 0 12px; }
.vacio p { margin: 0 0 12px; }
.vacio-nota { color: var(--tenue); font-size: 14px; }
.vacio .btn { margin-top: 8px; }

.tarjeta-titulo { margin: 0 0 8px; font-size: 18px; font-weight: 700; color: var(--texto); }
.tarjeta-resumen { margin: 0; font-size: 14px; color: var(--tenue); line-height: 1.55; }
.tarjeta-pie {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 14px;
    /* 34px de margen y 24px de padding: el precio iba pegado al texto de
       arriba. El borde que hay entre medias ya los separa, pero el aire hace
       que la tarjeta se lea en dos partes claras. */
    margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--linea);
    /* El resumen es lo último de la parte de arriba: sin esto se quedaba
       pegado a la línea que separa del precio. */
    margin-bottom: 2px;
}
.precio { font-size: 19px; font-weight: 700; color: var(--titulo); }
.tarjeta-ver { font-size: 13px; color: var(--tenue); white-space: nowrap; }

/* --- Sección mensual y V.I.P. --- */

/* El precio normal tachado: pequeño y apagado, para que se vea que se sustituye
   por el de V.I.P. y no para que compita con él. NO son display:block: están
   dentro de un flex (`.tarjeta-pie`), así que block los saca de la fila y
   empujan el "Ver detalle" de forma rara. Se agrupan en un <div>.
   flex:1 + min-width:0 para que el "Ver detalle" no se descuadre al ser
   empujado por un precio largo, y align-self:flex-end para que el "Ver
   detalle" se alinee con el precio de V.I.P. (el bueno) y no con el
   tachado de arriba. */
.precio-pares { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.precio-normal { font-size: 14px; font-weight: 500; color: var(--tenue); }
.precio-normal s { text-decoration-thickness: 1px; }
.precio-vip { color: var(--acento); }
/* "Gratis" se mostraba en un <span> suelto mientras el resto de productos
   usan el bloque .precio-pares (dos lineas: tachado + precio). Con un solo
   texto, el pie del mantenimiento quedaba 26px mas corto que el de sus
   vecinas de fila y se veía descuadrado. Con la misma estructura de dos
   lineas, todas las tarjetas de una fila miden exactamente igual.
   nowrap + tamaño reducido: en una tarjeta estrecha el texto no debe partirse
   nunca, porque eso volveria a romper la altura. */
.precio-gratis { font-size: 16px; white-space: nowrap; }
/* Todas las tarjetas de la seccion V.I.P. llevan el bloque .precio-pares con
   dos lineas (precio normal tachado + precio de miembro). Fijando la altura
   minima del bloque, el pie de todas las tarjetas de una fila mide lo mismo y
   ninguna queda mas alta que sus vecinas. Antes el mantenimiento, al tener un
   texto mas corto, dejaba el pie 26px mas bajo y se veia descuadrado. */
.precio-pares { min-height: 45px; }
.tarjeta-ver { align-self: flex-end; }

/* Tarjeta V.I.P.: un pelo de borde dorado/verde para distinguirla de un vistazo. */
.tarjeta-vip { border-color: var(--acento); }
.tarjeta-vip:hover { border-color: var(--acento-hover); }

/* Aviso de la cabecera de /tienda/vip. Importante: dice que el precio con
   descuento es solo para miembros, no que sea el precio normal. */
.aviso-vip {
    border-left: 4px solid var(--acento);
    background: var(--panel);
}
.aviso-vip p { margin-bottom: 14px; }

/* Enlace V.I.P. del menú, para que se distinga de los demás. */
.nav a.nav-vip { color: var(--acento); font-weight: 600; }

/* El engranaje de gestion es un EMOJI, no un SVG. La fuente de emoji lo
   dibuja centrado en una caja cuadrada mas alta que la letra, y alineado por
   la linea base (que es lo normal) se ve desplazado hacia arriba respecto al
   texto. `line-height: 1` recorta la caja al tamano real del icono: sin ese
   hueco de mas, el texto y el icono quedan a la misma altura. */
.ico-emoji {
    display: inline-block; line-height: 1;
    /* En texto normal (los <h1> de gestion) el emoji se alinea por la linea
       base y el bajito de -0.05em lo devuelve a su sitio. En el boton del nav,
       que es flex, esta propiedad se ignora: ahi manda `align-items: center`.
       Asi que no hay doble correccion en ninguno de los dos sitios. */
    vertical-align: -0.05em;
}

/* Atajo a la gestion interna. Solo lo ve el staff, pero se distingue de la
   navegacion publica para que no se confunda con un enlace de la tienda.

   `inline-flex` con `align-items: center` en vez del `padding: 2px` de antes:
   el emoji se alineaba por la linea base, se salia por el borde de arriba de
   la pastilla y ademas el padding era tan justo que no habia sitio para
   corregirlo. Centrado por el centro, el engranaje y la palabra van a la misma
   altura. Con 7px de padding la pastilla queda a la altura del resto del nav
   (que usa 8px). */
.nav a.nav-staff {
    color: var(--tenue); border: 1px solid var(--borde); border-radius: 999px;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; line-height: 1.2;
}
.nav a.nav-staff:hover { color: var(--titulo); border-color: var(--titulo); }
.nav a.nav-staff.activo { background: var(--titulo); border-color: var(--titulo); color: var(--fondo); }
.nav a.nav-vip.activo { background: var(--acento); color: #0a0a06; }
.tarjeta:hover .tarjeta-ver { color: var(--titulo); }

/* Casilla de los Terminos, encima del boton de contratar. */
.check-terminos {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 4px;
    font-size: 13px;
    color: var(--texto-suave);
    line-height: 1.5;
    cursor: pointer;
}
.check-terminos input {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--acento);
    cursor: pointer;
}


/* --- El chat de una compra --- */
/* Cliente y staff en la MISMA conversacion. Lo que los separa es la alineacion
   y el color, no estar en sitios distintos: es una sola conversacion. */
.chat { display: flex; flex-direction: column; gap: 18px; margin-bottom: 24px; }
.mensaje { display: flex; gap: 12px; align-items: flex-start; }
.mensaje-propio { flex-direction: row-reverse; }
.mensaje-avatar {
    width: 38px; height: 38px; flex-shrink: 0;
    border-radius: 50%; object-fit: cover;
    background: var(--panel-2); border: 1px solid var(--linea);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 700; color: var(--tenue); overflow: hidden;
}
.mensaje-cuerpo { min-width: 0; max-width: 78%; }
.mensaje-propio .mensaje-cuerpo { text-align: right; }
.mensaje-cabecera {
    display: flex; align-items: baseline; gap: 8px;
    margin-bottom: 4px; font-size: 12px; color: var(--tenue);
}
.mensaje-propio .mensaje-cabecera { justify-content: flex-end; }
.mensaje-autor { font-weight: 700; color: var(--texto-suave); }
.mensaje-rol {
    font-size: 10px; text-transform: uppercase; letter-spacing: .6px;
    padding: 2px 7px; border-radius: 10px; font-weight: 600;
}
.mensaje-rol-cliente { background: var(--panel-2); color: var(--tenue); }
.mensaje-rol-staff { background: var(--acento); color: #0a0a06; }
.mensaje-texto {
    margin: 0; padding: 12px 15px; border-radius: 14px;
    background: var(--panel-2); border: 1px solid var(--linea);
    color: var(--texto-suave); line-height: 1.6; overflow-wrap: anywhere;
}
.mensaje-propio .mensaje-texto {
    background: rgba(33,161,90, .14);
    border-color: rgba(33,161,90, .4); color: var(--texto);
}
.mensaje-hora { margin-top: 5px; font-size: 11px; color: var(--tenue); }

.mensaje-archivo {
    display: inline-flex; align-items: center; gap: 9px;
    margin-top: 8px; padding: 10px 14px; border-radius: 10px;
    background: var(--fondo); border: 1px solid var(--linea);
    color: var(--texto-suave); text-decoration: none; font-size: 14px;
    max-width: 100%;
}
.mensaje-archivo:hover { border-color: var(--acento); color: var(--titulo); }
.mensaje-archivo-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mensaje-archivo-tamano { font-size: 12px; color: var(--tenue); flex-shrink: 0; }

.mensaje-imagen {
    margin-top: 8px; border-radius: 10px;
    border: 1px solid var(--linea); max-width: 100%; display: block;
}

.chat-escribir {
    background: var(--panel-2); border: 1px solid var(--linea-suave);
    border-radius: 12px; padding: 16px;
}
.chat-campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.chat-campo textarea {
    width: 100%; min-height: 92px; padding: 12px 14px;
    border-radius: 10px; border: 1px solid var(--linea-suave);
    background: var(--fondo); color: var(--texto);
    font-family: inherit; font-size: 15px; line-height: 1.6; resize: vertical;
}
.chat-campo textarea:focus { outline: none; border-color: var(--acento); }
.chat-campo input[type="file"] { font-size: 13px; color: var(--tenue); }
.chat-botones { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.aviso-sin-almacenamiento {
    background: rgba(244,162,89, .1);
    border: 1px solid #f4a259; border-radius: 10px;
    padding: 14px 16px; margin-bottom: 16px;
    color: var(--texto-suave); font-size: 14px; line-height: 1.6;
}

/* --- Promociones y logs (gestion interna de la tienda) --- */
.form-inline { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 0; }
.input-chico {
    width: 74px; padding: 7px 9px;
    border-radius: 8px; border: 1px solid var(--linea-suave);
    background: var(--fondo); color: var(--texto);
    font-family: inherit; font-size: 14px; text-align: right;
}
.input-chico:focus { outline: none; border-color: var(--acento); }
.btn-chica { padding: 7px 12px; font-size: 13px; border-radius: 8px; }
.btn-peligro { background: rgba(237,66,69, .15); color: #ffb4b6; border-color: rgba(237,66,69, .4); }
.btn-peligro:hover { background: rgba(237,66,69, .28); color: white; }
.tabla code { font-size: 13px; color: var(--titulo); }

/* --- Panel de pagos: puente con las transacciones de Discord --- */
.caja-nota { margin: 0 0 12px; font-size: 14px; color: var(--tenue); }
.aviso-pago {
    margin: 12px 0;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 14px;
    color: var(--texto);
    background: rgba(255,193,7, .12);
    border: 1px solid rgba(255,193,7, .45);
}
.form-margen { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--borde); }

/* --- Archivos descargables en la ficha de gestion --- */
.lista-archivos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.archivo-enlace {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px;
    border-radius: 12px;
    background: var(--fondo-2, rgba(127,127,127, .08));
    border: 1px solid var(--borde);
    color: var(--texto);
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease;
}
.archivo-enlace:hover { border-color: var(--titulo); transform: translateY(-1px); }
.archivo-icono { font-size: 20px; line-height: 1; }
.archivo-nombre { font-weight: 600; font-size: 15px; word-break: break-all; flex: 1; }
.archivo-peso { font-size: 13px; color: var(--tenue); white-space: nowrap; }
.archivo-accion {
    font-size: 13px; font-weight: 600; white-space: nowrap;
    color: var(--titulo);
    border: 1px solid var(--borde);
    border-radius: 999px;
    padding: 4px 12px;
}

/* --- Desglose de precio: promocion, miembro y "Incluido" --- */
.precio-tachado {
    display: block;
    font-size: 15px;
    color: var(--tenue);
    text-decoration: line-through;
    margin-bottom: 2px;
}
.precio-incluido { color: #2e7d32; }

/* --- Zona de acciones tecnicas --- */
.caja-tecnica { border-color: rgba(52,152,219, .4); }
.tecnica-bloque {
    margin: 0 0 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--borde);
}
.tecnica-bloque:last-of-type { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.btn-peligro {
    background: rgba(231,76,60, .14);
    border-color: rgba(231,76,60, .5);
    color: #e74c3c;
}
.btn-peligro:hover { background: rgba(231,76,60, .24); border-color: #e74c3c; }

/* ---------------------------------------------------------------
   Carrito
   ---------------------------------------------------------------
   Grid de dos columnas: la lista de servicios a la izquierda y el
   resumen fijo a la derecha. En movil se apila, con el resumen
   DEBAJO (el boton de pedir esta al fondo, que es donde se llega
   con el dedo). */
.carrito {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 28px;
    align-items: start;
}

.carrito-lista {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.carrito-linea {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 16px;
    align-items: center;
    padding: 16px 18px;
    background: var(--panel);
    border: 1px solid var(--linea-suave);
    border-radius: 12px;
}

.carrito-datos {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.carrito-nombre {
    color: var(--titulo);
    font-weight: 600;
    text-decoration: none;
}

.carrito-nombre:hover {
    color: var(--acento);
}

.carrito-nota {
    color: var(--tenue);
    font-size: 14px;
}

.carrito-precio {
    color: var(--texto);
    font-weight: 700;
    white-space: nowrap;
}

.carrito-a-medida {
    color: var(--tenue);
    font-weight: 500;
    font-style: italic;
}

.carrito-resumen {
    position: sticky;
    top: 20px;
}

@media (max-width: 760px) {
    .carrito { grid-template-columns: 1fr; }
    .carrito-resumen { position: static; }
    .carrito-linea { grid-template-columns: 1fr auto; }
    .carrito-linea form { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------
   Mi estado (V.I.P. / Cliente / Comprador / Staff)
   --------------------------------------------------------------- */
.rejilla-estado {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 18px;
    margin-bottom: 34px;
}

.estado-tarjeta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    background: var(--panel);
    border: 1px solid var(--linea-suave);
    border-radius: 12px;
}

/* Verde solo cuando el estado esta de verdad activo. */
.estado-tarjeta.estado-on {
    border-color: var(--acento);
}

.estado-icono {
    font-size: 26px;
}

.estado-tarjeta h3 {
    margin: 0;
    font-size: 17px;
}

.estado-valor {
    margin: 0;
    font-weight: 700;
    color: var(--acento);
}

.estado-valor.estado-off {
    color: var(--tenue);
    font-weight: 500;
}

.estado-nota {
    margin: 0;
    color: var(--tenue);
    font-size: 14px;
    line-height: 1.5;
}

/* Fases 26-35 — checkout, analítica, notificaciones y layouts adaptables. */
:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 3px;
}

.nav-contador {
    display: inline-flex;
    min-width: 1.4em;
    height: 1.4em;
    align-items: center;
    justify-content: center;
    padding: 0 .35em;
    margin-left: .25em;
    border-radius: 999px;
    background: var(--acento);
    color: #070508;
    font-size: .75em;
    font-weight: 800;
    line-height: 1;
}

.checkout-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
    align-items: start;
    gap: 22px;
    margin: 24px 0 48px;
}
.checkout-grid > .bloque { min-width: 0; }
.checkout-formulario form { display: grid; gap: 16px; }
.checkout-medida { margin-bottom: 24px; padding-bottom: 22px; border-bottom: 1px solid var(--linea); }
.checkout-medida label, .token-formulario label { display: block; margin-bottom: 7px; color: var(--texto); font-weight: 650; }
.checkout-medida input, .token-formulario input {
    width: 100%; min-height: 46px; padding: 11px 13px;
    border: 1px solid var(--linea-suave); border-radius: 10px;
    background: var(--panel-2); color: var(--texto); font: inherit;
}
.checkbox-linea { display: flex; align-items: flex-start; gap: 11px; color: var(--texto-suave); }
.checkbox-linea input { flex: 0 0 auto; margin-top: 6px; accent-color: var(--acento); }
.checkout-producto { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--linea); }
.checkout-icono { display: grid; flex: 0 0 48px; width: 48px; height: 48px; place-items: center; border-radius: 12px; background: var(--panel-2); font-size: 25px; }
.checkout-producto strong { display: block; font-size: 1.05rem; }
.checkout-producto .bloque-sub { margin: 4px 0 0; }
.checkout-fila { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; padding: 14px 0; border-bottom: 1px solid var(--linea); }
.checkout-fila > span { color: var(--tenue); }
.checkout-fila > strong { max-width: 60%; text-align: right; overflow-wrap: anywhere; }
.checkout-resumen .btn { margin-top: 20px; }
.recibo-pedido { max-width: 760px; margin: 32px auto 60px; }
.recibo-icono { display: grid; width: 54px; height: 54px; place-items: center; margin-bottom: 16px; border: 1px solid var(--acento); border-radius: 50%; color: var(--acento); font-size: 26px; font-weight: 800; }
.recibo-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.notificaciones-lista { display: grid; gap: 12px; margin: 24px 0 48px; }
.notificacion-item { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--panel); }
.notificacion-no-leida { border-left: 3px solid var(--acento); background: #12150e; }
.notificacion-texto { margin: 0; color: var(--texto); font-weight: 600; }
.notificacion-meta { margin: 5px 0 0; color: var(--tenue); font-size: .85rem; text-transform: capitalize; }
.token-solicitud-card { display: flex; gap: 15px; margin: 22px 0; padding: 20px; border: 1px solid rgba(137,245,0,.58); border-radius: 14px; background: rgba(137,245,0,.065); }
.token-solicitud-ok { border-color: rgba(137,245,0,.3); }
.token-card-icono { display: grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; border-radius: 11px; background: var(--acento); color: #070508; font-size: 20px; font-weight: 800; }
.token-card-contenido { flex: 1; min-width: 0; }
.token-card-contenido h3 { margin: 0 0 7px; font-size: 1.05rem; color: var(--titulo); }
.token-card-contenido p { margin: 0 0 13px; color: var(--texto-suave); }
.token-formulario { display: grid; gap: 10px; }
.token-gestion-card { border-color: rgba(137,245,0,.45); }
.gestion-filtros { display: grid; grid-template-columns: minmax(170px, .8fr) minmax(260px, 1.6fr) auto auto; align-items: end; }
.gestion-filtros .campo { min-width: 0; }
.gestion-filtros input, .gestion-filtros select { width: 100%; }
.gestion-cliente-nombre { display: block; font-weight: 650; }
.tabla td small { display: block; color: var(--tenue); font-size: 12px; overflow-wrap: anywhere; }
.analitica-barras { display: grid; gap: 15px; }
.analitica-fila { min-width: 0; }
.analitica-etiqueta { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 5px; color: var(--texto-suave); font-size: .9rem; }
.analitica-etiqueta strong { flex: 0 0 auto; color: var(--acento); font-variant-numeric: tabular-nums; }
.analitica-pista { height: 8px; overflow: hidden; border-radius: 999px; background: var(--panel-2); }
.analitica-pista span { display: block; height: 100%; min-width: 2px; border-radius: inherit; background: var(--acento); }
.gestion-cliente-nombre, .checkout-fila strong, .notificacion-texto { overflow-wrap: anywhere; }

@media (max-width: 880px) {
    .checkout-grid { grid-template-columns: 1fr; }
    .checkout-resumen { order: -1; }
    .gestion-filtros { grid-template-columns: 1fr 1fr; }
    .gestion-filtros .gestion-busqueda { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
    .checkout-grid { gap: 14px; margin-top: 14px; }
    .recibo-acciones { display: grid; grid-template-columns: 1fr; }
    .notificacion-item { align-items: flex-start; flex-direction: column; }
    .token-solicitud-card { gap: 10px; padding: 14px; }
    .token-card-icono { flex-basis: 34px; width: 34px; height: 34px; }
    .gestion-filtros { grid-template-columns: 1fr; }
    .gestion-filtros .gestion-busqueda { grid-column: auto; }
    .tabla-envoltorio { overflow-x: auto; }
    .tabla { min-width: 680px; }
    .checkout-fila { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}