/* ============================================================
   Facturación y Stock — estilo Netba (claro, nunca dark mode)

   Misma identidad que presupuestos.netba.com.ar: sidebar oscura
   fija, fondo claro, rojo Netba como único color de acento.
   ============================================================ */
:root{
  /* Valores de fábrica (Netba). cssMarca() los pisa con la paleta del
     inquilino: acento de Admin y tonos derivados de él. */
  --rojo:#991D06; --rojo-osc:#7a1605; --rojo-mas-osc:#5f1104; --rojo-claro:#b3260a;
  --rojo-suave:#fff2f0; --rojo-borde:#fdf2f0;
  --oscuro:#1a1a1a; --oscuro-linea:#2d2020; --oscuro-texto:#c8ccd8;
  --bg:#f4f5f7; --linea:#e5e7eb; --linea-input:#d1d5db;
  --texto:#111827; --suave:#6b7280; --gris-bg:#f9fafb;
  --ok:#16a34a; --ok-bg:#f0fdf4; --err:#dc2626; --err-bg:#fef2f2;
  --avi:#c2410c; --avi-bg:#fff7ed;
  --sidebar:220px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--texto);font-size:14px}
a{color:inherit;text-decoration:none}

/* ---- estructura ---- */
.shell{display:flex;min-height:100vh}

.sidebar{width:var(--sidebar);background:var(--oscuro);color:var(--oscuro-texto);flex-shrink:0;
         display:flex;flex-direction:column;padding:1.25rem 0;position:sticky;top:0;height:100vh}
.sidebar .brand{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600;color:#fff;
                padding:0 1.25rem 1.25rem;border-bottom:1px solid var(--oscuro-linea)}
/* Cuando hay logo cargado, el cuadradito de color deja lugar a la imagen:
   sin fondo, sin deformarla y con un ancho mayor, que los logos son anchos. */
.logo-img{background:none !important; object-fit:contain; width:auto !important;
          max-width:150px; max-height:32px;}
.sidebar .brand .logo{width:28px;height:28px;border-radius:7px;background:var(--rojo);flex-shrink:0;
                      display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
.sidebar .brand small{display:block;font-size:11px;font-weight:400;color:#888;margin-top:1px}
.nav{display:flex;flex-direction:column;padding-top:.75rem}
.nav a{display:flex;align-items:center;gap:10px;padding:9px 1.25rem;font-size:13px;transition:background .15s}
.nav a:hover{background:var(--oscuro-linea);color:#fff}
/* El degradé se arma con tonos DERIVADOS del acento (los calcula cssMarca).
   Con los hex escritos acá, la opción activa salía rojo Netba aunque la
   instalación fuera naranja: era lo que más hacía que las dos se vieran igual. */
.nav a.on{background:linear-gradient(180deg,var(--rojo-claro) 0%,var(--rojo) 55%,var(--rojo-osc) 100%);
          color:#fff;font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.15)}
.nav-icon{width:16px;text-align:center;font-size:14px;flex-shrink:0}
.sidebar-pie{margin-top:auto;padding:1rem 1.25rem 0;border-top:1px solid var(--oscuro-linea);font-size:12px;color:#888}
.sidebar-pie a{display:block;margin-bottom:6px}
.sidebar-pie a:hover{color:#fff}

/* ---- menú contraído: sólo los íconos ----
   El rótulo de cada opción sigue en el `title`, así que el navegador lo
   muestra solo al pasar el mouse: no hace falta un tooltip propio. */
.sidebar{position:sticky}
.contraer{position:absolute;top:.55rem;right:.45rem;z-index:2;
          width:22px;height:22px;line-height:1;border:0;border-radius:6px;cursor:pointer;
          background:var(--oscuro-linea);color:var(--oscuro-texto);font-size:15px;
          display:flex;align-items:center;justify-content:center}
.contraer:hover{background:var(--rojo);color:#fff}
.menu-corto .sidebar{width:58px}
.menu-corto .sidebar .brand{padding:0 0 1.1rem;justify-content:center}
.menu-corto .sidebar .brand span:not(.logo),
.menu-corto .nav-txt,
.menu-corto .sidebar-pie{display:none}
.menu-corto .logo-img{max-width:34px}
.menu-corto .nav a{justify-content:center;padding:11px 0}
.menu-corto .nav-icon{width:auto;font-size:16px}
.menu-corto .contraer{right:auto;left:50%;transform:translateX(-50%);top:auto;bottom:.6rem}

/* ---- bloque plegable ---- */
.plegable > summary{cursor:pointer;font-size:15px;font-weight:600;list-style:none;
                    display:flex;align-items:center;gap:.5rem}
.plegable > summary::-webkit-details-marker{display:none}
.plegable > summary::before{content:'▸';color:var(--rojo);font-size:13px}
.plegable[open] > summary::before{content:'▾'}
.plegable > summary:hover{color:var(--rojo)}
.plegable[open] > summary{margin-bottom:.6rem}

.contenido{flex:1;min-width:0;display:flex;flex-direction:column}
.wrap{flex:1;padding:1.5rem 1.75rem 2.5rem;max-width:1280px;width:100%}
.pie{color:var(--suave);font-size:12px;padding:0 1.75rem 1.5rem}

h1{font-size:20px;margin:0 0 3px;font-weight:600}
h2{font-size:15px;margin:0 0 12px;font-weight:600}
.sub{color:var(--suave);font-size:13px;margin:0 0 20px}

/* ---- tarjetas ---- */
.card{background:#fff;border:1px solid var(--linea);border-radius:10px;padding:1.15rem 1.25rem;margin-bottom:1rem}
.card.acento{border-top:3px solid var(--rojo)}

/* ---- secciones de Admin ---- */
.admin-secs{display:flex;flex-wrap:wrap;gap:6px}

/* ---- solapas ---- */
.solapas{display:flex;gap:2px;border-bottom:2px solid var(--linea);margin-bottom:1.25rem;flex-wrap:wrap}
.solapas a{padding:9px 16px;border-bottom:2px solid transparent;margin-bottom:-2px;
           font-size:14px;font-weight:500;color:var(--suave);transition:color .15s,border-color .15s}
.solapas a:hover{color:var(--rojo)}
.solapas a.on{color:var(--rojo);border-bottom-color:var(--rojo);font-weight:600}

/* ---- tarjetas de acceso rápido (pantalla de inicio) ---- */
.accesos{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:16px}
.acceso{background:#fff;border:1px solid var(--linea);border-radius:10px;overflow:hidden;text-align:center}
.acceso .cinta{background:linear-gradient(180deg,#2d2d2d 0%,var(--oscuro) 100%);height:44px}
.acceso .ico{width:46px;height:46px;border-radius:50%;background:#fff;border:1px solid var(--linea);
             margin:-23px auto 0;display:flex;align-items:center;justify-content:center;
             font-size:21px;color:var(--rojo)}
.acceso h3{margin:12px 14px 4px;font-size:14px;font-weight:600}
.acceso .que{font-size:12px;color:var(--suave);margin:0 14px;min-height:32px}
.acceso .btns{display:flex;gap:8px;justify-content:center;padding:12px 14px 16px}
.acceso .btns .btn{flex:1;max-width:100px}

.saludo{background:#fff;border:1px solid var(--linea);border-radius:10px;padding:1.15rem 1.25rem;margin-bottom:1.25rem}
.saludo h2{margin:0 0 3px;font-size:18px;color:var(--rojo)}
.saludo p{margin:0;font-size:13px;color:var(--suave)}

/* ---- cabecera de comprobante (dos columnas, estilo Xubio) ---- */
.cabecera{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0 40px}
.cabecera .campo{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.cabecera .campo label{margin:0;flex:0 0 130px;text-align:right;text-transform:none;
                       font-size:13px;font-weight:600;color:var(--texto)}
.cabecera .campo .val{flex:1;min-width:0}
.cabecera .campo input,.cabecera .campo select{width:100%}
.req{color:var(--rojo)}

/* fila de totales en línea, debajo de los ítems */
.totales-linea{display:flex;flex-wrap:wrap;gap:14px 44px;align-items:flex-end;
               border-top:2px solid var(--linea);margin-top:1rem;padding-top:14px}
.totales-linea .t{font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--suave);font-weight:700}
.totales-linea .n{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:3px}
.totales-linea .grande .n{font-size:22px;color:var(--rojo)}

/* botonera al pie del formulario */
.barra-guardar{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin-top:1.25rem}

/* fila para sumar un ítem */
tr.agregar td{background:var(--rojo-suave);border-top:2px solid var(--rojo)}

/* ---- indicadores del tablero ---- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:1.25rem}
.tile{background:#fff;border:1px solid var(--linea);border-radius:10px;padding:14px 16px}
.tile .rot{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--suave);font-weight:700}
.tile .val{font-size:24px;font-weight:700;margin-top:5px;line-height:1.15}
.tile .pie-t{font-size:12px;color:var(--suave);margin-top:3px}
.tile.alerta{border-color:#fca5a5}
.tile.alerta .val{color:var(--rojo)}

/* ---- formularios ---- */
label{display:block;font-size:12px;font-weight:700;color:var(--texto);margin:12px 0 4px}
input,select,textarea{width:100%;padding:8px 10px;border:1px solid var(--linea-input);border-radius:7px;
                      font-size:13px;font-family:inherit;color:var(--texto);background:#fff;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--rojo);box-shadow:0 0 0 3px rgba(153,29,6,.1)}
input[type=checkbox]{width:auto;margin-right:8px}
textarea{min-height:76px}
/* Cualquier regla de autor con display le gana al [hidden] del navegador:
   sin esto, un .fila que el JS esconde se sigue viendo entera. Ya nos pasó. */
[hidden]{display:none !important}
.fila{display:flex;flex-wrap:wrap;gap:12px}
.fila>div{flex:1 1 200px}
/* Los botones no van en color plano: llevan un degradado vertical suave y un
   filo claro arriba, que es lo que les da relieve. Mismo criterio para todo
   lo que queda "seleccionado" (ítem activo del menú, cinta de las tarjetas). */
button,.btn{display:inline-block;padding:8px 16px;border-radius:7px;border:1px solid var(--linea-input);
            background:linear-gradient(180deg,#fff 0%,#f4f5f7 100%);color:#374151;cursor:pointer;
            font-size:13px;font-weight:500;font-family:inherit;text-align:center;
            box-shadow:0 1px 1px rgba(0,0,0,.05);transition:all .15s}
button:hover,.btn:hover{background:linear-gradient(180deg,#f9fafb 0%,#e9ebef 100%)}

button,.btn.primary{
  background:linear-gradient(180deg,var(--rojo-claro) 0%,var(--rojo) 52%,var(--rojo-osc) 100%);
  color:#fff;border-color:var(--rojo-osc);
  box-shadow:0 1px 2px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.18);
}
button:hover,.btn.primary:hover{
  background:linear-gradient(180deg,var(--rojo) 0%,var(--rojo-osc) 52%,var(--rojo-mas-osc) 100%);
  border-color:var(--rojo-mas-osc);
}
button:active,.btn.primary:active{
  background:linear-gradient(180deg,var(--rojo-osc) 0%,var(--rojo) 100%);
  box-shadow:inset 0 2px 3px rgba(0,0,0,.22);
}
button:disabled{background:linear-gradient(180deg,#dfe2e6,#cdd1d6);border-color:#c4c8ce;
                color:#8b9098;cursor:not-allowed;box-shadow:none}

.btn.sec{background:linear-gradient(180deg,#fff 0%,#f4f5f7 100%);color:#374151;
         border-color:var(--linea-input);box-shadow:0 1px 1px rgba(0,0,0,.05)}
.btn.sec:hover{background:linear-gradient(180deg,#f9fafb 0%,#e9ebef 100%)}
.btn.peligro{background:linear-gradient(180deg,#fff 0%,#fdf2f1 100%);color:var(--err);border-color:#fca5a5}
.btn.peligro:hover{background:linear-gradient(180deg,#fef4f3 0%,#fbe4e2 100%)}
.btn.chico{padding:5px 10px;font-size:12px}
.acciones{display:flex;flex-wrap:wrap;gap:8px;margin-top:1rem}

/* ---- mensajes ---- */
.ok,.err,.avi{border-radius:7px;padding:10px 12px;font-size:13px;font-weight:500;margin:0 0 1rem}
.ok{background:var(--ok-bg);color:var(--ok)}
.err{background:var(--err-bg);color:var(--err)}
.avi{background:var(--avi-bg);color:var(--avi)}

/* ---- badges ---- */
.badge{display:inline-block;font-size:11px;font-weight:600;padding:2px 9px;border-radius:99px}
/* letra del comprobante: A/B fiscales, X interno, P presupuesto, R remito */
.b-a,.b-b{background:var(--rojo-suave);color:var(--rojo)}
.b-x{background:#f3f4f6;color:#374151}
.b-p{background:var(--avi-bg);color:var(--avi)}
.b-r{background:#fefce8;color:#854d0e}
/* estado ante AFIP */
.b-aprobado{background:var(--ok-bg);color:var(--ok)}
.b-pendiente{background:var(--avi-bg);color:var(--avi)}
.b-rechazado{background:var(--err-bg);color:var(--err)}
.b-anulado{background:var(--err-bg);color:var(--err)}
.b-noaplica{background:#f3f4f6;color:#374151}
/* stock */
.b-bajo{background:var(--err-bg);color:var(--err)}
.b-ok{background:var(--ok-bg);color:var(--ok)}

/* ---- tablas ---- */
.tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:13px;min-width:520px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--suave);
   font-weight:700;padding:8px 10px;border-bottom:2px solid var(--linea);white-space:nowrap}
td{padding:9px 10px;border-bottom:1px solid var(--linea);vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--gris-bg)}
td.mono,.mono{font-family:monospace;font-size:12px}
/* los importes se leen en columna: alineados a la derecha y tabulares,
   así las comas quedan una debajo de la otra */
td.num,th.num,.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tfoot td{font-weight:700;border-top:2px solid var(--linea)}
.vacio{color:var(--suave);text-align:center;padding:26px 10px;font-size:13px}

/* ---- paginado ---- */
.paginado{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:flex-end;margin-top:1rem}

/* ---- utilidades ---- */
.der{text-align:right}
.chico{font-size:12px;color:var(--suave)}
.nada{color:var(--suave);font-style:italic}
.pill-form{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}
.pill-form>div{flex:1 1 150px}
.pill-form label{margin-top:0}


/* ---- impresión de comprobantes ---- */
@media print{
  .sidebar,.pie,.acciones,.no-print{display:none !important}
  body{background:#fff;font-size:12px}
  .shell{display:block}
  .wrap{max-width:none;padding:0}
  .card{border:none;padding:0;margin:0}
  table{min-width:0}
  thead{display:table-header-group}
  tr,img{page-break-inside:avoid}
  @page{size:A4;margin:12mm}
}

/* ---- filas desplegables (listado de comprobantes) ----
   Ver los artículos sin salir del listado: con varios presupuestos del mismo
   cliente, entrar y volver uno por uno para dar con el correcto no escala.

   El [hidden] va declarado a mano porque las reglas de tabla traen su propio
   display y le ganan al atributo: sin esto la fila queda siempre visible. */
tr.det[hidden]{display:none}
.det>td{background:var(--gris-bg);padding:0 0 0 34px}
.det-caja{padding:10px 12px 14px 0}
.det-caja h3{font-size:12px;font-weight:600;color:var(--suave);text-transform:uppercase;
             letter-spacing:.06em;margin-bottom:7px}
.det-caja table{width:100%;border-collapse:collapse;font-size:13px;background:#fff}
.det-caja th{background:#fff;border-bottom:1px solid var(--linea);font-size:11px;
             text-transform:uppercase;letter-spacing:.06em;color:var(--suave);padding:5px 8px}
.det-caja td{border-bottom:1px solid var(--linea);padding:5px 8px}
.det-caja tr:last-child td{border-bottom:none}

/* La regla global `button` trae padding 8/16, gradiente rojo y sombra: hay que
   apagarlos a mano o el botón sale de 34px y el :hover le pisa el fondo
   (`button:hover` tiene la misma especificidad que `.desplegar:hover`).

   Objetivo táctil de 44px sin agrandar la fila: el botón es chico a la vista
   y el área de toque se estira con un ::after transparente. */
.desplegar{position:relative;width:26px;height:26px;padding:0;box-shadow:none;
           border:1px solid var(--linea-input);border-radius:6px;
           background:#fff;color:var(--suave);
           font-size:17px;font-weight:600;line-height:1;font-family:inherit;cursor:pointer;
           display:flex;align-items:center;justify-content:center}
.desplegar::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;
                  transform:translate(-50%,-50%)}
.desplegar:hover,.desplegar:focus-visible{background:var(--rojo-suave);border-color:var(--rojo);color:var(--rojo)}
.desplegar[aria-expanded="true"]{background:var(--rojo);border-color:var(--rojo);color:#fff}
.desplegar[aria-expanded="true"]:hover{background:var(--rojo-osc);border-color:var(--rojo-osc);color:#fff}

/* Texto sólo para lectores de pantalla: encabezados de columnas que a la vista
   no llevan rótulo (la del desplegable, la de acciones). */
.sr{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============================================================
   Tarjetas de deudor (Deuda / Cta. Cte.)

   Una fila de tabla no sirve para cobrar: el que llama necesita ver
   junto el monto, desde cuándo, en qué quedó la última gestión y el
   teléfono. Mismo formato que la app de cobranzas.
   ============================================================ */
.deu-lista{display:flex; flex-direction:column; gap:10px; margin-bottom:1rem}
.deu-item{background:#fff; border:1px solid var(--linea); border-radius:10px; overflow:hidden}
/* El borde de la izquierda ordena la lista de un vistazo, sin leer nada. */
.deu-item.urgente{border-left:3px solid var(--err)}
.deu-item.esperando{border-left:3px solid #2563eb}
.deu-top{padding:13px 14px; display:flex; flex-direction:column; gap:9px}
.deu-nom{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; flex-wrap:wrap}
.deu-nom h3{margin:0; font-size:15px; font-weight:650; line-height:1.3; overflow-wrap:anywhere}
.deu-nom h3 a{color:inherit; text-decoration:none}
.deu-nom h3 a:hover{text-decoration:underline}
.deu-plata{font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.2}
.deu-meta{font-size:13px; color:#6b7280; line-height:1.5}
.deu-meta .sep, .deu-cbte-fec .sep, .deu-selbar .sep{color:#d1d5db; margin:0 5px}

/* La última gestión NO va en gris: es lo que evita volver a llamar al que ya
   dijo que paga el viernes, así que tiene que saltar a la vista. Ámbar para lo
   hecho, azul para una promesa en pie, rojo para la que no se cumplió. */
.deu-gestion{font-size:13px; border-radius:8px; padding:8px 10px; line-height:1.45;
             background:#FEF3C7; color:#92400E; border:1px solid #FDE68A}
.deu-gestion.prom{background:#EFF6FF; color:#1E40AF; border-color:#BFDBFE}
.deu-gestion.venc{background:#FEF2F2; color:#B91C1C; border-color:#FECACA}
.deu-gestion.espera{background:var(--gris-bg); color:var(--suave); border-color:var(--linea)}

.deu-acc{display:flex; flex-wrap:wrap; gap:8px}
.deu-det{margin-top:2px}
.deu-det > summary{cursor:pointer; list-style:none}
.deu-det > summary::-webkit-details-marker{display:none}
.deu-form{border:1px solid var(--linea); border-radius:8px; padding:.8rem; margin-top:.6rem;
          background:var(--gris-bg)}

.deu-facturas{border-top:1px solid var(--linea)}
.deu-facturas > summary{padding:10px 14px; cursor:pointer; font-size:13px; color:var(--suave);
                        background:var(--gris-bg)}
.deu-cbte{display:flex; align-items:center; gap:10px; padding:10px 14px;
          border-top:1px solid var(--linea); cursor:pointer}
.deu-cbte:hover{background:var(--gris-bg)}
.deu-cbte input[type=checkbox]{width:auto; margin:0; flex:none}
.deu-cbte-info{flex:1 1 auto; min-width:0}
.deu-cbte-num{display:block; font-size:14px; font-weight:500}
.deu-cbte-fec{display:block; font-size:12px; color:#6b7280}
.deu-cbte-imp{font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap}
.deu-selbar{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between;
            padding:10px 14px; border-top:1px solid var(--linea); background:var(--rojo-suave)}
.deu-selbar-acc{display:flex; gap:8px; flex-wrap:wrap}

@media (max-width:640px){
  .deu-nom{flex-direction:column; gap:6px}
  .deu-plata{font-size:18px}
  .deu-acc .btn{flex:1 1 auto; text-align:center}
  .deu-cbte{flex-wrap:wrap}
  .deu-cbte-info{flex:1 1 100%; order:2}
  .deu-cbte-imp{order:3; margin-left:auto}
}

/* Lista de contactos dentro de la tarjeta del deudor. */
.deu-contactos > summary{cursor:pointer;color:var(--suave)}
.deu-conts{border:1px solid var(--linea);border-radius:8px;margin-top:.5rem;background:var(--gris-bg)}
.deu-cont{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;justify-content:space-between;
          padding:7px 10px;font-size:13px;border-bottom:1px solid var(--linea)}
.deu-cont:last-child{border-bottom:none}
.deu-cont-nom{font-weight:500}
.deu-cont-acc{display:flex;flex-wrap:wrap;gap:12px}
.deu-cont-acc a{color:var(--rojo);text-decoration:underline}
/* ============================================================
   CELULAR
   ------------------------------------------------------------
   Un solo corte: 700px. Si hiciera falta un segundo, el problema
   sería el componente y no el breakpoint.

   Lo que había antes acá era un parche de trece líneas: la barra
   lateral se acostaba arriba como una tira de quince chips y las
   tablas se dejaban con scroll horizontal. Con eso las acciones de
   cada fila —ver, imprimir, cobrar— quedaban fuera de pantalla y sin
   ninguna señal de que estuvieran ahí.
   ============================================================ */

/* ---- íconos ----
   Un sprite monocromo que hereda currentColor. Antes eran emoji: cada
   uno con su métrica y su color, y la barra de abajo quedaba despareja. */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:16px;height:16px;flex:none}
.ic-g{width:22px;height:22px;flex:none}
.nav-icon{display:flex;align-items:center;justify-content:center;width:16px;flex:none}
.btn .ic,button .ic{vertical-align:-3px}

/* Las barras del celular no existen en escritorio. */
.top-movil,.tabbar,.hoja-fondo{display:none}

/* En escritorio el plegado de filtros no corre: el <details> queda
   siempre abierto y sin su título. Va acá y no en el JS porque al girar
   el teléfono la pantalla pasa de 390 a 844px sin recargar, y unos
   filtros que se vuelven invisibles serían peor que el plegado. */
@media (min-width:701px){
  details.filtros-movil > summary{display:none}
  details.filtros-movil > form.pill-form{display:flex}
}

@media (max-width:700px){
  /* Nada desborda a lo ancho: lo que sea ancho scrollea dentro de su caja. */
  body{overflow-x:hidden}

  /* ---- estructura ---- */
  .shell{display:block;min-height:0}
  .sidebar{display:none}
  .contenido{display:block}
  .wrap{padding:.9rem .85rem 1.25rem;max-width:none}
  .pie{padding:.25rem .85rem 1rem;text-align:center}

  /* El alto de las dos barras fijas, que el contenido no puede pisar. */
  body.con-barras{padding-top:calc(54px + env(safe-area-inset-top));
                  padding-bottom:calc(60px + env(safe-area-inset-bottom))}
  body.sin-scroll{overflow:hidden}

  /* ---- un solo encabezado ----
     Identidad a la izquierda, cuenta a la derecha. El título de la
     pantalla no se repite: ya está en el <h1> del contenido. */
  .top-movil{display:flex;position:fixed;top:0;left:0;right:0;z-index:40;
             align-items:center;justify-content:space-between;gap:10px;
             height:calc(54px + env(safe-area-inset-top));
             padding:env(safe-area-inset-top) 10px 0 14px;
             background:var(--oscuro);color:#fff}
  .tm-marca{display:flex;align-items:center;gap:9px;min-width:0;color:#fff}
  .tm-logo{max-width:112px;max-height:30px;object-fit:contain}
  .tm-inicial{width:28px;height:28px;border-radius:7px;background:var(--rojo);flex:none;
              display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
  .tm-txt{font-size:15px;font-weight:600;line-height:1.15;min-width:0;
          overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tm-txt small{display:block;font-size:11px;font-weight:400;color:#9ca3af;
                overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* La regla global de <button> trae el degradado de marca y 8px de alto
     útil: acá hay que apagarla a mano y dejar el objetivo de 44px. */
  .tm-cuenta{width:44px;height:44px;min-height:44px;padding:0;flex:none;
             display:flex;align-items:center;justify-content:center;
             background:none;border:0;box-shadow:none;color:#fff;border-radius:9px}
  .tm-cuenta:hover,.tm-cuenta:active{background:var(--oscuro-linea);box-shadow:none}

  /* ---- barra de destinos ----
     Cuatro más "Más", repartidos con flex:1. Con un ancho fijo por ítem,
     en un teléfono de 375px el último queda cortado. */
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;
          background:#fff;border-top:1px solid var(--linea);
          padding-bottom:env(safe-area-inset-bottom);
          box-shadow:0 -1px 4px rgba(0,0,0,.06)}
  .tabbar .tb{flex:1 1 0;min-width:0;min-height:58px;padding:8px 3px 7px;
              display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
              background:none;border:0;border-radius:0;box-shadow:none;
              font-family:inherit;font-size:11px;font-weight:600;line-height:1.1;
              color:var(--suave);letter-spacing:.01em}
  .tabbar .tb span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tabbar .tb:hover,.tabbar .tb:active{background:none;box-shadow:none;color:var(--suave)}
  .tabbar .tb.on,.tabbar .tb.on:hover{color:var(--rojo)}
  .tabbar .tb.on .ic-g{stroke-width:1.9}

  /* ---- hojas (Más / Mi cuenta) ---- */
  .hoja-fondo{display:flex;position:fixed;inset:0;z-index:60;
              align-items:flex-end;background:rgba(17,24,39,.45)}
  .hoja{width:100%;background:#fff;border-radius:16px 16px 0 0;
        padding-bottom:calc(12px + env(safe-area-inset-bottom));
        max-height:82vh;overflow-y:auto}
  .hoja-tope{display:flex;align-items:center;justify-content:space-between;
             padding:14px 8px 12px 18px;border-bottom:1px solid var(--linea);
             font-size:15px;font-weight:650}
  .hoja-x{width:44px;height:44px;min-height:44px;padding:0;flex:none;
          display:flex;align-items:center;justify-content:center;
          background:none;border:0;box-shadow:none;color:var(--suave);border-radius:9px}
  .hoja-x:hover{background:var(--gris-bg);box-shadow:none}
  .hoja-grilla{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px}
  .hoja-item{display:flex;flex-direction:column;align-items:flex-start;gap:8px;
             min-height:76px;padding:12px;border:1px solid var(--linea);border-radius:10px;
             font-size:13px;font-weight:600;color:var(--texto);line-height:1.25}
  .hoja-item .ic-g{color:var(--suave)}
  .hoja-item.on{border-color:var(--rojo);background:var(--rojo-suave);color:var(--rojo)}
  .hoja-item.on .ic-g{color:var(--rojo)}
  .hoja-cuerpo{padding:14px}
  .hoja-quien{font-size:15px;font-weight:600;margin-bottom:14px;line-height:1.3}
  .hoja-quien small{display:block;font-size:13px;font-weight:400;color:var(--suave);margin-top:2px}
  .ancho{width:100%}

  /* ---- títulos ---- */
  h1{font-size:20px;line-height:1.25;overflow-wrap:anywhere}
  .sub{margin-bottom:14px}

  /* Nada de contenido por debajo de 13px. Las fechas, los códigos y las
     aclaraciones venían en 12px, que en escritorio pasan y en un teléfono
     son una fila de hormigas. Los rótulos y badges sí quedan en 11px: son
     etiquetas, no texto para leer. */
  .chico,.mono,td.chico,td.mono,.tile .pie-t,.acceso .que,.pie,
  .deu-meta,.deu-gestion,.deu-cbte-fec,.det-caja td{font-size:13px}
  .det-caja th{font-size:11px}

  /* ---- tarjetas y cajas ---- */
  .card{padding:.9rem .85rem;border-radius:10px;margin-bottom:.85rem}

  /* ---- indicadores: dos columnas parejas ---- */
  .tiles{grid-template-columns:1fr 1fr;gap:9px;margin-bottom:1rem}
  .tile{padding:11px 12px}
  .tile .rot{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tile .val{font-size:19px;margin-top:3px}
  .tile .pie-t{font-size:13px}

  /* ---- pestañas: una fila que scrollea, nunca tres renglones ---- */
  .solapas{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;
           -webkit-overflow-scrolling:touch;gap:0;margin-bottom:1rem}
  .solapas::-webkit-scrollbar{display:none}
  .solapas a{flex:0 0 auto;scroll-snap-align:start;min-height:44px;padding:0 15px;
             display:flex;align-items:center;white-space:nowrap}

  /* Las once secciones de Admin, en una fila que corre: apiladas eran
     cuatro renglones de chips antes de llegar a la configuración. */
  .admin-secs{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;
              -webkit-overflow-scrolling:touch;padding-bottom:2px}
  .admin-secs::-webkit-scrollbar{display:none}
  .admin-secs > .btn{flex:0 0 auto;scroll-snap-align:start}

  /* ---- formularios ----
     16px en los campos no es capricho: abajo de eso, iOS hace zoom al
     enfocar el campo y deja la pantalla corrida. */
  label{font-size:13px;margin:12px 0 5px}
  input,select,textarea{font-size:16px;padding:11px 12px;min-height:44px;border-radius:8px}
  input[type=checkbox],input[type=radio]{min-height:0;width:20px;height:20px}
  textarea{min-height:90px}
  .fila>div,.pill-form>div{flex:1 1 100% !important}
  /* Los renglones que son sólo botones comparten fila (el JS los marca). */
  .pill-form>[data-bot]{flex:1 1 auto !important;min-width:120px}
  .pill-form>[data-bot] .btn,.pill-form>[data-bot] button{width:100%}

  /* La acción que crea algo: sola, arriba del listado y a lo ancho. */
  .acc-primaria{display:flex;gap:8px;margin:0 0 12px}
  .acc-primaria>.btn{flex:1 1 auto;min-height:46px;font-weight:600;
        background:linear-gradient(180deg,var(--rojo-claro) 0%,var(--rojo) 52%,var(--rojo-osc) 100%);
        color:#fff;border-color:var(--rojo-osc);
        box-shadow:0 1px 2px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.18)}
  .cabecera{grid-template-columns:1fr;gap:0}
  .cabecera .campo{display:block;margin-bottom:12px}
  .cabecera .campo label{display:block;flex:none;text-align:left;margin:0 0 5px;font-size:13px}

  /* Filtros plegados: siete campos desplegados dejaban el listado abajo
     de todo. El número en el título avisa cuántos hay puestos. */
  .filtros-movil{margin:-.2rem 0}
  .filtros-movil > summary{list-style:none;cursor:pointer;min-height:44px;
                           display:flex;align-items:center;gap:8px;
                           font-size:14px;font-weight:600;color:var(--texto)}
  .filtros-movil > summary::-webkit-details-marker{display:none}
  .filtros-movil > summary::before{content:'▸';color:var(--rojo);font-size:13px}
  .filtros-movil[open] > summary::before{content:'▾'}
  .filtros-movil > summary b{background:var(--rojo);color:#fff;font-size:11px;
                             border-radius:99px;padding:1px 8px;font-weight:700}
  .filtros-movil[open] > summary{margin-bottom:4px}

  /* ---- botones: 44px de alto, y la acción principal a lo ancho ---- */
  button,.btn{min-height:44px;padding:11px 16px;font-size:14px;
              display:inline-flex;align-items:center;justify-content:center;gap:7px}
  .btn.chico{min-height:40px;padding:8px 12px;font-size:13px}
  .acciones{gap:8px;margin-top:.9rem}
  .acciones > .btn,.acciones > button{flex:1 1 145px}
  .barra-guardar{gap:8px}
  .barra-guardar > .btn,.barra-guardar > button{flex:1 1 100%}
  .paginado{justify-content:center;gap:8px}

  /* ---- listados: cada fila es una tarjeta ----
     Los rótulos los copia el JS desde el <thead> (data-rot), así no hay
     que escribirlos a mano en las 38 tablas de la app. Sin JS la tabla
     se sigue viendo, con scroll, como hasta ahora. */
  .tabla-scroll{overflow:visible}
  table[data-tarjetas]{display:block;min-width:0;font-size:14px}
  table[data-tarjetas] > thead{display:none}
  table[data-tarjetas] > tbody,table[data-tarjetas] > tfoot{display:block}
  table[data-tarjetas] > tbody > tr{display:flex;flex-direction:column;
        background:#fff;border:1px solid var(--linea);border-radius:10px;
        padding:11px 13px;margin-bottom:10px}
  table[data-tarjetas] > tbody > tr:hover > td{background:none}
  table[data-tarjetas] > tbody > tr > td{display:flex;align-items:baseline;
        justify-content:space-between;gap:14px;text-align:right;
        border:0;padding:4px 0;line-height:1.35;overflow-wrap:anywhere}
  table[data-tarjetas] td[data-rot]::before{content:attr(data-rot);
        flex:0 0 38%;text-align:left;font-size:12px;font-weight:600;color:var(--suave);
        text-transform:uppercase;letter-spacing:.03em;line-height:1.35}
  table[data-tarjetas] td[data-vacia]{display:none}
  table[data-tarjetas] td[data-campo]{display:block;text-align:left;padding:5px 0}
  table[data-tarjetas] td[data-campo]::before{display:block;margin-bottom:4px}
  table[data-tarjetas] td[data-campo] input,
  table[data-tarjetas] td[data-campo] select,
  table[data-tarjetas] td[data-campo] textarea{width:100%}
  /* Valor largo: el rótulo arriba y el texto usando el ancho entero. */
  table[data-tarjetas] td[data-largo]{display:block;text-align:left;overflow-wrap:break-word}
  table[data-tarjetas] td[data-largo]::before{display:block;margin-bottom:1px}
  table[data-tarjetas] td[data-full]{display:block;text-align:left;padding:0}
  /* Los botones de la fila van al pie de la tarjeta aunque en la tabla sean
     la primera celda: `order` los baja sin tocar el DOM —moverlos de verdad
     rompería los scripts que buscan celdas por posición—. */
  table[data-tarjetas] td[data-acc]{order:2;display:flex;flex-wrap:wrap;gap:8px;
        justify-content:flex-start;text-align:left;white-space:normal;
        border-top:1px solid var(--linea);margin-top:9px;padding:10px 0 0}
  table[data-tarjetas] td[data-acc]:empty{display:none}
  table[data-tarjetas] td[data-acc] > .btn,
  table[data-tarjetas] td[data-acc] > button,
  table[data-tarjetas] td[data-acc] > form > button{flex:1 1 auto;min-height:40px}
  table[data-tarjetas] > tbody > tr[data-cont]{margin-top:-10px;border-top:0;
        border-top-left-radius:0;border-top-right-radius:0;padding-top:0}
  table[data-tarjetas] > tfoot > tr{display:flex;flex-direction:column;
        background:var(--gris-bg);border:1px solid var(--linea);border-radius:10px;padding:11px 13px}
  table[data-tarjetas] > tfoot td{display:flex;justify-content:space-between;gap:14px;
        border:0;padding:3px 0;text-align:right}
  /* Los importes son lo que se compara de una tarjeta a la otra: van en
     negrita para poder barrer la lista sin leer los rótulos. */
  table[data-tarjetas] .num{white-space:normal;font-weight:600}
  /* El detalle desplegable: adentro de la tarjeta, sin la sangría de 34px. */
  .det > td{padding:0}
  .det-caja{padding:10px 0 4px}
  /* El botón de desplegar los ítems: en la tabla es un "+" suelto en la
     primera columna, que en la tarjeta no dice nada. Acá lleva rótulo —el
     texto lo pone el CSS porque el script del listado reescribe el
     textContent del botón para alternar + y −. */
  .desplegar{width:auto;min-width:44px;height:40px;min-height:40px;
             padding:0 13px;font-size:18px;flex:0 0 auto;
             flex-direction:row-reverse;gap:8px}
  .desplegar::before{content:'Ítems';font-size:13px;font-weight:600}

  /* ---- tarjetas de deudor (esta pantalla ya venía en tarjetas) ---- */
  .deu-acc > .btn{flex:1 1 140px}
  .deu-plata{font-size:19px}

  /* ---- accesos del tablero ----
     Acostados: la cinta oscura y el ícono centrado hacían 190px por tarjeta,
     y las cuatro no entraban ni en dos pantallas. Así son ~115px. */
  .accesos{grid-template-columns:1fr;gap:10px}
  .acceso{display:grid;grid-template-columns:auto 1fr;align-items:center;
          gap:4px 13px;text-align:left;padding:13px 14px}
  .acceso .cinta{display:none}
  .acceso .ico{margin:0;width:42px;height:42px;grid-row:span 2;align-self:start}
  .acceso h3{margin:0;font-size:15px}
  .acceso .que{margin:2px 0 0;min-height:0;font-size:13px;line-height:1.35}
  .acceso .btns{grid-column:1 / -1;padding:11px 0 0;gap:8px}
  .acceso .btns .btn{flex:1 1 auto;max-width:none;min-height:42px}
  .saludo{padding:.9rem .85rem}
  .saludo > div{gap:10px !important}
  .saludo .btn{width:100%}

  /* ---- totales del comprobante ---- */
  .totales-linea{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
  .totales-linea .grande{grid-column:1 / -1}
  .totales-linea .grande .n{font-size:20px}
}

@media print{
  .top-movil,.tabbar,.hoja-fondo,.filtros-movil{display:none !important}
}