/* ============================================================
   HSETEL — Estilos compartidos (reset, tokens, header, riel,
   modales, confirm dialog, toasts, botones, badges, tablas)
   Usado por: index, home, compras, empleados, pagos, gastos,
   calendario, estados_financieros, admin
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg:#15161a; --bg2:#1b1c21; --bg3:#222329;
  --border:#2b2d34; --border2:#3a3c45;
  --accent:#f2a93b; --accent2:#5fa8f2; --warn:#e2793d; --danger:#f2695f;
  --purple:#b18cf0; --success:#5fd0a3; --text:#c4c6cf; --text-dim:#84879a; --text-head:#f2f3f6;
  --mono:'IBM Plex Mono',monospace; --sans:'IBM Plex Sans',sans-serif;
  --radius:6px; --shadow:0 4px 24px rgba(0,0,0,.5);
}
html { font-size:14px; }
body { font-family:var(--sans); background:var(--bg); color:var(--text); min-height:100vh; overflow-x:hidden; }
body::before { content:''; position:fixed; inset:0; z-index:0; background-image:linear-gradient(rgba(242,169,59,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(242,169,59,.03) 1px,transparent 1px); background-size:40px 40px; pointer-events:none; }

/* ── Header / logo (páginas con riel + admin) ─────────────── */
header { position:fixed; top:0; left:0; right:0; z-index:60; height:70px; box-sizing:border-box; display:flex; align-items:center; justify-content:space-between; padding:16px 40px; background:var(--bg2); border-bottom:1px solid var(--border); }
.logo { display:flex; align-items:center; gap:12px; text-decoration:none; }
.logo-mark { width:36px; height:36px; object-fit:contain; display:block; filter:drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
.logo-text { font-size:18px; font-weight:600; color:var(--text-head); letter-spacing:.05em; }
.logo-sub { font-family:var(--mono); font-size:10px; color:var(--text-dim); letter-spacing:.15em; }
.header-status { display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; color:var(--text-dim); padding:4px 10px; background:var(--bg3); border:1px solid var(--border); border-radius:20px; }
.dot { width:6px; height:6px; border-radius:50%; background:var(--accent); animation:pulse 2s infinite; flex-shrink:0; }
.btn-salir { background:none; border:1px solid var(--border2); border-radius:4px; color:var(--text-dim); font-size:11px; padding:4px 10px; cursor:pointer; font-family:var(--mono); transition:all .2s; }
.btn-salir:hover { color:var(--danger); border-color:var(--danger); }
.admin-badge { background:rgba(177,140,240,.12); color:var(--purple); border:1px solid rgba(177,140,240,.25); border-radius:20px; font-family:var(--mono); font-size:10px; padding:3px 10px; display:none; align-items:center; gap:4px; }

/* ── Campana / centro de notificaciones ───────────────────── */
.campana-wrap { position:relative; }
.campana-btn { position:relative; background:none; border:1px solid var(--border2); border-radius:20px; width:32px; height:32px; display:grid; place-items:center; color:var(--text-dim); font-size:14px; cursor:pointer; transition:all .15s; }
.campana-btn:hover { color:var(--text-head); border-color:var(--accent); }
.campana-badge { position:absolute; top:-4px; right:-4px; background:var(--danger); color:#fff; font-family:var(--mono); font-size:9px; line-height:1; border-radius:8px; padding:2.5px 5px; min-width:14px; text-align:center; display:none; align-items:center; justify-content:center; }
.campana-panel { position:absolute; top:calc(100% + 10px); right:0; width:320px; max-height:420px; background:var(--bg2); border:1px solid var(--border2); border-radius:10px; box-shadow:0 10px 40px rgba(0,0,0,.5); display:none; flex-direction:column; z-index:200; overflow:hidden; }
.campana-panel.open { display:flex; }
.campana-panel-head { padding:10px 10px 10px 16px; border-bottom:1px solid var(--border); font-size:12px; font-weight:600; color:var(--text-head); display:flex; align-items:center; justify-content:space-between; gap:8px; }
.campana-clear { font-family:var(--mono); font-size:9.5px; color:var(--text-dim); cursor:pointer; background:none; border:1px solid var(--border2); border-radius:20px; padding:4px 9px; white-space:nowrap; }
.campana-clear:hover { color:var(--text-head); border-color:var(--accent); }
.campana-list { overflow-y:auto; flex:1; max-height:380px; }
.campana-item { display:flex; gap:10px; padding:10px 16px; border-bottom:1px solid var(--border); font-size:11.5px; }
.campana-item:last-child { border-bottom:none; }
.campana-item .ci-ic { font-size:13px; flex-shrink:0; margin-top:1px; }
.campana-item .ci-title { color:var(--text-head); font-weight:500; }
.campana-item .ci-msg { color:var(--text-dim); margin-top:2px; line-height:1.4; }
.campana-item .ci-time { font-family:var(--mono); font-size:9.5px; color:var(--text-dim); flex-shrink:0; white-space:nowrap; }
.campana-item .ci-dismiss { flex-shrink:0; width:20px; height:20px; border-radius:5px; border:none; background:none; color:var(--text-dim); cursor:pointer; font-size:13px; display:grid; place-items:center; }
.campana-item .ci-dismiss:hover { color:var(--danger); background:rgba(242,105,95,.1); }
.campana-empty { padding:30px 16px; text-align:center; color:var(--text-dim); font-size:11.5px; font-family:var(--mono); }
.campana-alerta { background:rgba(226,121,61,.07); }
.campana-alerta:hover { background:rgba(226,121,61,.14); }
.campana-alerta .ci-title { color:var(--warn); }
@media (max-width:640px) {
  .campana-panel { position:fixed; top:66px; right:8px; left:8px; width:auto; max-height:70vh; }
}

/* ── Búsqueda global (Compras + Ventas + Pagos + Documentos) ── */
.gsearch-wrap { position:relative; }
.gsearch-btn { position:relative; background:none; border:1px solid var(--border2); border-radius:20px; width:32px; height:32px; display:grid; place-items:center; color:var(--text-dim); font-size:14px; cursor:pointer; transition:all .15s; }
.gsearch-btn:hover { color:var(--text-head); border-color:var(--accent); }
.gsearch-panel { position:absolute; top:calc(100% + 10px); right:0; width:380px; max-height:460px; background:var(--bg2); border:1px solid var(--border2); border-radius:10px; box-shadow:0 10px 40px rgba(0,0,0,.5); display:none; flex-direction:column; z-index:300; overflow:hidden; }
.gsearch-panel.open { display:flex; }
.gsearch-input-wrap { padding:10px; border-bottom:1px solid var(--border); }
.gsearch-input-wrap input { width:100%; background:var(--bg3); border:1px solid var(--border2); border-radius:var(--radius); color:var(--text-head); font-family:var(--mono); font-size:12px; padding:9px 10px; outline:none; }
.gsearch-input-wrap input:focus { border-color:var(--accent); }
.gsearch-results { overflow-y:auto; max-height:390px; }
.gsearch-group-label { padding:9px 14px 5px; font-size:10px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.07em; font-family:var(--mono); }
.gsearch-item { padding:9px 14px; border-bottom:1px solid var(--border); cursor:pointer; }
.gsearch-item:hover { background:var(--bg3); }
.gsearch-item .gs-title { color:var(--text-head); font-weight:500; font-size:12px; }
.gsearch-item .gs-sub { color:var(--text-dim); font-family:var(--mono); font-size:10px; margin-top:2px; }
.gsearch-empty { padding:26px 14px; text-align:center; color:var(--text-dim); font-size:11.5px; font-family:var(--mono); }
@media (max-width:640px) {
  .gsearch-panel { position:fixed; top:66px; right:8px; left:8px; width:auto; max-height:70vh; }
}

/* ── Resumen de PDF enlazados en un libro (con / sin PDF) ──── */
.pdf-resumen { display:inline-flex; gap:6px; align-items:center; }
.pdf-chip { font-family:var(--mono); font-size:11px; padding:4px 10px; border-radius:20px; background:var(--bg3); border:1px solid var(--border2); cursor:pointer; transition:all .15s; white-space:nowrap; }
.pdf-chip.con { color:var(--success); }
.pdf-chip.sin { color:var(--warn); }
.pdf-chip.con:hover, .pdf-chip.con.active { border-color:var(--success); background:rgba(95,208,163,.12); }
.pdf-chip.sin:hover, .pdf-chip.sin.active { border-color:var(--warn); background:rgba(226,121,61,.12); }
.pdf-mini { font-family:var(--mono); font-size:10px; margin-top:3px; white-space:nowrap; }
.pdf-mini.ok { color:var(--success); }
.pdf-mini.falta { color:var(--warn); }

/* ── Riel lateral (páginas con .page-shell / .rail) ───────── */
.page-shell { min-height:100vh; padding-top:70px; }
.rail { position:fixed; top:70px; left:0; width:60px; height:calc(100vh - 70px); background:var(--bg2); border-right:1px solid var(--border); display:flex; flex-direction:column; align-items:center; padding:16px 0; gap:5px; z-index:120; overflow:hidden; transition:width .18s ease, box-shadow .18s ease; }
.rail-item { width:38px; height:38px; border-radius:9px; display:grid; place-items:center; font-size:17px; color:var(--text-dim); position:relative; text-decoration:none; transition:all .15s; }
.rail-icon { flex-shrink:0; }
.rail-item.active { background:var(--bg3); color:var(--accent); box-shadow:inset 0 0 0 1px var(--border2); }
.rail-item.active::before { content:''; position:absolute; left:-11px; top:50%; transform:translateY(-50%); width:3px; height:16px; background:var(--accent); border-radius:0 3px 3px 0; }
.rail-item.rail-salir { color:var(--danger); }
.rail-bottom { margin-top:auto; }
/* :hover solo con mouse real — en celular, tocar un link puede dejar el
   ":hover" pegado hasta el siguiente toque en otro lado (no hay mouse que
   "se vaya"), y eso hacía ver un ítem cualquiera marcado como si fuera la
   página activa. */
@media (hover:hover) and (pointer:fine) {
  .rail-item:hover { color:var(--text-head); background:rgba(255,255,255,.04); }
  .rail-item.rail-salir:hover { background:rgba(242,105,95,.1); color:var(--danger); }
}
.main-col { margin-left:60px; min-height:calc(100vh - 70px); display:flex; flex-direction:column; }
.rail-label { display:none; }
.rail-toggle { display:none; align-items:center; justify-content:center; width:34px; height:34px; background:var(--bg3); border:1px solid var(--border2); border-radius:6px; color:var(--text); font-size:18px; line-height:1; cursor:pointer; margin-right:10px; flex-shrink:0; padding:0; }
.rail-backdrop { display:none; }

/* En escritorio (mouse real, no táctil) el riel se expande al pasar el
   mouse por encima, mostrando el texto de cada sección — el ícono solo
   no era claro para gente nueva en el sistema. Se queda angosto por
   defecto (no le quita espacio a la pantalla) y flota sobre el
   contenido al abrirse, sin empujarlo. En celular sigue siendo el cajón
   deslizable de siempre (los estilos de abajo no aplican ahí). */
@media (hover:hover) and (pointer:fine) and (min-width:641px) {
  .rail:hover { width:200px; align-items:stretch; padding-left:11px; padding-right:11px; box-shadow:6px 0 24px rgba(0,0,0,.35); }
  .rail:hover .rail-item { width:auto; height:auto; display:flex; justify-content:flex-start; align-items:center; gap:12px; padding:9px 12px; }
  .rail:hover .rail-item.active::before { left:-11px; }
  .rail:hover .rail-label { display:inline; font-size:13px; font-family:var(--sans); font-weight:500; white-space:nowrap; }
}

/* ── Modal base ────────────────────────────────────────────── */
.modal-overlay { display:none; position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,.75); backdrop-filter:blur(6px); align-items:center; justify-content:center; padding:20px; }
.modal-overlay.open { display:flex; }
.modal-box { background:var(--bg2); border:1px solid var(--border2); border-radius:12px; width:100%; max-width:520px; max-height:92vh; overflow-y:auto; box-shadow:0 8px 40px rgba(0,0,0,.6); animation:modalIn .2s ease; }
.modal-head { padding:20px 24px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; position:sticky; top:0; background:var(--bg2); z-index:1; }
.modal-title { font-size:15px; font-weight:600; color:var(--text-head); }
.modal-close { background:none; border:none; color:var(--text-dim); font-size:18px; cursor:pointer; padding:4px 8px; border-radius:4px; line-height:1; transition:all .15s; }
.modal-close:hover { color:var(--text-head); background:var(--bg3); }
.modal-body { padding:22px 24px; display:flex; flex-direction:column; gap:16px; }
.modal-footer { padding:16px 24px; border-top:1px solid var(--border); display:flex; gap:10px; justify-content:flex-end; position:sticky; bottom:0; background:var(--bg2); }

/* Barra del modal de progreso compartido (ver mostrarProgreso() en app.js) */
.progreso-track { background:var(--bg3); border-radius:20px; height:8px; overflow:hidden; margin-bottom:10px; }
.progreso-fill { background:var(--accent); height:100%; width:0%; transition:width .2s; }
.progreso-fill.indeterminado { width:35% !important; animation:progresoIndet 1.1s ease-in-out infinite; }
@keyframes progresoIndet { 0%,100% { margin-left:0%; } 50% { margin-left:65%; } }

/* ── Confirm dialog (reemplaza confirm() nativo) ──────────── */
.confirm-icon { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-size:20px; margin:0 auto; }
.confirm-icon.warn { background:rgba(226,121,61,.15); color:var(--warn); }
.confirm-icon.danger { background:rgba(242,105,95,.15); color:var(--danger); }
.confirm-msg { font-size:13px; color:var(--text); line-height:1.5; text-align:center; white-space:pre-line; }
.confirm-btn { padding:9px 20px; border-radius:var(--radius); font-family:var(--sans); font-size:13px; font-weight:600; cursor:pointer; border:none; transition:all .2s; }
.confirm-btn.cancel { background:var(--bg3); color:var(--text); border:1px solid var(--border2); }
.confirm-btn.cancel:hover { background:var(--border2); }
.confirm-btn.ok { background:var(--accent); color:var(--bg); }
.confirm-btn.ok:hover { filter:brightness(1.1); }
.confirm-btn.ok.danger { background:var(--danger); color:#fff; }

/* ── Toasts ────────────────────────────────────────────────── */
#toast-container { position:fixed; top:24px; right:24px; z-index:9999; display:flex; flex-direction:column; gap:8px; }
.toast { min-width:290px; max-width:390px; padding:14px 16px; background:var(--bg2); border:1px solid var(--border2); border-radius:8px; box-shadow:0 8px 30px rgba(0,0,0,.5); font-size:12px; display:flex; align-items:flex-start; gap:12px; animation:toastIn .25s ease; }
.toast.success { border-left:3px solid var(--success); }
.toast.error { border-left:3px solid var(--danger); }
.toast.warn { border-left:3px solid var(--warn); }
.toast-title { font-weight:600; color:var(--text-head); margin-bottom:3px; }
.toast-msg { color:var(--text-dim); line-height:1.5; }

/* ── Botones base ──────────────────────────────────────────── */
.btn-primary { background:var(--accent); color:var(--bg); border:none; border-radius:var(--radius); font-family:var(--sans); font-size:13px; font-weight:600; padding:9px 18px; cursor:pointer; transition:all .2s; }
.btn-primary:hover { opacity:.88; }
.btn-primary:disabled { opacity:.4; cursor:not-allowed; }
.btn-sm { padding:6px 12px; font-size:11px; border:1px solid var(--border2); background:var(--bg3); color:var(--text-dim); border-radius:4px; cursor:pointer; font-family:var(--sans); transition:all .15s; white-space:nowrap; }
.btn-sm:hover { color:var(--text-head); border-color:var(--accent); background:rgba(242,169,59,.05); }
.btn-sm:disabled { opacity:.4; cursor:not-allowed; }

/* Íconos de acción (ver/editar/eliminar) con color propio en vez de gris
   parejo — así se distinguen de un vistazo en cualquier tabla de la app,
   sin depender de pasar el mouse encima. Mismo criterio en .icon-btn
   (usado en Documentos) para que se vea igual en todas las páginas. */
.btn-sm.info, .icon-btn.info   { color:var(--accent2); border-color:rgba(95,168,242,.3); }
.btn-sm.info:hover, .icon-btn.info:hover   { color:var(--accent2); border-color:var(--accent2); background:rgba(95,168,242,.08); }
.btn-sm.edit, .icon-btn.edit   { color:var(--purple); border-color:rgba(177,140,240,.3); }
.btn-sm.edit:hover, .icon-btn.edit:hover   { color:var(--purple); border-color:var(--purple); background:rgba(177,140,240,.08); }
.btn-sm.danger, .icon-btn.danger { color:var(--danger); border-color:rgba(242,105,95,.3); }
.btn-sm.danger:hover, .icon-btn.danger:hover { color:var(--danger); border-color:var(--danger); background:rgba(242,105,95,.08); }
.btn-sm.download, .icon-btn.download { color:var(--success); border-color:rgba(95,208,163,.3); }
.btn-sm.download:hover, .icon-btn.download:hover { color:var(--success); border-color:var(--success); background:rgba(95,208,163,.08); }

/* Spinner inline para botones en estado "cargando" (usar con el helper JS conCargando()) */
.spinner-inline { display:inline-block; width:11px; height:11px; border:2px solid rgba(255,255,255,.3); border-top-color:currentColor; border-radius:50%; animation:spin-inline .7s linear infinite; vertical-align:-1.5px; margin-right:6px; }
@keyframes spin-inline { to { transform:rotate(360deg); } }

/* Barra de acento de color en títulos de tarjeta — para que cada sección
   tenga una "firma" visual en vez de verse todo gris parejo. Cada página
   usa su propio nombre de clase para el título (card-title, table-title,
   section-title, etc.) — este modificador ".accent" funciona con todas. */
.card-title.accent, .panel-title.accent { font-size:14px; padding-left:12px; border-left:3px solid var(--accent-c, var(--accent)); }
.table-title.accent, .section-title.accent, .chart-title.accent, .side-title.accent {
  padding-left:12px; border-left:3px solid var(--accent-c, var(--accent));
}

/* ── Tablas ────────────────────────────────────────────────── */
table { width:100%; border-collapse:collapse; font-size:12px; }
tbody tr { border-bottom:1px solid var(--border); transition:background .1s; }
tbody tr:last-child { border-bottom:none; }
/* Cuadrícula (línea entre cada fila Y cada columna) — solo dentro de la
   tabla de un libro abierto (#panel-libro-abierto: el detalle documento por
   documento de un mes específico), no en el resto de tablas de la app
   (listas de períodos, empleados, usuarios, etc.), que se quedan con el
   borde simple de arriba. El borde va en <td>/<th> — es lo que el
   navegador realmente pinta de forma confiable, a diferencia de un borde en
   <tr> — con var(--border2), un poco más claro que var(--border), para que
   se note sin ser muy fuerte.
   IMPORTANTE si se vuelve a tocar esto: va SOLO acá, nunca en la regla
   global de arriba — ya se probó y el usuario pidió específicamente que la
   lista de períodos ("la de afuera") se quede sin líneas. */
#panel-libro-abierto thead th, #panel-libro-abierto tbody td, #panel-libro-abierto tfoot td { border-right:1px solid var(--border2); border-bottom:1px solid var(--border2); }
#panel-libro-abierto thead th:last-child, #panel-libro-abierto tbody td:last-child, #panel-libro-abierto tfoot td:last-child { border-right:none; }
#panel-libro-abierto tbody tr:last-child td { border-bottom:none; }
#panel-libro-abierto tfoot td { border-bottom:none; }
.td-mono { font-family:var(--mono); font-size:11px; }
.td-dim { color:var(--text-dim); }

/* ── Badges ────────────────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; padding:2px 9px; border-radius:20px; font-size:10px; font-family:var(--mono); font-weight:500; }
.badge-green { background:rgba(95,208,163,.12); color:var(--success); border:1px solid rgba(95,208,163,.25); }
.badge-blue { background:rgba(95,168,242,.12); color:var(--accent2); border:1px solid rgba(95,168,242,.25); }
/* Antes cada página redeclaraba esto con un tono de gris ligeramente
   distinto (algunas más azuladas que otras) — un mismo badge ("Pendiente",
   "Inactivo", "Sin enlazar") se veía con dos colores según en qué pantalla
   estuvieras. Queda un solo tono, compartido. */
.badge-dim { background:rgba(90,122,154,.12); color:var(--text-dim); border:1px solid rgba(90,122,154,.25); }
.badge-warn { background:rgba(226,121,61,.12); color:var(--warn); border:1px solid rgba(226,121,61,.25); }
.badge-danger { background:rgba(242,105,95,.12); color:#fc9c94; border:1px solid rgba(242,105,95,.25); }
.badge-purple { background:rgba(177,140,240,.12); color:var(--purple); border:1px solid rgba(177,140,240,.25); }

/* ── Estado vacío ──────────────────────────────────────────── */
.empty-state { text-align:center; padding:60px 20px; color:var(--text-dim); }
.empty-icon { font-size:44px; margin-bottom:12px; opacity:.35; }
.empty-text { font-size:13px; }

@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes modalIn { from{opacity:0;transform:scale(.96) translateY(8px)} to{opacity:1;transform:none} }
@keyframes toastIn { from{opacity:0;transform:translateX(24px)} to{opacity:1;transform:none} }

td.m-mas { display:none; }

/* ── Móvil ─────────────────────────────────────────────────── */
@media (max-width:640px) {
  header { height:56px; padding:8px 12px; justify-content:flex-start; }
  .rail-toggle { display:flex; }
  .logo { gap:8px; }
  .logo-mark { width:28px; height:28px; }
  .logo-text { font-size:14px; }
  .logo-sub { display:none; }
  .header-right { gap:8px; margin-left:auto; }
  .header-status { font-size:9px; padding:3px 7px; white-space:nowrap; }
  .header-status span { white-space:nowrap; }
  .admin-badge { font-size:9px; padding:2px 6px; }
  .btn-salir { font-size:9px; padding:3px 7px; }

  .page-shell { padding-top:56px; }
  /* 100vh en el celular incluye la barra del navegador, que tapaba lo de abajo (Cerrar sesión):
     se usa la altura visible real (dvh) y el menú se puede desplazar si no cabe. */
  .rail { top:56px; left:0; bottom:0; height:auto; max-height:calc(100vh - 56px); max-height:calc(100dvh - 56px); overflow-y:auto; overscroll-behavior:contain; width:230px; max-width:78vw; align-items:stretch; padding:14px 10px calc(24px + env(safe-area-inset-bottom)); gap:2px; transform:translateX(-100%); transition:transform .25s ease; box-shadow:6px 0 30px rgba(0,0,0,.5); }
  .rail-bottom { margin-top:auto; padding-top:12px; }
  .rail.open { transform:translateX(0); }
  .rail-item { width:auto; height:auto; display:flex; align-items:center; flex-direction:row; justify-content:flex-start; gap:12px; padding:11px 14px; border-radius:8px; font-size:18px; }
  .rail-item.active::before { left:0; }
  .rail-icon { flex-shrink:0; width:22px; text-align:center; }
  .rail-label { display:inline; font-size:13.5px; font-family:var(--sans); font-weight:500; }
  .main-col { margin-left:0; min-height:calc(100vh - 56px); }
  .rail-backdrop { display:block; position:fixed; inset:0; top:56px; background:rgba(0,0,0,.55); z-index:49; opacity:0; pointer-events:none; transition:opacity .2s ease; }
  .rail-backdrop.open { opacity:1; pointer-events:auto; }

  .modal-overlay { padding:10px; }
  .modal-head, .modal-body, .modal-footer { padding-left:16px; padding-right:16px; }

  #toast-container { left:10px; right:10px; top:66px; }
  .toast { min-width:0; max-width:none; width:100%; }

  .table-wrap > table, .card > table { display:block; overflow-x:auto; }
  .card > table th[style*="width"] { width:auto !important; min-width:70px; }
  .pv-grid-2 { grid-template-columns:1fr !important; }

  /* ── Formularios y modales cómodos en el celular ──────────────
     Para consultar, y también para agregar o descargar de vez en cuando. */
  .grid-2 { grid-template-columns:1fr !important; }
  .grid-3 { grid-template-columns:1fr 1fr !important; }
  .modal-overlay { padding:0; align-items:flex-end; }
  .modal-box { max-width:none !important; max-height:94vh; border-radius:16px 16px 0 0; }
  .modal-overlay .modal-box[style*="height"] { height:94vh !important; }   /* visores de PDF */
  .modal-footer { flex-wrap:wrap; }
  .modal-footer > button { flex:1 1 140px; min-height:42px; }
  /* 16px evita que iOS haga zoom al tocar un campo */
  input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea { font-size:16px !important; min-height:40px; }
  .btn-primary, .btn-secondary { min-height:38px; }
  .btn-sm { min-height:0; }
  .icon-btn { width:32px !important; height:32px !important; }
  /* ── Botones y barras de herramientas ─────────────────────────
     El texto nunca se sale del botón: puede pasar a dos líneas, y las barras
     (encabezado de un libro, filtros) se apilan a todo el ancho. */
  button, .btn-sm, .btn-primary, .btn-secondary, .btn-confirm, label.btn-sm { white-space:normal; line-height:1.25; max-width:100%; }
  .btn-sm, .btn-primary, .btn-secondary, .btn-confirm { padding:9px 14px; display:inline-flex; align-items:center; justify-content:center; gap:6px; text-align:center; }
  .table-header { flex-direction:column !important; align-items:stretch !important; gap:12px !important; padding:14px !important; }
  .table-header > * { min-width:0; max-width:100%; }
  .table-header > div { width:100%; }
  .table-header > div:first-child { flex-wrap:wrap; }
  .table-header input[type=text], .table-header input:not([type]), .table-header select { width:100% !important; max-width:100%; }
  .table-header .search-box, .toolbar .search-box, .search-box { width:100% !important; }
  .search-box input { width:100% !important; min-width:0; }
  /* Fila de acciones del encabezado: botones parejos, repartidos en el ancho */
  .table-header > div:nth-child(2) { display:flex; flex-wrap:wrap; gap:8px; }
  .table-header > div:nth-child(2) > .btn-sm, .table-header > div:nth-child(2) > label, .table-header > div:nth-child(2) > button { flex:1 1 calc(50% - 8px); }
  .table-header > div:nth-child(2) > .search-box, .table-header > div:nth-child(2) > .pdf-resumen { flex:1 1 100%; }
  .table-header > div:nth-child(2) > div[style*="position:relative"] { flex:0 0 auto; }
  .table-header > div:nth-child(2) > div[style*="position:relative"] .btn-sm { width:100%; }
  .pdf-resumen { flex-wrap:wrap; }
  /* Menús desplegables de exportar/enviar: dentro de la pantalla */
  #export-menu-dl, #export-menu-send { right:auto !important; left:0 !important; }

  /* Pestañas (Documentos: Compras/Ventas/Pagos/…): pasan a una segunda fila en vez de quedar cortadas */
  .tipo-tabs { flex-wrap:wrap; row-gap:0; }
  .tipo-tab { padding:10px 12px; }
  .file-name { white-space:normal !important; overflow:visible !important; text-overflow:clip !important; max-width:none !important; word-break:break-word; }
  /* Encabezado: lo de la derecha (buscar, campana, estado) siempre pegado al borde */
  header > div:last-child { margin-left:auto; gap:8px !important; min-width:0; }
  .header-status span { display:none; }   /* solo el puntito: el texto no cabe */
  .header-status { padding:6px 8px; }

  /* ── Tablas de pocas columnas → una tarjeta por fila ──────────
     (app.js agrega .m-cards y el data-label de cada celda). Las tablas
     anchas, como el detalle de un libro, siguen con scroll horizontal. */
  .table-wrap > table.m-cards, .card > table.m-cards, .overflow-table > table.m-cards, table.m-cards { display:block; overflow:visible; width:100%; min-width:0; }
  table.m-cards thead { display:none; }
  table.m-cards tbody { display:block; }
  table.m-cards tr { display:block; background:var(--bg2); border:1px solid var(--border); border-radius:10px; margin:0 0 10px; padding:4px 12px; }
  table.m-cards tr.detalle, table.m-cards tr.sin-tarjeta { background:none; border:none; padding:0; }
  table.m-cards td { display:flex; justify-content:space-between; align-items:center; gap:14px; width:auto !important; padding:8px 0 !important; border:none !important; border-bottom:1px solid var(--border) !important; text-align:right !important; white-space:normal !important; word-break:break-word; max-width:none !important; overflow:visible !important; text-overflow:clip !important; }
  table.m-cards td:last-child { border-bottom:none !important; }
  table.m-cards td > * { max-width:100%; }
  table.m-cards td[data-label]:not([data-label=""]) { text-align:right !important; }
  table.m-cards td[data-label]:not([data-label=""])::before { content:attr(data-label); font-family:var(--mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-dim); text-align:left; flex-shrink:0; max-width:42%; }
  /* Celdas de botones: repartidos a lo ancho de la tarjeta (separados parejo), en todas las tablas.
     Sirve para las que no tienen nombre de columna y para las llamadas "Acciones". */
  table.m-cards td[data-label=""], table.m-cards td[data-label="Acciones"] { justify-content:space-between; flex-wrap:nowrap; gap:8px; text-align:left !important; }
  table.m-cards td[data-label="Acciones"]::before { display:none; }
  table.m-cards td[data-label=""] > div[style*="display:flex"], table.m-cards td[data-label="Acciones"] > div, table.m-cards td .row-actions { flex:1 1 100%; width:100%; justify-content:space-between !important; gap:8px !important; flex-wrap:wrap; }
  table.m-cards td[data-label=""] > div[style*="display:flex"] > .exp-wrap, table.m-cards td[data-label=""] > .exp-wrap { flex:0 0 auto; }
  /* Dentro de un libro abierto (registros) los botones quedan como estaban: sin la regla de arriba */
  #panel-libro-abierto table.m-cards td[data-label=""], #panel-libro-abierto table.m-cards td[data-label="Acciones"] { justify-content:space-between; flex-wrap:nowrap; gap:14px; }
  #panel-libro-abierto table.m-cards td[data-label=""] > div[style*="display:flex"], #panel-libro-abierto table.m-cards td .row-actions { flex:0 1 auto; width:auto; justify-content:flex-end !important; gap:4px !important; }
  table.m-cards td[colspan] { display:block; text-align:left !important; }
  table.m-cards td .row-actions, table.m-cards td .acciones { justify-content:flex-end; flex-wrap:wrap; }
  /* Encabezado del libro de Pagos (misma disposición que Compras y Ventas) */
  .libro-head { flex-direction:column; align-items:stretch !important; gap:12px !important; margin-bottom:12px !important; }
  .libro-head > div:first-child { flex-wrap:wrap; width:100%; }
  .libro-head input[type=text] { width:100% !important; max-width:100%; }
  .libro-actions { display:flex !important; flex-wrap:wrap; gap:8px !important; width:100%; }
  .libro-actions > .btn-sm, .libro-actions > label, .libro-actions > button { flex:1 1 calc(50% - 8px); justify-content:center; }
  .libro-actions > .exp-wrap { flex:0 0 auto; }
  .libro-actions > .exp-wrap > .btn-sm { width:100%; justify-content:center; }
  #libro-abierto-wrap { padding:0 !important; }
  /* Libro abierto (Compras / Ventas / Pagos): ocupa toda la pantalla, sin el margen del riel */
  #panel-libro-abierto { top:56px !important; left:0 !important; right:0 !important; padding:12px !important; }
  table.m-cards td[data-label]:not([data-label=""])::before { word-break:normal; overflow-wrap:break-word; hyphens:auto; }

  /* Cabeceras de tarjeta (Administración y otras): título arriba, controles debajo a todo el ancho */
  .card-head { flex-direction:column; align-items:stretch !important; gap:10px; padding:14px !important; }
  .card-head > div { width:100%; min-width:0; }
  .card-head > div[style*="display:flex"], .card-head > div[style*="display: flex"] { flex-wrap:wrap; }
  .card-head input:not([type=checkbox]):not([type=radio]), .card-head select { flex:1 1 140px; width:auto !important; min-width:0; max-width:100%; }
  .card-head input[type=email], .card-head input[type=text], .card-head input[type=search] { flex:1 1 100%; }
  .card-head .btn-primary, .card-head .btn-sm, .card-head button { flex:1 1 140px; }
  .card-body { padding:14px !important; }
  /* Fila de botones suelta (p. ej. Usuarios: Descargar / Enviar / Nuevo): se reparten en el ancho */
  div[style*="justify-content:flex-end"][style*="margin-bottom"] { flex-wrap:wrap; justify-content:stretch !important; }
  div[style*="justify-content:flex-end"][style*="margin-bottom"] > * { flex:1 1 130px; }
  div[style*="justify-content:flex-end"][style*="margin-bottom"] > .exp-wrap > button { width:100%; justify-content:center; }
  /* Cualquier contenedor de una tabla en tarjetas crece con su contenido (sin recuadro con scroll propio) */
  div:has(> table.m-cards) { max-height:none !important; overflow:visible !important; }
  table.m-cards { min-width:0 !important; }

  /* Tarjetas con muchas columnas: las secundarias quedan ocultas hasta tocar "Ver más" */
  table.m-colapsable td[data-m-sec] { display:none; }
  table.m-colapsable tr.m-abierta td[data-m-sec] { display:flex; }
  table.m-cards td.m-mas { display:block; text-align:center !important; cursor:pointer; color:var(--accent2); font-family:var(--mono); font-size:11px; padding:10px 0 6px !important; border-bottom:none !important; }
  table.m-cards td.m-mas::before { content:'Ver más ▾'; }
  table.m-cards tr.m-abierta td.m-mas::before { content:'Ver menos ▴'; }
  table.m-cards td:empty:not(.m-mas) { display:none; }
  /* Totales al pie: una tarjeta aparte, resaltada */
  table.m-cards tfoot { display:block; }
  table.m-cards tfoot tr { border-color:var(--border2); background:var(--bg3); }
  table.m-cards tfoot td { font-weight:600; }
  .table-wrap:has(> table.m-cards), .table-wrap:has(> .overflow-table > table.m-cards) { background:none; border:none; box-shadow:none; }
  /* La lista de tarjetas crece con su contenido: sin recuadro con scroll propio (era lo que dejaba ver "1 y medio") */
  .overflow-table:has(table.m-cards), .overflow-table:has(table.m-cards) > table { max-height:none !important; overflow:visible !important; }
  .table-wrap:has(table.m-cards) { overflow:visible !important; }
}

/* ══════════════════════════════════════════════════════════════
   Compartido entre páginas
   Estas reglas estaban repetidas, idénticas, en el <style> de varias
   páginas; ahora viven acá una sola vez. Van al final para conservar
   el orden de cascada que tenían (después de las reglas base de arriba).
   ══════════════════════════════════════════════════════════════ */
.exp-wrap { position:relative; display:inline-block; }
.exp-dropdown { display:none; flex-direction:column; }
.exp-dropdown.open { display:flex !important; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.dl-menu { display:none; position:absolute; top:calc(100% + 6px); left:0; background:var(--bg2); border:1px solid var(--border2); border-radius:8px; min-width:140px; z-index:500; box-shadow:0 8px 24px rgba(0,0,0,.5); overflow:hidden; }
.dl-menu.open { display:flex; flex-direction:column; }
.dl-menu button { background:none; border:none; padding:9px 12px; text-align:left; color:var(--text); font-size:12px; cursor:pointer; font-family:var(--sans); border-bottom:1px solid var(--border); }
.dl-menu button:last-child { border-bottom:none; }
.dl-menu button:hover { background:var(--bg3); color:var(--text-head); }
.table-header { display:flex; align-items:center; justify-content:space-between; padding:16px 22px; border-bottom:1px solid var(--border); flex-wrap:wrap; gap:10px; }
.table-title { font-size:13px; font-weight:600; color:var(--text-head); }
.table-count { font-family:var(--mono); font-size:11px; color:var(--text-dim); background:var(--bg3); border:1px solid var(--border); padding:2px 8px; border-radius:10px; }
.td-purple { color:var(--purple); }
.td-danger { color:var(--danger); }
.badge-active { background:rgba(95,208,163,.12); color:var(--success); border:1px solid rgba(95,208,163,.25); }
.badge-inactive { background:rgba(242,105,95,.12); color:#fc9c94; border:1px solid rgba(242,105,95,.25); }
.search-box { display:flex; align-items:center; gap:8px; background:var(--bg3); border:1px solid var(--border2); border-radius:var(--radius); padding:7px 12px; transition:border-color .2s; }
.search-box:focus-within { border-color:var(--accent); }
.search-box input { background:none; border:none; outline:none; color:var(--text-head); font-family:var(--mono); font-size:12px; width:200px; }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
.topstrip { background:var(--bg2); border-bottom:1px solid var(--border); padding:14px 24px; display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.ts-group-label { font-family:var(--mono); font-size:9px; font-weight:600; color:var(--text-dim); letter-spacing:.13em; text-transform:uppercase; margin-bottom:8px; display:block; }
.ts-upload { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.upload-text strong { color:var(--accent); }
.file-list { display:flex; flex-direction:column; gap:4px; }
.ts-file-chip { display:inline-flex; align-items:center; gap:7px; background:var(--bg3); border:1px solid var(--border2); border-radius:var(--radius); padding:9px 14px; font-family:var(--sans); font-size:12px; color:var(--text); cursor:pointer; transition:all .2s; }
.ts-file-chip:hover { border-color:var(--accent); background:rgba(242,169,59,.06); }
.ts-btn { padding:8px 14px; font-size:11px; border:1px solid var(--border2); background:var(--bg3); color:var(--text-dim); border-radius:6px; font-family:var(--sans); font-weight:600; cursor:pointer; white-space:nowrap; transition:all .2s; display:inline-flex; align-items:center; gap:6px; }
.ts-btn:hover { color:var(--text-head); border-color:var(--accent); }
.ts-btn.primary { background:var(--accent); color:var(--bg); border:none; }
.ts-btn.primary:hover { opacity:.88; color:var(--bg); }
.ts-btn:disabled { opacity:.4; cursor:not-allowed; }
.ts-divider { width:1px; align-self:stretch; background:var(--border); }
.ts-stats { display:flex; gap:20px; margin-left:auto; flex-wrap:wrap; }
.stat-chip { display:flex; flex-direction:column; gap:4px; padding-left:14px; border-left:3px solid var(--chip,var(--accent)); }
.stat-chip-label { font-size:9.5px; color:var(--text-dim); font-family:var(--mono); text-transform:uppercase; letter-spacing:.06em; }
.stat-chip-value { font-size:16px; font-weight:700; font-family:var(--mono); color:var(--chip,var(--text-head)); font-variant-numeric:tabular-nums; }
.tabs-wrap { display:flex; gap:4px; background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius); padding:3px; width:fit-content; margin:20px 24px 0; }
.sticky-hscroll { display:none; position:sticky; bottom:0; left:0; height:12px; overflow-x:auto; overflow-y:hidden; background:var(--bg3); border:1px solid var(--border); border-top:none; border-radius:0 0 10px 10px; z-index:6; scrollbar-width:thin; scrollbar-color:rgba(242,169,59,.5) var(--bg3); }
.sticky-hscroll > div { height:1px; }
.sticky-hscroll::-webkit-scrollbar { height:10px; }
.sticky-hscroll::-webkit-scrollbar-track { background:var(--bg3); }
.sticky-hscroll::-webkit-scrollbar-thumb { background:rgba(242,169,59,.5); border-radius:4px; }
.sticky-hscroll::-webkit-scrollbar-thumb:hover { background:rgba(242,169,59,.85); }
.modal-libro { background:var(--bg2); border:1px solid var(--border2); border-radius:12px; width:100%; max-width:480px; max-height:90vh; overflow-y:auto; box-shadow:0 8px 40px rgba(0,0,0,.6); animation:modalIn .2s ease; }
.modal-libro .modal-sub { font-size:11px; color:var(--text-dim); font-family:var(--mono); margin-top:2px; }
.modal-libro-footer { padding:16px 24px; border-top:1px solid var(--border); display:flex; gap:10px; justify-content:flex-end; position:sticky; bottom:0; background:var(--bg2); }
.form-select, .form-input { background:var(--bg3); border:1px solid var(--border2); border-radius:var(--radius); color:var(--text-head); font-family:var(--mono); font-size:12px; padding:9px 12px; outline:none; width:100%; transition:border-color .2s; appearance:none; }
.form-select:focus, .form-input:focus { border-color:var(--accent); }
.form-select option { background:var(--bg2); }
.btn-secondary { padding:10px 20px; border:1px solid var(--border2); background:var(--bg3); color:var(--text); border-radius:var(--radius); font-family:var(--sans); font-size:13px; cursor:pointer; transition:all .15s; }
.btn-secondary:hover { border-color:var(--accent); color:var(--accent); }
.btn-confirm { padding:10px 20px; background:var(--accent); color:var(--bg); border:none; border-radius:var(--radius); font-family:var(--sans); font-size:13px; font-weight:600; cursor:pointer; transition:all .15s; }
.btn-confirm:hover { background:#ffbb55; }
.btn-confirm:disabled { opacity:.4; cursor:not-allowed; }
.libro-option { display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--border2); border-radius:var(--radius); cursor:pointer; transition:all .15s; background:var(--bg3); }
.libro-option.selected { border-color:var(--accent); background:rgba(242,169,59,.07); }
.libro-option-radio { width:16px; height:16px; border:2px solid var(--border2); border-radius:50%; flex-shrink:0; display:grid; place-items:center; transition:all .15s; }
.libro-option.selected .libro-option-radio { border-color:var(--accent); background:var(--accent); }
.libro-option.selected .libro-option-radio::after { content:''; width:6px; height:6px; background:var(--bg); border-radius:50%; }
.import-hint { background:rgba(95,168,242,.08); border:1px solid rgba(95,168,242,.2); border-radius:var(--radius); padding:10px 14px; font-size:11px; color:var(--accent2); line-height:1.5; }
.upload-sub { font-size:11px; color:var(--text-dim); margin-top:2px; font-family:var(--mono); }
.row-actions { display:flex; align-items:center; gap:4px; justify-content:flex-end; }
.stats-row { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:24px; }

/* ══════════════════════════════════════════════════════════════
   Comodidad de uso: tema claro, barra inferior y botón "＋" del
   celular, carga con esqueleto, validación, foco visible y
   columna fija en tablas anchas.
   ══════════════════════════════════════════════════════════════ */

/* ── Tema claro (el oscuro es el de siempre; "auto" sigue al sistema) ── */
:root[data-theme="claro"] {
  color-scheme: light;
  --bg:#f3f4f7; --bg2:#ffffff; --bg3:#eceef3;
  --border:#dde0e7; --border2:#c9cdd8;
  --accent:#c47a0b; --accent2:#2a74cf; --warn:#c4561a; --danger:#d03a30;
  --purple:#7747d6; --success:#1a9467;
  --text:#2b2e3a; --text-dim:#6a6f80; --text-head:#12141a;
  --shadow:0 4px 24px rgba(20,22,40,.12);
}
:root[data-theme="claro"] body::before { background-image:linear-gradient(rgba(60,70,100,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(60,70,100,.05) 1px,transparent 1px); }
:root[data-theme="claro"] .modal-overlay { background:rgba(30,34,50,.45); }
:root[data-theme="claro"] .rail-item:hover, :root[data-theme="claro"] .aside-link:hover { background:rgba(20,30,60,.05); }
:root[data-theme="claro"] tbody tr:nth-child(even) { background:rgba(20,30,60,.025); }
:root[data-theme="claro"] .toast { box-shadow:0 6px 24px rgba(20,22,40,.18); }

/* ── Celular: barra de navegación abajo ── */
.nav-inferior, .fab { display:none; }
@media (max-width:640px) {
  .nav-inferior { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:90; background:var(--bg2); border-top:1px solid var(--border); padding:4px 4px calc(4px + env(safe-area-inset-bottom)); box-shadow:0 -4px 20px rgba(0,0,0,.25); }
  .ni-item { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:6px 2px; min-height:48px; background:none; border:none; border-radius:8px; color:var(--text-dim); text-decoration:none; font-family:var(--sans); cursor:pointer; }
  .ni-ic { font-size:19px; line-height:1; }
  .ni-tx { font-size:10px; font-weight:500; }
  .ni-item.active { color:var(--accent); background:var(--bg3); }
  body.con-nav-inferior { padding-bottom:calc(64px + env(safe-area-inset-bottom)); }
  .rail { bottom:calc(60px + env(safe-area-inset-bottom)); }
  /* el botón de la acción principal flota arriba de la barra, a la derecha */
  .fab { display:flex; align-items:center; gap:8px; position:fixed; right:16px; bottom:calc(76px + env(safe-area-inset-bottom)); z-index:95; padding:0 18px 0 14px; height:50px; border:none; border-radius:25px; background:var(--accent); color:var(--bg); font-family:var(--sans); font-size:14px; font-weight:600; box-shadow:0 6px 20px rgba(0,0,0,.35); cursor:pointer; }
  .fab-ic { font-size:22px; line-height:1; }
}

/* ── Carga: barra que respira en lugar del texto "Cargando…" ── */
.skel-text { display:block; width:min(220px,60%); height:1em; border-radius:6px; color:transparent !important; user-select:none;
  background:linear-gradient(90deg,var(--bg3) 25%,var(--border) 50%,var(--bg3) 75%); background-size:200% 100%; animation:skelBrillo 1.2s ease-in-out infinite; }
td > .skel-text, td.skel-text { margin:6px 0; }
@keyframes skelBrillo { from { background-position:200% 0; } to { background-position:-200% 0; } }
@media (prefers-reduced-motion: reduce) { .skel-text { animation:none; } }

/* ── Validación mientras se escribe ── */
.campo-invalido { border-color:var(--danger) !important; box-shadow:0 0 0 3px rgba(242,105,95,.12) !important; }
.campo-msg { margin-top:4px; font-family:var(--mono); font-size:10.5px; color:var(--danger); }

/* ── Foco visible al navegar con teclado ── */
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset:0; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline:none; }

/* ── Columna fija en tablas anchas (escritorio) ── */
@media (min-width:641px) {
  .col-fija { position:sticky; left:0; z-index:1; background:var(--bg2); box-shadow:2px 0 0 var(--border); }
  thead .col-fija, thead th.col-fija { z-index:4; background:var(--bg3); top:0; }
  tfoot .col-fija { background:var(--bg2); }
}

/* El menú lateral cerrado (celular) no debe "filtrar" su sombra hacia la pantalla */
@media (max-width:640px) { .rail:not(.open) { box-shadow:none; } }

/* ── Selección múltiple en el libro abierto ── */
.sel-cell { width:34px; text-align:center; }
.sel-cell input { width:16px; height:16px; accent-color:var(--accent); cursor:pointer; }
.barra-seleccion { position:fixed; left:50%; transform:translateX(-50%); bottom:22px; z-index:150; display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--bg2); border:1px solid var(--border2); border-radius:12px; box-shadow:var(--shadow); font-family:var(--mono); font-size:12px; color:var(--text-head); }
@media (max-width:640px) { .barra-seleccion { bottom:calc(72px + env(safe-area-inset-bottom)); width:calc(100% - 24px); justify-content:space-between; } }

/* Celular: "Eliminar carpeta completa" queda solo con el ícono (el texto no cabía y se partía en 3 líneas) */
@media (max-width:640px) {
  #btn-eliminar-carpeta { width:32px !important; padding:0 !important; justify-content:center; }
  #btn-eliminar-carpeta .txt-carpeta { display:none; }
}

/* Celular: con el botón flotante, la página termina más abajo para poder ver (y tocar) lo último de la lista */
@media (max-width:640px) {
  body.con-fab.con-nav-inferior { padding-bottom:calc(150px + env(safe-area-inset-bottom)); }
}

/* ── Botones del final de la fila: fijos a la derecha, por encima de lo que se desplaza (escritorio) ── */
@media (min-width:641px) {
  .col-acciones { position:sticky; right:0; z-index:2; background-color:var(--bg2); box-shadow:-10px 0 14px -10px rgba(0,0,0,.55), -1px 0 0 var(--border); }
  thead .col-acciones { z-index:5; background-color:var(--bg3); }
  tfoot .col-acciones { background-color:var(--bg2); }
  tbody tr:nth-child(even) .col-acciones { background-image:linear-gradient(rgba(255,255,255,.025), rgba(255,255,255,.025)); }
  tbody tr:hover .col-acciones { background-image:linear-gradient(rgba(242,169,59,.07), rgba(242,169,59,.07)); }
}
:root[data-theme="claro"] .col-acciones { box-shadow:-10px 0 14px -10px rgba(20,22,40,.2), -1px 0 0 var(--border); }
:root[data-theme="claro"] tbody tr:nth-child(even) .col-acciones { background-image:linear-gradient(rgba(20,30,60,.03), rgba(20,30,60,.03)); }