/* ============================================================
   Adaptación a móvil y tablet — hoja compartida por las 7 pantallas.
   Se enlaza DESPUÉS del <style> de cada plantilla para ganar en cascada.

   Por qué un archivo aparte y no media queries dentro de cada plantilla:
   las 7 hojas repiten la misma estructura (header + nav, .filtros, .kpis,
   .widgets/.card, .twrap/table). Duplicar los ajustes en cada una haría
   que se desincronicen a la primera corrección.

   Puntos de corte:
     ≤1024px  tablet (iPad vertical)
     ≤640px   celular
     ≤380px   celular estrecho (iPhone SE, Android compactos)

   Varias reglas llevan !important porque el nav, los botones y algunos
   avisos traen estilos en el atributo style= dentro del HTML, y un estilo
   en línea gana a cualquier selector de hoja externa.
   ============================================================ */

/* --- Base táctil, en cualquier tamaño --------------------------------- */

html {
  /* Safari en iPhone agranda por su cuenta el texto de bloques largos al
     girar a horizontal; el resultado es que las cifras de las tablas dejan
     de estar alineadas con sus encabezados. */
  -webkit-text-size-adjust: 100%;
}

/* Ningún gráfico ni tabla ancha debe empujar la página a los lados: el
   scroll horizontal vive dentro de su contenedor, nunca en el documento. */
body { overflow-x: hidden; }

/* Inercia de scroll en los contenedores desplazables (iOS < 13 la exige). */
.twrap, .tabs, nav, .tbl-scroll { -webkit-overflow-scrolling: touch; }

@media (hover: none) and (pointer: coarse) {
  /* En pantalla táctil no hay cursor que "pase por encima": el hover de las
     filas queda pegado tras el toque y confunde sobre qué está seleccionado. */
  tbody tr:hover { background: inherit; }

  /* 44px es el mínimo recomendado por Apple para un objetivo táctil.
     Con 5px de padding vertical, los enlaces del nav medían ~28px. */
  header nav a,
  .tabs button,
  .filtros button,
  header button,
  header > a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
}

/* ============================================================
   TABLET  (≤1024px)
   ============================================================ */
@media (max-width: 1024px) {
  main { padding: 14px 16px !important; }
  header { padding: 14px 16px; }

  /* Cada tarjeta a ancho completo: media tarjeta en tablet deja los
     gráficos de barras horizontales sin espacio para los rótulos. */
  .widgets .card, .card { grid-column: 1 / -1; }

  .card .ch { height: 250px; }
  #mapa { height: 360px; }
}

/* ============================================================
   CELULAR  (≤640px)
   ============================================================ */
@media (max-width: 640px) {

  /* --- Encabezado ---------------------------------------------------- */
  header {
    padding: 12px 14px;
    /* Muesca y barra inferior del iPhone en horizontal. */
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
    gap: 10px;
  }
  header h1 { font-size: 1.02rem; line-height: 1.3; }
  header h1::before { margin-right: 7px; }
  header .sub { font-size: .74rem; width: 100%; }

  /* El nombre de usuario dejaba de empujar a la derecha al envolverse;
     en móvil va con los botones de sesión, en su propia fila. */
  header > span[style*="margin-left"] { margin-left: 0 !important; font-size: .76rem !important; }

  /* --- Navegación entre hojas ---------------------------------------- */
  /* Siete enlaces no caben en 360px. Envolverlos comía media pantalla
     antes del primer dato, así que se desplazan en una sola fila. */
  header nav {
    width: 100%;
    margin-left: 0 !important;
    overflow-x: auto;
    flex-wrap: nowrap !important;
    scroll-snap-type: x proximity;
    /* Sin barra visible: en móvil es ruido y el gesto ya es evidente. */
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 2px;
  }
  header nav::-webkit-scrollbar { display: none; }
  header nav a {
    flex: 0 0 auto;
    scroll-snap-align: start;
    font-size: .78rem !important;
    padding: 7px 13px !important;
    white-space: nowrap;
  }

  /* --- Filtros -------------------------------------------------------- */
  /* Dos columnas: un filtro por fila obliga a desplazar toda la pantalla
     antes de llegar al botón Aplicar. */
  .filtros {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 9px 10px;
    padding: 12px;
    align-items: start !important;
  }
  .filtros label { width: auto; min-width: 0; }
  .filtros input, .filtros select { min-width: 0; width: 100%; }

  /* Los campos de texto libre y fecha rinden mejor a ancho completo. */
  .filtros label:has(#fCli),
  .filtros label:has(#buscarCli),
  .filtros label:has(input[type="text"]) { grid-column: 1 / -1; }

  /* Botones al final, uno al lado del otro y del alto de un dedo. */
  .filtros button { width: 100%; padding: 12px 10px !important; font-size: .88rem !important; }

  /* iOS hace zoom automático al enfocar un campo con letra menor de 16px,
     y al salir deja la página desencuadrada. 16px exactos lo evitan sin
     que el formulario se vea desproporcionado. */
  .filtros input, .filtros select,
  input, select, textarea { font-size: 16px !important; }

  /* --- Indicadores ---------------------------------------------------- */
  /* Dos por fila: a una sola columna, los seis KPI ocupaban una pantalla
     entera y empujaban los gráficos fuera de vista. */
  .kpis { grid-template-columns: 1fr 1fr !important; gap: 9px; }
  .kpi { padding: 11px 12px; }
  .kpi .t { font-size: .64rem; }
  .kpi .v { font-size: 1.12rem; }
  .kpi .d { font-size: .68rem; }
  .kpi .spark { height: 28px; }

  /* --- Tarjetas y gráficos -------------------------------------------- */
  main { padding: 12px !important; }
  .widgets { gap: 10px; }
  .card { padding: 13px 12px; border-radius: 10px; }
  .card h2 { font-size: .8rem; }

  /* 280px de alto en un celular deja el gráfico aplastado contra los
     rótulos; 230px con menos margen lateral se lee mejor. */
  .card .ch { height: 230px; }
  .comp-card .ch-mini { height: 66px; }

  /* --- Mapa ------------------------------------------------------------ */
  #mapa { height: 300px; }
  .mapa-layout { flex-direction: column; }
  .comp-col { width: 100% !important; flex: 1 1 auto !important; flex-direction: row !important; }
  .comp-col .comp-card { flex: 1; min-width: 0; }
  .comp-card .val { font-size: 1rem; }
  .mapabar { gap: 8px; }
  .mapabar .nota { width: 100%; margin: 0; font-size: .7rem; }

  /* --- Pestañas -------------------------------------------------------- */
  /* Igual que el nav: se desplazan en vez de envolverse en tres filas. */
  .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 2px;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { flex: 0 0 auto; white-space: nowrap; font-size: .78rem; padding: 8px 14px; }

  /* --- Tablas ---------------------------------------------------------- */
  /* No se convierten en fichas apiladas a propósito: son tablas de cifras
     comparables entre sí y apilarlas destruye la comparación columna a
     columna. Se desplazan de lado, con la primera columna fijada para no
     perder de vista a qué cliente pertenece cada número. */
  .twrap { max-height: 60vh; }
  table { font-size: .76rem; }
  th, td { padding: 7px 8px; }
  th { font-size: .63rem; }

  .twrap th:first-child,
  .twrap td:first-child {
    position: sticky; left: 0; z-index: 1;
    background: var(--surface);
    /* Borde a la derecha para que se note que la columna está fijada
       mientras el resto se desplaza por debajo. */
    box-shadow: 1px 0 0 var(--grid);
    max-width: 42vw;
    white-space: normal;
  }
  .twrap thead th:first-child { z-index: 3; background: var(--azul-oscuro); }
  .twrap tbody tr:nth-child(even) td:first-child { background: #F8FAFD; }

  #buscar { width: 100%; }

  /* --- Formularios (Solicitud y Análisis de crédito) ------------------- */
  /* El grid de 12 columnas se colapsa a dos: los campos cortos (RNC, monto,
     plazo) siguen compartiendo fila; los largos ocupan el ancho. */
  .fgrid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
  .fgrid .c2, .fgrid .c3, .fgrid .c4 { grid-column: span 1 !important; }
  .fgrid .c6, .fgrid .c8, .fgrid .c12 { grid-column: 1 / -1 !important; }

  .card h2 { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; }

  /* Los deslizadores de calificación medían 16px de alto: con el dedo era
     más fácil arrastrar la página que la perilla. La perilla se lleva a
     26px, que ya se agarra sin apuntar. */
  input[type=range] { height: 34px; }
  input[type=range]::-webkit-slider-thumb { width: 26px; height: 26px; }
  input[type=range]::-moz-range-thumb { width: 26px; height: 26px; }

  /* Las casillas y radios comparten el mismo problema. Va con !important
     porque varias hojas les fijan `width: auto` con selectores más
     específicos (.anexos input, .radio-row input) para que no hereden el
     100% de los campos de texto. */
  input[type=checkbox], input[type=radio] { width: 20px !important; height: 20px; }

  .radio-row { gap: 12px; }
  .radio-row label { min-height: 34px; }
  .anexos .anexo-fila > span { flex: 1 1 100%; }
  .anexos input[type=file] { max-width: 100%; width: 100%; }
  .btns-anexo { margin-left: 0; width: 100%; }

  /* Tablas de captura (accionistas, referencias, firmas): comprimir seis
     campos en 390px los deja inservibles, así que la tabla se convierte en
     su propio contenedor desplazable. `display:block` sobre <table> genera
     una caja de tabla anónima por dentro, de modo que las columnas siguen
     alineadas entre filas; es el mismo recurso que usan las tablas de
     Markdown en GitHub. */
  table.dyn {
    display: block;
    overflow-x: auto;
    width: 100%;
  }

  /* --- Ventanas modales ------------------------------------------------ */
  /* El ancho ya era min(900px, 96vw), así que solo sobra relleno: 22px de
     padding a cada lado se comen una octava parte de la pantalla. */
  .overlay { padding: 10px !important; }
  .modal { padding: 14px 13px !important; max-height: 92vh !important; }
  .modal .ch { height: 210px; }

  /* El panel de datos (index) es un div con estilos en línea, sin clase. */
  #ovDatos { padding: 10px !important; }
  #ovDatos > div { width: 96vw !important; max-width: 96vw !important; padding: 14px 13px !important; }

  /* Caja del login */
  .caja { padding: 26px 20px !important; }
}

/* ============================================================
   CELULAR ESTRECHO  (≤380px)
   ============================================================ */
@media (max-width: 340px) {
  .kpis { grid-template-columns: 1fr !important; }
}

@media (max-width: 380px) {
  /* Los KPI aguantan dos por fila hasta ~340px: sus cifras son cortas
     ("RD$ 1,338 M"). Los filtros no: un select de dos columnas corta
     "Todo el historial" a la mitad y deja de poderse leer la opción
     elegida, que es justo lo que hay que verificar antes de aplicar. */
  .filtros { grid-template-columns: 1fr; }
  .comp-col { flex-direction: column !important; }
  header h1 { font-size: .95rem; }
  .card .ch { height: 210px; }
}

/* ============================================================
   HORIZONTAL EN CELULAR
   Poca altura: el encabezado no debe comerse el área útil.
   ============================================================ */
@media (max-height: 480px) and (orientation: landscape) {
  header { padding: 8px 14px; }
  header h1 { font-size: .95rem; }
  .card .ch { height: 62vh; }
  #mapa { height: 70vh; }
  .twrap { max-height: 70vh; }
}