/* ============ TOKENS ============ */
.u2app{
  --ground:#EDF1F0;
  --surface:#FFFFFF;
  --surface-2:#F4F8F7;
  --surface-3:#E7EEEC;
  --ink:#0F1B18;
  --ink-2:#54615D;
  /* Terciario. Estos tres valores están calculados para pasar AA (4,5:1) sobre
     LAS CUATRO superficies del tema, no solo sobre el fondo: el anterior se
     quedaba en 3,1–3,7 y afectaba a texto que se lee de verdad (el «Cuenta» de
     la marca, el buscador, los enlaces del pie). */
  --ink-3:#626D6A;
  --line:#DEE6E4;
  --line-strong:#C6D3D0;
  --accent:#107D69;
  --accent-hover:#0C6354;
  --accent-soft:#D5EFE8;
  --accent-ink:#085346;
  --on-accent:#FFFFFF;
  /* El degradado de marca (avatar, marca del menu) es el mismo en claro y
     oscuro, asi que su texto NO puede seguir a --on-accent, que se invierte. */
  --on-brand:#FFFFFF;
  --good:#1E8E4A; --good-soft:#DBF2E3;
  --warn:#8A5A00; --warn-soft:#FFF3D3; --warn-mark:#E0A21A;
  --crit:#B3261E; --crit-soft:#FBE3E1;
  --chip-teal-bg:#D5EFE8; --chip-teal-fg:#0B6455;
  --chip-green-bg:#DCF2E1; --chip-green-fg:#1B7A3E;
  --chip-sky-bg:#DAEAF7;  --chip-sky-fg:#175C8F;
  --chip-violet-bg:#E6E1F9;--chip-violet-fg:#4B3A9E;
  --chip-amber-bg:#FCEBCF; --chip-amber-fg:#8A5A00;
  --chip-rose-bg:#FBE0E6;  --chip-rose-fg:#9B2C4A;
  --cat-1:#12866F; --cat-2:#6E56CF; --cat-3:#C77700;
  --shadow-1:0 1px 2px rgba(15,27,24,.06);
  --shadow-2:0 8px 28px -12px rgba(15,27,24,.24), 0 2px 6px rgba(15,27,24,.06);
  --shadow-3:0 24px 60px -18px rgba(15,27,24,.34);
  --r-card:26px; --r-row:16px; --r-pill:999px;
  --rail-w:288px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
@media (prefers-color-scheme: dark){
  .u2app:not([data-ui-theme="light"]){
    --ground:#0C100F;
    --surface:#151C1A;
    --surface-2:#1B2422;
    --surface-3:#232D2B;
    --ink:#E7EDEB;
    --ink-2:#A3B0AC;
    --ink-3:#869590;
    --line:#26302E;
    --line-strong:#374340;
    --accent:#35C6A8;
    --accent-hover:#5AD9BE;
    --accent-soft:#0E332D;
    --accent-ink:#8AEFD6;
    --on-accent:#04211B;
    --good:#4ED07E; --good-soft:#123424;
    --warn:#E9B44C; --warn-soft:#332711; --warn-mark:#E9B44C;
    --crit:#FF8A80; --crit-soft:#3A1714;
    --chip-teal-bg:#0F3831; --chip-teal-fg:#5FE3C4;
    --chip-green-bg:#13341F; --chip-green-fg:#68DA92;
    --chip-sky-bg:#122C3F;  --chip-sky-fg:#7CC2F0;
    --chip-violet-bg:#221C3E;--chip-violet-fg:#B3A4F5;
    --chip-amber-bg:#33280F; --chip-amber-fg:#EFC271;
    --chip-rose-bg:#38151F;  --chip-rose-fg:#F09BB2;
    --cat-1:#23A98A; --cat-2:#8878D8; --cat-3:#C4841F;
    --shadow-1:0 1px 2px rgba(0,0,0,.5);
    --shadow-2:0 8px 28px -12px rgba(0,0,0,.7), 0 2px 6px rgba(0,0,0,.4);
    --shadow-3:0 24px 60px -18px rgba(0,0,0,.8);
  }
}
.u2app[data-ui-theme="dark"]{
  --ground:#0C100F; --surface:#151C1A; --surface-2:#1B2422; --surface-3:#232D2B;
  --ink:#E7EDEB; --ink-2:#A3B0AC; --ink-3:#869590;
  --line:#26302E; --line-strong:#374340;
  --accent:#35C6A8; --accent-hover:#5AD9BE; --accent-soft:#0E332D; --accent-ink:#8AEFD6; --on-accent:#04211B;
  --good:#4ED07E; --good-soft:#123424;
  --warn:#E9B44C; --warn-soft:#332711; --warn-mark:#E9B44C;
  --crit:#FF8A80; --crit-soft:#3A1714;
  --chip-teal-bg:#0F3831; --chip-teal-fg:#5FE3C4;
  --chip-green-bg:#13341F; --chip-green-fg:#68DA92;
  --chip-sky-bg:#122C3F;  --chip-sky-fg:#7CC2F0;
  --chip-violet-bg:#221C3E;--chip-violet-fg:#B3A4F5;
  --chip-amber-bg:#33280F; --chip-amber-fg:#EFC271;
  --chip-rose-bg:#38151F;  --chip-rose-fg:#F09BB2;
  --cat-1:#23A98A; --cat-2:#8878D8; --cat-3:#C4841F;
  --shadow-1:0 1px 2px rgba(0,0,0,.5);
  --shadow-2:0 8px 28px -12px rgba(0,0,0,.7), 0 2px 6px rgba(0,0,0,.4);
  --shadow-3:0 24px 60px -18px rgba(0,0,0,.8);
}

*,*::before,*::after{box-sizing:border-box;}
.u2app{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:"Sora","Figtree",sans-serif; margin:0; text-wrap:balance; letter-spacing:-.02em;}
button,input,select{font:inherit; color:inherit;}
a{color:var(--accent); text-decoration:none;}
a:hover{text-decoration:underline;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px;}
.u2app .mono{font-family:"JetBrains Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums;}

/* ============ TOP BAR ============ */
.u2app .topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:16px;
  padding:10px 20px; height:64px;
  background:color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.u2app .topbar.is-stuck{border-bottom-color:var(--line);}
.u2app .brand{display:flex; align-items:center; gap:9px; flex:0 0 auto; cursor:pointer; background:none;border:0;padding:4px 6px;border-radius:12px;}
.u2app .brand-mark{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(140deg,#107D69,#13967E 60%,#3EB09E);
  color:var(--on-brand); font-family:"Sora"; font-weight:700; font-size:14px; flex:0 0 auto;}
/* «Cuenta» acompaña al logotipo, no compite con él: más pequeño y con aire,
   como el «One» de Google One al lado de su marca. */
.u2app .brand-name{font-family:"Sora"; font-size:15px; letter-spacing:-.01em; white-space:nowrap;
  padding-left:11px; margin-left:3px; border-left:1px solid var(--line);
  /* Un pelo abajo: con Sora, la caja del texto queda alta respecto al logo. */
  position:relative; top:1px;}
.u2app .brand-name b{font-weight:700;}
.u2app .brand-name span{font-weight:500; color:var(--ink-2);}
.u2app .topsearch{
  flex:1 1 auto; max-width:720px; height:44px;
  display:flex; align-items:center; gap:12px;
  padding:0 18px; border-radius:var(--r-pill);
  background:var(--surface-3); border:1px solid transparent;
  color:var(--ink-3); cursor:text; transition:.18s var(--ease);
}
.u2app .topsearch:hover{background:var(--surface); box-shadow:var(--shadow-1); border-color:var(--line);}
.u2app .topsearch .kbd{margin-left:auto;}
.u2app .kbd{font-family:"JetBrains Mono",monospace; font-size:11px; padding:3px 7px; border-radius:7px;
  background:var(--surface); border:1px solid var(--line); color:var(--ink-3); white-space:nowrap;}
.u2app .topbar-actions{display:flex; align-items:center; gap:6px; margin-left:auto;}
.u2app .iconbtn{
  width:40px;height:40px;border-radius:50%;border:0;background:transparent;color:var(--ink-2);
  display:grid;place-items:center;cursor:pointer;transition:.15s var(--ease);
}
.u2app .iconbtn:hover{background:var(--surface-3); color:var(--ink);}
.u2app .proto-pill{
  font-size:11px; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 11px; border-radius:var(--r-pill); background:var(--warn-soft); color:var(--warn);
  border:1px solid color-mix(in srgb,var(--warn) 24%, transparent); white-space:nowrap;
}
.u2app .avatar-btn{width:36px;height:36px;flex:0 0 36px;border-radius:50%;padding:2px;border:2px solid var(--accent);box-sizing:border-box;overflow:hidden;
  background:transparent;cursor:pointer;display:grid;place-items:center;}

/* ============ SHELL ============ */
.u2app .shell{display:flex; align-items:flex-start; gap:0; padding:0 20px 96px;}
.u2app .rail{
  position:sticky; top:64px; flex:0 0 var(--rail-w); width:var(--rail-w);
  max-height:calc(100vh - 64px); overflow-y:auto; overscroll-behavior:contain;
  padding:14px 8px 28px; display:flex; flex-direction:column; gap:2px;
  scrollbar-width:thin;
}
.u2app .navitem{
  display:flex; align-items:center; gap:14px; width:100%;
  padding:8px 18px 8px 8px; border:0; background:transparent; cursor:pointer;
  border-radius:var(--r-pill); text-align:left; color:var(--ink);
  font-size:14.5px; transition:background .16s var(--ease), color .16s var(--ease);
}
.u2app .navitem:hover{background:var(--surface-3);}
.u2app .navitem.is-active{background:var(--accent-soft); color:var(--accent-ink); font-weight:500;}
.u2app .navchip{
  width:38px;height:38px;border-radius:50%;flex:0 0 38px;display:grid;place-items:center;
  transition:transform .3s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.u2app .navitem:hover .navchip{transform:scale(1.07) rotate(-4deg);}
.u2app .navitem.is-active .navchip{background:var(--accent); color:var(--on-accent);}
.u2app .tone-teal{background:var(--chip-teal-bg);color:var(--chip-teal-fg);}
.u2app .tone-green{background:var(--chip-green-bg);color:var(--chip-green-fg);}
.u2app .tone-sky{background:var(--chip-sky-bg);color:var(--chip-sky-fg);}
.u2app .tone-violet{background:var(--chip-violet-bg);color:var(--chip-violet-fg);}
.u2app .tone-amber{background:var(--chip-amber-bg);color:var(--chip-amber-fg);}
.u2app .tone-rose{background:var(--chip-rose-bg);color:var(--chip-rose-fg);}
.u2app .navdot{margin-left:auto; width:8px;height:8px;border-radius:50%;background:var(--warn-mark);flex:0 0 8px;}
.u2app .rail-foot{margin-top:22px; padding:0 18px; display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12.5px;}
.u2app .rail-foot a{color:var(--ink-3);}

.u2app .main{flex:1 1 auto; min-width:0; display:flex; justify-content:center; padding:8px 0 0;}
.u2app .column{width:100%; max-width:840px; padding:0 4px 80px;}

/* ============ SHARED PIECES ============ */
.u2app .page-head{margin:34px 0 34px;}
.u2app .page-title{font-size:clamp(29px,3.4vw,40px); font-weight:600; letter-spacing:-.03em; line-height:1.12;}
.u2app .page-sub{color:var(--ink-2); margin-top:10px; max-width:56ch; font-size:15.5px; line-height:1.55;}
.u2app .section-label{font-size:19px; font-weight:600; margin:52px 0 16px; color:var(--ink);
  letter-spacing:-.02em;}
/* Lo primero de la página no necesita separarse de nada. */
.u2app .page-head + .section-label{margin-top:8px;}
.u2app .section-note{color:var(--ink-2); font-size:14.5px; margin:-10px 0 16px; max-width:56ch; line-height:1.5;}

.u2app .card{background:var(--surface); border-radius:var(--r-card); border:1px solid var(--line); overflow:hidden;}
.u2app .card + .card{margin-top:12px;}
/* ── Filas sueltas ───────────────────────────────────────────────────
   Cada fila con su propia tarjeta y aire alrededor, en vez de un bloque
   continuo con rayas. Se lee mejor y da personalidad a las secciones de
   ajustes, que son casi todas listas. */
.u2app .card.sueltas{background:transparent;box-shadow:none;border:0;overflow:visible;border-radius:0;
  display:flex;flex-direction:column;gap:12px;}
.u2app .card.sueltas .row{background:var(--surface);border-radius:var(--r-row);
  box-shadow:none;border:1px solid var(--line);padding:19px 22px;}
.u2app .card.sueltas .row + .row{border-top:0;}
.u2app .card.sueltas .row:hover{background:var(--surface-2);}
.u2app .card.sueltas .row-static:hover{background:var(--surface);}

/* ── El icono de una fila, con su color ──────────────────────────────
   Un glifo gris suelto no dice nada; en un círculo con el tono de su
   sección se reconoce de un vistazo. */
.u2app .row-icon.row-chip{width:40px;height:40px;flex:0 0 40px;border-radius:13px;
  display:grid;place-items:center;background:transparent;color:var(--ink-3);}
.u2app .row-icon.row-chip svg{width:21px;height:21px;stroke-width:1.6;}
.u2app .row:hover .row-icon.row-chip{color:var(--ink-2);}
@media (max-width:640px){ .u2app .row-icon.row-chip{width:36px;height:36px;flex:0 0 36px;border-radius:12px;} }
.u2app .stack{display:flex; flex-direction:column; gap:10px;}
.u2app .pad{padding:26px 28px;}

.u2app .row{
  display:flex; align-items:center; gap:15px; width:100%;
  padding:20px 26px; border:0; background:transparent; text-align:left; color:inherit;
  cursor:pointer; transition:background .14s var(--ease);
  font-size:15px;
}
.u2app .row:hover{background:var(--surface-2);}
.u2app .row + .row{border-top:1px solid var(--line);}
.u2app .row-static{cursor:default;}
.u2app .row-static:hover{background:transparent;}
.u2app .row-body{flex:1 1 auto; min-width:0;}
.u2app .row-title{display:block; font-size:15.5px;}
.u2app .row-sub{display:block; color:var(--ink-2); font-size:13.5px; margin-top:4px; line-height:1.45;}
/* `flex:0 0 auto` a propósito: con overflow:hidden el elemento flexible pierde
   su tamaño mínimo automático y la columna se encogía por debajo del texto
   aunque la fila midiera 830 px. En español «/mes» cabía por los pelos; al
   traducir, «/mês» y «/månad» ya no. El max-width sigue poniendo el techo. */
.u2app .row-value{color:var(--ink-2); font-size:14.5px; text-align:right; white-space:nowrap;
  flex:0 0 auto; max-width:46%; overflow:hidden; text-overflow:ellipsis;}
.u2app .row-icon{width:24px;height:24px;flex:0 0 24px;color:var(--ink-2);display:grid;place-items:center;}
.u2app .chev{color:var(--ink-3); flex:0 0 auto; transition:transform .2s var(--ease);}
.u2app .row:hover .chev{transform:translateX(3px);}

.u2app .chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;
  padding:4px 10px;border-radius:var(--r-pill); white-space:nowrap;}
.u2app .chip .dot{width:6px;height:6px;border-radius:50%;background:currentColor;}
.u2app .chip-good{background:var(--good-soft);color:var(--good);}
.u2app .chip{font-weight:600;}
/* Lo que está bien lleva su check, como en cualquier panel de cuenta serio. */
.u2app .chip-good .dot{width:auto;height:auto;border-radius:0;background:none;position:relative;}
.u2app .chip-good .dot::before{content:"✓";font-size:12px;line-height:1;font-weight:700;}
.u2app .chip-warn{background:var(--warn-soft);color:var(--warn);}
.u2app .chip-crit{background:var(--crit-soft);color:var(--crit);}
.u2app .chip-neutral{background:var(--surface-3);color:var(--ink-2);}
.u2app .chip-accent{background:var(--accent-soft);color:var(--accent-ink);}

.u2app .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:40px;padding:0 20px;border-radius:var(--r-pill);border:1px solid transparent;
  font-size:14px;font-weight:500;cursor:pointer;transition:.16s var(--ease);
  background:transparent;color:var(--accent);
}
.u2app .btn:hover{background:var(--accent-soft);}
.u2app .btn-primary{background:var(--accent);color:var(--on-accent);}
.u2app .btn-primary:hover{background:var(--accent-hover);}
.u2app .btn-outline{border-color:var(--line-strong);color:var(--ink);}
.u2app .btn-outline:hover{background:var(--surface-2);}
.u2app .btn-warn{background:var(--warn-mark);color:#2A1D00;}
.u2app .btn-warn:hover{filter:brightness(1.07);}
.u2app .btn-sm{height:34px;padding:0 15px;font-size:13.5px;}
/* Botón de solo icono: cuadrado y discreto hasta que se pasa por encima. */
/* Los controles de una fila van juntos y en una sola línea. */
.u2app .row-acciones{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.u2app .row-acciones .btn{white-space:nowrap;}
@media (max-width:640px){
  /* En un móvil no caben texto y BOTONES en la misma línea: el texto se
     partía palabra a palabra y los controles quedaban encima. Se apila —pero
     SOLO la fila que lleva botones. Una fila normal (icono, texto, valor)
     cabe de sobra en una línea, y apilarla la hacía tres veces más alta de lo
     necesario. */
  .u2app .row:has(.row-acciones){flex-wrap:wrap; row-gap:12px;}
  .u2app .row:has(.row-acciones) .row-body{flex:1 1 100%; min-width:100%;}
  .u2app .row-acciones{flex-wrap:wrap; justify-content:flex-start; width:100%;}
  .u2app .row:has(.row-acciones) > .chev{margin-left:auto;}
  /* En pantalla estrecha el valor envuelve en vez de recortarse: «Siempre
     disponible» se quedaba en «Siempr…», que no dice nada, y un correo en
     «security@ai…». Partido en dos líneas se lee entero. */
  .u2app .row-value{max-width:56%; white-space:normal; overflow-wrap:break-word; line-height:1.35;
    /* Y overflow VISIBLE: con overflow:hidden el elemento flexible pierde su
       tamaño mínimo automático y la columna se encogía por debajo de su palabra
       más larga — por eso «disponible» acababa partido aunque hubiera sitio. */
    overflow:visible; text-overflow:clip;}
  /* break-word, NO anywhere: «anywhere» además encoge la columna al mínimo y
     partía «disponible» por la mitad. Así solo rompe si una palabra no cabe. */
}
/* ── Elegir tema: tres tarjetas con su muestra ── */
/* Elegir tema: una lista de opciones como las demás del panel, no tres
   cuadros con dibujitos. */
/* Apariencia: tres miniaturas del panel en vez de tres radios. El único color
   que aparece aquí ES el resultado, así que significa algo. Las miniaturas van
   con valores fijos a propósito: la de «claro» tiene que verse clara aunque
   estés en oscuro, y al revés. */
.u2app .temas{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.u2app .tema{display:block;width:100%;padding:0;background:none;border:0;
  cursor:pointer;text-align:left;color:inherit;font:inherit;}
.u2app .tema-vista{position:relative;display:block;height:74px;border-radius:12px;
  overflow:hidden;border:1px solid var(--line);transition:border-color .15s,box-shadow .15s;}
.u2app .tv-cara{position:absolute;inset:0;}
.u2app .tv-claro{background:#F4F7F6;}
.u2app .tv-oscuro{background:#0C100F;}
.u2app .tv-cara i{position:absolute;display:block;border-radius:3px;}
.u2app .tv-cara i:nth-child(1){left:8px;right:8px;top:9px;height:11px;}
.u2app .tv-cara i:nth-child(2){left:8px;top:27px;width:54%;height:7px;}
.u2app .tv-claro i:nth-child(1){background:#FFFFFF;box-shadow:0 0 0 1px #E3EAE8;}
.u2app .tv-claro i:nth-child(2){background:#C6D3D0;}
.u2app .tv-oscuro i:nth-child(1){background:#151C1A;box-shadow:0 0 0 1px #232D2A;}
.u2app .tv-oscuro i:nth-child(2){background:#3A4441;}
.u2app .v-light .tv-oscuro{display:none;}
.u2app .v-dark .tv-claro{display:none;}
.u2app .v-auto .tv-oscuro{clip-path:inset(0 0 0 50%);}
.u2app .tema:hover .tema-vista{border-color:var(--line-strong);}
.u2app .tema.is-picked .tema-vista{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:1px;}
.u2app .tema-nombre{display:block;margin-top:9px;font-size:14.5px;font-weight:500;}
.u2app .tema.is-picked .tema-nombre{color:var(--accent-ink);}
.u2app .tema-nota{display:block;font-size:12.5px;color:var(--ink-3);margin-top:1px;line-height:1.35;}
.u2app .tema:focus-visible .tema-vista{outline:2px solid var(--accent);outline-offset:2px;}
.u2app .btn-icon{width:34px;padding:0;justify-content:center;color:var(--ink-3);border-color:transparent;background:transparent;}
.u2app .btn-icon:hover{color:var(--crit);background:var(--crit-soft);}
.u2app .btn-danger{color:var(--crit);}
.u2app .btn-danger:hover{background:var(--crit-soft);}

/* alert */
.u2app .alert{display:flex; gap:16px; padding:22px 26px; border-radius:var(--r-card); background:var(--warn-soft);}
.u2app .alert-icon{flex:0 0 24px;color:var(--warn-mark);}
.u2app .alert h3{font-size:16px;font-weight:600;}
.u2app .alert p{margin:6px 0 0;color:var(--ink-2);font-size:14px;}
.u2app .alert-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px;}

/* hero */
.u2app .hero{display:flex;flex-direction:column;align-items:center;padding:26px 0 8px;}
.u2app .hero-shapes{position:relative;display:flex;align-items:center;justify-content:center;gap:26px;height:140px;}
.u2app .shape{width:56px;height:56px;flex:0 0 56px;}
.u2app .shape-ring{border-radius:50%;background:var(--cat-2);
  -webkit-mask:radial-gradient(circle at 60% 50%, transparent 34%, #000 35%);
  mask:radial-gradient(circle at 60% 50%, transparent 34%, #000 35%);
  animation:float1 7s var(--ease) infinite;}
.u2app .shape-blob{background:linear-gradient(150deg,#3EB09E,var(--accent));
  border-radius:52% 48% 40% 60% / 55% 45% 55% 45%;
  animation:morph 9s ease-in-out infinite, float2 6.4s var(--ease) infinite;}
.u2app .shape-squig{background:var(--warn-mark);border-radius:44% 56% 62% 38% / 38% 62% 38% 62%;
  animation:morph2 8s ease-in-out infinite, float1 8s var(--ease) infinite reverse;}
.u2app .shape-star{background:#E4674F;
  clip-path:polygon(50% 0%,61% 20%,83% 12%,80% 36%,100% 50%,80% 64%,83% 88%,61% 80%,50% 100%,39% 80%,17% 88%,20% 64%,0% 50%,20% 36%,17% 12%,39% 20%);
  animation:spin 22s linear infinite;}
.u2app .avatar-wrap{position:relative;flex:0 0 auto;}
.u2app .avatar-lg{
  width:104px;height:104px;border-radius:34% 66% 60% 40% / 46% 38% 62% 54%;
  background:linear-gradient(145deg,#0C6354,#13967E 55%,#3EB09E);
  display:grid;place-items:center;color:var(--on-brand);
  font-family:"Sora";font-weight:600;font-size:36px;letter-spacing:.02em;
  animation:morph 11s ease-in-out infinite;
}
.u2app .avatar-edit{position:absolute;right:-2px;bottom:2px;width:30px;height:30px;border-radius:50%;
  background:var(--surface);border:1px solid var(--line);color:var(--ink-2);
  display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-1);}
.u2app .avatar-edit:hover{color:var(--accent);}
@keyframes morph{0%,100%{border-radius:34% 66% 60% 40% / 46% 38% 62% 54%;}
  50%{border-radius:62% 38% 42% 58% / 36% 58% 42% 64%;}}
@keyframes morph2{0%,100%{border-radius:44% 56% 62% 38% / 38% 62% 38% 62%;}
  50%{border-radius:64% 36% 34% 66% / 62% 36% 64% 38%;}}
@keyframes float1{0%,100%{transform:translateY(0);}50%{transform:translateY(-11px);}}
@keyframes float2{0%,100%{transform:translateY(0);}50%{transform:translateY(9px);}}
@keyframes spin{to{transform:rotate(360deg);}}
.u2app .hero-plan{margin-top:14px;}
.u2app .hero-name{font-size:clamp(30px,4vw,40px);font-weight:600;margin-top:10px;}
.u2app .hero-mail{color:var(--ink-2);margin-top:4px;}
.u2app .hero-search{
  width:100%;max-width:640px;margin:26px auto 0;height:52px;
  display:flex;align-items:center;gap:14px;padding:0 22px;border-radius:var(--r-pill);
  background:var(--surface);box-shadow:var(--shadow-1);color:var(--ink-3);cursor:text;
  border:1px solid transparent;transition:.18s var(--ease);
}
.u2app .hero-search:hover{box-shadow:var(--shadow-2);border-color:var(--line);}
.u2app .quicks{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:16px;}
.u2app .quick{height:38px;padding:0 17px;border-radius:var(--r-pill);border:1px solid var(--line-strong);
  background:transparent;color:var(--ink);font-size:14px;cursor:pointer;transition:.16s var(--ease);}
.u2app .quick:hover{background:var(--surface);border-color:var(--accent);color:var(--accent);}

/* grid of product tiles */
.u2app .tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(224px,1fr));gap:10px;}
.u2app .tile{
  background:var(--surface);border-radius:20px;padding:18px;cursor:pointer;
  display:flex;flex-direction:column;gap:11px;text-align:left;border:1px solid transparent;
  box-shadow:var(--shadow-1);transition:.18s var(--ease);
}
.u2app .tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);border-color:var(--line);}
.u2app .tile-top{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.u2app .tile-name{font-family:"Sora";font-weight:500;font-size:15.5px;}
.u2app .tile-desc{color:var(--ink-2);font-size:13.5px;flex:1 1 auto;}
.u2app .tile-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;color:var(--ink-3);}

/* switch */
.u2app .switch{position:relative;width:46px;height:26px;flex:0 0 46px;border-radius:var(--r-pill);
  border:0;background:var(--line-strong);cursor:pointer;transition:background .2s var(--ease);padding:0;}
.u2app .switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:var(--surface);box-shadow:var(--shadow-1);transition:transform .22s var(--ease);}
.u2app .switch[aria-checked="true"]{background:var(--accent);}
.u2app .switch[aria-checked="true"]::after{transform:translateX(20px);}

/* meter */
.u2app .meter{display:flex;gap:2px;height:16px;border-radius:var(--r-pill);overflow:hidden;background:var(--surface-3);}
.u2app .meter i{display:block;height:100%;transition:width .9s var(--ease);}
.u2app .meter-legend{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:14px;font-size:13.5px;color:var(--ink-2);}
.u2app .meter-legend span{display:inline-flex;align-items:center;gap:8px;}
.u2app .swatch{width:10px;height:10px;border-radius:3px;flex:0 0 10px;}

/* table */
.u2app .tablewrap{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:14px;}
th{text-align:left;font-weight:500;color:var(--ink-3);font-size:12px;letter-spacing:.07em;
  text-transform:uppercase;padding:14px 26px;border-bottom:1px solid var(--line);white-space:nowrap;}
td{padding:15px 26px;border-bottom:1px solid var(--line);vertical-align:middle;}
tr:last-child td{border-bottom:0;}
tbody tr{transition:background .14s var(--ease);}
tbody tr:hover{background:var(--surface-2);}
.u2app .num{text-align:right;font-variant-numeric:tabular-nums;}

/* toolbar */
.u2app .toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:16px 26px;border-bottom:1px solid var(--line);}
.u2app .field{display:flex;align-items:center;gap:9px;height:38px;padding:0 15px;border-radius:var(--r-pill);
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink-3);}
.u2app .field input, .u2app .field select{border:0;background:transparent;outline:none;min-width:0;width:100%;color:var(--ink);font-size:14px;}
.u2app .field select{cursor:pointer;}

/* chart */
.u2app .chart-figure{padding:22px 26px 8px;}
.u2app .chart-title{font-size:14px;font-weight:500;}
.u2app .chart-note{font-size:13px;color:var(--ink-2);margin-top:3px;}
.u2app .bar-rect{transition:opacity .15s var(--ease);cursor:pointer;}
.u2app .chart-svg:hover .bar-rect{opacity:.45;}
.u2app .chart-svg .bar-rect:hover{opacity:1;}
.u2app .tick-text{font-size:11px;fill:var(--ink-3);font-family:"JetBrains Mono",monospace;}
.u2app .axis-text{font-size:11.5px;fill:var(--ink-2);}
.u2app .val-text{font-size:12px;fill:var(--ink);font-family:"JetBrains Mono",monospace;font-weight:500;}
.u2app .grid-line{stroke:var(--line);stroke-width:1;}

/* command palette */
.u2app .scrim{position:fixed;inset:0;z-index:60;background:rgba(8,16,14,.42);backdrop-filter:blur(3px);
  display:flex;align-items:flex-start;justify-content:center;padding:12vh 20px 20px;
  /* Con opacity:0 el diálogo se ve apagado pero sus campos y botones SIGUEN en el
     orden de tabulación. Aquí NO se arregla con visibility: una transición de
     visibility con retardo no llega a dispararse (probado). Lo hace el JS con
     `inert`, que saca el subárbol del tabulador y de los lectores de pantalla. */
  opacity:0;pointer-events:none;transition:opacity .18s var(--ease);}
.u2app .scrim.is-open{opacity:1;pointer-events:auto;}
.u2app .scrim.modal-scrim{align-items:center;padding:20px;}
.u2app .palette{
  width:100%;max-width:620px;background:var(--surface);border-radius:24px;box-shadow:var(--shadow-3);
  overflow:hidden;transform:translateY(-12px) scale(.98);transition:transform .2s var(--ease);
  display:flex;flex-direction:column;max-height:70vh;
}
.u2app .scrim.is-open .palette{transform:none;}
.u2app .palette-input{display:flex;align-items:center;gap:14px;padding:18px 22px;border-bottom:1px solid var(--line);}
.u2app .palette-input input{flex:1;border:0;background:transparent;outline:none;font-size:16.5px;}
.u2app .palette-list{overflow-y:auto;padding:8px;}
.u2app .p-item{display:flex;align-items:center;gap:14px;width:100%;padding:11px 14px;border:0;border-radius:14px;
  background:transparent;cursor:pointer;text-align:left;color:inherit;}
.u2app .p-item.is-cursor{background:var(--accent-soft);color:var(--accent-ink);}
.u2app .p-item small{margin-left:auto;color:var(--ink-3);font-size:12px;}
.u2app .p-empty{padding:34px;text-align:center;color:var(--ink-3);}

/* modal */
.u2app .modal{width:100%;max-width:520px;background:var(--surface);border-radius:26px;box-shadow:var(--shadow-3);
  transform:translateY(10px) scale(.98);transition:transform .2s var(--ease);max-height:86vh;
  display:flex;flex-direction:column;overflow:hidden;}
.u2app .modal.modal-wide{max-width:680px;}
.u2app .scrim.is-open .modal{transform:none;}
.u2app .modal-head{padding:24px 26px 10px;}
.u2app .modal-head h3{font-size:21px;font-weight:600;}
.u2app .modal-head p{margin:8px 0 0;color:var(--ink-2);font-size:14px;}
.u2app .modal-body{padding:12px 26px;overflow-y:auto;}
.u2app .modal-foot{padding:16px 26px 22px;display:flex;justify-content:flex-end;gap:8px;}
.u2app .pick{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border-radius:16px;
  border:1px solid var(--line);background:transparent;cursor:pointer;text-align:left;color:inherit;
  transition:.15s var(--ease);}
.u2app .pick + .pick{margin-top:8px;}
.u2app .pick:hover{border-color:var(--accent);}
.u2app .pick.is-picked{border-color:var(--accent);background:var(--accent-soft);}
.u2app .radio{width:20px;height:20px;border-radius:50%;border:2px solid var(--line-strong);flex:0 0 20px;
  display:grid;place-items:center;}
.u2app .pick.is-picked .radio{border-color:var(--accent);}
.u2app .pick.is-picked .radio::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent);}
.u2app .input{width:100%;height:46px;padding:0 16px;border-radius:14px;border:1px solid var(--line);
  background:var(--surface-2);outline:none;}
.u2app .input:focus{border-color:var(--accent);background:var(--surface);}
/* .input trae una altura fija de 46px: un textarea con esa clase saldría
   aplastado, y el select necesita su propia flecha. */
.u2app textarea.input{font-family:inherit;height:auto;min-height:120px;padding:14px 16px;line-height:1.5;resize:vertical;}
.u2app select.input{cursor:pointer;appearance:none;-webkit-appearance:none;padding-right:42px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;}
.u2app .btn:disabled{opacity:.6;cursor:default;}
.u2app .label{display:block;font-size:13px;color:var(--ink-2);margin:14px 0 6px;}
.u2app .qr{width:150px;height:150px;display:grid;grid-template-columns:repeat(15,1fr);gap:0;
  border:10px solid var(--surface);background:var(--surface);border-radius:12px;box-shadow:var(--shadow-1);}
.u2app .qr i{background:var(--ink);}
.u2app .qr i.off{background:transparent;}

/* toasts */
.u2app .toasts{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:80;
  display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;}
/* Un aviso es una nota al pie, no un cartel: sin visto gigante, del ancho de
   su texto y fuera en un momento. Solo hay uno a la vez. */
.u2app .toast{display:flex;align-items:center;gap:12px;padding:11px 18px;border-radius:var(--r-pill);
  background:#161D1B;color:#F1F5F4;box-shadow:var(--shadow-2);font-size:14px;
  animation:toastin .26s var(--ease);max-width:min(86vw,420px);
  transition:opacity .3s var(--ease),transform .3s var(--ease);}
.u2app .toast-accion{color:#5FE3C4;font-weight:600;text-decoration:none;white-space:nowrap;}
.u2app .toast-accion:hover{text-decoration:underline;}
@keyframes toastin{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

/* view transition */
.u2app .view-enter{animation:viewin .34s var(--ease);}
@keyframes viewin{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

/* footer note */
.u2app .footnote{max-width:640px;margin:44px auto 0;text-align:center;color:var(--ink-3);font-size:13px;}

/* mobile */
.u2app .mobile-nav-btn{display:none;}
@media (max-width:1000px){
  :root{--rail-w:236px;}
  .u2app .navitem{font-size:14px;padding-right:12px;}
}
@media (max-width:820px){
  .u2app .topsearch .label-text{display:none;}
  .u2app .topsearch{flex:0 0 44px;width:44px;padding:0;justify-content:center;}
  .u2app .topsearch .kbd{display:none;}
  .u2app .brand-name span{display:none;}
  .u2app .proto-pill{display:none;}
  .u2app .rail{
    position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;max-height:76vh;z-index:50;
    background:var(--surface);border-radius:28px 28px 0 0;box-shadow:var(--shadow-3);
    padding:10px 10px 24px;transform:translateY(105%);transition:transform .3s var(--ease);
  }
  .u2app .rail::before{content:"";display:block;width:40px;height:4px;border-radius:2px;background:var(--line-strong);margin:4px auto 12px;}
  /* Por encima de cualquier flotante de la página (el chat, sobre todo): al
     abrir el menú, el chat tiene que quedarse detrás. */
  .u2app .rail{z-index:2147483001;}
  .u2app .rail.is-open{transform:none;}
  /* El velo: sin él, tocar fuera no cerraba el menú. */
  .u2app .rail-velo{position:fixed;inset:0;z-index:2147483000;background:rgba(8,16,14,.42);
    opacity:0;pointer-events:none;transition:opacity .25s var(--ease);
    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);}
  .u2app .rail-velo.is-open{opacity:1;pointer-events:auto;}
  .u2app .shell{padding:0 14px 90px;}
  .u2app .mobile-nav-btn{
    display:flex;align-items:center;gap:10px;position:fixed;left:50%;bottom:18px;transform:translateX(-50%);
    z-index:45;height:48px;padding:0 22px;border-radius:var(--r-pill);border:0;cursor:pointer;
    background:var(--ink);color:var(--ground);box-shadow:var(--shadow-2);font-size:14.5px;font-weight:500;
    max-width:calc(100vw - 48px);
  }
  /* Un nombre largo no puede partir la píldora en dos líneas. */
  .u2app .mobile-nav-btn > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  /* El atajo de teclado no existe en un móvil. */
  .u2app .solo-escritorio{display:none;}
  /* Un campo de menos de 16px hace que iOS amplíe al escribir y deje la
     página descuadrada. 16 justos: ni zoom, ni cambio de aspecto. */
  .u2app input, .u2app textarea, .u2app select,
  .u2app .input, .u2app .field input, .u2app .field select{font-size:16px;}
  .u2app .pad, .u2app .row, .u2app th, .u2app td, .u2app .toolbar, .u2app .chart-figure{padding-left:18px;padding-right:18px;}
  .u2app .hero-shapes{gap:12px;}
  .u2app .shape{width:38px;height:38px;flex:0 0 38px;}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}

/* ── ENCAJE en la página de WordPress ──
   El prototipo era una página completa; aquí vive dentro del contenido, así
   que el contenedor asume el papel del <body>: pinta el fondo, ocupa todo el
   ancho y aparta el margen del tema. */
.u2app{
  font-family:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
  background:var(--ground); color:var(--ink);
  min-height:100vh; display:block; position:relative;
  width:auto; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  padding:0;
}
.u2app *,.u2app *::before,.u2app *::after{box-sizing:border-box}
.u2app h1,.u2app h2,.u2app h3,.u2app h4{font-family:"Sora","Figtree",sans-serif; margin:0; text-wrap:balance; letter-spacing:-.02em}
.u2app button,.u2app input,.u2app select{font:inherit; color:inherit}
.u2app a{color:var(--accent); text-decoration:none}
.u2app a:hover{text-decoration:underline}
.u2app :focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px}
/* la barra del prototipo manda sobre la del tema */
.u2app .topbar{z-index:60}
/* el logotipo real, a su tamaño */
.u2app .brand-logo{height:22px; width:auto; display:block; flex:0 0 auto}
.u2app .brand-name span{font-weight:500; color:var(--ink-2)}

/* La foto de perfil, donde antes iban solo iniciales */
.u2app .u2-av{display:inline-grid;place-items:center;overflow:hidden;flex:0 0 auto;background:var(--surface-3)}
.u2app .u2-av img{display:block}




/* La foto de perfil: redonda y sin deformar */
.u2app .u2-av{overflow:hidden;display:grid;place-items:center;position:relative;z-index:1;border-radius:50%;background:var(--surface-3)}
.u2app .u2-av img{width:100%;height:100%;object-fit:cover;display:block}
/* El lápiz de cambiar la foto, siempre por delante */
.u2app .avatar-wrap{position:relative}
.u2app .avatar-edit{z-index:3}
.u2app .hero-shapes .shape{will-change:transform,opacity}

/* ── Esqueleto de carga: gris animado mientras algo trabaja ── */
@keyframes u2shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes u2spin{to{transform:rotate(360deg)}}
.u2app .column.is-cargando .card,
.u2app .column.is-cargando .tile,
.u2app .column.is-cargando .alert,
.u2app .column.is-cargando .page-head{position:relative;overflow:hidden;pointer-events:none}
.u2app .column.is-cargando .card > *,
.u2app .column.is-cargando .tile > *,
.u2app .column.is-cargando .alert > *,
.u2app .column.is-cargando .page-head > *{visibility:hidden}
.u2app .column.is-cargando .card::after,
.u2app .column.is-cargando .tile::after,
.u2app .column.is-cargando .alert::after,
.u2app .column.is-cargando .page-head::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(90deg,var(--surface-3) 0%,var(--surface-2) 40%,var(--surface-3) 60%,var(--surface-3) 100%);
  background-size:200% 100%;animation:u2shimmer 1.3s ease-in-out infinite;
}
.u2app .u2-spin{
  width:14px;height:14px;border-radius:50%;display:inline-block;margin-right:8px;
  border:2px solid currentColor;border-right-color:transparent;animation:u2spin .7s linear infinite;
  vertical-align:-2px;opacity:.85;
}
@media (prefers-reduced-motion:reduce){
  .u2app .column.is-cargando .card::after,.u2app .u2-spin{animation:none}
}

/* ── Estado de la cuenta: lo primero que se lee ── */
.u2app .u2-estado{display:flex;gap:14px;padding:20px 24px;border-radius:var(--r-card);background:var(--surface);box-shadow:var(--shadow-1)}
.u2app .u2-estado h3{font-size:16px;font-weight:600}
.u2app .u2-estado p{margin:4px 0 0;color:var(--ink-2);font-size:14px}
.u2app .u2-estado-ico{flex:0 0 22px}
.u2app .u2-estado--ok .u2-estado-ico{color:var(--good)}
.u2app .u2-estado--warn{background:var(--warn-soft)}
.u2app .u2-estado--warn .u2-estado-ico{color:var(--warn-mark)}
.u2app .u2-estado--crit{background:var(--crit-soft)}
.u2app .u2-estado--crit .u2-estado-ico{color:var(--crit)}
.u2app .u2-lista{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.u2app .u2-lista-btn{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:10px;
  background:transparent;cursor:pointer;text-align:left;color:var(--ink);font-size:14px;font-family:inherit;transition:background .14s var(--ease)}
.u2app .u2-lista-btn:hover{background:color-mix(in srgb,var(--surface) 70%,transparent)}
.u2app .u2-lista-btn .chev{margin-left:auto}
.u2app .u2-punto{width:7px;height:7px;border-radius:50%;flex:0 0 7px;background:var(--ink-3)}
.u2app .u2-punto--crit{background:var(--crit)}
.u2app .u2-punto--warn{background:var(--warn-mark)}
.u2app .u2-punto--info{background:var(--accent)}

/* ── Cifras clave ── */
.u2app .u2-cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:10px;margin-top:14px}
.u2app .u2-cifra{background:var(--surface);border-radius:var(--r-card);padding:18px 20px;border:1px solid var(--line);display:flex;flex-direction:column;gap:3px}
.u2app .u2-cifra-t{font-size:12.5px;color:var(--ink-2)}
.u2app .u2-cifra-v{font-family:"Sora",sans-serif;font-size:26px;font-weight:700;letter-spacing:-.035em;color:var(--ink);font-variant-numeric:tabular-nums}
.u2app .u2-cifra-v.destaca{color:var(--accent)}
.u2app .u2-cifra-s{font-size:12px;color:var(--ink-3)}

/* Contador de avisos sin leer, en el menú */
.u2app .navcount{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:99px;
  display:grid;place-items:center;background:var(--accent);color:var(--on-accent);
  font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums}
.u2app .navitem.is-active .navcount{background:var(--accent-ink);color:var(--surface)}

/* Estados vacíos: dicen qué pasa y ofrecen la salida */
.u2app .u2-vacio{display:flex;flex-direction:column;align-items:center;gap:10px;padding:34px 24px;text-align:center}
.u2app .u2-vacio-ico{color:var(--ink-3);opacity:.6}
.u2app .u2-vacio p{margin:0;color:var(--ink-2);font-size:14px;max-width:44ch}

/* ── Tarjeta destacada del plan ──────────────────────────────────────
   La pieza que uno mira primero: etiqueta, precio arriba a la derecha,
   nombre grande con su icono y una acción principal a todo lo ancho. */
.u2app .card.destacada{border:1px solid var(--line-strong);box-shadow:var(--shadow-2);}
.u2app .destacada-top{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.u2app .destacada-etq{font-size:13px;color:var(--ink-2);font-weight:600;}
.u2app .destacada-precio{font-family:"Sora",sans-serif;font-size:15px;font-weight:600;
  background:var(--surface-3);color:var(--ink);padding:5px 13px;border-radius:var(--r-pill);}
.u2app .destacada-nombre{display:flex;align-items:center;gap:12px;margin-top:14px;
  font-family:"Sora",sans-serif;font-size:25px;font-weight:700;letter-spacing:-.035em;}
.u2app .destacada-desc{color:var(--ink-2);font-size:14.5px;margin:8px 0 20px;}
.u2app .btn-ancho{width:100%;height:50px;font-size:15.5px;}
.u2app .destacada-pie{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;justify-content:center;}
@media (max-width:640px){
  .u2app .destacada-nombre{font-size:21px;}
  .u2app .destacada-pie .btn{flex:1 1 auto;}
}

/* Un avatar dentro de una fila no puede encogerse: si el texto empuja, sale
   ovalado en vez de redondo (pasa en móvil, donde el espacio va justo). */
.u2app .row .u2-av,
.u2app .row .avatar-lg{flex:0 0 auto;}


/* La foto del topbar: cuadrada y a sangre. Sin esto la imagen imponía su
   proporción (28x29,9) y se veía descentrada, con un hueco a un lado. */
.u2app .avatar-btn img,
.u2app .avatar-btn > span{width:100%;height:100%;aspect-ratio:1;object-fit:cover;
  border-radius:50%;display:block;}


/* Separador entre el pago exprés (Apple Pay / Google Pay) y la tarjeta. */
.u2app .u2-o{display:flex;align-items:center;gap:12px;margin:16px 0 4px;
  color:var(--ink-3);font-size:13px;}
.u2app .u2-o::before,.u2app .u2-o::after{content:"";flex:1;height:1px;background:var(--line);}

/* ── Los diálogos, en móvil, como hoja de abajo ──────────────────────
   Una ventana centrada con el teclado abierto se descoloca y deja los botones
   fuera de alcance. Subiendo desde abajo, el contenido queda pegado al pulgar
   y el teclado no la desplaza. */
@media (max-width:640px){
  .u2app .scrim, .u2app .scrim.modal-scrim{align-items:flex-end;padding:0;}
  .u2app .modal, .u2app .modal.modal-wide{
    max-width:none;border-radius:24px 24px 0 0;max-height:92vh;
    transform:translateY(100%);transition:transform .28s var(--ease);
  }
  .u2app .scrim.is-open .modal{transform:none;}
  /* Asidero, para que se lea como algo que se puede arrastrar/cerrar. */
  .u2app .modal::before{content:"";display:block;flex:0 0 auto;width:40px;height:4px;
    border-radius:2px;background:var(--line-strong);margin:10px auto 0;}
  .u2app .modal-head{padding:16px 20px 8px;}
  .u2app .modal-body{padding:10px 20px;}
  /* Botones a lo ancho: en un móvil se pulsa con el pulgar, no con el ratón. */
  .u2app .modal-foot{padding:14px 20px calc(20px + env(safe-area-inset-bottom));
    flex-direction:column-reverse;gap:10px;}
  .u2app .modal-foot .btn{width:100%;height:48px;}
}


/* El fondo del documento, no solo el del panel: Safari pinta con este color el
   rebote del scroll y el área de la barra, y sin él salía blanco. */
html:has(.u2app), body:has(.u2app){background:#EDF1F0;}
@media (prefers-color-scheme: dark){
  html:has(.u2app:not([data-ui-theme="light"])),
  body:has(.u2app:not([data-ui-theme="light"])){background:#0C100F;}
}
html:has(.u2app[data-ui-theme="dark"]), body:has(.u2app[data-ui-theme="dark"]){background:#0C100F;}
html:has(.u2app[data-ui-theme="light"]), body:has(.u2app[data-ui-theme="light"]){background:#EDF1F0;}

/* ── Barra de secciones en móvil ─────────────────────────────────────
   Sustituye a la píldora flotante, que quedaba sobre el contenido y no se leía
   como navegación: mucha gente ni la veía. Una barra fija abajo es lo que uno
   espera en un móvil. */
.u2app .barra-movil{display:none;}
@media (max-width:820px){
  .u2app .barra-movil{
    display:grid; grid-template-columns:repeat(5,1fr);
    position:fixed; left:0; right:0; bottom:0; z-index:46;
    background:var(--surface); border-top:1px solid var(--line);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    box-shadow:0 -1px 12px rgba(0,0,0,.05);
  }
  .u2app .barra-item{
    display:flex; flex-direction:column; align-items:center; gap:3px;
    border:0; background:transparent; cursor:pointer; padding:7px 2px 5px;
    color:var(--ink-3); font-size:11px; font-weight:500; line-height:1.1;
  }
  .u2app .barra-ico{position:relative; display:grid; place-items:center; height:22px;}
  .u2app .barra-item.is-active{color:var(--accent);}
  .u2app .barra-txt{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;}
  /* El punto avisa sin número: en 11px un contador no se lee. */
  .u2app .barra-punto{position:absolute; top:-1px; right:-5px; width:7px; height:7px;
    border-radius:50%; background:var(--crit); border:1.5px solid var(--surface);}
  /* Fuera la píldora: ya no hace falta. */
  .u2app .mobile-nav-btn{display:none;}
  /* Sitio para la barra al final de la página. */
  .u2app .shell{padding-bottom:96px;}
  .u2app .column{padding-bottom:40px;}
  /* El menú completo sube por encima de la barra. */
  .u2app .rail{padding-bottom:calc(24px + env(safe-area-inset-bottom));}
}

/* ── Tour de bienvenida ──────────────────────────────────────────────
   Señala cada sitio del panel en vez de describirlo por escrito. El foco es un
   recorte: se oscurece todo menos lo que se está explicando. */
.u2app .tour-capa{position:fixed;inset:0;z-index:2147483002;opacity:0;pointer-events:none;
  transition:opacity .25s var(--ease);}
.u2app .tour-capa.is-open{opacity:1;pointer-events:auto;
  /* El velo se traga el gesto de scroll: la página no se mueve bajo el foco
     sin necesidad de bloquear el body (que frenaría a scrollIntoView). */
  touch-action:none;overscroll-behavior:contain;}
.u2app .tour-foco{position:fixed;border-radius:18px;
  /* Una sombra enorme hace de velo y deja el hueco limpio, sin recortes. */
  box-shadow:0 0 0 9999px rgba(6,14,12,.72);
  outline:2px solid var(--accent);outline-offset:2px;
  transition:top .3s var(--ease),left .3s var(--ease),width .3s var(--ease),height .3s var(--ease);
  pointer-events:none;}
.u2app .tour-globo{position:fixed;left:50%;transform:translateX(-50%);
  width:min(92vw,380px);background:var(--surface);border-radius:var(--r-card);
  box-shadow:var(--shadow-3);padding:20px 22px;}
.u2app .tour-paso{font-size:12px;font-weight:600;color:var(--accent);
  letter-spacing:.04em;text-transform:uppercase;margin-bottom:6px;}
.u2app .tour-globo h3{font-family:"Sora",sans-serif;font-size:18px;font-weight:600;letter-spacing:-.02em;}
.u2app .tour-globo p{margin:7px 0 0;color:var(--ink-2);font-size:14.5px;line-height:1.5;}
.u2app .tour-pie{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:18px;}
@media (prefers-reduced-motion: reduce){ .u2app .tour-foco{transition:none;} }


/* El PNG del logotipo trae el dibujo pegado al borde izquierdo (0 px) y 63 a la
   derecha: sin compensar se ve cortado y descentrado. Lo suyo sería rehacer el
   archivo, que lo usa toda la web. */
.u2app .brand-logo{padding-left:3px; box-sizing:content-box;}


/* Sitio para la barra de secciones: el chat se posa justo encima del último
   destino y lo tapaba. Se sube lo que mide la barra. Cubre los contenedores
   habituales de widget flotante; el ajuste por JS remata los que no encajen. */
@media (max-width:820px){
  body.u2-con-barra > div[id*="chat" i],
  body.u2-con-barra > div[class*="chat" i],
  body.u2-con-barra > div[id*="tidio" i],
  body.u2-con-barra > iframe[id*="chat" i],
  body.u2-con-barra > iframe[title*="chat" i]{
    bottom:78px !important;
  }
}

/* ── El menú de móvil, como hoja en la capa superior ──────────────────
   Va en un <dialog> abierto con showModal(): el navegador lo pinta en su «top
   layer», por encima de TODO el documento. Con esto el chat deja de taparlo sin
   tener que adivinar su selector ni competir por z-index. */
.u2app .rail-hoja{display:none;}
@media (max-width:820px){
  .u2app .rail-hoja{
    display:none; border:0; padding:0; margin:0 0 0 0;
    position:fixed; inset:auto 0 0 0; width:100%; max-width:100%; max-height:80vh;
    background:var(--surface); color:var(--ink);
    border-radius:26px 26px 0 0; box-shadow:var(--shadow-3);
    transform:translateY(100%); transition:transform .26s var(--ease);
    overflow:hidden auto;
  }
  .u2app .rail-hoja[open]{display:block;}
  .u2app .rail-hoja.is-open{transform:none;}
  .u2app .rail-hoja::backdrop{background:rgba(8,16,14,.45);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);}
  .u2app .hoja-asa{width:40px;height:4px;border-radius:2px;background:var(--line-strong);
    margin:12px auto 6px;}
  .u2app .hoja-nav{display:flex;flex-direction:column;gap:2px;
    padding:6px 10px calc(18px + env(safe-area-inset-bottom));}
  /* La píldora vieja y su velo ya no hacen falta con la hoja. */
  .u2app .rail-velo{display:none;}
}

/* ── Objetivos táctiles ───────────────────────────────────────────────
   Los controles pequeños del panel (icono suelto, lápiz del avatar,
   interruptor) miden 26–34 px: se ven bien y se fallan con el dedo. En vez de
   engordarlos —que rompería el ritmo de la página— se les estira SOLO el área
   sensible con un pseudo-elemento, hasta los 44 px que pide Apple. El dibujo
   queda exactamente igual.
   Solo con puntero grueso: con ratón 34 px se acierta de sobra y un área
   invisible de 44 px se comería el clic de lo que tiene al lado. */
@media (pointer: coarse) {
  .u2app .btn-icon { position: relative; }
  .u2app .btn-icon::before,
  .u2app .avatar-edit::before,
  .u2app .switch::before {
    content: ""; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: max(100%, 44px); height: max(100%, 44px);
  }
}

/* ── Elegir idioma ────────────────────────────────────────────────────
   Lista simple, no miniaturas como el tema: de un idioma no hay nada visual
   que enseñar, y tres banderas serían mentira (el inglés no es de un país). */
.u2app .idiomas{display:flex;flex-direction:column;gap:0;}
.u2app .idioma{display:flex;align-items:center;gap:14px;width:100%;
  padding:13px 2px;background:none;border:0;cursor:pointer;text-align:left;color:inherit;font:inherit;}
.u2app .idioma + .idioma{border-top:1px solid var(--line);}
.u2app .idioma .radio{width:20px;height:20px;flex:0 0 20px;border-radius:50%;
  border:2px solid var(--line-strong);display:grid;place-items:center;transition:border-color .15s;}
.u2app .idioma.is-picked .radio{border-color:var(--accent);}
.u2app .idioma.is-picked .radio::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent);}
.u2app .idioma-txt{display:flex;flex-direction:column;gap:1px;}
.u2app .idioma-nombre{font-size:15.5px;font-weight:500;}
.u2app .idioma.is-picked .idioma-nombre{color:var(--accent-ink);}
.u2app .idioma-nota{font-size:13px;color:var(--ink-3);}
.u2app .idioma:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px;}