/* ═══════════════════════════════════════════════════════════════════════
   SISTEMA VISUAL BASE · Cuenta Aiden (ui2)
   Capa ADITIVA: no sustituye a dashboard.css. Se carga ENCIMA solo cuando
   el interruptor está activo, así producción sigue intacta hasta el día
   que se decida encender.
   Fuente: identidad real de aiden.es — Sora (títulos), Figtree (texto),
   JetBrains Mono (solo etiquetas en mayúsculas), teal de marca y neutros
   cálidos. Prototipo aprobado por Alex el 2 sep 2026.
   ═══════════════════════════════════════════════════════════════════════ */

.ac-app.ac-ui2{
  /* ── acento de marca ── */
  --u-accent:#107D69; --u-accent-hi:#0C6354; --u-accent-soft:#D0EFEA; --u-accent-line:#A3DFD5;
  --u-on-accent:#FFFFFF;
  --u-accent-2:#574A87;   /* púrpura Aiden, secundario */
  --u-accent-3:#C97A45;   /* ámbar Aiden, secundario */
  /* ── neutros cálidos ── */
  --u-ground:#F7F7F6; --u-surface:#FFFFFF; --u-surface-2:#FCFCFB; --u-sunken:#EFEFEE;
  --u-ink:#0A0A09; --u-ink-2:#52524E; --u-ink-3:#8A8A85;
  --u-line:#E5E5E3; --u-line-strong:#D4D4D1;
  /* ── semánticos (no son el acento) ── */
  --u-ok:#16A34A; --u-ok-soft:#F0FDF4; --u-ok-line:#DCFCE7;
  --u-warn:#B45309; --u-warn-soft:#FFFBEB; --u-warn-line:#FEF3C7; --u-warn-mark:#D97706;
  --u-crit:#BE123C; --u-crit-soft:#FFF1F2; --u-crit-line:#FFE4E6;
  /* ── tipografía ── */
  --u-fd:'Sora', system-ui, sans-serif;
  --u-fb:'Figtree', system-ui, sans-serif;
  --u-fm:'JetBrains Mono', ui-monospace, monospace;
  /* ── forma ── */
  --u-r-card:16px; --u-r-row:12px; --u-r-pill:999px;
  --u-shadow-1:0 1px 2px rgba(10,10,9,.05);
  --u-shadow-2:0 12px 32px -14px rgba(10,10,9,.22);
  --u-ease:cubic-bezier(.22,1,.36,1);

  background:var(--u-ground) !important;
  color:var(--u-ink) !important;
  font-family:var(--u-fb) !important;
}
@media (prefers-color-scheme: dark){
  .ac-app.ac-ui2:not([data-ui-theme="light"]){
    --u-accent:#35C6A8; --u-accent-hi:#5AD9BE; --u-accent-soft:rgba(53,198,168,.13); --u-accent-line:rgba(53,198,168,.3);
    --u-on-accent:#08221C; --u-accent-2:#8A76C4; --u-accent-3:#E0995F;
    --u-ground:#0F0F12; --u-surface:#17171B; --u-surface-2:#1B1B20; --u-sunken:#26262B;
    --u-ink:#FAFAFC; --u-ink-2:#B9B9C2; --u-ink-3:#8E8E9A;
    --u-line:#2C2C34; --u-line-strong:#3D3D48;
    --u-ok:#4ADE80; --u-ok-soft:rgba(74,222,128,.12); --u-ok-line:rgba(74,222,128,.26);
    --u-warn:#FBBF24; --u-warn-soft:rgba(251,191,36,.11); --u-warn-line:rgba(251,191,36,.26); --u-warn-mark:#FBBF24;
    --u-crit:#FB7185; --u-crit-soft:rgba(251,113,133,.12); --u-crit-line:rgba(251,113,133,.26);
    --u-shadow-1:0 1px 2px rgba(0,0,0,.4);
    --u-shadow-2:0 12px 32px -14px rgba(0,0,0,.7);
  }
}
.ac-app.ac-ui2[data-ui-theme="dark"]{
  --u-accent:#35C6A8; --u-accent-hi:#5AD9BE; --u-accent-soft:rgba(53,198,168,.13); --u-accent-line:rgba(53,198,168,.3);
  --u-on-accent:#08221C; --u-accent-2:#8A76C4; --u-accent-3:#E0995F;
  --u-ground:#0F0F12; --u-surface:#17171B; --u-surface-2:#1B1B20; --u-sunken:#26262B;
  --u-ink:#FAFAFC; --u-ink-2:#B9B9C2; --u-ink-3:#8E8E9A;
  --u-line:#2C2C34; --u-line-strong:#3D3D48;
  --u-ok:#4ADE80; --u-ok-soft:rgba(74,222,128,.12); --u-ok-line:rgba(74,222,128,.26);
  --u-warn:#FBBF24; --u-warn-soft:rgba(251,191,36,.11); --u-warn-line:rgba(251,191,36,.26); --u-warn-mark:#FBBF24;
  --u-crit:#FB7185; --u-crit-soft:rgba(251,113,133,.12); --u-crit-line:rgba(251,113,133,.26);
}

/* ── TIPOGRAFÍA ─────────────────────────────────────────────
   Regla de aiden.es: Sora titula, Figtree escribe, la mono SOLO
   etiqueta en mayúsculas. Las cifras van tabulares, nunca en mono. */
.ac-ui2 h1, .ac-ui2 h2, .ac-ui2 h3, .ac-ui2 h4{
  font-family:var(--u-fd); letter-spacing:-.032em; text-wrap:balance; color:var(--u-ink); margin:0;
}
.ac-ui2 .u-h1{font-size:clamp(26px,3vw,34px); font-weight:700}
.ac-ui2 .u-h2{font-size:19px; font-weight:700}
.ac-ui2 .u-h3{font-size:15.5px; font-weight:600; letter-spacing:-.018em}
.ac-ui2 .u-sub{color:var(--u-ink-2); font-size:14.5px; max-width:64ch; margin-top:7px}
.ac-ui2 .u-eyebrow{
  font-family:var(--u-fm); font-size:10.5px; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--u-ink-3);
}
.ac-ui2 .u-num{font-variant-numeric:tabular-nums; font-feature-settings:"tnum"}
.ac-ui2 .u-price{
  font-family:var(--u-fd); font-weight:800; letter-spacing:-.04em; font-size:30px;
  font-variant-numeric:tabular-nums; color:var(--u-ink); line-height:1.05;
}
.ac-ui2 .u-price small{font-family:var(--u-fb); font-size:13px; font-weight:500; color:var(--u-ink-3); letter-spacing:0}
.ac-ui2 .u-note{color:var(--u-ink-2); font-size:13px}

/* ── SUPERFICIES ── */
.ac-ui2 .u-card{
  background:var(--u-surface); border:1px solid var(--u-line);
  border-radius:var(--u-r-card); overflow:hidden;
}
.ac-ui2 .u-card + .u-card{margin-top:10px}
.ac-ui2 .u-pad{padding:20px 22px}
.ac-ui2 .u-stack{display:flex; flex-direction:column; gap:10px}
.ac-ui2 .u-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px}

/* ── FILAS ── */
.ac-ui2 .u-row{
  display:flex; align-items:center; gap:16px; width:100%; padding:15px 22px;
  border:0; background:transparent; text-align:left; color:inherit; font-size:14.5px;
  font-family:var(--u-fb); transition:background .14s var(--u-ease);
}
.ac-ui2 button.u-row{cursor:pointer}
.ac-ui2 button.u-row:hover{background:var(--u-surface-2)}
.ac-ui2 .u-row + .u-row{border-top:1px solid var(--u-line)}
.ac-ui2 .u-row-ico{width:20px; height:20px; flex:0 0 20px; color:var(--u-ink-3)}
.ac-ui2 .u-row-body{flex:1 1 auto; min-width:0}
.ac-ui2 .u-row-t{display:block; font-weight:500}
.ac-ui2 .u-row-s{display:block; color:var(--u-ink-2); font-size:13px; margin-top:2px}
.ac-ui2 .u-row-v{color:var(--u-ink-2); font-size:13.5px; text-align:right; white-space:nowrap}

/* ── BOTONES ── */
.ac-ui2 .u-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:38px; padding:0 18px; border-radius:var(--u-r-pill); border:1px solid transparent;
  font-family:var(--u-fb); font-size:14px; font-weight:600; cursor:pointer;
  background:transparent; color:var(--u-accent); text-decoration:none;
  transition:background .15s var(--u-ease), border-color .15s var(--u-ease);
}
.ac-ui2 .u-btn:hover{background:var(--u-accent-soft)}
.ac-ui2 .u-btn--p{background:var(--u-accent); color:var(--u-on-accent)}
.ac-ui2 .u-btn--p:hover{background:var(--u-accent-hi)}
.ac-ui2 .u-btn--o{border-color:var(--u-line-strong); color:var(--u-ink)}
.ac-ui2 .u-btn--o:hover{background:var(--u-surface-2); border-color:var(--u-accent)}
.ac-ui2 .u-btn--sm{height:32px; padding:0 14px; font-size:13px}
.ac-ui2 .u-btn--danger{color:var(--u-crit)}
.ac-ui2 .u-btn--danger:hover{background:var(--u-crit-soft)}
.ac-ui2 .u-btn:disabled{opacity:.55; cursor:default}

/* ── PÍLDORAS DE ESTADO ── */
.ac-ui2 .u-chip{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
  padding:4px 10px; border-radius:var(--u-r-pill); border:1px solid transparent; white-space:nowrap;
}
.ac-ui2 .u-chip i{width:6px; height:6px; border-radius:50%; background:currentColor; flex:0 0 6px}
.ac-ui2 .u-chip--ok{background:var(--u-ok-soft); color:var(--u-ok); border-color:var(--u-ok-line)}
.ac-ui2 .u-chip--warn{background:var(--u-warn-soft); color:var(--u-warn); border-color:var(--u-warn-line)}
.ac-ui2 .u-chip--crit{background:var(--u-crit-soft); color:var(--u-crit); border-color:var(--u-crit-line)}
.ac-ui2 .u-chip--accent{background:var(--u-accent-soft); color:var(--u-accent-hi); border-color:var(--u-accent-line)}
.ac-ui2 .u-chip--neutral{background:var(--u-sunken); color:var(--u-ink-2); border-color:var(--u-line)}

/* ── AVISO CON FRANJA DE SEVERIDAD ── */
.ac-ui2 .u-notice{
  display:flex; border:1px solid var(--u-line); border-radius:var(--u-r-card);
  background:var(--u-surface); overflow:hidden;
}
.ac-ui2 .u-notice-bar{flex:0 0 4px; background:var(--u-warn-mark)}
.ac-ui2 .u-notice--crit .u-notice-bar{background:var(--u-crit)}
.ac-ui2 .u-notice--ok .u-notice-bar{background:var(--u-ok)}
.ac-ui2 .u-notice-in{flex:1; display:flex; gap:14px; padding:18px 22px}
.ac-ui2 .u-notice-ico{flex:0 0 22px; color:var(--u-warn-mark)}
.ac-ui2 .u-notice--crit .u-notice-ico{color:var(--u-crit)}
.ac-ui2 .u-notice--ok .u-notice-ico{color:var(--u-ok)}
.ac-ui2 .u-notice p{margin:5px 0 0; color:var(--u-ink-2); font-size:13.5px; max-width:60ch}
.ac-ui2 .u-notice-acts{display:flex; gap:8px; margin-top:14px; flex-wrap:wrap}

/* ── TABLA ── */
.ac-ui2 .u-tablewrap{overflow-x:auto}
.ac-ui2 .u-table{width:100%; border-collapse:collapse; font-size:13.5px}
.ac-ui2 .u-table th{
  text-align:left; font-family:var(--u-fm); font-weight:600; font-size:10.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--u-ink-3);
  padding:12px 22px; border-bottom:1px solid var(--u-line); white-space:nowrap;
}
.ac-ui2 .u-table td{padding:13px 22px; border-bottom:1px solid var(--u-line); vertical-align:middle}
.ac-ui2 .u-table tr:last-child td{border-bottom:0}
.ac-ui2 .u-table tbody tr:hover{background:var(--u-surface-2)}
.ac-ui2 .u-table .u-right{text-align:right; font-variant-numeric:tabular-nums}

/* ── CAMPOS ── */
.ac-ui2 .u-label{display:block; font-size:12.5px; font-weight:500; color:var(--u-ink-2); margin:14px 0 6px}
.ac-ui2 .u-input{
  width:100%; height:42px; padding:0 14px; border-radius:10px; border:1px solid var(--u-line);
  background:var(--u-surface-2); color:var(--u-ink); font-family:var(--u-fb); font-size:14px; outline:none;
}
.ac-ui2 .u-input:focus{border-color:var(--u-accent); background:var(--u-surface)}
.ac-ui2 .u-switch{
  position:relative; width:42px; height:24px; flex:0 0 42px; border-radius:var(--u-r-pill);
  border:0; background:var(--u-line-strong); cursor:pointer; padding:0;
  transition:background .2s var(--u-ease);
}
.ac-ui2 .u-switch::after{
  content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
  background:#fff; box-shadow:var(--u-shadow-1); transition:transform .2s var(--u-ease);
}
.ac-ui2 .u-switch[aria-checked="true"]{background:var(--u-accent)}
.ac-ui2 .u-switch[aria-checked="true"]::after{transform:translateX(18px)}

/* ── PLANES ── */
.ac-ui2 .u-plan{border:1px solid var(--u-line); border-radius:var(--u-r-card); background:var(--u-surface); margin-bottom:10px}
.ac-ui2 .u-plan--reco{border:0; padding:1.5px; background:linear-gradient(100deg,#0C6354,#13967E 55%,#3EB09E)}
.ac-ui2 .u-plan-in{background:var(--u-surface); border-radius:14.5px; padding:18px 22px}
.ac-ui2 .u-plan-row{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.ac-ui2 .u-benefits{margin-top:12px}
.ac-ui2 .u-benefits summary{
  list-style:none; cursor:pointer; font-size:13.5px; font-weight:600; color:var(--u-accent);
  display:inline-flex; align-items:center; gap:6px;
}
.ac-ui2 .u-benefits summary::-webkit-details-marker{display:none}
.ac-ui2 .u-benefits summary::after{
  content:''; width:6px; height:6px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px); transition:transform .2s var(--u-ease);
}
.ac-ui2 .u-benefits[open] summary::after{transform:rotate(225deg)}
.ac-ui2 .u-benefits ul{list-style:none; margin:11px 0 0; padding:0; display:flex; flex-direction:column; gap:7px}
.ac-ui2 .u-benefits li{display:flex; gap:9px; font-size:13.5px; color:var(--u-ink-2)}
.ac-ui2 .u-benefits li svg{flex:0 0 15px; color:var(--u-accent); margin-top:2px}

/* ── FOCO Y MOVIMIENTO ── */
.ac-ui2 :focus-visible{outline:2px solid var(--u-accent); outline-offset:2px; border-radius:6px}
@media (prefers-reduced-motion: reduce){
  .ac-ui2 *, .ac-ui2 *::before, .ac-ui2 *::after{
    animation-duration:.001ms !important; transition-duration:.001ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   SECCIÓN «PLANES Y PAGO» con el sistema base.
   No se toca el HTML: la sección ya trabaja con variables --g1-*, así que
   aquí solo se reapuntan a los tokens del sistema y se corrige la
   tipografía (la sección nació calcada de una referencia con Roboto).
   Con el interruptor apagado, nada de esto se aplica.
   ═══════════════════════════════════════════════════════════════════════ */
.ac-ui2 .ac-g1-current,
.ac-ui2 .ac-g1-manage,
.ac-ui2 .ac-explore,
.ac-ui2 #ac-upgrade-modal{
  --g1-blue:var(--u-accent); --g1-blue-dark:var(--u-accent-hi); --g1-blue-soft:var(--u-accent-soft);
  --g1-border:var(--u-line); --g1-grey:var(--u-surface-2);
  --g1-ink:var(--u-ink); --g1-text:var(--u-ink-2); --g1-muted:var(--u-ink-3);
  --g1-card:var(--u-surface);
  font-family:var(--u-fb) !important;   /* fuera Roboto */
}

/* ── Tarjeta «Plan actual» ── */
.ac-ui2 .ac-g1-current{border-radius:var(--u-r-card); border-color:var(--u-line)}
.ac-ui2 .ac-g1-label{
  font-family:var(--u-fm); font-size:10.5px; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--u-ink-3);
}
.ac-ui2 .ac-g1-plan-name{
  font-family:var(--u-fd) !important; font-weight:700; letter-spacing:-.032em;
  font-size:25px; color:var(--u-ink);
}
.ac-ui2 .ac-g1-plan-sub{color:var(--u-ink-2); font-variant-numeric:tabular-nums}

/* ── Acordeón de gestión ── */
.ac-ui2 .ac-g1-manage-title{
  font-family:var(--u-fd) !important; font-weight:700; letter-spacing:-.032em;
  font-size:22px; color:var(--u-ink);
}
.ac-ui2 .ac-g1-acc{border-radius:var(--u-r-card)}
.ac-ui2 .ac-g1-acc-head, .ac-ui2 .ac-g1-acc-linkrow{
  font-family:var(--u-fb); font-weight:500; font-size:14.5px; color:var(--u-ink);
}
.ac-ui2 .ac-g1-acc-ico{color:var(--u-accent)}
.ac-ui2 .ac-g1-change-title{
  font-family:var(--u-fd) !important; font-weight:700; letter-spacing:-.03em;
  font-size:19px; color:var(--u-ink);
}

/* ── Selector de plan ── */
.ac-ui2 .ac-g1-caps{
  font-family:var(--u-fm); font-size:10.5px; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--u-ink-3);
}
.ac-ui2 .ac-g1-curplan{background:var(--u-surface-2); border-radius:var(--u-r-card)}
.ac-ui2 .ac-g1-curplan-name,
.ac-ui2 .ac-g1-plancard-name{
  font-family:var(--u-fd) !important; font-weight:600; letter-spacing:-.025em; color:var(--u-ink);
}
.ac-ui2 .ac-g1-curplan-desc, .ac-ui2 .ac-g1-plancard-desc{color:var(--u-ink-2)}
.ac-ui2 .ac-g1-curplan-price{font-variant-numeric:tabular-nums; color:var(--u-ink-2)}

/* el precio, protagonista: Sora con el tracking de la web */
.ac-ui2 .ac-g1-price{
  font-family:var(--u-fd) !important; font-weight:800; font-size:23px;
  letter-spacing:-.04em; font-variant-numeric:tabular-nums; color:var(--u-ink);
}
.ac-ui2 .ac-g1-price-note{color:var(--u-ink-3); font-size:12.5px}

/* tarjeta de plan y destacado con el degradado de marca */
.ac-ui2 .ac-g1-plancard{border-radius:var(--u-r-card); border-color:var(--u-line)}
.ac-ui2 .ac-g1-plancard.recommended{
  background:linear-gradient(100deg,#0C6354,#13967E 55%,#3EB09E) !important; padding:1.5px;
}
.ac-ui2 .ac-g1-plancard.recommended .ac-g1-plancard-body{border-radius:14.5px}
.ac-ui2 .ac-g1-reco{
  font-family:var(--u-fm); font-size:10.5px; font-weight:600; letter-spacing:.13em;
  color:var(--u-accent);
}
.ac-ui2 .ac-g1-current-tag{
  background:var(--u-accent-soft); color:var(--u-accent-hi);
  border:1px solid var(--u-accent-line); font-weight:600;
}

/* ── Botones de la sección ── */
.ac-ui2 .ac-g1-btn{
  font-family:var(--u-fb); font-weight:600; background:var(--u-accent); color:var(--u-on-accent);
  border-radius:var(--u-r-pill);
}
.ac-ui2 .ac-g1-btn:hover{background:var(--u-accent-hi); box-shadow:var(--u-shadow-1)}
.ac-ui2 .ac-g1-btn--outline{
  background:var(--u-surface); color:var(--u-accent); border:1px solid var(--u-line-strong);
}
.ac-ui2 .ac-g1-btn--outline:hover{background:var(--u-accent-soft); border-color:var(--u-accent)}
.ac-ui2 .ac-g1-link{font-family:var(--u-fb); font-weight:600; color:var(--u-accent)}

/* ── Beneficios plegados ── */
.ac-ui2 .ac-g1-benefits summary{font-family:var(--u-fb); font-weight:600; color:var(--u-accent)}
.ac-ui2 .ac-g1-benefits li{color:var(--u-ink-2); font-size:13.5px}
.ac-ui2 .ac-g1-benefits li svg{color:var(--u-accent)}

/* ── Servicios sueltos y explorador ── */
.ac-ui2 .ac-g1-subrow{border-bottom-color:var(--u-line)}
.ac-ui2 .ac-g1-subrow-name{font-weight:500; color:var(--u-ink)}
.ac-ui2 .ac-g1-subrow-meta{color:var(--u-ink-3); font-variant-numeric:tabular-nums}
.ac-ui2 .ac-explore-head h3{
  font-family:var(--u-fd) !important; font-weight:700; letter-spacing:-.032em;
  font-size:21px; color:var(--u-ink);
}
.ac-ui2 .ac-explore-head p{color:var(--u-ink-2)}
.ac-ui2 .ac-g1-tile{
  border-radius:var(--u-r-card); border-color:var(--u-line); background:var(--u-surface);
  transition:border-color .15s var(--u-ease), background .15s var(--u-ease);
}
.ac-ui2 .ac-g1-tile:hover{background:var(--u-surface-2); border-color:var(--u-accent)}
.ac-ui2 .ac-g1-tile.active{border-color:var(--u-accent); background:var(--u-accent-soft)}
.ac-ui2 .ac-g1-tile-ico{color:var(--u-accent)}
.ac-ui2 .ac-g1-tile-name{font-family:var(--u-fd); font-weight:600; letter-spacing:-.02em; color:var(--u-ink)}
.ac-ui2 .ac-g1-tile-price{color:var(--u-ink-2); font-variant-numeric:tabular-nums}
.ac-ui2 .ac-g1-back{font-family:var(--u-fb); font-weight:600; color:var(--u-accent)}

/* ═══════════════════════════════════════════════════════════════════════
   SECCIÓN «INICIO» y componentes base del panel.
   Estas piezas (tarjeta, botón, tabla, títulos) las comparten TODAS las
   secciones, así que al tematizarlas el panel entero adopta el sistema.
   Sigue siendo solo CSS bajo .ac-ui2: con el interruptor apagado no aplica.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tipografía del panel ── */
.ac-ui2 h1, .ac-ui2 h2, .ac-ui2 h3, .ac-ui2 h4{
  font-family:var(--u-fd) !important; letter-spacing:-.032em; color:var(--u-ink);
}
.ac-ui2 .ac-h-sub{color:var(--u-ink-2); font-size:14px}
.ac-ui2 .ac-card-section-title{
  font-family:var(--u-fm); font-size:10.5px; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--u-ink-3);
}
.ac-ui2 .ac-profile-label{
  font-family:var(--u-fm); font-size:10.5px; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; color:var(--u-ink-3);
}
.ac-ui2 .ac-profile-name{font-family:var(--u-fd); font-weight:700; letter-spacing:-.03em; color:var(--u-ink)}
.ac-ui2 .ac-profile-value{color:var(--u-ink); font-variant-numeric:tabular-nums}
.ac-ui2 .ac-text-link{color:var(--u-accent); font-weight:600}

/* ── Superficies ── */
.ac-ui2 .ac-card{
  background:var(--u-surface); border:1px solid var(--u-line);
  border-radius:var(--u-r-card); padding:24px;
}
.ac-ui2 .ac-profile-card{background:var(--u-surface); border-color:var(--u-line); border-radius:var(--u-r-card)}
.ac-ui2 .ac-other-subs, .ac-ui2 .ac-side-col .ac-card{border-radius:var(--u-r-card)}

/* ── Botones (los usa todo el panel) ──
   dashboard.css los declara con !important y con selectores de elemento
   (.ac-app button.ac-btn …), así que el tema necesita al menos la misma
   especificidad: por eso se encadenan las dos clases del botón. */
.ac-ui2 .ac-btn{font-family:var(--u-fb) !important; font-weight:600 !important; letter-spacing:-.005em; border-radius:var(--u-r-pill) !important}
.ac-ui2 .ac-btn.ac-btn--primary{background:var(--u-accent) !important; color:var(--u-on-accent) !important; border-color:transparent !important; box-shadow:none !important}
.ac-ui2 .ac-btn.ac-btn--primary:hover{background:var(--u-accent-hi) !important; color:var(--u-on-accent) !important; box-shadow:var(--u-shadow-1) !important}
.ac-ui2 .ac-btn.ac-btn--outline{background:var(--u-surface) !important; color:var(--u-ink) !important; border:1.5px solid var(--u-line-strong) !important}
.ac-ui2 .ac-btn.ac-btn--outline:hover{background:var(--u-accent-soft) !important; color:var(--u-accent) !important; border-color:var(--u-accent) !important}
.ac-ui2 .ac-btn.ac-btn--ghost{background:var(--u-sunken) !important; color:var(--u-ink-2) !important; border:1px solid var(--u-line) !important}
.ac-ui2 .ac-btn.ac-btn--ghost:hover{background:var(--u-line) !important; color:var(--u-ink) !important}
.ac-ui2 .ac-btn.ac-btn--danger{background:var(--u-crit-soft) !important; color:var(--u-crit) !important; border:1.5px solid var(--u-crit-line) !important}
.ac-ui2 .ac-btn.ac-btn--danger:hover{background:var(--u-crit-line) !important}

/* ── Tarjeta «Tu plan»: fuera el degradado pastel, entra el de marca ── */
.ac-ui2 .ac-plan-visual{
  background:linear-gradient(135deg,#0C6354 0%,#13967E 52%,#3EB09E 100%) !important;
  border-radius:var(--u-r-card);
}
.ac-ui2 .ac-plan-visual::before{
  background:radial-gradient(420px 220px at 85% 15%, rgba(255,255,255,.22) 0%, transparent 62%) !important;
}
.ac-ui2 .ac-plan-visual,
.ac-ui2 .ac-plan-visual *{color:#FFFFFF !important}
.ac-ui2 .ac-plan-visual .ac-plan-visual-icon{background:rgba(255,255,255,.94)}
.ac-ui2 .ac-plan-visual .ac-plan-visual-icon svg{color:var(--u-accent) !important}
.ac-ui2 .ac-plan-visual-meta{font-variant-numeric:tabular-nums; opacity:.92}
.ac-ui2 .ac-plan-discount-badge{
  background:rgba(255,255,255,.92) !important; color:#0C6354 !important;
  font-family:var(--u-fb); font-weight:700;
}
.ac-ui2 .ac-plan-info{color:var(--u-ink-2)}
.ac-ui2 .ac-plan-info strong, .ac-ui2 .ac-plan-info b{color:var(--u-ink)}

/* ── Tablas del panel ── */
.ac-ui2 .ac-table{font-size:13.5px}
.ac-ui2 .ac-table th{
  font-family:var(--u-fm); font-weight:600; font-size:10.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--u-ink-3); border-bottom-color:var(--u-line);
}
.ac-ui2 .ac-table td{border-bottom-color:var(--u-line); color:var(--u-ink)}
.ac-ui2 .ac-table tbody tr:hover{background:var(--u-surface-2)}

/* ── Píldoras de estado, en toda la aplicación ── */
.ac-ui2 .ac-pill{font-family:var(--u-fb); font-weight:600; border-radius:var(--u-r-pill)}
.ac-ui2 .ac-pill--green{background:var(--u-ok-soft); color:var(--u-ok); border:1px solid var(--u-ok-line)}
.ac-ui2 .ac-pill--amber{background:var(--u-warn-soft); color:var(--u-warn); border:1px solid var(--u-warn-line)}
.ac-ui2 .ac-pill--teal{background:var(--u-accent-soft); color:var(--u-accent-hi); border:1px solid var(--u-accent-line)}

/* ── Banner de soporte ── */
.ac-ui2 .ac-support-banner{
  background:var(--u-surface-2); border:1px solid var(--u-line);
  border-radius:var(--u-r-card); color:var(--u-ink-2);
}
.ac-ui2 .ac-support-banner strong{color:var(--u-ink)}

/* ── Navegación del panel ── */
.ac-ui2 .ac-nav-item{font-family:var(--u-fb); font-weight:500; color:var(--u-ink-2)}
.ac-ui2 .ac-nav-item:hover{color:var(--u-ink)}
.ac-ui2 .ac-nav-item.active{color:var(--u-accent); font-weight:600}
.ac-ui2 .ac-subnav-item{font-family:var(--u-fb); font-weight:500}
.ac-ui2 .ac-subnav-item.active{color:var(--u-accent); font-weight:600}

/* ═══════════════════════════════════════════════════════════════════════
   ESTRUCTURA NUEVA (u2-*): barra superior, rail lateral y portada.
   El contenido de las secciones es el del panel de siempre, así que aquí
   solo se coloca: se esconde la navegación antigua y se le da su sitio.
   ═══════════════════════════════════════════════════════════════════════ */
.ac-ui2.u2-shell{display:block; padding:0 !important; margin:0 !important; width:auto !important}
/* la navegación antigua sobra: ahora vive en el rail */
.u2-shell .ac-topnav{display:none !important}
.u2-shell .u2-content > .ac-app{margin:0 !important; width:auto !important; background:transparent !important}

/* ── Barra superior ── */
.u2-shell .u2-topbar{
  position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:14px;
  height:58px; padding:0 20px; background:color-mix(in srgb, var(--u-ground) 88%, transparent);
  backdrop-filter:saturate(1.25) blur(12px); border-bottom:1px solid transparent;
  transition:border-color .2s var(--u-ease);
}
.u2-shell .u2-topbar.stuck{border-bottom-color:var(--u-line)}
.u2-shell .u2-brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.u2-shell .u2-logo{height:20px; width:auto; display:block}
.u2-shell .u2-logo-txt{font-family:var(--u-fd); font-weight:700; font-size:19px; letter-spacing:-.04em; color:var(--u-ink)}
.u2-shell .u2-brand-sep{width:1px; height:16px; background:var(--u-line-strong)}
.u2-shell .u2-brand-sub{font-family:var(--u-fd); font-weight:500; font-size:15px; color:var(--u-ink-2); letter-spacing:-.02em}
.u2-shell .u2-search{
  flex:1 1 auto; max-width:480px; height:36px; display:flex; align-items:center; gap:10px;
  padding:0 14px; border-radius:var(--u-r-pill); background:var(--u-surface);
  border:1px solid var(--u-line); color:var(--u-ink-3); cursor:text; font-family:var(--u-fb);
  font-size:13.5px; transition:.15s var(--u-ease);
}
.u2-shell .u2-search:hover{border-color:var(--u-line-strong)}
.u2-shell .u2-kbd{
  font-family:var(--u-fm); font-size:10px; padding:2px 6px; border-radius:5px; margin-left:auto;
  background:var(--u-sunken); border:1px solid var(--u-line); color:var(--u-ink-3);
}
.u2-shell .u2-actions{display:flex; align-items:center; gap:4px; margin-left:auto}
.u2-shell .u2-iconbtn{
  width:34px; height:34px; border-radius:50%; border:0; background:transparent; color:var(--u-ink-2);
  display:grid; place-items:center; cursor:pointer; text-decoration:none; transition:.15s var(--u-ease);
}
.u2-shell .u2-iconbtn:hover{background:var(--u-sunken); color:var(--u-ink)}
.u2-shell .u2-avatar{
  width:31px; height:31px; border-radius:50%; overflow:hidden; display:grid; place-items:center;
  background:linear-gradient(140deg,#13967E,#0C6354); color:#fff; font-family:var(--u-fd);
  font-weight:700; font-size:12px; text-decoration:none; flex:0 0 31px;
}
.u2-shell .u2-avatar img{width:100%; height:100%; object-fit:cover}

/* ── Cuerpo y rail ── */
.u2-shell .u2-body{display:flex; align-items:flex-start; gap:26px; padding:0 20px 90px; max-width:1340px; margin:0 auto}
.u2-shell .u2-rail{
  position:sticky; top:58px; flex:0 0 250px; width:250px; padding:18px 0 28px;
  max-height:calc(100vh - 58px); overflow-y:auto; display:flex; flex-direction:column; gap:1px;
}
.u2-shell .u2-rail-eyebrow{
  font-family:var(--u-fm); font-size:10px; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--u-ink-3); padding:0 12px; margin-bottom:8px;
}
.u2-shell .u2-navitem{
  display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:var(--u-r-row);
  color:var(--u-ink-2); font-family:var(--u-fb); font-size:14px; font-weight:500;
  text-decoration:none; transition:background .14s var(--u-ease), color .14s var(--u-ease);
}
.u2-shell .u2-navitem:hover{background:var(--u-sunken); color:var(--u-ink); text-decoration:none}
.u2-shell .u2-navitem.on{background:var(--u-accent-soft); color:var(--u-accent-hi); font-weight:600}
.u2-shell .u2-navitem svg{flex:0 0 18px; opacity:.9}
.u2-shell .u2-dot{margin-left:auto; width:7px; height:7px; border-radius:50%; background:var(--u-warn-mark)}
.u2-shell .u2-rail-foot{
  margin-top:16px; padding:14px 12px 0; border-top:1px solid var(--u-line);
  display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12.5px;
}
.u2-shell .u2-rail-foot a{color:var(--u-ink-3); text-decoration:none}
.u2-shell .u2-main{flex:1 1 auto; min-width:0; padding-top:18px}

/* ── Portada ── */
.u2-shell .u2-hero{display:flex; flex-direction:column; align-items:center; text-align:center; padding:8px 0 26px}
.u2-shell .u2-hero-av{
  width:88px; height:88px; border-radius:50%; overflow:hidden; display:grid; place-items:center;
  background:linear-gradient(140deg,#0C6354,#13967E 55%,#3EB09E); color:#fff;
  font-family:var(--u-fd); font-weight:700; font-size:31px; letter-spacing:-.02em;
  box-shadow:var(--u-shadow-1);
}
.u2-shell .u2-hero-av img{width:100%; height:100%; object-fit:cover}
.u2-shell .u2-chip{
  margin-top:14px; display:inline-flex; align-items:center; font-family:var(--u-fb); font-size:12px;
  font-weight:600; padding:4px 12px; border-radius:var(--u-r-pill);
  background:var(--u-accent-soft); color:var(--u-accent-hi); border:1px solid var(--u-accent-line);
}
.u2-shell .u2-hero-name{
  font-family:var(--u-fd); font-size:clamp(25px,3.4vw,33px); font-weight:700;
  letter-spacing:-.035em; color:var(--u-ink); margin:12px 0 0;
}
.u2-shell .u2-hero-mail{color:var(--u-ink-2); font-size:14px; margin:4px 0 0}
.u2-shell .u2-quicks{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:18px}
.u2-shell .u2-quick{
  height:36px; padding:0 16px; display:inline-flex; align-items:center; border-radius:var(--u-r-pill);
  border:1px solid var(--u-line-strong); background:var(--u-surface); color:var(--u-ink);
  font-family:var(--u-fb); font-size:13.5px; font-weight:500; text-decoration:none;
  transition:.15s var(--u-ease);
}
.u2-shell .u2-quick:hover{border-color:var(--u-accent); color:var(--u-accent); background:var(--u-accent-soft); text-decoration:none}

/* ── Buscador ── */
.u2-shell .u2-scrim{
  position:fixed; inset:0; z-index:60; background:rgba(10,10,9,.42); backdrop-filter:blur(3px);
  display:flex; align-items:flex-start; justify-content:center; padding:12vh 20px 20px;
  opacity:0; pointer-events:none; transition:opacity .16s var(--u-ease);
}
.u2-shell .u2-scrim.open{opacity:1; pointer-events:auto}
.u2-shell .u2-palette{
  width:100%; max-width:560px; background:var(--u-surface); border:1px solid var(--u-line);
  border-radius:16px; box-shadow:var(--u-shadow-2); overflow:hidden; display:flex; flex-direction:column;
  max-height:68vh; transform:translateY(-10px) scale(.99); transition:transform .18s var(--u-ease);
}
.u2-shell .u2-scrim.open .u2-palette{transform:none}
.u2-shell .u2-palette-in{display:flex; align-items:center; gap:12px; padding:15px 18px; border-bottom:1px solid var(--u-line)}
.u2-shell .u2-palette-in input{flex:1; border:0; background:transparent; outline:none; font-family:var(--u-fb); font-size:15.5px; color:var(--u-ink)}
.u2-shell .u2-palette-list{overflow-y:auto; padding:7px}
.u2-shell .u2-pitem{
  display:flex; align-items:center; gap:12px; width:100%; padding:10px 12px; border:0; border-radius:9px;
  background:transparent; cursor:pointer; text-align:left; color:var(--u-ink); font-family:var(--u-fb);
  font-size:14px; text-decoration:none;
}
.u2-shell .u2-pitem.cur{background:var(--u-accent-soft); color:var(--u-accent-hi)}
.u2-shell .u2-pitem small{
  margin-left:auto; font-family:var(--u-fm); font-size:10px; color:var(--u-ink-3);
  letter-spacing:.08em; text-transform:uppercase;
}
.u2-shell .u2-pempty{padding:28px; text-align:center; color:var(--u-ink-3); font-size:14px}

/* ── Móvil ── */
.u2-shell .u2-mobilenav{display:none}
@media (max-width:1080px){ .u2-shell .u2-rail{flex:0 0 214px; width:214px} }
@media (max-width:900px){
  .u2-shell .u2-body{padding:0 14px 88px; gap:0}
  .u2-shell .u2-rail{
    position:fixed; left:0; right:0; bottom:0; top:auto; width:auto; max-height:72vh; z-index:50;
    background:var(--u-surface); border-top:1px solid var(--u-line); border-radius:18px 18px 0 0;
    box-shadow:var(--u-shadow-2); padding:8px 10px 20px; transform:translateY(103%);
    transition:transform .28s var(--u-ease);
  }
  .u2-shell .u2-rail::before{content:''; display:block; width:38px; height:4px; border-radius:2px; background:var(--u-line-strong); margin:4px auto 10px}
  .u2-shell .u2-rail.open{transform:none}
  .u2-shell .u2-mobilenav{
    display:flex; align-items:center; gap:9px; position:fixed; left:50%; bottom:16px;
    transform:translateX(-50%); z-index:45; height:42px; padding:0 20px; border:0; cursor:pointer;
    border-radius:var(--u-r-pill); background:var(--u-ink); color:var(--u-ground);
    font-family:var(--u-fb); font-size:14px; font-weight:600; box-shadow:var(--u-shadow-2);
  }
  .u2-shell .u2-search-txt{display:none}
  .u2-shell .u2-search{flex:0 0 36px; width:36px; padding:0; justify-content:center}
  .u2-shell .u2-search .u2-kbd{display:none}
  .u2-shell .u2-brand-sub, .u2-shell .u2-brand-sep{display:none}
}

/* ── Componentes de las vistas nuevas (u2): secciones, tiles, gráfico, filas ── */
.u2-shell .u2-sec{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:30px 0 12px}
.u2-shell .u2-sec-h{font-family:var(--u-fd); font-size:16px; font-weight:600; letter-spacing:-.02em; color:var(--u-ink)}
.u2-shell .u2-sec-link{font-family:var(--u-fb); font-size:13.5px; font-weight:600; color:var(--u-accent); text-decoration:none}
.u2-shell .u2-note{color:var(--u-ink-2); font-size:13px; margin:3px 0 0}
.u2-shell .u2-num{font-variant-numeric:tabular-nums}
.u2-shell .u2-foot{color:var(--u-ink-3); font-size:12.5px; margin:36px 0 0; max-width:60ch}

.u2-shell .u2-card{background:var(--u-surface); border:1px solid var(--u-line); border-radius:var(--u-r-card); padding:20px 22px}
.u2-shell .u2-card.u2-rows{padding:0}

.u2-shell .u2-tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(238px,1fr)); gap:10px}
.u2-shell .u2-tile{
  display:flex; flex-direction:column; gap:7px; padding:16px; border-radius:var(--u-r-card);
  border:1px solid var(--u-line); background:var(--u-surface); text-decoration:none;
  transition:.16s var(--u-ease);
}
.u2-shell .u2-tile:hover{border-color:var(--u-accent); background:var(--u-surface-2); text-decoration:none; transform:translateY(-1px)}
.u2-shell .u2-tile-top{display:flex; align-items:center; justify-content:space-between; gap:8px}
.u2-shell .u2-tile-ico{width:32px; height:32px; border-radius:9px; display:grid; place-items:center; background:var(--u-accent-soft); color:var(--u-accent-hi)}
.u2-shell .u2-tile-n{font-family:var(--u-fd); font-size:14.5px; font-weight:600; letter-spacing:-.02em; color:var(--u-ink)}
.u2-shell .u2-tile-d{font-size:12.5px; color:var(--u-ink-2)}
.u2-shell .u2-tile-f{margin-top:4px; padding-top:9px; border-top:1px solid var(--u-line); font-size:13px; color:var(--u-ink-2); font-weight:600}
.u2-shell .u2-badge{display:inline-flex; align-items:center; gap:6px; font-family:var(--u-fb); font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:var(--u-r-pill); border:1px solid transparent}
.u2-shell .u2-badge i{width:5px; height:5px; border-radius:50%; background:currentColor}
.u2-shell .u2-badge--ok{background:var(--u-ok-soft); color:var(--u-ok); border-color:var(--u-ok-line)}
.u2-shell .u2-badge--warn{background:var(--u-warn-soft); color:var(--u-warn); border-color:var(--u-warn-line)}

.u2-shell .u2-chart-head{display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:8px}
.u2-shell .u2-chart-t{font-family:var(--u-fb); font-size:14px; font-weight:600; color:var(--u-ink)}
.u2-shell .u2-chart{margin-top:10px; overflow:visible; display:block}
.u2-shell .u2-grid{stroke:var(--u-line); stroke-width:1}
.u2-shell .u2-bar{fill:var(--u-accent); transition:opacity .15s var(--u-ease)}
.u2-shell .u2-chart:hover .u2-bar{opacity:.42}
.u2-shell .u2-chart .u2-bar:hover{opacity:1}
.u2-shell .u2-tick{font-family:var(--u-fm); font-size:10px; fill:var(--u-ink-3)}
.u2-shell .u2-axis{font-family:var(--u-fb); font-size:11px; fill:var(--u-ink-2)}
.u2-shell .u2-val{font-family:var(--u-fd); font-size:11.5px; font-weight:600; fill:var(--u-ink)}

.u2-shell .u2-row{
  display:flex; align-items:center; gap:16px; padding:15px 22px; text-decoration:none;
  color:var(--u-ink); font-size:14.5px; transition:background .14s var(--u-ease);
}
.u2-shell .u2-row:hover{background:var(--u-surface-2); text-decoration:none}
.u2-shell .u2-row + .u2-row{border-top:1px solid var(--u-line)}
.u2-shell .u2-row-ico{width:20px; height:20px; flex:0 0 20px; color:var(--u-ink-3)}
.u2-shell .u2-row-body{flex:1 1 auto; min-width:0}
.u2-shell .u2-row-t{display:block; font-weight:500}
.u2-shell .u2-row-s{display:block; color:var(--u-ink-2); font-size:13px; margin-top:2px}
.u2-shell .u2-chev{color:var(--u-ink-3); flex:0 0 auto; transition:transform .18s var(--u-ease)}
.u2-shell .u2-row:hover .u2-chev{transform:translateX(3px)}

.u2-shell .u2-notice{display:flex; border:1px solid var(--u-line); border-radius:var(--u-r-card); background:var(--u-surface); overflow:hidden; margin-bottom:6px}
.u2-shell .u2-notice-bar{flex:0 0 4px; background:var(--u-warn-mark)}
.u2-shell .u2-notice--crit .u2-notice-bar{background:var(--u-crit)}
.u2-shell .u2-notice-in{flex:1; display:flex; gap:14px; padding:18px 22px}
.u2-shell .u2-notice-ico{flex:0 0 22px; color:var(--u-crit)}
.u2-shell .u2-notice h3{font-family:var(--u-fd); font-size:15.5px; font-weight:600; color:var(--u-ink)}
.u2-shell .u2-notice p{margin:5px 0 0; color:var(--u-ink-2); font-size:13.5px; max-width:60ch}
.u2-shell .u2-notice-acts{display:flex; gap:8px; margin-top:14px; flex-wrap:wrap}
.u2-shell .u2-btn{
  display:inline-flex; align-items:center; justify-content:center; height:36px; padding:0 17px;
  border-radius:var(--u-r-pill); border:1px solid transparent; font-family:var(--u-fb);
  font-size:13.5px; font-weight:600; text-decoration:none; cursor:pointer;
  background:transparent; color:var(--u-accent); transition:.15s var(--u-ease);
}
.u2-shell .u2-btn--p{background:var(--u-accent); color:var(--u-on-accent)}
.u2-shell .u2-btn--p:hover{background:var(--u-accent-hi); text-decoration:none}
.u2-shell .u2-btn--o{border-color:var(--u-line-strong); color:var(--u-ink); background:var(--u-surface)}
.u2-shell .u2-btn--o:hover{border-color:var(--u-accent); color:var(--u-accent); text-decoration:none}