/* Panel · listados: Cuentas, toolbar, modales, columnas, filtros, cajón de detalle.
   Partido de styles.css el 23 oct 2026 (#0867, sin cambiar reglas). Se carga después de styles.css. */
/* ======================================================================== */
/* === Vista Cuentas / Clientes (dashboard, converge al CRM) ============== */
/* ======================================================================== */

/* --- page head con engranaje --- */
.page-title__row{display:flex;align-items:center;gap:10px}
.cards-gear{width:32px;height:32px;border-radius:8px;border:1px solid var(--line);
  background:#fff;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:color .12s,border-color .12s}
.cards-gear:hover{color:var(--teal-2);border-color:var(--teal-2)}

/* --- tarjetas KPI filtrables --- */
.summ{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:16px}
/* 22 oct 2026: en escritorio todas las tarjetas visibles en UNA línea (eran 4 columnas
   y la quinta caía sola abajo). Una columna por tarjeta visible: las ocultas con el
   engranaje (display:none) no ocupan sitio y el `order` del arrastre se respeta. */
@media (min-width:980px){.summ{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:16px}
  /* Con cinco por línea, a ~1000 px «$2,558.80» tocaba el borde: la cifra baja hasta 20px y vuelve a 26px en pantalla ancha. */
  .summ .scard__v{font-size:clamp(20px,1.85vw,26px)}}
.scard{position:relative;text-align:left;background:var(--card);border:1px solid var(--line);
  border-radius:8px;padding:14px 16px;min-height:96px;color:var(--ink);cursor:pointer;
  transition:box-shadow .15s,border-color .12s}
.scard:hover{box-shadow:var(--shadow);border-color:#CBD5E1}
.scard.is-active{border-color:var(--teal);box-shadow:0 0 0 3px var(--side-active)}
.scard__l{font-size:11px;letter-spacing:1.1px;color:var(--muted);font-weight:700;text-transform:uppercase}
.scard__v{font-size:26px;font-weight:700;color:var(--ink);line-height:1.1;margin:6px 0 2px}
.scard__v--money{color:var(--green-2)}
.scard__s{font-size:12px;color:var(--muted)}
.scard .filter-ic{position:absolute;top:12px;right:12px;color:var(--line);transition:color .12s}
.scard:hover .filter-ic,.scard.is-active .filter-ic{color:var(--teal)}

/* --- toolbar --- */
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 12px}
/* Formulario GET con selects: la lupa ocupa el ancho sobrante y los filtros
   secundarios quedan a su derecha. .toolbar__end empuja la acción al extremo,
   que es lo que antes daba el space-between de .filters. */
.toolbar__form{display:flex;gap:8px;align-items:center;flex:1;flex-wrap:wrap;min-width:0}
.toolbar__end{margin-left:auto}
.toolbar__date{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;flex:0 0 auto;
  color:var(--muted);font-size:12px}
.toolbar__date input{flex:0 0 auto;width:auto}
.toolbar__daterange{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.tsearch{position:relative;display:flex;align-items:center;flex:1;min-width:240px;max-width:520px}
.tsearch svg{position:absolute;left:11px;color:var(--muted);pointer-events:none}
/* Look completo aquí: el input del dashboard no lleva type, así que los
   selectores base input[type=…] no lo alcanzan. appearance:none quita la ✕
   nativa de input[type=search] (Cuentas), que duplicaría .tsearch-clear. */
.tsearch input{width:100%;padding:9px 30px 9px 34px;border:1px solid var(--line);
  border-radius:7px;background:#fff;color:var(--ink);font:inherit;font-size:13.5px;line-height:1.4;
  -webkit-appearance:none;appearance:none}
.tsearch input::-webkit-search-cancel-button{display:none}
.tsearch input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(43,181,168,.12)}
/* .tsearch-clear es <button> en el dashboard (JS) y <a> en Cuentas (form GET). */
.tsearch-clear{position:absolute;right:8px;border:0;background:transparent;color:var(--muted);
  font-size:18px;line-height:1;width:22px;height:22px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.tsearch-clear:hover{background:#EEF2F6;color:var(--ink-2)}
.toolbar__active{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2);
  background:#EAF7F5;border:1px solid #BEE6E0;padding:5px 6px 5px 12px;border-radius:999px}
.toolbar__active[hidden]{display:none}
.toolbar__active b{color:var(--teal-3)}
.toolbar__active button,.toolbar__active a{border:0;background:transparent;color:var(--muted);font-size:16px;
  line-height:1;width:20px;height:20px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.toolbar__active button:hover,.toolbar__active a:hover{background:#fff;color:var(--red)}

/* --- tabla con scroll acotado (infinite scroll) --- */
.table-scroll{max-height:calc(100vh - 380px);min-height:220px;overflow:auto}
/* Solo dentro del contenedor con scroll; suelto, se pegaría al viewport en las
   demás páginas con .table--list (hoy lo frena el overflow:hidden de .panel). */
.table-scroll .table--list thead th{position:sticky;top:0;z-index:1}
.col-legacy{width:96px;white-space:nowrap}
.legacy-id{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
  color:var(--ink-2);background:#F1F5F9;border-radius:5px;padding:2px 7px}
/* Cobros (tareas 0279/0280): el Legacy ID abre el administrador anterior y el
   nombre abre la ficha en Cuentas. Se ven como enlaces sin cambiar de forma. */
/* Mismo enlace que la fecha de «Vence» (.cb-vence): sin la pastilla gris. */
a.legacy-link{background:none;padding:0;border-radius:0;color:var(--teal-dark);font-weight:600;
  text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}
a.legacy-link:hover,a.legacy-link:focus-visible{text-decoration-style:solid}
a.cuenta-link{color:inherit;text-decoration:none;border-bottom:1px dotted var(--teal-3)}
a.cuenta-link:hover,a.cuenta-link:focus-visible{color:var(--teal-3);border-bottom-style:solid}
.plan-pill{display:inline-block;padding:2px 9px;border-radius:999px;background:#EAF7F5;
  color:var(--teal-3);font-size:11.5px;font-weight:600;text-transform:capitalize}
.cell-strong.is-overdue{color:var(--red)}
.row-edit{color:var(--teal-2);font-weight:600}
.row-edit:hover{color:var(--teal-3);text-decoration:underline}

/* --- centinela infinite scroll --- */
.cl-sentinel{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;
  color:var(--muted);font-size:12.5px}
.cl-sentinel[data-state="idle"],.cl-sentinel[data-state="done"]{visibility:hidden;height:0;padding:0}
.cl-sentinel[data-state="loading"]{visibility:visible;height:auto;padding:14px}
.cl-sentinel-spin{width:15px;height:15px;border:2px solid var(--line);border-top-color:var(--teal);
  border-radius:50%;animation:dashspin .7s linear infinite}
@keyframes dashspin{to{transform:rotate(360deg)}}

/* --- volver al inicio del listado (lo crea infinite-list.js) ---
   Va absoluto dentro del PADRE del contenedor con scroll (.panel), no dentro
   del contenedor: ahí se iría con el contenido al desplazarse. */
.cl-top{position:absolute;right:18px;bottom:18px;z-index:3;width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;
  border:1px solid var(--line);background:#fff;color:var(--teal-3);
  box-shadow:0 6px 18px rgba(15,27,45,.16);
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .18s,transform .18s,visibility .18s,background .18s,color .18s}
.cl-top.is-on{opacity:1;visibility:visible;transform:none}
.cl-top:hover{background:var(--teal);color:#fff;border-color:var(--teal)}
.cl-top:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

/* --- modales de confirmación (.vc-) — patrón del CRM --- */
.vc-overlay{position:fixed;inset:0;background:rgba(15,27,45,.42);backdrop-filter:blur(3px);
  z-index:500;opacity:0;visibility:hidden;transition:.2s}
.vc-overlay.open{opacity:1;visibility:visible}
.vc-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-46%);width:380px;max-width:92vw;
  background:#fff;border-radius:18px;box-shadow:0 24px 60px rgba(15,27,45,.3);padding:28px 26px 22px;
  z-index:501;opacity:0;visibility:hidden;transition:.2s;text-align:center}
.vc-modal.open{opacity:1;visibility:visible;transform:translate(-50%,-50%)}
.vc-modal h3{font-size:19px;font-weight:700;margin:0 0 9px}
.vc-modal p{font-size:13.5px;color:var(--slate);line-height:1.55;margin:0 0 22px}
.vc-ic{width:58px;height:58px;border-radius:16px;background:var(--teal-soft);color:var(--teal-dark);
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.vc-ic-warn{background:var(--amber-soft);color:var(--amber)}
.vc-actions{display:flex;gap:10px}
.vc-actions button{flex:1;border-radius:12px;padding:13px;font-family:inherit;font-weight:700;
  font-size:13.5px;cursor:pointer;border:1px solid var(--line)}
.vc-stay{background:#fff;color:var(--ink)}
.vc-stay:hover{border-color:var(--slate-light)}
.vc-go{background:var(--teal);color:#fff;border-color:var(--teal)}
.vc-go:hover{background:var(--teal-dark);border-color:var(--teal-dark)}
.vc-danger{background:var(--red);color:#fff;border-color:var(--red)}
.vc-danger:hover{background:#c93a30;border-color:#c93a30}
/* Cabeceras ordenables del listado de Cuentas (cuenta, legacy id, fecha de
   registro, próximo cobro). El <th> conserva su alineación; el botón hereda la
   tipografía de la cabecera para que no se note que es un control. */
.table th.th-sort{padding:0}
.th-sort__btn{display:inline-flex;align-items:center;gap:6px;width:100%;background:none;border:0;
  padding:11px 16px;font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit;
  cursor:pointer;text-align:inherit}
.table th.num .th-sort__btn{justify-content:flex-end}
.th-sort__btn:hover{color:var(--teal-dark)}
.th-sort__ic{font-size:13px;line-height:1;opacity:.45}
/* Caja fija para la flecha (30 sep 2026): ▼ a 16 px y ↕ a 13 px no miden lo mismo,
   y la columna que deja de mandar encogía unos píxeles al ordenar por otra. */
.th-sort__ic{display:inline-block;width:14px;text-align:center}
.th-sort__btn:hover .th-sort__ic{opacity:.9}
.table th.th-sort.is-sorted .th-sort__ic{font-size:16px;opacity:1;color:var(--teal);font-weight:700}
.table th.th-sort.is-sorted{color:var(--teal-dark)}
.table th.th-sort.is-sorted .th-sort__btn{font-weight:800}
.table th.th-sort.is-sorted{background:var(--teal-light)}
.th-sort__btn{text-decoration:none}
body.is-compact .th-sort__btn{padding:6px 16px}

/* Opciones dentro del modal de confirmación (PanelConfirm `choice`), p.ej. el
   alcance de historia al encolar una migración. */
.vc-choice{display:flex;flex-direction:column;gap:8px;margin:0 0 20px;text-align:left}
.vc-choice__item{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;cursor:pointer;
  border:1px solid var(--line);border-radius:12px;background:#fff;transition:.15s}
.vc-choice__item:hover{border-color:var(--slate-light)}
.vc-choice__item:has(input:checked){border-color:var(--teal);background:var(--teal-soft)}
.vc-choice__item input{margin-top:2px;accent-color:var(--teal);flex:none}
.vc-choice__item b{display:block;font-size:13.5px;font-weight:700;color:var(--ink)}
.vc-choice__item i{display:block;font-style:normal;font-size:12px;color:var(--slate);margin-top:2px}
.vc-date{display:flex;flex-direction:column;gap:6px;margin:0 0 20px;text-align:left}
.vc-date[hidden]{display:none}
.vc-date span{font-size:12px;font-weight:600;color:var(--slate)}
.vc-date input{font:inherit;font-size:15px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;color:var(--ink)}
.vc-date input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-soft)}
/* Campos de texto del modal (PanelConfirm `fields`): misma pinta que la fecha. */
.vc-fields{display:flex;flex-direction:column;gap:12px;margin:0 0 20px;text-align:left}
.vc-fields[hidden]{display:none}
.vc-fields label{display:flex;flex-direction:column;gap:6px;margin:0}
.vc-fields span{font-size:12px;font-weight:600;color:var(--slate)}
.vc-fields input,.vc-fields textarea{font:inherit;font-size:15px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;color:var(--ink)}
.vc-fields textarea{resize:vertical;min-height:110px;line-height:1.45}
.vc-fields input:focus,.vc-fields textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-soft)}
/* Fecha de vencimiento como enlace (Cobros). Gris sin «Gestionar»: sigue a la
   vista y al tocarla explica por qué (estándar de interfaz §1). */
/* Fila recién cambiada desde el modal de fecha (9 oct 2026): se repinta sola
   y se marca un momento para que se vea cuál cambió. */
.table tr.cb-recien td{background:var(--teal-light);transition:background .6s ease}
.cb-vence{border:0;background:none;padding:0;font:inherit;color:var(--teal-dark);font-weight:600;
  cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}
.cb-vence:hover{text-decoration-style:solid}
.cb-vence--off,.cb-vence--off:hover{color:var(--muted);font-weight:400;text-decoration:none}
/* Selección de cobros con interruptor (no casilla). En la celda el <label> es
   inline y se quedaría sin caja: se le da la suya. */
.cb-pick{width:1%;text-align:center}
.cb-pick .col-sw{display:inline-block;vertical-align:middle;margin:0}
/* Total de lo seleccionado, en el pie bajo los interruptores (22 oct 2026). */
.table tfoot td.cb-sel-tot{white-space:nowrap;color:var(--teal-dark);text-align:center}
.cb-sel-tot .cell-sub{display:block;font-weight:500}
/* En Cobros el pie lleva los dos totales: «volver arriba» se coloca encima del pie. */
#cbScroll ~ .cl-top{bottom:86px}

/* --- Columnas / Ajustes de vista (.cols-) — modal centrado del CRM --- */
.cols-overlay{position:fixed;inset:0;background:rgba(15,27,45,.42);backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;transition:.2s;z-index:90}
.cols-overlay.open{opacity:1;visibility:visible}
.cols-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-46%);width:360px;max-width:92vw;
  max-height:84vh;background:#fff;border-radius:16px;box-shadow:0 24px 60px rgba(15,27,45,.3);
  z-index:91;opacity:0;visibility:hidden;transition:.2s;display:flex;flex-direction:column;overflow:hidden}
.cols-panel.open{opacity:1;visibility:visible;transform:translate(-50%,-50%)}
.cols-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 6px}
.cols-head b{font-size:16px;font-weight:700}
.cols-x{width:30px;height:30px;border:none;background:#f1f5f8;border-radius:9px;font-size:18px;
  color:var(--slate);cursor:pointer;line-height:1}
.cols-x:hover{background:#e7edf2}
.cols-hint{font-size:12.5px;color:var(--slate);padding:0 20px 12px;margin:0}
.cfg-section{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--slate-light);padding:14px 6px 2px}
.cfg-section:first-child{padding-top:4px}
.cfg-sub{font-size:12px;color:var(--slate);padding:0 6px 10px;line-height:1.45;margin:0}
.cols-list{flex:1;overflow-y:auto;padding:0 14px 6px}
.col-item{display:flex;align-items:center;gap:10px;padding:11px 10px;border:1px solid var(--line);
  border-radius:11px;margin-bottom:8px;background:#fff;transition:border-color .12s,background .12s}
.col-item:hover{border-color:var(--slate-light)}
.col-item.dragging{opacity:.5;border-style:dashed}
.col-item.over{border-color:var(--teal);background:var(--teal-soft)}
.col-item.col-fixed{background:#f9fbfc}
.col-grip{color:var(--slate-light);display:flex;flex-shrink:0;cursor:grab;touch-action:none;padding:4px;margin:-4px}
.col-grip:active{cursor:grabbing}
.col-grip svg{width:16px;height:16px}
.col-item.col-fixed .col-grip{opacity:.3;cursor:default;touch-action:auto}
.col-name{flex:1;font-size:13.5px;font-weight:600}
.col-lock{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--slate-light);background:#eef2f5;padding:2px 7px;border-radius:6px}
.col-sw{position:relative;width:38px;height:22px;flex-shrink:0}
.col-sw input{opacity:0;width:0;height:0;position:absolute}
.col-track{position:absolute;inset:0;background:#cbd5e1;border-radius:20px;transition:.18s;cursor:pointer}
.col-track::before{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;
  background:#fff;border-radius:50%;transition:.18s}
.col-sw input:checked + .col-track{background:var(--teal)}
.col-sw input:checked + .col-track::before{transform:translateX(16px)}
.col-sw input:disabled + .col-track{opacity:.5;cursor:not-allowed}
/* Aviso «los anchos están puestos a mano»: sale solo si el usuario arrastró
   algún borde de cabecera, y los suelta sin tocar el orden ni las columnas
   escondidas (eso es lo que hace «Restablecer»). */
.cols-hint--fit{padding-top:10px;margin-top:auto;border-top:1px solid var(--line)}
.cols-fit{background:none;border:0;padding:0;font:inherit;font-weight:700;
  color:var(--teal-dark);cursor:pointer;text-decoration:underline}
.cols-fit:hover{color:var(--teal)}
.cols-foot{display:flex;gap:10px;padding:12px 20px 18px;border-top:1px solid var(--line)}
.cols-foot button{flex:1;border-radius:11px;padding:11px;font-family:inherit;font-weight:700;
  font-size:13.5px;cursor:pointer;border:1px solid var(--line)}
.cols-reset{background:#fff;color:var(--ink)}
.cols-reset:hover{border-color:var(--slate-light)}
.cols-done{background:var(--teal);color:#fff;border-color:var(--teal)}
.cols-done:hover{background:var(--teal-dark)}

/* Orden por varias columnas (11 oct 2026, includes/cols_widget.php
   panel_sort_modal): modal «Ordenar» con tres niveles, y en la cabecera el
   número de nivel junto a la flecha. */
.sort-panel{width:440px}
.sort-panel form{display:flex;flex-direction:column;min-height:0}
.sort-niveles{padding:0 20px 8px;display:flex;flex-direction:column;gap:10px}
.sort-nivel{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid var(--line);border-radius:11px}
.sort-nivel.is-off{opacity:.45}
.sort-nivel__n{flex-shrink:0;width:24px;height:24px;border-radius:50%;background:var(--teal);color:#fff;
  font-size:12.5px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:2px}
.sort-nivel.is-off .sort-nivel__n{background:var(--slate-light)}
.sort-nivel__campos{flex:1;display:grid;grid-template-columns:1fr 172px;gap:6px 8px}
.sort-nivel__rot{grid-column:1/-1;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--slate)}
.sort-nivel .sort-sel{width:100%;max-width:none;min-width:0}
.sort-aviso{grid-column:1/-1;margin:2px 0 0;padding:8px 10px;border-radius:9px;background:#fff7e6;
  border:1px solid #f5d9a6;color:#8a5a00;font-size:12px;line-height:1.45}
.sort-aviso--info{background:var(--teal-soft);border-color:#bfe8e2;color:var(--teal-dark)}
@media (max-width:520px){.sort-nivel__campos{grid-template-columns:1fr}}
.cols-foot a.sort-reset{flex:1;border-radius:11px;padding:11px;font-weight:700;font-size:13.5px;
  border:1px solid var(--line);text-align:center;text-decoration:none}
.fbtn.fbtn--on{border-color:var(--teal);color:var(--teal-dark);background:var(--teal-soft)}
.th-sort__n{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;
  padding:0 4px;border-radius:9px;background:var(--teal);color:#fff;font-size:10.5px;font-weight:800;line-height:1}
.table th.th-sort.is-sorted-n .th-sort__ic{font-size:14px;opacity:.9;color:var(--teal)}
.table th.th-sort.is-sorted-n{color:var(--teal-dark)}
.table th.th-sort.is-sorted-n .th-sort__btn{font-weight:700}

/* botón de toolbar (abre "Columnas"), como .fbtn del CRM */
.fbtn{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);
  color:var(--ink);font-size:13px;font-weight:600;padding:9px 13px;border-radius:10px;cursor:pointer}
.fbtn:hover{border-color:var(--slate-light)}
.fbtn svg{flex-shrink:0}

/* --- Filtros de toolbar: dropdown propio (.fdrop) + select restyleado (.fsel),
   portados del CRM (clients.css). Ambos recargan con el filtro puesto. --- */
.fdrop{position:relative}
/* Cobros: Desde/Hasta del filtro de fecha «Personalizado» (tabs_cobros.php). */
.cb-rango{display:inline-flex;align-items:center;gap:8px}
.cb-rango label{display:inline-flex;align-items:center;gap:6px;margin:0;white-space:nowrap}
.cb-rango input[type=date]{width:auto;padding:7px 10px}
.fdrop-btn{gap:8px}
.fdrop-btn.active{border-color:var(--teal);color:var(--teal-dark);background:var(--teal-soft)}
.fdrop-label{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fdrop-caret{width:14px;height:14px;transition:transform .18s}
.fdrop.open .fdrop-caret{transform:rotate(180deg)}
.fdrop-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:170px;max-height:320px;overflow-y:auto;
  background:#fff;border:1px solid var(--line);border-radius:11px;box-shadow:0 8px 24px rgba(15,27,45,.12);
  padding:5px;z-index:60;opacity:0;visibility:hidden;transform:translateY(-4px);transition:.15s}
.fdrop.open .fdrop-menu{opacity:1;visibility:visible;transform:translateY(0)}
.fdrop-opt{padding:9px 12px;border-radius:8px;font-size:13px;font-weight:500;color:var(--ink);cursor:pointer;
  white-space:nowrap}
.fdrop-opt:hover{background:#f1f5f8}
/* Buscador de las listas largas (22 oct 2026). */
.fdrop-menu:has(.fdrop-q){min-width:280px;max-width:min(620px,calc(100vw - 32px));max-height:420px}
.fdrop-menu:has(.fdrop-q) .fdrop-opt{overflow:hidden;text-overflow:ellipsis}
.fdrop-q{position:sticky;top:-5px;z-index:1;display:block;width:100%;box-sizing:border-box;margin:-5px 0 5px;
  padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:#fff;font:inherit;font-size:13px;color:var(--ink)}
.fdrop-q:focus{outline:none;border-color:var(--teal)}
.fdrop-vacio{padding:9px 12px;font-size:13px;color:var(--muted)}
.fdrop-opt[hidden],.fdrop-grp[hidden]{display:none}
/* Una caja que recorta (overflow:hidden) no debe cortar el desplegable abierto. */
.panel:has(.fdrop.open){overflow:visible}
.fdrop-opt.sel{background:var(--teal-soft);color:var(--teal-dark);font-weight:600}
.fdrop-grp{padding:9px 12px 4px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted,#64748b);cursor:default}
.fdrop-grp:not(:first-child){margin-top:4px;border-top:1px solid var(--line)}
.fdrop-grp ~ .fdrop-opt{padding-left:20px}
/* select nativo con la misma pinta que .fbtn (filtros de entidad grandes) */
.fsel,.sort-sel{background:#fff;border:1px solid var(--line);color:var(--ink);font:inherit;font-size:13px;
  font-weight:600;padding:9px 30px 9px 13px;border-radius:10px;cursor:pointer;max-width:220px;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center}
.fsel:hover,.sort-sel:hover{border-color:var(--slate-light)}
.fsel:focus,.sort-sel:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(43,181,168,.12)}
.fsel.active{border-color:var(--teal);color:var(--teal-dark);background-color:var(--teal-soft)}

/* --- Densidad de fila (Ajustes de vista → engranaje). Preferencia global:
   el <body> lleva `is-compact` cuando está activa (pintado por el server). --- */
body.is-compact .table th,body.is-compact .table td{padding:6px 16px}
body.is-compact .table{font-size:13px}
body.is-compact .table--mini td{padding:6px 10px}

/* --- botón "Ir al CRM" (columna CRM en dashboard y cuentas) --- */
.crm-form{display:inline;margin:0}
.crm-btn{display:inline-flex;align-items:center;gap:6px;background:var(--teal-soft);color:var(--teal-dark);
  border:1px solid transparent;font:inherit;font-size:12.5px;font-weight:600;padding:6px 11px;border-radius:8px;
  cursor:pointer;white-space:nowrap;line-height:1}
.crm-btn:hover{background:var(--teal);color:#fff}
.crm-btn svg{flex-shrink:0}
/* Plan sin versión web (`plans.is_public = 0`): el CRM manda esa sesión a
   /plan-required, así que el botón se apaga y avisa antes de abrir la pestaña.
   Sigue pulsable a propósito — soporte a veces quiere entrar igual. */
.crm-btn.is-noweb{background:transparent;color:var(--slate);border-color:var(--line)}
.crm-btn.is-noweb:hover{background:var(--line);color:var(--ink)}
/* Cobros · Tarjeta (22 oct 2026): su último pago entró por fuera (PayPal,
   Zelle…). Va ENCIMA de la tarjeta para verlo antes de cobrar. */
.cb-pago-fuera{display:inline-block;margin-bottom:4px;padding:2px 8px;border-radius:6px;
  background:#FEF6E7;color:#92670C;font-size:11.5px;font-weight:600;white-space:nowrap;cursor:help;line-height:1.35}
.cb-pago-fuera span{display:block;font-size:10.5px;font-weight:500}
/* «Estado» frente al SelBuk anterior en Cobros (22 oct 2026): botón .crm-btn bajo
   el email; el punto conserva el color del estado (.status--ok/off/warn). */
.cb-email-acc{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.cb-dias-acc{display:flex;justify-content:flex-end;margin-top:6px}
.cb-cobra__dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;padding:0}
.cb-cobra__dot.status--ok{background:var(--green-2)}
.cb-cobra__dot.status--off{background:var(--red)}
.cb-cobra__dot.status--warn{background:#E0A526}
.crm-btn:hover .cb-cobra__dot{box-shadow:0 0 0 2px #fff}
/* Nombre de cuenta en Cobros (22 oct 2026): máximo 2 renglones con «…»; el
   nombre entero va en el title. */
.cell-nombre{min-width:12em;max-width:22em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:break-word}

/* --- drawer de detalle 360° — patrón .dr- del CRM --- */
.dr-overlay{position:fixed;inset:0;background:rgba(20,30,45,.42);backdrop-filter:blur(3px);
  z-index:40;opacity:0;visibility:hidden;transition:.25s}
.dr-overlay.open{opacity:1;visibility:visible}
.dr-drawer{position:fixed;top:0;right:0;height:100vh;width:560px;max-width:94vw;background:var(--bg);
  border-left:1px solid var(--line);transform:translateX(100%);z-index:50;display:flex;
  flex-direction:column;transition:transform .3s cubic-bezier(.4,0,.2,1)}
.dr-drawer.open{transform:translateX(0)}
.dr-head{background:linear-gradient(135deg,var(--teal),var(--teal-3));color:#fff;
  padding:22px 24px 18px;position:relative;flex-shrink:0}
.dr-top-actions{position:absolute;top:18px;right:20px;display:flex;align-items:center;gap:8px}
.dr-close{width:34px;height:34px;border-radius:10px;border:none;background:rgba(255,255,255,.18);
  color:#fff;cursor:pointer;font-size:18px;line-height:1}
.dr-close:hover{background:rgba(255,255,255,.3)}
.dr-store{display:flex;align-items:center;gap:14px;padding-right:60px}
.dr-store .ava{width:54px;height:54px;border-radius:14px;background:rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:700;flex-shrink:0}
.dr-store h2{font-size:20px;font-weight:700;letter-spacing:-.3px;line-height:1.2}
.dr-store .meta{font-size:12.5px;opacity:.9;margin-top:3px;display:flex;align-items:center;gap:8px}
.dr-store .meta .sep{opacity:.5}
.dr-tabs,.pane-tabs{display:flex;gap:4px;padding:0 24px;background:#fff;border-bottom:1px solid var(--line);flex-shrink:0}
/* Pestanas a nivel de pantalla (Analiticas, 18 sep 2026). Comparten el
   selector con las del cajon de errores en vez de repintar lo mismo de
   otra manera; solo se anade lo propio de un enlace. */
.pane-tabs{margin:0 0 4px;border-radius:12px 12px 0 0}
.pane-tab{text-decoration:none}
.dr-tab,.pane-tab{padding:14px 6px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;
  border-bottom:2px solid transparent;margin-right:18px;transition:.15s}
.dr-tab:hover,.pane-tab:hover{color:var(--ink)}
.dr-tab.active,.pane-tab.active{color:var(--teal-3);border-bottom-color:var(--teal)}
.dr-body{flex:1;overflow-y:auto;padding:20px 24px 40px}
.dr-pane{display:none}
.dr-pane.active{display:block}
.dr-foot{display:flex;gap:10px;padding:16px 24px;border-top:1px solid var(--line);
  background:#fff;flex-shrink:0}
.dr-foot button,.dr-foot a{flex:1;border:none;border-radius:11px;padding:13px;font-family:inherit;
  font-weight:700;font-size:13.5px;cursor:pointer;text-align:center}
.dr-foot .primary{background:var(--teal);color:#fff}
.dr-foot .primary:hover{background:var(--teal-2)}
.dr-foot .secondary{background:#fff;border:1px solid var(--line);color:var(--ink)}
.dr-foot .secondary:hover{border-color:var(--muted)}
/* La caja de la versión que acompaña a «Corregido · falta publicar». No crece
   como los botones: es un dato corto y fijo (1.1.2+132), y estirarla dejaría
   los botones sin sitio en el cajón. */
.dr-foot .err-fixver{flex:0 0 108px;width:108px;border:1px solid var(--line);border-radius:11px;
  padding:13px 10px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px;color:var(--ink);background:#fff}
.dr-foot .err-fixver:focus{outline:none;border-color:var(--teal)}
/* El número en la cabecera del cajón, sobre la franja teal. Chip translúcido
   en vez de color propio: la franja ya lleva el color del nivel. */
.dr-cod{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:700;
  letter-spacing:.5px;background:rgba(255,255,255,.18);padding:1px 8px;border-radius:999px}

/* El pie del bloque «Qué pasó». Tiene que leerse DISTINTO de lo que hay encima:
   arriba son datos de la fila, esta línea dice que la lectura es deducida. Si
   se pintara igual que el resto del detalle, pasaría por medición. */
.err-deduccion{margin:8px 0 2px;padding:8px 11px;border-left:3px solid var(--slate-lightest,#e3e8ee);
  background:#f7f9fa;color:var(--muted);font-size:11.5px;line-height:1.55;font-style:italic}

.dr-sec{font-size:11px;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted);
  font-weight:700;margin:20px 0 6px}
.dr-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:9px 0;
  border-bottom:1px solid var(--line);font-size:13.5px}
.dr-row span{color:var(--muted);flex-shrink:0}
.dr-row b{color:var(--ink);font-weight:600;text-align:right;word-break:break-word}
.dr-row b .cell-sub{text-align:right}
/* Edición en línea del Resumen de la cuenta (20 oct 2026, tarea #0756): el valor
   editable invita a tocarlo (fondo y lápiz al pasar el ratón); los de solo
   lectura se quedan con el cursor normal. */
.dr-row[data-row]{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:baseline}
.dr-row[data-row] > b{justify-self:end}
.dr-inl{cursor:pointer;border-radius:6px;padding:2px 6px;margin:-2px -6px;display:inline-flex;align-items:baseline;
  gap:6px;justify-content:flex-end;max-width:100%;outline:none;transition:background .12s}
.dr-inl:hover,.dr-inl:focus-visible{background:var(--teal-light)}
.dr-row .dr-inl-v{color:var(--ink);flex-shrink:1}   /* `.dr-row span` lo pintaría de gris de etiqueta */
.dr-inl-pen{opacity:0;color:var(--muted);flex-shrink:0;align-self:center;transition:opacity .12s}
.dr-inl:hover .dr-inl-pen,.dr-inl:focus-visible .dr-inl-pen{opacity:1}
.dr-inl.is-editing{cursor:default;background:none;justify-self:stretch;display:flex;width:100%;margin-right:0}
.dr-inl.is-editing .dr-inl-pen{display:none}
.dr-inl.is-editing .dr-inl-v{flex:1}
.dr-inl-in{width:100%;font:inherit;font-weight:500;color:var(--ink);background:#fff;border:1px solid var(--teal);
  border-radius:7px;padding:5px 8px;text-align:left;box-shadow:0 0 0 3px rgba(20,140,140,.12)}
.dr-inl-in:disabled{opacity:.6}
.dr-inl-sw{display:inline-flex;align-items:center;gap:10px}
.dr-inl-st{grid-column:1/-1;text-align:right;font-style:normal;font-size:11.5px;min-height:0;color:var(--muted)}
.dr-inl-st:empty{display:none}
.dr-inl-st.is-ok{color:var(--teal-dark)}
.dr-inl-st.is-err{color:#b3261e}
/* El nombre, en la cabecera de color del cajón. */
.dr-store h2.dr-inl{margin:0;max-width:none;justify-content:flex-start}
.dr-store h2.dr-inl:hover,.dr-store h2.dr-inl:focus-visible{background:rgba(255,255,255,.16)}
.dr-store h2 .dr-inl-pen{color:inherit}
.dr-store h2 .dr-inl-in{font-size:17px;font-weight:700}
.dr-store .dr-inl-st{display:block;text-align:left;color:inherit;opacity:.9}
.dr-store .dr-inl-st:empty{display:none}
.dr-store .dr-inl-st.is-err{color:#ffd6d2;opacity:1}
.dr-empty{font-size:13.5px;color:var(--muted);padding:14px 0}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.statbox{background:#fff;border:1px solid var(--line);border-radius:13px;padding:14px 16px}
/* `>` a propósito: el importe del cobro lleva su propio <span> dentro del <b>
   y no debe heredar el estilo de etiqueta (11px, mayúsculas, gris). */
.statbox > span{display:block;font-size:11px;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin-bottom:5px}
.statbox > b{font-size:19px;font-weight:700;color:var(--ink)}
.statbox .cell-sub{display:block;font-size:12px;font-weight:500;margin-top:3px}
.is-overdue{color:var(--red)}
.sub-pill{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11.5px;font-weight:700;
  text-transform:capitalize;background:#F1F5F9;color:var(--ink-2)}
.sub-active{background:rgba(32,201,125,.12);color:var(--green-2)}
.sub-expired{background:rgba(224,59,59,.1);color:var(--red)}
.sub-trial{background:rgba(60,141,255,.1);color:var(--blue)}
.owner-pill{display:inline-block;padding:1px 7px;border-radius:20px;font-size:10.5px;font-weight:700;
  background:rgba(43,181,168,.12);color:var(--teal-3);vertical-align:middle}
.table--mini{width:100%;border-collapse:collapse;font-size:13px}
.table--mini th{text-align:left;font-size:11px;letter-spacing:.6px;text-transform:uppercase;
  color:var(--muted);font-weight:700;padding:8px 10px;border-bottom:1px solid var(--line)}
.table--mini td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}

/* la tarjeta filtra el listado al hacer clic */
.scard.filterable{cursor:pointer}
/* «Nuevas» de Cuentas con su calendario (6 oct 2026). */
.scard__fecha{margin:6px 0 2px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;cursor:default}
.scard__fecha .fbtn{padding:4px 10px;font-size:12px}
.scard__fecha .cb-rango input{font-size:12px}
.cl-sentinel-txt{font-size:12.5px;color:var(--muted)}
.row-click{cursor:pointer}
.row-click:hover{background:#F8FAFC}
.row-click:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}

@media (max-width:979px){
  .table-scroll{max-height:calc(100vh - 420px)}
  .dr-drawer{width:100vw;max-width:100vw}
  .stat-grid{grid-template-columns:1fr}
}

/* ── Permisos granulares por módulo (admin_edit.php) ───────────────── */
.btn--sm{padding:5px 11px;font-size:12.5px;border-radius:7px}
.perm-matrix{border:1px solid var(--line);border-radius:8px;padding:14px 16px 6px;margin:4px 0 4px;background:var(--card)}
.perm-matrix legend{font-weight:700;color:var(--ink);padding:0 6px;font-size:14px}
.perm-hint{margin:0 0 12px;color:var(--slate);font-size:12.5px}
.perm-note{margin:2px 0 4px;color:var(--ink-2);font-size:13px;background:var(--teal-soft);
  border:1px solid var(--teal-light);border-radius:7px;padding:10px 12px}
.perm-bulk{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.perm-table{width:100%;border-collapse:collapse}
.perm-table th{font-size:11.5px;text-transform:uppercase;letter-spacing:.02em;color:var(--slate);
  font-weight:600;text-align:center;padding:6px 8px;border-bottom:1px solid var(--line)}
.perm-table th:first-child{text-align:left}
.perm-table td{padding:9px 8px;text-align:center;border-bottom:1px solid var(--line)}
.perm-table tr:last-child td{border-bottom:none}
.perm-mod{text-align:left!important}
.perm-mod span{display:block;font-weight:600;color:var(--ink);font-size:13.5px}
.perm-mod small{color:var(--slate);font-size:11px}
/* Tabla en el orden del menú (8 oct 2026): las entradas sin permiso propio
   van como fila informativa; Blog y Manual, sangrados bajo Biblioteca. */
.perm-sub .perm-mod{padding-left:26px}
.perm-info .perm-mod span{color:var(--ink-2)}
.perm-ve{text-align:left!important}
.perm-ve__txt{font-size:12px;font-weight:600;color:var(--slate);background:var(--line);border-radius:10px;padding:2px 10px}
.perm-ve__txt.is-si{color:var(--teal);background:var(--teal-soft)}
.perm-divisor td{padding:0;border-bottom:2px solid var(--line)}
.perm-radio{display:inline-flex;cursor:pointer;align-items:center;justify-content:center}
.perm-radio input{position:absolute;opacity:0;width:0;height:0}
.perm-radio span{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);
  display:inline-block;transition:border-color .12s,background .12s;position:relative}
.perm-radio:hover span{border-color:var(--teal)}
.perm-radio input:checked+span{border-color:var(--teal);background:var(--teal)}
.perm-radio input:checked+span::after{content:"";position:absolute;left:5px;top:5px;
  width:6px;height:6px;border-radius:50%;background:#fff}
.perm-radio input:focus-visible+span{box-shadow:0 0 0 3px var(--teal-light)}

/* Aviso de modo solo-lectura (permisos view sin manage) */
.readonly-note{background:#fff8e6;border:1px solid #f2e2b0;color:#8a6d1a;
  border-radius:7px;padding:10px 14px;font-size:13px;margin:0 0 14px;font-weight:500}

/* KPIs clicables como filtros — estándar del panel (includes/kpis_widget.php).
   Misma señal visual que las tarjetas del dashboard (.scard): embudo en la
   esquina, borde teal cuando el filtro está puesto. */
a.kpi{text-decoration:none;color:inherit;cursor:pointer;display:block}
.kpi.is-active{border-color:var(--teal);box-shadow:0 0 0 3px var(--side-active)}
.kpi--filter{padding-right:34px}
.kpi--filter:hover{border-color:#CBD5E1}
.kpi .filter-ic{position:absolute;top:12px;right:12px;color:var(--line);transition:color .12s;
  display:inline-flex;pointer-events:none}
.kpi--filter:hover .filter-ic,.kpi--filter.is-active .filter-ic{color:var(--teal)}

/* Buscador dinámico (24 oct 2026, infinite-list.js): la lupa gira mientras busca. */
.tsearch.is-buscando > svg{animation:dashspin .8s linear infinite;color:var(--teal)}