/* 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;
}

* { 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; }

.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; }
}

/* ------------------------------------------------------ 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; }
}

/* 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;
}