/* ===========================================================================
   responsive.css — capa de adaptación a pantallas pequeñas.
   Se carga DESPUÉS de styles.css (el design system Nocturne).

   La plantilla define casi todo su layout en atributos `style=` en línea, y
   los estilos en línea ganan a cualquier regla de hoja. Por eso las reglas de
   esta capa que reemplazan una propiedad declarada en línea llevan
   `!important`: es la única forma de sobreescribirla sin reescribir la
   plantilla entera. Las que no chocan con un estilo en línea van sin él.

   Puntos de corte:
     · ≤ 1024px  tablet en vertical y portátiles angostos
     · ≤ 720px   móvil en horizontal / tablet pequeña
     · ≤ 480px   móvil en vertical
   =========================================================================== */

/* --- Base: nada debe desbordar el ancho de la ventana --------------------- */
html {
  -webkit-text-size-adjust: 100%;   /* iOS no reescala el texto al girar */
}
body {
  overflow-x: hidden;
}
img, svg, video {
  max-width: 100%;
  height: auto;
}

/* La barra superior puede envolver en cualquier ancho, no solo en móvil. */
.app-nav {
  flex-wrap: wrap;
  row-gap: 8px;
}
.app-brand {
  min-width: 0;
}

/* La tabla del consolidado tiene 5 columnas: en vez de aplastarlas, se
   desplaza horizontalmente dentro de su propio contenedor. */
.app-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* ===========================================================================
   ≤ 1024px — se acaba el espacio para la segunda columna
   =========================================================================== */
@media (max-width: 1024px) {
  /* Ficha de la lista: el bloque de estado/cifras/acciones baja debajo. */
  .app-ficha {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 11.2px !important;
  }
  .app-ficha-meta {
    padding-top: 11.2px;
    border-top: 1px solid var(--color-divider);
  }

  /* Formulario de captura: una sola columna. */
  .app-form-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ===========================================================================
   ≤ 720px — móvil
   =========================================================================== */
@media (max-width: 720px) {

  /* --- Barra superior: marca arriba, pestañas a lo ancho, controles debajo -- */
  /* En móvil la barra ocuparía media pantalla si quedara fija: se deja
     desplazar con el contenido y el área útil vuelve a ser toda la ventana. */
  .app-nav {
    position: static !important;
    padding: 10px 16px !important;
    gap: 8px !important;
    align-items: stretch !important;
  }
  .app-brand {
    flex: 1 1 100% !important;
    margin-right: 0 !important;
  }
  .app-brand .nav-brand {
    font-size: 16px !important;
  }

  .app-tabs {
    flex: 1 1 100% !important;
    gap: 0 !important;
  }
  .app-tabs > div {
    flex: 1 1 0;
    min-width: 0;
  }
  .app-tabs .btn {
    width: 100%;
    padding-inline: 4px !important;
    font-size: 13px;
    white-space: nowrap;
  }

  .app-nav-spacer {
    display: none !important;
  }

  /* Rol y exportación comparten una fila. */
  .app-rol {
    flex: 1 1 0 !important;
    min-width: 0;
  }
  .app-rol .seg-opt {
    flex: 1 1 0;
    justify-content: center;
    padding: 8px 4px;
    font-size: 12px;
    min-width: 0;
  }
  .app-rol .seg-opt span {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .app-export {
    flex: 0 0 auto;
    font-size: 13px;
    padding-inline: 12px;
    white-space: nowrap;
  }

  /* --- Contenido ---------------------------------------------------------- */
  .app-main {
    padding: 20px 16px 64px 16px !important;
  }
  .app-main h1 {
    font-size: 21px !important;
  }
  .app-main h2 {
    font-size: 16px !important;
  }

  /* Filtros: cada campo ocupa el ancho completo; el botón también. */
  .app-filtros > .field {
    flex: 1 1 100% !important;
  }
  .app-filtros > .btn {
    width: 100%;
  }

  /* Campos de formulario: 16px evita que iOS haga zoom al enfocarlos. */
  .input {
    font-size: 16px !important;
    min-height: 40px;
  }
  textarea.input {
    min-height: 96px;
  }

  /* Indicadores del consolidado: dos por fila en vez de una. */
  .app-kpis {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    gap: 8.4px !important;
  }
  .app-kpis .card {
    padding: 12px !important;
  }
  .app-kpis .card > div:last-child {
    font-size: 21px !important;
  }

  /* Tabla: ancho mínimo legible + desplazamiento horizontal. */
  .app-table-wrap .table {
    min-width: 560px;
  }

  /* Botonera: se reparten el ancho en lugar de amontonarse. */
  .app-acciones .btn {
    flex: 1 1 auto;
    min-height: 40px;
  }

  /* Aviso flotante: de borde a borde, sobre el contenido. */
  .app-toast {
    left: 16px !important;
    right: 16px !important;
    bottom: 16px !important;
    text-align: center;
  }
}

/* ===========================================================================
   ≤ 480px — móvil en vertical
   =========================================================================== */
@media (max-width: 480px) {
  .app-nav {
    padding: 10px 12px !important;
  }
  .app-main {
    padding: 16px 12px 56px 12px !important;
  }
  .app-main h1 {
    font-size: 19px !important;
  }

  /* Ficha de la lista: menos aire interior. */
  .app-ficha {
    padding: 12px !important;
  }

  /* Las acciones de cada ficha se separan del texto y quedan a mano.
     44px es el mínimo táctil; este selector es más específico que el del
     bloque @media (hover: none) de más abajo, así que manda aquí. */
  .app-ficha-meta .no-print .btn {
    min-height: 44px;
    padding-inline: 12px;
  }

  /* Botonera principal: un botón por fila, con área táctil cómoda. */
  .app-acciones .btn {
    flex: 1 1 100%;
    min-height: 42px;
  }
}

/* ===========================================================================
   Impresión — el consolidado se imprime en una hoja, no en columnas de móvil
   =========================================================================== */
@media print {
  .app-main {
    padding: 0 !important;
    max-width: none !important;
  }
  .app-table-wrap {
    overflow: visible !important;
  }
  .app-table-wrap .table {
    min-width: 0 !important;
  }
}


/* ===========================================================================
   AMPLIACIÓN — casos que la primera capa no cubría
   ===========================================================================
   Los ocho puntos siguientes salieron de medir la página ya publicada, no de
   revisarla a ojo. Cada bloque dice qué se rompía y en qué aparato.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Alto real de la ventana en el móvil
   El contenedor de la app pide min-height: 100vh. En Chrome y Safari de
   celular, 100vh mide la ventana SIN la barra de direcciones, así que la
   página queda más alta que la pantalla y aparece un desplazamiento vertical
   sobrante aunque no haya contenido. La unidad dvh mide el alto realmente
   visible y se ajusta cuando la barra aparece o desaparece.
   --------------------------------------------------------------------------- */
@supports (height: 100dvh) {
  #dc-root > .sc-host > div {
    min-height: 100dvh !important;
  }
}

/* ---------------------------------------------------------------------------
   2. Palabras largas que se salen de su recuadro
   Los nombres de obra, los barrios y los detalles de inversión los escribe
   cada Dirección: basta un nombre compuesto sin espacios o un enlace pegado
   para que reviente el ancho de la tarjeta en una pantalla angosta.
   --------------------------------------------------------------------------- */
.card-title,
.card-body,
.app-ficha-meta > div,
.app-table-wrap td,
.tag {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* ---------------------------------------------------------------------------
   3. Pantallas anchas
   .app-main tiene un ancho máximo de 1180px pero no estaba centrado: en un
   monitor de 1920px el contenido quedaba pegado al borde izquierdo con 740px
   de vacío a la derecha. Se centra solo por encima de 1240px, de modo que el
   escritorio habitual (1280px y menos) no cambia de aspecto.
   --------------------------------------------------------------------------- */
@media (min-width: 1240px) {
  .app-main {
    margin-inline: auto;
  }
}

/* ---------------------------------------------------------------------------
   4. Celular acostado (y cualquier ventana baja)
   Un teléfono en horizontal mide unos 740x360: pasa de los 720px del corte
   de móvil, así que recibía la barra superior FIJA de escritorio ocupando
   123px, un tercio de la pantalla, encima de cada vista.
   El corte va por ALTO, no por ancho, que es lo que de verdad escasea aquí.
   --------------------------------------------------------------------------- */
@media (max-height: 520px) and (orientation: landscape) {
  .app-nav {
    position: static !important;
    padding-block: 6px !important;
    gap: 6px !important;
  }
  .app-brand {
    flex: 0 1 auto !important;
  }
  .app-brand .nav-brand {
    font-size: 14px !important;
  }
  /* El subtítulo institucional se sobreentiende: aquí solo resta pantalla. */
  .app-brand > span:last-child {
    display: none;
  }
  /* Sin el separador elástico, los controles se juntan y la barra cabe en
     dos filas apretadas en vez de dos holgadas. */
  .app-nav-spacer {
    display: none !important;
  }
  /* Se prefija con .app-nav para ganarle en especificidad al mínimo táctil
     de 44px del bloque @media (hover: none): con 360px de alto, dos filas de
     44px se comen un tercio de la pantalla. 34px de alto sigue siendo cómodo
     porque estos controles son anchos. */
  .app-nav .app-tabs .btn,
  .app-nav .app-rol .seg-opt,
  .app-nav .app-export {
    min-height: 34px;
    font-size: 13px;
  }
  .app-nav .app-rol .seg-opt {
    padding-block: 4px;
  }
  .app-main {
    padding-block: 14px 40px !important;
  }
  .app-main h1 {
    font-size: 19px !important;
  }
  textarea.input {
    min-height: 64px;
  }
}

/* ---------------------------------------------------------------------------
   5. Aparatos táctiles (sin ratón)
   a) En una pantalla táctil no existe retirar el puntero: el fondo de :hover
      se queda pegado en el último botón tocado y parece seleccionado.
   b) Las pestañas medían 27px de alto y los enlaces Editar/Eliminar 36px. La
      guía de accesibilidad WCAG 2.5.8 pide 44px para el dedo.
   --------------------------------------------------------------------------- */
@media (hover: none) {
  .btn:hover,
  .seg-opt:not(:has(input:checked)):hover {
    background: transparent;
  }
  .btn-secondary:hover {
    border-color: var(--color-divider);
  }
  .input:hover {
    background: var(--color-surface);
    border-color: var(--color-divider);
  }

  .app-tabs .btn,
  .app-ficha-meta .btn,
  .app-acciones .btn,
  .app-export {
    min-height: 44px;
  }
  .app-rol .seg-opt {
    min-height: 44px;
  }
  /* Editar y Eliminar son texto suelto: se les da cuerpo para acertarles. */
  .app-ficha-meta .btn-ghost {
    padding-inline: 14px;
    border: 1px solid var(--color-divider);
  }
}

/* ---------------------------------------------------------------------------
   6. Márgenes seguros en teléfonos con muesca
   En horizontal, la muesca y el indicador inferior se comen los bordes. Sin
   esto, el primer control de la barra queda debajo de la muesca.
   --------------------------------------------------------------------------- */
@supports (padding: env(safe-area-inset-left)) {
  @media (max-width: 720px), (max-height: 520px) and (orientation: landscape) {
    .app-nav,
    .app-main {
      padding-left: max(16px, env(safe-area-inset-left)) !important;
      padding-right: max(16px, env(safe-area-inset-right)) !important;
    }
    .app-main {
      padding-bottom: calc(56px + env(safe-area-inset-bottom)) !important;
    }
    .app-toast {
      bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    }
  }
}

/* ---------------------------------------------------------------------------
   7. La tabla del consolidado, como fichas, en pantallas muy angostas
   Entre 560px y 720px la tabla se desplaza en horizontal (regla de más
   arriba). Por debajo de 560px ese desplazamiento es incómodo: cinco
   columnas obligan a barrer el dedo para leer una sola fila. Aquí cada fila
   se convierte en una tarjeta de pares etiqueta-valor.

   OJO AL MANTENER: las etiquetas van escritas en el content de cada ::before
   porque el CSS no puede leer el <th> que le corresponde. Si algún día se
   agregan, quitan o reordenan columnas en la tabla de index.html, hay que
   actualizar esta lista o los valores quedarán con la etiqueta equivocada.
   --------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .app-table-wrap {
    overflow-x: visible;
  }
  .app-table-wrap .table {
    display: block;
    min-width: 0;
  }

  /* La cabecera se oculta a la vista pero sigue disponible para los lectores
     de pantalla: por eso no se usa display: none. */
  .app-table-wrap .table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .app-table-wrap .table tbody,
  .app-table-wrap .table tbody tr {
    display: block;
  }

  .app-table-wrap .table tbody tr {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    margin-bottom: 8.4px;
  }

  .app-table-wrap .table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding: 5px 0;
    text-align: right !important;
    border: 0;
  }

  .app-table-wrap .table tbody td::before {
    flex: 0 0 auto;
    text-align: left;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text) 60%, transparent);
  }

  /* Orden de las columnas en index.html, sección "Consolidado". */
  .app-table-wrap .table tbody td:nth-child(1)::before { content: "Dirección"; }
  .app-table-wrap .table tbody td:nth-child(2)::before { content: "Fichas"; }
  .app-table-wrap .table tbody td:nth-child(3)::before { content: "Inversión USD"; }
  .app-table-wrap .table tbody td:nth-child(4)::before { content: "Beneficiarios"; }
  .app-table-wrap .table tbody td:nth-child(5)::before { content: "Revisión"; }

  /* El nombre de la dirección encabeza la tarjeta. */
  .app-table-wrap .table tbody td:nth-child(1) {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 15px;
    padding-bottom: 9px;
    margin-bottom: 5px;
    border-bottom: 1px solid var(--color-divider);
  }

  /* Texto de apoyo un punto más grande: 10px es ilegible en la mano. */
  .card-kicker {
    font-size: 11px;
  }
  /* Tarjeta de "sin resultados": menos aire, se ve completa sin desplazar. */
  .app-main > div > .card {
    padding: 18px !important;
  }
}

/* ---------------------------------------------------------------------------
   8. Impresión — la tabla vuelve a ser tabla
   El bloque anterior la convierte en tarjetas; al imprimir el consolidado
   desde un celular eso saldría así en la hoja. Aquí se revierte.
   --------------------------------------------------------------------------- */
@media print {
  .app-table-wrap .table {
    display: table !important;
  }
  .app-table-wrap .table thead {
    position: static !important;
    width: auto !important;
    height: auto !important;
    clip-path: none !important;
  }
  .app-table-wrap .table tbody {
    display: table-row-group !important;
  }
  .app-table-wrap .table tbody tr {
    display: table-row !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .app-table-wrap .table tbody td {
    display: table-cell !important;
    text-align: inherit !important;
  }
  .app-table-wrap .table tbody td::before {
    content: none !important;
  }
  .app-table-wrap .table tbody td:nth-child(1) {
    font-size: inherit;
    margin-bottom: 0;
  }
}