/* =============================================================================
   estilo.css – Tema general tipo "timelapse" (light/dark) + mobile friendly
   Autor: Eduardo + ChatGPT
   ============================================================================= */

/* ---------- Variables de tema ---------- */
:root{
  --bg1:#e0e7ff; --bg2:#f9fafb;           /* degradado fondo */
  --card:#ffffff;                          /* fondos tarjetas */
  --text:#1f2937; --text2:#374151;         /* texto principal/secundario */
  --muted:#6b7280;                         /* texto tenue */
  --border:#e5e7eb;                        /* bordes suaves */
  --chip:#f3f4f6; --stripe:#f9fafb;        /* chips / rayas de tabla */
  --pri1:#6366f1; --pri2:#4f46e5; --pri3:#4338ca;
  --danger:#ef4444;
  --shadow:0 8px 24px rgba(0,0,0,.08);
  --shadowH:0 14px 32px rgba(0,0,0,.12);
  --r-xl:1.5rem; --r-md:.75rem;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg1:#111827; --bg2:#1f2937; --card:#111827;
    --text:#f3f4f6; --text2:#e5e7eb; --muted:#9ca3af;
    --border:#374151; --chip:#1f2937; --stripe:#0b1220;
    --shadow:0 8px 24px rgba(0,0,0,.6); --shadowH:0 14px 32px rgba(0,0,0,.7);
  }
}

/* ---------- Base ---------- */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family:'Roboto',system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  color:var(--text);
  background:linear-gradient(135deg,var(--bg1),var(--bg2));
}

/* ---------- Tarjeta contenedora genérica (páginas) ---------- */
.container{
  width:100%; max-width:1100px;
  margin:32px auto; padding:24px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease;
}
.container:hover{ transform:translateY(-2px); box-shadow:var(--shadowH) }

h1{ margin:10px 0 2px; font-size:1.8rem }
h3{ margin:0 0 14px; font-weight:500; color:var(--muted) }

/* ---------- Menú superior (botonera) ---------- */
.menu-bar{
  display:flex; justify-content:flex-end; align-items:center;
  margin-bottom:8px; gap:10px;
}
.menu-bar button{
  padding:10px 16px; border:none; border-radius:999px; cursor:pointer;
  font-weight:600; color:#fff;
  background:linear-gradient(135deg,var(--pri1),var(--pri2));
  transition:transform .15s ease, filter .2s ease;
}
.menu-bar button:hover{ transform:translateY(-1px); filter:brightness(1.05) }
.menu-bar .red{ background:linear-gradient(135deg,#f87171,var(--danger)) }

/* Variante “ghost” para botones secundarios SIN cambiar tu HTML:
   todos los botones del menú excepto .red y el 1º se ven ghost */
.menu-bar button:not(.red):not(:first-child){
  background:transparent; color:var(--text); border:1px solid var(--border);
}
.menu-bar button:not(.red):not(:first-child):hover{ background:var(--chip) }

/* ---------- Botones utilitarios (por si los usas en otras páginas) ---------- */
.btn{
  padding:10px 16px; border:none; border-radius:999px; cursor:pointer;
  font-weight:600; color:#fff;
  background:linear-gradient(135deg,var(--pri1),var(--pri2));
  transition:transform .15s ease, filter .2s ease;
}
.btn:hover{ transform:translateY(-1px); filter:brightness(1.05) }
.btn-ghost{ background:transparent; color:var(--text); border:1px solid var(--border) }
.btn-ghost:hover{ background:var(--chip) }
.btn-danger{ background:linear-gradient(135deg,#f87171,var(--danger)) }

/* ---------- Barra de filtros (fechas) ---------- */
.filter-bar{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  background:var(--chip); padding:10px 12px;
  border:1px solid var(--border); border-radius:999px;
}
.filter-bar label{ font-size:.95rem; color:var(--text2); margin-left:6px }
.filter-bar input[type="datetime-local"]{
  padding:10px 12px; border:1px solid var(--border); border-radius:999px;
  background:transparent; color:var(--text);
  transition:border .2s, box-shadow .2s; font-size:16px; /* evita zoom iOS */
}
.filter-bar input[type="datetime-local"]:focus{
  border-color:var(--pri1); outline:none; box-shadow:0 0 0 3px rgba(99,102,241,.2);
}
.filter-bar button{
  padding:10px 16px; border:none; border-radius:999px; color:#fff;
  background:linear-gradient(135deg,#1d4ed8,#1e40af); font-weight:600; cursor:pointer;
}
.filter-bar button:hover{ filter:brightness(1.05) }

/* ---------- Mapa (Leaflet) ---------- */
#map{
  height:600px; width:100%; margin-bottom:10px;
  border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
}
/* Controles leaflet redondeados */
.leaflet-control-zoom a, .leaflet-control-layers{ border-radius:12px !important; overflow:hidden }

/* ---------- Tabla de estadísticas ---------- */
/* En tus páginas pueden aparecer como .stats o .stats-table */
.table-wrap{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch }
table.stats, table.stats-table{
  width:100%; border-collapse:separate; border-spacing:0;
  background:var(--card);
  border-radius:var(--r-md); overflow:hidden;
  min-width:560px; /* scroll horizontal en anchos intermedios */
}
table.stats th, table.stats td,
table.stats-table th, table.stats-table td{
  padding:14px 16px; text-align:left; border-bottom:1px solid var(--border);
}
table.stats th, table.stats-table th{
  font-weight:700; color:var(--text2); background:var(--stripe);
}
table.stats tr:last-child td, table.stats-table tr:last-child td{ border-bottom:0 }
#max-speed-cell{ cursor:pointer }

/* Card view sin scroll en móviles muy estrechos */
@media (max-width: 520px){
  .table-wrap{ overflow:visible }
  table.stats, table.stats-table{ min-width:0; border-collapse:collapse }
  table.stats thead, table.stats-table thead{ display:none }
  table.stats, table.stats tbody, table.stats tr, table.stats td,
  table.stats-table, table.stats-table tbody, table.stats-table tr, table.stats-table td{
    display:block; width:100%;
  }
  table.stats tr, table.stats-table tr{
    border:1px solid var(--border); border-radius:12px;
    background:var(--card); padding:6px 0; margin-bottom:10px;
  }
  table.stats td, table.stats-table td{
    border-bottom:0; padding:10px 12px;
    display:flex; justify-content:space-between; gap:12px; align-items:flex-start;
  }
  table.stats td::before, table.stats-table td::before{
    content:attr(data-label);
    font-weight:700; color:var(--text2); min-width:46%;
  }
}

/* ---------- Tarjeta de estadísticas (envoltorio opcional) ---------- */
.stats-card{
  margin-top:10px; background:var(--card);
  border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden;
}
.stats-title{
  padding:14px 16px; margin:0; font-size:1.1rem; font-weight:700;
  border-bottom:1px solid var(--border);
}

/* ---------- Formularios (login) ----------
   Aplica look de tarjeta a formularios genéricos sin romper la .filter-bar. */
form:not(.filter-bar){
  background:var(--card);
  padding:2.5em; max-width:400px; width:100%;
  margin: 24px auto;
  text-align:center;
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease;
}
form:not(.filter-bar):hover{ transform:translateY(-3px); box-shadow:var(--shadowH) }
form:not(.filter-bar) h2{
  color:var(--text); margin-bottom:1.2em;
  font-size:1.8em; font-weight:600;
}
form:not(.filter-bar) label{
  display:block; margin-top:1em; color:var(--text2);
  font-size:.95em; text-align:left; font-weight:500;
}
form:not(.filter-bar) input[type="text"],
form:not(.filter-bar) input[type="password"],
form:not(.filter-bar) input[type="email"]{
  width:100%; padding:.9em; margin-top:.5em;
  border:1px solid var(--border); border-radius:.75rem; font-size:1em;
  background:transparent; color:var(--text);
  transition:border .3s, box-shadow .3s, background .3s, color .3s;
}
form:not(.filter-bar) input:focus{
  border-color:var(--pri1); box-shadow:0 0 0 3px rgba(99,102,241,.2); outline:none;
}
form:not(.filter-bar) button[type="submit"]{
  width:100%; padding:.9em; margin-top:1.8em;
  background:linear-gradient(135deg,var(--pri1),var(--pri2));
  border:none; border-radius:.75rem; color:#fff; font-size:1.05em; font-weight:600;
  cursor:pointer; transition:background .3s, transform .15s;
}
form:not(.filter-bar) button[type="submit"]:hover{
  background:linear-gradient(135deg,var(--pri2),var(--pri3)); transform:translateY(-2px);
}
form:not(.filter-bar) p{ color:#dc2626; font-size:.9em; margin:.75em 0 }

/* ---------- Footer ---------- */
footer{
  padding:16px; text-align:center; color:var(--muted);
  display:flex; justify-content:center; align-items:center; gap:10px;
}
footer img{ width:32px; height:auto }

/* ---------- Utilidades / Accesibilidad ---------- */
@keyframes pulse{ 0%{transform:scale(1)} 50%{transform:scale(1.08)} 100%{transform:scale(1)} }
/* Por defecto desactivamos la animación (petición explícita); actívala con .pulse-on si la necesitas. */
.pulse{ animation:none !important }
.pulse-on{ animation:pulse 1.5s infinite ease-in-out }

/* Mejora icono de calendario en WebKit */
input[type="datetime-local"]::-webkit-calendar-picker-indicator{ padding:4px; cursor:pointer; opacity:.85 }

/* ---------- Responsive general ---------- */
@media (max-width: 900px){
  .container{ margin:24px auto; padding:20px }
}
@media (max-width: 720px){
  .menu-bar{ flex-wrap:wrap; justify-content:flex-start }
  .menu-bar button{ padding:8px 12px; font-size:.95rem }
  .filter-bar{ flex-direction:column; align-items:stretch; border-radius:16px; gap:8px }
  .filter-bar label{ margin:0 0 4px 2px; align-self:flex-start }
  .filter-bar input[type="datetime-local"], .filter-bar button{ width:100%; border-radius:12px }
  #map{ height:55vh }
}
@media (max-width: 480px){
  #map{ height:50vh }
  .container table{ font-size:.95rem }
}