/* ══════════════════════════════════════════════════════════════════════
   Herramientas del administrador EN EL HOME (index.html).

   El gatillo, el menú y los avisos son los de admin.css; los modales, los
   primitivos de tarjeta-azul.css. Aquí solo va lo que en atender.html pone
   atender.css —que el Home no carga— y que el modal de "Borrar vuelo"
   necesita: los campos del formulario y los toasts. Mismos valores que allá,
   para que el modal se vea igual en las dos pantallas. Más el sitio del "⋯"
   dentro de la tarjeta del vuelo y la Consola de auditoría (al final).
   ══════════════════════════════════════════════════════════════════════ */

/* ── El "⋯" en la tarjeta ─────────────────────────────────────────────
   Al final de la fila "Últimos eventos": fuera de la tarjeta azul, así que
   no tapa su carrusel. El margen negativo evita que el círculo (26px) haga
   más alta la fila del título, que mide la mitad. */
.event-list-title.con-admin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.adm-gatillo-tarjeta { margin: -6px 0; }

/* ── Ficha del vuelo en el modal de borrado ───────────────────────── */
.adm-ficha-vuelo { display: flex; flex-direction: column; gap: 2px; }
.adm-ficha-numero {
  font-size: 18px;
  font-weight: 800;
  color: var(--on-surface);
  letter-spacing: 0.01em;
}
.adm-ficha-matricula { font-size: 14px; font-weight: 700; color: var(--on-surface-variant); }
.adm-ficha-extra { font-size: 12px; color: var(--outline); }

/* ── Campos (copia de atender.css) ────────────────────────────────── */
.adm-overlay .field { margin-bottom: 13px; }
.adm-overlay .field-label {
  display: block;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--on-surface-variant);
  margin-bottom: 5px;
}
.adm-overlay .field-req { color: var(--error); }
.adm-overlay .field textarea {
  width: 100%;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  padding: 11px 12px;
  font-family: inherit;
  font-size: 15px; /* 16px o menos dispara zoom en iOS; 15px+ es el límite cómodo */
  color: var(--on-surface);
  background: var(--surface-container-lowest);
  min-height: 44px;
  resize: vertical;
}
.adm-overlay .field textarea:focus { outline: 2px solid var(--primary); outline-offset: -1px; }
.adm-overlay .field-hint { font-size: 11px; color: var(--on-surface-variant); margin: 4px 0 0; }

/* ── Toasts (copia de atender.css) ────────────────────────────────── */
.toast-stack {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  border-radius: var(--radius-md);
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: var(--shadow-elevated);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  animation: op-sheet-in 0.16s ease-out;
  overflow-wrap: anywhere;
}
.toast.ok { background: var(--success-container); color: var(--on-success-container); }
.toast.error { background: var(--error-container); color: var(--on-error-container); }
.toast.info { background: var(--info-container); color: var(--on-info-container); }

/* En escritorio el aviso no ocupa todo el ancho: va centrado abajo. */
@media (min-width: 700px) {
  .toast-stack { left: 50%; right: auto; width: min(440px, calc(100vw - 24px)); transform: translateX(-50%); bottom: 24px; }
}

/* ══════════════════════════════════════════════════════════════════════
   CONSOLA DE AUDITORÍA (consola-auditoria.js)

   Tercera vista del selector, solo para el administrador. Las tarjetas son
   las .adm-aud de admin.css (las mismas del modal de auditoría del vuelo);
   aquí van los filtros, la línea del vuelo de cada tarjeta, los estados y
   "Cargar más".
   ══════════════════════════════════════════════════════════════════════ */

/* `display` propio en las dos: sin esto el [hidden] perdería contra él. */
.consola-view[hidden],
.view-switch-btn[hidden] { display: none; }

.consola-view {
  max-width: 960px;
  margin: 0 auto;
  /* Que "Cargar más" no quede debajo del botón Ayuda ni de la burbuja de la
     radio, que flotan abajo (48px + 16px de margen). */
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}

/* ── Filtros ──────────────────────────────────────────────────────────
   Una tarjeta blanca como las del Home. En escritorio, una fila: vuelo
   (el más usado) más ancho; en móvil se apilan y las dos fechas comparten
   renglón. */
.consola-filtros {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 0.9fr) minmax(330px, 1.5fr);
  align-items: end;
  gap: 10px 12px;
  padding: 14px 16px;
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.consola-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.consola-etiqueta {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--on-surface-variant);
}
.consola-pildora {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--outline-variant);
  border-radius: 999px;
  background: var(--surface-container-lowest);
  color: var(--outline);
}
.consola-pildora:focus-within { outline: 2px solid var(--primary); outline-offset: -1px; }
.consola-pildora .material-symbols-outlined { font-size: 18px; flex: none; }
.consola-pildora input,
.consola-pildora select {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  padding: 9px 0;
  font-family: inherit;
  font-size: 15px; /* 16px o menos dispara zoom en iOS; 15px+ es el límite cómodo */
  color: var(--on-surface);
}
.consola-pildora select { cursor: pointer; }
/* La fecha no lleva icono propio (el navegador pone el suyo): menos aire a
   los lados para que "dd/mm/aaaa" quepa entero. */
.consola-pildora:has(input[type='date']) { padding: 0 10px 0 12px; }
.consola-pildora input::placeholder { color: var(--outline); }
.consola-fechas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; min-width: 0; }

.consola-limpiar,
.consola-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid var(--outline-variant);
  border-radius: 999px;
  background: var(--surface-container-lowest);
  color: var(--primary);
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.consola-limpiar[hidden] { display: none; }
.consola-limpiar { grid-column: 1 / -1; justify-self: end; min-height: 32px; }
.consola-limpiar .material-symbols-outlined,
.consola-boton .material-symbols-outlined { font-size: 16px; }
.consola-limpiar:hover,
.consola-boton:hover:not(:disabled) { background: var(--surface-container-low); }
.consola-limpiar:focus-visible,
.consola-boton:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.consola-boton:disabled { opacity: 0.6; cursor: default; }

.consola-meta {
  margin: 14px 4px 8px;
  min-height: 1em;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--outline);
}
.consola-meta:empty { margin-bottom: 0; }

/* ── Lista ────────────────────────────────────────────────────────────
   Las tarjetas de admin.css, sobre fondo blanco y con la sombra de las del
   Home: aquí no van dentro de un modal sino sueltas sobre la página. */
.consola-lista .adm-aud { box-shadow: var(--shadow-card); padding: 12px 14px; }

/* La línea del vuelo: entre la cabecera y el usuario. */
.consola-vuelo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--on-surface-variant);
}
.consola-vuelo > .material-symbols-outlined { font-size: 16px; color: var(--outline); }
.consola-vuelo-ref {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  color: var(--primary);
  overflow-wrap: anywhere;
}
a.consola-vuelo-ref { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a.consola-vuelo-ref:hover { color: var(--primary-container); }
a.consola-vuelo-ref:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.consola-vuelo-ref.es-borrado { color: var(--on-surface-variant); }
.consola-marca-borrado {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--error-container);
  color: var(--on-error-container);
}
.consola-vuelo-flecha { color: var(--outline); font-weight: 700; }
.consola-vuelo-extra { font-size: 12px; color: var(--outline); overflow-wrap: anywhere; }

/* ── Estados: cargando, vacío, error ──────────────────────────────── */
.consola-estado {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 36px 16px;
  text-align: center;
  color: var(--on-surface-variant);
  background: var(--surface-container-lowest);
  border: 1px dashed var(--outline-variant);
  border-radius: var(--radius-lg);
  margin-top: 14px;
}
.consola-estado .material-symbols-outlined { font-size: 36px; color: var(--outline); }
.consola-estado p { margin: 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.consola-estado.es-error { border-color: var(--error); color: var(--error); }
.consola-estado.es-error .material-symbols-outlined { color: var(--error); }
.consola-estado.es-cargando .material-symbols-outlined { animation: consola-girar 1.4s linear infinite; }
@keyframes consola-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .consola-estado.es-cargando .material-symbols-outlined { animation: none; }
}

.consola-mas { display: flex; width: 100%; margin-top: 14px; min-height: 44px; }

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .consola-filtros { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .consola-campo-vuelo { grid-column: 1 / -1; }
  .consola-fechas { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .consola-filtros { grid-template-columns: minmax(0, 1fr); padding: 12px; gap: 10px; }
  .consola-lista .adm-aud { padding: 10px 12px; }
  /* Tres opciones en el selector a 320px: menos aire para que quepan las
     tres con su icono. */
  .view-switch-btn { padding: 6px 8px; gap: 4px; letter-spacing: 0.04em; }
}
/* A 320px las dos fechas lado a lado recortan "dd/mm/aaaa": una por renglón. */
@media (max-width: 345px) {
  .consola-fechas { grid-template-columns: minmax(0, 1fr); }
}