/* =====================================================================
   Bodega & Taller Tecnológico — hoja de estilos única
   Paleta tomada del mundo del taller: placa PCB, bolsa antiestática,
   etiqueta de estante, cinta de advertencia.
   ===================================================================== */

:root{
  --tinta:#0E151E;         /* texto principal / barra lateral */
  --tinta-80:#3A4653;
  --tinta-50:#6C7885;
  --linea:#D8DEE5;
  --papel:#EDF1F4;         /* fondo app */
  --carta:#FFFFFF;         /* superficies */
  --pcb:#0E7C5A;           /* acento principal: verde placa */
  --pcb-claro:#E3F3EC;
  --esd:#2A5CD6;           /* azul antiestático: enlaces/info */
  --esd-claro:#E4EBFB;
  --ambar:#B77A02;         /* cinta de advertencia */
  --ambar-claro:#FCF0D8;
  --alarma:#B02E26;
  --alarma-claro:#FBE6E4;
  --radio:10px;
  --radio-sm:6px;
  --sombra:0 1px 2px rgba(14,21,30,.06), 0 8px 24px -12px rgba(14,21,30,.22);
  --lateral:250px;
  --display:"Archivo","Segoe UI",system-ui,sans-serif;
  --texto:"Inter","Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"Courier New",monospace;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font-family:var(--texto);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;display:block;}
a{color:var(--esd);text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.02em;margin:0 0 .4em;line-height:1.15;}
h1{font-size:1.6rem;} h2{font-size:1.2rem;} h3{font-size:1rem;}
:focus-visible{outline:3px solid var(--esd);outline-offset:2px;border-radius:4px;}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}

/* ---------- Etiqueta de estante: el elemento firma del sistema ------ */
.etiqueta{
  font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta-50);
}
.codigo{
  font-family:var(--mono);font-weight:700;letter-spacing:.04em;
  background:var(--tinta);color:#EAF3EF;padding:.15em .5em;border-radius:4px;
  font-size:.86em;display:inline-block;white-space:nowrap;
}
.codigo--verde{background:var(--pcb);}
.troquel{
  height:8px;background-image:radial-gradient(circle at 4px 4px, var(--papel) 3.2px, transparent 3.4px);
  background-size:12px 8px;background-position:0 -4px;
}

/* ---------- Estructura ---------------------------------------------- */
.app{display:flex;min-height:100vh;}

.lateral{
  width:var(--lateral);flex:0 0 var(--lateral);background:var(--tinta);color:#C7D2DC;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;
}
.lateral__marca{padding:18px 18px 14px;border-bottom:1px solid rgba(255,255,255,.09);}
.lateral__marca strong{display:block;font-family:var(--display);color:#fff;font-size:1.02rem;letter-spacing:-.01em;}
.lateral__marca span{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--pcb);}
.lateral nav{padding:12px 10px;flex:1;}
.lateral__grupo{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:#5C6B7A;padding:14px 10px 6px;
}
.lateral a{
  display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--radio-sm);
  color:#C7D2DC;font-size:.9rem;text-decoration:none;
}
.lateral a:hover{background:rgba(255,255,255,.07);color:#fff;}
.lateral a.activo{background:var(--pcb);color:#fff;font-weight:600;}
.lateral a .pin{
  margin-left:auto;background:var(--ambar);color:#231A00;font-family:var(--mono);
  font-size:.66rem;font-weight:700;padding:0 6px;border-radius:20px;
}
.lateral__pie{padding:12px 14px;border-top:1px solid rgba(255,255,255,.09);font-size:.78rem;color:#7C8A99;}

.principal{flex:1;min-width:0;display:flex;flex-direction:column;}

.barra{
  background:var(--carta);border-bottom:1px solid var(--linea);
  padding:12px 22px;display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:20;
}
.barra__menu{display:none;background:none;border:1px solid var(--linea);border-radius:var(--radio-sm);
  padding:6px 9px;font-size:1.1rem;cursor:pointer;line-height:1;}
.barra__titulo{font-family:var(--display);font-weight:700;font-size:1.02rem;margin:0;}
.barra__yo{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:.85rem;}
.avatar{
  width:34px;height:34px;border-radius:50%;background:var(--pcb-claro);color:var(--pcb);
  display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:.8rem;flex:0 0 auto;
}
.rol-pin{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-50);}

.contenido{padding:22px;max-width:1240px;width:100%;}
.pagina{margin-bottom:20px;}
.pagina__sub{color:var(--tinta-50);margin:0;font-size:.9rem;}
.pagina__acciones{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}

/* ---------- Tarjetas ------------------------------------------------ */
.carta{background:var(--carta);border:1px solid var(--linea);border-radius:var(--radio);box-shadow:var(--sombra);}
.carta__cab{padding:14px 18px;border-bottom:1px solid var(--linea);display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.carta__cab h2,.carta__cab h3{margin:0;}
.carta__cuerpo{padding:18px;}
.carta__pie{padding:12px 18px;border-top:1px solid var(--linea);background:#FAFBFC;
  border-radius:0 0 var(--radio) var(--radio);display:flex;gap:8px;flex-wrap:wrap;}

.rejilla{display:grid;gap:16px;}
.rejilla--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
.rejilla--3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}
.rejilla--4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}
.split{display:grid;grid-template-columns:2fr 1fr;gap:16px;align-items:start;}
@media(max-width:900px){.split{grid-template-columns:1fr;}}

/* Indicadores del panel */
.dato{background:var(--carta);border:1px solid var(--linea);border-radius:var(--radio);padding:14px 16px;position:relative;overflow:hidden;}
.dato::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--pcb);}
.dato--ambar::before{background:var(--ambar);} .dato--alarma::before{background:var(--alarma);} .dato--esd::before{background:var(--esd);}
.dato__n{font-family:var(--display);font-size:1.9rem;font-weight:700;line-height:1;letter-spacing:-.03em;}
.dato__t{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-50);margin-top:6px;}

/* ---------- Botones ------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 15px;border-radius:var(--radio-sm);border:1px solid var(--linea);
  background:var(--carta);color:var(--tinta);font-family:var(--texto);font-size:.88rem;font-weight:600;
  cursor:pointer;text-decoration:none;transition:transform .06s ease, background .15s ease;
}
.btn:hover{background:#F4F6F8;text-decoration:none;}
.btn:active{transform:translateY(1px);}
.btn[disabled]{opacity:.5;cursor:not-allowed;}
.btn--pri{background:var(--pcb);border-color:var(--pcb);color:#fff;}
.btn--pri:hover{background:#0C6A4D;}
.btn--esd{background:var(--esd);border-color:var(--esd);color:#fff;}
.btn--esd:hover{background:#2450BC;}
.btn--peligro{background:var(--alarma);border-color:var(--alarma);color:#fff;}
.btn--peligro:hover{background:#96271F;}
.btn--fantasma{background:transparent;}
.btn--sm{padding:5px 10px;font-size:.78rem;}
.btn--bloque{width:100%;}
.btn--grabar.grabando{background:var(--alarma);border-color:var(--alarma);color:#fff;animation:latido 1.2s infinite;}
@keyframes latido{50%{opacity:.62}}

/* ---------- Formularios --------------------------------------------- */
.campo{margin-bottom:14px;}
.campo label,.rotulo{
  display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tinta-80);margin-bottom:5px;font-weight:700;
}
.campo .req{color:var(--alarma);}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],
input[type=datetime-local],input[type=tel],input[type=search],input[type=file],select,textarea{
  width:100%;padding:9px 11px;border:1px solid var(--linea);border-radius:var(--radio-sm);
  background:#fff;font-family:var(--texto);font-size:.92rem;color:var(--tinta);
}
input:focus,select:focus,textarea:focus{border-color:var(--pcb);outline:2px solid var(--pcb-claro);}
textarea{min-height:96px;resize:vertical;}
input[readonly],input[disabled],select[disabled],textarea[readonly]{background:#F2F4F6;color:var(--tinta-50);}
.pista{font-size:.76rem;color:var(--tinta-50);margin-top:4px;}
.fila{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));}
.check{display:flex;gap:9px;align-items:flex-start;font-size:.88rem;}
.check input{width:17px;height:17px;margin-top:2px;flex:0 0 auto;accent-color:var(--pcb);}
fieldset{border:1px solid var(--linea);border-radius:var(--radio);padding:16px;margin:0 0 18px;}
legend{font-family:var(--display);font-weight:700;font-size:.92rem;padding:0 8px;}

/* Campo con dictado por voz */
.dictado{position:relative;}
.dictado textarea,.dictado input{padding-right:44px;}
.dictado__mic{
  position:absolute;right:6px;top:26px;width:32px;height:32px;border-radius:50%;
  border:1px solid var(--linea);background:#fff;cursor:pointer;display:grid;place-items:center;font-size:.9rem;
}
.dictado__mic.grabando{background:var(--alarma);border-color:var(--alarma);color:#fff;animation:latido 1.2s infinite;}
.dictado__estado{font-size:.74rem;color:var(--pcb);min-height:1em;margin-top:3px;}

/* ---------- Chips y avisos ------------------------------------------ */
.chip{
  display:inline-block;padding:2px 9px;border-radius:20px;font-size:.72rem;font-weight:700;
  border:1px solid transparent;white-space:nowrap;
}
.chip--ok{background:var(--pcb-claro);color:#0A5C43;border-color:#BEE3D5;}
.chip--info{background:var(--esd-claro);color:#20419B;border-color:#C6D5F7;}
.chip--proceso{background:#EAE6FB;color:#4B34A8;border-color:#D3CBF5;}
.chip--espera{background:var(--ambar-claro);color:#7A5202;border-color:#F1DDA9;}
.chip--alto{background:var(--alarma-claro);color:#8C231C;border-color:#F3C9C5;}
.chip--neutro{background:#EDF0F3;color:var(--tinta-80);border-color:var(--linea);}

.avisos{margin-bottom:16px;display:grid;gap:8px;}
.aviso{
  padding:11px 14px;border-radius:var(--radio-sm);font-size:.88rem;border-left:4px solid;
  display:flex;align-items:center;gap:10px;
}
.aviso__x{margin-left:auto;background:none;border:0;font-size:1.15rem;cursor:pointer;color:inherit;opacity:.6;line-height:1;}
.aviso--ok{background:var(--pcb-claro);border-color:var(--pcb);color:#0A5C43;}
.aviso--info{background:var(--esd-claro);border-color:var(--esd);color:#20419B;}
.aviso--espera{background:var(--ambar-claro);border-color:var(--ambar);color:#7A5202;}
.aviso--alto,.aviso--error{background:var(--alarma-claro);border-color:var(--alarma);color:#8C231C;}

/* ---------- Tablas -------------------------------------------------- */
.tabla-env{overflow-x:auto;}
table.tabla{width:100%;border-collapse:collapse;font-size:.88rem;}
.tabla th{
  text-align:left;padding:10px 12px;background:#F7F9FA;border-bottom:1px solid var(--linea);
  font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-50);white-space:nowrap;
}
.tabla td{padding:11px 12px;border-bottom:1px solid var(--linea);vertical-align:middle;}
.tabla tbody tr:hover{background:#F9FBFC;}
.tabla .acc{white-space:nowrap;text-align:right;}
.vacio{text-align:center;padding:44px 20px;color:var(--tinta-50);}
.vacio strong{display:block;font-family:var(--display);color:var(--tinta);font-size:1.05rem;margin-bottom:4px;}

@media(max-width:760px){
  .tabla thead{display:none;}
  .tabla tr{display:block;border:1px solid var(--linea);border-radius:var(--radio);margin-bottom:10px;padding:6px 10px;background:#fff;}
  .tabla td{display:flex;justify-content:space-between;gap:12px;border:0;border-bottom:1px dashed var(--linea);padding:8px 0;text-align:right;}
  .tabla tr td:last-child{border-bottom:0;}
  .tabla td::before{content:attr(data-t);font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;
    text-transform:uppercase;color:var(--tinta-50);text-align:left;flex:0 0 auto;}
}

/* Filtros */
.filtros{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px;}
.filtros .campo{margin:0;min-width:150px;flex:1;}
@media(max-width:600px){.filtros .campo{min-width:100%;}}

/* Paginación */
.pag{display:flex;gap:5px;justify-content:center;margin-top:16px;flex-wrap:wrap;}
.pag a,.pag span{padding:6px 11px;border:1px solid var(--linea);border-radius:var(--radio-sm);background:#fff;font-size:.84rem;}
.pag .actual{background:var(--pcb);border-color:var(--pcb);color:#fff;font-weight:700;}

/* ---------- Listas de detalle --------------------------------------- */
.detalle{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0;font-size:.9rem;}
.detalle dt{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-50);padding-top:3px;}
.detalle dd{margin:0;}
@media(max-width:520px){.detalle{grid-template-columns:1fr;gap:2px 0;} .detalle dd{margin-bottom:10px;}}

/* Línea de tiempo del ticket */
.linea{list-style:none;margin:0;padding:0 0 0 22px;border-left:2px solid var(--linea);}
.linea li{position:relative;padding:0 0 20px 16px;}
.linea li::before{content:"";position:absolute;left:-25px;top:4px;width:9px;height:9px;border-radius:50%;
  background:var(--pcb);box-shadow:0 0 0 3px var(--carta);}
.linea li.sistema::before{background:var(--tinta-50);}
.linea__meta{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-50);}
.linea__cuerpo{background:#F7F9FA;border:1px solid var(--linea);border-radius:var(--radio-sm);padding:9px 12px;margin-top:5px;white-space:pre-wrap;}

/* ---------- Firma --------------------------------------------------- */
.firma{border:2px dashed var(--linea);border-radius:var(--radio);background:
  repeating-linear-gradient(45deg,#fff,#fff 10px,#FBFCFD 10px,#FBFCFD 20px);padding:8px;}
.firma canvas{width:100%;height:190px;background:#fff;border-radius:var(--radio-sm);
  touch-action:none;cursor:crosshair;display:block;border:1px solid var(--linea);}
.firma__barra{display:flex;gap:8px;justify-content:space-between;align-items:center;margin-top:8px;flex-wrap:wrap;}
.firma__linea{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-50);}
.firma-vista{background:#fff;border:1px solid var(--linea);border-radius:var(--radio-sm);padding:6px;max-width:280px;}
.firma-vista img{max-height:110px;margin:0 auto;}

/* ---------- Medios -------------------------------------------------- */
.medios{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;}
.medio{border:1px solid var(--linea);border-radius:var(--radio-sm);overflow:hidden;background:#fff;}
.medio img{height:120px;object-fit:cover;width:100%;}
.medio video{height:120px;object-fit:cover;background:#000;width:100%;}
.medio audio{width:100%;padding:8px 6px;}
.medio__pie{padding:7px 9px;font-size:.74rem;color:var(--tinta-50);display:flex;justify-content:space-between;gap:6px;align-items:center;}
.medio__etapa{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;
  background:var(--tinta);color:#fff;padding:1px 5px;border-radius:3px;}
.soltar{border:2px dashed var(--linea);border-radius:var(--radio);padding:22px;text-align:center;color:var(--tinta-50);
  background:#FBFCFD;font-size:.88rem;}
.soltar.encima{border-color:var(--pcb);background:var(--pcb-claro);color:var(--pcb);}

/* Pestañas */
.pestanas{display:flex;gap:2px;border-bottom:1px solid var(--linea);margin-bottom:16px;overflow-x:auto;}
.pestanas a{padding:9px 15px;font-size:.86rem;font-weight:600;color:var(--tinta-50);white-space:nowrap;
  border-bottom:2px solid transparent;text-decoration:none;}
.pestanas a.activa{color:var(--pcb);border-bottom-color:var(--pcb);}

/* ---------- Acceso (login / registro) ------------------------------- */
.acceso{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;}
@media(max-width:900px){.acceso{grid-template-columns:1fr;} .acceso__arte{display:none;}}
.acceso__arte{
  background:var(--tinta);color:#fff;padding:46px;display:flex;flex-direction:column;justify-content:space-between;
  background-image:
    linear-gradient(rgba(14,124,90,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,124,90,.09) 1px, transparent 1px);
  background-size:26px 26px;
}
.acceso__arte h1{font-size:2.2rem;max-width:11ch;color:#fff;}
.acceso__arte p{color:#9DAAB6;max-width:42ch;}
.acceso__pistas{display:grid;gap:10px;margin-top:24px;}
.acceso__pista{display:flex;gap:10px;align-items:baseline;font-size:.86rem;color:#C7D2DC;}
.acceso__pista .n{font-family:var(--mono);color:var(--pcb);font-size:.72rem;letter-spacing:.1em;}
.acceso__forma{padding:40px 24px;display:flex;align-items:center;justify-content:center;background:var(--papel);}
.acceso__caja{width:100%;max-width:440px;}
.acceso__caja .carta__cuerpo{padding:24px;}

/* ---------- Orden de servicio imprimible ---------------------------- */
.orden{background:#fff;padding:26px;border:1px solid var(--linea);border-radius:var(--radio);max-width:850px;margin:0 auto;}
.orden__cab{display:flex;justify-content:space-between;gap:20px;border-bottom:3px solid var(--tinta);padding-bottom:14px;margin-bottom:18px;flex-wrap:wrap;}
.orden__emp strong{font-family:var(--display);font-size:1.15rem;display:block;}
.orden__emp span{font-size:.8rem;color:var(--tinta-50);display:block;}
.orden__num{text-align:right;}
.orden__num .etiqueta{display:block;}
.orden__num .n{font-family:var(--mono);font-size:1.35rem;font-weight:700;color:var(--pcb);}
.orden h3{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-50);
  border-bottom:1px solid var(--linea);padding-bottom:5px;margin:20px 0 10px;}
.orden__firmas{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:34px;}
@media(max-width:600px){.orden__firmas{grid-template-columns:1fr;}}
.orden__firma{text-align:center;}
.orden__firma img{height:78px;margin:0 auto 4px;}
.orden__firma .raya{border-top:1px solid var(--tinta);padding-top:6px;font-size:.78rem;}
.orden__firma .hueco{height:78px;}
.orden__legal{font-size:.7rem;color:var(--tinta-50);margin-top:22px;border-top:1px solid var(--linea);padding-top:10px;}

@media print{
  .lateral,.barra,.pagina__acciones,.no-imprimir,.avisos{display:none!important;}
  body{background:#fff;font-size:12px;}
  .contenido{padding:0;max-width:none;}
  .orden{border:0;padding:0;max-width:none;box-shadow:none;}
  a{color:#000;text-decoration:none;}
  @page{margin:14mm;}
}

/* ---------- Barra lateral móvil ------------------------------------- */
@media(max-width:1000px){
  .lateral{
    position:fixed;left:0;top:0;bottom:0;z-index:60;transform:translateX(-100%);
    transition:transform .22s ease;box-shadow:0 0 40px rgba(0,0,0,.3);
  }
  .lateral.abierta{transform:none;}
  .barra__menu{display:block;}
  .velo{position:fixed;inset:0;background:rgba(14,21,30,.5);z-index:50;display:none;}
  .velo.visible{display:block;}
  .contenido{padding:16px;}
}
@media(max-width:480px){
  h1{font-size:1.32rem;}
  .barra{padding:10px 14px;}
  .barra__yo .nombre{display:none;}
  .carta__cuerpo{padding:14px;}
}