/* =====================================================================
   ESTRUCTURA (rediseño 2.0): la organización de Rindegastos con marca Cosapi.
   Barra superior a todo el ancho (logo · buscador · crear gasto · cuenta), menú lateral por rol debajo,
   franja de ruta, pestañas por estado y listas en tabla. Va después de fintech.css: solo ordena el espacio;
   colores, letra y componentes los manda fintech.css.
   ===================================================================== */
:root{--top-h:60px;--side-w:240px;--side-w-min:72px}

/* ---------- Barra superior ---------- */
html .topbar{position:fixed;inset:0 0 auto 0;height:var(--top-h);z-index:50;display:grid;grid-template-columns:auto var(--side-w) minmax(0,1fr) auto;
 align-items:center;gap:0 16px;padding:0 20px 0 0;background:var(--f-surface);border-bottom:1px solid var(--f-hairline)}
html .topbar #mobile{display:none}
html .topbar .logo{grid-column:2;display:flex!important;align-items:center;gap:10px;padding:0 0 0 20px!important;margin:0!important;border:0!important;background:none!important;text-decoration:none;height:var(--top-h)}
html .topbar .logo img{height:30px!important;width:auto!important;max-width:160px!important;margin:0!important}
html .topbar .logo strong{display:inline!important;margin:0!important;font:600 17px/1 var(--f-font)!important;color:var(--f-ink)!important;letter-spacing:-.01em}
html .topbar .top-search{grid-column:3;justify-self:start;width:min(100%,560px);display:flex!important;align-items:center;gap:10px;min-height:40px!important;padding:0 16px!important;
 border-radius:9999px!important;background:var(--f-canvas)!important;border:1px solid var(--f-hairline)!important;color:var(--f-muted)!important;font:400 14px/1 var(--f-font)!important;text-align:left;justify-content:flex-start}
html .topbar .top-search:hover{border-color:var(--f-hairline-2)!important;background:var(--f-surface)!important}
html .topbar .top-search svg{width:18px;height:18px;flex:none}
html .topbar .profile{grid-column:4;display:flex!important;align-items:center;gap:6px;margin:0!important}
html .topbar #user-name{color:var(--f-muted)!important;font:400 13px/1.2 var(--f-font)!important;padding:0 6px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html .topbar .top-create{min-height:38px!important;padding:8px 16px!important;margin-right:6px}

/* ---------- Menú lateral debajo de la barra ---------- */
html .sidebar{top:var(--top-h)!important;height:calc(100dvh - var(--top-h))!important;width:var(--side-w)!important;padding:14px 12px 16px!important;inset:var(--top-h) auto 0 0!important;position:fixed!important}
html .sidebar .collapse{top:8px!important}
html .nav-help{display:flex;align-items:center;gap:10px;min-height:38px;padding:8px 10px;margin:0 0 10px;border-radius:8px;color:var(--f-ink-2)!important;
 font:500 14px/1.2 var(--f-font);text-decoration:none!important;border-bottom:1px solid var(--f-hairline);border-radius:8px 8px 0 0;padding-bottom:12px}
html .nav-help:hover{background:#f3f5f8}
html .nav-help.active,html .nav-help[aria-current]{color:var(--f-primary-press)!important;background:var(--f-tint)}
html .nav-help b{font-weight:500}
html .nav-help .nav-chip{display:grid;place-items:center;width:22px;height:22px;background:none!important;box-shadow:none!important;color:currentColor!important}
html .nav-help svg{width:18px;height:18px}
html .sidebar .nav-head{padding:12px 10px 6px!important;font:600 11px/1 var(--f-font)!important;letter-spacing:.08em!important}
html .sidebar nav a{gap:10px!important;padding:8px 10px!important}
html .sidebar nav a b{font-weight:inherit}
html .shell{margin-left:var(--side-w)!important;padding-top:var(--top-h)}
html .nav-collapsed .sidebar{width:var(--side-w-min)!important;padding:14px 8px!important}
html .nav-collapsed .shell{margin-left:var(--side-w-min)!important}
html .nav-collapsed .nav-help b{display:none}
html .nav-collapsed .nav-help{justify-content:center}

/* ---------- Franja de ruta (Inicio › Módulo) ---------- */
html .shell>header.subbar{position:sticky!important;top:var(--top-h)!important;height:44px!important;min-height:44px!important;padding:0 32px!important;z-index:20;
 background:var(--f-surface)!important;border-bottom:1px solid var(--f-hairline)!important;display:flex;align-items:center;backdrop-filter:none!important}
html .subbar #breadcrumbs{display:flex!important;align-items:center;gap:8px;font:500 13px/1 var(--f-font)!important;color:var(--f-muted)!important}
html .subbar #breadcrumbs a{color:var(--f-muted)!important;text-decoration:none}
html .subbar #breadcrumbs a:hover{color:var(--f-primary)!important;text-decoration:underline}
html .subbar #breadcrumbs [aria-current]{color:var(--f-ink);font-weight:600}
html .subbar .bc-sep{color:#9aa6b6}
html main#content{padding:24px 32px 48px!important;max-width:1440px}

/* ---------- Encabezado de módulo, compacto ---------- */
html .page-top{margin-bottom:16px!important;align-items:center!important}
html .page-top h1,html #content>h1{font-size:24px!important;margin:0 0 2px!important}
html .page-top p{font-size:14px!important;margin:0!important}
html .page-top .pt-ic[data-ic]{width:44px!important;height:44px!important;border-radius:12px!important;color:var(--f-primary)!important}
html .page-top .pt-ic .lu{width:22px;height:22px}

/* ---------- Pestañas por estado ---------- */
html .status-tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--f-hairline);margin:0 0 16px}
html .status-tabs::-webkit-scrollbar{display:none}
html .status-tabs [role=tab]{flex:none;background:none!important;border:0!important;border-radius:0!important;min-height:40px;padding:10px 14px!important;
 font:500 14px/1 var(--f-font)!important;color:var(--f-muted)!important;box-shadow:inset 0 -2px 0 transparent!important}
html .status-tabs [role=tab]:hover{color:var(--f-ink)!important;background:none!important}
html .status-tabs [role=tab][aria-selected=true]{color:var(--f-primary-press)!important;font-weight:600!important;box-shadow:inset 0 -2px 0 var(--f-primary)!important}
html .status-tabs .tab-n{display:inline-block;min-width:20px;margin-left:6px;padding:2px 7px;border-radius:9999px;background:#eef1f5;color:var(--f-ink-2);font:600 12px/1.2 var(--f-font);text-align:center}
html .status-tabs [aria-selected=true] .tab-n{background:var(--f-tint);color:var(--f-primary-press)}

/* ---------- Barra de filtros y tabla, en tarjetas como Rindegastos ---------- */
html .toolbar{background:var(--f-surface);border:1px solid var(--f-hairline);border-radius:14px;padding:14px 16px;margin:0 0 16px!important;box-shadow:var(--f-shadow)}
html .table-wrap td:first-child strong,html .table-wrap td:first-child{font-weight:600}
html .table-wrap th:nth-last-child(2),html .table-wrap td:nth-last-child(2){text-align:right}

/* ---------- Íconos Lucide ---------- */
html .lu{display:block;flex:none}
html .sidebar nav a .lu,html .nav-help .lu{width:18px;height:18px}
html .rp-bubble[data-ic]{color:var(--f-primary)!important}
html .rp-bubble .lu{width:26px;height:26px}
html .tabbar .tab .lu{width:22px!important;height:22px!important;margin:0 auto}
html .tabbar .tab>.ic-fill{display:none!important}
html .tabbar .tab>.nav-ic:not(.ic-fill),html .tabbar .tab.active>.nav-ic:not(.ic-fill){display:block!important}
html .tabbar .tab-cam>.ic-fill{display:block!important}

/* ---------- Celular ---------- */
@media(max-width:760px){
 :root{--top-h:56px}
 html .topbar{grid-template-columns:auto minmax(0,1fr) auto auto;padding:0 8px;gap:0 4px}
 html .topbar #mobile{display:grid!important;place-items:center;grid-column:1;width:44px;height:44px;min-height:44px!important;padding:0!important;background:none!important;font-size:20px!important;color:var(--f-ink)!important}
 html .topbar .logo{grid-column:2;padding:0!important}
 html .topbar .logo img{height:26px!important}
 html .topbar .top-search{grid-column:3;width:44px;height:44px;padding:0!important;justify-content:center;border-radius:50%!important;background:none!important;border:0!important}
 html .topbar .top-search span,html .topbar .top-create,html .topbar #user-name,html .topbar #install{display:none!important}
 html .topbar .profile{grid-column:4;gap:0}
 html .topbar .profile button{padding:8px 8px!important;min-height:44px}
 html .sidebar{width:min(300px,86vw)!important;transform:translateX(-105%);transition:transform .2s}
 html .menu-open .sidebar{transform:none}
 html .shell{margin-left:0!important}
 html .shell>header.subbar{padding:0 16px!important;height:40px!important;min-height:40px!important}
 html main#content{padding:16px 16px 110px!important}
 html .page-top h1,html #content>h1{font-size:22px!important}
 html .toolbar{padding:12px}
}

/* ---------- Ajustes tras la revisión de capturas ---------- */
html .topbar .profile .top-create{background:var(--f-primary)!important;color:#fff!important;border-color:var(--f-primary)!important;font:500 14px/1 var(--f-font)!important}
html .topbar .profile .top-create:hover{background:var(--f-primary-hover)!important}
html #content .status-tabs{background:none!important;border:0!important;border-bottom:1px solid var(--f-hairline)!important;border-radius:0!important;box-shadow:none!important;padding:0!important}
/* Las pestañas reemplazan al selector de Estado (sigue en el código para los estados menos comunes). */
html .toolbar label:has(select[name=filterStatus]){display:none!important}
html .tabbar .tab>.ic-fill,html .tabbar .tab.active>.ic-fill{display:none!important}
html .tabbar .tab-cam>.ic-fill{display:block!important}
html .tabbar .tab-cam>.nav-ic:not(.ic-fill){display:none!important}
/* Un solo índigo sólido por vista: el «Crear gasto» de la barra superior va en tinte. */
html .topbar .profile .top-create{background:var(--f-tint)!important;color:var(--f-primary-press)!important;border-color:transparent!important}
html .topbar .profile .top-create:hover{background:var(--f-tint-2)!important}
/* Acciones secundarias del encabezado: tinte, no contorno. */
html #content .actions>button:not(.primary):not(.danger),html #content .actions>.button:not(.primary){background:var(--f-tint)!important;color:var(--f-ink)!important;border-color:transparent!important}
/* Total alineado a la derecha: en informes la penúltima columna no es un importe. */
html #report-list .table-wrap th:nth-last-child(2),html #report-list .table-wrap td:nth-last-child(2){text-align:left}
/* Números tabulares solo en importes y cifras: en fechas, RUC y series se veían espaciados como máquina de escribir. */
html table,html td,html th{font-variant-numeric:normal!important}
html td strong,html .cards strong,html .total{font-variant-numeric:tabular-nums!important}
/* Accesibilidad (axe): los enlaces dentro de un párrafo se distinguen por subrayado, no solo por color. */
html #content p a,html #content li a,html #content .panel>a,html .notice a{text-decoration:underline!important;text-underline-offset:2px}
html #cosapin-say{color:var(--f-ink)!important}

/* ---------- Menú «Opciones» del encabezado ---------- */
html .more-menu{position:relative}
html .more-menu>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:10px 16px;border-radius:9999px;background:var(--f-tint);color:var(--f-ink);font:500 14px/1 var(--f-font)}
html .more-menu>summary::-webkit-details-marker{display:none}
html .more-menu>summary::after{content:'';width:7px;height:7px;border:solid currentColor;border-width:0 1.8px 1.8px 0;transform:rotate(45deg) translateY(-2px)}
html .more-menu>summary:hover{background:var(--f-tint-2)}
html .more-menu>summary:focus-visible{outline:2px solid var(--f-primary);outline-offset:2px}
html .more-menu .more-list{position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:260px;display:flex;flex-direction:column;padding:6px;background:var(--f-surface);border:1px solid var(--f-hairline);border-radius:12px;box-shadow:var(--f-raised)}
html .more-menu .more-list>button{justify-content:flex-start!important;text-align:left;width:100%;background:none!important;border-radius:8px!important;min-height:38px;white-space:normal!important;flex:none!important}
html .more-menu .more-list>button:hover{background:#f3f5f8!important}
html .more-menu .more-list>button.danger{color:var(--f-bad)!important}
@media(max-width:760px){html .more-menu .more-list{left:0;right:auto;min-width:min(300px,calc(100vw - 32px))}}

/* ---------- Cosapín sin tapar contenido ---------- */
/* Más pequeño en computadora, y el contenido deja espacio al final para poder leer lo que queda detrás de él. */
@media(min-width:761px){
 html #cosapin{right:16px!important;bottom:12px!important}
 html #cosapin .czp,html #cosapin .czp-l{width:72px!important;height:104px!important}
 html #cosapin .cz3d-img{max-height:104px!important;width:auto!important}
 html main#content{padding-bottom:140px!important}
 html #cosapin-say{right:24px!important;bottom:126px!important;max-width:280px!important;font-size:14px!important}
}
@media(max-width:760px){html #cosapin-say{max-width:calc(100vw - 96px)!important}}
html .more-menu:not([open]) .more-list{display:none!important}
@media(max-width:760px){html .more-menu .more-list{left:auto!important;right:0!important;min-width:0!important;width:min(300px,calc(100vw - 32px))}}

/* ---------- Logo: Cosapín con el celular (propuesta elegida, Gemini/Nano Banana) + nombre en texto ---------- */
html .topbar .logo img{height:40px!important;width:40px!important;max-width:none!important;object-fit:contain}
html .topbar .logo .logo-word{font:400 17px/1 var(--f-font);color:#0A2C55;letter-spacing:-.01em;white-space:nowrap}
html .topbar .logo .logo-word b{font-weight:700}
@media(max-width:760px){html .topbar .logo img{height:36px!important;width:36px!important}html .topbar .logo .logo-word{font-size:16px}}

/* ---------- Auditoría Impeccable (19/10/2026) ---------- */
/* Partículas de temporada de Cosapín: caen tres veces y se detienen (antes eran infinitas y distraían). */
html .cz-fx i{animation-iteration-count:3!important}
/* Avisos a una medida de lectura cómoda (< 80 caracteres). */
html #content>.notice,html #content .notice{max-width:60ch}
html #content .panel>p{max-width:56ch}

/* ---------- Ventana de firma del aprobador ---------- */
html .firma-form{display:grid;gap:14px}
html .firma-resumen{background:var(--f-tint);border-radius:12px;padding:14px 16px}
html .firma-resumen h3{margin:0 0 8px;font-size:15px!important}
html .firma-resumen .fr-texto{font-size:14px;line-height:1.55;color:var(--f-ink)}
html .firma-resumen small{display:block;margin-top:8px}
html .firma-pad-wrap{border:0;margin:0;padding:0}
html .firma-pad-wrap legend{font:500 13px/1.2 var(--f-font);color:var(--f-ink-2);margin-bottom:6px}
html .firma-pad{display:block;width:100%;height:170px;border:1.5px dashed var(--f-hairline-2);border-radius:12px;background:#fff linear-gradient(transparent 128px,var(--f-hairline) 128px,var(--f-hairline) 129px,transparent 129px);touch-action:none;cursor:crosshair}
html .firma-pad-acc{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:6px}
html .firma-pad-acc button{min-height:36px!important;padding:6px 14px!important}