/* ============================================================================
   Panel interno de LT · hoja de estilo
   ----------------------------------------------------------------------------
   El diseño se inspira en el boceto del «Centro de Control» (27/10/2026): fibra
   de carbono, paneles azul noche con cristal, aros metálicos tipo salida de aire
   de un Mercedes, filos celestes y acentos rojos.

   🔴 DOS REGLAS QUE MANDAN SOBRE LA ESTÉTICA:

   1 · Los números del boceto eran ilustrativos. Acá NO se dibuja ningún dato que
       no venga del servidor. Si un indicador no tiene fuente real, no existe:
       un panel con cifras inventadas es peor que uno vacío, porque se decide
       mirándolo. Por eso no hay «Ventas del mes» ni «Meta comercial».

   2 · Los aros navegan a las herramientas que YA existen, no a secciones nuevas.
       El boceto mostraba Resumen / Leads / Operaciones, que son pestañas de un
       panel que no está construido; lo que hay son seis herramientas con su
       propia página y su propia puerta.

   La textura de carbono es CSS puro —gradientes cruzados de 6 px— y no una
   imagen: pesa cero, no se pixela y no hay un archivo más que se pueda perder.
   ========================================================================== */

:root[data-tema="oscuro"]{
  --fondo:#06090d;
  --carbon-a:#0b1016;
  --carbon-b:#070b10;
  --hilo-base:#070b10;--hilo-1:#0e151d;--hilo-2:#141d27;
  --hilo-sep:#0b1119;--hilo-a:#0d141c;--hilo-b:#0a1017;--hilo-c:#111922;
  --halo-amb:rgba(76,195,255,.10);
  --panel:rgba(13,31,48,.72);
  --panel-solido:#0d1f30;
  --panel-alto:rgba(18,42,64,.82);
  --filo:rgba(90,190,255,.22);
  --filo-vivo:rgba(90,190,255,.55);
  --celeste:#4cc3ff;
  --rojo:#ff3b4e;
  --texto:#eef4f8;
  --suave:#8ba3b5;
  --metal-1:#8b98a4;
  --metal-2:#2b3640;
  --metal-3:#555f6a;
  --ok:#35d08a;
  --urge:#ffb020;
  --sombra:0 10px 34px rgba(0,0,0,.55);
}
:root[data-tema="claro"]{
  --fondo:#eef1f4;
  --carbon-a:#f6f7f9;
  --carbon-b:#e9edf1;
  --hilo-base:#eef1f4;--hilo-1:#e6eaee;--hilo-2:#f3f5f7;
  --hilo-sep:#e9edf1;--hilo-a:#f1f4f6;--hilo-b:#eaeef2;--hilo-c:#f6f8f9;
  --halo-amb:rgba(0,114,120,.06);
  --panel:rgba(255,255,255,.88);
  --panel-solido:#ffffff;
  --panel-alto:#ffffff;
  --filo:rgba(0,114,120,.2);
  --filo-vivo:rgba(0,114,120,.5);
  --celeste:#007278;
  --rojo:#c62a3a;
  --texto:#001d34;
  --suave:#5d7183;
  --metal-1:#c3ccd4;
  --metal-2:#9aa6b1;
  --metal-3:#dfe5ea;
  --ok:#1b7f4b;
  --urge:#9a6628;
  --sombra:0 8px 22px rgba(0,29,52,.12);
}

*{box-sizing:border-box}
html,body{margin:0}
  /* ── Fibra de carbono · tejido 2×2 ────────────────────────────────────────
     La primera versión (27/10/2026) era un rayado diagonal de 4 px y, visto en
     pantalla, no se leía como tejido: parecía un fondo liso. Esta es la trama
     real — cuatro hilos diagonales alternados en damero de 20 px, más la
     separación de los haces —, comparada contra la anterior antes de aplicarla.
     Sigue siendo CSS puro: pesa cero, no se pixela y no hay archivo que perder.
     Los tonos salen de variables para que el tema claro no quede sucio. */
  body{
    background-color:var(--hilo-base);
    background-image:
      radial-gradient(120% 80% at 50% -8%,var(--halo-amb),transparent 55%),
      linear-gradient(27deg,var(--hilo-1) 5px,transparent 5px),
      linear-gradient(207deg,var(--hilo-1) 5px,transparent 5px),
      linear-gradient(27deg,var(--hilo-2) 5px,transparent 5px),
      linear-gradient(207deg,var(--hilo-2) 5px,transparent 5px),
      linear-gradient(90deg,var(--hilo-sep) 10px,transparent 10px),
      linear-gradient(var(--hilo-a) 25%,var(--hilo-b) 25%,var(--hilo-b) 50%,
                      transparent 50%,transparent 75%,var(--hilo-c) 75%,var(--hilo-c));
    background-position:0 0, 0 5px, 10px 0, 0 10px, 10px 5px, 0 0, 0 0;
    background-size:auto, 20px 20px, 20px 20px, 20px 20px, 20px 20px,
                    20px 20px, 20px 20px;
    background-attachment:fixed}

a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--celeste);outline-offset:3px;border-radius:6px}

/* ── Barra superior ───────────────────────────────────────────────────────── */
.cab{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:.85rem 1.5rem;
  border-bottom:1px solid var(--filo);
  background:linear-gradient(180deg,rgba(6,12,20,.9),rgba(6,12,20,.55));
  position:relative;
}
:root[data-tema="claro"] .cab{
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.7));
}
/* El filo rojo del boceto, bajo la barra */
.cab::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--rojo) 18%,transparent 42%,
                             transparent 58%,var(--rojo) 82%,transparent);
  opacity:.5;
}
.logo{width:34px;height:34px;color:var(--texto);flex:none}
.logo svg{width:100%;height:100%;display:block}
.marca{
  font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:600;
  font-size:1.18rem;letter-spacing:.11em;text-transform:uppercase;
  padding-left:1rem;border-left:1px solid var(--filo);
}
.chip{
  font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--rojo);border:1px solid color-mix(in srgb,var(--rojo) 45%,transparent);
  border-radius:99px;padding:.18rem .6rem;
}
.quien{margin-left:auto;font-size:.85rem;color:var(--suave)}
.cab form{display:inline}
.btn-cab{
  background:rgba(255,255,255,.03);border:1px solid var(--filo);color:var(--suave);
  border-radius:9px;padding:.4rem .8rem;font:inherit;font-size:.8rem;cursor:pointer;
  display:inline-flex;align-items:center;gap:.4rem;transition:.15s;
}
.btn-cab:hover{border-color:var(--filo-vivo);color:var(--texto);
  background:rgba(76,195,255,.08)}
.btn-cab svg{width:15px;height:15px}

main{flex:1;width:100%;max-width:1180px;margin:0 auto;padding:1.8rem 1.5rem 2.5rem}

.encabezado{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;
  margin-bottom:1.6rem}
h1{
  font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:600;
  font-size:2.3rem;letter-spacing:.015em;margin:0;text-transform:uppercase;
}
.fecha{color:var(--suave);font-size:.92rem}

/* ── Los aros: salidas de aire ─────────────────────────────────────────────
   Cuatro capas concéntricas, todas en CSS:
     1 · el aro metálico, con gradiente cónico para que la luz gire
     2 · el anillo celeste interior, que es el que se enciende
     3 · las aspas radiales, en SVG dentro del botón
     4 · el pozo oscuro del centro, con el icono
   El acento rojo va arriba, como en el boceto, y solo en el activo. */
.aros{
  display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
  margin-bottom:1.8rem;
}
.aro{
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
  padding:.3rem;border-radius:14px;
}
.turbina{
  position:relative;width:104px;height:104px;border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,var(--metal-2) 0 54%,transparent 55%),
    conic-gradient(from 210deg,var(--metal-3),var(--metal-1) 18%,var(--metal-2) 38%,
                   var(--metal-3) 56%,var(--metal-1) 74%,var(--metal-2) 100%);
  box-shadow:var(--sombra),inset 0 0 0 1px rgba(255,255,255,.07);
  display:grid;place-items:center;
  transition:transform .22s,box-shadow .22s;
}
.aro:hover .turbina{transform:translateY(-2px) scale(1.03);
  box-shadow:var(--sombra),0 0 22px color-mix(in srgb,var(--celeste) 35%,transparent),
             inset 0 0 0 1px rgba(255,255,255,.12)}
/* anillo celeste */
.turbina::before{
  content:"";position:absolute;inset:9px;border-radius:50%;
  border:1.5px solid color-mix(in srgb,var(--celeste) 55%,transparent);
  box-shadow:0 0 12px color-mix(in srgb,var(--celeste) 30%,transparent),
             inset 0 0 10px color-mix(in srgb,var(--celeste) 18%,transparent);
}
/* pozo central */
.turbina::after{
  content:"";position:absolute;inset:22px;border-radius:50%;
  background:radial-gradient(circle at 50% 35%,#16212c,#070c12 70%);
  box-shadow:inset 0 2px 7px rgba(0,0,0,.8);
}
.aspas{position:absolute;inset:9px;width:auto;height:auto;opacity:.55;
  pointer-events:none}
.aspas line{stroke:var(--metal-1);stroke-width:1.1}
.turbina .ico{position:relative;z-index:2;width:30px;height:30px;color:var(--celeste);
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--celeste) 45%,transparent))}
.turbina .ico svg{width:100%;height:100%;display:block}
.aro .rotulo{
  font-size:.82rem;color:var(--suave);text-align:center;line-height:1.25;
  letter-spacing:.015em;
}
.aro:hover .rotulo{color:var(--texto)}
/* el destacado lleva el acento rojo arriba y el anillo más vivo */
.aro.top .turbina::before{border-color:var(--filo-vivo);
  box-shadow:0 0 18px color-mix(in srgb,var(--celeste) 45%,transparent),
             inset 0 0 12px color-mix(in srgb,var(--celeste) 25%,transparent)}
.aro.top .turbina .marca-roja{
  position:absolute;top:3px;left:50%;transform:translateX(-50%);
  width:26px;height:3px;border-radius:2px;background:var(--rojo);
  box-shadow:0 0 8px var(--rojo);z-index:3;
}
.aro.top .rotulo{color:var(--texto);font-weight:500}
.aro .pip{
  position:absolute;top:8px;right:14px;width:9px;height:9px;border-radius:50%;
  background:var(--urge);box-shadow:0 0 8px var(--urge);z-index:3;
}
.aro.pub{opacity:.55}
.aro.pub:hover{opacity:.9}

/* ── Indicadores ──────────────────────────────────────────────────────────── */
.tira{display:grid;gap:.85rem;margin-bottom:1.4rem;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.kpi{
  position:relative;display:flex;align-items:center;gap:.9rem;
  background:var(--panel);backdrop-filter:blur(9px);
  border:1px solid var(--filo);border-radius:13px;padding:1rem 1.05rem;
  box-shadow:var(--sombra);overflow:hidden;
}
.kpi::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,var(--filo-vivo),transparent)}
.kpi .ico{width:38px;height:38px;flex:none;color:var(--celeste);opacity:.9}
.kpi .ico svg{width:100%;height:100%}
.kpi .et{font-size:.76rem;color:var(--suave);letter-spacing:.05em;
  text-transform:uppercase;display:block;margin-bottom:.1rem}
.kpi .n{font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:600;
  font-size:2rem;line-height:1;display:block}
.kpi .pie-k{font-size:.76rem;color:var(--suave);margin-top:.2rem;display:block}
.kpi.alerta{border-color:color-mix(in srgb,var(--rojo) 42%,transparent)}
.kpi.alerta .n{color:var(--urge)}
.kpi.bien{border-color:color-mix(in srgb,var(--ok) 42%,transparent)}
.kpi.bien .n{color:var(--ok)}
.kpi.vacio .n{color:var(--suave)}

/* ── Columnas: accesos + atención ─────────────────────────────────────────── */
.columnas{display:grid;gap:1rem;grid-template-columns:1.55fr 1fr;align-items:start}
.bloque{
  background:var(--panel);backdrop-filter:blur(9px);
  border:1px solid var(--filo);border-radius:14px;padding:1.1rem 1.15rem;
  box-shadow:var(--sombra);position:relative;overflow:hidden;
}
.bloque::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,var(--filo-vivo),transparent)}
.bloque.rojo{border-color:color-mix(in srgb,var(--rojo) 40%,transparent)}
.bloque h2{
  font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:600;
  font-size:1.2rem;letter-spacing:.03em;text-transform:uppercase;
  margin:0 0 .9rem;display:flex;align-items:center;gap:.5rem;
}
.bloque h2 svg{width:19px;height:19px;color:var(--celeste)}
.bloque.rojo h2 svg{color:var(--rojo)}

.fila{
  display:grid;grid-template-columns:auto 1fr auto;gap:.8rem;align-items:center;
  padding:.72rem .55rem;border-radius:10px;
  border-bottom:1px solid color-mix(in srgb,var(--filo) 60%,transparent);
  transition:background .15s;
}
.fila:last-child{border-bottom:0}
.fila:hover{background:color-mix(in srgb,var(--celeste) 7%,transparent)}
.fila .mini{width:26px;height:26px;color:var(--celeste);opacity:.85;flex:none}
.fila .mini svg{width:100%;height:100%}
.fila .t{font-weight:500;font-size:.95rem;display:block}
.fila .s{font-size:.8rem;color:var(--suave);display:block;line-height:1.4}
.fila .cuenta{
  font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:600;
  font-size:1.45rem;color:var(--urge);min-width:1.4ch;text-align:right;
}
.fila .flecha{color:var(--suave);transition:.15s}
.fila:hover .flecha{color:var(--celeste);transform:translateX(3px)}
.vacio-txt{color:var(--suave);font-size:.88rem;padding:.5rem .55rem}

/* ── Pie de estado ────────────────────────────────────────────────────────── */
.fuentes{
  display:flex;gap:1.3rem;flex-wrap:wrap;align-items:center;
  margin-top:1.3rem;padding:.75rem 1.1rem;
  background:var(--panel);border:1px solid var(--filo);border-radius:12px;
  font-size:.79rem;color:var(--suave);
}
.fuentes b{color:var(--texto);font-weight:500}
.punto{width:8px;height:8px;border-radius:50%;display:inline-block;
  margin-right:.35rem;vertical-align:middle}
.punto.ok{background:var(--ok);box-shadow:0 0 7px var(--ok)}
.punto.esp{background:var(--urge);box-shadow:0 0 7px var(--urge)}
.nota{margin-top:1.2rem;font-size:.78rem;color:var(--suave);
  border-left:2px solid var(--filo);padding-left:.85rem;line-height:1.55}

/* ── Acceso ───────────────────────────────────────────────────────────────── */
.centrar{flex:1;display:flex;padding:1.5rem}
.caja{
  max-width:390px;margin:auto;padding:2rem 1.8rem;
  background:var(--panel);backdrop-filter:blur(12px);
  border:1px solid var(--filo);border-radius:16px;box-shadow:var(--sombra);
  position:relative;overflow:hidden;
}
.caja::before{content:"";position:absolute;inset:0 0 auto 0;height:1.5px;
  background:linear-gradient(90deg,transparent,var(--celeste),var(--rojo),transparent);
  opacity:.65}
.caja .logo{width:46px;height:46px;margin-bottom:1.2rem}
.caja h1{font-size:1.45rem;margin:0 0 .25rem}
.caja .sub{color:var(--suave);font-size:.87rem;margin:0}
label{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--suave);margin:1.15rem 0 .35rem}
input{
  width:100%;padding:.7rem .85rem;border:1px solid var(--filo);border-radius:10px;
  font:inherit;font-size:.97rem;background:rgba(0,0,0,.25);color:var(--texto);
}
:root[data-tema="claro"] input{background:#fff}
input:focus{outline:none;border-color:var(--celeste);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--celeste) 18%,transparent)}
.btn{
  width:100%;margin-top:1.5rem;border:0;border-radius:10px;padding:.8rem;
  font:inherit;font-weight:600;font-size:.98rem;letter-spacing:.04em;cursor:pointer;
  color:#04121c;background:linear-gradient(180deg,var(--celeste),#2c9ad1);
  box-shadow:0 0 18px color-mix(in srgb,var(--celeste) 32%,transparent);
  transition:filter .15s;
}
:root[data-tema="claro"] .btn{color:#fff}
.btn:hover{filter:brightness(1.1)}
.mal{
  margin-top:1.15rem;border-radius:10px;padding:.65rem .85rem;font-size:.87rem;
  border:1px solid color-mix(in srgb,var(--rojo) 50%,transparent);
  background:color-mix(in srgb,var(--rojo) 12%,transparent);
  color:color-mix(in srgb,var(--rojo) 70%,var(--texto));
}
.pie{
  color:var(--suave);font-size:.72rem;text-align:center;padding:1.1rem;
  border-top:1px solid var(--filo);letter-spacing:.07em;text-transform:uppercase;
}

/* ── Adaptación ───────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .columnas{grid-template-columns:1fr}
}
@media (max-width:620px){
  main{padding:1.3rem 1rem 2rem}
  h1{font-size:1.75rem}
  .aros{grid-template-columns:repeat(3,1fr);gap:.7rem}
  .turbina{width:78px;height:78px}
  .turbina::before{inset:7px}
  .turbina::after{inset:17px}
  .aspas{inset:7px}
  .turbina .ico{width:23px;height:23px}
  .aro .rotulo{font-size:.72rem}
  .kpi .n{font-size:1.7rem}
  .cab{padding:.7rem 1rem;gap:.6rem}
  .marca{font-size:1rem;padding-left:.7rem;letter-spacing:.07em}
  .quien{display:none}
  /* Las tablas y filas largas se desplazan en vez de romper el ancho */
  .bloque{overflow-x:auto}
}
@media (max-width:400px){
  .aros{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
  .aro:hover .turbina{transform:none}
}