/* ============================================================================
   Sistema de Pantallas para Agencia de Autos — CSS base
   Variables de marca inyectadas dinámicamente por el servidor (header).
   Los módulos tienen su propio CSS separado.
   ========================================================================== */
:root {
  --marca-primario: #1d4ed8;
  --marca-secundario: #38bdf8;
  --fondo: #0f172a;
  --panel: #16233b;
  --texto: #e5edf8;
  --texto-suave: #94a8c3;
  --borde: rgba(148, 168, 195, .25);
  --tab-fila: #16223a;
  --tab-fila-alta: #1c2d4f;
  --ok: #34d399;
  --error: #f87171;
  --radio: 14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
}

body {
  background: var(--fondo);
  color: var(--texto);
  font-family: "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: clamp(14px, 1.1vw, 20px);
  overflow: hidden; /* Todo el contenido en pantalla: sin scroll (manual §1). */
}

a { color: var(--marca-secundario); }

h1, h2, h3 { font-weight: 600; }

/* Formularios generales ---------------------------------------------------- */
button, input, select, textarea {
  font: inherit;
  color: inherit;
}

input, select, textarea {
  background: rgba(9, 16, 35, .65);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: .55em .7em;
  width: 100%;
}

input[type="color"] { padding: .15em; width: 4.5em; height: 2.4em; }

textarea { min-height: 5em; resize: vertical; }

button, .boton {
  background: var(--marca-primario);
  border: 0;
  border-radius: 10px;
  color: var(--texto);
  padding: .55em 1.1em;
  cursor: pointer;
  font-size: 1em;
}

button:hover { filter: brightness(1.12); }

button:focus-visible {
  outline: 3px solid var(--marca-secundario);
  outline-offset: 2px;
}

button.secundario { background: rgba(148, 168, 195, .2); }
button.peligro { background: #b32620; }
button.activo-resaltado { background: var(--marca-secundario); color: #08101f; }

/* Avisos / mensajes -------------------------------------------------------- */
.aviso {
  border-radius: 10px;
  padding: .6em .9em;
  background: rgba(52, 211, 153, .15);
  border: 1px solid rgba(52, 211, 153, .45);
}

.aviso.error {
  background: rgba(248, 113, 113, .14);
  border-color: rgba(248, 113, 113, .5);
  color: #fecaca;
}

/* Páginas admin ------------------------------------------------------------ */
.admin {
  height: 100%;
  overflow: auto;
  padding: clamp(12px, 2vw, 28px);
}

.admin-h1 { font-size: 1.35em; margin-bottom: 1em; color: var(--texto); }

.caja {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: clamp(14px, 2vw, 26px);
}

/* Notificador flotante (JS) */
#notificador {
  position: fixed;
  bottom: 1.1em;
  right: 1.1em;
  z-index: 500;
  display: grid;
  gap: .5em;
  max-width: min(26em, 90vw);
}

#notificador .aviso { box-shadow: 0 8px 26px rgba(0, 0, 0, .45); }

/* Utilidad normalizada para pantallas de estado vacío */
.vacia {
  min-height: 100vh;
  display: grid;
  place-content: center;
  gap: .8em;
  text-align: center;
}