/* ============================================================================================================
   TEMA DEL PANEL (Wificor). UNA sola fuente de verdad para color y forma.
   - El ACENTO y el diseño del menu (--wf-accent, --wf-nav) los elige cada persona en "Ajustes de la aplicacion"; el servidor los escribe en <html style> (Libraries/Ui/UiTheme.php), sin parpadeo.
     Lo que hay aqui en :root son los valores por defecto (el CLASICO de siempre: carbon + turquesa) para las paginas sin sesion (login, errores).
   - El CSS base de la plantilla (app.min.css) y wificor.css YA leen estas variables (deploy/theme_tokens_codemod.php): no hay un bloque de "overrides" encima.
   - Los colores con significado (verde = pagado, rojo = vencido, ambar = pendiente, celeste = informativo) NO usan el acento.
   Orden: 1) variables  1b) modo oscuro  2) menu lateral  3) degradado y cabecera invertida  4) panel de ajustes (engranaje)  5) encabezado
   ============================================================================================================ */

/* ---- 1. variables ---- */
:root{
  /* marca */
  --wf-accent:#00ACAC;
  --wf-on-accent:#ffffff;
  --wf-nav:#2D353C;   /* el carbon ORIGINAL del menu lateral (diseño Clasico, el de por defecto) */
  /* derivadas (se calculan del color elegido: ningun tono escrito a mano) */
  --wf-accent-hover:color-mix(in srgb,var(--wf-accent) 80%,#000);
  --wf-accent-active:color-mix(in srgb,var(--wf-accent) 64%,#000);
  --wf-accent-focus:color-mix(in srgb,var(--wf-accent) 45%,transparent);
  --wf-nav-2:color-mix(in srgb,var(--wf-nav) 80%,#000);
  --wf-nav-3:color-mix(in srgb,var(--wf-nav) 58%,#000);
  --wf-nav-hover:color-mix(in srgb,#fff 16%,transparent);   /* brillo al apuntar una fila del menu: se enciende y se apaga con una transicion suave */
  /* superficies neutras: fondo de la pagina, tarjetas, textos y bordes (el CSS base las lee; el modo oscuro solo cambia estos valores) */
  --wf-page:#d9e0e7;
  --wf-header-h:56px;
  --wf-surface:#ffffff;
  --wf-surface-2:#f2f3f4;
  --wf-text:#2d353c;
  --wf-text-2:#4e5c68;
  --wf-muted:#6f8293;
  --wf-border:#d5dbe0;
  --wf-border-2:#e4e7ea;
  --wf-overlay:rgba(255,255,255,.72);   /* velo de "cargando" sobre una tarjeta */
  color-scheme:light;
  /* forma: esquinas y sombras */
  --wf-r:10px;
  --wf-r-m:8px;
  --wf-r-s:6px;
  --wf-r-xs:4px;   /* compacto: botones, pestañas y etiquetas de los paneles */
  /* estado (los mismos solidos del tema Color Admin): para etiquetas y avisos */
  --wf-ok:#32A932;
  --wf-warn:#F49C1A;
  --wf-bad:#FF5B57;
  --wf-info:#0D84EF;
  --wf-sh:0 1px 2px rgba(16,24,40,.05),0 6px 18px rgba(16,24,40,.08);
}

/* ---- 1b. modo oscuro corporativo: los valores del modo oscuro de la plantilla (azul-gris, no negro). Solo cambian las variables de superficie; ningun componente se toca ---- */
html.wf-dark{
  --wf-page:#161A1E;
  --wf-surface:#2D353D;
  --wf-surface-2:#262E35;
  --wf-text:#E4E8EC;
  --wf-text-2:#C3CBD2;
  --wf-muted:#9AA5AF;
  --wf-border:#46515B;
  --wf-border-2:#3A444D;
  --wf-overlay:rgba(22,26,30,.72);
  --wf-sh:0 1px 2px rgba(0,0,0,.25),0 6px 18px rgba(0,0,0,.28);
  color-scheme:dark;
}
html.wf-dark #mainlogo{filter:brightness(0) invert(1)}

/* ---- 2. menu lateral: su color, densidad y brillo ya los leen/definen las reglas del CSS base (deploy/theme_tokens_codemod.php); aqui solo el menu reducido ---- */
.sidebar .nav>li>a i{transition:color .18s ease}
.sidebar .nav>li>a:hover i{color:var(--wf-accent)}
.sidebar .sub-menu>li>a{transition:color .18s ease}
.page-sidebar-minified .sidebar .nav>li>a{margin:0;border-radius:0}

/* ---- 3. degradado (solo botones) y cabecera invertida (interruptores de "Ajustes de la aplicacion") ---- */
html.wf-grad .btn-success,html.wf-grad .wf-look .wf-btn.is-primary{background-image:linear-gradient(135deg,var(--wf-accent),color-mix(in srgb,var(--wf-accent) 60%,#000))}
html.wf-hdinv #mainlogo{filter:brightness(0) invert(1)}

/* ---- 4. panel de ajustes (engranaje del borde derecho; solo dentro del panel, nunca en el login) ---- */
.wf-gear{position:fixed;right:0;top:calc(50% - 19px);z-index:1040;display:flex;align-items:center;justify-content:center;width:34px;height:38px;padding:0;border:0;background:var(--wf-surface);color:var(--wf-text-2);border-radius:var(--wf-r-m) 0 0 var(--wf-r-m);box-shadow:-2px 2px 10px rgba(10,16,28,.16);cursor:pointer}
.wf-gear:hover{color:var(--wf-accent)}
.wf-gear i{font-size:15px}
.wf-look{position:fixed;top:0;right:0;bottom:0;z-index:1060;width:310px;max-width:100%;background:var(--wf-surface);color:var(--wf-text);box-shadow:-8px 0 28px rgba(10,16,28,.28);overflow-y:auto;padding:16px 16px 20px;font-size:13px;transform:translateX(105%);transition:transform .2s ease;visibility:hidden}
.wf-look.is-open{transform:none;visibility:visible}
.wf-look-scrim{position:fixed;inset:0;z-index:1050;background:rgba(10,16,28,.4);display:none}
.wf-look-scrim.is-open{display:block}
.wf-look-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.wf-look-head h4{margin:0;font-size:16px;font-weight:600}
.wf-look-close{width:28px;height:28px;border:0;background:var(--wf-surface-2);border-radius:var(--wf-r-s);color:var(--wf-text-2);font-size:12px;cursor:pointer}
.wf-look h5{margin:0 0 8px;font-size:13px;font-weight:600}
.wf-look-sec{margin-bottom:16px}
.wf-swatches{display:flex;flex-wrap:wrap;gap:8px}
.wf-swatch{position:relative;width:30px;height:30px;flex:none;border:0;padding:0;border-radius:var(--wf-r-s);cursor:pointer;outline:0}
.wf-swatch.is-on::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/52% no-repeat}
.wf-swatch:focus-visible{box-shadow:0 0 0 3px var(--wf-accent-focus)}
.wf-look-group{background:var(--wf-surface-2);border-radius:var(--wf-r-m);padding:0 12px}
.wf-look-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid var(--wf-border-2)}
.wf-look-row:first-child{border-top:0}
.wf-look-row b{font-size:12.5px;font-weight:500}
.wf-look-row small{display:block;margin-top:1px;font-size:11px;line-height:1.3;color:var(--wf-muted);font-weight:400}
.wf-look-row.is-off{opacity:.55}
.wf-switch{position:relative;flex:none;width:34px;height:19px;padding:0;border:0;border-radius:10px;background:var(--wf-border);cursor:pointer;transition:background .15s}
.wf-switch::after{content:"";position:absolute;left:2px;top:2px;width:15px;height:15px;border-radius:50%;background:#fff;transition:left .15s}
.wf-switch[aria-pressed="true"]{background:var(--wf-accent)}
.wf-switch[aria-pressed="true"]::after{left:17px}
.wf-switch:disabled{cursor:not-allowed}
.wf-designs{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.wf-design{position:relative;display:block;padding:0;border:2px solid transparent;border-radius:var(--wf-r-m);overflow:hidden;background:#10151a;color:#fff;cursor:pointer;text-align:center}
.wf-design.is-on{border-color:var(--wf-accent)}
.wf-design .mini{display:flex;height:52px}
.wf-design .mini i{display:block;width:26%}
.wf-design .mini u{display:block;flex:1;background:#dfe4e9;padding:5px;text-decoration:none}
.wf-design .mini u::before{content:"";display:block;height:6px;background:#fff;margin-bottom:4px}
.wf-design .mini u::after{content:"";display:block;height:18px;background:var(--wf-accent);opacity:.9}
.wf-design b{display:block;padding:4px;font-size:10px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;background:#10151a}
.wf-design.is-on::before{content:"\2713";position:absolute;left:3px;top:3px;z-index:2;width:16px;height:16px;line-height:16px;border-radius:5px;background:var(--wf-accent);color:var(--wf-on-accent);font-size:10px;font-weight:700}
.wf-look-foot{display:flex;gap:8px}
.wf-btn{flex:1;height:34px;border:0;border-radius:var(--wf-r-s);background:var(--wf-surface-2);color:var(--wf-text);font-weight:600;font-size:12.5px;cursor:pointer}
.wf-btn.is-primary{background:var(--wf-accent);color:var(--wf-on-accent)}
@media(max-width:575.98px){.wf-gear{top:auto;bottom:88px}}
/* ---- 5. encabezado: UNA fila en todos los anchos (menu · logo · Nuevo · Caja · Pendientes · Ver pagina · usuario) ---- */
.header.wf-header{display:flex;align-items:center;min-height:var(--wf-header-h);padding:0 8px 0 0}
.header.wf-header .navbar-header{display:flex;align-items:center;width:auto;flex:0 1 auto;min-width:0}
.header.wf-header .navbar-brand{flex:0 1 auto;height:56px;padding:0 12px}
.header.wf-header #mainlogo{width:auto;max-width:150px;max-height:32px}
.header.wf-header .navbar-toggle{order:-1;margin:0 0 0 4px}
.header.wf-header .navbar-nav{flex:1;align-items:center;justify-content:flex-end;gap:2px;padding:0;border-top:0}
.header.wf-header .navbar-nav>li>a.wf-hbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;min-width:40px;padding:0 10px;line-height:1;border-radius:var(--wf-r-s);color:var(--wf-text-2);font-size:13px;font-weight:600;transition:background-color .18s ease,color .18s ease}
.header.wf-header .navbar-nav>li>a.wf-hbtn:hover,.header.wf-header .navbar-nav>li.show>a.wf-hbtn{background:var(--wf-surface-2);color:var(--wf-accent)}
.header.wf-header .navbar-nav>li>a.wf-hbtn i{font-size:17px}
.header.wf-header .dropdown-toggle.wf-hbtn::after{display:none}
.header.wf-header .navbar-toggle .icon-bar{background:var(--wf-text-2)}
.header.wf-header.navbar-inverse .navbar-nav>li>a.wf-hbtn,.header.wf-header.navbar-inverse .navbar-nav>li>a.wf-huser{color:rgba(255,255,255,.88)}
.header.wf-header.navbar-inverse .navbar-nav>li>a.wf-hbtn:hover,.header.wf-header.navbar-inverse .navbar-nav>li.show>a.wf-hbtn,.header.wf-header.navbar-inverse .navbar-nav>li>a.wf-huser:hover{background:rgba(255,255,255,.12);color:#fff}
.header.wf-header.navbar-inverse .navbar-toggle .icon-bar{background:#fff}
.header.wf-header.navbar-inverse .wf-huser-name small{color:rgba(255,255,255,.7)}
.wf-hlabel{display:none}
.header.wf-header .navbar-nav>li>a.wf-huser{display:flex;align-items:center;gap:8px;height:40px;padding:0 4px 0 6px;line-height:1;border-radius:var(--wf-r-s);color:var(--wf-text)}
.header.wf-header .navbar-nav>li>a.wf-huser:hover{background:var(--wf-surface-2)}
.header.wf-header .navbar-user img{float:none;width:32px;height:32px;margin:0;object-fit:cover}
.wf-huser-name{display:none;flex-direction:column;text-align:left;font-size:12.5px;font-weight:600;line-height:1.15}
.wf-huser-name small{font-size:11px;font-weight:400;color:var(--wf-muted)}
.header .wf-badge{position:absolute;top:2px;right:0;min-width:16px;height:16px;padding:0 4px;background:#ff5b57;color:#fff;font-size:10px;font-weight:700;line-height:16px;text-align:center;border-radius:9px;pointer-events:none}
.header .wf-badge--pulse{animation:wfBadgePulse 1.8s ease-out infinite}
@keyframes wfBadgePulse{0%{box-shadow:0 0 0 0 rgba(255,91,87,.55)}70%{box-shadow:0 0 0 7px rgba(255,91,87,0)}100%{box-shadow:0 0 0 0 rgba(255,91,87,0)}}
.wf-hbtn .wf-cash-dot{position:absolute;top:7px;right:7px;width:9px;height:9px;border-radius:50%;background:var(--wf-accent);border:2px solid var(--wf-surface)}
.wf-hbtn .wf-cash-dot[hidden]{display:none}
.wf-only-xs{display:none}
/* Pendientes: UN panel con pestañas. Compacto como el resto del panel (Color Admin): esquinas de 4 px, todo solido; la lista se adapta a la altura de la pantalla y su barra es fina. */
.wf-pend{width:440px;max-width:calc(100vw - 16px);padding:0;overflow:hidden}
.wf-pend-head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--wf-border-2)}
.wf-pend-head b{font-size:14px}
.wf-pend-head span{font-size:12px;color:var(--wf-muted)}
.wf-pend-live{display:inline-flex;align-items:center;gap:6px}
.wf-pend-live i{width:7px;height:7px;border-radius:50%;background:var(--wf-ok)}
.wf-pend-chipsbox{position:relative;border-bottom:1px solid var(--wf-border-2)}
.wf-pend-chips{display:flex;gap:5px;padding:8px 10px;overflow-x:auto;scrollbar-width:none}
.wf-pend-chips::-webkit-scrollbar{display:none}
.wf-chip{flex:none;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px;border:0;border-radius:var(--wf-r-xs);background:var(--wf-surface-2);color:var(--wf-text-2);font-size:11.5px;font-weight:600;cursor:pointer;transition:background-color .15s ease,color .15s ease}
.wf-chip:hover{color:var(--wf-text)}
.wf-chip em{min-width:18px;padding:0 5px;border-radius:3px;background:var(--wf-surface);font-style:normal;font-size:10.5px;text-align:center}
.wf-chip.is-on{background:var(--wf-accent);color:var(--wf-on-accent)}
.wf-chip.is-on em{background:var(--wf-surface);color:var(--wf-accent)}
.wf-chip.is-new{animation:wfNew 1.2s ease 2}
@keyframes wfNew{0%,100%{background:var(--wf-surface-2)}50%{background:var(--wf-warn);color:#fff}}
.wf-pend-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;display:grid;place-items:center;width:22px;height:22px;padding:0;border:1px solid var(--wf-border);border-radius:var(--wf-r-xs);background:var(--wf-surface);color:var(--wf-text-2);font-size:9px;cursor:pointer}
.wf-pend-arrow:hover{border-color:var(--wf-accent);color:var(--wf-accent)}
.wf-pend-arrow.l{left:3px}
.wf-pend-arrow.r{right:3px}
.wf-pend-search{position:relative;padding:7px 10px;border-bottom:1px solid var(--wf-border-2)}
.wf-pend-search i{position:absolute;left:21px;top:50%;transform:translateY(-50%);font-size:11px;color:var(--wf-muted);pointer-events:none}
.wf-pend-search input{width:100%;height:30px;padding:0 10px 0 28px;border:1px solid var(--wf-border);border-radius:var(--wf-r-xs);background:var(--wf-surface-2);color:var(--wf-text);font-size:12px;outline:0}
.wf-pend-search input:focus{border-color:var(--wf-accent);background:var(--wf-surface)}
.wf-pend-list{list-style:none;margin:0;padding:0;max-height:min(520px,calc(100vh - 220px));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--wf-border) transparent}
.wf-pend-list::-webkit-scrollbar{width:8px}
.wf-pend-list::-webkit-scrollbar-thumb{background:var(--wf-border);border-radius:var(--wf-r-xs)}
.wf-pend-list::-webkit-scrollbar-track{background:transparent}
.wf-pend-list>li{margin:0;padding:0 6px}
.wf-pend-list>li+li{border-top:1px solid var(--wf-border-2)}
.wf-pend-list>li>a{display:flex;align-items:flex-start;gap:10px;margin:4px 0;padding:6px 8px;border-radius:var(--wf-r-xs);color:var(--wf-text);text-decoration:none;transition:background-color .15s ease}
.wf-pend-list>li>a:hover{background:var(--wf-surface-2)}
.wf-pend-ico{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:var(--wf-r-xs);background:var(--wf-surface-2);color:var(--wf-text-2);font-size:12px}
.wf-pend-txt{min-width:0;flex:1;display:flex;flex-direction:column}
.wf-pend-top{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12.5px}
.wf-pend-top b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wf-pend-tag{flex:none;padding:1px 6px;border-radius:3px;background:var(--wf-surface-2);color:var(--wf-text-2);font-size:9.5px;font-weight:700}
.wf-pend-tag.bad{background:var(--wf-bad);color:#fff}
.wf-pend-tag.warn{background:var(--wf-warn);color:#fff}
.wf-pend-tag.info{background:var(--wf-info);color:#fff}
.wf-pend-sub{font-size:11.5px;color:var(--wf-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wf-pend-date{font-size:10.5px;color:var(--wf-muted)}
/* acciones de la fila: dos botones parejos, con aire entre ellos y esquinas de 4 px (antes iban pegados en un btn-group) */
.wf-pend-qa{display:flex;gap:6px;padding:0 8px 8px 48px}
.wf-pend-qa .btn{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:4px 8px;border-radius:var(--wf-r-xs);font-size:11px;font-weight:600}
.wf-pend-qa .btn i{font-size:11px}
.wf-pend-qa .btn:hover{border-color:var(--wf-accent);color:var(--wf-accent)}
/* grupo de «Todo» */
.wf-pend-list>li.wf-pend-grp{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:7px;padding:6px 14px;border-top:0;border-bottom:1px solid var(--wf-border-2);background:var(--wf-surface);font-size:10.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--wf-muted)}
.wf-pend-grp i{font-size:11px}
.wf-pend-grp em{padding:0 6px;border-radius:3px;background:var(--wf-surface-2);font-style:normal;color:var(--wf-text-2)}
.wf-pend-list>li.wf-pend-grp>a{display:inline;margin:0 0 0 auto;padding:0;border-radius:0;background:none;font-size:11px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--wf-accent)}
.wf-pend-list>li.wf-pend-grp>a:hover{background:none;text-decoration:underline}
.wf-pend-list>li.wf-pend-count>a{display:inline;margin:0;padding:0;background:none}
.wf-pend-empty{padding:20px 14px;text-align:center;color:var(--wf-muted);font-size:12.5px}
/* carga automatica al llegar al final */
.wf-pend-more{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 14px;font-size:11.5px;color:var(--wf-muted);cursor:pointer}
.wf-pend-more .dots{display:inline-flex;gap:4px}
.wf-pend-more .dots i{width:6px;height:6px;border-radius:50%;background:var(--wf-muted);animation:wfDot 1s ease-in-out infinite}
.wf-pend-more .dots i:nth-child(2){animation-delay:.15s}
.wf-pend-more .dots i:nth-child(3){animation-delay:.3s}
@keyframes wfDot{0%,100%{transform:scale(.6)}50%{transform:scale(1.2)}}
.wf-pend-count{display:flex;justify-content:center;padding:8px 14px 10px;font-size:11.5px;color:var(--wf-muted)}
.wf-pend-count a{font-weight:700;color:var(--wf-accent)}
.wf-pend-all{display:block;padding:9px 14px;border-top:1px solid var(--wf-border-2);text-align:center;font-size:12px;font-weight:700;color:var(--wf-accent)}
.wf-pend-all:hover{background:var(--wf-surface-2);color:var(--wf-accent);text-decoration:none}
@media(prefers-reduced-motion:reduce){.wf-chip.is-new,.wf-pend-more .dots i{animation:none}}
@media(prefers-reduced-motion:reduce){.header .wf-badge--pulse{animation:none}}
/* tableta: el Nuevo con su texto */
@media(min-width:768px){
  .header.wf-header{padding-right:16px}
  .header.wf-header .navbar-header{width:220px}
  .header.wf-header .navbar-nav>li>a.wf-hbtn[aria-label^="Nuevo"] .wf-hlabel,.header.wf-header .navbar-nav>li>a.wf-hbtn[aria-label="Registrar pago"] .wf-hlabel{display:inline}
}
/* escritorio: cada boton con su texto y el usuario con su perfil */
@media(min-width:1200px){
  .wf-hlabel{display:inline}
  .wf-huser-name{display:flex}
}
/* celular: solo iconos; Caja y Ver pagina pasan al menu del usuario; Pendientes es una hoja a todo el ancho */
@media(max-width:575.98px){
  .wf-hide-xs{display:none!important}
  .wf-only-xs{display:block}
  .header.wf-header #mainlogo{max-width:110px}
  .header.wf-header .navbar-nav>li>a.wf-hbtn{min-width:38px;padding:0 8px}
  .wf-pend{position:fixed!important;left:8px!important;right:8px!important;top:60px!important;width:auto;max-width:none;transform:none!important}
  .wf-pend-list{max-height:calc(100vh - 250px)}
}

/* ---- 6. celular: espaciado compacto (el aire de escritorio sobraba en 375 px) ---- */
@media(max-width:767.98px){
  .content{padding:12px}
  .page-header{margin-bottom:8px}
  .widget{margin-bottom:10px}
  .widget.widget-stats{padding:12px}
  .panel{margin-bottom:12px}
  .panel-body{padding:10px}
  .row{margin-left:-6px;margin-right:-6px}
  .row>[class*=col-]{padding-left:6px;padding-right:6px}
  .form-group{margin-bottom:10px}
}