/* ============================================================
   tabla-accidentes.css — Buscador y tabla de accidentes aéreos
   pedrocarvalho.es · v2
   Tema oscuro por defecto; modo claro con html.ta-claro
   ============================================================ */

:root {
  --fondo: #202020;
  --fondo-alt: #282828;
  --fondo-panel: #2e2e2e;
  --fondo-cabecera: #181818;
  --fondo-hover: #33393d;
  --borde: #3a3a3a;
  --texto: #e6e6e6;
  --texto-suave: #9e9e9e;
  --acento: #009fd9;
  --acento-hover: #33b5e5;
  --verde: #4caf50;
  --amarillo: #ffc107;
  --naranja: #ff9800;
  --rojo: #f44336;
}

/* ---------- Modo claro ---------- */
:root.ta-claro {
  --fondo: #f4f4f4;
  --fondo-alt: #ffffff;
  --fondo-panel: #ffffff;
  --fondo-cabecera: #e6e6e6;
  --fondo-hover: #dcecf4;
  --borde: #d0d0d0;
  --texto: #1e1e1e;
  --texto-suave: #6a6a6a;
  --acento: #007bab;
  --acento-hover: #009fd9;
}

body { background: var(--fondo); }

.ta-contenedor {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px 48px;
  font-family: 'Roboto Mono', monospace;
  color: var(--texto);
}

.ta-contenedor h1,
.ta-contenedor h2 {
  font-family: 'Aldrich', sans-serif;
  color: var(--texto);
  letter-spacing: 0.5px;
}

.ta-intro { color: var(--texto-suave); line-height: 1.6; margin-bottom: 24px; }
.ta-intro a { color: var(--acento); }

/* ---------- Nav y footer (placeholder del sitio) ---------- */
.ta-nav {
  font-family: 'Roboto Mono', monospace;
  padding: 14px 16px;
  border-bottom: 1px solid var(--borde);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}
.ta-nav .marca {
  font-family: 'Aldrich', sans-serif;
  color: var(--texto);
  text-decoration: none;
  font-size: 1.1rem;
  margin-right: auto;
}
.ta-nav .marca span { color: var(--acento); }
.ta-nav a:not(.marca) { color: var(--texto-suave); text-decoration: none; font-size: 0.8rem; }
.ta-nav a:not(.marca):hover { color: var(--acento); }

.ta-footer {
  font-family: 'Roboto Mono', monospace;
  color: var(--texto-suave);
  text-align: center;
  font-size: 0.75rem;
  padding: 24px 16px;
  border-top: 1px solid var(--borde);
  max-width: 1200px;
  margin: 0 auto;
}
.ta-footer a { color: var(--acento); }

/* ---------- Panel de estadísticas ---------- */
.ta-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 24px 0;
}
.ta-stat {
  background: var(--fondo-panel);
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 14px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ta-stat .valor {
  font-family: 'Aldrich', sans-serif;
  font-size: 1.7rem;
  color: var(--acento);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.4rem;
  line-height: 1.1;
}

.ta-stat .etiqueta {
  font-size: 0.72rem;
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: 1px;
}
#st-categoria {
  font-size: 1rem;
}

/* ---------- Filtros ---------- */
.ta-filtros {
  background: var(--fondo-alt);
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.ta-filtros label {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--texto-suave);
  margin-bottom: 4px;
}
.ta-filtros input,
.ta-filtros select {
  width: 100%;
  box-sizing: border-box;
  background: var(--fondo);
  color: var(--texto);
  border: 1px solid var(--borde);
  border-radius: 5px;
  padding: 8px 10px;
  font-family: 'Roboto Mono', monospace;
  font-size: 0.85rem;
}
.ta-filtros input:focus,
.ta-filtros select:focus {
  outline: none;
  border-color: var(--acento);
}
.ta-busqueda { grid-column: 1 / -1; }

.ta-acciones {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 16px;
}
.ta-boton {
  background: transparent;
  color: var(--acento);
  border: 1px solid var(--acento);
  border-radius: 5px;
  padding: 8px 16px;
  font-family: 'Roboto Mono', monospace;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.ta-boton:hover { background: var(--acento); color: #fff; }
.ta-resultado-num { color: var(--texto-suave); font-size: 0.8rem; margin-left: auto; }

/* ---------- Tabla (escritorio), dos líneas por accidente ---------- */
.ta-tabla-envoltura {
  overflow-x: auto;
  border: 1px solid var(--borde);
  border-radius: 8px;
  max-height: 75vh;
  overflow-y: auto;
}
table.ta-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}
.ta-tabla thead th {
  position: sticky;
  top: 0;
  background: var(--fondo-cabecera);
  color: var(--acento);
  font-family: 'Aldrich', sans-serif;
  font-weight: normal;
  text-align: left;
  padding: 12px 10px;
  border-bottom: 2px solid var(--acento);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  z-index: 2;
}
.ta-tabla thead th .flecha { color: var(--texto-suave); font-size: 0.7rem; margin-left: 4px; }
.ta-tabla thead th.activa .flecha { color: var(--acento-hover); }

/* Cada accidente es un <tbody class="ta-grupo"> con dos <tr> */
.ta-grupo { cursor: pointer; }
.ta-grupo td {
  padding: 10px 10px 2px;
  vertical-align: top;
  line-height: 1.5;
}
.ta-grupo tr.linea2 td {
  padding: 2px 10px 12px;
  border-bottom: 1px solid var(--borde);
  color: var(--texto-suave);
  font-size: 0.78rem;
}
.ta-grupo:nth-of-type(even) tr { background: var(--fondo-alt); }
.ta-grupo:hover tr { background: var(--fondo-hover); }

.ta-vuelo a { color: var(--acento); text-decoration: none; font-weight: bold; }
.ta-vuelo a:hover { color: var(--acento-hover); text-decoration: underline; }
.ta-fase i { color: var(--texto-suave); margin-right: 6px; width: 16px; text-align: center; }

.ta-chip-cat {
  display: inline-block;
  border: 1px solid var(--acento);
  color: var(--acento);
  border-radius: 999px;
  padding: 1px 10px;
  font-size: 0.7rem;
  margin-right: 10px;
  white-space: nowrap;
}
.ta-lugar i { margin-right: 6px; color: var(--texto-suave); }

/* ---------- Semáforo de víctimas ---------- */
.ta-victimas {
  display: inline-block;
  min-width: 88px;
  text-align: center;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: bold;
  color: #111;
  white-space: nowrap;
}
.ta-v0  { background: var(--verde); }
.ta-v1  { background: var(--amarillo); }
.ta-v10 { background: var(--naranja); }
.ta-v50 { background: var(--rojo); color: #fff; }
.ta-tierra {
  display: block;
  font-size: 0.68rem;
  color: var(--texto-suave);
  margin-top: 2px;
  white-space: nowrap;
}

.ta-flag-verificar {
  color: var(--amarillo);
  font-size: 0.7rem;
  margin-left: 4px;
  cursor: help;
}

/* ---------- Tarjetas (móvil) ---------- */
.ta-tarjetas { display: none; }
.ta-tarjeta {
  background: var(--fondo-alt);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--acento);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 12px;
  cursor: pointer;
}
.ta-tarjeta .cabecera {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}
.ta-tarjeta .cabecera .vuelo {
  font-family: 'Aldrich', sans-serif;
  color: var(--acento);
  font-size: 1.05rem;
}
.ta-tarjeta .cabecera .fecha { color: var(--texto-suave); font-size: 0.78rem; }
.ta-tarjeta .aerolinea { font-weight: bold; margin-bottom: 4px; }
.ta-tarjeta .detalle { font-size: 0.78rem; color: var(--texto-suave); line-height: 1.5; }
.ta-tarjeta .pie {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  gap: 8px;
}

/* ---------- Modal ----------
   El modal vive fuera de .ta-contenedor, así que declara su
   propia tipografía y color: no hereda los del contenedor. */
.ta-modal-fondo {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 1000;
  padding: 24px;
  overflow-y: auto;
  font-family: 'Roboto Mono', monospace;
  color: var(--texto);
}
.ta-modal-fondo.visible { display: flex; align-items: flex-start; justify-content: center; }
.ta-modal {
  background: var(--fondo-alt);
  border: 1px solid var(--acento);
  border-radius: 10px;
  max-width: 640px;
  width: 100%;
  margin-top: 5vh;
  padding: 24px;
  position: relative;
}
.ta-modal h2 {
  font-family: 'Aldrich', sans-serif;
  margin: 0 32px 4px 0;
  color: var(--acento);
  font-size: 1.3rem;
}
.ta-modal .subtitulo { color: var(--texto-suave); font-size: 0.82rem; margin-bottom: 16px; }
.ta-modal-cerrar {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  color: var(--texto-suave);
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
}
.ta-modal-cerrar:hover { color: var(--rojo); }
.ta-ficha {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 6px 14px;
  font-size: 0.84rem;
  margin: 0 0 16px;
}
.ta-ficha dt { color: var(--texto-suave); }
.ta-ficha dd { margin: 0; color: var(--texto); }
.ta-modal .causa-texto {
  background: var(--fondo);
  color: var(--texto);
  border-left: 3px solid var(--acento);
  padding: 10px 14px;
  border-radius: 0 6px 6px 0;
  font-size: 0.84rem;
  line-height: 1.55;
  margin-bottom: 16px;
}
.ta-modal .botones { display: flex; gap: 10px; flex-wrap: wrap; }
.ta-modal .botones a {
  flex: 1;
  min-width: 160px;
  text-align: center;
  text-decoration: none;
  background: var(--acento);
  color: #fff;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 0.85rem;
  transition: background 0.15s;
}
.ta-modal .botones a:hover { background: var(--acento-hover); }
.ta-modal .botones a.secundario {
  background: transparent;
  border: 1px solid var(--acento);
  color: var(--acento);
}

/* ---------- Sin resultados ---------- */
.ta-vacio {
  text-align: center;
  color: var(--texto-suave);
  padding: 40px 0;
  display: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .ta-tabla-envoltura { display: none; }
  .ta-tarjetas { display: block; }
  .ta-stats { grid-template-columns: repeat(2, 1fr); }
  .ta-ficha { grid-template-columns: 110px 1fr; }
}

/* ---------- Coordenadas y mapa emergente ---------- */
.ta-coord-boton {
  background: none;
  border: none;
  color: var(--acento);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0 4px;
  vertical-align: middle;
}
.ta-coord-boton:hover { color: var(--acento-hover); }
.ta-modal.ta-mapa { max-width: 820px; }
.ta-modal.ta-mapa h2 { font-size: 1rem; margin-bottom: 12px; }
#mapa-iframe {
  width: 100%;
  height: 420px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: var(--fondo);
}
#m-coordenadas { color: var(--acento); text-decoration: none; }
#m-coordenadas:hover { color: var(--acento-hover); }
@media (max-width: 900px) { #mapa-iframe { height: 320px; } }