/* Ordenes de trabajo y mantencion preventiva
   Dos diseños en un archivo: la app en pantalla y la hoja impresa (al final). */

:root {
  --azul: #3f8fcf;
  --azul-oscuro: #2f6fa5;
  --grafito: #3a3838;
  --texto: #22262b;
  --suave: #6b7280;
  --borde: #dfe3e8;
  --fondo: #f4f6f8;
  --papel: #ffffff;
  --alerta: #b3261e;
  --ok: #1e7a4b;
  /* Ni bien ni mal: hay que mirarlo. Lo usa el documento que se guardo pero
     cuyo correo no salio, y la direccion heredada de otro servicio. */
  --atencion: #a06500;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 15px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* ------------------------------------------------------------ barra superior */

.barra {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 26px;
  background: var(--papel);
  border-bottom: 3px solid var(--azul);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .06);
  position: sticky;
  top: 0;
  z-index: 10;
  flex-wrap: wrap;
}

.barra .logo { height: 58px; }

/* Acotada a la barra a proposito. Sin el ".barra" delante, esta regla pisaba
   tambien a los span.titulo de las tarjetas del Resumen -que no tienen nada que
   ver- y les imponia 220 px de ancho minimo dentro de tarjetas mucho mas
   estrechas: el Resumen desbordaba de lado ya a 1009 px, no solo en el telefono. */
.barra .titulo { flex: 1; min-width: 220px; }
.titulo h1 { margin: 0; font-size: 19px; font-weight: 600; color: var(--grafito); }
.titulo p  { margin: 0; font-size: 13px; color: var(--suave); }

/* Con siete pestanas y una pantalla angosta, sin envolver se cortaban las
   ultimas. */
.pestanas { display: flex; gap: 6px; flex-wrap: wrap; }

.pestanas button {
  border: 1px solid transparent;
  background: transparent;
  color: var(--suave);
  padding: 9px 16px;
  border-radius: 7px;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

.pestanas button:hover { background: var(--fondo); color: var(--grafito); }

.pestanas button.activa {
  background: var(--azul);
  color: #fff;
  box-shadow: 0 2px 6px rgba(63, 143, 207, .35);
}

/* ------------------------------------------------------------------- diseño */

main { max-width: 940px; margin: 0 auto; padding: 26px 20px 70px; }

.vista { animation: aparecer .18s ease-out; }
.oculta { display: none !important; }

@keyframes aparecer { from { opacity: 0; transform: translateY(4px); } }

/* ---------------------------------------------------------------- formulario */

fieldset {
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 18px 22px 22px;
  margin: 0 0 18px;
}

legend {
  font-weight: 600;
  color: var(--grafito);
  padding: 3px 10px;
  background: var(--grafito);
  color: #fff;
  border-radius: 5px;
  font-size: 13px;
  letter-spacing: .3px;
  text-transform: uppercase;
}

.rejilla {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.campo { display: block; margin-bottom: 14px; font-size: 13px; color: var(--suave); font-weight: 500; }
.rejilla .campo { margin-bottom: 0; }
.campo.ancho2 { grid-column: span 2; }

.campo input, .campo textarea {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 9px 11px;
  border: 1px solid var(--borde);
  border-radius: 7px;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.45;
  color: var(--texto);
  background: #fff;
}

.campo textarea { resize: vertical; }

.campo input:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(63, 143, 207, .18);
}

.campo input[readonly] { background: var(--fondo); color: var(--suave); }
.campo small { display: block; margin-top: 4px; font-size: 11px; color: var(--suave); font-weight: 400; }

.estados { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

.estados label {
  border: 1px solid var(--borde);
  border-radius: 20px;
  padding: 7px 15px;
  cursor: pointer;
  font-size: 14px;
  background: #fff;
}

.estados label:has(input:checked) {
  border-color: var(--azul);
  background: rgba(63, 143, 207, .1);
  color: var(--azul-oscuro);
  font-weight: 600;
}

/* ----------------------------------------------------------------- repuestos */

.tabla-repuestos { width: 100%; border-collapse: collapse; margin-bottom: 12px; }

.tabla-repuestos th {
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--suave);
  padding: 0 8px 6px 0;
  font-weight: 600;
}

.tabla-repuestos td { padding: 0 8px 8px 0; }
.tabla-repuestos .col-cantidad { width: 120px; }
.tabla-repuestos .col-quitar { width: 40px; }

.tabla-repuestos input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--borde);
  border-radius: 7px;
  font-family: inherit;
  font-size: 15px;
}

.tabla-repuestos input:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(63, 143, 207, .18);
}

.quitar {
  border: none;
  background: transparent;
  color: var(--suave);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
}

.quitar:hover { background: #fdeceb; color: var(--alerta); }

.vacio-repuestos { color: var(--suave); font-size: 14px; padding-bottom: 10px; }

/* --------------------------------------------------------------------- firma */

.etiqueta-firma { margin: 4px 0 8px; font-size: 13px; color: var(--suave); font-weight: 500; }
.etiqueta-firma small { font-weight: 400; }

.caja-firma {
  position: relative;
  border: 1px dashed #c2c9d2;
  border-radius: 10px;
  background: #fcfdfe;
  padding: 10px;
  margin-bottom: 12px;
}

.caja-firma canvas {
  display: block;
  width: 100%;
  height: 170px;
  touch-action: none;
  cursor: crosshair;
}

.linea-firma {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 34px;
  border-bottom: 1px solid #cdd4dc;
  pointer-events: none;
}

/* ------------------------------------------------------------------ botones */

.acciones { display: flex; align-items: center; gap: 12px; margin-top: 6px; }

button.principal, button.secundario {
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 11px 22px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid transparent;
}

button.principal {
  background: var(--azul);
  color: #fff;
  box-shadow: 0 2px 8px rgba(63, 143, 207, .35);
}

button.principal:hover { background: var(--azul-oscuro); }
button.principal:disabled { opacity: .55; cursor: progress; }

button.secundario { background: #fff; border-color: var(--borde); color: var(--grafito); }
button.secundario:hover { border-color: var(--azul); color: var(--azul-oscuro); }

/* -------------------------------------------------------------- avisos */

.aviso, .error, .confirmacion {
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 14px;
  margin-top: 12px;
}

.aviso { background: rgba(63, 143, 207, .1); border: 1px solid rgba(63, 143, 207, .35); color: #24557d; }
.aviso strong { font-weight: 600; }
.aviso a { color: var(--azul-oscuro); cursor: pointer; text-decoration: underline; }

.error { background: #fdeceb; border: 1px solid #f3c7c4; color: var(--alerta); }
.confirmacion { margin: 0; background: #e7f5ed; border: 1px solid #b9e0ca; color: var(--ok); }

/* -------------------------------------------------------- listas y filtros */

.filtros {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 18px;
}

.filtros input[type="search"] { flex: 1; min-width: 240px; }

.filtros input {
  padding: 9px 11px;
  border: 1px solid var(--borde);
  border-radius: 7px;
  font-family: inherit;
  font-size: 15px;
}

.filtros input:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(63, 143, 207, .18); }
.filtros label { font-size: 13px; color: var(--suave); display: flex; align-items: center; gap: 6px; }

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

.tarjeta {
  background: var(--papel);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--azul);
  border-radius: 10px;
  padding: 14px 18px;
  cursor: pointer;
}

.tarjeta:hover { border-color: var(--azul); box-shadow: 0 2px 10px rgba(0, 0, 0, .07); }
.tarjeta.equipo { cursor: default; border-left-color: var(--grafito); }

.tarjeta .cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.tarjeta .numero { font-weight: 700; color: var(--azul-oscuro); }
.tarjeta .fecha { font-size: 13px; color: var(--suave); }
.tarjeta .principal-linea { margin: 5px 0 2px; font-weight: 600; color: var(--grafito); }
.tarjeta .detalle { font-size: 13px; color: var(--suave); }
.tarjeta .falla { font-size: 14px; margin-top: 6px; color: #4b5563; }

.marca-estado {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--fondo);
  color: var(--suave);
  white-space: nowrap;
}

.marca-estado.operativo { background: #e7f5ed; color: var(--ok); }
.marca-estado.atencion  { background: #fef4e5; color: #97590b; }
.marca-estado.detenido  { background: #fdeceb; color: var(--alerta); }

.sin-resultados { color: var(--suave); text-align: center; padding: 40px 0; }

.acciones-equipo { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }

.acciones-equipo button {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 7px;
  border: 1px solid var(--borde);
  background: #fff;
  color: var(--grafito);
  cursor: pointer;
}

.acciones-equipo button:hover { border-color: var(--azul); color: var(--azul-oscuro); }

.historial-equipo { margin-top: 12px; border-top: 1px solid var(--borde); padding-top: 10px; }
.historial-equipo .fila { display: flex; gap: 10px; padding: 5px 0; font-size: 13px; cursor: pointer; }
.historial-equipo .fila:hover { color: var(--azul-oscuro); }
.historial-equipo .fila b { color: var(--azul-oscuro); }

/* =========================================================== HOJA IMPRESA ==
   Se ve igual en pantalla y en papel, para que no haya sorpresas al imprimir. */

.acciones-orden { margin-bottom: 18px; }

.hoja {
  background: #fff;
  color: #000;
  padding: 16mm 14mm;
  margin: 0 auto;
  max-width: 210mm;
  border: 1px solid var(--borde);
  border-radius: 4px;
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 11.5pt;
  line-height: 1.4;
}

.hoja .encabezado {
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 2.5pt solid var(--azul);
  padding-bottom: 8px;
  margin-bottom: 14px;
}

.hoja .encabezado img { height: 19mm; }
.hoja .encabezado .centro { flex: 1; }
.hoja .encabezado h2 { margin: 0; font-size: 15pt; color: var(--grafito); letter-spacing: .3px; }
.hoja .encabezado p { margin: 2px 0 0; font-size: 9.5pt; color: #555; }

.hoja .folio { text-align: right; font-size: 10pt; line-height: 1.6; white-space: nowrap; }
.hoja .folio b { display: block; font-size: 13pt; color: var(--azul-oscuro); }

.hoja h3 {
  margin: 10px 0 5px;
  font-size: 9.5pt;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: #fff;
  background: var(--grafito);
  padding: 3px 9px;
  border-radius: 3px;
}

.hoja .datos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px 14px; }
.hoja .dato { border-bottom: .6pt solid #c8ced6; padding-bottom: 2px; min-height: 26px; }
.hoja .dato.ancho2 { grid-column: span 2; }
.hoja .dato .rotulo { display: block; font-size: 7.5pt; text-transform: uppercase; letter-spacing: .4px; color: #6b7280; }
.hoja .dato .valor { font-size: 11pt; }

.hoja .bloque {
  border: .6pt solid #c8ced6;
  border-radius: 3px;
  padding: 6px 10px;
  min-height: 40px;
  white-space: pre-wrap;
  font-size: 10.5pt;
}

.hoja table.repuestos { width: 100%; border-collapse: collapse; font-size: 10.5pt; }
.hoja table.repuestos th, .hoja table.repuestos td { border: .6pt solid #c8ced6; padding: 4px 8px; text-align: left; }
.hoja table.repuestos th { background: #eef2f6; font-size: 9pt; text-transform: uppercase; letter-spacing: .3px; }
.hoja table.repuestos td.cantidad, .hoja table.repuestos th.cantidad { width: 80px; text-align: center; }

.hoja .estado-final { font-weight: 700; }

.hoja .firma-zona {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.hoja .firma-caja { width: 74mm; text-align: center; }
.hoja .firma-caja img { display: block; width: 100%; height: 30mm; object-fit: contain; }
.hoja .firma-caja .linea { border-top: .8pt solid #000; margin-top: 2px; padding-top: 4px; }
.hoja .firma-caja .nombre { font-weight: 600; font-size: 11pt; }
.hoja .firma-caja .cargo { font-size: 9pt; color: #555; }

.hoja .pie {
  margin-top: 16px;
  border-top: .6pt solid #c8ced6;
  padding-top: 5px;
  font-size: 8pt;
  color: #6b7280;
  display: flex;
  justify-content: space-between;
}

/* ------------------------------------------------------------- impresión */

@media print {
  @page { size: A4; margin: 10mm; }

  body { background: #fff; }
  .barra, .filtros, .acciones, .error, #panel-edicion, #pm-panel,
  #vista-nueva, #vista-historial, #vista-equipos, #vista-usuarios,
  #vista-preventiva, #vista-nueva-pm, #vista-protocolos,
  .confirmacion { display: none !important; }
  main { max-width: none; margin: 0; padding: 0; }

  .hoja {
    border: none;
    border-radius: 0;
    padding: 0;
    max-width: none;
    font-size: 10.5pt;
  }

  .hoja .bloque { break-inside: avoid; }
  .hoja table.repuestos tr { break-inside: avoid; }
  .hoja h3 { break-after: avoid; }
  .hoja .firma-zona { break-inside: avoid; }

  /* Hoja en blanco del protocolo: el cierre no se parte, así la firma nunca
     queda sola en una página (ver dibujarHojaProtocolo). */
  .hoja.vacia .cierre { break-inside: avoid; page-break-inside: avoid; }
  .hoja.vacia .firma-zona { break-before: avoid; page-break-before: avoid; }
}

/* La orden de una preventiva: dice de qué mantención es y lleva a ella. */
.aviso-orden-pm {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin: 0 0 14px; padding: 10px 14px; border-radius: 8px;
  background: #eef5fb; border: 1px solid #c9dff1;
}
@media print { .aviso-orden-pm { display: none; } }

/* ------------------------------------------------------ pantallas angostas */

@media (max-width: 700px) {
  .rejilla { grid-template-columns: repeat(2, 1fr); }
  .campo.ancho2 { grid-column: span 2; }
  .hoja .datos { grid-template-columns: repeat(2, 1fr); }
  .barra { padding: 10px 14px; }
  main { padding: 18px 12px 60px; }
}

/* Órdenes firmadas que todavía no llegaron al servidor. En ámbar y no en rojo:
   no hay nada roto, hay trabajo a salvo esperando señal. */
.pendientes {
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid #e0c067;
  border-left: 5px solid #d99a00;
  border-radius: 10px;
  background: #fffbea;
}

.pendientes-titulo { margin: 0 0 10px; }
.pendientes-titulo b { display: block; font-size: 16px; color: #7a5c00; }
.pendientes-titulo span { font-size: 13.5px; color: #7a6230; }

.pendiente-fila {
  padding: 8px 0;
  border-top: 1px solid #efe0b4;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pendiente-fila .cuando { font-size: 13px; color: var(--suave); }
.acciones-pendientes { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }

/* ==================================================== MODO TERRENO (teléfono)

   Quien ejecuta el trabajo lo hace de pie, con una mano, delante de la máquina.
   En esa pantalla la aplicación del escritorio pesa: la cabecera con seis
   pestañas se comía 253 px de 812 -un tercio- y el formulario de la orden son
   34 campos en casi cinco pantallas de scroll.

   El modo terreno no es otra aplicación ni otra plantilla: es la misma, con la
   cabecera plegada, las pestañas tras un menú y el formulario repartido en tres
   pasos. Se enciende solo -pantalla angosta y perfil de técnico- y nada de esto
   toca al computador, donde todo sigue como estaba.

   Todas las reglas cuelgan de "body.terreno". Sin esa clase, este bloque entero
   no existe. */

.boton-menu, .pasos, .pasos-ir, .nueva-en-terreno, .abrir-filtros { display: none; }

/* En el computador el envoltorio de los filtros finos no debe existir para el
   flex de .filtros: "contents" lo hace transparente y la fila queda igual. */
.filtros-finos { display: contents; }

body.terreno .boton-menu,
body.terreno .nueva-en-terreno,
body.terreno .abrir-filtros { display: block; }

/* --- la cabecera: de 253 px a 56 */

body.terreno .barra {
  gap: 10px;
  padding: 6px 12px;
  flex-wrap: nowrap;
}

body.terreno .barra .logo { height: 34px; }
body.terreno .barra .titulo { min-width: 0; }
body.terreno .titulo h1 { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.terreno .titulo p { display: none; }
body.terreno .usuario-barra .perfil { display: none; }
body.terreno .chip-usuario { padding: 4px 8px; font-size: 13px; }

/* Salir se muda al menú (ver aplicarTerreno): abajo del todo, separado, para
   que no se pulse por error al buscar una pestaña. */
body.terreno .pestanas #salir {
  order: 3;
  margin-top: 8px;
  padding: 13px 14px;
  text-align: left;
}

.boton-menu {
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: var(--papel);
  width: 42px;
  height: 38px;
  flex: 0 0 auto;
  cursor: pointer;
  padding: 0;
}

/* Tres rayas con una sola caja: la del medio es el fondo, las otras dos van de
   sombra. Menos marcas que un icono y escala igual. */
.boton-menu .rayas,
.boton-menu .rayas::before,
.boton-menu .rayas::after {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--grafito);
  border-radius: 2px;
}

.boton-menu .rayas { margin: 0 auto; position: relative; }
.boton-menu .rayas::before,
.boton-menu .rayas::after { content: ""; position: absolute; left: 0; }
.boton-menu .rayas::before { top: -6px; }
.boton-menu .rayas::after  { top: 6px; }
.boton-menu[aria-expanded="true"] { background: var(--azul); border-color: var(--azul); }
.boton-menu[aria-expanded="true"] .rayas,
.boton-menu[aria-expanded="true"] .rayas::before,
.boton-menu[aria-expanded="true"] .rayas::after { background: #fff; }

/* --- las pestañas, plegadas tras el menú */

body.terreno .pestanas {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  gap: 0;
  background: var(--papel);
  border-bottom: 3px solid var(--azul);
  box-shadow: 0 8px 16px rgba(0, 0, 0, .12);
  padding: 6px;
}

body.terreno .barra { position: sticky; }
body.terreno .pestanas.abierta { display: flex; }

body.terreno .pestanas button {
  text-align: left;
  padding: 13px 14px;
  border-radius: 8px;
  font-size: 16px;
}

/* Resumen y Protocolos son de consulta, no de terreno: siguen estando, pero
   bajan al final, tras una linea y en gris, para que no compitan con el
   trabajo. El "order" las manda abajo sin tocar el orden del HTML, que es el
   que vale en el computador. */
body.terreno .pestanas button[data-terreno="secundaria"] {
  order: 2;
  color: var(--suave);
  font-weight: 400;
  border-top: 1px solid var(--borde);
  margin-top: 6px;
  padding-top: 14px;
}

/* La linea separa el grupo, asi que solo la lleva el primero: al segundo se la
   quita el que venga antes que el. */
body.terreno .pestanas button[data-terreno="secundaria"] ~ button[data-terreno="secundaria"] {
  border-top: 0;
  margin-top: 0;
  padding-top: 13px;
}

/* --- el historial: lo que el técnico ve al entrar */

.nueva-en-terreno {
  width: 100%;
  margin-bottom: 14px;
  padding: 15px;
  font-size: 17px;
}

body.terreno .filtros { gap: 8px; padding: 10px 12px; }
body.terreno .filtros #buscar-orden { flex: 1; min-width: 0; }
body.terreno .filtros-finos { display: none; }
body.terreno .filtros-finos.abierta { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; }

/* El nombre del técnico en cada tarjeta es siempre el mismo -el suyo- y en una
   pantalla angosta roba la linea entera. */
body.terreno .tarjeta .detalle .quien { display: none; }

/* --- el formulario, en tres pasos */

body.terreno .pasos { display: block; margin-bottom: 14px; }
body.terreno .pasos-ir { display: flex; gap: 10px; margin-top: 18px; }
body.terreno .pasos-ir button { flex: 1; padding: 15px; font-size: 16px; }

.pasos-donde { margin: 0 0 8px; font-size: 14px; color: var(--suave); }
.pasos-donde b { color: var(--grafito); }
.pasos-donde span { text-transform: uppercase; letter-spacing: .04em; font-size: 13px; }

.pasos-puntos { display: flex; gap: 6px; }
.pasos-puntos span {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--borde);
}
.pasos-puntos span.activo { background: var(--azul); }

/* Lo que no es del paso en curso no se ve. Se esconde y nunca se fuerza a
   mostrar: así cada sección conserva su display propio y una que el perfil no
   puede usar sigue oculta aunque sea de su paso (.oculta manda sobre esto).

   La regla va por "data-paso": si mañana alguien agrega una sección y no le
   pone paso, no desaparece en el teléfono de un técnico, salta en la prueba. */
body.terreno #formulario.paso-1 [data-paso]:not([data-paso="1"]),
body.terreno #formulario.paso-2 [data-paso]:not([data-paso="2"]),
body.terreno #formulario.paso-3 [data-paso]:not([data-paso="3"]) { display: none; }

/* En el primero no hay nada atrás, y el último guarda en vez de seguir. */
body.terreno #formulario.paso-1 #paso-atras,
body.terreno #formulario.paso-3 #paso-siguiente { display: none; }
body.terreno #formulario.paso-3 .pasos-ir { margin-top: 10px; }

/* Los datos del equipo se ven en modo lectura hasta pulsar "Editar datos". */
.tarjeta.equipo input:disabled { background: var(--fondo); color: var(--texto); cursor: default; }

/* ============================================ ESTADO DE LA ORDEN Y CORRECCIÓN */

.etiqueta-grupo {
  margin: 16px 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--suave);
}

.etiqueta-grupo small { font-weight: 400; }

.filtros select {
  padding: 9px 11px;
  border: 1px solid var(--borde);
  border-radius: 7px;
  font-family: inherit;
  font-size: 15px;
  background: #fff;
  color: var(--texto);
}

.filtros select:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(63, 143, 207, .18); }

/* Desplegable con forma de etiqueta, para cambiar el estado desde la lista. */

.avance-pill {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: 20px;
  padding: 3px 8px;
  cursor: pointer;
  background: var(--fondo);
  color: var(--suave);
  appearance: none;
  text-align: center;
}

.avance-pill:hover { border-color: currentColor; }
.avance-pill.abierta { background: #eaf2fb; color: var(--azul-oscuro); }
.avance-pill.proceso { background: #fef4e5; color: #97590b; }
.avance-pill.cerrada { background: #eef1f4; color: var(--suave); }
.avance-pill.anulada { background: #fdeceb; color: var(--alerta); }

.avance-rapido {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-size: 13px;
  color: var(--suave);
  font-weight: 500;
}

.avance-rapido select {
  padding: 9px 12px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  background: #fff;
  color: var(--grafito);
  cursor: pointer;
}

.avance-rapido select:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(63, 143, 207, .18); }

/* --------------------------------------------------------- panel de corrección */

.panel {
  background: var(--papel);
  border: 1px solid var(--borde);
  border-top: 4px solid var(--azul);
  border-radius: 10px;
  padding: 18px 22px 22px;
  margin-bottom: 18px;
}

.panel-cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.panel-cabecera h2 { margin: 0; font-size: 17px; color: var(--grafito); }
.panel-cabecera h2 span { color: var(--azul-oscuro); }

.panel-nota { margin: 6px 0 16px; font-size: 13px; color: var(--suave); }

.guardado { font-size: 13px; font-weight: 600; color: var(--suave); min-height: 18px; }
.guardado.ok { color: var(--ok); }
.guardado.mal { color: var(--alerta); }

.panel .tabla-repuestos { margin-top: 6px; }

/* ------------------------------------------------------- registro de cambios */

.registro:not(:empty) {
  margin-top: 20px;
  border-top: 1px solid var(--borde);
  padding-top: 12px;
}

.registro h3 {
  margin: 0 0 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--suave);
}

.cambio {
  display: flex;
  gap: 12px;
  font-size: 13px;
  color: #4b5563;
  padding: 4px 0;
  border-bottom: 1px dotted var(--borde);
}

.cambio:last-child { border-bottom: none; }
.cambio .momento { color: var(--suave); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cambio s { color: var(--suave); }

/* ------------------------------------------------- sello de orden anulada */

.hoja .sello-anulada {
  display: inline-block;
  margin-top: 4px;
  border: 2pt solid var(--alerta);
  color: var(--alerta);
  border-radius: 3px;
  padding: 1px 8px;
  font-size: 12pt;
  font-weight: 700;
  letter-spacing: 2px;
}

@media (max-width: 700px) {
  .avance-rapido { margin-left: 0; }
}

/* Aviso de servidor desactualizado: arriba de todo, imposible de no ver. */

.aviso-version {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #fdeceb;
  border-bottom: 2px solid var(--alerta);
  color: var(--alerta);
  font-weight: 600;
  text-align: center;
  padding: 12px 20px;
}

#e-error button { margin-left: 10px; padding: 6px 14px; font-size: 13px; }

@media print { .aviso-version { display: none !important; } }

/* Guardado explicito: el panel avisa cuando queda algo sin grabar. */

.guardado.pendiente { color: #97590b; }

.acciones-panel {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--borde);
}

.acciones-panel button:disabled {
  opacity: .45;
  cursor: default;
  box-shadow: none;
}

.acciones-panel button.principal:disabled { background: var(--azul); }
.acciones-panel button.secundario:disabled { border-color: var(--borde); color: var(--suave); }

/* ====================================================== ACCESO Y USUARIOS == */

.acceso {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 20px;
}

.tarjeta-acceso {
  background: var(--papel);
  border: 1px solid var(--borde);
  border-top: 4px solid var(--azul);
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .08);
  padding: 30px 32px 28px;
  width: 100%;
  max-width: 400px;
}

.tarjeta-acceso .logo-acceso { display: block; height: 76px; margin: 0 auto 14px; }
.tarjeta-acceso h1 { margin: 0; font-size: 19px; text-align: center; color: var(--grafito); }
.tarjeta-acceso h2 { margin: 0 0 16px; font-size: 18px; color: var(--grafito); }
.tarjeta-acceso p { margin: 6px 0 20px; font-size: 14px; color: var(--suave); text-align: center; }
.tarjeta-acceso .campo { margin-bottom: 14px; }
.tarjeta-acceso button.principal { width: 100%; margin-top: 6px; }
.tarjeta-acceso .acciones button.principal { width: auto; margin-top: 0; }

/* Capa para cambiar la contraseña propia */

.capa {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(34, 38, 43, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* Quién tiene la sesión abierta */

.usuario-barra { display: flex; align-items: center; gap: 10px; }

.chip-usuario {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  border: 1px solid var(--borde);
  background: var(--papel);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.25;
}

.chip-usuario:hover { border-color: var(--azul); }
.chip-usuario span:first-child { font-size: 13px; font-weight: 600; color: var(--grafito); }
.chip-usuario .perfil { font-size: 11px; color: var(--suave); text-transform: uppercase; letter-spacing: .4px; }

.usuario-barra button.secundario { padding: 9px 16px; font-size: 14px; }

/* Lista de usuarios */

.nota-usuarios { flex: 1; margin: 0; font-size: 13px; color: var(--suave); min-width: 240px; }

.tarjeta.usuario { cursor: default; border-left-color: var(--grafito); }
.tarjeta.usuario.inactivo { opacity: .65; border-left-color: var(--suave); }
.tarjeta.usuario input:disabled, .tarjeta.usuario select:disabled {
  background: var(--fondo);
  color: var(--texto);
  cursor: default;
}

.tarjeta.usuario select {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 9px 11px;
  border: 1px solid var(--borde);
  border-radius: 7px;
  font-family: inherit;
  font-size: 15px;
  background: #fff;
  color: var(--texto);
}

.casilla { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; }

.caja-clave { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }

.caja-clave input {
  padding: 8px 11px;
  border: 1px solid var(--borde);
  border-radius: 7px;
  font-family: inherit;
  font-size: 15px;
  min-width: 240px;
}

.caja-clave button {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 7px;
  border: 1px solid var(--azul);
  background: var(--azul);
  color: #fff;
  cursor: pointer;
}

.caja-clave .aviso-clave { font-size: 13px; color: var(--alerta); }

#nuevo-usuario select {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 9px 11px;
  border: 1px solid var(--borde);
  border-radius: 7px;
  font-family: inherit;
  font-size: 15px;
  background: #fff;
}

@media print {
  .acceso, .capa, .usuario-barra, #vista-usuarios { display: none !important; }
}

/* ============================================ CATÁLOGO: ALTA E IMPORTACIÓN == */

.acciones-catalogo { display: flex; gap: 10px; flex-wrap: wrap; }

.acciones-catalogo button.principal,
.acciones-catalogo button.secundario { padding: 9px 16px; font-size: 14px; }

#archivo-equipos {
  display: block;
  width: 100%;
  padding: 14px;
  border: 1px dashed #c2c9d2;
  border-radius: 10px;
  background: #fcfdfe;
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
}

#archivo-equipos::file-selector-button {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 16px;
  margin-right: 14px;
  border-radius: 7px;
  border: 1px solid var(--borde);
  background: #fff;
  color: var(--grafito);
  cursor: pointer;
}

#archivo-equipos::file-selector-button:hover { border-color: var(--azul); color: var(--azul-oscuro); }

.resumen {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(63, 143, 207, .35);
  background: rgba(63, 143, 207, .08);
  border-radius: 8px;
  font-size: 14px;
}

.resumen p { margin: 0; color: #24557d; font-size: 15px; }
.resumen .problemas { margin: 10px 0 0; padding-left: 20px; color: #97590b; }
.resumen .problemas li { margin: 3px 0; }

#aviso-equipos { margin-bottom: 18px; }

/* ================================================ CATÁLOGO PLEGABLE ======== */

.tarjeta.equipo { padding: 0; overflow: hidden; }

.cabeza-equipo {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 18px;
  border: none;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.cabeza-equipo:hover { background: var(--fondo); }
.cabeza-equipo:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }

/* Triángulo dibujado con bordes: gira al desplegar, sin imágenes ni fuentes. */
.flecha {
  flex: none;
  width: 0;
  height: 0;
  border-left: 7px solid var(--suave);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  transition: transform .15s ease;
}

.tarjeta.equipo.desplegada .flecha { transform: rotate(90deg); }
.tarjeta.equipo.desplegada .cabeza-equipo { background: var(--fondo); }

.cabeza-equipo .resumen-equipo { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.cabeza-equipo .numero {
  font-weight: 700;
  color: var(--azul-oscuro);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cabeza-equipo .detalle {
  font-size: 13px;
  color: var(--suave);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cabeza-equipo .marca-estado { flex: none; }

.detalle-equipo { padding: 4px 18px 16px; border-top: 1px solid var(--borde); }

@media (max-width: 700px) {
  .cabeza-equipo .detalle { white-space: normal; }
}

/* Borrar: la unica accion que destruye algo, separada y marcada en rojo. */

.acciones-equipo .peligro { margin-left: auto; border-color: #e6bdba; color: var(--alerta); }
.acciones-equipo .peligro:hover:not(:disabled) { background: #fdeceb; border-color: var(--alerta); color: var(--alerta); }

.acciones-equipo .peligro:disabled {
  opacity: .5;
  cursor: not-allowed;
  border-color: var(--borde);
  color: var(--suave);
  background: #fff;
}

@media (max-width: 700px) {
  .acciones-equipo .peligro { margin-left: 0; }
}

/* =====================================================================
   MANTENCIÓN PREVENTIVA
   La agenda, el formulario del protocolo y el editor de plantillas.
   ===================================================================== */

/* -------------------------------------------------- sub-pestañas de la vista */

.sub-pestanas {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--borde);
  padding-bottom: 10px;
  flex-wrap: wrap;
}

.sub-pestanas button[data-sub] {
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 7px 16px;
  font: inherit;
  font-size: 14px;
  color: var(--suave);
  cursor: pointer;
}

.sub-pestanas button[data-sub]:hover { background: var(--fondo); }

.sub-pestanas button[data-sub].activa {
  background: var(--azul);
  border-color: var(--azul);
  color: #fff;
  font-weight: 600;
}

.sub-pestanas .nueva-pm { margin-left: auto; }

/* ----------------------------------------------------------------- la agenda */

.resumen-agenda {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.contador {
  font-size: 13px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--fondo);
  color: var(--suave);
  border: 1px solid var(--borde);
}

.contador.vencida { background: #fdeceb; color: var(--alerta); border-color: #f3c6c3; }
.contador.pronto  { background: #fdf4e3; color: #97590b; border-color: #efdcb4; }
.contador.nunca   { background: #eef2f6; color: #4b5563; }
.contador.al-dia  { background: #e9f6ef; color: var(--ok); border-color: #c3e4d2; }

/* El color del borde izquierdo dice de un vistazo qué urge. */
.tarjeta.agenda { cursor: default; }
.tarjeta.agenda.vencida { border-left-color: var(--alerta); }
.tarjeta.agenda.pronto  { border-left-color: #c98a16; }
.tarjeta.agenda.nunca   { border-left-color: var(--suave); }
.tarjeta.agenda.al-dia  { border-left-color: var(--ok); }

.situacion {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 3px 10px;
  border-radius: 999px;
}

.situacion.vencida { background: #fdeceb; color: var(--alerta); }
.situacion.pronto  { background: #fdf4e3; color: #97590b; }
.situacion.nunca   { background: #eef2f6; color: #4b5563; }
.situacion.al-dia  { background: #e9f6ef; color: var(--ok); }

span.avance-pill { cursor: default; }

.chip {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--fondo);
  color: var(--suave);
  border: 1px solid var(--borde);
}

/* ------------------------------------------- el protocolo dentro del formulario */

.seccion-protocolo { margin-bottom: 18px; }

.nota-seccion {
  margin: -4px 0 10px;
  font-size: 13px;
  color: var(--suave);
  font-style: italic;
}

.tabla-protocolo {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.tabla-protocolo th,
.tabla-protocolo td {
  border: 1px solid var(--borde);
  padding: 5px 8px;
  text-align: left;
  vertical-align: middle;
}

.tabla-protocolo th {
  background: var(--fondo);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--suave);
  font-weight: 600;
}

.tabla-protocolo td.n {
  width: 54px;
  text-align: center;
  color: var(--suave);
  font-size: 13px;
}

.tabla-protocolo th.n { width: 54px; text-align: center; }
.tabla-protocolo th.col-veredicto,
.tabla-protocolo td.col-veredicto { width: 140px; }

.tabla-protocolo input,
.tabla-protocolo select {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 5px 6px;
  font: inherit;
  font-size: 14px;
  background: #fff;
  color: var(--texto);
}

.tabla-protocolo input:hover,
.tabla-protocolo select:hover { border-color: var(--borde); }

.tabla-protocolo input:focus,
.tabla-protocolo select:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(63, 143, 207, .18);
}

/* Marcado el resultado, la fila se tiñe: se ve de lejos lo que no aprueba. */
.tabla-protocolo select.veredicto[data-ruta] { font-weight: 600; }

.campo-texto {
  width: 100%;
  border: 1px solid var(--borde);
  border-radius: 6px;
  padding: 10px 12px;
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  resize: vertical;
}

.campo-texto:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(63, 143, 207, .18);
}

/* --------------------------------------------------- editor de protocolos */

.campo.ancho3 { grid-column: span 3; }
.campo.corto { max-width: 220px; }

.secciones-editor {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 14px;
}

.seccion-editor {
  border: 1px solid var(--borde);
  border-left: 4px solid var(--azul);
  border-radius: 6px;
  padding: 14px 16px;
  background: var(--fondo);
}

.cabeza-seccion {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.cabeza-seccion .tipo {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--azul-oscuro);
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

.titulo-seccion {
  flex: 1;
  min-width: 180px;
  border: 1px solid var(--borde);
  border-radius: 6px;
  padding: 7px 10px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--texto);
  background: #fff;
}

.titulo-seccion:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(63, 143, 207, .18);
}

.enlace {
  background: none;
  border: none;
  color: var(--azul-oscuro);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
}

.enlace:hover:not(:disabled) { background: #fff; text-decoration: underline; }
.enlace:disabled { color: var(--borde); cursor: default; }
.enlace.peligro { color: var(--alerta); }

.seccion-editor .campo textarea,
.seccion-editor .campo input { background: #fff; }

.columnas-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.columna-editor {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.columna-editor input[type="text"] {
  flex: 1;
  min-width: 160px;
  border: 1px solid var(--borde);
  border-radius: 6px;
  padding: 6px 10px;
  font: inherit;
  font-size: 14px;
  background: #fff;
}

.marcable {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--suave);
  white-space: nowrap;
}

.secciones-resumen {
  margin: 8px 0 0;
  padding-left: 20px;
  font-size: 13px;
  color: #4b5563;
}

.secciones-resumen li { margin-bottom: 2px; }
.secciones-resumen .cuantos { color: var(--suave); }

/* --------------------------------------------------- la hoja de preventiva */

.hoja .nota-hoja {
  margin: -2px 0 5px;
  font-size: 8.5pt;
  color: #555;
  font-style: italic;
}

.hoja td.veredicto {
  width: 86px;
  text-align: center;
  font-weight: 600;
  text-transform: capitalize;
  white-space: nowrap;
}

.hoja td.veredicto.no-aprueba { color: var(--alerta); }
.hoja td.veredicto.aprueba { color: var(--ok); }
.hoja td.veredicto.no-aplica { color: #777; font-weight: 400; }
.hoja td.n { width: 42px; text-align: center; color: #666; }
.hoja th.n { width: 42px; text-align: center; }

/* La hoja de preventiva lleva dos firmas, una en cada extremo. */
.hoja .firma-zona.dos { justify-content: space-between; }

/* La del cliente se deja en blanco: la pone a mano al recibir. */
.hoja .hueco-firma { height: 30mm; }

@media print {
  .sub-pestanas, .resumen-agenda { display: none; }
}

/* ----------------------------------- la hoja en blanco de un protocolo (PDF)

   El protocolo impreso sin llenar, para marcar con lápiz en terreno. Se parece
   a la hoja de una mantención hecha, pero con cuadros y espacios vacíos. */

.hoja .encabezado .equipo-hoja {
  font-size: 12pt;
  font-weight: 600;
  color: var(--azul-oscuro);
  margin-top: 3px;
}

/* Tres columnas angostas; el titulo va mas chico para que "No aprueba" quepa
   entero en vez de desbordarse sobre la columna de al lado. */
.hoja .marcar {
  width: 74px;
  text-align: center;
  white-space: nowrap;
}

.hoja th.marcar {
  font-size: 7pt;
  letter-spacing: 0;
  padding: 4px 2px;
}

.hoja td.marcar {
  font-size: 13pt;
  line-height: 1;
  color: #99a2ad;
}

/* Las celdas que se llenan a mano necesitan alto; si no, no cabe la letra. */
.hoja .para-escribir { height: 7.5mm; background: #fcfdfe; }
.hoja table.instrumentos td { height: 9mm; }
.hoja .bloque.alto { height: 24mm; }
.hoja.vacia .dato { min-height: 30px; }
.hoja .valor.opciones { font-size: 10pt; }

/* ------------------------------------------------------ recepcion conforme */

/* Que una mantencion no este recibida es informacion, no un error: se marca
   sin alarmar, pero se ve. */
.detalle .pendiente {
  color: #97590b;
  font-weight: 600;
}

.hoja .bloque.pendiente-recepcion {
  color: #8a5a10;
  border-style: dashed;
  font-style: italic;
}

#pm-recepcion-edicion [data-pm]:disabled,
#pm-e-conformidades input:disabled + span { opacity: .7; }

#pm-firma-hecha { margin-top: 10px; }

/* --------------------------------------------- como sale la hoja impresa

   El encabezado con la fecha y el pie con la direccion y el numero de pagina
   los pone el navegador en el margen del papel. No hay CSS que los quite: se
   desmarcan en el dialogo de impresion, y el navegador lo recuerda. Este aviso
   esta para que no haya que adivinarlo. */

.aviso-impresion {
  margin: -8px 0 18px;
  padding: 10px 14px;
  background: #fdf7e8;
  border: 1px solid #efdcb4;
  border-left: 4px solid #c98a16;
  border-radius: 8px;
  font-size: 13px;
  color: #6b5320;
  line-height: 1.45;
}

@media print {
  .aviso-impresion { display: none !important; }
}

/* -------------------------------------- historial de un equipo, todo junto

   Correctivas y preventivas en la misma lista. La etiqueta de la izquierda es
   lo que permite distinguirlas de un vistazo al recorrerla. */

.historial-equipo .fila {
  display: grid;
  grid-template-columns: 54px 110px 90px auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 7px 10px;
  border-bottom: 1px solid var(--borde);
  font-size: 13px;
  cursor: pointer;
}

.historial-equipo .fila:last-child { border-bottom: none; }
.historial-equipo .fila:hover { background: var(--fondo); }

.tipo-accion {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  text-align: center;
  padding: 3px 0;
  border-radius: 4px;
}

.tipo-accion.correctiva { background: #fdeceb; color: var(--alerta); }
.tipo-accion.preventiva { background: #e9f1fa; color: var(--azul-oscuro); }

.historial-equipo .cuando { color: var(--suave); font-variant-numeric: tabular-nums; }
.historial-equipo .que { color: #4b5563; }

@media (max-width: 700px) {
  .historial-equipo .fila { grid-template-columns: 54px 1fr; }
  .historial-equipo .cuando { grid-column: 2; }
}

/* ===================================================================== RESUMEN

   Sobrio a proposito: el resumen se mira de reojo varias veces al dia, asi que
   manda el numero. Sin cajas, sin subtitulos y con color solo donde hay algo
   que hacer; un cero se queda en gris. */

.cabecera-resumen {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}

.cabecera-resumen h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  color: var(--grafito);
}

.cabecera-resumen button {
  margin-left: auto;
  padding: 5px 12px;
  font-size: 12px;
  border: none;
  background: none;
  color: var(--suave);
}

.cabecera-resumen button:hover { color: var(--azul-oscuro); text-decoration: underline; }

/* ------------------------------------------------------------ las cifras */

.tarjetas-resumen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0;
  margin-bottom: 34px;
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
}

.indicador {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: left;
  font: inherit;
  background: none;
  border: none;
  border-left: 1px solid var(--borde);
  border-radius: 0;
  padding: 16px 18px;
  cursor: pointer;
}

.indicador:first-child { border-left: none; }
.indicador:hover { background: var(--papel); }

.indicador .cifra {
  font-size: 32px;
  font-weight: 300;
  line-height: 1.05;
  color: var(--suave);
  font-variant-numeric: tabular-nums;
}

.indicador .titulo { font-size: 13px; color: var(--suave); }

/* Solo se enciende lo que pide hacer algo. */
.indicador.alerta .cifra { color: var(--alerta); font-weight: 400; }
.indicador.aviso .cifra { color: #97590b; font-weight: 400; }

/* ------------------------------------------------------------ las listas */

.columnas-resumen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 30px 44px;
  margin-bottom: 34px;
}

.panel-resumen { background: none; border: none; border-radius: 0; padding: 0; }

.panel-resumen h3 {
  margin: 0 0 2px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--suave);
  font-weight: 600;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--borde);
}

.panel-resumen .nada { color: var(--suave); font-size: 13px; margin: 12px 0 0; }

.fila-resumen {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "marca principal cuando" "marca detalle cuando";
  gap: 1px 10px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--fondo);
  cursor: pointer;
}

.fila-resumen:last-child { border-bottom: none; }
.fila-resumen:hover .principal-linea { color: var(--azul-oscuro); }
.fila-resumen > :first-child { grid-area: marca; max-width: 130px; }
.fila-resumen .principal-linea {
  grid-area: principal;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  min-width: 0;
}
.fila-resumen .detalle { grid-area: detalle; font-size: 12px; }
.fila-resumen .cuando {
  grid-area: cuando;
  font-size: 12px;
  color: var(--suave);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Las etiquetas de la izquierda, mas discretas que en las listas grandes. */
.fila-resumen .marca-estado,
.fila-resumen .situacion,
.fila-resumen .avance-pill,
.fila-resumen .tipo-accion {
  font-size: 10px;
  padding: 2px 7px;
  font-weight: 600;
}

.ver-resto {
  background: none;
  border: none;
  font: inherit;
  font-size: 12px;
  color: var(--azul-oscuro);
  cursor: pointer;
  padding: 10px 0 0;
}

.ver-resto:hover { text-decoration: underline; }

/* ----------------------------------------------------------- el grafico */

.panel-resumen.ancho { margin-bottom: 24px; }

.grafico .leyenda {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: var(--suave);
  margin: 10px 0 14px;
}

.grafico .muestra {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-right: 5px;
}

.muestra.correctiva, .barra.correctiva { background: var(--azul); }
.muestra.preventiva, .barra.preventiva { background: #9bb8a9; }

.grafico .barras {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 18px;
  align-items: end;
  height: 110px;
}

.grafico .mes {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
  gap: 6px;
}

.grafico .par {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  width: 100%;
  height: 100%;
}

/* Una barra en cero sigue dejando su linea, para que el mes no desaparezca. */
.grafico .barra {
  width: 16px;
  min-height: 2px;
  border-radius: 2px 2px 0 0;
  position: relative;
  opacity: .85;
}

.grafico .barra span {
  position: absolute;
  top: -15px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 10px;
  color: var(--suave);
}

.grafico .etiqueta { font-size: 11px; color: var(--suave); }

@media print {
  #vista-resumen { display: none !important; }
}

/* ===================================================================== EMPRESA

   La ficha de quien instala la aplicacion. Solo la ve el propietario. */

.campo.ancho4 { grid-column: 1 / -1; }

.zona-logo {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

/* El cuadro a cuadros deja ver si el PNG tiene fondo transparente de verdad. */
.vista-logo {
  height: 72px;
  max-width: 260px;
  object-fit: contain;
  padding: 8px 12px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #eef1f4 25%, transparent 25%, transparent 75%, #eef1f4 75%),
    linear-gradient(45deg, #eef1f4 25%, transparent 25%, transparent 75%, #eef1f4 75%);
  background-size: 14px 14px;
  background-position: 0 0, 7px 7px;
}

.elige-color {
  height: 42px;
  padding: 3px;
  cursor: pointer;
}

#formulario-empresa .detalle { margin: 4px 0 0; font-size: 12px; }
#formulario-empresa .acciones { align-items: center; gap: 12px; }

/* ------------------------------------------------------------ llaves de API */

.panel-llaves {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--borde);
}

.panel-llaves .cabecera-resumen button { margin-left: auto; }
.panel-llaves .detalle { margin: 0 0 16px; }
.panel-llaves .lista { margin-top: 16px; }

.interruptor { margin-bottom: 10px; font-size: 14px; color: var(--texto); }

/* La llave recien creada se ve entera una sola vez: que se lea bien. */
.caja-llave {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 18px;
}

.caja-llave code {
  flex: 1;
  font-family: Consolas, "Courier New", monospace;
  font-size: 14px;
  word-break: break-all;
  user-select: all;
}

.detalle code {
  font-family: Consolas, "Courier New", monospace;
  background: var(--fondo);
  padding: 1px 5px;
  border-radius: 4px;
}

/* ------------------------------------------------------- envío al cliente */

.caja-envio {
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 18px;
}

.caja-envio h3 {
  margin: 0 0 12px;
  font-size: 15px;
  color: var(--grafito);
}

.rejilla-envio {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(240px, 1.4fr);
  gap: 14px;
  margin-bottom: 12px;
}

/* En un teléfono las dos columnas no caben: la dirección es lo primero. */
@media (max-width: 700px) {
  .rejilla-envio { grid-template-columns: 1fr; }
}

.pista-correo {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--atencion);
}

.casilla-envio {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--grafito);
}

.casilla-envio input { width: auto; }

.estado-envio { font-size: 13px; color: var(--suave); }
.estado-envio.bien { color: var(--ok); }
.estado-envio.mal { color: var(--alerta); }
.estado-envio.a-medias { color: var(--atencion); }
.un-envio.a-medias .como { color: var(--atencion); }

/* Guardado pero sin enviar: ni verde ni rojo, porque son las dos cosas a la vez. */
.confirmacion.a-medias {
  background: #fff6e5;
  border-color: #f0d9a8;
  color: var(--atencion);
}

.historial-envios { margin-top: 12px; }

.un-envio {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 6px 0;
  font-size: 13px;
  border-top: 1px solid var(--borde);
}

.un-envio .cuando { color: var(--suave); min-width: 130px; }
.un-envio .a-quien { color: var(--grafito); }
.un-envio.bien .como { color: var(--ok); }
.un-envio.mal .como { color: var(--alerta); }

/* En la hoja impresa nada de esto existe. */
@media print {
  .caja-envio { display: none !important; }
}

/* ------------------------------------------- equipo dado de baja */

/* Se ve a simple vista que esta retirado, pero sigue legible: su historial es
   lo unico que queda de ese equipo y hay que poder leerlo. */
.tarjeta.equipo.de-baja .resumen-equipo .numero {
  text-decoration: line-through;
  color: var(--suave);
}

.tarjeta.equipo.de-baja { background: #fafafa; }

.sello-baja {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--suave);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}

.aviso-baja {
  margin: 0 0 12px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--atencion);
  background: #fff6e5;
  border: 1px solid #f0d9a8;
  border-radius: 8px;
}

/* El aviso del equipo es azul: informativo. Cuando el equipo esta dado de baja
   el mismo recuadro cambia de color, que es lo que distingue "para tu
   informacion" de "mira esto antes de seguir". */
.aviso.aviso-con-baja {
  background: #fff6e5;
  border-color: #f0d9a8;
  color: var(--atencion);
}

.aviso.aviso-con-baja b,
.aviso.aviso-con-baja strong { color: var(--atencion); }

/* ------------------------------------- vista previa al importar protocolos */

/* Cada protocolo que se va a crear, con los titulos de sus secciones. Es lo
   unico que permite ver que el corte quedo bien antes de guardarlo, asi que
   tiene que leerse sin esfuerzo. */
.protocolo-previo {
  margin: 12px 0;
  padding: 12px 14px;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: 8px;
}

.protocolo-previo p { margin: 0 0 6px; }
.protocolo-previo .detalle { font-size: 13px; color: var(--suave); }

.protocolo-previo .secciones-resumen {
  margin: 8px 0 0;
  padding-left: 22px;
  font-size: 13px;
  color: var(--grafito);
}

/* --------------------------------------------------- mantenimiento de la base */

/* En el resto de la aplicacion el rojo es un error. Aqui es una accion que no
   se deshace, y conviene que se note igual. Se usa --alerta, que ya es el rojo
   de la casa, en vez de inventar otro. */

.aviso-peligro {
  border-left: 4px solid var(--alerta);
  background: #fdeceb;
}

.acciones-salud .peligro {
  border-color: #e6bdba;
  color: var(--alerta);
}

.acciones-salud .peligro:hover:not(:disabled) {
  background: #fdeceb;
  border-color: var(--alerta);
}

/* En el telefono, el campo de fecha no encoge solo: trae un ancho minimo
   propio del navegador que desborda la rejilla y aparece scroll horizontal en
   toda la pagina. min-width: 0 es lo que deja que la celda se apriete. */

#vista-mantenimiento .rejilla .campo { min-width: 0; }
#vista-mantenimiento .rejilla input { min-width: 0; max-width: 100%; }

/* La pista bajo el campo: dice con que se reconoce lo que se va a borrar, y
   cambia con el tipo elegido. */

.pista-campo {
  display: block;
  margin-top: .2rem;
  font-size: .8rem;
  color: var(--suave);
  font-weight: 400;
}

.salud { display: grid; gap: .3rem; }

.salud.mal .dato-salud strong { color: var(--alerta); }

.dato-salud {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px dotted #ddd;
  padding: .25rem 0;
}

.conteos {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .6rem;
}

.conteo {
  background: #f1f1f1;
  border-radius: .6rem;
  padding: .1rem .5rem;
  font-size: .85rem;
}

.acciones-salud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin-top: .8rem;
}

.vista-previa {
  margin-top: .8rem;
  padding: .7rem .9rem;
  background: #fffdf5;
  border: 1px solid var(--atencion);
  border-radius: .5rem;
}

.vista-previa ul { margin: .4rem 0 0 1.1rem; }

.constancia {
  border-left: 3px solid #bbb;
  padding: .4rem .7rem;
  margin-bottom: .5rem;
  background: #fafafa;
}

.constancia-quien,
.constancia-resumen { font-size: .85rem; color: #555; }
.constancia-motivo { font-size: .9rem; font-style: italic; margin-top: .2rem; }

/* ------------------------------------------------- la aplicacion en el telefono */

/* Tres desbordes distintos a 375 px, encontrados midiendo cada vista. Los tres
   hacian que la PAGINA ENTERA se desplazara de lado, que es lo peor de los tres
   males: el titulo se va, los botones se van, y uno no sabe por que. */

@media (max-width: 700px) {

  /* 1. Empresa. La etiqueta del interruptor de red son 54 caracteres con
     white-space: nowrap, asi que pedia 358 px dentro de un hueco de 307. El
     nowrap esta para que la casilla no se separe de su texto; en pantalla
     angosta pesa mas poder leerla, y la casilla se queda arriba alineada. */

  .marcable {
    white-space: normal;
    align-items: flex-start;
  }

  .marcable input { margin-top: 2px; }

  /* 2. Resumen. El grafico son doce meses con 18 px de separacion y barras de
     16: 420 px de barras mas 198 de huecos, en 351 disponibles. No se esconde
     ningun mes -el ano completo es el dato- sino que se aprieta. */

  .grafico .barras { gap: 6px; grid-auto-columns: minmax(0, 1fr); }
  .grafico .barra { width: 10px; }
  .grafico .par { gap: 2px; }

  /* 3. Las hojas para imprimir -la orden, la preventiva y el protocolo- miden
     lo que mide una hoja, y eso es correcto: son el documento que se firma y
     que se manda al cliente, no una pantalla. Encogerlas mentiria sobre lo que
     va a salir impreso. Lo que se arregla es que su ancho arrastre a la pagina:
     ahora la hoja se desplaza DENTRO de su marco y el resto se queda quieto.
     Va en la consulta de pantalla angosta, asi que la impresion no se entera. */

  .hoja {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Y la barra de acciones de esas hojas -Descargar PDF, Imprimir, Volver y el
     aviso de al lado- son 418 px en una fila que no parte. Es la misma barra en
     la orden, la preventiva y el protocolo, asi que esto arregla las tres. */

  .acciones-orden { flex-wrap: wrap; }
}

/* ------------------------------------------------ firma guardada e instrumentos */

/* La cuenta tiene ahora tres partes: que se pueda bajar por ellas en el telefono. */
.cuenta-paneles { display: grid; gap: 1rem; max-height: 92vh; overflow-y: auto;
                  padding: .2rem; width: min(560px, 100%); }
.cuenta-paneles .tarjeta-acceso { width: auto; margin: 0; }
.firma-guardada { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
                  border: 1px dashed var(--borde, #c9d1d9); border-radius: 10px;
                  padding: .6rem .8rem; margin-top: .4rem; }
.firma-guardada img, .firma-guardada-img { max-height: 90px; max-width: 100%;
                  background: #fff; border-radius: 6px; }
.instrumentos-filas { display: grid; gap: .35rem; }
.instrumentos-filas .fila { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: .35rem; }
.instrumentos-filas input { min-width: 0; }
@media (max-width: 560px) { .instrumentos-filas .fila { grid-template-columns: 1fr 1fr; } }
.extras-usuario { display: grid; gap: .4rem; margin-top: .6rem; padding-top: .6rem;
                  border-top: 1px solid var(--borde, #e3e8ed); }
.extras-usuario .detalle { color: #5d6873; font-size: .9rem; }
.auditoria { margin-top: .4rem; }
.regla-protocolo { display: block; margin-top: .2rem; color: var(--color, #2f6f8a); }