/* portal.css — generado por build_portal_assets.py (CSS del index.html). */

:root{
  --primary:#544D37; --secondary:#A2B6A0; --accent:#F2BA8C;
  --dark:#3A3528;    --mid:#8B8273;       --light:#E8E2D8;
  --neutral-1:#D6CFC2; --neutral-2:#8B8273;
  --warm-1:#F2BA8C;  --warm-2:#E89B5F;
  --cool-1:#BAD3D3;  --cool-2:#CABCD8;  --cool-3:#AB95C1;
  --ok:#7BAE7E; --warn:#E8C078; --err:#B57165;
  --bg:#F4F1ED; --bg-alt:#ECE5DA;
  --white:#FFFFFF; --soft:#FAF9F8; --teal:#80AFAE;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--white);color:#000;font-family:"DM Sans",-apple-system,"Segoe UI",Roboto,sans-serif;font-size:14px;min-height:100vh}
body{display:flex;flex-direction:column}
a{color:var(--primary)}
.container{max-width:100%;margin:0;padding:0 32px}
.hidden{display:none!important}

/* Header */
header{background:var(--bg);color:var(--primary);padding:20px 0 0}
header .container{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:0 24px;align-items:start}
.hdr-left{grid-column:1;grid-row:1 / span 2}
.hdr-left h1{margin:0 0 2px;font-size:26px;font-weight:700;letter-spacing:-.2px;color:var(--primary)}
.hdr-left h1#header-title{cursor:pointer}
.hdr-left h2{margin:0 0 10px;font-size:17px;font-weight:500;color:var(--mid)}
.hdr-right{grid-column:2;grid-row:1;justify-self:end;display:flex;flex-direction:column;align-items:center;gap:8px}
.hdr-right img{height:60px;display:block}
/* En los modulos el logo es mas pequeño; en la Portada conserva su tamaño. */
header:not(.portada-active) .hdr-right img{height:40px}
/* Botones bajo el logo. Antes se ocultaban enteros en la Portada, porque alli
   vivian Informacion y Cerrar sesion en su propia fila. Ahora el menu esta
   SIEMPRE aqui —el mismo sitio en las dos pantallas— y lo unico que sobra en la
   Portada es la casita: ya estas en casa. */
.hdr-nav{display:flex;gap:8px;justify-content:center;position:relative}
header.portada-active #btn-home{display:none}
/* En la Portada el boton se estira hasta medir lo mismo que el logo, y su
   texto va centrado. `align-self:stretch` es el primer paso: sin el, la fila se
   encoge al tamaño del boton y no hay ancho que igualar. */
header.portada-active .hdr-nav{align-self:stretch}
.hdr-nav button{background:transparent;border:1px solid var(--neutral-1);color:var(--primary);border-radius:6px;padding:5px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:0}
.hdr-nav button:hover{background:rgba(84,77,55,.08)}
.hdr-nav button svg{width:18px;height:18px;stroke:currentColor;fill:none}
.tab-row{grid-column:1 / -1;grid-row:3;display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:6px}
.tab-bar{display:flex;gap:2px;flex-wrap:wrap}
.tab-bar button{background:transparent;border:0;color:var(--mid);padding:8px 16px 12px;font:inherit;font-weight:500;cursor:pointer;border-bottom:3px solid transparent;transition:all .15s}
.tab-bar button:hover{color:var(--primary)}
.tab-bar button.active{color:var(--primary);border-bottom-color:var(--warm-1)}

/* Pildora sobria. Nacio para los botones de la Portada, que se fueron al menu;
   la usan ahora los botones de las ventanas de Configuracion y contraseña. */
.btn-info{background:transparent;border:1px solid var(--neutral-1);color:var(--primary);padding:4px 10px;border-radius:5px;cursor:pointer;font:inherit;font-size:12px;line-height:1.3;white-space:nowrap}
.btn-info:hover{background:rgba(84,77,55,.08)}

/* ---- Menu de opciones (un solo disparador, dos caras) ----
   En los modulos es el simbolo de tres puntos, igual que la casita de al lado.
   En la Portada se lee la palabra, con la pildora de los botones que habia
   ahi. Es el MISMO boton: el CSS enseña el simbolo o la palabra segun la clase
   `portada-active`, y asi hay un solo id y un solo listener. */
#btn-menu .hm-txt{display:none}
header.portada-active #btn-menu{flex:1 1 auto;padding:4px 10px;border-radius:5px;font-size:12px;line-height:1.3;white-space:nowrap}
header.portada-active #btn-menu svg{display:none}
header.portada-active #btn-menu .hm-txt{display:inline}

/* El panel cuelga de .hdr-nav (que es position:relative), no del <body>: asi
   se va con la cabecera sin un solo listener de scroll.
   Z-INDEX 90, POR DEBAJO DE .overlay (100), Y ESO NO ES DECORACION: con una
   ventana abierta el fondo oscuro tapa la cabecera y el menu no se puede
   clicar. Es lo que impide abrirlo encima del formulario de captura y, al
   cerrar con Escape, llevarse por delante lo que alguien estaba tecleando. */
.hdr-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:90;min-width:250px;background:var(--white);border:1px solid var(--neutral-1);border-radius:5px;padding:6px 4px;box-shadow:0 6px 20px rgba(0,0,0,.18);font-size:13px;color:var(--primary);text-align:left}
.hdr-menu .hm-quien{padding:6px 10px 8px;border-bottom:1px solid var(--neutral-1);margin-bottom:4px}
.hdr-menu .hm-quien b{display:block;font-size:13px;font-weight:700}
.hdr-menu .hm-quien span{display:block;font-size:11px;color:var(--mid);word-break:break-all}
.hdr-menu button{display:block;width:100%;text-align:left;background:transparent;border:0;font:inherit;font-size:13px;color:var(--primary);padding:6px 10px;border-radius:4px;cursor:pointer}
.hdr-menu button:hover:not(:disabled){background:var(--bg-alt)}
.hdr-menu button:disabled{color:var(--mid);opacity:.55;cursor:default}
.hdr-menu .hm-pista{display:block;font-size:11px;color:var(--mid);font-weight:400}
.hdr-menu hr{border:0;border-top:1px solid var(--neutral-1);margin:4px 0}

/* Main */
main.container{flex:1;margin:0;padding-top:15px;padding-bottom:64px;background:var(--white)}
main.container.portada-active{background:var(--bg)}
.view h3{margin:0 0 14px;font-size:16px;color:var(--primary);font-weight:700}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:14px;padding:12px;background:var(--soft);border-radius:8px}
.toolbar label{display:flex;flex-direction:column;font-size:11px;color:var(--mid);gap:3px;font-weight:500;align-items:flex-start;text-align:left}
.toolbar input, .toolbar select{font:inherit;padding:5px 8px;border:1px solid var(--neutral-1);border-radius:5px;min-width:110px;background:var(--white)}
.toolbar .group{display:flex;gap:6px;align-items:flex-end;flex-wrap:wrap}
.toolbar .btn{background:var(--primary);color:#fff;border:0;padding:7px 14px;border-radius:6px;cursor:pointer;font:inherit;font-weight:500}
.toolbar .btn:hover{background:var(--dark)}
.toolbar .btn[id$="-copy"]{background:var(--warm-1)}
.toolbar .btn[id$="-copy"]:hover{background:var(--warm-2)}
/* Gemelas de las de arriba para las descargas. El boton que se lleva los datos
   tiene el mismo color en todos los modulos, se copien al portapapeles o se
   bajen en un .xlsx. OJO: .btn.sec se declara DESPUES, asi que un boton de
   descarga marcado como secundario conserva su contorno y no se pinta. */
.toolbar .btn[id$="-xlsx"]{background:var(--warm-1)}
.toolbar .btn[id$="-xlsx"]:hover{background:var(--warm-2)}
.toolbar .btn.sec{background:transparent;border:1px solid var(--primary);color:var(--primary)}
.toolbar .btn.sec:hover{background:rgba(84,77,55,.08)}
.toolbar details.multi{font-size:inherit}
.chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;background:var(--white);border:1px solid var(--neutral-1);border-radius:14px;font-size:12px;cursor:pointer;user-select:none}
.chip.on{background:var(--primary);color:#fff;border-color:var(--primary)}
.chip.on-accent{background:var(--accent);color:#fff;border-color:var(--accent)}

/* Multi-select dropdown (details+checkboxes) */
details.multi{position:relative;font-size:13px}
details.multi summary{list-style:none;cursor:pointer;padding:5px 28px 5px 10px;background:var(--white);border:1px solid var(--neutral-1);border-radius:5px;min-width:140px;max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;text-align:left;color:var(--primary);font-weight:400}
details.multi summary::-webkit-details-marker{display:none}
details.multi summary::after{content:"▾";position:absolute;right:8px;top:50%;transform:translateY(-50%);color:var(--mid);font-size:10px}
details.multi[open] summary{border-color:var(--primary);box-shadow:0 0 0 2px rgba(84,77,55,.15)}
details.multi .multi-body{position:absolute;z-index:10;top:calc(100% + 2px);left:0;min-width:220px;max-height:260px;overflow-y:auto;background:var(--white);border:1px solid var(--neutral-1);border-radius:5px;padding:6px 4px;box-shadow:0 6px 20px rgba(0,0,0,.12)}
details.multi .multi-body label{display:flex !important;flex-direction:row !important;align-items:center;gap:6px;padding:4px 8px;cursor:pointer;border-radius:4px;font-size:13px;color:var(--primary);font-weight:400}
details.multi .multi-body label:hover{background:var(--bg-alt)}
details.multi .multi-body input[type=checkbox]{margin:0;cursor:pointer}
details.multi .multi-body .head{display:flex;justify-content:space-between;align-items:center;padding:4px 8px;border-bottom:1px solid var(--neutral-1);margin-bottom:4px}
details.multi .multi-body .head a{font-size:11px;color:var(--primary);cursor:pointer;text-decoration:underline}

/* Tables */
.tbl-wrap{overflow-x:auto;border:1px solid var(--neutral-1);border-radius:8px;background:var(--white)}
/* registro: limitar alto del wrap para scroll vertical y que position:sticky del thead funcione */
#view-flujos_efectivo .tbl-wrap{max-height:60vh;overflow-y:auto}
table.t{width:100%;border-collapse:collapse;font-size:13px}
table.t thead th{background:var(--secondary);color:var(--white);text-align:left;padding:8px 10px;font-weight:500;white-space:nowrap;cursor:pointer;user-select:none;position:sticky;top:0;z-index:1}
table.t thead th.num{text-align:right}
table.t thead th.ctr{text-align:center}
table.t thead th .arr{color:var(--primary);margin-left:4px}
table.t tbody td{padding:6px 10px;border-top:1px solid var(--neutral-1)}
table.t tbody tr:nth-child(even){background:var(--soft)}
table.t tbody tr:hover{background:rgba(84,77,55,.06)}
table.t td.num{text-align:right;font-variant-numeric:tabular-nums}
table.t td.ctr{text-align:center}
table.t td.neg{color:var(--err)}
table.t tfoot td{padding:8px 10px;font-weight:700;background:var(--white);border-top:2px solid var(--primary)}
table.t tfoot td.num{text-align:right;font-variant-numeric:tabular-nums}
.badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:500}
.b-ok{background:#DDE7DC;color:#3F5640}
.b-warn{background:#FAEAD8;color:#7A5630}
.b-err{background:#F0D9D2;color:#7A3C30}
.b-info{background:#DCE7E7;color:var(--primary)}
.b-mid{background:var(--light);color:var(--mid)}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.dot-ok{background:var(--ok)} .dot-warn{background:var(--warn)} .dot-orange{background:var(--accent)} .dot-err{background:var(--err)} .dot-pag{background:var(--teal)} .dot-pend{background:var(--cool-1)}

.totals{display:flex;flex-wrap:wrap;gap:16px;margin:8px 0 14px}
.stat{background:var(--soft);border-radius:8px;padding:10px 14px;min-width:160px}
.stat .lbl{font-size:11px;color:var(--mid);text-transform:uppercase;letter-spacing:.4px;font-weight:500}
.stat .val{font-size:20px;font-weight:700;color:var(--primary);font-variant-numeric:tabular-nums}
.stat.accent .val{color:var(--accent)}
.stat-group{background:var(--soft);border-radius:8px;padding:10px 14px;min-width:220px;display:flex;flex-direction:column;gap:4px}
.stat-group .group-lbl{font-size:11px;color:var(--mid);text-transform:uppercase;letter-spacing:.4px;font-weight:500;margin-bottom:4px}
.stat-group .sub{display:flex;justify-content:space-between;align-items:baseline;gap:14px;font-size:13px;line-height:1.3}
.stat-group .sub .sub-lbl{color:var(--mid);font-weight:500}
.stat-group .sub .sub-val{font-variant-numeric:tabular-nums;font-weight:700;color:var(--primary)}
.stat-group .sub.pend .sub-val{color:var(--err)}

.bars{margin:12px 0}
.bar-row{display:flex;align-items:center;gap:10px;margin:3px 0;font-size:12px}
.bar-row .lbl{min-width:140px;color:var(--dark)}
.bar-row .bar{flex:1;height:14px;background:var(--soft);border-radius:3px;position:relative;overflow:hidden}
.bar-row .bar .fill{height:100%;background:var(--secondary);border-radius:3px}
.bar-row .bar .fill.neg{background:var(--warm-2)}
.bar.split{display:flex}
.bar.split .seg{height:100%}
.bar.split .seg.pag{background:var(--teal)}
.bar.split .seg.pend{background:var(--cool-1)}
.bar.split .seg:first-child{border-radius:3px 0 0 3px}
.bar.split .seg:last-child{border-radius:0 3px 3px 0}
.bar.split .seg:only-child{border-radius:3px}
.bar-row .val{min-width:100px;text-align:right;font-variant-numeric:tabular-nums;color:var(--dark)}

/* Footer */
footer{text-align:center;font-size:10px;color:var(--mid);padding:8px 0 10px;border-top:1px solid var(--neutral-1);background:var(--white)}

/* Info modal */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:100;padding:24px}
/* LA FICHA DE DETALLE VA POR ENCIMA DE CUALQUIER OTRO OVERLAY, y es la unica
   excepcion al 100 de arriba. Motivo: es la unica ventana que se abre DESDE
   otra ventana — Flujos Programados la abre desde su aviso de duplicado, para
   que se pueda mirar un movimiento sin perder la lista de candidatos. Con el
   mismo z-index gana el ultimo del documento, y ese es el del modulo que se
   monto despues, no el que el usuario acaba de abrir. */
#r-detail-overlay{z-index:110}
.info-card{background:var(--soft);border-radius:8px;max-width:760px;width:100%;max-height:86vh;overflow-y:auto;padding:26px 30px 28px;box-shadow:0 20px 60px rgba(0,0,0,.25);border-top:4px solid var(--warm-1);position:relative;text-align:left}
.info-card .close{position:absolute;top:10px;right:12px;background:transparent;border:0;font-size:22px;cursor:pointer;color:var(--mid);line-height:1}
.info-card .close:hover{color:var(--primary)}
.info-card .logo-wrap{text-align:center;margin:4px 0 18px}
.info-card .logo-wrap img{height:72px}
.info-card h2{margin:0 0 18px;text-align:center;color:var(--primary);font-size:22px;font-weight:700}
.info-card h3{margin:16px 0 6px;color:var(--primary);font-size:14px;font-weight:700;border-bottom:1px solid var(--neutral-1);padding-bottom:4px}
.info-card p{margin:0 0 8px;font-size:13px;color:var(--primary);line-height:1.55}
.info-card ul{margin:4px 0 10px;padding-left:20px;font-size:13px;line-height:1.55}
/* Configuracion: los bloques de la ventana y la pildora que dice a quien afecta
   cada uno. La pildora va pegada al titulo del bloque y no en un parrafo suelto
   arriba: un aviso que se lee una vez al abrir se olvida antes de llegar al
   control, y confundir "todo el equipo" con "solo yo" es el unico error caro
   que se puede cometer en esta pantalla.
   `h4` existe aqui porque un bloque puede tener varios ajustes dentro. */
.cfg-sec{padding-bottom:16px;border-bottom:1px solid var(--neutral-1);margin-bottom:16px}
.cfg-sec:last-child{border:0;margin-bottom:0;padding-bottom:0}
.info-card .cfg-sec h3{margin-top:0}
.info-card .cfg-sec h4{margin:14px 0 4px;color:var(--primary);font-size:12.5px;font-weight:700}
.cfg-alcance{float:right;font-size:9.5px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;padding:2px 8px;border-radius:9px;border:1px solid;
  position:relative;top:1px}
.cfg-alcance.equipo{color:var(--warn);border-color:var(--warn)}
.cfg-alcance.tuyo{color:var(--secondary);border-color:var(--secondary)}
.info-card ul li{margin-bottom:3px}

.note{font-size:11px;color:var(--mid);margin:6px 0}
.banner{background:#FAEAD8;border-left:3px solid var(--warn);padding:8px 12px;border-radius:4px;font-size:12px;color:#7A5630;margin:10px 0}
.small{font-size:11px;color:var(--mid)}
.tag-row{display:flex;gap:16px;flex-wrap:wrap;margin:6px 0 12px;font-size:12px}
.tag-row span b{color:var(--primary)}

.sort-asc::after{content:" ↑";color:var(--primary)}
.sort-desc::after{content:" ↓";color:var(--primary)}

@media (max-width:820px){
  .container{padding:0 16px}
  .hdr-left h1{font-size:20px}
  .hdr-left h2{font-size:15px}
  .hdr-right img{height:44px}
  .tab-row{flex-direction:column;align-items:flex-start;gap:4px}
}

/* Login overlay */
body.locked header, body.locked main, body.locked footer{display:none !important}
#login-overlay .info-card{max-width:420px;text-align:center}
#login-overlay h2{margin-bottom:28px}
#login-overlay input[type=password],#login-overlay input[type=text]{width:100%;padding:10px 12px;border:1px solid var(--neutral-1);border-radius:5px;font:inherit;font-size:14px;box-sizing:border-box}
#login-overlay #login-user{margin-bottom:8px}
#login-overlay .pwd-wrap{position:relative}
#login-overlay .pwd-wrap input{padding-right:40px}
#login-overlay .pwd-toggle{position:absolute;top:0;right:0;width:40px;height:100%;margin:0;padding:0;background:none;border:0;cursor:pointer;color:var(--neutral-1);display:flex;align-items:center;justify-content:center}
#login-overlay .pwd-toggle:hover{background:none;color:var(--primary)}
#login-overlay .pwd-toggle .icon-eye-off{display:none}
#login-overlay .pwd-toggle.showing .icon-eye{display:none}
#login-overlay .pwd-toggle.showing .icon-eye-off{display:block}
#login-overlay input[type=password]:focus,#login-overlay input[type=text]:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 2px rgba(84,77,55,.15)}
#login-overlay button{width:100%;background:var(--warm-2);color:#fff;border:0;padding:10px;border-radius:6px;cursor:pointer;font:inherit;font-weight:500;margin-top:10px}
#login-overlay button:hover{background:var(--warm-1)}
#login-overlay button:disabled{opacity:.6;cursor:wait}
#login-error{color:var(--err);font-size:12px;min-height:18px;margin-top:8px}

/* Portada (landing post-login) */
.tab-row.portada-active{justify-content:flex-end}
.portada-head{margin:8px 0 18px;text-align:center}
.portada-head h3{margin:0 0 4px;font-size:20px;color:var(--primary);font-weight:700}
.portada-head .note{margin:0}
.portada-filters{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;align-items:flex-end;margin:0 0 18px}
.portada-filters label{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--mid);font-weight:500;text-align:left}
.portada-filters input,.portada-filters select{font:inherit;padding:6px 10px;border:1px solid var(--neutral-1);border-radius:6px;background:var(--white);min-width:220px}
.portada-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,260px));gap:16px;justify-content:center}
/* Encabezados de las dos secciones de la Portada ("Favoritos" y "Todos los
   modulos"). Solo salen cuando hay algun favorito: sin ellos, la pantalla es la
   de siempre. Mismo aire que las etiquetas de los filtros ("Buscar modulo",
   "Categoria"): son rotulos de la misma pantalla y competian entre si en
   mayusculas. Margen igual arriba y abajo: la raya no aporta margen inferior,
   asi que con 18/10 el rotulo caia pegado a las tarjetas y se leia torcido. */
.pc-sec{margin:16px 0;font-size:12px;font-weight:500;color:var(--mid);text-align:center}
.pc-sep{border:0;border-top:1px solid var(--neutral-1);margin:22px auto 0;max-width:560px}
/* La estrella. Esquina superior IZQUIERDA porque la derecha la ocupa la
   pildora de categoria (.pc-tag, en _base/base.css). */
.pc-star{position:absolute;top:8px;left:8px;background:transparent;border:0;padding:2px;line-height:0;cursor:pointer;opacity:0;transition:opacity .15s,color .15s;color:var(--neutral-1)}
.pc-star svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.8;fill:none}
/* Se enseña al pasar el raton por la tarjeta. La de un favorito se ve SIEMPRE:
   ahi la estrella no es un mando, es la marca. */
.portada-card:hover .pc-star{opacity:1}
.pc-star.on{opacity:1;color:var(--warm-1)}
.pc-star.on svg{fill:currentColor}
.pc-star:hover{color:var(--warm-2)}
/* Sin raton no hay "pasar por encima": en una pantalla tactil la estrella no
   apareceria nunca y la funcion seria invisible. */
@media (hover: none){ .pc-star{opacity:1} }
.portada-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;background:var(--soft);border:1px solid var(--neutral-1);border-radius:10px;padding:20px;cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s}
.portada-card:hover{border-color:var(--warm-1);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.10)}
/* El icono. UN SOLO COLOR PARA LOS OCHO: antes cada tarjeta llevaba el suyo,
   repartido por orden alfabetico, y la reja se leia como un semaforo donde el
   color no significaba nada —dos modulos vecinos en rojo y verde no son
   contrarios, solo salieron en ese orden—. En un color unico el dibujo vuelve a
   ser lo que es: una ayuda para reconocer la tarjeta, no una clasificacion.

   EL COLOR DE VERDAD LO PONE LA CATEGORIA, en `_base/base.css`, pegado al de
   la bolita que dice lo mismo en la misma tarjeta. Este `--mid` es solo el
   respaldo: lo usa una tarjeta sin categoria —hoy ninguna de las ocho, pero una
   subCard podria no declararla— y ahi un gris neutro es mejor que un dibujo
   invisible. `currentColor` en el `stroke` es lo que hace que el SVG herede
   cualquiera de los dos. */
.portada-card .pc-icon{line-height:0;color:var(--mid)}
.portada-card .pc-icon svg{width:30px;height:30px;display:block;stroke:currentColor;fill:none}
.portada-card .pc-title{font-weight:700;color:var(--primary);font-size:15px}
.portada-card .pc-desc{font-size:12px;color:var(--mid);line-height:1.5}

/* === CLIENT_CSS === (estilos especificos del cliente, opcional) */
/* ============================================================================
   modules.css — estilos especificos de los modulos del cliente.
   El base_template.html del Core ya trae el grueso del CSS (paleta, header,
   tablas, badges, toolbar, etc.). Aqui van solo los estilos puntuales que
   alguna vista adiciona.
============================================================================ */
/* registro + zoom + pendientes: fila clickable + detalle de fila (modal) */
#r-table tbody tr[data-idx],#z-detail-table tbody tr[data-idx],#p-table tbody tr[data-idx]{cursor:pointer}
#r-table tbody tr[data-idx]:hover,#z-detail-table tbody tr[data-idx]:hover,#p-table tbody tr[data-idx]:hover{background:var(--soft)}
/* La ficha de un registro: etiqueta a la IZQUIERDA, dato a la DERECHA, cada uno
   pegado a su borde de la tarjeta. Los dos amontonados en el centro obligaban a
   buscar donde acababa el nombre y empezaba el valor renglon a renglon; contra
   el borde derecho las cifras quedan ademas alineadas entre si, que es como se
   comparan. `1fr` en la segunda columna es lo que da el borde al que pegarse.

   La tabla de "Pagos registrados" NO entra aqui: es una tabla, no una lista de
   pares, y ya alinea sus montos por columna. */
.kv{display:grid;grid-template-columns:max-content 1fr;column-gap:18px;row-gap:7px;margin:2px 0 6px}
/* Los DOS lados a 12px. El `dd` no declaraba talla, asi que heredaba los 14 px
   del cuerpo: cada renglon de la ficha tenia el nombre en un tamaño y el dato
   en otro, y el ojo lo lee como dos listas distintas en vez de una. */
.kv dt{color:var(--mid);font-size:12px}
.kv dd{margin:0;font-size:12px;font-variant-numeric:tabular-nums;word-break:break-word;
  text-align:right}
/* Botones de toolbar compactos: misma talla en Registro, Detalle
   Clientes/Proveedores, Resumen CxC/CxP y Planeacion. Variante mas
   chica del .toolbar .btn base para que queden alineados visualmente
   con los selects/inputs de la izquierda (heredan align-items:flex-end
   de .toolbar; solo faltaba reducir su tamaño). */
#r-clear, #r-xlsx, #z-clear, #z-copy, #p-clear, #p-copy, #pl-clear-filters,
#pg-limpiar{
  padding:4px 10px;font-size:12px;font-weight:500
}
/* Badge de Ratio de Calidad: pildora minimal con punto de color (mismo
   semaforo del modulo Diagnostico). No invade visualmente la card. */
.pl-q{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;color:var(--mid);
  padding:2px 8px;border-radius:10px;background:var(--soft);border:1px solid var(--neutral-1);
  white-space:nowrap;cursor:help}
.pl-q-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--mid)}
.pl-q.diag-ok   .pl-q-dot{background:var(--ok)}
.pl-q.diag-warn .pl-q-dot{background:var(--warn)}
.pl-q.diag-err  .pl-q-dot{background:var(--err)}
.pl-q.diag-ok   {color:#3F5640;border-color:#DDE7DC}
.pl-q.diag-warn {color:#7A5630;border-color:#FAEAD8}
.pl-q.diag-err  {color:#7A3C30;border-color:#F0D9D2}
/* ===== Portada: referencia de tipo de módulo (badge estilo "Calidad") ===== */
/* Anclada a la esquina superior derecha de cada caja. */
.portada-card{position:relative}
.pc-tag{position:absolute;top:10px;right:10px;margin:0}
/* EL COLOR DE CADA CATEGORÍA SE ESCRIBE UNA SOLA VEZ, aquí. Lo llevan la bolita
   de la píldora y el icono de la tarjeta, y tienen que ser el mismo: son la
   misma información dicha dos veces en la misma caja, y dos tonos parecidos
   pero distintos se leen como dos cosas distintas.
   Los tres ya estaban en la paleta, así que van por su variable y no por su
   número: si un día cambia la marca, cambian los dos sitios a la vez. */
.pl-q.pc-cat-info      .pl-q-dot{background:var(--secondary)}
.pl-q.pc-cat-analisis  .pl-q-dot{background:var(--teal)}
.pl-q.pc-cat-operativo .pl-q-dot{background:var(--cool-3)}
/* El icono de la tarjeta, con el color de SU categoria. Van pegados a las tres
   reglas de arriba y con la misma variable, no sueltos en otro archivo: la
   bolita y el dibujo dicen lo mismo, y separarlos es como se acaban
   despintando el uno del otro.
   `background` en la bolita —un circulo relleno— y `color` en el icono, que es
   un trazo y lo hereda por el `currentColor` de su `stroke`. */
.portada-card[data-category="info"]      .pc-icon{color:var(--secondary)}
.portada-card[data-category="analisis"]  .pc-icon{color:var(--teal)}
.portada-card[data-category="operativo"] .pc-icon{color:var(--cool-3)}

/* ===== Navegación solo desde la Portada ===== */
/* Se oculta la barra de pestañas de módulos (se conserva en el DOM para no
   romper el orden de la portada ni los listeners del Core). Para entrar a un
   módulo se usa la Portada; para volver, el nombre del cliente o el logo.
   Información y Cerrar sesión ya no viven aquí: se fueron al menú de la
   cabecera, que está en el mismo sitio en las dos pantallas. */
#tab-bar{display:none}
.tab-row{justify-content:flex-end}

/* ===== Filtros por columna: embudo en el <th> + panel flotante ===== */
/* El embudo va dentro del encabezado, pero con su propio click: el titulo
   sigue ordenando. Atenuado hasta que la columna tiene filtro puesto. */
.cf-btn{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;
  margin-left:6px;vertical-align:-3px;border-radius:3px;cursor:pointer;opacity:.45}
.cf-btn svg{width:11px;height:11px;fill:currentColor}
.cf-btn:hover{opacity:1;background:rgba(255,255,255,.18)}
.cf-btn.cf-on{opacity:1;background:var(--white);color:var(--secondary)}
th.num .cf-btn{margin-left:4px}
/* Panel: cuelga del <body> (position:fixed) porque .tbl-wrap recorta y el <th>
   es sticky. Misma pinta que .multi-body del toolbar. */
.cf-pop{position:fixed;z-index:120;min-width:230px;max-width:320px;background:var(--white);
  border:1px solid var(--neutral-1);border-radius:5px;padding:6px 4px;
  box-shadow:0 6px 20px rgba(0,0,0,.18);font-size:13px;color:var(--primary)}
.cf-pop.hidden{display:none}
.cf-pop .cf-head{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:4px 8px;border-bottom:1px solid var(--neutral-1);margin-bottom:4px}
.cf-pop .cf-head a{font-size:11px;color:var(--primary);cursor:pointer;text-decoration:underline}
.cf-pop .cf-head span{font-size:11px;color:var(--mid)}
.cf-pop .cf-search{width:calc(100% - 16px);margin:0 8px 6px;padding:4px 6px;font-size:12px;
  border:1px solid var(--neutral-1);border-radius:4px}
/* Rango (fechas y montos): dos cajas etiquetadas, una debajo de otra. La
   etiqueta va al lado y no encima para que el panel no crezca de alto. */
.cf-pop .cf-rango{display:flex;align-items:center;gap:8px;padding:3px 8px 5px;
  font-size:11px;color:var(--mid);font-weight:500}
.cf-pop .cf-rango input{flex:1;min-width:0;padding:4px 6px;font:inherit;font-size:12px;
  color:var(--primary);border:1px solid var(--neutral-1);border-radius:4px;background:var(--white)}
.cf-pop .cf-list{max-height:240px;overflow-y:auto}
.cf-pop .cf-list label{display:flex;flex-direction:row;align-items:center;gap:6px;padding:4px 8px;
  cursor:pointer;border-radius:4px;font-weight:400}
.cf-pop .cf-list label:hover{background:var(--bg-alt)}
.cf-pop .cf-list input{margin:0;cursor:pointer}

/* ============ module.css — Rotación de Clientes & Proveedores =============
   Reusa del Core: .toolbar / .totals / .stat / details.multi.
   Reusa de _base: la regla compacta de los botones de toolbar
   (#pl-clear-filters).
========================================================================== */

/* Encabezado de la vista. */
.pl-subhead{display:flex;align-items:center;gap:14px;margin:8px 0 14px}

/* ----- Cards de KPI (Ratios de Eficiencia Operativa) -------------------
   El numero grande domina; formula chica abajo; tag interpretativo al final. */
.pl-kpi{min-width:240px;flex:1;display:flex;flex-direction:column;gap:6px;padding:14px 16px}
.pl-kpi-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.pl-kpi .val{font-size:24px;line-height:1.1}
.pl-kpi .val.pl-neg{color:var(--err)}
.pl-formula{font-size:11px;color:var(--mid);line-height:1.4;font-weight:500;border-top:1px dashed var(--neutral-1);padding-top:6px;margin-top:auto;cursor:help}
.pl-tag{display:inline-block;padding:3px 8px;border-radius:10px;font-size:11px;font-weight:500;align-self:flex-start;margin-top:2px}
.pl-tag-ok  {background:#DDE7DC;color:#3F5640}
.pl-tag-warn{background:#FAEAD8;color:#7A5630}
.pl-tag-err {background:#F0D9D2;color:#7A3C30}
.pl-tag-mid {background:var(--light);color:var(--mid)}
.pl-tag-info{background:#CABCD8;color:#3D2F50}
/* Acento de color en el borde superior de la card. */
.pl-kpi.pl-acc-ef{border-top:4px solid #E8C078}

/* ----- Layout: filtros (1/3, apilados) + cajas de KPIs (2/3) -----------
   align-items:stretch -> la caja de filtros (izq) iguala su alto al de la
   columna de resultados (der); los filtros quedan arriba y el resto es
   espacio. En pantallas angostas las dos columnas se apilan. */
.pl-rot-layout{display:grid;grid-template-columns:1fr 2fr;gap:16px;align-items:stretch}
.pl-rot-results{min-width:0}
.pl-rot-results .totals{margin-top:0}
.pl-rot-results .totals + .totals{margin-top:14px}
/* Variante vertical del toolbar: cada filtro ocupa su propia fila y los
   controles llenan el ancho de la columna de 1/3. */
.pl-toolbar-vert{flex-direction:column;flex-wrap:nowrap;align-items:stretch}
.pl-toolbar-vert > label{width:100%}
.pl-toolbar-vert select,
.pl-toolbar-vert details.multi{width:100%}
.pl-toolbar-vert details.multi > summary{box-sizing:border-box;width:100%}
/* El <select> de Periodo iguala la caja de los dropdowns .multi del resto de
   los filtros: mismo rango de ancho (140–240px), misma fuente (13px) y mismo
   padding vertical, para que todas las cajas se vean del mismo tamano. */
.pl-toolbar-vert select{box-sizing:border-box;min-width:140px;max-width:240px;font-size:13px;padding:5px 10px}
.pl-toolbar-vert .group{margin-top:2px}

/* ----- Análisis de Tendencias (ancho completo) -------------------------
   La grafica replica el dimensionado del waterfall: se mide el contenedor y
   el SVG se dibuja a ese tamano exacto en px. */
.pl-trend-analyses{display:grid;grid-template-columns:1fr;gap:24px;align-items:stretch;margin-top:24px;border-top:1px solid var(--neutral-1);padding-top:24px}
.pl-trend-col{min-width:0}
.pl-trend-placeholder{display:none}
.pl-trend-block{display:flex;flex-direction:column;min-height:360px;padding:14px 16px}
.pl-trend-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px}
.pl-trend-year-lbl{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--mid)}
.pl-trend-title{font-size:13px;font-weight:600;color:var(--dark)}
.pl-trend-chart{flex:1;min-height:0}
.pl-trend-chart svg{width:100%;height:100%;display:block}
.pl-trend-empty{font-size:13px;color:var(--mid);padding:24px 0;text-align:center}
.tl-grid{stroke:var(--neutral-1)}
.tl-axis{stroke:#544D37}
.tl-lbl{font-size:12px;fill:#544D37}
.tl-line{fill:none;stroke-width:2}
.tl-pt{stroke:#fff;stroke-width:1}
.tl-cxc{stroke:#A2B6A0}
.tl-cxc.tl-pt{fill:#A2B6A0}
.tl-cxp{stroke:#F2BA8C}
.tl-cxp.tl-pt{fill:#F2BA8C}
.pl-trend-legend{display:flex;gap:18px;justify-content:center;margin-top:10px}
.tl-leg{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--mid)}
.tl-swatch{width:14px;height:3px;border-radius:2px;display:inline-block}
.tl-swatch.tl-cxc{background:#A2B6A0}
.tl-swatch.tl-cxp{background:#F2BA8C}

@media (max-width:760px){
  .pl-rot-layout{grid-template-columns:1fr}
}
@media (max-width:900px){
  .pl-trend-analyses{grid-template-columns:1fr}
  .pl-trend-block{min-height:280px}
}

/* ================== module.css — Disponibilidad de Efectivo ===============
   Reusa del Core: .toolbar / .tbl-wrap / table.t / .totals / .stat / .overlay.
   Los globos de ayuda de la tabla (.diag-tip / .diag-tip-box) viven aqui:
   esta es la unica pantalla que los usa.
========================================================================== */

/* Encabezado de la vista. */
.pl-subhead{display:flex;align-items:center;gap:14px;margin:8px 0 14px}

/* ----- Globos de ayuda de la tabla (CxC, CxP, Gastos Fijos) ------------
   Venian de ratio_calidad/module.css (Diagnostico Operativo, ya retirado), y
   llegaban aqui solo porque esta pantalla declaraba ese modulo en `requires`.
   Se mudaron con su nombre de siempre: el prefijo `diag-` es historia, no una
   dependencia. */
.diag-tip{position:relative;cursor:help;display:inline-block;border-bottom:1px dotted var(--mid);outline:none}
.diag-tip .diag-tip-box{
  display:none;position:absolute;right:0;bottom:calc(100% + 6px);z-index:30;
  width:max-content;max-width:280px;text-align:left;white-space:pre-line;
  background:var(--primary);color:#fff;font-weight:400;font-size:11px;line-height:1.5;
  padding:8px 10px;border-radius:6px;box-shadow:0 6px 20px rgba(0,0,0,.18)}
.diag-tip:hover .diag-tip-box,
.diag-tip:focus .diag-tip-box{display:block}

/* ----- Cards de KPI (Ratios de Liquidez) -------------------------------
   El numero grande domina; formula chica abajo; tag interpretativo al final. */
.pl-kpi{min-width:240px;flex:1;display:flex;flex-direction:column;gap:6px;padding:14px 16px}
.pl-kpi-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.pl-kpi .val{font-size:24px;line-height:1.1}
.pl-kpi .val.pl-neg{color:var(--err)}
.pl-formula{font-size:11px;color:var(--mid);line-height:1.4;font-weight:500;border-top:1px dashed var(--neutral-1);padding-top:6px;margin-top:auto;cursor:help}
.pl-tag{display:inline-block;padding:3px 8px;border-radius:10px;font-size:11px;font-weight:500;align-self:flex-start;margin-top:2px}
.pl-tag-ok  {background:#DDE7DC;color:#3F5640}
.pl-tag-warn{background:#FAEAD8;color:#7A5630}
.pl-tag-err {background:#F0D9D2;color:#7A3C30}
.pl-tag-mid {background:var(--light);color:var(--mid)}
.pl-tag-info{background:#CABCD8;color:#3D2F50}
/* Acento de color en el borde superior de la card: las cajas de resultados
   resaltan como el contenido mas importante del modulo. */
.pl-kpi.pl-acc-liq{border-top:4px solid #7BAE7E}

/* ----- Inputs de moneda (Saldo Bancario, Reserva) ----------------------
   Misma logica visual que .gc-ing-input pero mas anchos. La variante
   .pl-money-sm es para los que viven dentro de la tabla. */
input.pl-money{width:160px;text-align:right;padding:5px 10px;border:1px solid var(--neutral-1);border-radius:5px;font:inherit;font-variant-numeric:tabular-nums;background:#fff}
input.pl-money:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 2px rgba(82,109,127,.15)}
input.pl-money.pl-money-sm{width:130px;padding:4px 8px;font-size:13px}

/* ----- Caja de filtros (Saldo Bancario + selector de periodo) -----------
   Apilada en filas; cada control se empuja a la derecha para que queden
   alineados entre si y a la altura de la columna de numeros de la tabla. */
.pl-filter-box{flex-direction:column;align-items:stretch;gap:12px;max-width:100%}
.pl-filter-box label.pl-filter-row{flex-direction:row;align-items:center;justify-content:space-between;gap:10px}
/* Ambos controles con el mismo tamano exacto (border-box) para que sus bordes
   coincidan vertical y horizontalmente. */
.pl-filter-box .pl-money,
.pl-filter-box select{width:160px;min-width:0;box-sizing:border-box;text-align:right}

/* ----- Tabla de desglose de la Liquidez Neta ---------------------------
   Angosta, numeros a la derecha, enfasis en el total. overflow:visible deja
   que las notas (tooltips) de CxC/CxP se vean completas en lugar de
   recortarse contra el borde de la tabla. */
.pl-table-wrap{max-width:100%;overflow:visible}
.pl-table td{padding:9px 12px;vertical-align:middle;font-size:13px}
.pl-table td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;min-width:140px}
.pl-table td.pl-act{text-align:right;width:1%;white-space:nowrap}
.pl-table tr.pl-row-total td{border-top:2px solid var(--primary);font-weight:700;color:var(--primary)}
.pl-table td.num.pl-neg{color:var(--err)}
.pl-table input.pl-money.pl-money-sm{width:140px}

/* Nota al pie del desglose: texto pequeno, sin caja ni color de resalte. */
.pl-note{max-width:100%;margin:10px 0 0;line-height:1.5}

/* ----- Layout: tabla (izq) + grafica de cascada (der) ------------------
   Dos mitades; en pantallas angostas se apilan. */
.pl-ef-layout{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
.pl-ef-left{min-width:0}
.pl-ef-right{min-width:0;display:flex;flex-direction:column}
/* La columna derecha estira a la altura de la izquierda (align-items:stretch) y la
   grafica llena el alto restante bajo su titulo (flex:1). El SVG se dibuja por JS al
   tamano exacto del contenedor (viewBox = px reales), asi llena sin deformarse y la
   letra a 13px queda literal, igual que la tabla. */
.pl-waterfall{flex:1;min-height:0}
.pl-waterfall svg{width:100%;height:100%;display:block}
.pl-waterfall .wf-bar{transition:opacity .12s}
.pl-waterfall .wf-bar:hover{opacity:.85}
.pl-waterfall .wf-cat{font-size:13px;fill:var(--mid)}
.pl-waterfall .wf-val{font-size:13px;font-weight:600;fill:var(--dark)}
.pl-waterfall .wf-axis{stroke:var(--neutral-1)}
.pl-waterfall .wf-connector{stroke:var(--neutral-1);stroke-dasharray:3 3}

@media (max-width:900px){
  .pl-ef-layout{grid-template-columns:1fr}
  .pl-waterfall{min-height:280px}
}

/* registro: selectores rapidos de Año/Mes en toolbar */
.quick-sel{min-width:90px}

/* ===================== Subvista de graficas (rg-) ========================
   Reusa del core: .toolbar, .btn, .group, table.t, .small, .hidden y la
   paleta de variables. Todo lo propio va prefijado porque el CSS de los siete
   modulos se concatena en un solo portal.css, sin scoping.
   OJO con dos nombres parecidos: .rg-layout es el LAYOUT de dos columnas y
   .rg-gl es la rejilla del SVG. No son lo mismo.
======================================================================== */

/* Los dos botones toman la talla compacta de #r-clear / #r-xlsx (definida en
   _base/base.css): padding 4/10 y 12px. Asi la fila de botones queda pareja. */
#rg-toggle, #rg-back{padding:4px 10px;font-size:12px;font-weight:500}
/* Ver graficas / Ver tabla: exactamente el mismo aspecto que "Descargar
   Detalle". Ese color no sale de .toolbar .btn (que es var(--primary)) sino de
   la regla `.toolbar .btn[id$="-xlsx"]` del core, que pinta de warm-1 todo
   boton cuyo id acabe asi. Como este no se llama asi, se replica a mano. */
#rg-toggle{background:var(--warm-1);color:#fff;border:0}
#rg-toggle:hover{background:var(--warm-2)}

/* Dos columnas: barras a la izquierda, desglose a la derecha.
   - min-width:0 es obligatorio en ambas: sin el, un SVG con ancho propio
     desborda el grid en vez de dejar que su contenedor scrollee.
   - align-items:stretch iguala el alto de las dos cajas. Junto con el alto
     fijo de las dos areas de grafico (340px), es lo que hace que midan
     exactamente lo mismo pase lo que pase con el contenido. */
.rg-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px;align-items:stretch;margin-top:14px}
.rg-layout.rg-solo{grid-template-columns:1fr}   /* sin desglose abierto */
.rg-card{background:var(--white);border:1px solid var(--neutral-1);border-radius:8px;padding:12px 14px;min-width:0;display:flex;flex-direction:column}
.rg-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
.rg-head b{font-size:13px;color:var(--dark)}
.rg-dim-lbl{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--mid);margin-left:auto}
.rg-dim-lbl select{font-size:12px;padding:4px 8px}
#rg-pie-close{padding:4px 10px;font-size:12px}

/* Alto fijo: el SVG se dibuja midiendo el contenedor, asi que necesita uno
   conocido. El scroll horizontal es lo que salva las 52 barras de la vista
   semanal — se prefiere a comprimirlas hasta que no se puedan clicar. */
.rg-chart{height:340px;flex:none;overflow-x:auto;overflow-y:hidden}
.rg-chart svg{display:block}
/* El donut hereda el alto de su fila del grid (.rg-pie-body, 340px fijos), asi
   que anula el height de .rg-chart. Va DESPUES para ganarle: misma
   especificidad, manda la ultima declarada. */
.rg-pie{height:auto;overflow:hidden}
.rg-empty{font-size:13px;color:var(--mid);padding:48px 16px;text-align:center;line-height:1.5}

/* ----- barras ----- */
.rg-gl{stroke:var(--neutral-1)}
.rg-axis{stroke:var(--primary)}
.rg-lbl{font-size:11px;fill:var(--primary)}
.rg-lbl-y{font-size:10.5px;fill:var(--mid)}
.rg-val{font-size:10.5px;fill:var(--mid)}
.rg-bar{cursor:pointer}
.rg-bar rect{fill:var(--secondary);transition:opacity .12s}
.rg-bar.rg-neg rect{fill:var(--warm-2)}
.rg-bar:hover rect{opacity:.78}
.rg-bar.rg-on rect{stroke:var(--dark);stroke-width:2}

/* ----- donut ----- */
/* MISMA altura que .rg-chart, fija. Antes crecia con la lista de conceptos:
   una dimension con 60 clientes estiraba la caja del donut y, con ella, la fila
   del grid, asi que la de barras se estiraba tambien y las dos se iban de
   tamaño. Con alto fijo, lo que sobra scrollea dentro de la leyenda. */
.rg-pie-body{display:grid;grid-template-columns:minmax(180px,1fr) minmax(230px,1.1fr);gap:14px;align-items:stretch;height:340px}
.rg-slice{stroke:var(--white);stroke-width:1}
.rg-pct{font-size:11px;fill:var(--white);font-weight:600;pointer-events:none}
.rg-c-val{font-size:15px;font-weight:600;fill:var(--dark)}
.rg-c-lbl{font-size:11px;fill:var(--mid)}

/* ----- leyenda -----
   NO usa .tbl-wrap a proposito: base_template.html le pone max-height:60vh a
   todo .tbl-wrap dentro de #view-flujos_efectivo, y una clase sola no le gana
   a esa especificidad. El thead sticky si viene gratis de table.t. */
/* scrollbar-gutter reserva el ancho de la barra vertical, asi la tabla al 100%
   no desborda cuando aparece; overflow-x:hidden queda de red por si acaso. */
.rg-legend-wrap{height:100%;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;border:1px solid var(--neutral-1);border-radius:6px}
/* table-layout:fixed para poder recortar la columna de la categoria: los
   nombres de contraparte del cliente son largos ("… S.A. de C.V.") y partian
   cada fila en dos lineas. Una linea por categoria + el nombre completo en el
   tooltip se lee mucho mejor en una lista de 45. */
.rg-legend{font-size:12px;table-layout:fixed;width:100%}
.rg-legend td,.rg-legend th{padding:4px 6px;box-sizing:border-box}
.rg-legend th:first-child,.rg-legend td:first-child{width:24px;padding-right:0}
/* 132px cabe el total acumulado de un cliente grande ("$138,737,485.2"), que
   es el numero mas largo que llega aqui. El ellipsis de abajo es la red para
   una cifra aun mayor: preferible recortarla que encimarla con el porcentaje. */
.rg-legend th:nth-child(3),.rg-legend td:nth-child(3){width:136px}
.rg-legend td.num{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 78px: el "100.0%" del pie va en NEGRITA y ocupa 75; con 62 se recortaba. */
.rg-legend th:last-child,.rg-legend td:last-child{width:78px}
.rg-legend td:nth-child(2){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rg-legend thead th{cursor:default}   /* el th del core es clickable; aqui no ordena */
.rg-sw{display:inline-block;width:10px;height:10px;border-radius:2px;vertical-align:-1px}
.rg-sw-off{background:var(--light)}
.rg-sep td{background:var(--bg-alt);font-size:11px;color:var(--mid);font-weight:500}
.rg-nota td{font-size:11px;color:var(--mid);font-weight:400;line-height:1.4}

@media (max-width:1100px){
  .rg-layout,.rg-pie-body{grid-template-columns:1fr}
}


/* ============ Ficha de detalle: la tabla de abonos (rd-) ==================
   `table.t` esta pensada para una tabla A PANTALLA COMPLETA sobre fondo blanco:
   encabezado verde, filas en cebra y pie blanco. Dentro de la ficha —que ya es
   una tarjeta con su propio fondo— eso se lee como una segunda pantalla pegada
   encima.

   Se queda la rejilla y se va el color. Tres avisos de lo que hay detras:
   - La cebra usaba var(--soft), que es EXACTAMENTE el fondo de .info-card: no
     rayaba nada, solo apagaba una fila de cada dos.
   - Al quitarle el verde al encabezado, su texto blanco se quedaria invisible
     sobre la tarjeta clara. Pasa a var(--primary) y se apoya en una linea.
   - Los selectores llevan `table.t` delante A PROPOSITO: sin eso pesan menos
     que las reglas del core (`table.t tbody tr:nth-child(even)`) y no ganan.
========================================================================= */
table.t.rd-pagos,
table.t.rd-pagos thead th,
table.t.rd-pagos tfoot td,
table.t.rd-pagos tbody tr:nth-child(even){background:transparent}
table.t.rd-pagos thead th{color:var(--primary);font-weight:600;
  border-bottom:1px solid var(--neutral-1)}
/* Mismo motivo que en la tabla gemela del formulario: seis columnas dentro de
   una tarjeta piden menos letra y menos aire que una tabla de pantalla. */
table.t.rd-pagos{font-size:11.5px}
table.t.rd-pagos thead th{font-size:10.5px;padding:6px 8px}
table.t.rd-pagos tbody td, table.t.rd-pagos tfoot td{padding:5px 8px}
table.t.rd-pagos tbody tr:hover{background:rgba(84,77,55,.05)}
table.t.rd-pagos tfoot td{border-top:2px solid var(--neutral-1)}

/* Un valor que el portal ASUME, no uno que alguien tecleo. En cursiva y en gris
   para que no se confunda con un dato capturado. */
.rd-default{color:var(--mid);font-style:italic}

/* Una perdida cambiaria, en rojo — igual que "Pendiente de Cobro" y "Pendiente
   de Pago" en las cajas de al lado, que usan `.sub.pend`.

   CLASE PROPIA Y NO REUSAR `pend`: hoy comparten color, pero una habla de
   dinero que todavia no llega y la otra de dinero que ya se perdio. El dia que
   una de las dos cambie de color no debe arrastrar a la otra.

   La pone y la quita `_rPintarDifCambiaria` en cada render, segun el signo. */
.stat-group .sub.neg .sub-val{color:var(--err)}

/* ===================== LA (i) DE AYUDA, Y SU BURBUJA =======================
   Empezo pegada al titulo de una caja de totales y ahora vive tambien en las
   cabeceras de tabla, donde sustituye a un parentesis que ensanchaba la columna
   ("TC (Factura)" ocupa el triple que la cifra que lleva debajo).

   Pequeña y apagada: es una aclaracion, no un boton — de ahi el cursor de ayuda
   y no el de mano.

   `text-transform:none` NO ES OPCIONAL donde vive dentro de `.group-lbl`, que
   pone todo en mayusculas: sin esto la (i) sale como una "I" y deja de leerse
   como simbolo de informacion. Se aplica siempre, que es mas barato que
   acordarse de cuando hace falta.
========================================================================== */
.lbl-info{position:relative;display:inline-flex;align-items:center;
  justify-content:center;width:12px;height:12px;margin-left:5px;
  border:1px solid currentColor;border-radius:50%;
  font-size:9px;font-weight:700;font-style:italic;line-height:1;letter-spacing:0;
  cursor:help;vertical-align:middle;text-transform:none;opacity:.7}
.lbl-info:hover,.lbl-info:focus-visible{opacity:1}

/* `currentColor` y `opacity` en vez de un color fijo: en una caja de totales la
   (i) va sobre fondo claro y en una cabecera de tabla sobre el verde oscuro con
   texto blanco. Heredando el color del texto, las dos se ven bien sin una regla
   por sitio. */

/* LA BURBUJA, DIBUJADA A MANO. El `title` del navegador no llegaba a salir:
   tarda casi un segundo, se lo come cualquier cosa que se pinte encima y en
   pantalla tactil no existe. Una aclaracion que no se ve es lo mismo que no
   haberla escrito.

   Sale con el raton Y con el tabulador (`:focus-visible`), porque si no queda
   fuera quien navega con teclado.

   DETALLES QUE MUERDEN, los tres:
   - `text-transform:none` y `font-style:normal` otra vez: la burbuja hereda del
     titulo en mayusculas y de la (i) en cursiva, y saldria gritando y torcida.
   - `pointer-events:none`: sin esto la burbuja se interpone entre el cursor y
     la (i), el hover se pierde, la burbuja desaparece y vuelve a aparecer —
     parpadeo infinito.
   - `z-index` por encima del 10 de los embudos de filtro (`details.multi`), que
     viven justo encima en la misma pantalla.

   Y EL CUARTO, QUE FUE EL QUE ROMPIO LA BURBUJA EN LAS TABLAS:
   `white-space:normal`. `table.t thead th` lleva `nowrap` —lo necesita, o los
   nombres de columna se parten en dos renglones— y el `::after` lo HEREDA. Con
   `max-width:180px` y sin poder partir el texto, la frase no cabia y se cortaba
   a media palabra: se leia "El tipo de cambio con el que se regis". No daba
   ningun error y la burbuja parecia estar bien puesta. */
.lbl-info::after{
  content:attr(data-tip);
  position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);
  width:max-content;max-width:180px;
  background:var(--primary);color:var(--white);
  font-size:11px;font-weight:400;font-style:normal;letter-spacing:0;
  text-transform:none;line-height:1.35;text-align:left;white-space:normal;
  padding:6px 9px;border-radius:5px;box-shadow:0 4px 14px rgba(0,0,0,.18);
  opacity:0;visibility:hidden;transition:opacity .12s ease;
  pointer-events:none;z-index:20}
.lbl-info:hover::after,.lbl-info:focus-visible::after{opacity:1;visibility:visible}

/* EN UNA CABECERA DE TABLA LA BURBUJA CUELGA DE LA FILA, NO DEL ICONO.

   Y eso es lo que de verdad arregla el problema, medido: el icono termina 9px
   antes que el borde de abajo de la cabecera (el `padding` del `th`). Colgada
   del icono con `top:calc(100% + 7px)`, la burbuja arrancaba DOS PIXELES DENTRO
   de la fila verde — y ahi los perdia, porque todas las cabeceras son
   `position:sticky` con `z-index:1` y a igual z-index gana la que va despues en
   el HTML.

   Se podia pelear con el z-index, y abajo se pelea igual por si acaso. Pero la
   solucion que no depende de nada es que la burbuja no invada la cabecera:
   `position:static` en el icono devuelve el anclaje al `th` —que ya es un
   elemento posicionado, por el `sticky`— y entonces `top:100%` significa "el
   borde de abajo de la FILA". Nada puede taparla porque no hay solapamiento.

   Se centra sobre la COLUMNA y no sobre el icono, que en una columna estrecha
   es casi lo mismo y ademas la deja mejor repartida.

   Hacia abajo y no hacia arriba porque `.tbl-wrap` lleva `overflow-x:auto` y
   Flujo de Efectivo ademas `max-height:60vh` con `overflow-y:auto`: por
   encima de la cabecera la burbuja cae fuera del contenedor y se recorta. */
table.t thead th .lbl-info{position:static}
table.t thead th .lbl-info::after{
  bottom:auto;top:calc(100% + 6px);
  text-transform:none}
/* En la ultima columna, anclada a la derecha: centrada se saldria por el borde y
   el `overflow-x` la cortaria igual que arriba. */
table.t thead th:last-child .lbl-info::after{
  left:auto;right:0;transform:none}

/* Y LA CABECERA HOVERADA SUBE POR ENCIMA DE SUS HERMANAS. Con el anclaje de
   arriba ya no hay solapamiento que resolver, asi que esto es el cinturon
   ademas de los tirantes: cubre el dia que alguien cambie el `padding` del `th`
   o meta un icono mas alto y la burbuja vuelva a rozar la fila.

   Sube el `th` ENTERO, no el `::after`: el `z-index:20` de la burbuja solo la
   ordena DENTRO de su cabecera, no contra las otras.

   `:focus-within` para quien llega con el tabulador: si no, le saldria tapada y
   no tiene raton con el que arreglarlo. */
table.t thead th:hover,
table.t thead th:focus-within{z-index:3}

/* -------- La pastilla: "esta tabla trae programados" ---------------------- */
/* El interruptor se fue al modal de Configuracion y con el se fue de la vista.
   Esto es lo que queda: un rotulo que dice que estan y con que ventana, y que
   los apaga de un clic. Sin el, alguien que se encuentre la tabla rayada no
   tendria como saber de donde salieron ni como quitarlos.

   Boton y no <span>: hace algo al pincharlo, asi que tiene que poder recibir el
   foco y responder al teclado sin que haya que fabricarlo a mano. */
.r-prog-chip{
  display:inline-flex;align-items:center;gap:8px;margin:0 0 8px;
  padding:4px 10px;border:1px dashed var(--neutral-1);border-radius:999px;
  background:var(--soft);color:var(--mid);font:inherit;font-size:11.5px;
  cursor:pointer}
.r-prog-chip:hover{border-color:var(--warm-1);color:var(--primary)}
.r-prog-chip .rp-x{font-size:12px;line-height:1;opacity:.75}
.r-prog-chip:hover .rp-x{opacity:1}

/* -------- Columna de texto largo (hoy solo Notas) ------------------------- */
/* Una nota de tres parrafos estira la tabla entera y deja las cifras fuera de
   pantalla. Se recorta en un renglon y el texto completo se lee en el `title`
   —y en la ficha del registro, que es donde de verdad cabe—. */
#r-table td.r-td-larga{
  max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* -------- El panel de Configuracion de este modulo ------------------------ */
/* Vive DENTRO del modal del core (`#cfg-modulo`), asi que hereda su tipografia
   y aqui solo se resuelve la reja de casillas. */
.rc-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 16px;margin:6px 0 10px}
/* Fila, no columna: `.toolbar label` apila y una casilla necesita lo contrario.
   `width:max-content` evita el clic fantasma —una <label> es tan ancha como su
   hueco, y sin esto pinchar en el vacio del renglon encendia la casilla desde
   lejos—. Mismo problema que ya resolvieron `.rf-check` y el viejo interruptor. */
.rc-item{display:flex;align-items:center;gap:7px;width:max-content;max-width:100%;
  font-size:12.5px;color:var(--primary);cursor:pointer;padding:2px 0}
.rc-item input{margin:0;cursor:pointer}
/* Una fija y una apagada por el tope tienen que leerse DISTINTO: la primera no
   se puede tocar nunca, la segunda se destraba soltando otra. */
.rc-fija{opacity:.65;cursor:default}
.rc-fija input{cursor:default}
.rc-tag{font-size:10px;color:var(--mid);border:1px solid var(--neutral-1);
  border-radius:8px;padding:0 5px}
.rc-bloq{opacity:.4;cursor:not-allowed}
.rc-bloq input{cursor:not-allowed}
.rc-cuenta{font-size:11px;font-weight:500;color:var(--mid);margin-left:6px}
.rc-cuenta.tope{color:var(--warn)}
.rc-aviso{color:var(--warn);margin:0 0 10px}
.rc-prog{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.rc-vent{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--primary)}
.rc-vent select{font:inherit;font-size:12.5px;padding:4px 8px;
  border:1px solid var(--neutral-1);border-radius:5px;background:var(--white)}
.rc-vent select:disabled{opacity:.5}
/* En telefono la reja de dos columnas parte las etiquetas largas por la mitad. */
@media (max-width:640px){ .rc-grid{grid-template-columns:1fr} }

/* Las filas programadas, dentro de una tabla de dinero real. La marca tiene que
   verse SIN leer la columna de Estatus: quien mira la tabla en diagonal esta
   buscando cifras, no etiquetas.

   Rayado muy suave y letra en gris, el mismo lenguaje que la banda de Flujos
   Programados. No se usa color de alarma: un programado no esta mal, solo
   todavia no existe. */
#r-table tbody tr.r-fila-prog{
  color:var(--mid);
  background:repeating-linear-gradient(135deg,
    transparent 0 9px, rgba(139,130,115,.07) 9px 18px)}
#r-table tbody tr.r-fila-prog:hover{background:var(--bg-alt)}

/* pendientes: cajas del semáforo clickables (filtran la tabla) */
#p-buckets .stat{cursor:pointer;transition:all .15s;border:2px solid transparent;user-select:none}
#p-buckets .stat:hover{background:rgba(82,109,127,.10)}
#p-buckets .stat.on{border-color:var(--accent);background:rgba(229,147,74,.10)}
/* Caja Total: no filtra, queda contigua a "60+ días" (sin margin-left:auto) */
#p-buckets .stat-total{cursor:default;border-color:transparent !important}
#p-buckets .stat-total:hover{background:var(--soft)}

/* zoom: top-10 grid (filas comparten columnas para que las barras alineen) */
#z-bars{display:grid;grid-template-columns:max-content 1fr max-content;column-gap:10px;row-gap:4px}
#z-bars .bar-row{display:contents}
#z-bars .bar-row .lbl{min-width:0;padding-right:4px}

/* ============================================================================
   registro_flujos — captura manual.

   Todo lleva prefijo .rf- / #rf- porque el bundle del portal es un solo IIFE y
   una sola hoja de estilos con todos los modulos concatenados.

   El formulario reusa .overlay / .info-card del core (el mismo modal que el
   detalle de un registro); aqui solo esta lo que un modal de LECTURA no
   necesitaba: rejilla de campos, mensajes de error y de aviso, y el boton
   destructivo.
============================================================================ */

/* --------------------------------- toolbar ------------------------------- */
/* Alta: el unico boton del portal que crea dato, y por eso el unico que se
   pinta con el color de acento (#F2BA8C, --accent) en vez del verde oliva de
   los demas. */
.toolbar .btn.rf-btn-alta{background:var(--accent);color:var(--white)}
.toolbar .btn.rf-btn-alta:hover{background:#E9A876}
.toolbar .btn.rf-btn-alta:disabled{opacity:.5;cursor:default}
.toolbar .btn.rf-btn-alta:disabled:hover{background:var(--accent)}
/* La nota de permisos se come el hueco de en medio de la barra. */
.rf-permiso{flex:1 1 auto;min-width:120px}

/* ---------------------------------- tabla -------------------------------- */
/* Boton por fila: misma caja chica que el "Ver" de Disponibilidad de Efectivo
   (.d-see). Se declara aqui, con nombre propio, y no se reusa aquella clase:
   vive en el module.css de otro modulo y un cliente puede tener este encendido
   sin aquel. */
.rf-mini{font:inherit;font-size:11px;padding:2px 8px;border-radius:5px;
  border:1px solid var(--primary);background:transparent;color:var(--primary);cursor:pointer}
.rf-mini:hover{background:rgba(84,77,55,.08)}
.rf-mini:disabled{opacity:.35;cursor:default}
.rf-mini:disabled:hover{background:transparent}
/* Marca de quien capturo: discreta, pero visible cuando dos personas comparten
   el modulo y hay que saber de quien es cada fila. */
.rf-mio{font-size:10.5px;color:var(--mid);margin-left:6px}

/* ------------------------------- formulario ------------------------------ */
/* SUBSECCION. Con factura, la tarjeta tiene dos niveles ("Datos de la
   factura" > "Datos generales"); sin factura, uno solo. El titulo es el mismo
   <h3> en los dos casos y `_rfAcomodarSecciones` le pone o le quita esta
   clase: asi no hay dos titulos que mantener por cada seccion. Mas chico y sin
   raya, para que se lea como parte de la seccion de arriba y no como otra. */
.info-card h3.rf-sub{margin:10px 0 4px;font-size:12.5px;font-weight:600;color:var(--mid);
  border-bottom:none;padding-bottom:0}
/* Rejilla del formulario. Se estrecha sola en pantallas chicas: el capturista
   no siempre esta en un monitor grande. */
.rf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 16px;margin:2px 0 14px}
.rf-grid-1{grid-template-columns:1fr}
@media (max-width:820px){ .rf-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .rf-grid{grid-template-columns:1fr} }
.rf-grid label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--mid)}
/* El nombre del campo y su asterisco, EN UN SOLO renglon. Sin este envoltorio
   los dos son hijos directos de un flex en columna, asi que el asterisco caia
   en una linea propia debajo del texto — parecia un error de maquetado y
   ocupaba el alto de un campo entero. */
.rf-grid .rf-lbl{display:block}
/* Un campo que ocupa la fila entera (el motivo, que es texto largo). */
.rf-grid .rf-ancho{grid-column:1 / -1}
/* La casilla de impuestos va FUERA de la rejilla: no es un campo, es una
   pregunta sobre los campos de abajo. */
/* `width:max-content` es lo que evita el clic fantasma: una <label> es tan ancha
   como su contenedor, y como marcar la casilla es lo que hace un clic EN LA
   ETIQUETA, pinchar en el hueco vacio del renglon —a medio metro del cuadrito—
   la marcaba igual. Ahora la etiqueta acaba donde acaba su texto. */
.rf-check{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--primary);
  cursor:pointer;margin:0 0 6px;width:max-content;max-width:100%}
.rf-check input{margin:0;cursor:pointer}
/* Lo que el servidor va a calcular, dicho antes de guardar. */
.rf-calc{margin:0 0 14px;color:var(--mid)}
/* La diferencia no se teclea: se calcula. Se ve como campo para que se lea
   junto a los demas, pero apagada para que nadie intente corregirla ahi.
   Lo mismo el Neto desglosado (sale de los otros cuatro numeros) y el monto de
   un "Pagado" (es lo que faltaba, no una cifra a elegir): el mismo gris dice
   "esto se calcula" sin tener que escribirlo al lado de cada uno. */
#rf-dif,
#rf-neto[readonly],
.rf-grid input.rf-fijo{background:var(--soft);color:var(--mid);cursor:default}
.rf-grid input,.rf-grid select{font:inherit;font-size:13px;padding:6px 8px;color:var(--primary);
  border:1px solid var(--neutral-1);border-radius:5px;background:var(--white);width:100%}
.rf-grid input:focus,.rf-grid select:focus{border-color:var(--primary);outline:none;
  box-shadow:0 0 0 2px rgba(84,77,55,.15)}
/* El asterisco marca lo que el servidor va a exigir. Que se vea ANTES de
   guardar ahorra el viaje de ida y vuelta. */
.rf-req{color:var(--err)}
/* La pista explica la consecuencia, no el campo: por que importa la fecha
   estimada de pago, por que "Pagado" no es lo mismo que "Bruto". */
.rf-pista{font-size:10.5px;line-height:1.35;color:var(--mid);opacity:.85}
/* Una referencia NO es un campo: no se teclea, no lleva marco y no ocupa una
   celda con etiqueta propia. Solo recuerda una cifra que ya existe en otra
   parte de la pantalla. `align-self:end` la sienta a la altura del campo que
   tiene al lado, en vez de dejarla flotando arriba de su celda. */
.rf-grid .rf-ref{align-self:end;padding-bottom:7px;font-size:11.5px;line-height:1.4;
  color:var(--mid);grid-column:span 2}
@media (max-width:560px){ .rf-grid .rf-ref{grid-column:span 1;padding-bottom:0} }
.rf-ref b{color:var(--primary);font-weight:600}
/* `select` va aqui ademas de `input`: desde que Concepto es una lista cerrada,
   marcarlo en rojo sin esto avisaria "falta el Concepto" sin resaltar donde. */
.rf-grid input.rf-mal,
.rf-grid select.rf-mal{border-color:var(--err);box-shadow:0 0 0 2px rgba(181,113,101,.15)}

/* Mensajes. El rojo bloquea, el ambar solo advierte, y la diferencia tiene que
   notarse de un vistazo: un aviso que parece error hace que el capturista
   deshaga un dato correcto. */
.rf-msg{padding:9px 12px;border-radius:5px;font-size:12.5px;line-height:1.45;margin:10px 0}
.rf-err{background:#F7EAE7;border:1px solid #F0D9D2;color:#7A3C30}
.rf-warn{background:#FDF3E4;border:1px solid #FAEAD8;color:#7A5630}

.rf-acciones{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.rf-acciones .btn{background:var(--primary);color:#fff;border:0;padding:8px 18px;border-radius:6px;
  cursor:pointer;font:inherit;font-weight:500}
.rf-acciones .btn.sec{background:transparent;border:1px solid var(--primary);color:var(--primary)}
.rf-acciones .btn:disabled{opacity:.5;cursor:default}
.rf-btn-peligro{background:var(--err)!important}
/* La pregunta de una confirmacion no es el titulo de una ficha: dice una sola
   frase corta y no tiene que gritarla. Los 22 px de `.info-card h2` estaban
   pensados para encabezar una tarjeta llena de datos. */
.info-card h2.rf-pregunta{font-size:16px;font-weight:600;margin:2px 0 16px}
/* Borrar: misma caja que Cancelar y Guardar, en el mismo renglon, rellena para
   que se distinga sin gritar. El margen automatico lo manda al extremo
   izquierdo: comparte altura con las otras dos, no vecindad. */
.rf-acciones .btn.rf-btn-borrar{margin-right:auto;background:#C7948B;border:0;color:var(--white)}
.rf-acciones .btn.rf-btn-borrar:hover{background:#B98277}
/* La pregunta de Cancelar ocupa el renglon de los botones: la frase a la
   izquierda, No y Si a la derecha, donde ya estaba el dedo. */
.rf-descartar{align-items:center}
.rf-descartar-txt{margin-right:auto;font-size:13px;font-weight:500;color:#7A3C30}

/* Los montos se teclean en un campo de TEXTO (ver el comentario del view): un
   campo numerico no puede enseñar "$11,600.00". Se alinean a la derecha como
   los de una tabla, que es donde el ojo busca una cifra. */
.rf-grid input.rf-monto{text-align:right;font-variant-numeric:tabular-nums}

/* Historial de abonos. Va dentro del formulario y no en una pantalla aparte:
   la pregunta "¿cuanto llevo cobrado?" se hace justo al registrar el pago
   siguiente. */
.rf-pagos{margin:0 0 14px}
.rf-pagos-cab{display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;margin:0 0 6px;font-size:12.5px;color:var(--primary)}
/* Letra mas chica y celdas mas apretadas que en una tabla de pantalla completa:
   con las columnas de TC y de los dos montos son siete, y viven dentro de una
   tarjeta de 860 px. La alternativa era dejar que la tabla scrolleara de lado,
   que en un formulario esconde justo lo que se acaba de teclear. */
.rf-pagos-tabla{width:100%;font-size:11.5px}
.rf-pagos-tabla thead th{font-size:10.5px;padding:6px 8px}
.rf-pagos-tabla tbody td, .rf-pagos-tabla tfoot td{padding:5px 8px}
/* Editar y Quitar en la misma celda. `flex` con hueco propio en vez de dejar
   que se peguen: son dos acciones de consecuencia MUY distinta sobre la misma
   fila, y un clic de mas en una tabla apretada tiene que costar un gesto, no
   caer solo. `wrap` para que en pantalla angosta se apilen en vez de forzar el
   scroll lateral que esta tabla evita a proposito. */
.rf-pagos-acc{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
/* Una captura sin terminar. Rayada y en gris para que NO se lea como un
   movimiento de verdad: no cuenta en ninguna cifra y solo la ve quien la
   escribio. */
.rf-fila-borrador td{background:repeating-linear-gradient(45deg,
    var(--soft), var(--soft) 6px, rgba(214,207,194,.35) 6px, rgba(214,207,194,.35) 12px);
  color:var(--mid);font-style:italic}
.rf-fila-borrador td .badge{font-style:normal}
.rf-borrador{background:#EEF3F3;border:1px solid #DCE7E7;color:#3E5A5A}

/* Posibles duplicados: lo que la huella no puede atrapar sola (un folio escrito
   distinto) lo atrapa el humano, si se le enseña. */
.rf-dup{background:#FDF3E4;border:1px solid #FAEAD8;border-radius:5px;padding:9px 12px;
  font-size:12.5px;color:#7A5630;margin:6px 0 0}
.rf-dup ul{margin:6px 0 0;padding-left:18px}
.rf-dup li{margin:2px 0}

/* Posibles duplicados con el archivo (R17): la misma caja de aviso que el de
   la captura, con una tabla chica de pares. */
.rf-parecidos{margin:0 0 12px}
.rf-parecidos-t{margin-top:8px;background:transparent}
.rf-parecidos-t td{padding:3px 8px;border-bottom:1px solid #FAEAD8}

/* ============================================================================
   flujos_programados — lo que VA a pasar.

   Todo lleva prefijo .pg- / #pg- porque el bundle del portal es un solo IIFE y
   una sola hoja de estilos con todos los modulos concatenados.

   POR QUE SE REPITEN AQUI REGLAS QUE YA EXISTEN EN registro_flujos
   Porque las clases de otro modulo no se reusan: viven en SU module.css, y un
   cliente puede tener este modulo encendido y aquel apagado. Es la misma
   decision que ya tomo `.rf-mini` respecto de `.d-see` (Disponibilidad de
   Efectivo). Se paga con unas lineas duplicadas y se gana que el modulo se
   sostenga solo.

   LA BANDA DE CIFRAS PROYECTADAS SE QUITO POR PETICION, y con ella su rayado
   —que existia para que una proyeccion no se leyera como un saldo real. Lo que
   queda de esa idea es la columna "Fechas" de la tabla de reglas: es lo unico
   que avisa de que hay vencidas sin registrar.
============================================================================ */

/* --------------------------------- toolbar ------------------------------- */
/* Mismo color de acento que el alta de Registro de Flujos: los dos botones que
   crean dato del portal se ven igual. */
.toolbar .btn.pg-btn-alta{background:var(--accent);color:var(--white)}
.toolbar .btn.pg-btn-alta:hover{background:#E9A876}
.toolbar .btn.pg-btn-alta:disabled{opacity:.5;cursor:default}
.toolbar .btn.pg-btn-alta:disabled:hover{background:var(--accent)}
.pg-permiso{flex:1 1 auto;min-width:120px}

.pg-nota{color:var(--mid);line-height:1.5;margin:6px 0 14px;max-width:70ch}
.pg-nota b{color:var(--primary)}

/* ------------------------- la tabla de programaciones -------------------- */
/* La fila entera es la puerta al panel de fechas, asi que tiene que verse
   pinchable. El fondo al pasar por encima es la unica señal: un icono de flecha
   en cada renglon competiria con los dos botones que ya lleva la fila. */
tr.pg-fila-regla{cursor:pointer}
tr.pg-fila-regla:hover td{background:var(--soft)}
/* La que tiene el panel abierto se marca SOLO con la negrita. El fondo de color
   se quito: en una tabla ancha pintaba el renglon entero y se leia como un
   estado del dato ("esta fila tiene algo"), no como "es la que estas viendo".
   La pregunta de que programacion son las fechas de abajo ya la contesta el
   titulo del panel, que lleva su nombre. */
tr.pg-fila-regla.pg-abierta td{font-weight:500}

/* ---------------------------- el panel de fechas ------------------------- */
/* Cabecera propia con el nombre de la programacion y el boton de cerrar. Misma
   forma que el desglose de Clientes & Proveedores: el gesto se aprende una vez
   y sirve en las dos pantallas. */
#pg-fechas-wrap{margin-top:14px}
.pg-panel-cab{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:10px 14px;background:var(--bg-alt)}
.pg-panel-cab b{font-size:13px;color:var(--primary)}
.pg-panel-pie{padding:10px 14px;color:var(--mid)}
.pg-panel-pie:empty{display:none}

/* ---------------------------------- tabla -------------------------------- */
/* Boton por fila. Caja chica propia (ver el encabezado del archivo). */
.pg-mini{font:inherit;font-size:11px;padding:2px 8px;border-radius:5px;
  border:1px solid var(--primary);background:transparent;color:var(--primary);cursor:pointer}
.pg-mini:hover{background:rgba(84,77,55,.08)}
.pg-mini:disabled{opacity:.35;cursor:default}
.pg-mini:disabled:hover{background:transparent}
.pg-mini + .pg-mini{margin-left:5px}
/* El boton que lleva a capturar es el unico que produce un movimiento REAL, y
   se distingue de los que solo anotan. */
.pg-mini.pg-mini-alta{border-color:var(--warm-2);color:#8A5A2F}
.pg-mini.pg-mini-alta:hover{background:rgba(232,155,95,.12)}

/* Estados. Los mismos cuatro que calcula `reglas_programados.estado`.
   Se pintan como pastilla y no como texto suelto porque la columna se lee en
   diagonal: lo que se busca es "cuales estan vencidas". */
.pg-badge{display:inline-block;font-size:10.5px;line-height:1;padding:3px 7px;
  border-radius:999px;border:1px solid transparent;white-space:nowrap}
.pg-badge.pg-pendiente {background:#EEF2EE;border-color:#DCE5DC;color:#41603F}
.pg-badge.pg-vencida   {background:#FDF3E4;border-color:#FAEAD8;color:#7A5630}
.pg-badge.pg-cumplida  {background:#EDF1F5;border-color:#DCE4EC;color:#3F5468}
.pg-badge.pg-descartada{background:#F3F1EE;border-color:#E6E1D9;color:var(--mid)}
/* Los tres ESTATUS de una programacion (la columna Estatus de la tabla de
   arriba). Toman prestados los colores de los estados de FECHA con los que se
   corresponden, para que la pantalla hable un solo idioma de color: lo que
   corre en verde, lo que pide accion en ambar, lo que ya acabo en gris azulado.
   La clase sale del propio texto en minusculas (ver `_pgBadgeEstatus`). */
.pg-badge.pg-est-vigente   {background:#EEF2EE;border-color:#DCE5DC;color:#41603F}
.pg-badge.pg-est-vencido   {background:#FDF3E4;border-color:#FAEAD8;color:#7A5630}
.pg-badge.pg-est-registrado{background:#EDF1F5;border-color:#DCE4EC;color:#3F5468}

/* Una fecha cerrada (cumplida o descartada) ya no pide nada: se apaga entera
   para que las que si piden algo salten. */
tr.pg-cerrada td{opacity:.55}
/* Una regla apagada sigue en la tabla de abajo, pero no produce fechas. */
tr.pg-inactiva td{opacity:.5;font-style:italic}

/* ------------------------------- formulario ------------------------------ */
.pg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 16px;margin:2px 0 14px}
@media (max-width:820px){ .pg-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .pg-grid{grid-template-columns:1fr} }
.pg-grid label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--mid)}
/* El nombre del campo y su asterisco, en UN solo renglon: sin este envoltorio
   los dos son hijos de un flex en columna y el asterisco cae debajo. */
.pg-grid .pg-lbl{display:block}
.pg-grid .pg-ancho{grid-column:1 / -1}
.pg-grid input,.pg-grid select{font:inherit;font-size:13px;padding:6px 8px;color:var(--primary);
  border:1px solid var(--neutral-1);border-radius:5px;background:var(--white);width:100%}
.pg-grid input:focus,.pg-grid select:focus{border-color:var(--primary);outline:none;
  box-shadow:0 0 0 2px rgba(84,77,55,.15)}
/* El asterisco marca lo que el servidor va a exigir. Verlo antes de guardar
   ahorra el viaje de ida y vuelta. */
.pg-req{color:var(--err)}
/* La pista explica la CONSECUENCIA, no el campo: que pasa si el mes no tiene
   ese dia, que significa apagar una regla. */
.pg-pista{font-size:10.5px;line-height:1.35;color:var(--mid);opacity:.85}
.pg-grid input.pg-mal,.pg-grid select.pg-mal{
  border-color:var(--err);box-shadow:0 0 0 2px rgba(181,113,101,.15)}
/* Los montos se teclean en un campo de TEXTO (ver el comentario del view) y se
   alinean a la derecha, que es donde el ojo busca una cifra. */
#pg-f-monto,#pg-f-tc{text-align:right}
/* `width:max-content` evita el clic fantasma: una <label> es tan ancha como su
   contenedor, y pinchar en el hueco vacio del renglon marcaba la casilla. */
/* LA CASILLA Y SU TEXTO VAN EN FILA, Y HAY QUE DECIRLO CON ESTE SELECTOR.
   Todas las demas etiquetas de la tarjeta son un flex en COLUMNA —el nombre
   del campo arriba, la caja debajo—, y esa regla (`.pg-grid label`) pesa mas
   que un `.pg-check` a secas: pone `flex-direction:column` y manda, aunque
   `.pg-check` venga despues en el archivo. De ahi que el texto saliera bajo la
   casilla en vez de al lado. `.pg-grid label.pg-check` pesa mas que las dos.

   `flex-start` y no `center`: la frase ocupa una o dos lineas segun el ancho de
   la ventana, y centrada dejaba la casilla flotando a media altura en vez de al
   principio de lo que describe. El `margin-top` la baja lo justo para que
   quede a la altura de la PRIMERA linea del texto, no encima de ella. */
.pg-grid label.pg-check{display:flex;flex-direction:row;align-items:flex-start;
  gap:7px;font-size:12.5px;color:var(--primary);
  cursor:pointer;width:max-content;max-width:100%;align-self:end;padding-bottom:7px}
.pg-grid label.pg-check input{margin:0;margin-top:2px;width:auto;cursor:pointer;flex:0 0 auto}

/* --------------------------- el aviso de duplicado ----------------------- */
/* La fila entera abre la ficha del movimiento. Mismo gesto —y misma señal— que
   la tabla de programaciones: sin el fondo al pasar por encima, nadie descubre
   que se puede pinchar. */
tr.pg-fila-dup{cursor:pointer}
tr.pg-fila-dup:hover td{background:var(--soft)}

/* Mensajes. El rojo bloquea; el otro solo informa, y la diferencia tiene que
   notarse de un vistazo. */
.pg-msg{padding:9px 12px;border-radius:5px;font-size:12.5px;line-height:1.45;margin:10px 0}
.pg-err{background:#F7EAE7;border:1px solid #F0D9D2;color:#7A3C30}
.pg-info{background:#EEF2F6;border:1px solid #DDE5EC;color:#3F5468}

/* La pregunta de una confirmacion no es el titulo de una ficha: dice una sola
   frase corta y no tiene que gritarla. Los 22 px de `.info-card h2` estaban
   pensados para encabezar una tarjeta llena de datos. */
.info-card h2.pg-pregunta{font-size:16px;font-weight:600;margin:2px 0 12px}
/* Rellena, para que se distinga sin gritar. */
.pg-acciones .btn.pg-btn-peligro{background:#C7948B;border:0;color:var(--white)}
.pg-acciones .btn.pg-btn-peligro:hover{background:#B98277}

.pg-acciones{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.pg-acciones .btn{background:var(--primary);color:#fff;border:0;padding:8px 18px;border-radius:6px;
  cursor:pointer;font:inherit;font-weight:500}
.pg-acciones .btn.sec{background:transparent;border:1px solid var(--primary);color:var(--primary)}
.pg-acciones .btn:disabled{opacity:.5;cursor:default}
/* La pregunta de Cancelar ocupa el renglon de los botones: la frase a la
   izquierda, No y Si a la derecha, donde ya estaba el dedo. */
.pg-descartar{align-items:center}
.pg-descartar-txt{margin-right:auto;font-size:13px;font-weight:500;color:#7A3C30}
/* Lo obligatorio que falta, marcado en su campo. Igual que `.rf-mal`, pero
   propio: este modulo puede estar encendido sin Registro de Flujos. */
.pg-grid input.pg-mal,
.pg-grid select.pg-mal{border-color:var(--err);box-shadow:0 0 0 2px rgba(181,113,101,.15)}
/* Una programacion a medio llenar: arriba en la tabla, rayada, igual que las
   capturas sin terminar de Registro de Flujos. No es una regla: no genera
   fechas ni entra en ninguna cifra. */
tr.pg-fila-borrador td{background:repeating-linear-gradient(45deg,
    var(--soft), var(--soft) 6px, rgba(214,207,194,.35) 6px, rgba(214,207,194,.35) 12px);
  color:var(--mid);font-style:italic}
tr.pg-fila-borrador td .badge{font-style:normal}