/* ===========================================================================
   ElectroCell Tech — Sistema de taller. Hoja de estilos del panel.

   DEMO: esto pinta, no conecta. No hay backend, no hay datos reales.

   La paleta y las tipografias vienen del sitio publico (electrocelloficial.com)
   a proposito: el cliente tiene que reconocer su marca al abrir el sistema.
   Los contrastes estan MEDIDOS — ver CLAUDE.md del proyecto, seccion paleta.
   Regla que se hereda del sitio y no se rompe:
       el ROJO manda las acciones (botones, urgencias)
       el AZUL manda los datos y los estados (cifras, fases, seguimiento)
   =========================================================================== */

/* ---------- Tipografias locales. Nada de CDN (se copian en fuentes/) ------- */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fuentes/montserrat-variable.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fuentes/inter-variable.woff2') format('woff2')}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:500;font-display:swap;src:url('../fuentes/chakra-petch-500.woff2') format('woff2')}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:600;font-display:swap;src:url('../fuentes/chakra-petch-600.woff2') format('woff2')}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:700;font-display:swap;src:url('../fuentes/chakra-petch-700.woff2') format('woff2')}

:root{
  --negro:#08090D;
  --panel:#0E1016;
  --panel-2:#141821;
  --linea:#1D222E;
  --linea-2:#2A3140;

  --blanco:#FFFFFF;
  --texto:#AEB6C4;
  --tenue:#727C8C;

  --rojo:#E8213A;
  --rojo-btn:#E01E36;   /* unico rojo que pasa AA como fondo de boton */
  --rojo-vivo:#FF3D55;  /* el rojo que si sirve para TEXTO */
  --rojo-hondo:#B8172C;
  --azul:#2B7FFF;
  --azul-vivo:#5CA0FF;
  --morado:#8B5CF6;

  /* Estados del taller. Verde y ambar son NUEVOS respecto del sitio publico:
     un panel de trabajo necesita distinguir "listo" de "esperando" de un
     vistazo, y con dos acentos no alcanza. NO son un tercer color de marca —
     viven solo en insignias de estado, nunca en un titulo ni en un boton.
     Medidos sobre --panel-2 (#141821): verde 7.34, ambar 9.61. */
  --verde:#3DDC97;
  --ambar:#F0B429;

  --hero:'Montserrat', sans-serif;
  --tec:'Chakra Petch', sans-serif;
  --cuerpo:'Inter', sans-serif;

  --lateral:264px;   /* ancho de la barra lateral */
  --radio:16px;
}

/* ---------- Base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--negro);color:var(--texto);
  font-family:var(--cuerpo);font-size:.9rem;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font:inherit}
/* EL CALENDARIO DEL NAVEGADOR, EN OSCURO — 2026-09-14.
   Sin esto, un `<input type="date">` en este tema se rompe de la peor forma:
   Chrome dibuja el iconito del calendario en NEGRO sobre el panel oscuro, o
   sea invisible, y abre un calendario blanco que encandila. El campo queda
   pareciendo un campo de texto cualquiera y nadie descubre que tiene selector
   — que es exactamente el problema que el selector venía a resolver.
   `color-scheme` es lo único que le dice al navegador de qué color pintar SUS
   controles; ningun `color` o `background` nuestro llega hasta ahí. */
input[type="date"]{color-scheme:dark}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--rojo-vivo);outline-offset:3px}
svg{display:block}

/* EL ATRIBUTO `hidden` TIENE QUE GANAR SIEMPRE — agregado el 2026-09-11.

   `[hidden]{display:none}` es una regla del NAVEGADOR, y cualquier regla de
   este archivo le gana aunque tenga menos especificidad: las del autor pesan
   mas que las del navegador. Entonces todo lo que traiga `display` y se esconda
   con `hidden` NO SE ESCONDE.

   Ya habia pasado dos veces sin que nadie lo generalizara: `.retiro` tiene su
   propio parche en componentes.css con el comentario "display:flex le gana al
   [hidden] del navegador", y el 2026-09-11 se descubrio que el campo del
   voucher de los DOS dialogos de cobro —`label.campo`, y `.campo{display:block}`—
   se veia siempre, tambien pagando en efectivo. La pantalla de entrar cayo en
   lo mismo el mismo dia.

   Con esta linea, `el.hidden = true` esconde y listo. El `!important` es feo y
   aca esta bien puesto: la alternativa es acordarse caso por caso, y ya se vio
   tres veces que no pasa. */
[hidden]{display:none!important}

/* Utilidades heredadas del sitio publico, con el MISMO nombre a proposito:
   quien haya tocado index.html las reconoce. */
.grad{
  background:linear-gradient(95deg,var(--rojo-vivo) 0%,var(--morado) 52%,var(--azul-vivo) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.eti{
  font-family:var(--tec);font-weight:700;font-size:.7rem;
  letter-spacing:.18em;text-transform:uppercase;
}

/* ===========================================================================
   ARMAZON — barra lateral fija + area de contenido
   =========================================================================== */
.app{display:flex;min-height:100vh}

/* ---------- Barra lateral ---------- */
.lat{
  width:var(--lateral);flex:0 0 var(--lateral);
  background:var(--panel);border-right:1px solid var(--linea);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
}
.lat__marca{display:flex;align-items:center;gap:12px;padding:20px 18px 22px}
.lat__logo{
  width:44px;height:44px;border-radius:12px;object-fit:cover;
  border:1px solid var(--linea-2);flex:0 0 44px;
}
.lat__nom{
  font-family:var(--hero);font-weight:900;font-size:1.05rem;
  color:var(--blanco);text-transform:uppercase;letter-spacing:.02em;line-height:1;
}
.lat__desc{color:var(--tenue);font-size:.62rem;margin-top:5px}

.lat__grupo{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 20px 10px;color:var(--tenue);
}
/* flex:1 + min-height:0 es lo que hace que la lista SCROLLEE en vez de empujar
   el pie fuera de la pantalla. Con 17 opciones y una laptop de 768 px de alto,
   sin esto el boton de "nueva reparacion" y la tarjeta del usuario quedan
   abajo del borde y no hay forma de llegar a ellos. */
.lat__nav{
  display:flex;flex-direction:column;gap:2px;padding:0 12px;
  flex:1 1 auto;min-height:0;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--linea-2) transparent;
}
.lat__nav::-webkit-scrollbar{width:6px}
.lat__nav::-webkit-scrollbar-thumb{background:var(--linea-2);border-radius:3px}
.lat__nav::-webkit-scrollbar-track{background:transparent}

.nav__b{
  display:flex;align-items:center;gap:12px;
  padding:11px 14px;border-radius:11px;
  color:var(--texto);font-size:.875rem;font-weight:500;
  transition:background .18s,color .18s;
  position:relative;text-align:left;width:100%;
}
.nav__b:hover{background:var(--panel-2);color:var(--blanco)}
.nav__b svg{width:18px;height:18px;flex:0 0 18px;stroke:currentColor;opacity:.85}

/* El activo se marca con FONDO + BARRA lateral, no solo con color:
   §2.2 del sitio — una linea o un color nunca es el unico indicador. */
.nav__b[aria-current="page"]{
  background:var(--panel-2);color:var(--blanco);font-weight:600;
}
.nav__b[aria-current="page"]::before{
  content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);
  width:3px;height:22px;border-radius:0 3px 3px 0;background:var(--rojo);
}
.nav__b[aria-current="page"] svg{stroke:var(--rojo-vivo);opacity:1}

/* Contador de pendientes al costado del renglon (ej. Reparaciones: 8) */
.nav__n{
  margin-left:auto;font-family:var(--tec);font-weight:700;font-size:.68rem;
  background:var(--linea-2);color:var(--texto);
  padding:2px 8px;border-radius:999px;
}
.nav__b[aria-current="page"] .nav__n{background:var(--rojo-hondo);color:#fff}

.lat__pie{margin-top:auto;padding:16px 14px;display:flex;flex-direction:column;gap:12px}

/* ---------- Boton principal: NUEVA REPARACION ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 18px;border-radius:12px;
  font-family:var(--tec);font-weight:700;font-size:.79rem;
  letter-spacing:.09em;text-transform:uppercase;
  transition:background .18s,transform .12s,border-color .18s;
}
.btn svg{width:17px;height:17px;stroke:currentColor}
/* OJO: acá NO va width:100%. Lo tuvo hasta el 2026-09-10 porque el primer
   botón rojo del proyecto fue el de la barra lateral, que sí ocupa todo el
   ancho — y de ahí se le coló a TODOS los botones rojos del sistema, que
   pasaron a partir la línea en cada encabezado y cada pie de diálogo.
   El que necesite ancho completo se lo pide con .btn--ancho. */
.btn--r{background:var(--rojo-btn);color:#fff}
.btn--r:hover{background:var(--rojo-hondo)}
.btn--r:active{transform:translateY(1px)}
.btn--f{background:var(--panel-2);color:var(--texto);border:1px solid var(--linea-2)}
.btn--f:hover{border-color:var(--azul);color:var(--blanco)}

/* ---------- Tarjeta de usuario / sucursal ---------- */
.usr{
  display:flex;align-items:center;gap:11px;
  background:var(--panel-2);border:1px solid var(--linea);
  border-radius:13px;padding:10px 12px;
}
.usr__ini{
  width:34px;height:34px;flex:0 0 34px;border-radius:9px;
  background:linear-gradient(135deg,var(--rojo) 0%,var(--morado) 100%);
  color:#fff;font-family:var(--hero);font-weight:800;font-size:.9rem;
  display:flex;align-items:center;justify-content:center;
}
.usr__txt{min-width:0;flex:1}
.usr__nom{
  color:var(--blanco);font-weight:600;font-size:.78rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.usr__suc{color:var(--tenue);font-size:.66rem;display:flex;align-items:center;gap:4px}
.usr__sal{color:var(--tenue);padding:6px;border-radius:8px;transition:color .18s,background .18s}
.usr__sal:hover{color:var(--rojo-vivo);background:var(--negro)}
.usr__sal svg{width:17px;height:17px;stroke:currentColor}

/* ===========================================================================
   AREA DE CONTENIDO
   =========================================================================== */
.cont{flex:1;min-width:0;padding:22px 26px 60px}

/* ---------- Encabezado de la vista ---------- */
.enc{
  background:var(--panel);border:1px solid var(--linea);
  border-radius:var(--radio);padding:24px 26px;
  display:flex;align-items:flex-start;gap:24px;flex-wrap:wrap;
}
.enc__izq{flex:1;min-width:280px}
.enc__pill{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(43,127,255,.12);border:1px solid rgba(43,127,255,.3);
  color:var(--azul-vivo);padding:5px 13px;border-radius:999px;margin-bottom:14px;
}
.enc__pill svg{width:13px;height:13px;stroke:currentColor}
.enc__tit{
  font-family:var(--hero);font-weight:900;
  font-size:clamp(1.7rem,3.4vw,2.6rem);
  text-transform:uppercase;letter-spacing:.005em;line-height:1.08;
  color:var(--blanco);
}
.enc__saludo{margin-top:12px;color:var(--texto);font-size:.9rem;line-height:1.7}
.enc__saludo strong{color:var(--blanco);font-weight:600}
.enc__saludo b{color:var(--azul-vivo);font-weight:600}

/* Buscador global */
.busca{position:relative;flex:0 1 360px;min-width:240px}
.busca svg{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;stroke:var(--tenue);pointer-events:none;
}
.busca input{
  width:100%;background:var(--panel-2);border:1px solid var(--linea-2);
  border-radius:12px;padding:12px 14px 12px 42px;
  color:var(--blanco);font-size:.85rem;transition:border-color .18s;
}
.busca input::placeholder{color:var(--tenue)}
.busca input:focus{outline:none;border-color:var(--azul)}

/* ---------- Tarjetas de indicadores (KPI) ---------- */
.kpis{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;margin-top:18px;
}
.kpi{
  background:var(--panel);border:1px solid var(--linea);
  border-radius:var(--radio);padding:20px 22px 22px;
  position:relative;overflow:hidden;
  transition:border-color .2s;
}
.kpi:hover{border-color:var(--linea-2)}
.kpi__ico{
  width:42px;height:42px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;margin-bottom:26px;
}
.kpi__ico svg{width:20px;height:20px;stroke:currentColor}
.kpi__eti{color:var(--tenue);display:block}
.kpi__num{
  font-family:var(--hero);font-weight:800;font-size:1.95rem;
  color:var(--blanco);line-height:1.15;margin-top:6px;letter-spacing:-.01em;
}
/* La marca de agua gigante del fondo. Decorativa: aria-hidden en el marcado. */
.kpi__fondo{
  position:absolute;right:-14px;bottom:-22px;
  width:118px;height:118px;opacity:.05;stroke:currentColor;pointer-events:none;
}
/* Cada indicador toma su color del significado, no del orden */
.kpi--dinero{color:var(--verde)}
.kpi--dinero .kpi__ico{background:rgba(61,220,151,.1)}
.kpi--cola{color:var(--ambar)}
.kpi--cola .kpi__ico{background:rgba(240,180,41,.1)}
.kpi--listo{color:var(--azul-vivo)}
.kpi--listo .kpi__ico{background:rgba(43,127,255,.12)}
.kpi--urge{color:var(--rojo-vivo)}
.kpi--urge .kpi__ico{background:rgba(232,33,58,.12)}

/* ---------- Panel generico (actividad reciente, y lo que venga) ---------- */
.panel{
  background:var(--panel);border:1px solid var(--linea);
  border-radius:var(--radio);margin-top:18px;
}
.panel__enc{
  display:flex;align-items:center;gap:14px;
  padding:20px 24px;border-bottom:1px solid var(--linea);flex-wrap:wrap;
}
.panel__ico{
  width:40px;height:40px;flex:0 0 40px;border-radius:11px;
  background:rgba(43,127,255,.12);color:var(--azul-vivo);
  display:flex;align-items:center;justify-content:center;
}
.panel__ico svg{width:19px;height:19px;stroke:currentColor}
.panel__tit{
  font-family:var(--hero);font-weight:800;font-size:1.05rem;
  color:var(--blanco);text-transform:uppercase;letter-spacing:.01em;
}
.panel__sub{color:var(--tenue);font-size:.7rem;margin-top:3px}
.panel__acc{margin-left:auto}
.enlace{
  font-family:var(--tec);font-weight:700;font-size:.7rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--azul-vivo);
  padding:8px 14px;border-radius:9px;transition:background .18s;
}
.enlace:hover{background:var(--panel-2)}

/* ---------- Tabla ---------- */
.tabla-env{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:840px}
thead th{
  font-family:var(--tec);font-weight:700;font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tenue);
  text-align:left;padding:14px 24px;border-bottom:1px solid var(--linea);
  white-space:nowrap;
}
tbody td{padding:15px 24px;border-bottom:1px solid var(--linea);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background .15s}
tbody tr:hover{background:var(--panel-2)}
.t--der{text-align:right}

.orden{font-family:var(--tec);font-weight:700;color:var(--azul-vivo);font-size:.82rem}
.equipo{color:var(--blanco);font-weight:600;font-size:.85rem}
.falla{color:var(--tenue);font-size:.76rem;margin-top:2px}
.importe{font-family:var(--tec);font-weight:700;color:var(--blanco);font-size:.87rem;white-space:nowrap}

/* Insignias de fase. El PUNTO ademas del color: quien no distingue rojo de
   verde igual lee la palabra, y el color nunca va solo (§2.2). */
.fase{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--tec);font-weight:600;font-size:.7rem;
  letter-spacing:.06em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;white-space:nowrap;
  border:1px solid transparent;
}
.fase::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.fase--diag{color:var(--ambar);background:rgba(240,180,41,.1);border-color:rgba(240,180,41,.25)}
.fase--rep {color:var(--azul-vivo);background:rgba(43,127,255,.12);border-color:rgba(43,127,255,.28)}
.fase--esp {color:var(--tenue);background:rgba(114,124,140,.12);border-color:rgba(114,124,140,.25)}
.fase--list{color:var(--verde);background:rgba(61,220,151,.1);border-color:rgba(61,220,151,.25)}
.fase--urge{color:var(--rojo-vivo);background:rgba(232,33,58,.12);border-color:rgba(232,33,58,.3)}

/* Sirve para <button> y para <a>: las impresiones abren en otra pestaña, asi
   que son enlaces de verdad, no botones. Con inline-flex los dos se ven igual. */
.acc{
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--tenue);padding:7px;border-radius:9px;
  transition:color .18s,background .18s;
}
.acc:hover{color:var(--azul-vivo);background:var(--negro)}
.acc svg{width:17px;height:17px;stroke:currentColor}

/* Estado vacio — el demo no lo usa, pero la vista real si lo va a necesitar */
.vacio{padding:64px 24px;text-align:center;color:var(--tenue)}
.vacio svg{width:56px;height:56px;stroke:currentColor;opacity:.35;margin:0 auto 16px}

/* ---------- Boton flotante ---------- */
.flota{
  position:fixed;right:22px;bottom:22px;z-index:40;
  display:inline-flex;align-items:center;gap:9px;
  background:linear-gradient(135deg,var(--rojo-btn) 0%,var(--morado) 100%);
  color:#fff;padding:12px 20px;border-radius:999px;
  font-family:var(--tec);font-weight:700;font-size:.74rem;
  letter-spacing:.1em;text-transform:uppercase;
  box-shadow:0 8px 26px rgba(0,0,0,.5);
  transition:transform .15s;
}
.flota:hover{transform:translateY(-2px)}
.flota svg{width:16px;height:16px;stroke:currentColor}

/* ---------- Boton de menu (solo movil) ---------- */
.menu-b{
  display:none;
  position:fixed;left:14px;top:14px;z-index:46;
  width:42px;height:42px;border-radius:12px;
  background:var(--panel);border:1px solid var(--linea-2);
  align-items:center;justify-content:center;color:var(--texto);
  box-shadow:0 4px 16px rgba(0,0,0,.45);
}
.menu-b svg{width:19px;height:19px;stroke:currentColor}
.tapa{
  display:none;position:fixed;inset:0;z-index:45;
  background:rgba(4,5,8,.7);backdrop-filter:blur(2px);
}
.tapa.ver{display:block}

/* ===========================================================================
   RESPONSIVO — mismos cortes que el sitio publico: 1040 y 640
   =========================================================================== */
@media (max-width:1180px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1040px){
  .lat{
    position:fixed;z-index:50;left:0;top:0;
    transform:translateX(-100%);transition:transform .25s ease;
  }
  .lat.abierta{transform:translateX(0)}
  .menu-b{display:inline-flex}
  /* 70px arriba: el boton de menu es fijo y si no, tapa el encabezado */
  .cont{padding:70px 16px 60px}
  .enc{padding:20px}
}
@media (max-width:640px){
  .kpis{grid-template-columns:1fr}
  .enc{gap:16px}
  .busca{flex:1 1 100%}
  .flota{right:14px;bottom:14px;padding:11px 16px}
  .cont{padding:70px 14px 56px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
  html{scroll-behavior:auto}
}

/* .demo-b — el aviso "Versión en construcción" — se sacó el 2026-09-16, al
   pasar a producción. */