/* ══ iPhone: sin texto agrandado por el navegador (07-10-2026) ══
   Safari en iPhone «infla» por su cuenta la letra de algunas cajas angostas
   (text autosizing): en la ventana de documentos de Sesiones los nombres de
   archivo salían al triple de tamaño y cortados. Esto lo apaga en todo el
   sistema; el tamaño lo deciden nuestras reglas, no el navegador. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ══ Ventana de documentos (Sesiones y Revisión A/B) en teléfono ══
   En pantalla angosta la lista y el visor no caben juntos: se veía media
   lista cortada y el visor en blanco. Ahora la lista ocupa toda la ventana;
   al tocar un documento, el visor la sustituye, con «← Lista» para volver. */
.vback { display: none; }
@media (max-width: 640px) {
  .overlay { padding: 8px !important; }
  .overlay .modal { height: 94vh !important; height: 94dvh !important; border-radius: 14px !important; }
  .mhead { padding: 10px 12px !important; gap: 10px !important; }
  .mhead .mt { font-size: .95rem !important; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .mbody { display: flex !important; flex-direction: column; }
  .mbody > .expl { flex: 1; max-height: none !important; border: 0 !important; min-width: 0; }
  .mbody > .viewer { display: none !important; flex: 1; min-width: 0; }
  .mbody.ver > .expl { display: none !important; }
  .mbody.ver > .viewer { display: flex !important; }
  .mbody .item { min-width: 0; }
  .mbody .item > span, .mbody .item .inm { min-width: 0; overflow-wrap: anywhere; }
  .vtool { padding: 8px 10px !important; gap: 8px !important; flex-wrap: nowrap !important; }
  .vtool .vn { flex: 1; min-width: 0; overflow: hidden; }
  .vtool .vgrp { margin-left: 0 !important; flex: none; }
  .vback { display: inline-flex; flex: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   SIJAECH · Tabletas y teléfonos
   ----------------------------------------------------------------------
   El sistema se diseñó para escritorio. Esta hoja lo adapta a los equipos
   con los que se consulta fuera del escritorio —la tableta del Magistrado
   en primer lugar— sin tocar la maqueta original: todo va dentro de
   consultas de medio, así que en monitor nada cambia.

   Se distingue por PUNTERO, no solo por ancho: una tableta apaisada mide
   como un portátil pero no tiene cursor, y ahí las cosas que dependen del
   hover (la barra lateral que se asoma sola) simplemente no ocurren.
   ══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────
   1 · SIN CURSOR: lo que dependía del hover necesita un toque
   ───────────────────────────────────────────────────────────────────── */
@media (hover: none) {
  /* La zona caliente del borde izquierdo no sirve sin cursor: solo estorba
     capturando toques cerca del borde. */
  #sidebarHotzone { display: none !important; }

  /* Al abrir la barra con el botón, se oscurece el fondo para que se
     entienda que hay que cerrarla, y un toque fuera la cierra. */
  body.sb-peek::after,
  body.sb-pinned::after {
    content: ''; position: fixed; inset: 0; z-index: 10000;
    background: rgba(10, 21, 42, .38);
  }
  /* Los efectos de realce al pasar el cursor no aplican y dejaban las
     tarjetas «pegadas» en su estado de hover tras un toque. */
  .kpi-card:hover, .att-tile:hover, .ring-card:hover,
  .module-card:hover, .chart-card:hover { transform: none; box-shadow: var(--shadow); }
}

/* ─────────────────────────────────────────────────────────────────────
   2 · ÁREA DE TOQUE
   Un dedo necesita cerca de 44 px; muchos botones del sistema rondan los
   28. Se agrandan sin cambiar su aspecto, con relleno.
   ───────────────────────────────────────────────────────────────────── */
@media (hover: none), (max-width: 1024px) {
  .btn, .sidebar__item, .sidebar__subitem, .tab, .att-tile,
  button:not(.sbz-imgx):not(.sjv-cerrar) { min-height: 40px; }
  /* Alto no basta. Los botones de solo icono —la ✕ que cierra un cuadro de
     diálogo, sobre todo— medían 37 px de ancho: se alcanzaban de canto y el
     toque se iba al fondo, que cierra sin guardar. Se les da también ancho.
     Los que llevan texto ya pasan de sobra, así que esto no los mueve. */
  button:not(.sbz-imgx):not(.sjv-cerrar) { min-width: 40px; }
  .sidebar__item, .sidebar__subitem { padding-top: 11px; padding-bottom: 11px; }
  /* Los desplegables y campos, a 16 px: por debajo de eso iOS hace zoom al
     enfocarlos y descoloca toda la pantalla. */
  input, select, textarea { font-size: 16px !important; }
}

/* ─────────────────────────────────────────────────────────────────────
   3 · TABLETA

   El corte era «hasta 1024 px» a secas, y con eso se quedaba fuera la
   tableta del Magistrado cuando la acuesta: un iPad Pro apaisado mide 1194
   o 1366 px de ancho. Es más ancho que el corte, así que el sistema lo
   trataba como monitor: los indicadores volvían a salir de cuatro en
   cuatro, y las tablas dejaban de desplazarse dentro de su caja y empujaban
   la página entera de lado —que es justo lo que él describió como
   secciones cortadas—.

   Ancho no es lo mismo que escritorio. Se añade el caso «pantalla ancha
   pero sin cursor», que solo puede ser una tableta acostada. El tope de
   1400 px deja fuera los monitores conectados a equipos sin ratón, que sí
   son escritorio.
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px), (hover: none) and (max-width: 1400px) {
  .navbar { padding: 0 12px; }
  .brand__text small { display: none; }         /* el nombre largo no cabe */
  .user__info { display: none; }                /* basta el avatar */

  main, .content { padding-left: 14px; padding-right: 14px; }

  /* Los indicadores, de cuatro a dos por fila: a cuatro quedaban ilegibles */
  .rings-row { grid-template-columns: repeat(2, 1fr); }
  .charts-row { grid-template-columns: 1fr; }
  .attention-band { grid-template-columns: repeat(2, 1fr); }
  .kpi-card { flex-basis: calc(50% - 7px); }

  /* Las tablas se desplazan DENTRO de su caja: antes empujaban la página
     entera de lado y se perdía la barra lateral de vista. */
  .tabla-wrap, .table-wrap, .tbl-wrap, .card > table, .as-tabla-wrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  table { min-width: 640px; }

  /* Los modales aprovechan la pantalla: en tableta un cuadro de 560 px
     dejaba media pantalla vacía. */
  .sjv-caja, .sjx-caja {
    width: 100% !important;
    height: calc(100vh - 32px) !important;
    height: calc(100dvh - 32px) !important;   /* en iPad, 100vh mide de más */
  }
  .sbz-caja { max-width: 100%; }
}

/* ─────────────────────────────────────────────────────────────────────
   4 · TELÉFONO (hasta 640 px)
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .rings-row, .attention-band, .charts-row { grid-template-columns: 1fr; }
  .kpi-card { flex-basis: 100%; }
  .kpi-card__value { font-size: 38px; }
  .att-num { font-size: 28px; }

  .page-head__title { font-size: 1.3rem; }
  .section-title { font-size: .95rem; }

  /* La barra lateral ocupa casi todo el ancho al abrirse: en un teléfono
     una barra de 230 px encima del contenido no se lee bien. */
  #sidebar { width: min(84vw, 300px); }

  /* Los diálogos, a pantalla completa y pegados abajo: es donde alcanza
     el pulgar. */
  .sbz-fondo { padding: 0; align-items: flex-end; }
  .sbz-caja { max-width: 100%; border-radius: 16px 16px 0 0; max-height: 92vh; }
  .sjv-fondo, .sjx-fondo { padding: 0; }
  .sjv-caja, .sjx-caja { border-radius: 0; height: 100vh !important; height: 100dvh !important; }

  /* Los pares de campos se apilan */
  .grid2, .f2, .frow--2, .sbz-f2 { grid-template-columns: 1fr !important; }

  /* ── EL ENCABEZADO DE LOS MÓDULOS ──
     Tres módulos —Elaboración de Sentencias, Revisión Ponencia A y B y
     Sesiones— abren con emblema, título y una pastilla que dice el rol. Iban
     los tres en una fila que no podía partirse, y la pastilla lleva
     `white-space: nowrap` para que su texto no se corte.

     En el iPhone del Magistrado eso reventaba: la fila medía 487 px dentro de
     una pantalla de 390, y toda la página se corría de lado. Se arreglaba
     empujando con el dedo, pero cada vez que se tocaba algo volvía a saltar.

     Ahora la fila se parte y la pastilla baja a su propio renglón. Sigue sin
     cortar su texto, que es lo que se quería conservar. */
  .head { flex-wrap: wrap; }
  .head > div { flex: 1 1 100%; min-width: 0; }
  .rolepill { margin-left: 0; }

  /* El emblema y el título, juntos arriba; así la pastilla no queda sola en
     una fila con un hueco a su izquierda. */
  .head .emblem { order: -1; }
}

/* ─────────────────────────────────────────────────────────────────────
   4 bis · TELÉFONO — reporte del Magistrado desde su iPhone (22-09-2026)
   La barra del visor de módulos se partía en tres renglones («SIJAECH ›
   de Sentencias ·», Sugerencias y Volver al Portal apretados). En teléfono
   se queda en UNA línea: el nombre del módulo se recorta con «…», el buzón
   queda como icono y «Volver» se abrevia. El contenido gana altura.
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  #visorModulos .visor-modulos__barra { padding: 0 10px !important; gap: 8px; }
  .visor-modulos__marca { min-width: 0; flex: 1 1 auto; }
  .visor-modulos__sistema, .visor-modulos__sep { display: none; }
  .visor-modulos__titulo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; display: block; font-size: .85rem; }
  .sbz-btn { font-size: 0 !important; gap: 0 !important; padding: 0 11px !important; }
  .sbz-btn svg { width: 17px !important; height: 17px !important; }
  #visorModulos .visor-modulos__barra .visor-modulos__cerrar { margin-left: 6px; padding: .35rem .6rem; font-size: .76rem; white-space: nowrap; }
  .navbar__right { gap: 8px; }

  /* Un folio o un enlace larguísimo ya no empuja la página de lado. */
  body { overflow-wrap: break-word; }
  img, video, iframe { max-width: 100%; }
}

/* Teléfono acostado: la barra del visor, más baja, para dejarle altura al
   módulo. */
@media (max-height: 500px) and (orientation: landscape) {
  #visorModulos .visor-modulos__barra { height: 40px !important; min-height: 40px !important; }
  #visorFrame { height: calc(100vh - 40px) !important; height: calc(100dvh - 40px) !important; }
}

/* ─────────────────────────────────────────────────────────────────────
   5 · APAISADO BAJO (tableta acostada): se recupera altura
   ───────────────────────────────────────────────────────────────────── */
@media (max-height: 560px) and (orientation: landscape) {
  .sjv-caja, .sjx-caja { height: calc(100vh - 12px) !important; height: calc(100dvh - 12px) !important; }
  .sbz-cuerpo { max-height: 54vh; }
}

/* ─────────────────────────────────────────────────────────────────────
   6 · IMPRESIÓN: que un reporte salga limpio desde la tableta
   ───────────────────────────────────────────────────────────────────── */
@media print {
  .navbar, #sidebar, #sidebarHotzone, .sbz-btn,
  .visor-modulos__barra, .att-tile { display: none !important; }
  body { background: #fff; }
}