/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   NEXVANTIA PROPERTY · tema con DOS MODOS, Oscuro y Claro, línea Cluvantia (27-oct-2026)
   SOLO DISEÑO: mismas clases de app.css, ninguna pantalla, menú, pestaña ni botón cambia ni desaparece.
   Solo se carga con el tema activo (tema_config.json) y el modo lo elige cada usuario: <html data-nx="oscuro|claro">.
   Gemelo del de Business (proyectos/erp-business-grupo/business/static/css/nexvantia.css).
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ---------- común ---------- */
html[data-nx]{
  --nx-navy:#0E2438; --nx-navy2:#16334C; --nx-verde:#1FB57A; --nx-verde2:#13804f; --nx-verde-tenue:#E3F6EE;
  --primary:#0E2438; --accent:#16446F; --accent2:#0E2438; --green:#1FB57A; --text:#14202c; --muted:#6b7c8a; --card:#ffffff;
}
html[data-nx] body{font-family:Inter,"Segoe UI",system-ui,sans-serif}
html[data-nx] .btn-primary{background:linear-gradient(180deg,#2c4a6a 0%,#0E2438 55%);color:#fff;box-shadow:0 6px 14px rgba(14,36,56,.22)}
html[data-nx] .btn-primary:hover{filter:brightness(1.12)}
html[data-nx] .page-title{color:var(--nx-navy)}
html[data-nx] .form-input:focus,html[data-nx] .form-select:focus,html[data-nx] .form-textarea:focus{border-color:var(--nx-verde);box-shadow:0 0 0 3px rgba(31,181,122,.15)}

/* lateral */
html[data-nx] .sidebar-logo{padding:16px 14px 12px}
html[data-nx] .nx-marca{display:block;width:100%;max-width:205px;margin:0 0 2px}
html[data-nx] .nav-section-title{color:var(--nx-verde) !important;letter-spacing:1.6px;font-size:11px}
html[data-nx] .nav-link{font-weight:700;border-radius:10px;margin:1px 10px;padding:8px 12px;border-left:0}
html[data-nx] .nav-sub{border-radius:8px;margin:1px 10px 1px 22px}

/* cabecera: logo + nombre del cliente, como el escudo del club en Cluvantia */
html[data-nx] .topbar{height:auto;min-height:64px;padding:8px 22px}
.nx-emp{display:flex;align-items:center;gap:10px;margin-right:6px;min-width:0}
.nx-emp img{max-height:40px;max-width:120px;width:auto;object-fit:contain}
.nx-emp b{display:block;font-size:17px;font-weight:800;color:#0E2438;line-height:1.1;white-space:nowrap}
.nx-emp small{display:block;font-size:10px;letter-spacing:2px;color:#7b8b99;text-transform:uppercase;white-space:nowrap}
@media (max-width:1100px){.nx-emp div{display:none}}
.nx-tema{display:flex;align-items:center;gap:2px;border:1px solid #cfd9e3;border-radius:20px;padding:3px;background:#fff;margin:0 4px 0 8px;flex:0 0 auto}
.nx-tema button{border:0;background:none;font:700 12px Inter,"Segoe UI",sans-serif;padding:5px 11px;border-radius:16px;color:#6b7c8a;cursor:pointer}
.nx-tema button.on{background:#0E2438;color:#fff}
@media (max-width:900px){.nx-tema button span{display:none}}

/* bloques: barra de título como Cluvantia */
html[data-nx] .card{border-radius:12px}
html[data-nx] .card-title{padding:7px 12px;border-radius:7px;margin:-4px -4px 12px}
html[data-nx] .kpi-card{border-radius:12px}
/* el pie NO ocupa sitio (pantallas de ventana completa sin scroll, 27-oct) */
html[data-nx] .nx-pie{position:fixed;right:96px;bottom:4px;z-index:2;font-size:10.5px;color:#7b8b99;pointer-events:none;margin:0;padding:0;border:0;background:none}
html[data-nx] .nx-pie b{color:var(--nx-verde2)}
html[data-nx] .watermark-jrc{display:none}

/* ═══════════════════ 🌙 OSCURO ═══════════════════ */
html[data-nx="oscuro"]{--bg:#D5DEE6;--border:#b9c7d4;--sidebar-bg:#0F2236;--sidebar-border:#0F2236;--topbar-bg:#ffffff}
html[data-nx="oscuro"] body,html[data-nx="oscuro"] .main-area{background:#D5DEE6}
html[data-nx="oscuro"] .sidebar-logo{border-bottom:1px solid rgba(255,255,255,.12)}
html[data-nx="oscuro"] .nav-link{color:#fff}
html[data-nx="oscuro"] .nav-link:hover{background:rgba(255,255,255,.07);color:#fff}
html[data-nx="oscuro"] .nav-link.active{background:rgba(31,181,122,.16);color:#1FB57A}
html[data-nx="oscuro"] .nav-sub{color:#c9d6e2}
html[data-nx="oscuro"] .nav-sub.active{background:rgba(31,181,122,.12);color:#1FB57A}
html[data-nx="oscuro"] .sidebar-footer{border-top:1px solid rgba(255,255,255,.12)}
html[data-nx="oscuro"] .topbar{border-bottom:3px solid #0E2438;box-shadow:0 2px 8px rgba(14,36,56,.10)}
html[data-nx="oscuro"] .card{border:2px solid #0E2438}
html[data-nx="oscuro"] .card-title{background:#0E2438;color:#fff}
html[data-nx="oscuro"] .card-title a{color:#3fd39a}
html[data-nx="oscuro"] .kpi-card{border:1px solid #b9c7d4;border-left:4px solid #0E2438}
html[data-nx="oscuro"] .table-wrap table thead th{background:#0E2438;color:#fff}

/* ═══════════════════ ☀ CLARO ═══════════════════ */
html[data-nx="claro"]{--bg:#EEF2F6;--border:#cdd7e1;--sidebar-bg:#ffffff;--sidebar-border:#dbe3ea;--topbar-bg:#ffffff}
html[data-nx="claro"] body,html[data-nx="claro"] .main-area{background:#EEF2F6}
html[data-nx="claro"] .sidebar{border-right:1px solid #dbe3ea}
html[data-nx="claro"] .sidebar-logo{border-bottom:1px solid #e6ecf1}
html[data-nx="claro"] .nav-section-title{color:#159a66 !important}
html[data-nx="claro"] .nav-arrow{color:#6b7c8a}
html[data-nx="claro"] .nav-link{color:#0E2438}
html[data-nx="claro"] .nav-link:hover{background:#f1f5f8;color:#0E2438}
html[data-nx="claro"] .nav-link.active{background:#E3F6EE;color:#13804f}
html[data-nx="claro"] .nav-sub{color:#33475b}
html[data-nx="claro"] .nav-sub:hover{color:#0E2438;background:#f1f5f8}
html[data-nx="claro"] .nav-sub.active{background:#E3F6EE;color:#13804f}
html[data-nx="claro"] .sidebar-footer{border-top:1px solid #e6ecf1;color:#0E2438}
html[data-nx="claro"] .sidebar-footer .sidebar-user,html[data-nx="claro"] .sidebar-footer .sidebar-rol{color:#0E2438}
html[data-nx="claro"] .sidebar-footer a{color:#16334C}
html[data-nx="claro"] .topbar{border-bottom:3px solid #1FB57A;box-shadow:0 2px 8px rgba(14,36,56,.06)}
html[data-nx="claro"] .card{border:1px solid #d9e2ea}
html[data-nx="claro"] .card-title{background:#E8EFF5;color:#0E2438;border-left:4px solid #1FB57A}
html[data-nx="claro"] .card-title a{color:#13804f}
html[data-nx="claro"] .kpi-card{border:1px solid #d9e2ea;border-left:4px solid #1FB57A}
html[data-nx="claro"] .table-wrap table thead th{background:#E8EFF5;color:#0E2438}

/* ═══════════════════ ACCESO (login.html) ═══════════════════ */
html[data-nx] body.login-nx{display:flex}
html[data-nx] body.login-nx .lg-tema{position:fixed;top:16px;right:20px;z-index:5}
html[data-nx] body.login-nx .nx-marca-login{display:block;width:270px;max-width:85%;margin:0 0 10px}
html[data-nx] body.login-nx .feature{font-weight:700}
html[data-nx] body.login-nx .feature svg{color:#1FB57A}
html[data-nx] body.login-nx .platform-line,html[data-nx] body.login-nx .platform-line svg{color:#1FB57A}
html[data-nx] body.login-nx .cliente-name{color:#0E2438}
html[data-nx] body.login-nx .login-rule{background:linear-gradient(90deg,transparent,#0E2438,transparent)}
html[data-nx] body.login-nx .btn-login{background:linear-gradient(180deg,#3a5878 0%,#0E2438 45%,#0E2438 100%);box-shadow:0 8px 18px rgba(14,36,56,.3);color:#fff}
html[data-nx] body.login-nx .field-icon{color:#1FB57A}
html[data-nx] body.login-nx .form-input:focus{border-color:#1FB57A;box-shadow:0 0 0 3px rgba(31,181,122,.15)}
html[data-nx] body.login-nx .toggle-pass:hover{color:#1FB57A}
/* 🌙 */
html[data-nx="oscuro"] body.login-nx{background:
  linear-gradient(115deg,transparent 0 38%,rgba(255,255,255,.035) 38% 60%,transparent 60%),
  linear-gradient(65deg,transparent 0 55%,rgba(255,255,255,.03) 55% 75%,transparent 75%),
  linear-gradient(180deg,#112a42 0%,#0d2034 100%)}
html[data-nx="oscuro"] body.login-nx .login-left{background:transparent;border-right:1px solid rgba(255,255,255,.07);box-shadow:none}
html[data-nx="oscuro"] body.login-nx .feature{color:#fff}
/* ☀ */
html[data-nx="claro"] body.login-nx{background:linear-gradient(115deg,transparent 0 38%,rgba(14,36,56,.025) 38% 60%,transparent 60%),#EEF2F6}
html[data-nx="claro"] body.login-nx .login-left{background:#fff;border-right:1px solid #d9e2ea;box-shadow:none}
html[data-nx="claro"] body.login-nx .feature{color:#0E2438}
html[data-nx="claro"] body.login-nx .features{border-top-color:#e3e9ef}
/* tarjeta de acceso clara con borde verde (línea Cluvantia) — mismos elementos de siempre */
html[data-nx] body.login-nx .login-box{background:linear-gradient(180deg,#f7f9f8,#eef2f1);border:2px solid #1FB57A;border-radius:20px;padding:30px 38px 18px;max-width:500px}
html[data-nx="claro"] body.login-nx .login-box{background:#fff;box-shadow:0 24px 60px rgba(14,36,56,.14)}
html[data-nx="oscuro"] body.login-nx .login-box{box-shadow:0 30px 70px rgba(0,0,0,.45)}
html[data-nx] body.login-nx .nx-logo-cliente{display:block;max-height:80px;max-width:240px;margin:0 auto 10px}
html[data-nx] body.login-nx .cliente-name{color:#0E2438;font-size:clamp(26px,2.3vw,34px)}
html[data-nx] body.login-nx .cliente-sub{color:#0E2438}
html[data-nx] body.login-nx .login-card{background:transparent;border:0;backdrop-filter:none;box-shadow:none;padding:6px 0 0;margin-bottom:12px}
html[data-nx] body.login-nx .login-title{color:#0E2438}
html[data-nx] body.login-nx .login-desc{color:#5c6b73}
html[data-nx] body.login-nx .form-label{color:#0E2438}
html[data-nx] body.login-nx .form-input{background:#fff;border-color:#cfd9e3;color:#14202c}
html[data-nx] body.login-nx .form-input::placeholder{color:#8a99a8}
html[data-nx] body.login-nx .toggle-pass{color:#8a99a8}
html[data-nx] body.login-nx .login-footer{color:#0E2438}
html[data-nx] body.login-nx .login-footer .txt{color:#6b7c8a}
html[data-nx] body.login-nx .error-msg{background:#fdecea;color:#a32121}
/* retoques 27-oct: el nombre del cliente nunca pisa el título (se recorta o, en pantallas estrechas, queda solo el logo) */
.nx-emp{flex:0 1 auto;overflow:hidden}
.nx-emp div{min-width:0;overflow:hidden}
.nx-emp b,.nx-emp small{overflow:hidden;text-overflow:ellipsis}
@media (max-width:1600px){.nx-emp div{display:none}}
html[data-nx] body.login-nx a[href*="recuperar"]{color:#16334C !important;font-weight:600}
/* iconos de la columna del acceso en verde (antes violeta Property) */
html[data-nx] body.login-nx .feature svg{width:40px;height:40px;padding:9px;border-radius:10px;border:1px solid rgba(31,181,122,.45)}
html[data-nx="oscuro"] body.login-nx .feature svg{background:#123f3a}
html[data-nx="claro"] body.login-nx .feature svg{background:#E3F6EE}
/* ═══ 27-oct · panel (Dashboard) a ventana completa con el tema: solo diseño, nada se quita ═══ */
/* la cabecera del tema mide 68 px (la de siempre 56): el panel calcula su alto con --topbar-h → si no se le dice, sobra y la
   tabla «Estado Canales» se queda sin filas y el pie pisa las tarjetas */
html[data-nx]{--topbar-h:68px}
html[data-nx] .topbar{height:var(--topbar-h);min-height:0;box-sizing:border-box;padding-top:0;padding-bottom:0}
/* las 7 tarjetas de avisos en UNA fila en pantallas anchas (antes la 7.ª bajaba sola y se comía ~100 px) */
@media (min-width:1101px){ html[data-nx] .dash-fit .work-grid{grid-template-columns:repeat(7,minmax(0,1fr))} }
html[data-nx] .topbar-mes{margin-right:12px}
/* pantallas bajas: la gráfica más baja para que «Estado Canales» enseñe filas; el pie pegado al borde sin pisar tarjetas */
@media (max-height:950px){ html[data-nx] .dash-fit .chart-card canvas{height:82px !important} }
html[data-nx] .nx-pie{bottom:0;line-height:14px}
/* acceso: sin el azul del autorrelleno del navegador (José 27-oct, como Business) */
html[data-nx] body.login-nx .form-input:-webkit-autofill,html[data-nx] body.login-nx .form-input:-webkit-autofill:hover,html[data-nx] body.login-nx .form-input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 40px #fff inset;-webkit-text-fill-color:#14202c;transition:background-color 9999s}
html[data-nx] body.login-nx .form-input{background:#fff}
/* acceso: más aire entre el logo y los apartados (José 27-oct, como Business) */
@media (min-width:901px) and (min-height:640px){ html[data-nx] body.login-nx .features{margin-top:64px} }
/* acceso: logo del cliente pequeño + CITIZEN en verde Nexvantia (José 27-oct) */
html[data-nx] body.login-nx .nx-logo-cliente{max-height:42px;max-width:140px;margin:0 auto 8px;opacity:.9}
html[data-nx] body.login-nx .nx-citizen{text-align:center;font-size:30px;font-weight:900;letter-spacing:.14em;color:var(--nx-verde);line-height:1.1}