/* ═══════════════════════════════════════════════════════════════════════════
   CIMA · EL CELULAR (2026-09-21, pedido de Luis)
   ───────────────────────────────────────────────────────────────────────────
   «El modo móvil es indispensable que sea muy apropiado; entre menos scrolls
   horizontales y menos cosas apretadas, mejor.» Lo mismo que se hizo en ARIA:

   1. LA PÁGINA SE DESPLAZA ENTERA. En escritorio cada panel se desplaza por dentro
      (la app mide 100vh). En el teléfono eso dejaba la cabecera con foto clavada arriba
      —un tercio de la pantalla— y cajas con scroll dentro de cajas con scroll. Ahora el
      documento corre con el dedo y la cabecera se va hacia arriba.
   2. NADA DE SCROLL LATERAL. Las tablas pasan a fichas (cima-lujo.js les pone el rótulo
      de su columna a cada dato), las pestañas bajan de renglón, las pastillas parten
      línea y los filtros se acomodan de a dos.
   3. AIRE Y DEDO. 16 px de margen, campos de 44 px, botones de 40 px, letra de 16 px en
      los campos (sin eso el iPhone hace zoom al tocar uno).
   Todo vive dentro de media queries: el escritorio no cambia.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width:1024px){
  /* ── 1 · La página se desplaza entera ─────────────────────────────────── */
  /* Sólo el documento se desplaza. Si el <body> también lleva overflow, se vuelve contenedor
     de desplazamiento (que nunca se mueve) y lo «pegado arriba» deja de pegarse. */
  html{ height:auto !important; overflow-y:auto !important; overflow-x:clip !important; }
  body{ height:auto !important; overflow:visible !important; }
  #aplicacion.armazon:not(.oculto){ display:block !important; height:auto !important; min-height:100vh; min-height:100dvh; overflow:visible !important; }
  #aplicacion .zona-principal{ display:block !important; overflow:visible !important; min-height:100dvh; }
  #contenido{ overflow:visible !important; flex:none !important; height:auto !important; }
  /* Las cajas con su propio scroll dentro de la página (listas del tablero, la tabla de
     servicios, la lista de proveedores): se estiran a su contenido. */
  #contenido .sin-barra{ max-height:none !important; overflow-y:visible !important; height:auto !important; }
  #contenido .maestro-detalle{ height:auto !important; }
  /* §8 del libro: «hijo de rejilla que no encoge». La ficha abierta medía 1.389 px porque
     su contenido no la dejaba bajar del ancho natural de las pestañas. */
  #contenido .maestro-detalle > *, #zona-detalle *{ min-width:0; }
  #zona-detalle > div{ padding:1rem !important; }
  /* Las pestañas de la ficha (hasta 14): pastillas que bajan de renglón, la activa en
     relleno deep. Nada de deslizar de lado para encontrar «Pólizas». */
  #zona-detalle div.sin-barra:has(> .pestana), .caja-modal div.sin-barra:has(> .pestana){ flex-wrap:wrap !important; overflow-x:visible !important;
    gap:.4rem !important; padding:.9rem 1rem !important; border-bottom:1px solid rgba(234,223,206,.12) !important; background:transparent !important; }
  #zona-detalle .pestana, .caja-modal div.sin-barra > .pestana{ flex:none !important; min-width:auto !important; border:1px solid rgba(234,223,206,.16) !important;
    border-radius:99px !important; padding:.45rem .85rem !important; font-size:.84rem !important; }
  #zona-detalle .pestana.activa, .caja-modal div.sin-barra > .pestana.activa{ background-color:#005565 !important; border-color:#005565 !important; color:#FFFFFF !important; }
  .pestanas-editor .pestana, .lst-pestanas .pestana{ flex:none !important; }
  /* Mientras se lee una ficha, los filtros de la lista sobran: se esconden. */
  #contenido:has(.maestro-detalle.viendo-detalle) > div:not(.maestro-detalle){ display:none !important; }
  #contenido #zona-lista, #contenido #zona-detalle{ overflow:visible !important; border-right:0 !important; }
  /* El catálogo de ARIA va en un marco: del alto de la pantalla, así sus ventanas se ven
     enteras; la página corre primero y el marco después. */
  #contenido .ia-seccion{ height:calc(100dvh - 8px) !important; flex:none !important; }

  /* ── 2 · La cabecera con foto, compacta ───────────────────────────────── */
  .zona-principal > header{ min-height:0 !important; padding:4.1rem 1rem 1.25rem !important; gap:.9rem !important; }
  /* Flota y no se va con el desplazamiento (Luis, 2026-09-22): fijo a la pantalla, encima de
     la banda de la foto (capa 10) y de todo lo demás. */
  #boton-menu{ position:fixed !important; top:12px !important; left:12px !important; width:42px !important; height:42px !important; z-index:60 !important; }
  #boton-menu .material-icons-outlined{ font-size:20px !important; }
  .zona-principal > header > div[style*="flex:1"]{ flex:1 1 100% !important; min-width:0 !important; }
  .cima-cab__eyebrow{ font-size:.6rem; letter-spacing:.22em; margin-bottom:.5rem; }
  #titulo-vista{ font-size:2.1rem !important; }
  #sub-vista{ font-size:.84rem !important; }
  /* La cifra arriba a la derecha, en el renglón del botón de menú: sigue siendo lo más
     grande de la pantalla (44 px contra un título de 34). */
  .cima-cifra{ position:absolute; top:.7rem; right:1rem; align-items:flex-end; gap:.2rem; margin:0; }
  .cima-cifra__n{ font-size:2.75rem; }
  .cima-cifra__rot{ font-size:.56rem; letter-spacing:.2em; }
  #acciones-vista{ flex:1 1 100% !important; width:100%; gap:.5rem !important; }
  #acciones-vista .btn{ flex:1 1 auto; min-height:42px; justify-content:center; }
  #acciones-vista select, #acciones-vista input{ flex:1 1 100%; min-height:42px; }

  /* ── 3 · El riel es un cajón ───────────────────────────────────────────── */
  .barra-lateral{ width:min(300px, 86vw) !important; box-shadow:0 30px 70px -18px rgba(26,38,51,.62) !important; }
  #velo-menu{ background:rgba(20,29,39,.62) !important; }
  .sidebar-link{ padding:.75rem .95rem !important; }
  .sidebar-link > span:not(.material-icons-outlined):not(.sidebar-cuenta){ font-size:.92rem !important; }
}

/* LISTA Y FICHA LADO A LADO (celular en horizontal, tableta: 821–1024 px). Luis: «en horizontal,
   en proveedores no se muestra la información del proveedor». La lista y la ficha quedaban una
   debajo de la otra y la ficha terminaba al final de 415 filas. Ahora van en dos columnas y la
   ficha queda PEGADA arriba, con su propio desplazamiento: se toca un proveedor y se ve al lado. */
@media (min-width:821px) and (max-width:1024px){
  #contenido .maestro-detalle{ display:grid !important; grid-template-columns:minmax(240px,34%) minmax(0,1fr) !important; align-items:start; }
  #contenido .maestro-detalle > #zona-lista{ display:block !important; border-right:1px solid rgba(234,223,206,.12) !important; }
  #contenido .maestro-detalle > #zona-detalle{ display:block !important; position:sticky !important; top:0; max-height:100dvh !important; height:auto !important; overflow-y:auto !important; overscroll-behavior:contain; }
  #volver-a-lista{ display:none !important; }
}
@media (max-width:820px){
  #contenido .maestro-detalle{ grid-template-columns:minmax(0,1fr) !important; }
}
/* Pantallas BAJAS (celular en horizontal): la cabecera con foto, más baja. */
@media (max-height:560px) and (max-width:1024px){
  .zona-principal > header{ padding:3.6rem 1rem .9rem !important; }
  #titulo-vista{ font-size:1.7rem !important; }
  #sub-vista{ display:none; }
  .cima-cifra__n{ font-size:2.2rem; }
}

@media (max-width:820px){
  /* ── 4 · Aire ──────────────────────────────────────────────────────────── */
  .lienzo{ padding:1.25rem 1rem 3rem !important; }
  .seccion{ margin-bottom:2.25rem !important; }
  .seccion-cabeza h3, .tf-lista-cab h3{ font-size:1.45rem !important; }
        .cifras-madre{ grid-template-columns:1fr 1fr !important; }
  .cifra-madre{ padding:1.2rem 1.1rem !important; }
  .cifra-madre .n, .stat-cifra, .tf-cifra{ font-size:2.5rem !important; }
  .tarjeta-atencion{ padding:1.2rem 1.15rem !important; }
  .tarjeta-atencion .cifra{ font-size:2.8rem !important; }
  .atencion, .tf-rejilla, .lst-rejilla{ grid-template-columns:1fr !important; }

  /* ── 5 · Las barras de filtro: la búsqueda a todo el ancho, lo demás de a dos ── */
  #contenido > div[style*="border-bottom"]:first-child, .enl-barra{ padding:.9rem 1rem !important; gap:.6rem !important; }
  #contenido > div[style*="border-bottom"]:first-child > div[style*="position:relative"]{ flex:1 1 100% !important; min-width:0 !important; }
  #contenido > div[style*="border-bottom"]:first-child > select{ flex:1 1 calc(50% - .3rem) !important; min-width:0 !important; }
  #contenido > div[style*="border-bottom"]:first-child > label{ flex:1 1 calc(50% - .3rem); min-height:40px; }
  #contenido > div[style*="border-bottom"]:first-child > .etq{ margin-left:0 !important; }
  #contenido > div[style*="padding:1rem 1.5rem"], #contenido > div[style*="padding:0 1.5rem"]{ padding-left:1rem !important; padding-right:1rem !important; }
  .segmento{ display:flex !important; width:100%; }
  .segmento .enl-chip{ flex:1 1 auto; justify-content:center; }

  /* ── 6 · Nada de scroll lateral ───────────────────────────────────────── */
  .pastilla, .etq, .enl-estado, .cl-tipo, .chip-ia{ white-space:normal !important; text-align:left; }
  .stat-fichas{ gap:.5rem !important; }
  .lst-pestanas, .pestanas-editor{ flex-wrap:wrap !important; overflow-x:visible !important; row-gap:.15rem; }
  .pestanas-editor{ position:static !important; margin:0 0 1rem !important; padding:0 0 .2rem !important; }
  #contenido td, #zona-modales td{ overflow-wrap:anywhere; }
  .fila-barra{ grid-template-columns:minmax(0,1fr) auto !important; }
  .lst-fila, .lst-agregar{ flex-wrap:wrap !important; }
  .lst-padre{ max-width:100% !important; }

  /* LAS TABLAS COMO FICHAS. `.tabla-movil` ya existía en la app 10 (rótulo a la izquierda,
     dato a la derecha); `.cima-fichas` es la misma idea para las tablas que no la tenían
     (clientes, tarifas, historial…), y cima-lujo.js pone los rótulos. Acá las dos se ven
     igual: el rótulo en versalitas ARRIBA del dato — un nombre largo no cabe en media fila. */
  .tabla-movil thead, .cima-fichas thead{ display:none !important; }
  .tabla-movil, .tabla-movil tbody, .tabla-movil tr, .tabla-movil td,
  .cima-fichas, .cima-fichas tbody, .cima-fichas tr, .cima-fichas td{ display:block !important; width:100% !important; }
  .tabla-movil colgroup, .cima-fichas colgroup{ display:none; }
  .tabla-movil tr, .cima-fichas tr{ background-color:#222E3A !important; border:1px solid rgba(234,223,206,.16) !important; border-radius:14px !important;
    margin:0 0 .75rem !important; overflow:hidden; padding:.35rem 0; }
  .tabla-movil td, .cima-fichas td{ display:block !important; text-align:left !important; padding:.6rem 1rem !important; background:transparent !important;
    border-bottom:1px solid rgba(234,223,206,.08) !important; }
  .tabla-movil td:last-child, .cima-fichas td:last-child{ border-bottom:0 !important; }
  .tabla-movil td::before, .cima-fichas td[data-rotulo]:not([data-rotulo=""])::before{ content:attr(data-rotulo); display:block; margin:0 0 .3rem;
    font-size:.6rem !important; letter-spacing:.2em; text-transform:uppercase; color:rgba(234,223,206,.70); }
  .tabla-movil td:empty, .cima-fichas td:empty{ display:none !important; }
  .tabla-movil tr.f-ok, .cima-fichas tr.f-ok{ border-left:3px solid #7D9B5B !important; }
  .tabla-movil tr.f-alerta, .cima-fichas tr.f-alerta{ border-left:3px solid #8A6A2F !important; }
  .tabla-movil tr.f-mal, .cima-fichas tr.f-mal{ border-left:3px solid #B3261E !important; }
  .tabla-movil tbody tr:hover td, .cima-fichas tbody tr:hover td{ background:transparent !important; }
  /* La fila de acciones de una ficha: botones del tamaño del dedo, a la izquierda. */
  .tabla-movil td[data-rotulo="Acciones"], .cima-fichas td[data-rotulo="Acciones"], .cima-fichas td[data-rotulo=""]{ display:flex !important; gap:.5rem; flex-wrap:wrap; }
  .tabla-movil td[data-rotulo="Acciones"]::before{ display:none; }
  /* Las fichas de la tabla de la app 10 (servicios, proveedores…): lo que se lee primero
     —proveedor y servicio— a todo el ancho; los datos cortos, de a dos por renglón. */
  .tabla-movil tr{ display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .tabla-movil td{ grid-column:span 1; }
  .tabla-movil td:nth-child(-n+2), .tabla-movil td[data-rotulo="Acciones"]{ grid-column:1 / -1; }
  .tabla-movil td:nth-child(n+3):not([data-rotulo="Acciones"]){ border-bottom:0 !important; }
  /* Sin modo edición, los botones de la fila no existen: la fila de acciones tampoco. */
  body:not(.modo-edicion) .tabla-movil td[data-rotulo="Acciones"]:not(:has(> :not(.solo-edicion))){ display:none !important; }
  /* Las fichas de las demás tablas (clientes, tarifas…): el primer dato —el nombre— a todo
     el ancho, el resto de a dos. Una ficha de cliente bajó de 7 renglones a 4. */
  .cima-fichas tr{ display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .cima-fichas td:first-child, .cima-fichas td[data-rotulo=""], .cima-fichas td[data-rotulo="Acciones"]{ grid-column:1 / -1; }
  .cima-fichas td:not(:first-child){ border-bottom:0 !important; }
  .cima-fichas td:first-child{ border-bottom:1px solid rgba(234,223,206,.08) !important; }
  #contenido > .cl-lista, #contenido > .enl-lista{ padding-left:1rem !important; padding-right:1rem !important; }
  .tf-tabla{ min-width:0 !important; }
  .tf-tabla-envoltura{ overflow-x:visible !important; border:0 !important; background:transparent !important; }
  .cl-tabla{ min-width:0 !important; }
  #contenido [style*="overflow-x:auto"]:has(> .cima-fichas){ overflow-x:visible !important; }

  /* ── 7 · Los campos y los botones, del tamaño del dedo ────────────────── */
  #aplicacion input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
  #aplicacion select, #aplicacion textarea,
  #zona-modales input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
  #zona-modales select, #zona-modales textarea{ font-size:16px !important; min-height:44px; }
  #aplicacion textarea, #zona-modales textarea{ min-height:88px; }
  #aplicacion .btn, #zona-modales .btn{ min-height:40px; }
  #aplicacion .btn-icono, #zona-modales .btn-icono{ width:40px !important; height:40px !important; }
  #aplicacion input[type=checkbox], #zona-modales input[type=checkbox]{ width:20px; height:20px; }

  /* ── 8 · Las ventanas: una hoja que sube desde abajo, a todo el ancho ──── */
  .velo{ padding:0 !important; align-items:flex-end !important; }
  .caja-modal{ max-width:100% !important; width:100% !important; max-height:94dvh !important; border-radius:14px 14px 0 0 !important;
    border-bottom:0 !important; }
  .caja-modal > div{ padding-left:1rem !important; padding-right:1rem !important; }
  .panel-editor, .cp-rejilla, .cl-com-rejilla{ grid-template-columns:1fr !important; }
  .cp-grupos, .cp-opciones{ grid-template-columns:1fr !important; }
  .enl-item{ grid-template-columns:1fr !important; }
  .enl-aria{ border-right:0 !important; border-bottom:1px solid rgba(234,223,206,.12) !important; }
  #aviso{ left:1rem !important; right:1rem; transform:translate(0, calc(100% + 3rem)) !important; text-align:center; }
  #aviso.visible{ transform:none !important; }
}

@media (max-width:480px){
  .cifras-madre{ grid-template-columns:1fr !important; }
  #titulo-vista{ font-size:1.95rem !important; }
}

@media (prefers-reduced-motion:reduce){
  .barra-lateral{ transition:none !important; }
}

@media (max-width:820px){
  /* Las pestañas de las fichas, más compactas: de 5 renglones a 3–4. */
  .caja-modal .pestanas-editor{ gap:.3rem !important; padding:.6rem 0 .7rem !important; }
  .caja-modal .pestanas-editor .pestana{ padding:.34rem .7rem !important; font-size:.8rem !important; border:1px solid rgba(234,223,206,.16) !important; border-radius:99px !important; }
  .caja-modal .pestanas-editor .pestana.activa{ background-color:#005565 !important; border-color:#005565 !important; }
  .caja-modal .pestanas-editor .pestana .material-icons-outlined{ font-size:15px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   12 · UN ÍTEM, UNA LÍNEA (Luis, 2026-09-22)
   «En móvil el listado de proveedores no puede ser esa tabla enorme: tiene que resumirse
   y mostrarse sólo una línea del proveedor, y eso aplica a cualquier tabla de la app.»
   La lista pasa a ser una sola hoja con renglones: a la izquierda el nombre, a la derecha
   un dato corto, y la fila entera se toca para abrir la ficha, que es donde está todo.
   Las celdas siguen en el DOM —sólo ocultas—, así que exportar y filtrar no cambian.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:820px){
  .cima-1l{ display:block !important; width:100% !important; min-width:0 !important; table-layout:auto !important;
    background:#222E3A !important; border:1px solid rgba(234,223,206,.14) !important; border-radius:14px !important; overflow:hidden !important; }
  .cima-1l tbody{ display:block !important; width:100% !important; }
  .cima-1l thead, .cima-1l colgroup{ display:none !important; }

  .cima-1l tbody > tr{ display:flex !important; align-items:center !important; gap:.7rem; width:100% !important;
    min-height:52px; margin:0 !important; padding:.5rem 1.5rem .5rem .95rem !important;
    background:transparent !important; border:0 !important; border-radius:0 !important;
    border-bottom:1px solid rgba(234,223,206,.09) !important; overflow:hidden;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EADFCE' stroke-opacity='.45' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") !important;
    background-repeat:no-repeat !important; background-position:right .4rem center !important; background-size:15px 15px !important; }
  .cima-1l tbody > tr:last-child{ border-bottom:0 !important; }
  .cima-1l tbody > tr:active{ background-color:rgba(234,223,206,.06) !important; }

  /* Sólo se ve el nombre; el resto de las columnas se esconde. */
  #contenido .cima-1l.cima-1l tbody > tr > td{ display:none !important; }
  #contenido .cima-1l.cima-1l tbody > tr > td.cima-1l__t{ display:block !important; flex:1 1 auto; min-width:0;
    padding:0 !important; border:0 !important; background:transparent !important;
    white-space:nowrap !important; overflow:hidden; text-overflow:ellipsis; word-break:normal !important;
    font-size:.9rem; font-weight:600; line-height:1.35; color:#EADFCE; }
  .cima-1l td.cima-1l__t::before{ display:none !important; }          /* sin el rótulo de la columna */
  .cima-1l td.cima-1l__t > :nth-child(n+2){ display:none !important; } /* sólo el primer renglón */
  .cima-1l td.cima-1l__t .etq, .cima-1l td.cima-1l__t .chip-ia{ display:none !important; }
  .cima-1l td.cima-1l__t a{ color:inherit !important; text-decoration:none !important; font-weight:600 !important; }

  /* El dato corto de la derecha (tipo y ecosistema, o el proveedor del servicio). */
  .cima-1l tbody > tr::after{ content:attr(data-resumen); flex:0 1 auto; max-width:52%;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:right;
    font-size:.68rem; letter-spacing:.05em; color:rgba(234,223,206,.58); }

  /* El semáforo de vigencia, en un filo de color a la izquierda. */
  .cima-1l tbody > tr.f-ok{ box-shadow:inset 3px 0 0 #7D9B5B; }
  .cima-1l tbody > tr.f-alerta{ box-shadow:inset 3px 0 0 #8A6A2F; }
  .cima-1l tbody > tr.f-mal{ box-shadow:inset 3px 0 0 #B3261E; }

  /* La cola de la carga continua («Mostrando 60 de 2105») se queda como está. */
  .cima-1l tbody > tr.cima-mas{ display:block !important; padding:.7rem 1rem !important; background-image:none !important; }
  .cima-1l tbody > tr.cima-mas::after{ content:none !important; }
  #contenido .cima-1l.cima-1l tbody > tr.cima-mas > td{ display:block !important; padding:0 !important; }

  /* Sin barra lateral: la hoja ocupa el ancho de la pantalla (el alto ya lo suelta `.sin-barra`). */
  #contenido [style*="overflow-x:auto"]:has(> .cima-1l), #contenido [style*="overflow:auto"]:has(> .cima-1l){ overflow-x:visible !important; }
}