/* ═══════════════════════════════════════════════════════════════════════
   AIMAITAI — ui.css  v4 «Liquid Glass 2026» (13/10/2026)
   Lenguaje de macOS/iOS 27 y One UI 9:
     · el VIDRIO es solo para navegar y para los controles (menú, barras, botones flotantes);
     · el CONTENIDO va en material grueso, casi sólido, para leerse siempre bien;
     · tema claro / oscuro / automático, intensidad del vidrio, un color de acento, fondo de pantalla,
       «reducir transparencia» y «aumentar contraste» (Ajustes › Apariencia, por usuario).
   Las preferencias llegan en <html> desde layout-top.php (private/lib/Apariencia.php):
     data-tema="auto|claro|oscuro"  data-fondo="aurora|atardecer|bosque|grafito"  data-reducir="1"  data-contraste="1"
     style="--acc --acc-rgb --acc-ink --acc-txt-l --acc-txt-d --g-l --g-d --tb-l --tb-d --pn-l --pn-d --bl --sat"
   Sin esos atributos (páginas antiguas) se ve en automático con los valores por defecto.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ────────────────────────────────────────────────────────── */
:root{
  /* preferencias (las pisa el style="" de <html>) */
  --acc:#27D3E0; --acc-rgb:39,211,224; --acc-ink:#04181C; --acc-txt-l:#167580; --acc-txt-d:#27D3E0;
  --g-l:.57; --g-d:.52; --gf-l:.81; --gf-d:.76; --tb-l:.61; --tb-d:.59; --pn-l:.60; --pn-d:.62; --bl:24px; --sat:168%;
  --w1:39,211,224; --w2:124,92,255; --w3:255,138,101;

  /* forma */
  --r-xl:26px; --r-lg:20px; --r-md:14px; --r-sm:10px; --r-pill:999px;
  --font:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI Variable Text','Segoe UI',system-ui,Roboto,'Helvetica Neue',sans-serif;
  --sidebar-w:248px;
  --tabbar-h:62px;
  --mobile-topbar-h:0px;

  /* materiales */
  --blur:blur(var(--bl)) saturate(var(--sat));
  --blur-sm:blur(14px) saturate(160%);
  --card-blur:blur(22px) saturate(165%);
  --card:var(--card-t);

  /* acento */
  --accent:var(--acc);
  --accent-ink:var(--acc-ink);
  --accent-soft:rgba(var(--acc-rgb),.16);
  --accent-line:rgba(var(--acc-rgb),.45);
  --accent-glow:rgba(var(--acc-rgb),.36);
  --sel:rgba(var(--acc-rgb),.16);
  --sel-line:rgba(var(--acc-rgb),.40);
  --b-ia:rgba(var(--acc-rgb),.14);
  --b-ia-line:rgba(var(--acc-rgb),.38);

  /* fijos en los dos temas */
  --warn-fill:#FF9F0A; --warn-ink:#1F1300;
  --ok-fill:#34C759;
  --wa:#1FAF55; --ig:#D62E70; --tg:#1C8FD6;
  --ic-blue:#0A84FF; --ic-green:#30D158; --ic-purple:#AF52DE; --ic-red:#FF3B30; --ic-orange:#FF9F0A; --ic-gray:#8E8E93; --ic-teal:#14B8C8;

  /* CLARO (por defecto) */
  color-scheme:light;
  --bg:#E8EDF4;
  --wa1:.45; --wa2:.36; --wa3:.36;
  --glass:rgba(255,255,255,var(--g-l));
  --glass-float:rgba(255,255,255,var(--gf-l));
  --fade:rgba(232,237,244,.92);
  --toolbar:rgba(250,251,253,var(--tb-l));
  --panel:rgba(255,255,255,var(--pn-l));
  --card-t:rgba(255,255,255,.74);
  --card-solid:#FFFFFF;
  --solid:rgba(251,252,254,.96);
  --glass-border:rgba(255,255,255,.78);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.9);
  --card-border:rgba(255,255,255,.92);
  --line:rgba(17,23,34,.08);
  --line-2:rgba(17,23,34,.14);
  --shadow-panel:0 1px 2px rgba(20,30,60,.06),0 12px 30px rgba(20,30,60,.08);
  --shadow-float:0 18px 44px rgba(30,45,80,.16),inset 0 1px 0 rgba(255,255,255,.9);
  --text:#111722; --text-2:#323B4A; --muted:#596373; --faint:#6B7484;
  --fill:rgba(17,23,34,.05); --fill-2:rgba(17,23,34,.09); --fill-3:rgba(17,23,34,.14);
  --field:rgba(255,255,255,.80);
  --nav-active:rgba(255,255,255,.88); --nav-active-shadow:0 1px 2px rgba(20,30,60,.10),inset 0 1px 0 #FFFFFF;
  --seg-on:#FFFFFF; --seg-shadow:0 1px 3px rgba(20,30,60,.16);
  --btn:rgba(255,255,255,.70); --btn-border:rgba(17,23,34,.10);
  --accent-text:var(--acc-txt-l);
  --ok:#1B7F3B; --ok-soft:rgba(52,199,89,.16);
  --warn:#A35F00; --warn-soft:rgba(255,159,10,.14); --warn-line:rgba(255,159,10,.45);
  --bad:#C4271E; --bad-soft:rgba(255,59,48,.11); --bad-line:rgba(255,59,48,.38); --bad-fill:#FF3B30;
  --info:#0A60D0; --info-soft:rgba(10,132,255,.12);
  --pur:#8A3BB8; --pur-soft:rgba(175,82,222,.14);
  --b-in:#FFFFFF; --b-in-shadow:0 1px 2px rgba(20,30,60,.08);
  --track-off:rgba(120,120,128,.32);
  --scrim:rgba(20,26,40,.30);
  --ig-text:#B0175A; --tg-text:#156FA8; --wa-text:#127A3B;
  --logo-ink:#0D2A4A;
  --toast-err:#FDECEC;
  --scroll:rgba(17,23,34,.18);
}

/* OSCURO (elegido) */
:root[data-tema="oscuro"]{
  color-scheme:dark;
  --bg:#090C12;
  --wa1:.40; --wa2:.40; --wa3:.22;
  --glass:rgba(30,34,44,var(--g-d));
  --glass-float:rgba(30,34,44,var(--gf-d));
  --fade:rgba(9,12,18,.92);
  --toolbar:rgba(20,23,31,var(--tb-d));
  --panel:rgba(20,23,31,var(--pn-d));
  --card-t:rgba(24,27,36,.72);
  --card-solid:#1A1D26;
  --solid:rgba(27,30,40,.96);
  --glass-border:rgba(255,255,255,.13);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.10);
  --card-border:rgba(255,255,255,.08);
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --shadow-panel:inset 0 1px 0 rgba(255,255,255,.05),0 14px 34px rgba(0,0,0,.35);
  --shadow-float:0 20px 50px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.10);
  --text:#F3F5F9; --text-2:#C7CDD8; --muted:#8F98A8; --faint:#7A8394;
  --fill:rgba(255,255,255,.06); --fill-2:rgba(255,255,255,.10); --fill-3:rgba(255,255,255,.15);
  --field:rgba(0,0,0,.24);
  --nav-active:rgba(255,255,255,.12); --nav-active-shadow:inset 0 1px 0 rgba(255,255,255,.10);
  --seg-on:rgba(255,255,255,.16); --seg-shadow:0 1px 3px rgba(0,0,0,.4);
  --btn:rgba(255,255,255,.08); --btn-border:rgba(255,255,255,.14);
  --accent-text:var(--acc-txt-d);
  --sel:rgba(var(--acc-rgb),.20); --sel-line:rgba(var(--acc-rgb),.34);
  --b-ia:rgba(var(--acc-rgb),.15); --b-ia-line:rgba(var(--acc-rgb),.32);
  --ok:#32D74B; --ok-soft:rgba(50,215,75,.16);
  --warn:#FFB340; --warn-soft:rgba(255,179,64,.14); --warn-line:rgba(255,179,64,.38);
  --bad:#FF6961; --bad-soft:rgba(255,69,58,.15); --bad-line:rgba(255,105,97,.40); --bad-fill:#FF453A;
  --info:#64A8FF; --info-soft:rgba(100,168,255,.15);
  --pur:#D5A6F2; --pur-soft:rgba(191,90,242,.18);
  --b-in:rgba(255,255,255,.09); --b-in-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  --track-off:rgba(120,120,128,.42);
  --scrim:rgba(0,0,0,.50);
  --ig-text:#F6A5C9; --tg-text:#7CCBF3; --wa-text:#5BD98A;
  --logo-ink:#FFFFFF;
  --toast-err:#3A1717;
  --scroll:rgba(255,255,255,.16);
}
/* AUTOMÁTICO con el sistema en oscuro (mismos valores que arriba) */
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]):not([data-tema="oscuro"]){
    color-scheme:dark;
    --bg:#090C12;
    --wa1:.40; --wa2:.40; --wa3:.22;
    --glass:rgba(30,34,44,var(--g-d));
    --glass-float:rgba(30,34,44,var(--gf-d));
    --fade:rgba(9,12,18,.92);
    --toolbar:rgba(20,23,31,var(--tb-d));
    --panel:rgba(20,23,31,var(--pn-d));
    --card-t:rgba(24,27,36,.72);
    --card-solid:#1A1D26;
    --solid:rgba(27,30,40,.96);
    --glass-border:rgba(255,255,255,.13);
    --glass-hi:inset 0 1px 0 rgba(255,255,255,.10);
    --card-border:rgba(255,255,255,.08);
    --line:rgba(255,255,255,.08);
    --line-2:rgba(255,255,255,.14);
    --shadow-panel:inset 0 1px 0 rgba(255,255,255,.05),0 14px 34px rgba(0,0,0,.35);
    --shadow-float:0 20px 50px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.10);
    --text:#F3F5F9; --text-2:#C7CDD8; --muted:#8F98A8; --faint:#7A8394;
    --fill:rgba(255,255,255,.06); --fill-2:rgba(255,255,255,.10); --fill-3:rgba(255,255,255,.15);
    --field:rgba(0,0,0,.24);
    --nav-active:rgba(255,255,255,.12); --nav-active-shadow:inset 0 1px 0 rgba(255,255,255,.10);
    --seg-on:rgba(255,255,255,.16); --seg-shadow:0 1px 3px rgba(0,0,0,.4);
    --btn:rgba(255,255,255,.08); --btn-border:rgba(255,255,255,.14);
    --accent-text:var(--acc-txt-d);
    --sel:rgba(var(--acc-rgb),.20); --sel-line:rgba(var(--acc-rgb),.34);
    --b-ia:rgba(var(--acc-rgb),.15); --b-ia-line:rgba(var(--acc-rgb),.32);
    --ok:#32D74B; --ok-soft:rgba(50,215,75,.16);
    --warn:#FFB340; --warn-soft:rgba(255,179,64,.14); --warn-line:rgba(255,179,64,.38);
    --bad:#FF6961; --bad-soft:rgba(255,69,58,.15); --bad-line:rgba(255,105,97,.40); --bad-fill:#FF453A;
    --info:#64A8FF; --info-soft:rgba(100,168,255,.15);
    --pur:#D5A6F2; --pur-soft:rgba(191,90,242,.18);
    --b-in:rgba(255,255,255,.09); --b-in-shadow:inset 0 1px 0 rgba(255,255,255,.06);
    --track-off:rgba(120,120,128,.42);
    --scrim:rgba(0,0,0,.50);
    --ig-text:#F6A5C9; --tg-text:#7CCBF3; --wa-text:#5BD98A;
    --logo-ink:#FFFFFF;
    --toast-err:#3A1717;
    --scroll:rgba(255,255,255,.16);
  }
}

/* Fondos de pantalla */
:root[data-fondo="atardecer"]{--w1:255,159,10; --w2:255,55,95; --w3:191,90,242}
:root[data-fondo="bosque"]{--w1:48,209,88; --w2:14,143,110; --w3:100,210,255}
:root[data-fondo="grafito"]{--w1:142,142,147; --w2:99,99,102; --w3:174,174,178}

/* Aumentar contraste */
:root[data-contraste="1"]{
  --line:rgba(17,23,34,.20); --line-2:rgba(17,23,34,.32);
  --text-2:#1C2430; --muted:#3D4654; --faint:#4A5361;
  --glass-border:rgba(17,23,34,.28); --card-border:rgba(17,23,34,.22); --btn-border:rgba(17,23,34,.30);
}
:root[data-tema="oscuro"][data-contraste="1"]{
  --line:rgba(255,255,255,.22); --line-2:rgba(255,255,255,.34);
  --text-2:#E3E7EE; --muted:#BAC2CF; --faint:#A3ACBA;
  --glass-border:rgba(255,255,255,.34); --card-border:rgba(255,255,255,.30); --btn-border:rgba(255,255,255,.34);
}
@media (prefers-color-scheme:dark){
  :root[data-contraste="1"]:not([data-tema="claro"]):not([data-tema="oscuro"]){
    --line:rgba(255,255,255,.22); --line-2:rgba(255,255,255,.34);
    --text-2:#E3E7EE; --muted:#BAC2CF; --faint:#A3ACBA;
    --glass-border:rgba(255,255,255,.34); --card-border:rgba(255,255,255,.30); --btn-border:rgba(255,255,255,.34);
  }
}

/* Reducir transparencia (ajuste propio o del sistema) */
:root[data-reducir="1"]{--blur:none; --blur-sm:none; --card-blur:none; --card:var(--card-solid)}
@media (prefers-reduced-transparency:reduce){
  :root{--blur:none; --blur-sm:none; --card-blur:none; --card:var(--card-solid);
    --g-l:.97!important; --g-d:.97!important; --gf-l:.97!important; --gf-d:.97!important; --tb-l:.97!important; --tb-d:.97!important; --pn-l:.97!important; --pn-d:.97!important}
}

/* compatibilidad con los nombres que aún usan algunas páginas */
:root{
  --bg-2:var(--card-solid);
  --surface:var(--card-solid);
  --border:var(--line);
  --cyan:var(--accent);
  --navy:var(--card-solid);
  --glass-2:var(--fill-2);
  --glass-3:var(--fill-3);
  --glass-solid:var(--solid);
  --info-ink:var(--info);
}

/* ── 2. Base ──────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{height:100%; background:var(--bg); overflow-x:hidden}
body{
  margin:0; min-height:100%; overflow-x:hidden;
  font-family:var(--font); font-size:14.5px; line-height:1.5; color:var(--text);
  background:transparent;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent;
}
/* fondo de pantalla: lo que se ve a través del vidrio */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 640px at 6% 4%, rgba(var(--w1),var(--wa1)), transparent 62%),
    radial-gradient(820px 700px at 96% 32%, rgba(var(--w2),var(--wa2)), transparent 62%),
    radial-gradient(780px 560px at 52% 106%, rgba(var(--w3),var(--wa3)), transparent 62%),
    var(--bg);
}
h1,h2,h3,h4{margin:0; font-weight:650; letter-spacing:-.01em; color:var(--text)}
h1{font-size:28px; line-height:1.15; letter-spacing:-.02em}
h2{font-size:20px} h3{font-size:16px}
p{margin:0}
a{color:var(--accent-text)}
b,strong{font-weight:650}
button,input,select,textarea{font:inherit; color:inherit}
::selection{background:rgba(var(--acc-rgb),.30)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:8px}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--scroll); border-radius:10px; border:3px solid transparent; background-clip:padding-box}
*::-webkit-scrollbar-track{background:transparent}
*{scrollbar-width:thin; scrollbar-color:var(--scroll) transparent}
.visually-hidden{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; margin:-1px; padding:0; border:0}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* marca: lo blanco del logo sigue al tema */
.brand-sym,.brand-wm{color:var(--logo-ink)}

/* ── 3. Materiales ────────────────────────────────────────────────────── */
.glass{background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--r-xl); box-shadow:var(--shadow-float);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur)}
.glass-solid{background:var(--solid); border:1px solid var(--line-2); box-shadow:var(--shadow-float);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur)}

/* ── 4. Estructura: menú lateral + contenido ──────────────────────────── */
.topbar,.mobile-topbar{display:none!important}
.layout{position:fixed; inset:0; display:grid; grid-template-columns:var(--sidebar-w) minmax(0,1fr)}
.sidebar{
  position:relative; z-index:6;
  display:flex; flex-direction:column; gap:12px; height:100%; min-height:0; padding:16px 12px 12px;
  background:var(--glass); border-right:1px solid var(--glass-border); box-shadow:var(--glass-hi);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
}
.sidebar-brand{display:flex; align-items:center; gap:10px; padding:4px 8px 6px; text-decoration:none; color:var(--text); border-radius:12px}
.sidebar-brand .brand-sym{width:30px; height:30px; flex:0 0 auto; filter:drop-shadow(0 4px 10px rgba(39,211,224,.30))}
.sidebar-brand .brand-wm{height:12px; width:auto; display:block; flex:0 1 auto; min-width:0}
.sidebar nav{display:flex; flex-direction:column; gap:2px; flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; margin:0 -4px; padding:0 4px}
.nav-group{font-size:11.5px; font-weight:650; color:var(--muted); padding:12px 10px 6px; letter-spacing:.01em}
.nav-sep{display:none}
.sidebar nav a{
  position:relative; display:flex; align-items:center; gap:10px; min-height:38px; padding:0 10px; margin:0;
  color:var(--text); text-decoration:none; font-size:14px; font-weight:500; border-radius:12px;
  transition:background .15s;
}
.sidebar nav a:hover{background:var(--fill)}
.sidebar nav a.active{background:var(--nav-active); box-shadow:var(--nav-active-shadow); font-weight:650}
.nav-ico{width:26px; height:26px; border-radius:8px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  background:var(--ic,var(--ic-gray)); color:#FFFFFF; box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.nav-ico svg,.sidebar nav a .nav-ico svg{width:15px; height:15px; color:#FFFFFF}
.nav-txt{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sidebar nav a .nav-badge,.nav-badge{margin-left:auto; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--warn-fill); color:var(--warn-ink);
  font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto}
.sidebar nav a .nav-badge.warn{height:20px; padding:0 8px; font-size:10.5px; letter-spacing:.01em; white-space:nowrap}
.sidebar-foot{display:flex; align-items:center; gap:6px; padding:6px; border-radius:16px; background:var(--fill)}
.sidebar-user{display:flex; align-items:center; gap:10px; flex:1; min-width:0; padding:4px; border-radius:12px; text-decoration:none; color:var(--text)}
.sidebar-user:hover{background:var(--fill)}
.sidebar-user .av{width:34px; height:34px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; color:#FFFFFF;
  background:linear-gradient(135deg,#27D3E0,#0D3F8E)}
.sidebar-user .u{min-width:0}
.sidebar-user b{display:block; font-size:13px; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sidebar-user small{display:block; font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sidebar-foot .logout{flex:0 0 auto; width:36px; height:36px; border-radius:11px; display:flex; align-items:center; justify-content:center; color:var(--muted); text-decoration:none}
.sidebar-foot .logout:hover{color:var(--bad); background:var(--bad-soft)}
.sidebar-foot .logout svg{width:17px; height:17px}

/* barra de iconos (Chats y pantallas que necesitan sitio) */
@media (min-width:721px){
  body.rail{--sidebar-w:76px}
  body.rail .sidebar{padding:16px 10px 12px; align-items:center}
  body.rail .sidebar-brand{padding:4px 0 8px}
  body.rail .sidebar-brand .brand-wm,body.rail .nav-group,body.rail .nav-txt,body.rail .sidebar-user .u,body.rail .sidebar-foot .logout{display:none}
  body.rail .sidebar nav{align-items:center; margin:0; padding:0}
  body.rail .nav-sep{display:block; width:28px; height:1px; margin:8px auto; background:var(--line-2)}
  body.rail .sidebar nav a{width:52px; min-height:48px; padding:0; justify-content:center; border-radius:15px}
  body.rail .nav-ico{width:30px; height:30px; border-radius:9px}
  body.rail .nav-ico svg{width:16px; height:16px}
  body.rail .sidebar nav a .nav-badge{position:absolute; top:3px; right:3px; margin:0; min-width:17px; height:17px; padding:0 4px; font-size:10px}
  body.rail .sidebar nav a .nav-badge.warn{min-width:0; width:11px; height:11px; padding:0; font-size:0; border-radius:50%; box-shadow:0 0 0 2px var(--card-solid)}
  body.rail .sidebar-foot{background:none; padding:0}
  body.rail .sidebar-user{padding:3px; border-radius:50%}
}

.content{
  position:relative; height:100%; min-width:0; min-height:0; overflow-y:auto; overflow-x:hidden;
  padding:28px 36px 48px;
}
/* barra superior esmerilada (escritorio): título + acciones, se queda arriba al bajar */
/* (el «top» negativo compensa el relleno de .content: un sticky se pega dentro del relleno de su contenedor) */
.page-head{
  position:sticky; top:-28px; z-index:20;
  display:flex; align-items:center; gap:14px; min-height:64px;
  margin:-28px -36px 24px; padding:10px 36px;
  background:var(--toolbar); border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
}
.page-titles{flex:1; min-width:0}
.page-head h1{font-size:20px; font-weight:650; line-height:1.2; letter-spacing:-.015em}
.page-head p{color:var(--muted); margin-top:2px; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.page-head-actions{display:flex; gap:8px; flex:0 0 auto; align-items:center}
.page-back{flex:0 0 auto; display:inline-flex; align-items:center; gap:2px; height:34px; padding:0 12px 0 6px; border-radius:999px; font-size:13.5px; font-weight:600;
  color:var(--text); text-decoration:none; background:var(--btn); border:1px solid var(--btn-border); box-shadow:var(--glass-hi)}
.page-back svg{width:17px; height:17px}
.page-back:hover{background:var(--fill-2)}
.content > h1{font-size:30px; margin:0 0 22px}

/* ── 5. Componentes ───────────────────────────────────────────────────── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px; height:38px; padding:0 16px; border-radius:var(--r-pill);
  border:1px solid var(--btn-border); background:var(--btn); color:var(--text); font-size:14px; font-weight:600; cursor:pointer; white-space:nowrap; text-decoration:none;
  box-shadow:var(--glass-hi); -webkit-backdrop-filter:var(--blur-sm); backdrop-filter:var(--blur-sm);
  transition:background .15s, border-color .15s, transform .08s, filter .15s}
.btn:hover{background:var(--fill-2)}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.5; cursor:default; transform:none}
.btn.primary{background:var(--accent); border-color:transparent; color:var(--accent-ink); box-shadow:0 6px 18px -6px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.45)}
.btn.primary:hover{background:var(--accent); filter:brightness(1.06)}
.btn.danger{color:var(--bad); border-color:var(--bad-line)}
.btn.danger:hover{background:var(--bad-soft)}
.btn.danger-solid{background:var(--bad-fill); border-color:transparent; color:#FFFFFF; box-shadow:0 6px 18px -8px rgba(255,59,48,.7), inset 0 1px 0 rgba(255,255,255,.3)}
.btn.danger-solid:hover{background:var(--bad-fill); filter:brightness(1.05)}
.btn.sm{height:32px; padding:0 12px; font-size:13px}
.btn.icon{width:38px; padding:0}
.btn.sm.icon{width:32px}
.btn svg{width:17px; height:17px; flex:0 0 auto}
.btn-text{background:none; border:0; padding:0 4px; color:var(--accent-text); font-weight:600; cursor:pointer; text-decoration:none}

.input,.select,.textarea{width:100%; height:42px; padding:0 14px; border-radius:var(--r-md); border:1px solid var(--line-2); background:var(--field); color:var(--text); font-size:14.5px;
  transition:border-color .15s, box-shadow .15s}
.textarea{height:auto; min-height:92px; padding:11px 14px; resize:vertical; line-height:1.5}
.input::placeholder,.textarea::placeholder,input::placeholder,textarea::placeholder{color:var(--faint)}
.input:focus,.select:focus,.textarea:focus{outline:none; border-color:var(--accent-line); box-shadow:0 0 0 4px var(--accent-soft)}
.field{display:flex; flex-direction:column; gap:6px}
.field > span{font-size:13px; color:var(--muted); font-weight:500}

.pill{display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px; border-radius:var(--r-pill); font-size:12px; font-weight:650; background:var(--fill-2); color:var(--text-2); white-space:nowrap}
.pill.ok{background:var(--ok-soft); color:var(--ok)} .pill.warn{background:var(--warn-soft); color:var(--warn)} .pill.bad{background:var(--bad-soft); color:var(--bad)}
.pill.accent{background:var(--accent-soft); color:var(--accent-text)} .pill.info{background:var(--info-soft); color:var(--info)}

.chip{display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 13px; border-radius:var(--r-pill); border:1px solid var(--line-2); background:var(--btn); color:var(--text-2);
  font-size:13px; font-weight:500; cursor:pointer; white-space:nowrap; transition:background .15s, border-color .15s, color .15s}
.chip:hover{background:var(--fill-2); color:var(--text)}
.chip.sel,.chip.on{border-color:var(--accent-line); color:var(--accent-text); background:var(--accent-soft); font-weight:600}

/* control segmentado (cápsula) */
.seg{display:inline-flex; padding:3px; gap:2px; border-radius:var(--r-pill); background:var(--fill)}
.seg > button{height:32px; padding:0 14px; border-radius:var(--r-pill); border:0; background:none; color:var(--muted); font-size:13.5px; font-weight:600; cursor:pointer; white-space:nowrap; transition:background .15s, color .15s}
.seg > button:hover{color:var(--text)}
.seg > button.on,.seg > button[aria-checked="true"],.seg > button[aria-pressed="true"]{background:var(--seg-on); color:var(--text); box-shadow:var(--seg-shadow)}

/* interruptor (estilo iOS / One UI) */
.toggle{position:relative; flex:0 0 auto; width:51px; height:31px; border-radius:var(--r-pill); border:0; padding:0; background:var(--track-off); cursor:pointer; transition:background .2s}
.toggle::after{content:""; position:absolute; top:2px; left:2px; width:27px; height:27px; border-radius:50%; background:#FFFFFF; box-shadow:0 2px 6px rgba(0,0,0,.25); transition:transform .22s cubic-bezier(.32,.72,0,1)}
.toggle[aria-checked="true"]{background:var(--ok-fill)}
.toggle[aria-checked="true"]::after{transform:translateX(20px)}
.toggle:disabled{opacity:.5; cursor:default}

/* icono cuadrado de color (como Ajustes de iOS / macOS 27) */
.sq{width:30px; height:30px; border-radius:9px; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; background:var(--ic,var(--ic-gray)); color:#FFFFFF;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.sq svg{width:16px; height:16px}
.sq.sm{width:22px; height:22px; border-radius:7px} .sq.sm svg{width:12px; height:12px}

/* tarjetas de contenido (material grueso) */
.panel{background:var(--card); border:1px solid var(--card-border); border-radius:var(--r-xl); box-shadow:var(--shadow-panel);
  -webkit-backdrop-filter:var(--card-blur); backdrop-filter:var(--card-blur); padding:18px 20px}
.panel-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px}
.panel-head h2{font-size:17px; font-weight:650}
.panel-head a{font-size:13px; font-weight:600; color:var(--accent-text); text-decoration:none}
.panel-head a:hover{text-decoration:underline; text-underline-offset:3px}
.row-list{display:flex; flex-direction:column}
.row-list > *{display:flex; align-items:center; gap:12px; padding:11px 0; border-top:1px solid var(--line); font-size:14px}
.row-list > *:first-child{border-top:none; padding-top:2px}
.row-list .t{color:var(--muted); font-variant-numeric:tabular-nums; min-width:46px}
.row-list .n{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.row-list .s{color:var(--muted); font-size:13px}
.empty{color:var(--muted); font-size:14px; padding:12px 0 6px}
.empty b{color:var(--text-2); font-weight:600; display:block; margin-bottom:2px}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin:0 0 18px}
.card{display:flex; flex-direction:column; background:var(--card); border:1px solid var(--card-border); border-radius:22px; padding:16px 18px; box-shadow:var(--shadow-panel);
  -webkit-backdrop-filter:var(--card-blur); backdrop-filter:var(--card-blur); text-decoration:none; color:inherit; transition:transform .15s, box-shadow .15s}
a.card:hover{transform:translateY(-1px)}
.card-label{font-size:13px; color:var(--muted); margin:0 0 6px; order:2}
.card-num{font-size:34px; font-weight:700; letter-spacing:-.02em; color:var(--text); line-height:1.1; font-variant-numeric:tabular-nums}
.card-num.warn{color:var(--warn)}
.card .card-label + .card-num{margin-top:0}
.card .card-num + .card-label{margin:8px 0 0}
.hint{font-size:13px; color:var(--muted)}
.av-ini{width:40px; height:40px; border-radius:50%; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; position:relative;
  font-size:14px; font-weight:700; color:#FFFFFF}
/* avatares con iniciales: 8 degradados que se leen con texto blanco; el índice sale del id del contacto (FNV-1a % 8, igual en PHP y JS) */
.av-ini,.ci-av{background:linear-gradient(135deg,var(--av1,#0A84FF),var(--av2,#4F46E5)); text-shadow:0 1px 1px rgba(0,0,0,.18)}
[data-av="1"]{--av1:#1FA84A; --av2:#0E7A5C} [data-av="2"]{--av1:#BF5AF2; --av2:#7C3AED} [data-av="3"]{--av1:#FF6B3D; --av2:#E0245E}
[data-av="4"]{--av1:#14B8C8; --av2:#0B6E99} [data-av="5"]{--av1:#F59E0B; --av2:#D9480F} [data-av="6"]{--av1:#8E8E93; --av2:#48484A} [data-av="7"]{--av1:#EC4899; --av2:#9D174D}
.ch-badge{position:absolute; right:-2px; bottom:-2px; width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#FFFFFF;
  background:var(--wa); box-shadow:0 0 0 2px var(--card-solid)}
.ch-badge svg{width:10px; height:10px}
.ch-badge.ig{background:var(--ig)} .ch-badge.tg{background:var(--tg)}

/* modales de página (.md/.md-box) */
.md{background:var(--scrim); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.md-box{background:var(--solid)!important; border:1px solid var(--line-2)!important; border-radius:var(--r-xl)!important; box-shadow:var(--shadow-float)!important;
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); color:var(--text)}

/* ── 6. Móvil ─────────────────────────────────────────────────────────── */
/* Sin barra superior: cada página lleva su título grande (iOS / One UI) y abajo una barra flotante
   en cápsula + un botón redondo aparte para el Asistente (como la búsqueda separada de iOS 26/27). */
.tabbar{display:none}
.chat-mtitle{display:none}
@media (max-width:720px){
  html,body{overflow:hidden; height:100%}
  body{font-size:15px}
  .layout{display:block; padding:0}
  .sidebar{display:none}
  .content{position:absolute; inset:0; height:auto!important; overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding:calc(14px + env(safe-area-inset-top,0px)) 16px calc(var(--tabbar-h) + 34px + env(safe-area-inset-bottom,0px))}
  body.fill .content{padding:0; bottom:calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom,0px))}
  body.fill.cal-page .content{padding:calc(8px + env(safe-area-inset-top,0px)) 10px 0}
  body.chat-open .content,body.no-tabbar .content,body.input-focus .content,body.kb-open .content{bottom:0}
  body.input-focus:not(.fill) .content,body.kb-open:not(.fill) .content{padding-bottom:34px}

  .page-head{position:static; margin:6px 0 16px; padding:0; min-height:0; background:none; border:0; -webkit-backdrop-filter:none; backdrop-filter:none;
    flex-direction:column; align-items:flex-start; gap:8px}
  .page-titles{width:100%}
  .page-head h1,.content > h1{display:block; font-size:30px; font-weight:700; letter-spacing:-.025em; line-height:1.12}
  .page-head p{font-size:14px; margin-top:4px; white-space:normal}
  .page-head-actions{width:100%; flex-wrap:wrap}
  .page-back{height:36px; margin-left:-2px}
  .page-head.ph-inline{flex-direction:row; align-items:flex-start; flex-wrap:nowrap}
  .page-head.ph-inline .page-titles{flex:1; width:auto}
  .page-head.ph-inline .page-head-actions{width:auto; flex-wrap:nowrap; padding-top:2px}
  .page-head .lbl-movil-oculta{display:none}
  .cards{grid-template-columns:repeat(2,1fr); gap:10px}
  .card{padding:14px 16px}
  .card-num{font-size:28px}
  .panel{padding:16px}

  .tabbar{display:flex; align-items:center; gap:10px; position:fixed; left:12px; right:12px; bottom:calc(10px + env(safe-area-inset-bottom,0px)); z-index:30; pointer-events:none;
    transition:transform .28s cubic-bezier(.32,.72,0,1), opacity .2s}
  .tabbar::before{content:""; position:fixed; left:0; right:0; bottom:0; height:calc(var(--tabbar-h) + 44px + env(safe-area-inset-bottom,0px)); z-index:-1; pointer-events:none;
    background:linear-gradient(to top, var(--fade) 30%, transparent)}
  .tab-caps{pointer-events:auto; flex:1; min-width:0; display:flex; height:var(--tabbar-h); padding:4px; border-radius:var(--r-pill);
    background:var(--glass-float); border:1px solid var(--glass-border); box-shadow:var(--shadow-float); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur)}
  .tab-caps > a{flex:1 1 0; min-width:0; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    border-radius:var(--r-pill); color:var(--text-2); font-size:11px; font-weight:600; text-decoration:none; transition:background .2s, color .2s}
  .tab-caps > a.active{color:var(--accent-text); background:var(--nav-active); box-shadow:var(--nav-active-shadow)}
  .tab-caps svg{width:23px; height:23px; flex:0 0 auto}
  .tab-ai{pointer-events:auto; flex:0 0 auto; position:relative; width:var(--tabbar-h); height:var(--tabbar-h); border-radius:50%; display:flex; align-items:center; justify-content:center;
    color:var(--accent-text); text-decoration:none; background:var(--glass-float); border:1px solid var(--glass-border); box-shadow:var(--shadow-float); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur)}
  .tab-ai svg{width:26px; height:26px}
  .tab-ai.active{background:var(--accent); color:var(--accent-ink); border-color:transparent}
  .tabbar .tab-badge{position:absolute; top:4px; left:calc(50% + 4px); min-width:17px; height:17px; padding:0 5px; border-radius:9px; background:var(--bad-fill); color:#FFFFFF;
    font-size:10.5px; font-weight:700; display:flex; align-items:center; justify-content:center}
  .tab-ai .tab-badge{top:3px; left:auto; right:3px; background:var(--warn-fill); color:var(--warn-ink)}
  .tabbar .tab-dot{position:absolute; top:7px; left:calc(50% + 8px); width:9px; height:9px; border-radius:50%; background:var(--warn-fill); box-shadow:0 0 0 2px var(--card-solid)}
  body.chat-open .tabbar,body.no-tabbar .tabbar,body.input-focus .tabbar,body.kb-open .tabbar,body.sheet-open .tabbar{display:none}
  body.tab-hidden .tabbar{transform:translateY(calc(100% + 14px + env(safe-area-inset-bottom,0px))); opacity:0; pointer-events:none}

  input,select,textarea{font-size:16px!important}   /* sin zoom del iPhone al escribir */
  .btn{height:44px} .btn.sm{height:38px} .chip{height:38px; padding:0 14px} .btn.icon{width:44px} .btn.sm.icon{width:38px}
  .input,.select{height:46px}
  .seg > button{height:36px}

  .md{align-items:flex-end!important; padding:0!important}
  .md-box{max-width:none!important; width:100%!important; border-radius:26px 26px 0 0!important; max-height:92vh!important; max-height:92dvh!important;
    padding:16px 16px calc(18px + env(safe-area-inset-bottom,0px))!important; border-bottom:none!important}
  .md-box::before{content:""; display:block; width:40px; height:5px; border-radius:3px; background:var(--fill-3); margin:-6px auto 12px}
}
@media (max-width:1100px) and (min-width:721px){
  :root{--sidebar-w:220px}
  .content{padding:24px 24px 36px}
  .page-head{top:-24px; margin:-24px -24px 20px; padding:10px 24px}
}

/* ── 7. Avisos, hojas y confirmaciones (ui.js) ────────────────────────── */
.ui-toast{position:fixed; left:50%; bottom:calc(var(--tabbar-h) + 28px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%) translateY(16px); z-index:400;
  max-width:min(92vw,520px); padding:12px 18px; border-radius:18px; background:var(--solid); border:1px solid var(--line-2); color:var(--text); font-size:14px; font-weight:550; line-height:1.4;
  box-shadow:var(--shadow-float); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); opacity:0; pointer-events:none; transition:opacity .2s, transform .25s cubic-bezier(.32,.72,0,1)}
.ui-toast.on{opacity:1; transform:translateX(-50%) translateY(0)}
.ui-toast.err{background:var(--toast-err); border-color:var(--bad-line); color:var(--bad)}
.ui-toast.ok{border-color:rgba(52,199,89,.45)}
@media (min-width:721px){ .ui-toast{bottom:28px} }
body.chat-open .ui-toast,body.kb-open .ui-toast,body.input-focus .ui-toast{bottom:calc(16px + env(safe-area-inset-bottom,0px))}

.ui-sheet-overlay{position:fixed; inset:0; z-index:300; background:var(--scrim); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); opacity:0; pointer-events:none; transition:opacity .22s;
  display:flex; align-items:flex-end; justify-content:center}
.ui-sheet-overlay.open{opacity:1; pointer-events:auto}
.ui-sheet{width:100%; max-height:min(88vh,88dvh); overflow-y:auto; background:var(--solid); color:var(--text); border:1px solid var(--line-2); border-bottom:none; border-radius:28px 28px 0 0;
  padding:10px 18px calc(22px + env(safe-area-inset-bottom,0px)); box-shadow:var(--shadow-float); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  transform:translateY(100%); transition:transform .3s cubic-bezier(.32,.72,0,1)}
.ui-sheet-overlay.open .ui-sheet{transform:translateY(0)}
.ui-sheet-grab{width:40px; height:5px; border-radius:3px; background:var(--fill-3); margin:0 auto 14px}
.ui-sheet h3{font-size:18px; margin:0 0 4px}
.ui-sheet .ui-sheet-sub{font-size:13.5px; color:var(--muted); margin:0 0 12px}
@media (min-width:721px){
  .ui-sheet-overlay{align-items:center; padding:24px}
  .ui-sheet{max-width:460px; border-radius:var(--r-xl); border-bottom:1px solid var(--line-2); padding:20px 24px 24px; transform:translateY(12px) scale(.98)}
  .ui-sheet-overlay.open .ui-sheet{transform:none}
  .ui-sheet-grab{display:none}
}
.ui-sheet-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:6px}
.ui-sheet-grid a,.ui-sheet-grid button{display:flex; flex-direction:column; align-items:center; gap:9px; padding:16px 6px 13px; border-radius:18px; background:var(--fill); border:1px solid var(--line);
  color:var(--text-2); text-decoration:none; font-size:12.5px; font-weight:550; cursor:pointer; transition:background .15s, transform .12s}
.ui-sheet-grid a:active,.ui-sheet-grid button:active{transform:scale(.96); background:var(--fill-2)}
.ui-sheet-grid a.active{background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent-text)}
.ui-sheet-grid svg{width:24px; height:24px}
.ui-sheet-user{display:flex; align-items:center; gap:12px; padding:4px 2px 14px}
.ui-sheet-user .av{width:40px; height:40px; border-radius:50%; background:var(--accent-soft); color:var(--accent-text); display:flex; align-items:center; justify-content:center; font-weight:700}
.ui-sheet-user b{display:block; font-size:15px} .ui-sheet-user small{color:var(--muted); font-size:12.5px}
.ui-sheet-rows{display:flex; flex-direction:column}
.ui-sheet-rows button{display:flex; align-items:center; gap:14px; width:100%; padding:14px 6px; background:none; border:none; border-top:1px solid var(--line); color:var(--text); font-size:16px; text-align:left; cursor:pointer; border-radius:0}
.ui-sheet-rows button:first-child{border-top:none}
.ui-sheet-rows button:active{background:var(--fill)}
.ui-sheet-rows button svg{width:21px; height:21px; color:var(--muted); flex:0 0 auto}
.ui-sheet-rows button.danger{color:var(--bad)} .ui-sheet-rows button.danger svg{color:var(--bad)}
.ui-confirm .ui-sheet{padding-top:14px}
.ui-confirm-t{font-size:18px; margin:0 0 6px}
.ui-confirm-x{color:var(--text-2); font-size:14.5px; line-height:1.5; margin:0 0 18px}
.ui-confirm-b{display:flex; gap:10px}
.ui-confirm-b .btn{flex:1; height:48px; font-size:15px}
@media (min-width:721px){ .ui-confirm-b{justify-content:flex-end} .ui-confirm-b .btn{flex:0 0 auto; min-width:120px; height:40px; font-size:14px} }

/* interruptor «IA responde» (control humano, Chats) */
.ia-switch{display:inline-flex; align-items:center; gap:9px; height:38px; padding:0 13px 0 5px; border-radius:var(--r-pill); border:1px solid var(--btn-border); background:var(--btn); color:var(--text-2);
  font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; box-shadow:var(--glass-hi); transition:background .15s, border-color .15s}
.ia-switch .sw{position:relative; width:44px; height:28px; border-radius:14px; background:var(--track-off); flex:0 0 auto; transition:background .2s}
.ia-switch .sw::after{content:""; position:absolute; top:2px; left:2px; width:24px; height:24px; border-radius:50%; background:#FFFFFF; box-shadow:0 1px 4px rgba(0,0,0,.3); transition:left .2s cubic-bezier(.32,.72,0,1)}
.ia-switch[aria-checked="true"]{color:var(--text)}
.ia-switch[aria-checked="true"] .sw{background:var(--ok-fill)}
.ia-switch[aria-checked="true"] .sw::after{left:18px}
.ia-switch[aria-checked="false"]{border-color:var(--warn-line); color:var(--warn); background:var(--warn-soft)}
.ia-switch:disabled{opacity:.55; cursor:default}
.ia-switch .lbl{line-height:1}
@media (max-width:1180px){ .ia-switch .lbl{display:none} .ia-switch{padding:0 5px} }

/* ── 8. Formularios por secciones (Conocimiento IA, Perfil de WhatsApp: .kb-*) ── */
.kb-page{max-width:900px; margin:0; padding:0 0 32px; color:var(--text)}
.kb-page *{box-sizing:border-box}
.kb-intro{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 16px; margin:0 0 12px; border-radius:var(--r-lg);
  background:var(--card); border:1px solid var(--card-border); box-shadow:var(--shadow-panel)}
.kb-intro p{margin:0; font-size:13.5px; line-height:1.5; color:var(--text-2)}
.kb-intro p b{color:var(--text)}
.kb-intro-total{flex:0 0 auto; font-weight:650; font-size:12.5px; color:var(--accent-text); background:var(--accent-soft); padding:4px 12px; border-radius:var(--r-pill); white-space:nowrap}
.kb-topbar{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 14px; padding:6px 0 10px; position:sticky; top:38px; z-index:5}
.kb-topbar a{display:flex; align-items:center; gap:7px; height:34px; padding:0 14px; border-radius:var(--r-pill); background:var(--glass); border:1px solid var(--glass-border);
  color:var(--text); text-decoration:none; font-size:13px; font-weight:600; box-shadow:var(--shadow-panel); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur)}
.kb-topbar a:hover{background:var(--panel)}
.kb-topbar a em{font-style:normal; font-variant-numeric:tabular-nums; font-size:12px; font-weight:650; color:var(--muted)}
.kb-topbar a.tb-a em{color:var(--ok)} .kb-topbar a.tb-b em{color:var(--info)} .kb-topbar a.tb-c em{color:var(--warn)}
.kb-topbar-actions{margin-left:auto; display:flex; gap:8px}
.kb-topbar-actions button{height:34px; padding:0 13px; border-radius:var(--r-pill); font-size:13px; font-weight:600; background:var(--btn); border:1px solid var(--btn-border); color:var(--text-2); cursor:pointer}
.kb-topbar-actions button:hover{background:var(--fill-2)}
.kb-sections{display:flex; flex-direction:column; gap:16px}
.kb-section{margin:0; padding:14px 18px 16px; border-radius:var(--r-xl); background:var(--card); border:1px solid var(--card-border); box-shadow:var(--shadow-panel);
  -webkit-backdrop-filter:var(--card-blur); backdrop-filter:var(--card-blur); scroll-margin-top:130px}
.kb-section > summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; font-weight:650; font-size:16px; color:var(--text); padding:2px 0 12px; margin:0 0 4px; border-bottom:1px solid var(--line)}
.kb-section:not([open]) > summary{border-bottom:0; padding-bottom:2px; margin:0}
.kb-section > summary::-webkit-details-marker{display:none}
.kb-section > summary::before{content:""; width:10px; height:10px; border-radius:3px; background:var(--sec,var(--accent)); flex:0 0 auto}
.kb-section > summary::after{content:""; margin-left:auto; width:8px; height:8px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg); transition:transform .15s}
.kb-section:not([open]) > summary::after{transform:rotate(-45deg)}
.kb-section--a{--sec:var(--ic-green)} .kb-section--b{--sec:var(--ic-blue)} .kb-section--c{--sec:var(--ic-orange)}
.kb-section-body{padding-top:0}
.kb-stack{display:flex; flex-direction:column}
.kb-grid-2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 22px}
.kb-card{display:flex; flex-direction:column; gap:6px; padding:14px 0 10px; border-top:1px solid var(--line); background:none; border-left:0; border-radius:0}
.kb-stack > .kb-card:first-child{border-top:none; padding-top:6px}
.kb-card-head{display:flex; align-items:baseline; gap:9px}
.kb-ico{display:none}
.kb-card-head h3{font-weight:650; font-size:15px; margin:0; color:var(--text)}
.kb-help{font-size:13px; line-height:1.45; color:var(--muted)}
.kb-help b{color:var(--text-2)}
.kb-page textarea,.kb-page input[type=text],.kb-page input[type=email],.kb-page input[type=url],.kb-page select{
  width:100%; font:inherit; font-size:14.5px; line-height:1.5; color:var(--text); background:var(--field); border:1px solid var(--line-2); border-radius:var(--r-md); padding:10px 13px;
  resize:vertical; overflow:hidden; transition:border-color .15s, box-shadow .15s}
.kb-page input[type=text],.kb-page input[type=email],.kb-page input[type=url],.kb-page select{height:44px; padding:0 13px}
.kb-page select{appearance:auto; cursor:pointer}
.kb-page textarea:focus,.kb-page input:focus,.kb-page select:focus{outline:none; border-color:var(--accent-line); box-shadow:0 0 0 4px var(--accent-soft)}
.kb-ta-sm{min-height:64px} .kb-ta-md{min-height:96px} .kb-ta-lg{min-height:140px}
.kb-count{align-self:flex-end; font-size:12px; font-weight:550; color:var(--faint); font-variant-numeric:tabular-nums}
.kb-savebar{position:sticky; bottom:10px; z-index:5; margin-top:16px; padding:12px 14px; border-radius:var(--r-lg); display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--glass); border:1px solid var(--glass-border); box-shadow:var(--shadow-float); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur)}
.kb-savebar .btn.kb-save-btn,.kb-save-btn{height:42px; padding:0 22px; border:0; border-radius:var(--r-pill); background:var(--accent); color:var(--accent-ink); font-weight:650; font-size:14.5px; cursor:pointer;
  box-shadow:0 6px 18px -6px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.45)}
.kb-savebar .btn.kb-save-btn:disabled{opacity:.6; cursor:default}
.btn-sec{height:38px; padding:0 16px; border-radius:var(--r-pill); border:1px solid var(--btn-border); background:var(--btn); color:var(--text); font-weight:600; font-size:14px; cursor:pointer; align-self:flex-start}
.btn-sec:hover{background:var(--fill-2)} .btn-sec:disabled{opacity:.5; cursor:default}
.kb-unsaved{font-size:12.5px; font-weight:650; color:var(--warn); background:var(--warn-soft); padding:4px 11px; border-radius:var(--r-pill)}
.kb-msg{font-size:13.5px; color:var(--text-2)}
.kb-msg.ok{color:var(--ok); font-weight:600} .kb-msg.err{color:var(--bad); font-weight:600}
@media (max-width:720px){
  .kb-page{padding:0 0 8px}
  .kb-intro{flex-direction:row; align-items:center; gap:10px}
  .kb-intro p{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
  .kb-topbar{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; gap:8px; margin:0 -16px 10px; padding:6px 16px 10px; top:calc(-14px - env(safe-area-inset-top,0px))}
  .kb-topbar::-webkit-scrollbar{display:none}
  .kb-topbar a{flex:0 0 auto; height:38px; font-size:14px; white-space:nowrap; box-shadow:var(--glass-hi)}   /* sin sombra larga: el carrusel la recortaría */
  .kb-topbar-actions{display:none}
  .kb-section{padding:12px 14px 14px}
  .kb-grid-2{grid-template-columns:1fr}
  .kb-savebar{position:static; padding:10px 12px; gap:10px; margin-top:12px}
  .kb-savebar:has(.kb-unsaved:not([hidden])){position:sticky; bottom:8px}
  .kb-savebar .btn.kb-save-btn{flex:1 1 auto; height:48px; font-size:15px}
}

/* ── 9. Sin desenfoque (navegadores viejos): superficies sólidas, nada ilegible ── */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass,.panel,.card,.sidebar,.tab-caps,.tab-ai,.ui-sheet,.ui-toast,.md-box,.page-head,.kb-section,.kb-savebar,.kb-topbar a{background:var(--card-solid)!important}
  .ui-sheet-overlay,.md{background:rgba(5,7,11,.6)}
}