/* /cuenta con el diseño de la web (brand.css), SOLO para la parte pública: entrar, crear cuenta, verificar, vincular la
   app y la cuenta de una usuaria. Todas las reglas empiezan por
   body:not(.owner-view):not(.desktop-embedded), así que el panel MASTER (body.owner-view, admin-tabs.js) y la vista
   dentro de la app (?desktop=1, body.desktop-embedded) se ven exactamente como antes: cuenta-base.css (copia literal
   del brand.css anterior) + cuenta.css + admin.css, sin cambios. Los tokens son los de brand.css (y de la app,
   desktop/design.css); una prueba comprueba que coinciden. Las dos únicas reglas sin ese prefijo ocultan los enlaces
   nuevos de la cabecera y del pie fuera de la vista pública. */
.web-nav,.legal-links .web-only{display:none}

body:not(.owner-view):not(.desktop-embedded){
  color-scheme:dark;
  --st-bg:#07111f;--st-bg-2:#0b1728;--st-surface:#101f34;--st-surface-2:#13243a;--st-surface-3:#1a2e4a;
  --st-field:#0a1626;--st-overlay:rgba(3,8,18,.72);
  --st-border:rgba(125,155,205,.13);--st-border-2:rgba(125,155,205,.24);--st-border-3:rgba(150,175,225,.36);
  --st-text:#e8eef8;--st-text-2:#a7b5cc;--st-text-3:#71839f;
  --st-primary:#7c4dff;--st-primary-hi:#a88bff;--st-primary-rgb:124,77,255;--st-secondary:#2f80ff;--st-secondary-rgb:47,128,255;--st-accent:#e040fb;
  --st-grad:linear-gradient(100deg,#7c4dff 0%,#5b5cff 52%,#2f80ff 100%);
  --st-grad-soft:linear-gradient(135deg,rgba(var(--st-primary-rgb),.20),rgba(var(--st-secondary-rgb),.10));
  --st-success:#34d399;--st-success-rgb:52,211,153;--st-warning:#fbbf24;--st-warning-rgb:251,191,36;
  --st-danger:#fb7185;--st-danger-rgb:251,113,133;--st-info:#60a5fa;--st-neutral:#8a9bb5;
  --st-r-card:14px;--st-r-lg:18px;--st-r-ctl:10px;--st-r-sm:8px;--st-r-pill:999px;
  --st-s1:4px;--st-s2:8px;--st-s3:12px;--st-s4:16px;--st-s5:24px;--st-s6:32px;--st-s7:40px;--st-s8:48px;
  --st-pad:24px;--st-gap:16px;--st-ctl-h:44px;
  --st-shadow:0 1px 0 rgba(255,255,255,.035) inset,0 10px 30px rgba(0,0,0,.22);
  --st-shadow-lg:0 28px 80px rgba(0,0,0,.55);
  --st-glow:0 8px 24px rgba(var(--st-primary-rgb),.32);
  --st-focus:0 0 0 3px rgba(var(--st-primary-rgb),.35);
  --st-font:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;
  --st-font-display:"Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
  --st-fast:150ms;--st-mid:220ms;--st-ease:cubic-bezier(.2,.8,.2,1);
  --st-header-bg:rgba(7,17,31,.74);--st-hover:rgba(255,255,255,.05);--st-tint:rgba(255,255,255,.025);
  --st-wrap:1180px;--st-gutter:clamp(16px,4vw,32px);
}
@media (prefers-color-scheme:light){
  body:not(.owner-view):not(.desktop-embedded){
    color-scheme:light;
    --st-bg:#f4f6fb;--st-bg-2:#eaeef6;--st-surface:#ffffff;--st-surface-2:#fbfcff;--st-surface-3:#eef2fa;
    --st-field:#ffffff;--st-overlay:rgba(15,23,42,.45);
    --st-border:rgba(20,40,80,.11);--st-border-2:rgba(20,40,80,.18);--st-border-3:rgba(20,40,80,.32);
    --st-text:#0e1a2f;--st-text-2:#44526a;--st-text-3:#5f6c84;
    --st-primary-hi:#5a2fe3;
    --st-success:#0b8a5f;--st-success-rgb:11,138,95;--st-warning:#a85406;--st-warning-rgb:217,119,6;
    --st-danger:#d9183f;--st-danger-rgb:225,29,72;--st-info:#2563eb;--st-neutral:#5f6f88;
    --st-shadow:0 1px 2px rgba(16,24,40,.05),0 10px 28px rgba(16,24,40,.07);
    --st-shadow-lg:0 24px 60px rgba(16,24,40,.14);
    --st-glow:0 8px 22px rgba(var(--st-primary-rgb),.26);
    --st-header-bg:rgba(244,246,251,.82);--st-hover:rgba(20,40,80,.06);--st-tint:rgba(20,40,80,.025);
  }
}

/* ---------- Página ---------- */
body:not(.owner-view):not(.desktop-embedded){display:flex;flex-direction:column;min-height:100vh;font-family:var(--st-font);font-size:15px;line-height:1.55;color:var(--st-text);
  background:radial-gradient(1100px 560px at 88% -140px,rgba(var(--st-primary-rgb),.13),transparent 62%) no-repeat,
    radial-gradient(900px 520px at -12% 380px,rgba(var(--st-secondary-rgb),.07),transparent 60%) no-repeat,var(--st-bg);overflow-x:hidden}
body:not(.owner-view):not(.desktop-embedded) :is(h1,h2,h3,h4){font-family:var(--st-font-display);color:var(--st-text);letter-spacing:-.015em}
body:not(.owner-view):not(.desktop-embedded) a{color:var(--st-primary-hi)}
body:not(.owner-view):not(.desktop-embedded) ::selection{background:rgba(var(--st-primary-rgb),.40)}

/* Cabecera: la de la web (brand.css .site-header). */
body:not(.owner-view):not(.desktop-embedded) .account-header{position:sticky;top:0;z-index:50;flex-wrap:wrap;justify-content:flex-start;gap:10px 18px;max-width:none;min-height:68px;margin:0;
  padding:10px max(var(--st-gutter),(100% - var(--st-wrap))/2);border-bottom:1px solid var(--st-border);background:var(--st-header-bg);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}
body:not(.owner-view):not(.desktop-embedded) .account-header .brand{display:inline-flex;align-items:center;gap:10px;margin-right:auto;text-decoration:none}
body:not(.owner-view):not(.desktop-embedded) .account-header .brand img{width:34px;height:34px;filter:none}
body:not(.owner-view):not(.desktop-embedded) .account-header .brand span{font-family:var(--st-font-display);font-size:19px;font-weight:700;letter-spacing:-.01em;color:var(--st-text)}
body:not(.owner-view):not(.desktop-embedded) .web-nav{display:flex;align-items:center;gap:2px}
body:not(.owner-view):not(.desktop-embedded) .web-nav a{display:inline-flex;align-items:center;min-height:38px;padding:0 12px;border-radius:var(--st-r-sm);color:var(--st-text-2);font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap;transition:color var(--st-fast),background var(--st-fast)}
body:not(.owner-view):not(.desktop-embedded) .web-nav a:hover{color:var(--st-text);background:var(--st-hover)}
body:not(.owner-view):not(.desktop-embedded) .back-link{display:none}

/* Columnas: presentación a la izquierda, tarjeta a la derecha. */
body:not(.owner-view):not(.desktop-embedded) .account-layout{width:min(var(--st-wrap),100% - 2*var(--st-gutter));max-width:none;margin:clamp(32px,6vw,64px) auto clamp(48px,7vw,80px);padding:0;gap:clamp(28px,5vw,64px);align-content:start;flex:1 0 auto}
body:not(.owner-view):not(.desktop-embedded) .account-layout h1{margin:14px 0 16px;font-size:clamp(34px,4.6vw,52px);line-height:1.06;letter-spacing:-.035em}
body:not(.owner-view):not(.desktop-embedded) .account-layout p{color:var(--st-text-2)}
body:not(.owner-view):not(.desktop-embedded) .gradient-text{background:var(--st-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
body:not(.owner-view):not(.desktop-embedded) .eyebrow{display:inline-block;padding:0;border:0;border-radius:0;background:none;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--st-primary-hi)}
body:not(.owner-view):not(.desktop-embedded) .intro-points{gap:10px}
body:not(.owner-view):not(.desktop-embedded) .intro-points li{padding:14px 16px;border:1px solid var(--st-border);border-radius:12px;background:var(--st-tint)}
body:not(.owner-view):not(.desktop-embedded) .intro-points strong{color:var(--st-text);font-weight:600}
body:not(.owner-view):not(.desktop-embedded) .intro-points span{color:var(--st-text-2)}
body:not(.owner-view):not(.desktop-embedded) .account-note{border-left:3px solid var(--st-primary);border-radius:0 10px 10px 0;background:var(--st-tint);color:var(--st-text-2)}

/* Tarjeta principal (card-hero de la app). */
body:not(.owner-view):not(.desktop-embedded) .account-card{padding:clamp(22px,3vw,32px);border:1px solid var(--st-border-2);border-radius:var(--st-r-lg);box-shadow:var(--st-shadow);
  background:radial-gradient(120% 160% at 0% 0%,rgba(var(--st-primary-rgb),.14),transparent 55%),radial-gradient(90% 120% at 100% 100%,rgba(var(--st-secondary-rgb),.08),transparent 60%),linear-gradient(180deg,var(--st-surface-2),var(--st-surface))}
body:not(.owner-view):not(.desktop-embedded) .account-card h2{font-size:clamp(22px,2.4vw,26px);letter-spacing:-.02em}
body:not(.owner-view):not(.desktop-embedded) .account-card h3{font-size:15px}
body:not(.owner-view):not(.desktop-embedded) .account-card :is(.muted-small,small){color:var(--st-text-3)}
body:not(.owner-view):not(.desktop-embedded) .account-card p{color:var(--st-text-2)}
body:not(.owner-view):not(.desktop-embedded) .account-card strong{color:var(--st-text)}
body:not(.owner-view):not(.desktop-embedded) .empty{border:1px dashed var(--st-border-2);color:var(--st-text-3)}

/* Avisos de estado. */
body:not(.owner-view):not(.desktop-embedded) :is(#status,.feedback):not(:empty){border:1px solid rgba(var(--st-primary-rgb),.38);background:rgba(var(--st-primary-rgb),.09);color:var(--st-text)}
body:not(.owner-view):not(.desktop-embedded) :is(#status,.feedback).error:not(:empty){border-color:rgba(var(--st-danger-rgb),.48);background:rgba(var(--st-danger-rgb),.10);color:var(--st-text)}
body:not(.owner-view):not(.desktop-embedded) .link-hint{border:1px solid rgba(var(--st-primary-rgb),.38);border-left:3px solid var(--st-primary);border-radius:10px;background:rgba(var(--st-primary-rgb),.09);color:var(--st-text)!important}

/* Entrar / Crear cuenta (Segmented de la app). */
body:not(.owner-view):not(.desktop-embedded) .tabs{padding:4px;gap:4px;border:1px solid var(--st-border-2);border-radius:12px;background:var(--st-field)}
body:not(.owner-view):not(.desktop-embedded) .tabs button{min-height:40px;padding:0 10px;border-radius:8px;color:var(--st-text-2);font-weight:600;transition:background var(--st-fast),color var(--st-fast)}
body:not(.owner-view):not(.desktop-embedded) .tabs button:hover{color:var(--st-text);background:var(--st-hover)}
body:not(.owner-view):not(.desktop-embedded) .tabs button.selected{background:var(--st-grad);color:#fff;box-shadow:0 4px 14px rgba(var(--st-primary-rgb),.3)}
body:not(.owner-view):not(.desktop-embedded) .form-subtitle{color:var(--st-text-2)}

/* Campos. */
body:not(.owner-view):not(.desktop-embedded) .account-card label{gap:6px;color:var(--st-text-2);font-size:13.5px;font-weight:600}
body:not(.owner-view):not(.desktop-embedded) .account-card :is(input,select,textarea){min-height:var(--st-ctl-h);padding:0 14px;border:1px solid var(--st-border-2);border-radius:var(--st-r-ctl);background:var(--st-field);color:var(--st-text);font-size:15px;font-weight:400;color-scheme:inherit;
  transition:border-color var(--st-fast),box-shadow var(--st-fast)}
body:not(.owner-view):not(.desktop-embedded) .account-card textarea{padding:12px 14px}
body:not(.owner-view):not(.desktop-embedded) .input-wrap input{padding-right:84px}
body:not(.owner-view):not(.desktop-embedded) .account-card :is(input,select,textarea)::placeholder{color:var(--st-text-3)}
body:not(.owner-view):not(.desktop-embedded) .account-card :is(input,select,textarea):hover{border-color:var(--st-border-3)}
body:not(.owner-view):not(.desktop-embedded) .account-card :is(input,select,textarea):focus{outline:none;border-color:var(--st-primary);box-shadow:var(--st-focus)}
body:not(.owner-view):not(.desktop-embedded) .account-card input[type=checkbox]{min-height:0;width:18px;height:18px;padding:0;accent-color:var(--st-primary);box-shadow:none}
body:not(.owner-view):not(.desktop-embedded) #remember-field{color:var(--st-text-2);font-weight:500}
body:not(.owner-view):not(.desktop-embedded) .input-action{background:var(--st-surface-3);color:var(--st-text-2)}
body:not(.owner-view):not(.desktop-embedded) .input-action:hover{background:var(--st-border-2);color:var(--st-text)}
body:not(.owner-view):not(.desktop-embedded) .field-help{color:var(--st-text-3)}
body:not(.owner-view):not(.desktop-embedded) .text-button{color:var(--st-primary-hi)}
body:not(.owner-view):not(.desktop-embedded) .text-button:hover{color:var(--st-text)}

/* Botones (Button de la app). */
body:not(.owner-view):not(.desktop-embedded) :is(.primary-btn,.secondary-btn,.danger-btn){min-height:var(--st-ctl-h);padding:0 18px;border-radius:var(--st-r-ctl);font-size:14.5px;font-weight:600;transform:none;
  transition:background var(--st-fast) var(--st-ease),border-color var(--st-fast) var(--st-ease),box-shadow var(--st-mid) var(--st-ease),filter var(--st-fast)}
body:not(.owner-view):not(.desktop-embedded) .primary-btn{border:1px solid transparent;background:var(--st-grad);color:#fff;box-shadow:var(--st-glow)}
body:not(.owner-view):not(.desktop-embedded) .primary-btn:hover:enabled{transform:none;filter:brightness(1.1);box-shadow:0 10px 30px rgba(var(--st-primary-rgb),.45)}
body:not(.owner-view):not(.desktop-embedded) .secondary-btn{border:1px solid var(--st-border-2);background:var(--st-surface-2);color:var(--st-text)}
body:not(.owner-view):not(.desktop-embedded) .secondary-btn:hover:enabled{border-color:var(--st-border-3);background:var(--st-surface-3)}
body:not(.owner-view):not(.desktop-embedded) .danger-btn{border:1px solid rgba(var(--st-danger-rgb),.4);background:rgba(var(--st-danger-rgb),.12);color:var(--st-danger);box-shadow:none}
body:not(.owner-view):not(.desktop-embedded) .danger-btn:hover:enabled{background:rgba(var(--st-danger-rgb),.2)}
body:not(.owner-view):not(.desktop-embedded) :is(.primary-btn,.secondary-btn,.danger-btn):focus-visible{outline:2px solid var(--st-primary-hi);outline-offset:2px}
body:not(.owner-view):not(.desktop-embedded) .social-btn{min-height:var(--st-ctl-h);border:1px solid var(--st-border-2);border-radius:var(--st-r-ctl);background:var(--st-surface-2);color:var(--st-text);font-weight:600}
body:not(.owner-view):not(.desktop-embedded) .social-btn:hover:enabled{border-color:var(--st-border-3);background:var(--st-surface-3)}
body:not(.owner-view):not(.desktop-embedded) .separator{color:var(--st-text-3)}
body:not(.owner-view):not(.desktop-embedded) .separator::before,body:not(.owner-view):not(.desktop-embedded) .separator::after{background:var(--st-border-2)}

/* Etiquetas (StatusBadge de la app). */
body:not(.owner-view):not(.desktop-embedded) .badge{--tone:var(--st-neutral);--tone-rgb:138,155,181;min-height:26px;padding:0 10px;border:1px solid rgba(var(--tone-rgb),.32);background:rgba(var(--tone-rgb),.12);color:var(--tone);font-size:12px;font-weight:700;letter-spacing:.04em}
body:not(.owner-view):not(.desktop-embedded) .badge[data-tone=accent]{--tone:var(--st-primary-hi);--tone-rgb:var(--st-primary-rgb)}
body:not(.owner-view):not(.desktop-embedded) .badge[data-tone=success]{--tone:var(--st-success);--tone-rgb:var(--st-success-rgb)}
body:not(.owner-view):not(.desktop-embedded) .badge[data-tone=warning]{--tone:var(--st-warning);--tone-rgb:var(--st-warning-rgb)}
body:not(.owner-view):not(.desktop-embedded) .badge[data-tone=danger]{--tone:var(--st-danger);--tone-rgb:var(--st-danger-rgb)}

/* Verificación del correo. */
body:not(.owner-view):not(.desktop-embedded) #verification-email{border:1px solid var(--st-border);background:var(--st-field);color:var(--st-text)}

/* Cuenta de la usuaria: accesos, equipos y uso. */
body:not(.owner-view):not(.desktop-embedded) .avatar{border-radius:14px;background:var(--st-grad);box-shadow:var(--st-glow)}
body:not(.owner-view):not(.desktop-embedded) .profile-id p{color:var(--st-text-2)}
body:not(.owner-view):not(.desktop-embedded) .grant-card{border:1px solid var(--st-border);border-radius:12px;background:var(--st-tint)}
body:not(.owner-view):not(.desktop-embedded) .grant-card strong{color:var(--st-text)}
body:not(.owner-view):not(.desktop-embedded) .grant-card span{color:var(--st-text-2)}
body:not(.owner-view):not(.desktop-embedded) .list-row{border-bottom-color:var(--st-border)}
body:not(.owner-view):not(.desktop-embedded) .list-main small{color:var(--st-text-3)}
body:not(.owner-view):not(.desktop-embedded) .usage-meter{border:1px solid var(--st-border);border-radius:12px;background:var(--st-tint)}
body:not(.owner-view):not(.desktop-embedded) .usage-meter-head span{color:var(--st-text-2)}
body:not(.owner-view):not(.desktop-embedded) .usage-meter.warn{border-color:rgba(var(--st-warning-rgb),.45)}
body:not(.owner-view):not(.desktop-embedded) .ai-share{background:var(--st-border)}
body:not(.owner-view):not(.desktop-embedded) .ai-share span{background:var(--st-grad)}
body:not(.owner-view):not(.desktop-embedded) .usage-meter.warn .ai-share span{background:linear-gradient(90deg,var(--st-warning),var(--st-danger))}
body:not(.owner-view):not(.desktop-embedded) .usage-paused{border:1px solid rgba(var(--st-danger-rgb),.45);background:rgba(var(--st-danger-rgb),.10);color:var(--st-text)!important}
body:not(.owner-view):not(.desktop-embedded) .item-card{border:1px solid var(--st-border);border-radius:var(--st-r-card);background:var(--st-tint)}
body:not(.owner-view):not(.desktop-embedded) .item-card[data-guard=paused]{border-color:rgba(var(--st-danger-rgb),.45)}
body:not(.owner-view):not(.desktop-embedded) .item-card[data-guard=warning]{border-color:rgba(var(--st-warning-rgb),.45)}
body:not(.owner-view):not(.desktop-embedded) .item-body{color:var(--st-text)!important}
body:not(.owner-view):not(.desktop-embedded) .usage-card>.field-help{margin:10px 0 4px}

/* Diálogo de confirmación (Modal de la app). */
body:not(.owner-view):not(.desktop-embedded) .confirm-dialog{border:1px solid var(--st-border-2);border-radius:var(--st-r-lg);background:linear-gradient(180deg,var(--st-surface-2),var(--st-surface));color:var(--st-text);box-shadow:var(--st-shadow-lg)}
body:not(.owner-view):not(.desktop-embedded) .confirm-dialog::backdrop{background:var(--st-overlay);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
body:not(.owner-view):not(.desktop-embedded) .confirm-dialog h2{font-family:var(--st-font-display)}
body:not(.owner-view):not(.desktop-embedded) .confirm-dialog p{color:var(--st-text-2)}

/* Pie: el de la web. */
body:not(.owner-view):not(.desktop-embedded) .legal-links{flex-wrap:wrap;justify-content:center;gap:8px 18px;max-width:none;margin:0;padding:18px max(var(--st-gutter),(100% - var(--st-wrap))/2) 28px;border-top:1px solid var(--st-border);background:transparent;font-size:13.5px}
body:not(.owner-view):not(.desktop-embedded) .legal-links a{color:var(--st-text-2)}
body:not(.owner-view):not(.desktop-embedded) .legal-links a:hover{color:var(--st-text)}
body:not(.owner-view):not(.desktop-embedded) .legal-links .web-only{display:inline}

@media (max-width:760px){
  body:not(.owner-view):not(.desktop-embedded) .account-header{position:static;gap:8px 12px;padding-top:12px;padding-bottom:8px}
  body:not(.owner-view):not(.desktop-embedded) .web-nav{order:3;width:100%;margin:0 -6px;overflow-x:auto;scrollbar-width:none}
  body:not(.owner-view):not(.desktop-embedded) .web-nav a{min-height:36px;padding:0 10px;font-size:13.5px}
  body:not(.owner-view):not(.desktop-embedded) .account-header .brand img{width:30px;height:30px}
  body:not(.owner-view):not(.desktop-embedded) .account-header .brand span{font-size:17px}
  body:not(.owner-view):not(.desktop-embedded) .account-layout,body:not(.owner-view):not(.desktop-embedded).signed-in .account-layout{width:min(var(--st-wrap),100% - 2*var(--st-gutter));margin-top:24px;padding:0;gap:22px}
  body:not(.owner-view):not(.desktop-embedded) .account-card{padding:20px 18px}
}