/* Cosapi Contabilidad · módulos (13/11/2026). Patrones de dos sistemas de diseño abiertos (licencia MIT):
   - Tabler (github.com/tabler/tabler): encabezado de página con rótulo, título y descripción; pasos en fila.
   - shadcn/ui (github.com/shadcn-ui/ui): tarjetas con cabecera, tablas limpias, insignias y pestañas segmentadas.
   Sobre la paleta de Cosapi Gastos (color.css). Solo estilos: la lógica de cada módulo no cambia. */

/* ================= Encabezado de módulo (Tabler page-header) ================= */
.page-top{align-items:center;gap:16px;margin:0 0 24px;padding:0 0 20px;border-bottom:1px solid var(--f-hairline)}
.pt-head{display:grid;gap:4px;min-width:0}
.pt-pre{margin:0;font:600 11.5px/1 var(--f-font);letter-spacing:.07em;text-transform:uppercase;color:var(--f-muted)}
.pt-sub{margin:2px 0 0;font-size:14.5px;color:var(--f-muted);max-width:70ch}
.page-top h1{font-size:28px}
.pt-ic{width:48px;height:48px;border-radius:12px}
.pt-ic .lu{width:24px;height:24px}
.page-top .pt-acciones{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
/* el texto de introducción que algunos módulos tienen bajo el título */
.page-top+p.leido,.page-top+p.reem-intro{margin:-8px 0 18px;max-width:80ch}
#v-inicio .page-top{border-bottom:0;padding-bottom:26px}

/* ================= Ayuda del módulo: guía y flujograma, plegados y lado a lado ================= */
.ayuda-fila{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin:0 0 16px}
.ayuda-fila>details{margin:0}
.ayuda-fila>details[open]{grid-column:1/-1}
details.panel>summary{list-style:none;display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
details.panel>summary::-webkit-details-marker{display:none}
details.panel>summary::before{content:"";flex:none;width:8px;height:8px;border-right:2px solid var(--f-muted);border-bottom:2px solid var(--f-muted);transform:rotate(-45deg);transition:transform .15s ease;margin-right:2px}
details.panel[open]>summary::before{transform:rotate(45deg)}
details.panel>summary .resumen-n{margin-left:auto;font:500 12px/1 var(--f-font);color:var(--f-muted);background:var(--x-panel-2);border-radius:9999px;padding:4px 10px}
details.panel:not([open]){padding-top:14px;padding-bottom:14px}
details.panel[open]>summary{margin-bottom:16px}

/* Pasos en fila (Tabler steps): número, línea que los une y texto */
.guia .pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0;counter-reset:paso}
.guia .pasos li{position:relative;display:block;padding:44px 16px 4px 0;font-size:14px;line-height:1.5;color:var(--f-ink-2)}
.guia .pasos li::before{position:absolute;top:0;left:0;width:30px;height:30px;border-radius:50%;background:var(--f-surface);color:var(--f-primary);box-shadow:inset 0 0 0 2px var(--f-primary);font:600 13px/30px var(--f-font);text-align:center;display:block;z-index:1}
.guia .pasos li::after{content:"";position:absolute;top:15px;left:36px;right:6px;height:2px;background:var(--f-tint-2);border-radius:2px}
.guia .pasos li:last-child::after{display:none}
.guia .pasos li b{display:block;color:var(--f-ink);margin-bottom:2px}
.guia .nota{margin:14px 0 0;padding-top:12px;border-top:1px dashed var(--f-hairline)}
@media (max-width:760px){
  .guia .pasos{grid-template-columns:1fr}
  .guia .pasos li{padding:2px 0 16px 44px}
  .guia .pasos li::after{top:34px;bottom:4px;left:14px;right:auto;width:2px;height:auto}
}
.flujo{overflow:auto;padding:8px;border-radius:10px;background:var(--x-panel-2);border:1px solid var(--f-hairline)}

/* ================= Tarjetas de panel (shadcn card) ================= */
.vista>.panel,.vista>section.panel{padding:22px 24px;margin-top:16px}
.panel>h2,.panel>.fila.entre>h2,.panel>.fila.entre>div>h2{margin:0}
.panel>.fila.entre:first-child,.panel>h2:first-child{padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--f-hairline)}
.panel>.fila.entre:first-child h2+.leido,.panel>.fila.entre:first-child h2+p{margin:4px 0 0}
.panel>h2+p.leido{margin:-8px 0 14px}
.fila{gap:8px}

/* Estado del módulo (barra de estado bajo el título) */
.mat-estado,[role=status].mat-estado{background:var(--f-surface);border:1px solid var(--f-hairline);border-radius:12px;padding:10px 14px;font-size:13.5px;color:var(--f-ink-2);box-shadow:var(--f-shadow)}

/* ================= Tablas (shadcn table) ================= */
.tabla{border:1px solid var(--f-hairline);border-radius:12px;overflow:auto;max-height:70vh;background:var(--f-surface)}
th{position:sticky;top:0;z-index:2;font:500 12.5px/1.2 var(--f-font);letter-spacing:0;text-transform:none;color:var(--f-muted);background:var(--x-panel-2);height:40px;padding:0 14px;border-bottom:1px solid var(--f-hairline);white-space:nowrap}
td{padding:10px 14px;border-top:0;border-bottom:1px solid var(--f-hairline);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background-color .12s ease}
tbody tr:hover{background:var(--x-hover)}
#filas tr{cursor:pointer}
td.num,th.num{text-align:right}

/* ================= Insignias de estado (shadcn badge) ================= */
.est{display:inline-flex;align-items:center;gap:6px;font:500 12px/1 var(--f-font);padding:5px 10px 5px 8px;border-radius:9999px;border:1px solid transparent;white-space:nowrap}
.est::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85}
.e-ok{background:var(--f-ok-bg);color:var(--f-ok);border-color:#cfe9db}
.e-obs{background:var(--f-warn-bg);color:var(--f-warn);border-color:#f3dcae}
.e-reg{background:var(--f-bad-bg);color:var(--f-bad);border-color:#f3c7ca}
.e-pend{background:var(--f-tint);color:var(--f-primary-press);border-color:var(--f-tint-2)}

/* ================= Pestañas (shadcn tabs, segmentadas) ================= */
.mat-tabs{display:inline-flex;gap:2px;padding:3px;border:0;border-radius:10px;background:var(--x-panel-2);margin:0 0 14px;max-width:100%}
.mat-tabs [role=tab]{min-height:32px;padding:6px 14px;margin:0;border:0;border-radius:8px;background:transparent;color:var(--f-ink-2);font:500 13.5px/1 var(--f-font)}
.mat-tabs [role=tab]:hover{background:var(--x-hover);color:var(--f-ink)}
.mat-tabs [role=tab][aria-selected=true]{background:var(--f-surface);color:var(--f-ink);box-shadow:0 1px 2px rgba(13,37,61,.08),0 0 0 1px rgba(13,37,61,.04)}
.reem-atajos button{min-height:32px;font-size:13.5px}
.reem-atajos button[aria-pressed=true]{background:var(--f-surface);box-shadow:inset 0 0 0 1px var(--f-hairline-2),var(--f-shadow);color:var(--f-ink);font-weight:600}

/* ================= Formularios en línea (filtros) ================= */
.fila>label,label.clave{display:inline-grid;gap:4px}
.campos{gap:12px 16px}
.campos label{gap:5px;font-size:12.5px;font-weight:500;color:var(--f-ink-2)}

/* ================= Revisión de Desistimientos (ventana de detalle) ================= */
dialog#detalle{width:min(1320px,97vw);background:var(--f-canvas)}
dialog#detalle form{padding:20px 22px 0}
.det-grid{gap:20px}
.visor{background:var(--f-surface);border:1px solid var(--f-hairline);border-radius:14px;box-shadow:var(--f-shadow);padding:12px}
.visor canvas{border-radius:8px;box-shadow:0 0 0 1px var(--f-hairline)}
.visor-barra{padding:0 0 10px;margin:0 0 10px;border-bottom:1px solid var(--f-hairline)}
.visor-barra button{min-width:34px;min-height:32px;padding:4px 10px}
.det-grid>section:last-child{background:var(--f-surface);border:1px solid var(--f-hairline);border-radius:14px;box-shadow:var(--f-shadow);padding:18px 20px}
.det-grid>section:last-child>h3{position:sticky;top:-20px;z-index:3;margin:-18px -20px 10px;padding:16px 20px 10px;background:var(--x-vidrio);backdrop-filter:blur(8px);border-bottom:1px solid var(--f-hairline);border-radius:14px 14px 0 0;font-size:16px;overflow-wrap:anywhere}
.det-grid>section:last-child>h4{margin:22px 0 10px;padding-top:16px;border-top:1px solid var(--f-hairline);font:600 12px/1.2 var(--f-font);letter-spacing:.06em;text-transform:uppercase;color:var(--f-muted)}
.det-grid .seguimiento{background:var(--x-panel-2);border:1px solid var(--f-hairline);border-radius:12px;padding:14px 16px}
.det-grid .seguimiento.asiento{background:var(--f-surface);border-color:var(--f-tint-2);box-shadow:inset 3px 0 0 var(--f-primary)}
.obs{margin:10px 0;padding:0;list-style:none;display:grid;gap:6px}
.obs li{display:flex;gap:10px;align-items:flex-start;padding:9px 12px;border-radius:10px;background:var(--f-warn-bg);border:1px solid #f3dcae;font-size:13.5px;color:#5c3a00}
.historial{font-size:13px;color:var(--f-ink-2)}
dialog#detalle form>.fila:last-child{position:sticky;bottom:0;margin:16px -22px 0;padding:12px 22px;background:var(--x-vidrio);backdrop-filter:blur(8px);border-top:1px solid var(--f-hairline)}

/* ================= Inicio ================= */
.modulos{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.modulo{padding:18px 20px 16px}
.modulo::after{content:"";position:absolute;top:22px;right:20px;width:7px;height:7px;border-top:2px solid var(--f-hairline-2);border-right:2px solid var(--f-hairline-2);transform:rotate(45deg);transition:transform .15s ease,border-color .15s ease}
.modulo:hover::after{border-color:var(--f-primary);transform:translateX(3px) rotate(45deg)}
#v-inicio>.panel>h2{font-size:16px}

/* ================= Descargas y listas ================= */
.des-item,.reem-tarjeta{border-radius:14px}

/* ================= Pie de página de cada módulo: aire al final ================= */
.vista{padding-bottom:40px}

/* Reembolsos: su encabezado traía los botones en la misma fila */
.page-top.fila.entre{justify-content:flex-start;flex-wrap:wrap}
.page-top .pt-head{flex:1 1 320px}
.page-top>.pt-acciones{flex:0 1 auto}
#v-reembolsos .page-top+p.reem-intro{display:none}
.reem-flujo{background:var(--f-surface);border:1px solid var(--f-hairline);border-radius:14px;box-shadow:var(--f-shadow);padding:16px 20px}

/* Cifras largas (montos): no se parten dentro del número */
.tarjetas{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.tarjeta strong{overflow-wrap:normal;word-break:normal;font-size:clamp(20px,1.9vw,26px)}