/* =====================================================================
   GestorMina-X · hoja de estilos compartida (Fase 2, 14-sep-2026)

   Antes de esta hoja, cada plantilla traía su propio <style>: trece
   bloques, cincuenta y tres tamaños de letra distintos y el mismo botón
   definido cuatro veces. El cliente lo resumió así: la plataforma «no se
   siente amable», aunque cada pantalla por separado esté bien.

   Aquí vive una sola vez lo que se repite:
     1. Tokens — colores por USO, escala tipográfica y de espaciado.
     2. Base — tipografía, enlaces, formularios.
     3. Estructura — barra lateral, menú móvil, área principal.
     4. Componentes — tarjeta, chip, botón, aviso, tabla, KPI, pasos…
     5. Módulos de la Fase 2 — calculadoras, bloqueo premium, vídeo.

   Los nombres antiguos de color (--rojo, --naranja…) se conservan como
   alias de los nuevos (--peligro, --serio…): las plantillas que aún no se
   han migrado siguen viéndose igual.
   ===================================================================== */

/* ---------- Tipografía propia ----------
   Autoalojadas: el proyecto no envía a terceros la IP de quien entra.
   Variables a propósito: la interfaz usa pesos 550, 640 y 750. */
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:100 900;
  font-display:swap; src:url("/static/fonts/inter-var.woff2") format("woff2");
}
@font-face{
  font-family:"Montserrat"; font-style:normal; font-weight:100 900;
  font-display:swap; src:url("/static/fonts/montserrat-var.woff2") format("woff2");
}
/* La fuente técnica del estilo que aprobó el cliente (paneles de
   reconciliación y regalías): cifras, rótulos y referencias. */
@font-face{
  font-family:"JetBrains Mono"; font-style:normal; font-weight:400 600;
  font-display:swap; src:url("/static/fonts/jetbrains-mono-var.woff2") format("woff2");
}

/* =====================================================================
   1. TOKENS

   Rediseño del 30-sep-2026. El cliente aprobó el estilo de los paneles de
   reconciliación y regalías para TODA la aplicación («este diseño es el que
   me gustó para la app completa», 24-sep; «ya sería extrapolar el estilo
   para toda la app», 29-sep). Los valores son los de esos paneles: fondo
   profundo, verde agua, líneas finas, Inter + JetBrains Mono. Como todo
   cuelga de estos tokens, el cambio llega a cada pantalla sin tocarla.
   ===================================================================== */
:root{
  /* Superficies */
  --fondo:#090D16;  --fondo-2:#0B111C;
  --panel:#0F1724;  --panel-2:#111A28;  --panel-3:#162235;
  --borde:rgba(89,243,208,.20);  --borde-2:rgba(171,193,225,.13);
  --borde-3:rgba(171,193,225,.20);

  /* Texto */
  --texto:#E7EDF8;  --texto-2:#C5D2E5;  --tenue:#95A2B9;

  /* Marca. --acento-rgb deja usar el acento con transparencia sin volver
     a escribir el color a mano. */
  --acento:#59F3D0;  --acento-2:#8FF7DF;  --acento-tinta:#04211B;
  --acento-rgb:89,243,208;
  --acento-bg:rgba(89,243,208,.09);
  --oro:#EFD08D;  --oro-bg:rgba(239,208,141,.12);

  /* Estados, por lo que SIGNIFICAN. Siempre acompañados de texto o
     icono: el color nunca carga solo con el significado. */
  --peligro:#FF8FA9;  --peligro-bg:rgba(255,84,118,.10);  --peligro-texto:#FFC7D3;
  --serio:#FFB26B;    --serio-bg:rgba(255,162,77,.11);    --serio-texto:#FFDDB8;
  --aviso:#EFD08D;    --aviso-bg:rgba(239,208,141,.10);   --aviso-texto:#F6E5BD;
  --exito:#59EDCF;    --exito-bg:rgba(89,237,207,.10);    --exito-texto:#B4F7E8;
  --info:#8DC8FF;     --info-bg:rgba(141,200,255,.10);    --info-texto:#CFE6FF;

  /* Escala tipográfica: nueve pasos, y ninguno más. */
  --t-2xs:10.5px;   /* rótulos en versalitas */
  --t-xs:11.5px;    /* notas, pies */
  --t-sm:12.5px;    /* texto secundario, botones pequeños */
  --t-base:14px;    /* cuerpo */
  --t-md:15.5px;    /* títulos de tarjeta, datos destacados */
  --t-lg:18px;      /* subtítulos de sección */
  --t-xl:22px;      /* títulos de página en móvil, cifras medianas */
  --t-2xl:28px;     /* títulos de página */
  --t-hero:44px;    /* la cifra que resume una pantalla */

  /* Espaciado */
  --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px; --e-5:20px;
  --e-6:24px; --e-7:32px; --e-8:40px;

  /* Formas: esquinas contenidas, como el estilo aprobado. */
  --r-sm:5px; --r:7px; --r-lg:12px; --r-pill:99px;
  --sombra:0 10px 30px rgba(0,0,0,.35);

  --fuente:Inter,"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --fuente-titulos:Inter,"Segoe UI",system-ui,sans-serif;
  --fuente-mono:"JetBrains Mono","Cascadia Mono",Consolas,"SF Mono",monospace;

  --lateral:238px;

  /* ---- Alias de los nombres anteriores ---- */
  --navy:var(--fondo); --navy-2:var(--fondo-2); --grafito:#1A222E;
  --cian:var(--acento); --cian-tenue:var(--acento-bg); --plata:var(--texto);
  --rojo:var(--peligro); --rojo-bg:var(--peligro-bg);
  --naranja:var(--serio); --naranja-bg:var(--serio-bg);
  --ambar:var(--aviso); --ambar-bg:var(--aviso-bg);
  --verde:var(--exito); --verde-bg:var(--exito-bg);
}

/* =====================================================================
   2. BASE
   ===================================================================== */
*{box-sizing:border-box}
html,body{margin:0; padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--fondo); color:var(--texto); font-family:var(--fuente);
  font-size:var(--t-base); line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--fuente-titulos); font-weight:700; margin:0;
         line-height:1.2}
a{color:var(--acento); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
/* Lo oculto se queda oculto, aunque una regla de maquetación diga display:block
   (las tablas apiladas del teléfono, A.6). */
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--acento); outline-offset:2px}

.mono{font-family:var(--fuente-mono); font-size:13px}
.tenue{color:var(--tenue)}
.nowrap{white-space:nowrap}
.oculto-movil{}
.solo-movil{display:none}
.sr{position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap}

/* ---------- Formularios ---------- */
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=date],input[type=tel],input[type=search],input[type=url],
textarea,select{
  background:var(--fondo); border:1px solid var(--borde-3); color:var(--texto);
  border-radius:8px; padding:8px 11px; font-size:var(--t-base);
  font-family:inherit; min-height:38px; max-width:100%;
}
textarea{min-height:90px; line-height:1.5}
input:focus,textarea:focus,select:focus{outline:none; border-color:var(--acento);
  box-shadow:0 0 0 3px rgba(var(--acento-rgb),.18)}
input[type=number]{font-variant-numeric:tabular-nums}
input::placeholder,textarea::placeholder{color:#5F7282}

.campo{display:flex; flex-direction:column; gap:6px; margin-bottom:var(--e-4)}
.campo > label, .rotulo{font-size:var(--t-2xs); letter-spacing:1px;
  text-transform:uppercase; color:var(--tenue); font-weight:650}
.campo .ayuda{font-size:var(--t-xs); color:var(--tenue); line-height:1.45}
.campo .error{font-size:var(--t-xs); color:var(--peligro)}
.campo input, .campo select, .campo textarea{width:100%}
.campos{display:grid; gap:0 var(--e-4);
        grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}
.prefijo{display:flex; align-items:stretch}
.prefijo > span{display:flex; align-items:center; padding:0 11px;
  background:var(--panel-3); border:1px solid var(--borde-3); border-right:0;
  border-radius:8px 0 0 8px; color:var(--tenue); font-size:var(--t-sm)}
.prefijo > input{border-radius:0 8px 8px 0; flex:1; min-width:0}

/* =====================================================================
   3. ESTRUCTURA
   ===================================================================== */
.cascaron{display:flex; min-height:100vh}
aside.lateral{
  width:var(--lateral); flex:none; background:var(--fondo-2);
  border-right:1px solid var(--borde-2); display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; z-index:40;
}
.marca{display:flex; align-items:center; gap:10px; padding:17px 18px;
       border-bottom:1px solid var(--borde-2)}
.marca img{width:100%; max-width:186px; height:auto; display:block}

nav.menu{padding:12px 10px; flex:1; overflow-y:auto}
nav.menu .grupo{font-size:var(--t-2xs); letter-spacing:1.5px;
  text-transform:uppercase; color:var(--tenue); padding:16px 10px 7px;
  font-weight:600}
nav.menu a, nav.menu span.item{
  display:flex; align-items:center; gap:11px; padding:9.5px 11px;
  border-radius:8px; color:var(--texto); font-size:var(--t-base);
  margin-bottom:2px; transition:background .14s ease;
}
nav.menu a:hover{background:rgba(var(--acento-rgb),.08); text-decoration:none}
nav.menu a.activo{background:var(--acento-bg); color:var(--acento);
                  font-weight:600}
nav.menu .ico{width:17px; text-align:center; flex:none; opacity:.9}
nav.menu span.item{color:var(--tenue); cursor:default}
.pronto{margin-left:auto; font-size:9.5px; font-weight:700; letter-spacing:.5px;
  padding:2px 7px; border-radius:var(--r-pill); background:var(--oro-bg);
  color:var(--oro); border:1px solid rgba(212,175,55,.28)}
.pronto.premium{background:rgba(var(--acento-rgb),.12); color:var(--acento);
                border-color:rgba(var(--acento-rgb),.3)}

.usuario{border-top:1px solid var(--borde-2); padding:13px 15px;
         display:flex; align-items:center; gap:10px}
.avatar{width:31px; height:31px; border-radius:50%; flex:none; display:grid;
  place-items:center; background:linear-gradient(135deg,var(--acento),#2FB894);
  color:var(--acento-tinta); font-weight:700; font-size:13px}
.usuario .datos{min-width:0; flex:1}
.usuario .nom{font-size:13px; font-weight:600; white-space:nowrap;
              overflow:hidden; text-overflow:ellipsis}
.usuario .rol{font-size:var(--t-xs); color:var(--tenue)}
.salir{padding:0 15px 15px}
.salir button{width:100%; display:flex; align-items:center; gap:9px;
  padding:9px 11px; border:0; border-radius:8px; background:none;
  color:var(--tenue); font-size:13.5px; cursor:pointer; font-family:inherit}
.salir button:hover{background:rgba(255,107,96,.1); color:var(--peligro)}

.columna{flex:1; min-width:0; display:flex; flex-direction:column}
main.contenido{flex:1; min-width:0; padding:26px 30px 60px}
.encabezado{margin-bottom:var(--e-6)}
.encabezado h1, .titulo-pagina{font-size:var(--t-2xl)}
.encabezado .sub, .subtitulo{color:var(--tenue); font-size:var(--t-base);
                             margin-top:4px}
.migas{font-size:var(--t-sm); color:var(--tenue); margin-bottom:9px}

footer.pie{padding:22px 30px 34px; color:var(--tenue); font-size:var(--t-xs);
           line-height:1.6; border-top:1px solid var(--borde-2)}
footer.pie p{margin:0 0 7px; max-width:900px}
footer.pie b{color:var(--texto-2)}
footer.pie a + a{margin-left:14px}

/* ---------- Barra superior del móvil ----------
   En el teléfono la barra lateral era una tira horizontal que había que
   deslizar para encontrar «Obligaciones». Ahora es un menú que se abre
   encima, como el de cualquier aplicación, y la barra de arriba deja a la
   vista el logo y el botón. (Fase 2, A.6.) */
.barra-movil{display:none}
.velo{display:none}

/* =====================================================================
   4. COMPONENTES
   ===================================================================== */

/* ---------- Tarjeta ---------- */
.tarjeta{background:var(--panel); border:1px solid var(--borde-2);
         border-radius:var(--r-lg); margin-bottom:18px; overflow:hidden}
.tarjeta > h2{font-size:var(--t-md); margin:0; padding:15px 19px;
  border-bottom:1px solid var(--borde-2); display:flex; align-items:center;
  justify-content:space-between; gap:12px; font-family:var(--fuente-titulos);
  flex-wrap:wrap}
.tarjeta .cuerpo{padding:19px}

/* ---------- KPI ---------- */
.kpis{display:grid; gap:15px; margin-bottom:22px;
      grid-template-columns:repeat(auto-fit,minmax(min(184px,100%),1fr))}
.kpi{background:var(--panel); border:1px solid var(--borde-2);
     border-radius:var(--r-lg); padding:17px 19px; position:relative;
     overflow:hidden}
.kpi .t{font-size:var(--t-2xs); letter-spacing:1.2px; text-transform:uppercase;
        color:var(--tenue); font-weight:600}
.kpi .n{font-size:31px; font-weight:700; line-height:1.15; margin-top:7px;
        font-family:var(--fuente-titulos)}
.kpi .ico{position:absolute; top:15px; right:16px; width:33px; height:33px;
          border-radius:9px; display:grid; place-items:center;
          background:var(--acento-bg); font-size:15px}
.kpi.rojo .n{color:var(--peligro)}
.kpi.naranja .n{color:var(--serio)}
.kpi.ambar .n{color:var(--aviso)}
.kpi.verde .n{color:var(--exito)}

/* ---------- Chips ---------- */
.chip{display:inline-block; padding:2.5px 9px; border-radius:var(--r-pill);
      font-size:var(--t-xs); font-weight:650; letter-spacing:.3px;
      white-space:nowrap; border:1px solid transparent}
.chip.caducidad{background:var(--peligro-bg); color:var(--peligro);
                border-color:rgba(255,107,96,.3)}
.chip.vencida{background:var(--serio-bg); color:var(--serio);
              border-color:rgba(255,162,77,.3)}
.chip.multa,.chip.proxima{background:var(--aviso-bg); color:var(--aviso);
                          border-color:rgba(232,194,90,.3)}
.chip.normal,.chip.exito{background:var(--exito-bg); color:var(--exito);
                         border-color:rgba(62,217,176,.28)}
.chip.vacio,.chip.gris{background:rgba(230,234,240,.07); color:var(--tenue)}
.chip.fuente{background:rgba(var(--acento-rgb),.11); color:var(--acento)}
.chip.estado-pendiente{background:rgba(230,234,240,.08); color:var(--tenue)}
.chip.estado-en_desarrollo{background:var(--acento-bg); color:var(--acento)}
.chip.estado-radicado{background:var(--oro-bg); color:var(--oro);
                      border-color:rgba(212,175,55,.3)}
.chip.estado-aprobado{background:var(--exito-bg); color:var(--exito)}
.chip.suspension{background:var(--peligro-bg); color:var(--peligro);
                 font-weight:750}
.chip.premium{background:rgba(var(--acento-rgb),.12); color:var(--acento);
              border-color:rgba(var(--acento-rgb),.3)}

/* ---------- Tablas ---------- */
.tabla-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
table{width:100%; border-collapse:collapse; font-size:13.8px}
th{text-align:left; font-size:var(--t-2xs); text-transform:uppercase;
   letter-spacing:1px; color:var(--tenue); font-weight:600; padding:11px 15px;
   border-bottom:1px solid var(--borde-2); white-space:nowrap}
td{padding:12px 15px; border-bottom:1px solid rgba(230,234,240,.05);
   vertical-align:top}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:rgba(var(--acento-rgb),.035)}
td.num, th.num{text-align:right; font-variant-numeric:tabular-nums}

/* ---------- Progreso ---------- */
.barra{height:6px; background:rgba(230,234,240,.09); border-radius:99px;
       overflow:hidden; min-width:60px; flex:1}
.barra > span{display:block; height:100%;
              background:linear-gradient(90deg,var(--acento),#3ED9B0);
              border-radius:99px}
.fila-barra{display:flex; align-items:center; gap:10px}

/* ---------- Botones ---------- */
.btn{display:inline-flex; align-items:center; gap:7px; justify-content:center;
     padding:8.5px 15px; border-radius:8px; font-size:13.5px; font-weight:600;
     border:1px solid var(--borde-2); background:rgba(230,234,240,.05);
     color:var(--texto); cursor:pointer; font-family:inherit; min-height:38px;
     transition:background .14s ease; text-align:center; line-height:1.3}
.btn:hover{background:rgba(var(--acento-rgb),.1); text-decoration:none;
           border-color:var(--borde)}
.btn-primario{background:var(--acento); color:var(--acento-tinta);
              border-color:var(--acento)}
.btn-primario:hover{background:var(--acento-2); color:var(--acento-tinta)}
.btn-peligro{background:var(--peligro-bg); color:var(--peligro);
             border-color:rgba(255,107,96,.35)}
.btn-wa{background:#25D366; border-color:#25D366; color:#04231A;
        font-weight:700; padding:10px 18px; font-size:var(--t-base);
        box-shadow:0 1px 0 rgba(0,0,0,.25), 0 0 0 3px rgba(37,211,102,.14)}
.btn-wa:hover{background:#1FBF5B; border-color:#1FBF5B; color:#04231A;
              box-shadow:0 1px 0 rgba(0,0,0,.25), 0 0 0 4px rgba(37,211,102,.22)}
.btn-wa .ico-wa{font-size:15px; line-height:1}
.btn-wa.ancho{width:100%}
.btn-wa.btn-sm{padding:7px 13px; font-size:13px}
.btn-sm{padding:5px 11px; font-size:var(--t-sm); min-height:32px}
.btn-google{background:#fff; color:#1f1f1f; border-color:#dadce0;
            font-weight:600}
.btn-google:hover{background:#f6f8fb; color:#1f1f1f; border-color:#c6cbd1}
.btn[disabled]{opacity:.45; cursor:default}
.grupo-btn{display:flex; gap:6px; flex-wrap:wrap; align-items:center}

/* ---------- Avisos ---------- */
.aviso{border-radius:var(--r); padding:13px 16px; font-size:13.8px;
       margin-bottom:18px; border:1px solid transparent; display:flex;
       gap:11px; align-items:flex-start}
.aviso.peligro{background:var(--peligro-bg); border-color:rgba(255,107,96,.28);
               color:var(--peligro-texto)}
.aviso.exito{background:var(--exito-bg); border-color:rgba(62,217,176,.30);
             color:var(--exito-texto)}
.aviso.alerta{background:var(--aviso-bg); border-color:rgba(232,194,90,.28);
              color:var(--aviso-texto)}
.aviso.info{background:var(--info-bg); border-color:var(--borde);
            color:var(--info-texto)}

.info-grid{display:grid; gap:15px 26px;
           grid-template-columns:repeat(auto-fit,minmax(min(165px,100%),1fr))}
.info-grid dt{font-size:var(--t-2xs); text-transform:uppercase;
              letter-spacing:1px; color:var(--tenue); font-weight:600}
.info-grid dd{margin:3px 0 0; font-size:var(--t-base); font-weight:550}

.vacio-total{text-align:center; padding:48px 20px; color:var(--tenue)}
.vacio-total .g{font-size:38px; margin-bottom:11px; opacity:.6}

/* ---------- Pasos numerados ---------- */
ol.pasos{list-style:none; margin:0; padding:0; counter-reset:paso}
ol.pasos > li{counter-increment:paso; position:relative;
              padding:0 0 var(--e-4) 40px}
ol.pasos > li::before{content:counter(paso); position:absolute; left:0; top:0;
  width:27px; height:27px; border-radius:50%; display:grid; place-items:center;
  background:var(--acento-bg); color:var(--acento); font-weight:750;
  font-size:var(--t-sm); border:1px solid var(--borde)}
ol.pasos > li.hecho::before{content:"✓"; background:var(--exito-bg);
  color:var(--exito); border-color:rgba(62,217,176,.3)}

/* ---------- Pestañas ---------- */
.pestanas{display:flex; gap:4px; border-bottom:1px solid var(--borde-2);
          margin-bottom:var(--e-5); overflow-x:auto}
.pestanas a{padding:10px 14px; color:var(--tenue); font-weight:600;
            font-size:var(--t-sm); border-bottom:2px solid transparent;
            white-space:nowrap}
.pestanas a:hover{color:var(--texto); text-decoration:none}
.pestanas a.activa{color:var(--acento); border-bottom-color:var(--acento)}

/* ---------- Barra de carga (ver base.html) ---------- */
.barra-carga{position:fixed; top:0; left:0; height:3px; width:0;
  background:linear-gradient(90deg,var(--acento),#7DF3EA);
  box-shadow:0 0 9px rgba(var(--acento-rgb),.75); z-index:9999; opacity:0;
  pointer-events:none; transition:width .22s ease-out, opacity .3s ease-out}
.barra-carga.viva{opacity:1}
.girando{position:fixed; top:12px; right:16px; width:17px; height:17px;
  border:2px solid var(--borde-2); border-top-color:var(--acento);
  border-radius:50%; z-index:9999; opacity:0; transition:opacity .25s ease-out;
  pointer-events:none}
.girando.viva{opacity:1; animation:girar .62s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
@keyframes entrar{from{opacity:.55; transform:translateY(5px)}
                  to{opacity:1; transform:none}}
main.contenido{animation:entrar .26s ease-out}

/* ---------- Avisos del administrador ---------- */
.avisos-admin{display:flex; flex-direction:column; gap:6px; margin-bottom:16px}
.avisos-admin a{display:block; font-size:var(--t-sm); line-height:1.5;
  color:var(--serio-texto); background:rgba(255,162,77,.10);
  border:1px solid rgba(255,162,77,.30); border-radius:9px; padding:8px 12px;
  text-decoration:none}
.avisos-admin a:hover{background:rgba(255,162,77,.16)}
.avisos-admin b{color:var(--serio)}

/* =====================================================================
   5. MÓDULOS DE LA FASE 2
   ===================================================================== */

/* ---------- Calculadoras ----------
   Dos columnas: lo que el titular escribe y lo que resulta. En el móvil
   el resultado queda debajo, que es donde se busca después de pulsar. */
.calc{display:grid; gap:18px; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
      align-items:start}
.calc .resultado{position:sticky; top:18px}
.cifra{font-family:var(--fuente-titulos); font-size:var(--t-hero);
       font-weight:750; line-height:1.05; letter-spacing:-.5px;
       font-variant-numeric:proportional-nums}
.cifra small{font-size:var(--t-lg); font-weight:600; color:var(--tenue);
             margin-left:4px}
.desglose-calc{margin:var(--e-4) 0 0; border-top:1px solid var(--borde-2)}
.desglose-calc .fila{display:flex; justify-content:space-between; gap:12px;
  padding:9px 0; border-bottom:1px solid rgba(230,234,240,.05);
  font-size:var(--t-sm)}
.desglose-calc .fila span:first-child{color:var(--tenue)}
.desglose-calc .fila b{font-variant-numeric:tabular-nums; text-align:right}
.desglose-calc .fila.total{font-size:var(--t-md); border-bottom:0}
.desglose-calc .fila.total span:first-child{color:var(--texto); font-weight:650}
.norma{font-size:var(--t-xs); color:var(--tenue); line-height:1.5;
       margin-top:var(--e-3); padding-top:var(--e-3);
       border-top:1px dashed var(--borde-2)}
.norma b{color:var(--texto-2)}

/* ---------- Funcionalidad premium ----------
   En el plan gratuito se ve CÓMO se calcula, no el resultado: el titular
   entiende lo que obtendría si contrata. (Documento de Fase 2, A.4.) */
.premium-bloqueo{position:relative; border-radius:var(--r);
  border:1px solid rgba(var(--acento-rgb),.3); background:
  linear-gradient(180deg,rgba(var(--acento-rgb),.08),rgba(var(--acento-rgb),.02));
  padding:var(--e-5); text-align:center}
.premium-bloqueo .candado{font-size:26px; margin-bottom:6px}
.premium-bloqueo h3{font-size:var(--t-md); margin-bottom:6px}
.premium-bloqueo p{color:var(--texto-2); font-size:var(--t-sm); margin:0 0 14px}
.cifra-oculta{filter:blur(7px); user-select:none; pointer-events:none;
              opacity:.55}

/* ---------- Vídeo incrustado ---------- */
.video{position:relative; padding-top:56.25%; border-radius:var(--r);
       overflow:hidden; background:#000; border:1px solid var(--borde-2)}
.video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* ---------- Línea de trazabilidad ---------- */
.traza{list-style:none; margin:0; padding:0 0 0 4px}
.traza > li{position:relative; padding:0 0 16px 24px}
.traza > li::before{content:""; position:absolute; left:5px; top:14px;
  bottom:0; width:2px; background:var(--borde-2)}
.traza > li:last-child::before{display:none}
.traza .punto{position:absolute; left:0; top:5px; width:12px; height:12px;
  border-radius:50%; background:var(--tenue); box-shadow:0 0 0 2px var(--panel)}
.traza > li.hecho .punto{background:var(--exito)}
.traza > li.actual .punto{background:var(--acento);
  box-shadow:0 0 0 2px var(--panel), 0 0 0 5px rgba(var(--acento-rgb),.25)}
.traza .t{font-weight:640; font-size:var(--t-base)}
.traza .d{font-size:var(--t-sm); color:var(--tenue); margin-top:2px}

/* =====================================================================
   6. MÓVIL
   ===================================================================== */
@media (max-width:900px){
  .barra-movil{display:flex; align-items:center; justify-content:space-between;
    gap:12px; position:sticky; top:0; z-index:30; height:56px;
    padding:0 12px 0 16px; background:rgba(9,13,22,.94);
    border-bottom:1px solid var(--borde-2);
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
  .barra-movil img{height:30px; width:auto; display:block}
  .boton-menu{display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; border-radius:10px; border:1px solid var(--borde-3);
    background:rgba(230,234,240,.05); color:var(--texto); cursor:pointer;
    font-size:20px; line-height:1}

  .cascaron{display:block}
  aside.lateral{position:fixed; top:0; left:0; bottom:0; height:auto;
    width:min(84vw,300px); transform:translateX(-102%);
    transition:transform .22s ease-out; box-shadow:var(--sombra);
    z-index:60; overflow:hidden}
  html.menu-abierto aside.lateral{transform:none}
  .velo{display:block; position:fixed; inset:0; z-index:50;
        background:rgba(4,12,18,.6); opacity:0; pointer-events:none;
        transition:opacity .2s ease-out}
  html.menu-abierto .velo{opacity:1; pointer-events:auto}
  html.menu-abierto body{overflow:hidden}
  nav.menu a, nav.menu span.item{padding:12px 12px; font-size:15px}

  main.contenido{padding:18px 16px 44px}
  .encabezado h1, .titulo-pagina{font-size:var(--t-xl)}
  footer.pie{padding:18px 16px 28px}
  .solo-movil{display:initial}
  .oculto-movil{display:none !important}

  .tarjeta > h2{padding:13px 15px}
  .tarjeta .cuerpo{padding:15px}
  .calc{grid-template-columns:1fr}
  .calc .resultado{position:static}
  .cifra{font-size:36px}
  .btn{min-height:42px}
  .btn-sm{min-height:36px}
  input[type=text],input[type=email],input[type=password],input[type=number],
  input[type=date],input[type=tel],select,textarea{font-size:16px}
}

/* ---------- Tablas que se apilan en el teléfono ----------
   Una tabla de seis columnas no cabe en 390 px: con desplazamiento lateral
   el titular pierde de vista la placa mientras lee el estado. Las tablas
   marcadas con .apilable se convierten en fichas, una por fila, con el
   nombre de cada columna delante del dato (atributo data-et en cada td). */
@media (max-width:700px){
  table.apilable thead{display:none}
  table.apilable, table.apilable tbody, table.apilable tr,
  table.apilable td{display:block; width:100%}
  table.apilable tr{padding:12px 14px; border-bottom:1px solid var(--borde-2)}
  table.apilable tr:last-child{border-bottom:0}
  table.apilable td{padding:4px 0; border:0; display:flex; gap:12px;
                    justify-content:space-between; align-items:baseline;
                    text-align:right}
  table.apilable td::before{content:attr(data-et); font-size:var(--t-2xs);
    letter-spacing:.8px; text-transform:uppercase; color:var(--tenue);
    font-weight:650; text-align:left; flex:none}
  table.apilable td[data-et=""]::before{display:none}
  /* Varios chips o un chip largo: bajan de línea en vez de salirse. */
  table.apilable td{flex-wrap:wrap; row-gap:4px}
  table.apilable td .chip{white-space:normal; text-align:left}
  table.apilable td.bloque-movil{display:block; text-align:left}
  table.apilable td.bloque-movil::before{display:block; margin-bottom:5px}
  table.apilable td.principal{display:block; text-align:left;
    font-size:var(--t-md); padding-bottom:6px}
  table.apilable td.principal::before{display:none}
  table.apilable td.acciones{justify-content:flex-start; padding-top:10px}
  table.apilable td.acciones::before{display:none}
}

/* =====================================================================
   7. ESTILO APROBADO (rediseño del 30-sep-2026)

   Los componentes con el lenguaje de los paneles que aprobó el cliente:
   superficies translúcidas sobre fondo profundo, líneas finas, rótulos y
   cifras técnicas en JetBrains Mono, títulos en Inter de peso medio y
   botones de contorno verde agua. Va al final para que mande sobre las
   reglas de arriba sin tener que reescribirlas.
   ===================================================================== */
body{
  background:
    radial-gradient(ellipse at 0% 40%,rgba(255,184,45,.035),transparent 42%),
    radial-gradient(ellipse at 95% 12%,rgba(var(--acento-rgb),.05),transparent 45%),
    var(--fondo);
  background-attachment:fixed;
}
h1,h2,h3{font-weight:600; letter-spacing:-.3px}
.encabezado h1, .titulo-pagina{font-weight:500; letter-spacing:-.9px}
.migas, .campo > label, .rotulo, th, .kpi .t, .info-grid dt, nav.menu .grupo,
.pestanas a, .chip{font-family:var(--fuente-mono)}
.campo > label, .rotulo, .info-grid dt{font-size:10px; letter-spacing:1.4px;
  font-weight:500}
.mono{font-family:var(--fuente-mono)}
td.num, .kpi .n, .cifra, .barra-dato{font-variant-numeric:tabular-nums}

/* Estructura */
aside.lateral{background:rgba(9,13,22,.92); border-right:1px solid var(--borde-2)}
nav.menu .grupo{font-size:9.5px; letter-spacing:1.8px; font-weight:500}
nav.menu a{border-radius:6px; border-left:2px solid transparent; font-size:13.5px}
nav.menu a:hover{background:rgba(var(--acento-rgb),.05)}
nav.menu a.activo{background:rgba(var(--acento-rgb),.08); color:var(--acento);
  border-left-color:var(--acento); font-weight:550}
.avatar{background:linear-gradient(135deg,var(--acento),#2FB894)}

/* Tarjetas: panel translúcido de borde fino. */
.tarjeta, .kpi{
  background:linear-gradient(180deg,rgba(17,25,37,.92),rgba(13,20,31,.92));
  border:1px solid var(--borde-2); border-radius:var(--r-lg);
  box-shadow:0 1px 0 rgba(255,255,255,.02) inset, 0 8px 24px rgba(0,0,0,.18);
}
.tarjeta > h2{font-weight:550; font-size:var(--t-md); letter-spacing:-.2px}
.kpi .t{font-size:9.5px; letter-spacing:1.6px; font-weight:500}
.kpi .n{font-family:var(--fuente); font-weight:500; letter-spacing:-.6px}
.kpi .ico{border-radius:7px; background:rgba(var(--acento-rgb),.07)}
.cifra{font-family:var(--fuente); font-weight:500; letter-spacing:-1px}

/* Chips: etiquetas técnicas, no píldoras. */
.chip{border-radius:5px; font-size:10.5px; font-weight:500; letter-spacing:.3px;
      padding:3px 8px}

/* Tablas */
th{font-size:9.5px; letter-spacing:1.3px; font-weight:500}
td{border-bottom-color:rgba(171,193,225,.07)}
tbody tr:hover{background:rgba(var(--acento-rgb),.03)}

/* Botones: contorno verde agua; el principal, relleno. */
.btn{border-radius:6px; background:rgba(var(--acento-rgb),.04);
     border:1px solid var(--borde-2); color:var(--acento); font-weight:550;
     font-size:13px}
td .btn{white-space:nowrap}
input[type=checkbox], input[type=radio]{accent-color:var(--acento)}
.cal-otro{margin:22px 0 8px; padding-top:16px; border-top:1px solid var(--borde-2); font-size:11px; color:var(--tenue); font-family:var(--fuente-mono); font-weight:500; text-transform:uppercase; letter-spacing:1.2px}
.btn:hover{background:rgba(var(--acento-rgb),.10); border-color:var(--borde)}
.btn-primario{background:var(--acento); color:var(--acento-tinta);
              border-color:var(--acento); font-weight:650}
.btn-primario:hover{background:var(--acento-2); color:var(--acento-tinta)}
/* Los botones de color propio conservan su fondo: la regla .btn de arriba
   va después que la suya y, sin esto, se quedaban con el texto oscuro
   sobre fondo transparente (el de WhatsApp era invisible, 01-oct-2026). */
.btn-peligro{background:var(--peligro-bg); color:var(--peligro);
             border-color:rgba(255,143,169,.35)}
.btn-wa{background:#25D366; border-color:#25D366; color:#04231A}
.btn-wa:hover{background:#1FBF5B; border-color:#1FBF5B; color:#04231A}
.btn-google{background:#fff; border-color:#dadce0; color:#1f1f1f}
.btn-google:hover{background:#f6f8fb; border-color:#c6cbd1; color:#1f1f1f}

/* Formularios */
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=date],input[type=tel],input[type=search],input[type=url],
textarea,select{background:#0B1220; border-color:var(--borde-2); border-radius:6px}
input::placeholder,textarea::placeholder{color:#5F6E84}

/* Avisos: franja de severidad a la izquierda, como el panel de regalías. */
.aviso{border-radius:8px; border-left-width:3px}
.aviso.peligro{border-left-color:var(--peligro)}
.aviso.alerta{border-left-color:var(--aviso)}
.aviso.exito{border-left-color:var(--exito)}
.aviso.info{border-left-color:var(--info); border-color:rgba(141,200,255,.22);
            border-left-color:var(--info)}

/* Progreso */
.barra{height:5px; background:rgba(171,193,225,.10)}
.barra > span{background:linear-gradient(90deg,#2FB894,var(--acento))}
.pestanas a.activa{color:var(--acento); border-bottom-color:var(--acento)}
ol.pasos > li::before{font-family:var(--fuente-mono); font-weight:500}

/* Premium y «pronto» con la misma voz técnica. */
.pronto{border-radius:5px; font-family:var(--fuente-mono); font-weight:500;
        letter-spacing:.8px}

@media (max-width:900px){
  .barra-movil{background:rgba(9,13,22,.94)}
  .boton-menu{border-radius:7px; background:rgba(var(--acento-rgb),.05);
              color:var(--acento)}
  .encabezado h1, .titulo-pagina{font-size:25px}
}

@media (prefers-reduced-motion:reduce){
  main.contenido{animation:none}
  .barra-carga{transition:opacity .2s linear}
  .girando.viva{animation:none}
  aside.lateral, .velo{transition:none}
}