/**
 * styles.css
 * -----------------------------------------------------------------------
 * Estilos complementarios a Tailwind: componentes reutilizables (navegación,
 * tarjetas de formulario, métricas) y las reglas de impresión institucional
 * (@media print) requeridas para los reportes formales.
 * -----------------------------------------------------------------------
 */

/* ------------------------------- Íconos ---------------------------------- */
/* Íconos vectoriales (js/icons.js) en lugar de emojis: heredan el color del
   texto que los rodea y se alinean con la línea base. */
.icon-svg {
  display: inline-block;
  vertical-align: -3px;
  margin-right: 0.4rem;
  flex-shrink: 0;
}
.icon-svg.icon-only {
  margin-right: 0;
}

/* Buscadores con lupa vectorial de fondo (evita repetir markup en cada
   input): agregar la clase .input-search y quitar cualquier emoji del
   placeholder. */
.input-search {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 10px center;
  padding-left: 2.25rem !important;
}

/* Punto de estado de conectividad (reemplaza los emojis 🟢/🔴). */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: currentColor;
  margin-right: 0.4rem;
}

/* --------------------------- Desplegables (details) ---------------------- */
/* display:flex en <summary> quita la flechita nativa del navegador; se */
/* reemplaza por un chevron propio que rota al abrir. */
details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}
details .chevron {
  transition: transform 0.15s ease;
}
details[open] > summary .chevron {
  transform: rotate(90deg);
}

/* ---------------------------- Navegación -------------------------------- */
.nav-link {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.65rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #cbd5e1;
  border-left: 3px solid transparent;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.nav-link:hover {
  background-color: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}
.nav-link.nav-active {
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border-left-color: #c81e1e;
}

/* ------------------------------ Sub-tabs --------------------------------- */
.subtab-btn {
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #475569;
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 0.375rem;
}
.subtab-btn.subtab-active {
  background-color: #0b2545;
  color: #ffffff;
  border-color: #0b2545;
}
.subtab-panel {
}

/* ------------------------------ Tarjetas --------------------------------- */
.metric-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 1rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.metric-label {
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 500;
  margin-bottom: 0.25rem;
}
.metric-value {
  font-size: 1.75rem;
  font-weight: 800;
  color: #0b2545;
  line-height: 1.1;
}
.metric-sub {
  font-size: 0.6875rem;
  color: #94a3b8;
  margin-top: 0.25rem;
}

/* ------------------------------ Formularios ------------------------------ */
.form-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  padding: 1.25rem;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 768px) {
  .form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.form-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: 0.25rem;
}
.form-input {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  background: #ffffff;
  color: #1e293b;
}
.form-input:focus {
  outline: none;
  border-color: #0b2545;
  box-shadow: 0 0 0 2px rgba(11, 37, 69, 0.15);
}
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid #f1f5f9;
}
.btn-primary {
  background-color: #0b2545;
  color: #ffffff;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.55rem 1.25rem;
  border-radius: 0.375rem;
}
.btn-primary:hover {
  background-color: #071730;
}
.btn-secondary {
  background-color: #ffffff;
  color: #334155;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.55rem 1.25rem;
  border-radius: 0.375rem;
  border: 1px solid #cbd5e1;
}
.btn-secondary:hover {
  background-color: #f8fafc;
}

/* -------------------------------- Toasts ---------------------------------- */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
  animation: fade-in 0.2s ease-out;
}

/* ---------------------------------------------------------------------- */
/* IMPRESIÓN INSTITUCIONAL                                                 */
/* ---------------------------------------------------------------------- */
.print-header,
.print-footer {
  display: none;
}

.print-letterhead {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-bottom: 2px solid #0b2545;
  padding: 0.5rem 1rem 0.75rem;
}
.print-letterhead-crest {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
.print-letterhead-title {
  font-weight: 800;
  font-size: 1.05rem;
  color: #0b2545;
}
.print-letterhead-sub {
  font-size: 0.8rem;
  color: #475569;
}
.print-letterhead-meta {
  margin-left: auto;
  text-align: right;
  font-size: 0.75rem;
  color: #475569;
}

.print-signatures {
  display: flex;
  justify-content: space-around;
  gap: 3rem;
  margin-top: 1.5rem;
  padding: 0 2rem 1rem;
}
.print-signature {
  flex: 1;
  text-align: center;
  font-size: 0.8rem;
  color: #334155;
}
.print-signature-line {
  border-top: 1px solid #334155;
  margin-bottom: 0.4rem;
  height: 2.5rem;
}

/* Contenedor reutilizable para impresiones "ad-hoc" (Lista Diaria, Cierre
   Diario) que no viven permanentemente visibles en pantalla: se mantiene
   fuera del viewport (no con display:none, para que printElement() pueda
   moverlo/mostrarlo sin pelear con !important de otra regla) y al imprimir
   recupera su tamaño normal. */
.print-only-staging {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

@media print {
  @page {
    size: letter;
    margin: 14mm 12mm;
  }
  body.printing-single .print-target.print-only-staging {
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    opacity: 1 !important;
  }
  body {
    background: #ffffff !important;
  }
  .no-print {
    display: none !important;
  }
  #login-screen,
  header,
  nav,
  #toast-container,
  #modal-root {
    display: none !important;
  }
  main {
    padding: 0 !important;
    overflow: visible !important;
  }

  /* Cuando se imprime UN historial/reporte específico (printing-single),
     ui.js traslada ese bloque (.print-target) para que sea hijo directo de
     <body>; aquí solo ocultamos el resto de los hijos directos de <body>
     para que ningún contenedor padre (vista, pestaña) oculte el reporte. */
  body.printing-single > *:not(.print-target) {
    display: none !important;
  }
  body.printing-single .print-target .print-header,
  body.printing-single .print-target .print-footer {
    display: block !important;
  }

  /* La tabla del historial vive dentro de un contenedor con scroll
     horizontal en pantalla (.overflow-x-auto, para móviles). En papel no
     hay scroll posible: se libera el contenedor y se fuerza que la tabla
     quepa en el ancho de la hoja, con texto compacto y con salto de línea
     en vez de desbordarse. */
  .overflow-x-auto {
    overflow: visible !important;
  }
  table {
    width: 100% !important;
    max-width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 8pt;
  }
  th,
  td {
    padding: 2px 4px !important;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal !important;
  }
  thead {
    display: table-header-group;
  }
  tr {
    page-break-inside: avoid;
  }
  /* Que la firma no quede sola en una hoja nueva: no se parte a la mitad
     ni se separa de la última fila de la tabla (totales incluidos) con un
     salto de página justo antes. */
  tfoot,
  .print-footer,
  .print-signatures {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  tfoot tr:last-child,
  tbody tr:last-child {
    page-break-after: avoid;
    break-after: avoid;
  }
}

/* Mapas de Windy.com reales (API "Map Forecast", NO el iframe viejo — ver
   js/hidrometeorologia.js): ocultan la barra de línea de tiempo/reproducción
   del pronóstico que Windy agrega por defecto, para ver solo el tiempo
   actual sin controles para "adelantar" el pronóstico ni botón de play.
   .mapa-windy se aplica tanto al mapa de estaciones (Pluviometría) como al
   de pronóstico (Fluviometría). Los selectores son los que usa Windy en su
   propio sitio; al ser esto un mapa del MISMO origen (ya no un iframe de
   otro dominio) el CSS sí puede alcanzarlo. Si algún selector no aplica en
   una actualización futura de su librería, simplemente no hace nada (no
   rompe el resto del mapa). */
.mapa-windy #bottom,
.mapa-windy #plugin-plugins,
.mapa-windy #timeline,
.mapa-windy #playpause,
.mapa-windy [id*="timeline" i],
.mapa-windy [class*="timeline" i],
.mapa-windy [class*="time-slider" i],
.mapa-windy [id*="playpause" i],
.mapa-windy [class*="playpause" i],
.mapa-windy [class*="media-slider" i] {
  display: none !important;
}

/* Resaltado de lo encontrado por el buscador (js/busqueda.js): visible en
   pantalla, pero no se imprime. */
mark {
  background: #fde68a;
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}
@media print {
  mark {
    background: none;
  }
}