/* Estilos comunes · colores del logo de Grupo Automáticos Canarios */
:root {
  --azul: #1f2a6e;
  --azul-2: #2d3c94;
  --azul-claro: #e9ecf8;
  --oro: #c9a227;
  --oro-claro: #fbf3dc;
  --rojo: #c0392b;
  --rojo-claro: #fbe9e7;
  --verde: #1e8449;
  --verde-claro: #e3f4ea;
  --ambar: #b9770e;
  --ambar-claro: #fdf2e0;
  --texto: #1c2033;
  --gris: #6b7085;
  --borde: #dde0ea;
  --fondo: #f5f6fa;
  --blanco: #ffffff;
  --radio: 12px;
  --sombra: 0 2px 10px rgba(31, 42, 110, .08);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  color: var(--texto); background: var(--fondo); font-size: 16px; line-height: 1.4;
}
button, input, select, textarea { font: inherit; color: inherit; }
button {
  cursor: pointer; border: 1px solid var(--borde); background: var(--blanco);
  border-radius: 10px; padding: 10px 16px; font-weight: 600;
}
button:hover { border-color: var(--azul-2); }
button:disabled { opacity: .5; cursor: default; }
button.primario { background: var(--azul); color: #fff; border-color: var(--azul); }
button.primario:hover { background: var(--azul-2); }
button.peligro { background: var(--rojo); color: #fff; border-color: var(--rojo); }
button.enlace { border: none; background: none; color: var(--azul-2); padding: 4px 6px; text-decoration: underline; }
input, select, textarea {
  border: 1px solid var(--borde); border-radius: 10px; padding: 10px 12px; background: #fff; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--oro); border-color: var(--oro); }
label { display: block; font-weight: 600; font-size: 14px; margin: 10px 0 4px; color: var(--gris); }
.oculto { display: none !important; }
.tarjeta { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 18px; }
.etiqueta { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.e-cerrado { background: var(--verde-claro); color: var(--verde); }
.e-corregido { background: var(--azul-claro); color: var(--azul); }
.e-revisar { background: var(--ambar-claro); color: var(--ambar); }
.e-abierto { background: var(--oro-claro); color: #7a5f0c; }
.e-sin_salida { background: var(--rojo-claro); color: var(--rojo); }
.aviso { padding: 10px 14px; border-radius: 10px; background: var(--ambar-claro); color: #6b4a07; border: 1px solid #f0d9a8; }
.aviso.error { background: var(--rojo-claro); color: var(--rojo); border-color: #f2c4bd; }
.aviso.ok { background: var(--verde-claro); color: var(--verde); border-color: #bfe3cc; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--borde); vertical-align: top; }
th { font-size: 13px; color: var(--gris); font-weight: 600; background: #fafbfd; position: sticky; top: 0; }
.dni-oculto { -webkit-text-security: disc; text-security: disc; letter-spacing: 3px; }
.modal-fondo { position: fixed; inset: 0; background: rgba(20, 24, 50, .45); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; }
.modal { background: #fff; border-radius: 16px; max-width: 640px; width: 100%; max-height: 90vh; overflow: auto; padding: 22px; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.fila { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.fila > * { flex: 1 1 auto; }
.derecha { text-align: right; }
.gris { color: var(--gris); }
.pequeno { font-size: 13px; }