/* =====================================================================
   Personalización de cada persona (Mi cuenta · apariencia.js).
   Todo va colgado de atributos en <html>, así que cambia al momento y
   sin recargar:
     data-estilo   ""(Reclama) | despacho | noche | compacto
     data-fondo    aurora(por defecto) | humo | balanza | liso
     data-chat     legal(por defecto) | liso | papel | marino
     data-letra    ""| grande | muy-grande          (este dispositivo)
     data-quieto   "1" = sin animaciones             (este dispositivo)
   El color propio llega como --marca/--acento en línea.
   ===================================================================== */

/* ------------------------------------------------------------ fondo del panel */
#fondo-panel{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;opacity:var(--fondo-int,1)}
#fondo-panel canvas{position:absolute;inset:-4%;width:108%;height:108%;display:block;filter:blur(8px)}
#fondo-panel .foto{position:absolute;inset:-40px;background:url("../img/acceso-balanza.webp") 60% 50%/cover no-repeat;filter:blur(var(--fondo-blur,6px)) saturate(1.05)}
#fondo-panel .foto:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in oklab,var(--fondo) 55%,transparent),color-mix(in oklab,var(--fondo) 75%,transparent))}
html[data-fondo="humo"] body:before,html[data-fondo="balanza"] body:before,html[data-fondo="liso"] body:before{display:none}
html[data-fondo="humo"]{background:color-mix(in oklab,var(--marca) 9%,var(--fondo))}
html:not([data-fondo]) #fondo-panel,html[data-fondo="aurora"] #fondo-panel,html[data-fondo="liso"] #fondo-panel{display:none}
html[data-fondo="aurora"] body:before{opacity:var(--fondo-int,1);filter:blur(var(--fondo-blur,30px))}

/* ------------------------------------------------------------ tamaño de letra */
html[data-letra="grande"]{zoom:1.1}
html[data-letra="muy-grande"]{zoom:1.22}
@supports not (zoom:1){html[data-letra="grande"] body{font-size:16.5px}html[data-letra="muy-grande"] body{font-size:18px}}

/* ------------------------------------------------------------ sin animaciones */
html[data-quieto="1"] *,html[data-quieto="1"] *:before,html[data-quieto="1"] *:after{animation-duration:0s!important;animation-iteration-count:1!important;transition-duration:0s!important}

/* ------------------------------------------------------------ fondo del chat */
html[data-chat="liso"] .wa-chat:before{display:none}
html[data-chat="papel"] .wa{--wa-fondo:#f4ecdc}
html[data-chat="papel"] .wa-chat:before{opacity:.35;filter:sepia(.6)}
html[data-chat="marino"] .wa{--wa-fondo:#0c1f36}
html[data-chat="marino"] .wa-chat:before{opacity:.18;filter:invert(1) sepia(1) saturate(3) hue-rotate(5deg)}
html[data-chat="marino"] .wa-dia span,html[data-chat="marino"] .wa-cifrado{background:rgba(20,40,66,.92);color:#cfd8e3}

/* =================================================================== DESPACHO
   Clásico: papel cálido, tinta, bordes finos, títulos con serifa. Sin
   cristal ni desenfoque: lo más sobrio y legible. */
html[data-estilo="despacho"]{
  --fondo:#f4efe4; --text-dark:#1d2430; --text-muted:#6a6556; --divider:rgba(60,45,20,.12); --card-bg:#fffdf7;
  --vidrio:#fffdf8; --vidrio-fuerte:#fffdf8; --vidrio-borde:#e3d9c4; --vidrio-reflejo:linear-gradient(transparent,transparent);
  --desenfoque:none; --sombra-vidrio:0 1px 0 rgba(255,255,255,.8) inset,0 1px 2px rgba(60,45,20,.06),0 10px 24px -20px rgba(60,45,20,.35);
  --sombra-flota:0 24px 50px -24px rgba(60,45,20,.4);
  --r-xl:16px;--r-lg:12px;--r-md:9px;--r-sm:7px;
}
html[data-estilo="despacho"] body:before{opacity:.18;filter:blur(60px) grayscale(.4)}
html[data-estilo="despacho"] .vh h1,html[data-estilo="despacho"] .card h3,html[data-estilo="despacho"] .logo .w{font-family:var(--font-marca);font-weight:500;letter-spacing:0}
html[data-estilo="despacho"] .vh h1{font-size:28px}
html[data-estilo="despacho"] .nav a.on{background:transparent;box-shadow:inset 3px 0 0 var(--acento);border-radius:4px;color:var(--marca)}
html[data-estilo="despacho"] .btn{border-radius:8px}
html[data-estilo="despacho"] .chip,html[data-estilo="despacho"] .search{border-radius:8px}
html[data-estilo="despacho"] .kc{background:#fffdf8;border:1px solid #e8dfcc;border-left:3px solid var(--kc,var(--marca));box-shadow:none}
html[data-estilo="despacho"] .col{background:#f9f5ec}
html[data-estilo="despacho"] .kpi b{font-family:var(--font-marca);font-weight:500}

/* ====================================================================== NOCHE
   Oscuro de verdad: azul marino profundo, cristal ahumado y dorado. */
html[data-estilo="noche"]{
  color-scheme:dark;
  --fondo:#06101d; --text-dark:#e7edf5; --text-muted:#91a1b6; --divider:rgba(255,255,255,.08); --dash-bg:rgba(255,255,255,.04); --card-bg:rgba(24,42,68,.92);
  --vidrio:rgba(16,32,54,.58); --vidrio-fuerte:rgba(22,40,66,.86); --vidrio-borde:rgba(255,255,255,.08);
  --vidrio-reflejo:linear-gradient(160deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 40%);
  --sombra-vidrio:inset 0 1px 0 rgba(255,255,255,.07),0 24px 48px -26px rgba(0,0,0,.75),0 2px 8px -3px rgba(0,0,0,.4);
  --sombra-flota:0 30px 70px -24px rgba(0,0,0,.8);
  --marca-oscura:color-mix(in oklab,var(--acento) 85%,#fff); --marca-clara:rgba(227,170,57,.14);
  --accion:color-mix(in oklab,var(--marca) 55%,#3a6ea8); --accion-oscura:color-mix(in oklab,var(--marca) 70%,#1d4270);
  --peligro-claro:rgba(242,135,125,.14); --aviso-claro:rgba(240,180,80,.14); --ok-claro:rgba(80,200,130,.14); --acento-claro:rgba(227,170,57,.16);
}
html[data-estilo="noche"] body:before{opacity:.55}
html[data-estilo="noche"] .nav a:hover{background:rgba(255,255,255,.05)}
html[data-estilo="noche"] .nav a.on{background:linear-gradient(135deg,rgba(227,170,57,.18),rgba(227,170,57,.06));color:#f3dcae;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
html[data-estilo="noche"] .logo .w{color:#fff}
html[data-estilo="noche"] .f input,html[data-estilo="noche"] .f select,html[data-estilo="noche"] .f textarea,html[data-estilo="noche"] .inp,
html[data-estilo="noche"] .comp input{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);color:var(--text-dark)}
html[data-estilo="noche"] .roles button.on,html[data-estilo="noche"] .tl div:before{background:#1b2f4c}
html[data-estilo="noche"] .kc{background:linear-gradient(90deg,color-mix(in oklab,var(--kc,var(--marca)) 30%,rgba(22,40,66,.9)),rgba(22,40,66,.9));border-color:rgba(255,255,255,.06)}
html[data-estilo="noche"] .col{background:rgba(255,255,255,.03)}
html[data-estilo="noche"] table.t tr.clic:hover td{background:rgba(255,255,255,.04)}
html[data-estilo="noche"] .modal .card,html[data-estilo="noche"] .av-panel{background:var(--vidrio-reflejo),rgba(16,30,50,.97)!important}
html[data-estilo="noche"] .mm.i{background:#1b2f4c}
html[data-estilo="noche"] .chip.on{color:#f3dcae;border-color:rgba(227,170,57,.5)}
html[data-estilo="noche"] .pill,html[data-estilo="noche"] .tp{box-shadow:none}
html[data-estilo="noche"] .wa{--wa-fondo:#0b141a;--wa-entrante:#202c33;--wa-saliente:#005c4b;--wa-barra:#202c33;--wa-texto:#e9edef;--wa-gris:#8696a0;--wa-linea:#222d34}
html[data-estilo="noche"] .wa-chat:before{opacity:.06;filter:invert(1)}
html[data-estilo="noche"] .pie .firma img{filter:brightness(0) invert(1);opacity:.7}

/* =================================================================== COMPACTO
   Para quien tiene el panel abierto todo el día: lo mismo, con menos aire. */
html[data-estilo="compacto"]{--r-xl:18px;--r-lg:14px;--r-md:10px}
html[data-estilo="compacto"] body{font-size:14px}
html[data-estilo="compacto"] .app{gap:10px;padding:10px;grid-template-columns:212px 1fr}
html[data-estilo="compacto"] .main{gap:10px}
html[data-estilo="compacto"] .tb{height:52px}
html[data-estilo="compacto"] .card{padding:13px 15px}
html[data-estilo="compacto"] .nav a{padding:7px 10px;font-size:13.5px}
html[data-estilo="compacto"] .vh{margin-bottom:10px}
html[data-estilo="compacto"] #v-inicio .vh h1{font-size:26px}
html[data-estilo="compacto"] .kpi b{font-size:22px}
html[data-estilo="compacto"] .grid{gap:10px}
html[data-estilo="compacto"] .kc{padding:8px 10px;margin-bottom:6px}
html[data-estilo="compacto"] table.t td,html[data-estilo="compacto"] table.t th{padding:8px 10px}
html[data-estilo="compacto"] .btn{height:34px;padding:0 14px}

/* =============================================================== MI CUENTA (vista)
   Tarjetas por bloque, vista previa al momento y barra de guardar fija. */
.ap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.ap .card h3{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.ap .card>.s{margin-bottom:14px}
.ap-ancho{grid-column:1/-1}
.ap-perfil{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.ap-perfil .av{width:78px;height:78px;font-size:26px;background-size:cover;background-position:center}
.ap-perfil .av.foto{color:transparent}
.ap-colores{display:flex;flex-wrap:wrap;gap:10px}
.ap-color{width:42px;height:42px;border-radius:14px;border:2px solid transparent;background:var(--c);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 14px -8px var(--c);position:relative;cursor:pointer;transition:transform .15s}
.ap-color:hover{transform:translateY(-2px)}
.ap-color[aria-checked="true"]{border-color:var(--text-dark);outline:3px solid color-mix(in oklab,var(--c) 35%,transparent);outline-offset:1px}
.ap-color.libre{background:conic-gradient(#e85d5d,#f2b33d,#5cc46b,#3fa7d6,#7b6cd9,#e85d5d);display:grid;place-items:center;overflow:hidden}
.ap-color.libre input{opacity:0;position:absolute;inset:0;width:100%;height:100%;cursor:pointer}
.ap-color.marca{background:linear-gradient(135deg,#001c39 0 55%,#e3aa39 55% 100%)}
.ap-opciones{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.ap-op{border:1.5px solid var(--vidrio-borde);background:var(--vidrio-fuerte);border-radius:16px;padding:8px;text-align:left;color:var(--text-dark);cursor:pointer;transition:border-color .2s,transform .15s,box-shadow .2s}
.ap-op:hover{transform:translateY(-2px);box-shadow:0 10px 22px -16px rgba(0,0,0,.4)}
.ap-op[aria-checked="true"]{border-color:var(--acento);box-shadow:0 0 0 3px color-mix(in oklab,var(--acento) 25%,transparent)}
.ap-op b{display:block;font-size:13.5px;margin:8px 4px 1px}
.ap-op small{display:block;font-size:12px;color:var(--text-muted);margin:0 4px 2px;line-height:1.3}
.ap-mini{height:74px;border-radius:11px;overflow:hidden;position:relative;display:grid;grid-template-columns:26% 1fr;gap:5px;padding:6px}
.ap-mini i{display:block;border-radius:6px}
.ap-mini i:nth-child(1){grid-row:1/3}
.ap-mini i:nth-child(3){}
/* miniaturas de los estilos */
.ap-mini.e-reclama{background:linear-gradient(135deg,#f3eeea,#e9e1d8)}.ap-mini.e-reclama i{background:rgba(255,255,255,.75);box-shadow:inset 0 1px 0 #fff}
.ap-mini.e-despacho{background:#f4efe4}.ap-mini.e-despacho i{background:#fffdf8;border:1px solid #e3d9c4;border-radius:3px}
.ap-mini.e-noche{background:linear-gradient(135deg,#06101d,#122440)}.ap-mini.e-noche i{background:rgba(40,64,100,.7);border:1px solid rgba(255,255,255,.08)}.ap-mini.e-noche i:nth-child(2){box-shadow:inset 0 -3px 0 #e3aa39}
.ap-mini.e-compacto{background:linear-gradient(135deg,#f3eeea,#e9e1d8);gap:3px;padding:4px}.ap-mini.e-compacto i{background:rgba(255,255,255,.8)}
/* miniaturas de fondos */
.ap-mini.f-aurora{background:radial-gradient(60% 60% at 15% 20%,rgba(0,28,57,.45),transparent 70%),radial-gradient(60% 60% at 85% 85%,rgba(227,170,57,.55),transparent 70%),#f3eeea}
.ap-mini.f-humo{background:radial-gradient(50% 60% at 30% 40%,rgba(60,110,170,.55),transparent 70%),radial-gradient(40% 50% at 75% 65%,rgba(227,170,57,.45),transparent 70%),#0d2340}
.ap-mini.f-balanza{background:url("../img/acceso-balanza.webp") 62% 50%/cover}
.ap-mini.f-liso{background:var(--fondo);border:1px solid var(--divider)}
.ap-mini.c-legal{background:#efeae2 url("../img/fondo-chat.svg") 0 0/160px}
.ap-mini.c-liso{background:#efeae2}
.ap-mini.c-papel{background:#f4ecdc url("../img/fondo-chat.svg") 0 0/160px;background-blend-mode:multiply}
.ap-mini.c-marino{background:#0c1f36}
.ap-mini.b-balanza{background:url("../img/acceso-balanza.webp") 62% 50%/cover}
.ap-mini.b-humo{background:radial-gradient(50% 70% at 30% 50%,rgba(60,110,170,.7),transparent 70%),radial-gradient(40% 60% at 80% 40%,rgba(227,170,57,.6),transparent 70%),#0a1f3a}
.ap-mini.b-ninguno{background:repeating-linear-gradient(135deg,transparent 0 8px,var(--divider) 8px 9px)}
.ap-mini.f-aurora i,.ap-mini.f-humo i,.ap-mini.f-balanza i,.ap-mini.f-liso i,.ap-mini[class*=" c-"] i,.ap-mini[class*=" b-"] i{display:none}
.ap-mini .burb{position:absolute;border-radius:8px;padding:3px 7px;font-size:9px;line-height:1.2}
.ap-mini .burb.e{left:8px;top:10px;background:#fff;color:#111}
.ap-mini .burb.s{right:8px;bottom:10px;background:#d9fdd3;color:#111}
.ap-mini.c-marino .burb.e{background:#1d3352;color:#e7edf5}.ap-mini.c-marino .burb.s{background:#005c4b;color:#e9edef}
.ap-rangos{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.ap-rangos label{font-size:13px;font-weight:600;color:var(--text-muted);display:flex;flex-direction:column;gap:6px}
.ap-rangos input[type=range]{accent-color:var(--acento);width:100%}
.ap-seg{display:inline-flex;background:var(--vidrio-fuerte);border:1px solid var(--vidrio-borde);border-radius:999px;padding:3px;gap:2px;flex-wrap:wrap}
.ap-seg button{border:0;background:transparent;height:34px;padding:0 16px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--text-muted)}
.ap-seg button[aria-pressed="true"]{background:var(--card-bg);color:var(--text-dark);box-shadow:0 2px 8px -3px rgba(0,0,0,.25)}
.ap-sw{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-top:1px solid var(--divider);cursor:pointer}
.ap-sw:first-of-type{border-top:0}
.ap-sw input{appearance:none;-webkit-appearance:none;flex:none;width:42px;height:24px;border-radius:999px;background:rgba(120,130,140,.35);position:relative;cursor:pointer;transition:background .2s;margin-top:1px}
.ap-sw input:after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s}
.ap-sw input:checked{background:var(--ok)}
.ap-sw input:checked:after{transform:translateX(18px)}
.ap-sw span b{display:block;font-size:14px;font-weight:600}
.ap-sw span small{display:block;font-size:12.5px;color:var(--text-muted);margin-top:1px}
.ap-tarjetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0 18px}
.ap-nota{font-size:12.5px;color:var(--text-muted);margin:10px 0 0}
.ap-barra{position:sticky;bottom:14px;z-index:6;display:flex;align-items:center;gap:10px;justify-content:flex-end;margin-top:16px;padding:10px 12px 10px 18px;border-radius:999px;
  background:var(--vidrio-reflejo),var(--vidrio-fuerte);border:1px solid var(--vidrio-borde);box-shadow:var(--sombra-flota);backdrop-filter:var(--desenfoque);-webkit-backdrop-filter:var(--desenfoque)}
.ap-barra .estado{margin-right:auto;font-size:13.5px;color:var(--text-muted)}
.ap-barra .estado b{color:var(--acento-oscuro)}
@media (max-width:980px){.ap{grid-template-columns:1fr}.ap-rangos{grid-template-columns:1fr}.ap-barra{border-radius:18px;flex-wrap:wrap}}

/* Noche: los colores de estado, legibles sobre oscuro. */
html[data-estilo="noche"]{--peligro:#f2877d;--aviso:#f0b450;--ok:#5fd08f;--acento-oscuro:#f0c46a}
html[data-estilo="noche"] .p-i{background:rgba(96,150,240,.16);color:#9cc0ff}
html[data-estilo="noche"] .p-n{background:rgba(255,255,255,.08);color:var(--text-muted)}
html[data-estilo="noche"] .demo{background:rgba(227,170,57,.16);color:#f0c46a}
html[data-estilo="noche"] .nav a .ct.r{background:#d64545}