/* =============================================
   CLICK HUB — MÓVIL

   El hub se instala en la pantalla de inicio del iPhone (Safari →
   Compartir → Añadir a pantalla de inicio) y debe sentirse app: nada de
   scroll horizontal en la página, el menú como gaveta, los modales como
   hojas que suben desde abajo y respeto por el notch y la barra de
   gestos (env(safe-area-inset-*)).

   Regla base: 820px hacia abajo = teléfono/tablet en vertical.
   Los estilos en línea de las vistas se doblegan con selectores de
   atributo, la misma técnica que ya usa el modo oscuro en main.css.
   ============================================= */

/* Solo existen en móvil: el botón de menú, el de volver del chat y el
   desplegable de período de Anuncios/Instagram */
.wa-volver { display: none; }
.rango-movil { display: none; }
/* El botón de menú solo existe en móvil */
.sb-mobile-btn { display: none; }
#sbBackdrop { display: none; }

@media (max-width: 820px) {

  /* =========================================
     1. BASE — nunca scroll horizontal de página
     ========================================= */
  html, body {
    overflow-x: hidden;
    max-width: 100%;
    /* rebote de iOS fuera: el scroll vive dentro del contenedor */
    overscroll-behavior-y: none;
  }
  .app-shell {
    height: 100vh;
    height: 100dvh;   /* iOS: descuenta la barra del navegador de verdad */
  }
  .main-area { width: 100%; }

  /* =========================================
     2. SIDEBAR COMO GAVETA
     ========================================= */
  .sidebar,
  .sidebar.collapsed,
  .sidebar.collapsed.peek {
    position: fixed;
    top: 0; left: 0;
    width: 272px !important;
    max-width: 84vw;
    height: 100vh !important;
    height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateX(-101%);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
    z-index: 1300;
    box-shadow: none;
  }
  body.sb-open .sidebar { transform: none; box-shadow: 14px 0 50px rgba(0, 0, 0, .45); }

  /* Colapsar/fijar son gestos de escritorio */
  .sb-ctl { display: none !important; }

  #sbBackdrop {
    display: block;
    position: fixed; inset: 0;
    z-index: 1250;
    background: rgba(4, 10, 20, .55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s ease;
  }
  body.sb-open #sbBackdrop { opacity: 1; pointer-events: auto; }
  /* con la gaveta abierta, el fondo no se mueve */
  body.sb-open .view-container { overflow: hidden; }

  /* Toque más generoso en el menú */
  .nav-item, .nav-item-row { padding: 11px 12px; font-size: 14px; }
  .nav-subitem { padding: 9px 10px; font-size: 13px; }

  /* =========================================
     3. TOPBAR
     ========================================= */
  .topbar {
    height: auto;
    min-height: 54px;
    padding: calc(env(safe-area-inset-top) + 9px) 12px 2px;
    gap: 8px;
  }
  .sb-mobile-btn {
    display: flex;
    align-items: center; justify-content: center;
    width: 38px; height: 38px;
    flex-shrink: 0;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 11px;
    color: var(--text-primary);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    -webkit-tap-highlight-color: transparent;
  }
  .sb-mobile-btn:active { transform: scale(.94); }
  .sb-mobile-btn svg { width: 19px; height: 19px; }

  .topbar-center > div { max-width: none !important; }
  .topbar-right { min-width: 0 !important; gap: 2px; }
  .topbar-btn { width: 34px; height: 34px; }
  .search-bar { min-width: 0; padding: 8px 12px; }
  .search-bar input { font-size: 14px !important; }

  /* ── Una sola línea: menú, buscador, campana y perfil ──
     La fila del buscador no puede envolver (si envuelve, el botón +
     cae abajo y el menú se desalinea al centrarse en una barra más
     alta). El + se mete DENTRO del buscador, en su esquina derecha. */
  .topbar { align-items: center; flex-wrap: nowrap; }
  /* sin min-width:0 el buscador no puede encogerse y termina montado
     encima de la campana */
  .topbar-center { min-width: 0; }
  .topbar-center > div:first-child {
    position: relative;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 0 !important;
    min-width: 0;
  }
  .topbar-center .search-bar { flex: 1 1 auto; }
  .topbar-center > div:first-child > div:last-child {
    /* el HTML trae position:relative en línea, hay que pasarle por encima */
    position: absolute !important;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
  }
  #qcBtn { width: 29px !important; height: 29px !important; }
  #qcBtn svg { width: 15px !important; height: 15px !important; }
  /* el texto del buscador no se mete debajo del +
     (min-width:0 en el input: sin eso no baja de su ancho natural y el
     texto se desliza por debajo del botón al escribir) */
  .search-bar { padding-right: 42px; }
  .search-bar input { min-width: 0; }
  /* el menú de "crear nuevo" se abre hacia la izquierda: pegado al borde
     derecho no cabría */
  #qcMenu { left: auto !important; right: -4px; }

  #gsPanel { max-width: none !important; width: calc(100vw - 24px) !important; left: 0 !important; transform: none !important; }
  #ntfPanel { width: min(370px, calc(100vw - 24px)) !important; }
  #qcMenu { width: min(260px, calc(100vw - 24px)) !important; }

  /* =========================================
     4. CONTENIDO
     ========================================= */
  .view-container {
    padding: 14px 13px calc(28px + env(safe-area-inset-bottom));
    overflow-x: hidden;
  }
  .page-header { flex-wrap: wrap; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
  .page-header > * { min-width: 0; }
  /* La acción principal de la sección ocupa el ancho, como en la
     referencia: en el teléfono es el botón que de verdad se usa */
  .page-header .flex { flex-wrap: wrap; width: 100%; }
  .page-header .flex .btn { flex: 1 1 auto; justify-content: center; }
  .page-header > .btn { flex: 1 1 100%; justify-content: center; }
  /* Lo que solo tiene sentido sentado frente a la computadora
     (exportar, imprimir, configuraciones sueltas) se marca con esta
     clase y desaparece del teléfono */
  .solo-escritorio { display: none !important; }
  /* Dashboard: los atajos a Bandeja/Proyectos/CRM/Panel ya viven en el
     menu lateral; en el telefono solo empujan los numeros fuera de vista */
  .dash-accesos { display: none !important; }
  /* Los filtros de periodo del CRM se deslizan de lado en vez de
     partirse en dos lineas y empujar el tablero fuera de vista */
  .crm-periodo { -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .crm-periodo::-webkit-scrollbar { display: none; }
  .crm-periodo > * { flex-shrink: 0; }
  .page-title { font-size: 19px; }
  .card { padding: 16px 15px; }
  .card-sm { padding: 13px 14px; }

  /* =========================================
     5. REJILLAS — una columna en el teléfono
     Se respetan: el calendario de 7 días, las rejillas que ya son
     fluidas (auto-fit/auto-fill) y los tableros kanban, que llevan
     su propio scroll horizontal por dentro.
     ========================================= */
  [style*="grid-template-columns"]:not([style*="auto-fit"]):not([style*="auto-fill"]):not([style*="repeat(7"]):not([style*="overflow-x:auto"]) {
    grid-template-columns: 1fr !important;
  }
  .grid-2, .grid-3, .form-row, .detail-panel-grid { grid-template-columns: 1fr !important; }
  /* ── Que una tabla ancha no estire su columna ──
     Una celda de rejilla mide por el contenido más ancho que tenga
     dentro. Con una tabla de 13 facturas, la columna crecía a 581px en
     una pantalla de 440 y se llevaba consigo TODO lo demás: los montos
     del resumen y los botones quedaban fuera de vista. min-width:0 deja
     que la columna se encoja y la tabla se desliza por dentro. */
  [style*="grid-template-columns"] > *,
  [style*="display:flex"] > * { min-width: 0; }
  .kpi-grid { grid-template-columns: 1fr 1fr !important; gap: 10px; }
  .kpi-value { font-size: 23px; }
  .kpi-card { padding: 15px 16px; }
  .kpi-icon { top: 13px; right: 13px; width: 30px; height: 30px; }

  /* Calendario mensual: 7 columnas apretadas pero legibles */
  [style*="repeat(7,1fr)"] > div { min-height: 56px !important; padding: 4px 3px !important; }
  [style*="repeat(7,1fr)"] > div > div { font-size: 9.5px !important; }


  /* =========================================
     CRM — TABLEROS QUE SE DESLIZAN DE LADO
     Kanban y Agenda apilaban sus columnas una debajo de otra por la regla
     general de envolver, y quedaba una lista larguisima. Aqui se pasan a
     una sola fila que se desliza, con cada columna casi a pantalla
     completa y anclada al deslizar: se pasa de etapa como quien pasa una
     pagina.
     ========================================= */
  .crm-tablero {
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-left: 14px !important;
    padding-right: 14px !important;
    gap: 10px !important;
  }
  .crm-tablero::-webkit-scrollbar { display: none; }
  .crm-tablero > .crm-col {
    min-width: 85vw !important;
    max-width: 85vw;
    flex: 0 0 85vw;
    scroll-snap-align: center;
  }

  /* Kanban: cada columna casi a pantalla completa */
  .pipeline-col { min-width: 76vw; }

  /* Mi Espacio — los cuatro filtros de tareas en una sola línea:
     "Completadas" caía sola a un segundo renglón */
  .me-filtros {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 3px !important;
  }
  .me-filtros::-webkit-scrollbar { display: none; }
  .me-filtros > button {
    flex: 1 0 auto;
    justify-content: center;
    white-space: nowrap;
    padding: 6px 8px !important;
    font-size: 11.5px !important;
    gap: 4px !important;
  }

  /* =========================================
     CONTABILIDAD — DETALLE Y COMPARTIR
     ========================================= */
  /* Al envolver, el enlace de volver quedaba pegado a los botones */
  .cb-detalle-top { gap: 14px !important; margin-bottom: 22px !important; }
  .cb-detalle-top .flex { width: 100%; }
  .cb-detalle-top .btn { flex: 1 1 auto; justify-content: center; }
  /* Imprimir, Exportar y Filtrar no tienen sentido desde el teléfono:
     con ellos fuera, "Enviar facturas" y "Nueva factura" quedan uno al
     lado del otro en la misma fila */
  .cb-no-movil { display: none !important; }

  /* =========================================
     LINEAS DE FACTURA / COTIZACION / PROVEEDOR
     La tabla de 8 columnas aplastaba las casillas de cantidad y precio
     hasta que el numero ni se veia. En el telefono cada linea pasa a una
     rejilla: el servicio a lo ancho, debajo cantidad, precio y descuento
     con casillas grandes, y al final impuesto, subtotal y el basurero.
     ========================================= */
  table:has(> tbody#invItemsBody) { display: block; width: 100%; }
  table:has(> tbody#invItemsBody) thead { display: none; }
  #invItemsBody { display: block; width: 100%; }
  #invItemsBody tr {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 9px;
    padding: 13px 2px;
    border-bottom: 1px solid var(--border-light);
  }
  #invItemsBody td {
    display: block;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
  }
  #invItemsBody td:nth-child(1) { display: none; }        /* numero de linea */
  #invItemsBody td:nth-child(2) { grid-column: 1 / -1; }  /* servicio + descripcion */
  #invItemsBody td:nth-child(6) { grid-column: 1 / 2; }   /* impuesto */
  #invItemsBody td:nth-child(7) {                          /* subtotal */
    grid-column: 2 / 3; align-self: center; text-align: right !important;
    padding-top: 14px !important; font-size: 14px !important;
  }
  #invItemsBody td:nth-child(8) {                          /* eliminar linea */
    grid-column: 3 / 4; justify-self: end; align-self: center;
    padding-top: 12px !important;
  }
  /* Etiqueta arriba de cada casilla, porque el encabezado de la tabla
     se oculta */
  #invItemsBody td:nth-child(3)::before,
  #invItemsBody td:nth-child(4)::before,
  #invItemsBody td:nth-child(5)::before,
  #invItemsBody td:nth-child(6)::before {
    display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .4px;
    color: var(--text-muted); text-transform: uppercase; margin-bottom: 4px;
  }
  #invItemsBody td:nth-child(3)::before { content: "Cant."; }
  #invItemsBody td:nth-child(4)::before { content: "Precio RD$"; }
  #invItemsBody td:nth-child(5)::before { content: "Desc. %"; }
  #invItemsBody td:nth-child(6)::before { content: "Impuesto"; }
  #invItemsBody td input, #invItemsBody td select {
    width: 100% !important;
    font-size: 15px !important;
    padding: 10px 8px !important;
  }
  #invItemsBody td:nth-child(3) input,
  #invItemsBody td:nth-child(4) input,
  #invItemsBody td:nth-child(5) input { text-align: center; }

  /* NCF al lado del tipo de comprobante, en una sola linea */
  div:has(> select#inv-tipo) { display: flex; align-items: center; gap: 10px; text-align: left !important; }
  div:has(> select#inv-tipo) > select { flex: 1; min-width: 0 !important; margin-bottom: 0 !important; }
  div:has(> select#inv-tipo) > div { margin: 0 !important; white-space: nowrap; flex-shrink: 0; }

  /* =========================================
     ENVIAR FACTURAS POR CORREO
     Una tabla de 8 columnas no cabe: cada factura pasa a ser una
     tarjeta. Se conservan las filas y sus datos porque el envío los
     lee de ahí; solo cambia cómo se ven.
     ========================================= */
  #modalEnvioFacturas { padding: 0 !important; align-items: flex-end !important; }
  #modalEnvioFacturas > div {
    max-width: 100% !important;
    max-height: 94dvh !important;
    border-radius: 20px 20px 0 0 !important;
  }
  /* cabecera: título y la X en la misma línea */
  #modalEnvioFacturas > div > div:first-child { padding: 18px 16px 14px !important; flex-wrap: nowrap !important; gap: 10px; }
  #modalEnvioFacturas > div > div:first-child h2 { font-size: 15.5px !important; }
  #modalEnvioFacturas > div > div:first-child p { font-size: 12px !important; }
  /* barra de selección: el buscador a lo ancho, debajo */
  #modalEnvioFacturas > div > div:nth-child(2) { padding: 12px 16px !important; flex-wrap: wrap !important; }
  #modalEnvioFacturas #envioSearch { width: 100% !important; margin-top: 4px; }
  #modalEnvioFacturas > div > div:nth-child(2) > div { margin-left: 0 !important; width: 100%; }

  /* la tabla, en tarjetas */
  #modalEnvioFacturas thead { display: none; }
  #modalEnvioFacturas table, #modalEnvioFacturas tbody { display: block; width: 100%; }
  #modalEnvioFacturas tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    position: relative;
    padding: 11px 12px 11px 40px !important;
    margin: 0 12px 8px;
    border: 1px solid var(--border);
    border-radius: 12px;
  }
  #modalEnvioFacturas tbody td { display: block; padding: 0 !important; border: none !important; text-align: left !important; }
  #modalEnvioFacturas tbody td:nth-child(1) { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); }
  #modalEnvioFacturas tbody td:nth-child(3) { order: 1; flex: 1 1 100%; font-size: 13px !important; }
  #modalEnvioFacturas tbody td:nth-child(2) { order: 2; font-size: 11.5px !important; }
  #modalEnvioFacturas tbody td:nth-child(4) { order: 3; }
  #modalEnvioFacturas tbody td:nth-child(5),
  #modalEnvioFacturas tbody td:nth-child(7) { display: none; }   /* mes y por cobrar: al detalle */
  #modalEnvioFacturas tbody td:nth-child(6) { order: 4; margin-left: auto; font-size: 13px !important; }
  #modalEnvioFacturas tbody td:nth-child(8) { order: 5; flex: 0 0 auto; }

  /* pie: el aviso arriba y los botones a lo ancho */
  #modalEnvioFacturas > div > div:last-child {
    flex-direction: column;
    align-items: stretch !important;
    gap: 10px;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom)) !important;
  }
  #modalEnvioFacturas > div > div:last-child > div { width: 100%; }
  #modalEnvioFacturas > div > div:last-child .btn { flex: 1 1 auto; justify-content: center; }

  /* Compartir: una sola columna. La vista previa del correo a 440px se
     leía a dos palabras por línea; debajo del formulario y en modo
     edición se ve el asunto y el mensaje de verdad. */
  .cmp-cuerpo { flex-direction: column !important; overflow-y: auto !important; }
  .cmp-cuerpo > div { width: 100% !important; flex: 0 0 auto !important; }
  .cmp-previa { padding: 14px !important; background: var(--surface) !important; border-top: 1px solid var(--border); }

  /* =========================================
     PANEL DE CONTROL
     ========================================= */
  .pc-hero { padding: 18px 15px !important; gap: 14px !important; }
  /* Los cuatro números van en una sola fila: si envuelven, "ALERTAS"
     cae solo debajo y se ve roto */
  .pc-hero-kpis {
    width: 100%;
    flex-wrap: nowrap !important;
    justify-content: space-between;
  }
  .pc-hero-kpis > div { padding: 0 4px !important; }
  .pc-hero-kpis > div > div:first-child { font-size: 21px !important; }
  .pc-hero-kpis > div > div:last-child { font-size: 8.5px !important; letter-spacing: .4px !important; }

  /* Las cuatro pestañas en una línea que se desliza, para que
     "Comparativas" no caiga a un segundo renglón */
  .pc-tabs {
    width: 100% !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pc-tabs::-webkit-scrollbar { display: none; }
  .pc-tabs > button {
    flex: 1 0 auto;
    justify-content: center;
    padding: 9px 8px !important;
    font-size: 12px !important;
    white-space: nowrap;
    gap: 5px !important;
  }
  /* Sin los iconos caben las cuatro hasta en un iPhone SE; con los
     nombres cortos el texto solo ya se entiende */
  .pc-tabs > button > svg { display: none; }

  /* Filas de controles que en escritorio van en una sola línea.
     La de Proyectos (vista + buscador) envuelve, para que el campo de
     búsqueda tenga su propio renglón completo; las pestañas del Panel de
     Control se deslizan de lado, que es como se comportan las pestañas. */
  /* flex:1 1 100% — sin esto la fila se queda del ancho de su contenido
     y el botón queda más corto que las tarjetas de abajo */
  [style*="flex-wrap:nowrap"] { flex-wrap: wrap !important; flex: 1 1 100%; }
  [style*="flex-wrap:nowrap"] .search-bar { flex: 1 1 100%; }
  /* En Proyectos el botón principal va arriba, a lo ancho, y el buscador
     debajo — el mismo orden que en el resto de las secciones */
  [style*="flex-wrap:nowrap"] > .btn-primary { flex: 1 1 100%; justify-content: center; }

  /* Las filas pensadas para el escritorio envuelven en vez de salirse de
     la pantalla. Solo las que van en fila: las columnas se quedan igual. */
  [style*="display:flex"]:not([style*="flex-direction:column"]) { flex-wrap: wrap; }

  /* Paneles laterales de ancho fijo: arriba y a lo ancho, con el
     contenido debajo — si no, la lista queda en una tira de 113px */
  #prPanelClientes { flex: 1 1 100% !important; width: 100% !important; }
  #prPanelClientes > .card {
    width: 100% !important;
    position: static !important;
    max-height: 40vh !important;
  }
  #prContenido { flex: 1 1 100% !important; }
  /* El riel de la bandeja se trata más abajo (sección 14): allí pasa a
     ser una tira horizontal */
  /* Calendario: mini calendario y agenda arriba, la cuadrícula debajo */
  #calPanelIzq {
    width: 100% !important;
    flex: 1 1 100% !important;
    position: static !important;
  }
  [style*="width:fit-content"] {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  [style*="width:fit-content"]::-webkit-scrollbar { display: none; }

  /* =========================================
     6. TABLAS — scroll propio, nunca de la página
     ========================================= */
  table {
    display: block;
    width: max-content;
    min-width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  thead th { padding: 10px 12px; font-size: 11.5px; }
  tbody td { padding: 11px 12px; font-size: 12.5px; }
  .table-wrapper { -webkit-overflow-scrolling: touch; overflow-x: auto; }
  /* Dentro de .table-wrapper el scroll ya lo pone el wrapper. El
     display:block de arriba dejaba la tabla interna encogida a su
     contenido y el fondo gris del encabezado (Descripcion / Monto en la
     cotizacion) se quedaba corto, sin llegar al borde de la tarjeta.
     Aqui vuelve a ser tabla de ancho completo; si es mas ancha que la
     pantalla, min-width:max-content deja que el wrapper la deslice. */
  .table-wrapper > table { display: table; width: 100%; min-width: max-content; }
  /* Totales del documento (ficha de factura / cotizacion / proveedor):
     el bloque venia con min-width fijo pegado a la derecha y las
     etiquetas quedaban flotando en el medio. En el telefono va a lo
     ancho: etiquetas pegadas a la izquierda, montos a la derecha
     (pedido de Carlos). En escritorio sigue a la derecha como siempre. */
  .doc-totales > div { width: 100%; min-width: 0 !important; }

  /* =========================================
     7. MODALES COMO HOJA INFERIOR
     ========================================= */
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal-overlay > div,
  .modal, .modal-lg, .modal-xl {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92dvh;
    border-radius: 22px 22px 0 0 !important;
    animation: sheetUp .26s cubic-bezier(.4, 0, .2, 1);
  }
  .modal-header {
    padding: 20px 18px 14px;
    border-radius: 22px 22px 0 0;
  }
  /* Agarradera, como en las hojas nativas de iOS */
  .modal-header::before {
    content: '';
    position: absolute;
    top: 8px; left: 50%;
    transform: translateX(-50%);
    width: 38px; height: 4px;
    border-radius: 4px;
    background: var(--border);
  }
  .modal-body { padding: 16px 18px calc(20px + env(safe-area-inset-bottom)); }
  .modal-footer {
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
    flex-wrap: wrap;
  }
  .modal-footer .btn { flex: 1 1 auto; min-width: 128px; }
  @keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }

  /* =========================================
     8. FORMULARIOS
     ========================================= */
  /* El zoom automático de iOS ya lo corta maximum-scale=1 en el viewport,
     así que los campos pueden usar la escala real del hub y no los 16px
     que se veían enormes */
  input:not([type="checkbox"]):not([type="radio"]),
  select, textarea, .form-input {
    font-size: 14px !important;
  }
  .form-input { padding: 11px 13px; }
  .btn { padding: 10px 16px; }
  .btn-sm { padding: 7px 12px; }

  /* =========================================
     9. PESTAÑAS Y BARRAS DESLIZABLES
     ========================================= */
  .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex-shrink: 0; white-space: nowrap; padding: 9px 13px; }
  /* ── Barra de filtros ──
     El campo de texto tiene que quedarse en 16px o iOS hace zoom al
     tocarlo; lo que sobraba era el peso visual. Fuera los bordes duros:
     controles rellenos, esquinas suaves y los dos desplegables del mismo
     ancho, que es como se ve limpio en el teléfono. */
  .filter-bar {
    gap: 8px;
    padding: 12px !important;
  }
  /* Desplegables arriba y el buscador debajo, a lo ancho: así se lee la
     referencia que aprobó Carlos */
  .filter-select { order: 1; }
  .filter-search { order: 2; }
  .filter-search {
    max-width: none;
    min-width: 0;
    flex: 1 1 100%;
    background: var(--bg);
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 9px 13px;
  }
  .filter-search:focus-within { border-color: var(--blue); background: var(--surface); }
  .filter-search svg { width: 15px; height: 15px; }
  .filter-search input { font-weight: 500; }
  .filter-select {
    flex: 1 1 0;
    min-width: 0;
    background: var(--bg);
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 10px 30px 10px 13px;
    font-size: 13px !important;
    font-weight: 600;
    color: var(--text-secondary);
    background-position: right 11px center;
  }
  .filter-select:focus { border-color: var(--blue); background-color: var(--surface); }

  /* =========================================
     10. AVISOS
     ========================================= */
  .toast-container {
    left: 12px; right: 12px;
    bottom: calc(14px + env(safe-area-inset-bottom));
  }
  .toast { max-width: none; }

  /* =========================================
     11. PORTAL DEL CLIENTE (overlay propio)
     ========================================= */
  #portalOverlay > aside {
    position: fixed;
    top: 0; left: 0;
    width: 272px !important;
    max-width: 84vw;
    height: 100vh !important;
    height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    padding-top: env(safe-area-inset-top);
    transform: translateX(-101%);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
    z-index: 1300;
  }
  body.pt-open #portalOverlay > aside { transform: none; box-shadow: 14px 0 50px rgba(0, 0, 0, .45); }
  body.pt-open #sbBackdrop { opacity: 1; pointer-events: auto; }

  #portalOverlay header { padding: calc(env(safe-area-inset-top) + 10px) 13px 2px !important; }
  #portalMain { padding: 14px 13px calc(96px + env(safe-area-inset-bottom)) !important; }

  /* Barra flotante del admin dentro del portal */
  .pt-adminbar {
    left: 12px !important;
    right: 12px !important;
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    transform: none !important;
    justify-content: space-between;
    padding: 9px 10px 9px 14px !important;
  }
  .pt-adminbar > span { font-size: 11px !important; min-width: 0; overflow: hidden; }

  /* El celular de la vista feed cabe completo */
  .pt-phone { width: min(330px, 100%) !important; }


  /* =========================================
     13. MENSAJES — lista y chat, uno a la vez
     En 375px no caben lado a lado: la lista ocupa la pantalla y al tocar
     una conversación el chat pasa a primer plano con su botón de volver,
     como cualquier app de mensajería del teléfono.
     ========================================= */
  #mensajesApp {
    flex-direction: column;
    /* Todo el alto disponible: el chat es la pantalla, no una tarjeta
       dentro de la pantalla */
    height: calc(100dvh - 104px) !important;
    border-radius: 16px;
  }
  /* ── Barra de escribir ──
     Cuatro botones con borde dejaban el campo en 140px de 351. Los
     secundarios pasan a iconos sueltos y el campo se lleva el resto,
     como en cualquier app de mensajería. */
  #waInputRow { gap: 3px !important; }
  #waInputRow .btn-secondary {
    padding: 9px 7px !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  #waInputRow .btn-primary { padding: 10px 12px !important; }
  #waInput {
    min-width: 0;
    font-size: 16px !important;   /* iOS no hace zoom al enfocar */
  }
  /* La lista: ancho completo */
  #mensajesApp > div:first-child {
    width: 100% !important;
    flex: 1 1 auto !important;
    border-right: none !important;
    min-height: 0;
  }
  /* El chat: fuera de vista mientras no haya conversación abierta */
  #waChatPanel { display: none !important; }
  #mensajesApp.wa-chat-abierto > div:first-child { display: none !important; }
  #mensajesApp.wa-chat-abierto #waChatPanel {
    display: flex !important;
    flex: 1 1 auto !important;
    min-height: 0;
  }
  .wa-volver { display: inline-flex !important; }
  /* Las burbujas respiran más en pantalla angosta */
  #waChatBubbles { padding: 12px 11px !important; }
  #waChatBubbles > div > div { max-width: 84% !important; }

  /* =========================================
     14. RIELES LATERALES → BARRA DE FICHAS
     Un riel vertical de 48px con texto recortado no se entiende. En el
     teléfono se convierte en una tira horizontal que se desliza.
     ========================================= */
  #bjRail {
    position: static !important;
    width: 100% !important;
    flex-direction: row !important;
    align-items: center;
    /* Seis iconos no llenan el ancho: van centrados, no pegados a la
       izquierda. "safe" evita que el primero quede inalcanzable el día
       que sean tantos que haya que deslizar. */
    justify-content: center;
    justify-content: safe center;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 8px !important;
    margin-bottom: 12px;
    scrollbar-width: none;
    border-radius: 13px;
  }
  #bjRail::-webkit-scrollbar { display: none; }
  /* Los rótulos de sección y los separadores no aportan en horizontal */
  #bjRail > div:not([onclick]) { display: none !important; }
  #bjRail > div[onclick], #bjRail a {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 8px 13px !important;
    border-radius: 50px !important;
  }

  /* =========================================
     15. NAVEGACIÓN LATERAL DE CONFIGURACIONES
     Mismo criterio: la columna de secciones pasa a fichas horizontales.
     ========================================= */
  #cfgNav {
    width: 100% !important;
    flex: 1 1 100% !important;
    margin-bottom: 4px;
  }
  /* La tarjeta que envuelve los botones deja de ser columna y se desliza */
  #cfgNav > div {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    gap: 6px;
    padding: 6px;
    background: none !important;
    border: none !important;
    scrollbar-width: none;
  }
  #cfgNav > div::-webkit-scrollbar { display: none; }
  #cfgNav button {
    width: auto !important;
    flex-shrink: 0;
    white-space: nowrap;
    padding: 9px 15px !important;
    border-left: none !important;
    border-radius: 50px !important;
    border: 1px solid var(--border) !important;
    background: var(--surface) !important;
  }
  /* La activa se distingue por relleno, no por una barrita lateral */
  #cfgNav button[style*="var(--blue)"] {
    background: var(--primary-light) !important;
    border-color: var(--blue) !important;
  }

  /* =========================================
     16. PESTAÑAS EN LÍNEA — se deslizan, no se apilan
     Las de Proyectos (Resumen/Publicaciones/Tareas/Chat/Archivos) caían
     en dos renglones y descuadraban la ficha.
     ========================================= */
  [style*="display:flex"][style*="gap"] > .tab,
  .tab-row, .tabs-inline {
    flex-shrink: 0;
    white-space: nowrap;
  }
  .tab-row, .tabs-inline {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tab-row::-webkit-scrollbar, .tabs-inline::-webkit-scrollbar { display: none; }

  /* =========================================
     17. TABLAS QUE SE DESLIZAN CON INTENCIÓN
     Se mantienen (una tarjeta por fila perdería las columnas que el
     equipo compara), pero con la primera columna fija para no perder
     de vista de qué fila se trata.
     ========================================= */
  .table-wrapper { border-radius: 13px; }
  tbody td:first-child, thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--surface);
  }
  thead th:first-child { background: var(--bg-secondary, var(--bg)); }

  /* =========================================
     18. ACABADO — que se sienta app, no web encogida
     ========================================= */
  /* Nada de resaltado azul de toque ni selección accidental al arrastrar */
  * { -webkit-tap-highlight-color: transparent; }
  .card, .kpi-card, .btn, .tab, .nav-item { user-select: none; }
  /* Radios más generosos, al estilo de iOS */
  .card, .kpi-card, .table-wrapper { border-radius: 16px; }
  /* Área de toque mínima cómoda en botones de icono */
  .btn-icon, .topbar-btn { min-width: 34px; min-height: 34px; }
  /* Los botones de acción de una cabecera ocupan el ancho: dedos, no ratón */
  .page-header .btn { flex: 1 1 auto; justify-content: center; }
  /* El scroll interno se siente nativo */
  .view-container, .table-wrapper, #waChatBubbles { -webkit-overflow-scrolling: touch; }
  /* Deslizamiento con imán en las tiras horizontales */
  .pipeline-board { scroll-snap-type: x mandatory; }
  .pipeline-col { scroll-snap-align: start; }


  /* =========================================
     19. ANUNCIOS E INSTAGRAM — barra de una sola línea
     Cuatro botones de período (7D/14D/30D/90D) no caben al lado del
     nombre de la cuenta: en el teléfono se cambian por un desplegable
     pegado a la cuenta. Configurar se va: enlazar cuentas de Meta es
     trabajo de escritorio, y un botón que lleva a un modal inservible
     en pantalla chica solo estorba.
     ========================================= */
  .rango-botones { display: none !important; }
  .solo-escritorio { display: none !important; }
  .rango-movil {
    display: block !important;
    width: auto !important;
    max-width: 46vw;
    flex: 0 0 auto;
    padding: 8px 10px !important;
    font-weight: 700;
  }
  /* La cuenta y su período comparten renglón. El select de la cuenta trae
     max-width:280px en línea: sin encogerlo, el período cae a otra fila. */
  select:has(+ .rango-movil) {
    /* .form-input trae width:100%, que fuerza el salto de línea */
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }
  .rango-movil { flex-shrink: 0; }
  /* El separador elástico empujaría el desplegable fuera de la fila */
  .rango-movil + span[style*="flex:1"] { display: none !important; }
  /* Reporte, en su propio renglón y a lo ancho: es la acción principal aquí */
  .rango-movil ~ .btn { flex: 1 1 100%; justify-content: center; }


  /* =========================================
     20. CONTRATOS — el nombre completo, no "Contrat…"
     La fila mete en una sola línea icono, nombre, modelo, cliente,
     estado, fecha y dos botones: en el teléfono el nombre se recortaba
     a la tercera letra, que es justo lo que hay que leer. Pasa a dos
     filas: arriba el documento, abajo estado, fecha y descargas.
     ========================================= */
  .card[onclick^="ctVer"] {
    flex-wrap: wrap;
    align-items: flex-start !important;
    gap: 9px 11px !important;
    padding: 14px 15px !important;
  }
  /* El bloque de texto se lleva el resto de la primera fila. El !important
     es obligatorio: el div trae flex:1 en línea y sin esto no reserva el
     ancho, así que el nombre caía en una columna de cuatro renglones. */
  .card[onclick^="ctVer"] > div:not([onclick]) {
    flex: 1 1 calc(100% - 60px) !important;
    min-width: 0 !important;
  }
  /* Nada de recortes: nombre, modelo y cliente se leen completos */
  .card[onclick^="ctVer"] span[style*="text-overflow"],
  .card[onclick^="ctVer"] div[style*="text-overflow"] {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .card[onclick^="ctVer"] > div:not([onclick]) > div:first-child { flex-wrap: wrap; }
  /* El renglón del modelo y el cliente respira */
  .card[onclick^="ctVer"] > div:not([onclick]) > div:nth-child(2) {
    flex-wrap: wrap;
    line-height: 1.45;
  }
  /* Estado, fecha y descargas bajan juntos a su propia fila */
  .card[onclick^="ctVer"] > .badge { order: 3; }
  .card[onclick^="ctVer"] > span:not([style*="width:40px"]):not([style*="text-overflow"]) { order: 4; }
  .card[onclick^="ctVer"] > div[onclick] { order: 5; margin-left: auto; }


  /* =========================================
     21. REPORTES DE CONTABILIDAD — solo consulta
     Regla de Carlos: en el teléfono estos reportes se MIRAN; compartir,
     descargar y filtrar en fino se hacen en la computadora. Fuera las
     botoneras, y los números que venían en tiras de 4 y 5 columnas pasan
     a dos, que es lo que se lee sin achicar la vista.
     ========================================= */
  /* Compartir / Descargar de la cabecera */
  #rptSeccion .page-header .flex { display: none !important; }
  /* "Más filtros" y el Diario/Mensual del gráfico: hoy no hacen nada y
     solo compiten por el ancho */
  #rptSeccion button:has(svg.lucide-filter),
  #rptSeccion [onclick^="toggleRptVista"] { display: none !important; }

  /* Tiras de indicadores: de 4 y 5 columnas a dos */
  #rptSeccion [style*="repeat(5,1fr)"],
  #rptSeccion [style*="repeat(4,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }
  #rptSeccion [style*="repeat(5,1fr)"] > div,
  #rptSeccion [style*="repeat(4,1fr)"] > div {
    border-right: none !important;
    border-bottom: 1px solid var(--border);
    padding: 13px 14px !important;
  }
  /* El último no necesita raya abajo */
  #rptSeccion [style*="repeat(5,1fr)"] > div:last-child,
  #rptSeccion [style*="repeat(4,1fr)"] > div:last-child { border-bottom: none; }
  #rptSeccion [style*="repeat(5,1fr)"] > div > div:last-child,
  #rptSeccion [style*="repeat(4,1fr)"] > div > div:last-child { font-size: 15px !important; }

  /* El gráfico ocupa menos alto: en vertical, la tabla es lo que se busca */
  #rptSeccion [style*="height:200px"] { height: 165px !important; }

  /* Las fechas del filtro, cada una a lo ancho de media pantalla */
  #rptSeccion input[type="date"] { flex: 1 1 45%; min-width: 0; }

  /* ── Las tablas de los reportes caben sin deslizar ──
     Ventas generales trae NUEVE columnas (documento, cliente, estado,
     creación, subtotal, descuento, antes de imp., impuestos, después de
     imp.): en 440px eso obliga a deslizar y aun así se corta. Se dejan
     las TRES primeras —quién y en qué estado— más la última, que es el
     total. El desglose de impuestos se mira en la computadora. */
  #rptSeccion table {
    display: table !important;
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed;
  }
  #rptSeccion table th:nth-child(n+4):not(:last-child),
  #rptSeccion table td:nth-child(n+4):not(:last-child) { display: none !important; }
  #rptSeccion table th, #rptSeccion table td {
    padding: 10px 8px !important;
    font-size: 12px !important;
    /* Los montos son un solo bloque ("RD$3,571,213.00") y los títulos de
       columna vienen largos: sin permitir el corte, la celda empuja la
       tabla más allá de la pantalla aunque tenga ancho fijo. */
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  #rptSeccion table th:first-child, #rptSeccion table td:first-child { position: static; }
  /* "Ítems por página" es un control, y aquí solo se consulta */
  #rptSeccion .table-wrapper > div:last-child > span:first-child { display: none; }


  /* =========================================
     22. CABECERAS DE TARJETA — el enlace no se parte
     "Marketing en vivo" y sus hermanas llevan título, un subtítulo largo
     y un enlace a la derecha. En el teléfono el subtítulo apretaba el
     enlace hasta partirlo en dos ("Ver / Anuncios"), que se ve torcido.
     Ahora el enlace se mantiene en una línea y el subtítulo baja al
     segundo renglón, que es donde no estorba.
     ========================================= */
  .section-header {
    align-items: flex-start;
    gap: 10px;
  }
  .section-header > div:first-child {
    flex: 1 1 auto;
    min-width: 0;
  }
  .section-link {
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.6;
  }


  /* =========================================
     23. FICHA DE CONTACTO — la tabla cabe
     Facturas trae NCF, total, creación, vencimiento, estado y el ojo.
     En el teléfono se dejan NCF, total y estado: las dos fechas se ven
     al abrir el documento, que ahora sí se abre al tocar la fila.
     ========================================= */
  #contactDetailContent table {
    display: table !important;
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed;
  }
  /* fuera Creación (3), Vencimiento (4) y la columna del ojo (6) */
  #contactDetailContent table th:nth-child(3),
  #contactDetailContent table td:nth-child(3),
  #contactDetailContent table th:nth-child(4),
  #contactDetailContent table td:nth-child(4),
  #contactDetailContent table th:nth-child(6),
  #contactDetailContent table td:nth-child(6) { display: none !important; }
  #contactDetailContent table th,
  #contactDetailContent table td {
    padding: 11px 9px !important;
    font-size: 12.5px !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  /* =========================================
     12. LOGIN
     ========================================= */
  #loginScreen { padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
  /* La inclinación 3D depende del mouse: en táctil sobra */
  #loginTilt { transform: none !important; }
}

/* Teléfonos angostos */
@media (max-width: 460px) {
  .kpi-grid { grid-template-columns: 1fr !important; }
  .topbar { padding-left: 10px; padding-right: 10px; }
  .view-container { padding-left: 11px; padding-right: 11px; }
  #darkModeBtn { display: none; }   /* el tema se cambia una vez, el espacio vale más */
}

/* =============================================
   MODO APP (pantalla de inicio, sin barra de Safari)
   ============================================= */
@media (display-mode: standalone) {
  /* Sin barra del navegador no hay "tirar para recargar": el gesto de
     arrastre no debe mover la interfaz completa */
  body { overscroll-behavior: none; }
}