/* ════════════════════════════════════════════════════════════════
   Bloque 241 (3-nov-2026) · el sistema en el celular
   Pedro: "quise entrar desde mi cel al sistema… no es responsive… estaba todo montado".
   Una sola hoja para todas las pantallas (Radar, Inicio, administración y portales), con su
   ayudante static/ibi_movil.js. Archivo nuevo a propósito: nginx guarda /static 30 días en el
   navegador, así que un cambio en ibi_styles.css no le llegaría al celular de Pedro.
   Reglas: nada se sale del ancho de la pantalla, textos legibles sin zoom, botones tocables,
   las tablas anchas en su propio carril con la primera columna fija, formularios en una columna.
   ════════════════════════════════════════════════════════════════ */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, video, canvas, iframe, embed, object { max-width: 100%; }

/* Carril propio para una tabla ancha (lo pone ibi_movil.js; también se puede escribir a mano) */
.ibi-tabla-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* ── Menú del Inicio y de las pantallas que heredan de inicio_base.html ── */
.ibi-nav-boton { display: none; }

@media (max-width: 900px) {
  .ibi-tabla-scroll > table th:first-child,
  .ibi-tabla-scroll > table td:first-child {
    position: sticky; left: 0; z-index: 1;
    background: var(--ibi-fondo, #fff);
    box-shadow: 1px 0 0 rgba(148,163,184,.35);
  }
  .ibi-tabla-scroll > table thead th:first-child { z-index: 2; }
}

@media (max-width: 767px) {
  body { overflow-wrap: break-word; }
  pre { white-space: pre-wrap; word-break: break-word; max-width: 100%; }

  /* iOS agranda la página al tocar un campo de menos de 16 px: así no hay zoom ni texto diminuto */
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]):not([type=color]),
  select, textarea { font-size: 16px !important; max-width: 100%; }

  /* objetivos táctiles de al menos 40 px (los botones nativos centran su texto solos; los enlaces con forma
     de botón —.btn, a.boton— los agranda ibi_movil.js con relleno parejo, así el texto queda centrado) */
  button, input[type=submit], input[type=button], input[type=reset], select {
    min-height: 40px;
  }
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]):not([type=color]):not([type=file]) {
    min-height: 40px;
  }

  /* modales y paneles flotantes: siempre dentro de la pantalla */
  dialog, [role=dialog], .modal-content, .modal-box, .modal-card {
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 16px);
    overflow: auto;
  }

  /* toast pegado al borde: dentro de la pantalla */
  .ibi-toast { left: 12px; right: 12px; bottom: 16px; }

  /* menú hamburguesa del Inicio */
  .ibi-nav-boton {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; min-width: 44px; padding: 0 14px;
    border: 1px solid var(--border, #E5E7EB); border-radius: 10px;
    background: var(--surface, #fff); color: var(--navy, #0F2044);
    font: 700 14px/1 'DM Sans', system-ui, sans-serif; cursor: pointer;
  }
  .ibi-nav-boton .ibi-hamb { display: inline-block; width: 18px; height: 2px; background: currentColor; position: relative; }
  .ibi-nav-boton .ibi-hamb::before, .ibi-nav-boton .ibi-hamb::after {
    content: ''; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor;
  }
  .ibi-nav-boton .ibi-hamb::before { top: -6px; }
  .ibi-nav-boton .ibi-hamb::after { top: 6px; }
}

/* Tabla → tarjetas en el celular (opt-in: class="ibi-tarjetas"; las etiquetas las pone ibi_movil.js
   desde los encabezados). Lo importante primero: la primera celda hace de título de la tarjeta. */
@media (max-width: 640px) {
  table.ibi-tarjetas, table.ibi-tarjetas tbody, table.ibi-tarjetas tr, table.ibi-tarjetas td { display: block; width: 100%; }
  table.ibi-tarjetas thead { display: none; }
  table.ibi-tarjetas tfoot { display: block; }
  table.ibi-tarjetas tr {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 12px;
    padding: 10px 12px;
    margin: 0 0 10px;
  }
  table.ibi-tarjetas td {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 5px 0 !important; border: 0 !important; text-align: right !important;
    min-height: 0; white-space: normal !important;
  }
  table.ibi-tarjetas td::before {
    content: attr(data-label);
    flex: 0 0 42%; text-align: left; font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 11.5px; font-weight: 600; color: var(--dim, #64748B);
    text-transform: none; letter-spacing: 0;
  }
  table.ibi-tarjetas td:first-child {
    display: block; text-align: left !important;
    font-weight: 700; font-size: 14px; color: var(--navy, #0F2044);
    padding-bottom: 8px !important; margin-bottom: 4px;
    border-bottom: 1px solid var(--border, #E5E7EB) !important;
  }
  table.ibi-tarjetas td:first-child::before { display: none; }
  table.ibi-tarjetas td[data-label=""]::before { display: none; }
  table.ibi-tarjetas td:empty { display: none; }
  table.ibi-tarjetas tr.total td:first-child { border-bottom: 0 !important; }
}

/* Pantallas armadas con Tailwind (Radar, expediente, bóveda, admin…): en el celular los rellenos y los títulos
   de escritorio se achican para que el contenido tenga el ancho (las tarjetas dentro de tarjetas se comían la pantalla) */
@media (max-width: 767px) {
  .p-8 { padding: 1rem !important; }
  .p-6 { padding: 1rem !important; }
  .p-5 { padding: .875rem !important; }
  .px-8, .px-6 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .py-8 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
  .mt-8 { margin-top: .75rem !important; }
  .gap-8, .gap-6 { gap: 1rem !important; }
  h1.text-4xl, .text-4xl { font-size: 1.6rem !important; line-height: 1.2 !important; }
  h1.text-3xl, h2.text-3xl, .text-3xl { font-size: 1.4rem !important; line-height: 1.25 !important; }
  h1.text-2xl, h2.text-2xl { font-size: 1.25rem !important; line-height: 1.3 !important; }
  /* textos diminutos de Tailwind (9–10 px): legibles sin zoom */
  .text-\[7px\], .text-\[8px\], .text-\[9px\] { font-size: 11px !important; }
  .text-\[10px\], .text-\[11px\] { font-size: 12px !important; }
  .text-xs { font-size: 12.5px !important; }
  /* grillas de varias columnas sin variante para celular: dos como máximo */
  .grid-cols-4, .grid-cols-5, .grid-cols-6 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .grid-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 380px) {
  .grid-cols-3 { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Encabezados de pantalla con botones a la derecha (local, expediente local, calendario…) y
   formularios en línea (cartera, costos, reservas, cierre): en el celular y la tableta bajan a la línea siguiente */
@media (max-width: 900px) {
  .top-nav { flex-wrap: wrap; gap: 12px; }
  .top-nav > * { min-width: 0; }
  .top-nav-actions { flex-wrap: wrap; }
  form.inline { display: flex !important; flex-wrap: wrap; max-width: 100%; }
  form.inline > select { flex: 1 1 100%; min-width: 0; width: 100%; }
  form.inline > input:not([type=checkbox]):not([type=radio]):not([type=hidden]) { flex: 1 1 120px; min-width: 0; width: auto; }
  td form.inline > input:not([type=checkbox]):not([type=radio]):not([type=hidden]) { flex-basis: 80px; }
}

/* Barras de arriba de los portales y de la bóveda (.nav-in / .nr): en el celular bajan de línea en vez de salirse */
@media (max-width: 767px) {
  .nav-in { flex-wrap: wrap; height: auto !important; min-height: 56px; row-gap: 8px; padding-top: 8px; padding-bottom: 8px; }
  .nav-in > * { min-width: 0; }
  .nr { flex-wrap: wrap; }
  /* casillas y opciones más grandes al dedo (la etiqueta de al lado también las marca) */
  input[type=checkbox], input[type=radio] { width: 20px; height: 20px; }
}