/* ============================================================
   Sistema de diseño de la plataforma de webinars
   Origen: página de captura clase.uxcontratable.com
   Regla: cyan = acción principal / plataforma · naranja = energía, urgencia, acento
   ============================================================ */
:root{
  color-scheme:dark;
  /* === TOKENS DEL TEMA: un tema (assets/temas/*.css) solo redefine estos === */
  --cyan:#00ccff; --orange:#ff8a00; --green:#2de0b0; --red:#ff6b4a;
  --cyan-rgb:0,204,255; --orange-rgb:255,138,0; --green-rgb:45,224,176; --red-rgb:255,107,74;
  --cyan-hi-rgb:90,225,255; --orange-hi-rgb:255,170,60; --live-rgb:239,68,68;
  --live:#dc2626;
  --text-rgb:245,243,239; --surf-rgb:26,31,38; --mute-rgb:122,138,154; --amb-rgb:255,180,92; --cream-rgb:255,225,189; --surface-3-rgb:13,18,24;   /* los usa Tailwind (text-warm, bg-surf, text-mute, text-amb…) */
  --bg:#000; --shade-rgb:0,0,0;            /* fondo y capa sobre la foto/modal */
  --surface-rgb:16,20,26; --surface-2-rgb:14,18,24; --glass:rgba(26,31,38,.55); --glass-line:rgba(0,204,255,.15);
  --field-bg:rgba(var(--shade-rgb),.5); --option-bg:#1A1F26;
  --ink-rgb:255,255,255;                     /* bordes/rellenos sutiles (blanco en oscuro, negro en claro) */
  --text:#f5f3ef; --text-strong:#fff; --text-1:#e8ecef; --text-2:#d6dbe0; --muted-2:#9aa8b6; --body:#c3cad2;
  --placeholder:#6b7886; --line-strong:#4a5764; --scroll:#2a3340;
  --on-accent:#000; --on-accent-rgb:0,0,0; --on-accent-ring:#fff;   /* texto sobre botones/acentos */
  --bg-img:url(bg-escritorio.webp); --bg-img-movil:url(bg-movil.webp);
  --font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:var(--font);                          /* títulos .big */
  --h-weight:800; --h-transform:uppercase; --h-tracking:-.02em; --h-style:normal;
  --btn-bg:var(--cyan); --btn-fg:var(--on-accent);     /* botón principal (puede ser neutro aunque el acento sea de color) */
  --btn-shadow:0 0 0 1px rgba(var(--cyan-rgb),.55),0 10px 36px rgba(var(--cyan-rgb),.28);
  --btn-shadow-hover:0 0 0 1px rgba(var(--cyan-hi-rgb),.85),0 14px 46px rgba(var(--cyan-rgb),.45);
  --btn-r:12px; --btn-r-sm:10px; --btn-weight:800; --btn-transform:uppercase;
  --card-shadow:0 8px 30px rgba(0,0,0,.35);
  --r:16px; --r-sm:12px; --r-lg:18px;          /* radios: card · campo/botón/toast · diálogo/oferta */
  --pad-xs:12px; --pad-sm:16px; --pad-md:20px; --pad-md-sm:24px; --pad-lg:24px; --pad-lg-sm:32px;   /* padding de card (base · ≥640px) */
}
::selection{background:rgba(var(--cyan-rgb),.35);color:var(--text-strong)}
html{scrollbar-color:var(--scroll) var(--bg);scroll-behavior:smooth}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px;line-height:24px;-webkit-font-smoothing:antialiased}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* fondo fijo: la foto no se mueve, el contenido se desplaza encima */
.bg-fixed{position:fixed;inset:0;z-index:-1;transform:translateZ(0);background:var(--bg) var(--bg-img) 70% 50%/cover no-repeat;pointer-events:none}
.bg-fixed::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(var(--shade-rgb),.9),rgba(var(--shade-rgb),.72) 55%,rgba(var(--shade-rgb),.8))}
.bg-fixed.calm::after{background:rgba(var(--shade-rgb),.88)}
@media (max-width:900px){.bg-fixed{background-image:var(--bg-img-movil);background-position:50% 50%}}

/* superficies: TRES variantes de card (misma forma, mismo radio).
   .glass = principal sobre el fondo (blur) · .panel = sólida para herramientas, tablas y chat · .offer = énfasis cálido
   Modificadores: tamaño .card-xs/.card-sm/.card-md/.card-lg (padding) · .card-cy = énfasis cyan · .card-toast = aviso flotante */
.glass{background:var(--glass);border:1px solid var(--glass-line);border-radius:var(--r);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:var(--card-shadow)}
.panel{background:rgba(var(--surface-rgb),.88);border:1px solid var(--glass-line);border-radius:var(--r)}
.card-xs{padding:var(--pad-xs)}
.card-sm{padding:var(--pad-sm)}
.card-md{padding:var(--pad-md)}
.card-lg{padding:var(--pad-lg)}
@media (min-width:640px){.card-md{padding:var(--pad-md-sm)}.card-lg{padding:var(--pad-lg-sm)}}
.card-cy{background:rgba(var(--cyan-rgb),.08);border-color:rgba(var(--cyan-rgb),.35)}
.card-ok{background:rgba(var(--green-rgb),.07);border:1px solid rgba(var(--green-rgb),.3);border-radius:var(--r)}
.card-warm{background:rgba(var(--orange-rgb),.08);border:1px solid rgba(var(--orange-rgb),.3);border-radius:var(--r)}
.card-toast{border-radius:var(--r-sm)}
a.glass,button.glass,a.panel,button.panel,.glass.clicable,.panel.clicable{transition:transform .18s ease,border-color .18s ease}
a.glass:hover,a.panel:hover,.glass.clicable:hover,.panel.clicable:hover{border-color:rgba(var(--cyan-rgb),.45);transform:translateY(-2px)}
.dots{position:relative;isolation:isolate}
.dots::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(rgba(var(--cyan-rgb),.28) 1px,transparent 1.5px);background-size:24px 24px;-webkit-mask-image:radial-gradient(ellipse 60% 70% at 12% 20%,#000,transparent 72%);mask-image:radial-gradient(ellipse 60% 70% at 12% 20%,#000,transparent 72%);opacity:.55}

/* tipografía */
.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--cyan);background:rgba(var(--cyan-rgb),.07);border:1px solid rgba(var(--cyan-rgb),.28);border-radius:999px;padding:7px 14px;font-size:13px;line-height:18px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.eyebrow.o{color:var(--orange);background:rgba(var(--orange-rgb),.07);border-color:rgba(var(--orange-rgb),.3)}
.eyebrow.o::before{background:var(--orange);box-shadow:0 0 10px var(--orange)}
.kicker{font-size:13px;line-height:18px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}
.kicker.o{color:var(--orange)}
.big{font-family:var(--font-display);font-style:var(--h-style);font-weight:var(--h-weight);text-transform:var(--h-transform);letter-spacing:var(--h-tracking);line-height:1.1;font-size:clamp(34px,4.7vw,66px);text-wrap:balance}
.big.md{font-size:clamp(28px,3.8vw,48px);line-height:1.17}
.big.sm{font-size:clamp(22px,2.4vw,30px);line-height:1.2}
.hl{color:var(--on-accent);background:linear-gradient(var(--cyan),var(--cyan)) no-repeat 0 55%/100% 86%;padding:0 .14em;box-decoration-break:clone;-webkit-box-decoration-break:clone;border-radius:2px}
.hl-o{background-image:linear-gradient(var(--orange),var(--orange))}
.micro{font-size:14px;line-height:20px;color:var(--muted-2)}
.micro b{color:var(--text);font-weight:600}

/* botón principal (cyan) */
.btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:var(--btn-bg);color:var(--btn-fg);text-decoration:none;border:0;cursor:pointer;font-family:inherit;border-radius:var(--btn-r);padding:17px 34px;font-weight:var(--btn-weight);font-size:clamp(15px,1.7vw,17px);line-height:22px;text-transform:var(--btn-transform);letter-spacing:.02em;text-align:center;box-shadow:var(--btn-shadow);transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.btn:hover{transform:translateY(-2px) scale(1.015);filter:brightness(1.08);box-shadow:var(--btn-shadow-hover)}
.btn:active{transform:translateY(0) scale(.99)}
.btn:focus-visible{outline:2px solid var(--on-accent-ring);outline-offset:3px}
.btn[disabled]{cursor:wait;filter:saturate(.7) brightness(.9);transform:none}
.btn small{font-size:13px;line-height:18px;font-weight:700;letter-spacing:.04em;opacity:.85}
.btn .bt{display:inline-flex;align-items:center;gap:10px}
.btn.sm{padding:11px 20px;font-size:13px;line-height:18px;border-radius:var(--btn-r-sm)}
.btn.block{display:flex;width:100%}
/* botón de acción cálida (oferta de cierre): naranja solo si es compra/urgencia */
.btn.o{background:var(--orange);color:var(--on-accent);box-shadow:0 0 0 1px rgba(var(--orange-rgb),.55),0 10px 36px rgba(var(--orange-rgb),.28)}
.btn.o:hover{box-shadow:0 0 0 1px rgba(var(--orange-hi-rgb),.8),0 14px 46px rgba(var(--orange-rgb),.5)}
/* botón secundario */
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:10px;color:var(--text);background:rgba(var(--ink-rgb),.03);border:1px solid rgba(var(--ink-rgb),.2);border-radius:var(--btn-r);padding:14px 22px;font-family:inherit;font-weight:700;font-size:14px;line-height:20px;text-transform:var(--btn-transform);letter-spacing:.04em;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.btn-ghost:hover{border-color:var(--cyan);background:rgba(var(--cyan-rgb),.08);color:var(--cyan)}
.mini{font-family:inherit;font-size:12px;line-height:16px;font-weight:600;color:var(--text-2);border:1px solid rgba(var(--ink-rgb),.18);border-radius:10px;padding:6px 12px;background:rgba(var(--ink-rgb),.03);transition:border-color .15s,color .15s,background .15s;white-space:nowrap;cursor:pointer}
.mini:hover{border-color:var(--cyan);color:var(--cyan)}
.mini.on{background:rgba(var(--cyan-rgb),.14);border-color:var(--cyan);color:var(--cyan)}

/* campos */
.field,.inp{width:100%;font:inherit;font-size:16px;line-height:24px;color:var(--text);background:var(--field-bg);border:1px solid rgba(var(--ink-rgb),.14);border-radius:12px;padding:12px 16px;outline:none;transition:border-color .2s,box-shadow .2s}
.field::placeholder,.inp::placeholder{color:var(--placeholder)}
.field:focus,.inp:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(var(--cyan-rgb),.18)}
.field.bad,.inp.bad{border-color:var(--red);box-shadow:0 0 0 3px rgba(var(--red-rgb),.15)}
.field.good,.inp.good{border-color:rgba(var(--green-rgb),.55)}
select.field option{background:var(--option-bg)}
.lbl,.fld label,.fld legend{display:block;font-size:13px;line-height:18px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);margin-bottom:8px;padding:0}
.lbl{color:var(--muted-2);font-size:12px;margin-bottom:6px}
.fld label i,.fld legend i{font-style:normal;color:var(--orange)}
.m-err,.err{margin-top:7px;font-size:14px;line-height:20px;color:var(--red);font-weight:500}
.m-hint,.hint{margin-top:7px;font-size:14px;line-height:20px;color:var(--orange)}
.m-hint button,.hint button{font:inherit;font-weight:700;color:var(--text-strong);background:none;border:0;border-bottom:1px solid var(--orange);cursor:pointer;padding:0}

/* etiquetas */
.pill{font-size:11px;line-height:16px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:3px 10px;white-space:nowrap;display:inline-block}
@keyframes pulse-live{0%,100%{box-shadow:0 0 0 0 rgba(var(--live-rgb),.6)}50%{box-shadow:0 0 0 7px rgba(var(--live-rgb),0)}}
@keyframes dotp{0%,100%{opacity:1}50%{opacity:.3}}
.live{background:var(--live);color:#fff;animation:pulse-live 1.6s infinite}
.live i{animation:dotp 1.2s infinite}
.blink{animation:dotp 1.2s infinite}
.dot{width:9px;height:9px;border-radius:50%;background:var(--orange);flex:0 0 auto;animation:pulse 1.4s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(var(--orange-rgb),.85);transform:scale(.85)}60%{box-shadow:0 0 0 12px rgba(var(--orange-rgb),0);transform:scale(1.15)}100%{box-shadow:0 0 0 0 rgba(var(--orange-rgb),0);transform:scale(.85)}}

/* beneficios con palomita y bloque de oferta */
.ck-li{display:flex;gap:12px;font-size:16px;line-height:24px;color:var(--text-2)}
.ck-li .ck{flex:0 0 24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:13px;margin-top:0;color:var(--green);background:rgba(var(--green-rgb),.12);border:1px solid rgba(var(--green-rgb),.4)}
.offer{background:linear-gradient(135deg,rgba(var(--orange-rgb),.1),rgba(var(--surface-rgb),.92) 55%);border:1px solid rgba(var(--orange-rgb),.4);border-radius:var(--r);box-shadow:var(--card-shadow),0 0 50px rgba(var(--orange-rgb),.08)}

/* popup / card de registro */
body.lock{overflow:hidden}
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:rgba(var(--shade-rgb),.74);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s}
.modal.open{opacity:1;visibility:visible;transition:opacity .25s ease}
.dialog{position:relative;width:100%;max-width:480px;max-height:calc(100dvh - 40px);overflow-y:auto;overscroll-behavior:contain;padding:30px 28px 26px;background:rgba(var(--surface-2-rgb),.96);border:1px solid rgba(var(--cyan-rgb),.28);border-radius:var(--r-lg);box-shadow:0 30px 90px rgba(0,0,0,.6),0 0 70px rgba(var(--cyan-rgb),.1),0 0 90px rgba(var(--orange-rgb),.07);outline:none}
.modal .dialog{transform:translateY(14px) scale(.985);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.modal.open .dialog{transform:none}
.dialog.card-fija{max-height:none;overflow:visible}
.dialog .eyebrow{margin-bottom:16px}
.dialog h1,.dialog h2{font-size:clamp(26px,3.4vw,34px);line-height:1.12}
.m-sub{margin-top:12px;font-size:15px;line-height:23px;color:var(--body)}
.m-sub b{color:var(--text-strong);font-weight:700}
.m-form{display:grid;gap:18px;margin-top:22px}
.slots{display:grid;gap:10px}
.slot{position:relative}
.slot input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.fld .slot label{display:flex;align-items:center;gap:14px;margin:0;text-transform:none;letter-spacing:0;font-size:15px;line-height:22px;font-weight:600;color:var(--text-1);padding:14px 16px;background:rgba(var(--surface-rgb),.88);border:1px solid var(--glass-line);border-radius:12px;transition:border-color .2s,background .2s;cursor:pointer}
.slot input:checked+label{border-color:var(--cyan);background:rgba(var(--cyan-rgb),.08);box-shadow:0 0 28px rgba(var(--cyan-rgb),.1)}
.slot input:focus-visible+label{outline:2px solid var(--cyan);outline-offset:3px}
.slot .rd{flex:0 0 20px;height:20px;border-radius:50%;border:2px solid var(--line-strong);display:grid;place-items:center}
.slot input:checked+label .rd{border-color:var(--cyan)}
.slot input:checked+label .rd::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--cyan)}
.slot label small{display:block;font-size:13px;line-height:18px;font-weight:500;color:var(--muted-2)}
.slot label em{margin-left:auto;font-style:normal;font-size:12px;line-height:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);text-align:right;white-space:nowrap}
.slot label em.hot{color:var(--orange)}
.fld .opt{display:flex;gap:12px;align-items:flex-start;cursor:pointer;margin:0;text-transform:none;letter-spacing:0;font-size:15px;line-height:22px;font-weight:400;color:var(--text-2);position:relative}
.opt input{position:absolute;opacity:0}
.opt .bx{flex:0 0 22px;height:22px;margin-top:1px;border-radius:6px;border:1.5px solid var(--line-strong);display:grid;place-items:center;color:var(--on-accent);transition:background .2s,border-color .2s;font-size:14px;font-weight:800}
.opt .bx::after{content:"✓";opacity:0}
.opt input:checked+.bx{background:var(--cyan);border-color:var(--cyan)}
.opt input:checked+.bx::after{opacity:1}
.opt input:focus-visible+.bx{outline:2px solid var(--cyan);outline-offset:3px}
.wa-box{margin-top:14px}
.wa-row{display:flex;gap:10px}
.wa-row .pre{flex:0 0 auto;display:flex;align-items:center;padding:0 14px;color:var(--muted-2);font-weight:600;background:var(--field-bg);border:1px solid rgba(var(--ink-rgb),.14);border-radius:12px;font-size:15px;user-select:none}
.m-priv{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:14px;font-size:14px;line-height:20px;color:var(--muted-2);text-align:center}
.spin{display:inline-block;width:18px;height:18px;border-radius:50%;border:3px solid rgba(var(--on-accent-rgb),.25);border-top-color:var(--on-accent);animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.tick-ok{width:76px;height:76px;margin:0 auto 22px;border-radius:50%;display:grid;place-items:center;color:var(--green);background:rgba(var(--green-rgb),.1);border:2px solid rgba(var(--green-rgb),.55);box-shadow:0 0 0 7px rgba(var(--green-rgb),.08),0 0 40px rgba(var(--green-rgb),.3);animation:pop .5s cubic-bezier(.2,1.4,.4,1) both}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
@media (max-width:640px){
  .modal{align-items:end;padding:0}
  .modal .dialog{max-width:none;max-height:92dvh;border-radius:20px 20px 0 0;padding:26px 20px calc(22px + env(safe-area-inset-bottom,0px));transform:translateY(40px)}
  .modal.open .dialog{transform:none}
}

/* toast */
#toast{transition:opacity .3s,transform .3s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* Tarjeta "Toca para escuchar": respira lento (escala + brillo cyan) */
@keyframes respira{0%,100%{transform:scale(1);box-shadow:0 8px 30px rgba(0,0,0,.45),0 0 0 0 rgba(var(--cyan-rgb),0)}50%{transform:scale(1.045);box-shadow:0 8px 30px rgba(0,0,0,.45),0 0 34px 4px rgba(var(--cyan-rgb),.32)}}
@keyframes ondas{0%,100%{opacity:.25}50%{opacity:1}}
.sonido-card{display:grid;justify-items:center;gap:10px;width:min(78%,300px);padding:16px 18px;text-align:center;background:var(--glass);border:1px solid rgba(var(--cyan-rgb),.45);border-radius:var(--r);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.respira{animation:respira 3.4s ease-in-out infinite}
.sonido-ico{color:var(--text)}
.sonido-ico .tacha{color:var(--orange);stroke:var(--orange)}
.sonido-ico .ondas{animation:ondas 3.4s ease-in-out infinite}
.sonido-txt{font-size:15px;line-height:20px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--text)}
#unmute:hover .sonido-card, .sonido-btn:hover .sonido-card{border-color:var(--cyan)}
@media (max-width:420px){.sonido-card{gap:6px;padding:12px 14px}.sonido-ico{width:34px;height:34px}.sonido-txt{font-size:13px}}
@media (prefers-reduced-motion:reduce){.respira,.sonido-ico .ondas{animation:none}}

/* Botón Agrandar: solo ícono, discreto, en la esquina inferior derecha del video */
.btn-video{display:inline-grid;place-items:center;width:34px;height:34px;padding:0;color:var(--text);background:rgba(8,10,14,.45);border:1px solid rgba(var(--ink-rgb),.18);border-radius:10px;cursor:pointer;opacity:.8;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:border-color .2s,color .2s,opacity .2s}
.btn-video:hover{border-color:var(--cyan);color:var(--cyan);opacity:1}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Mensaje de la anfitriona en el chat: nombre + etiqueta, destacado con cyan */
.badge-anfi{font-size:10px;line-height:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--on-accent);background:var(--cyan);border-radius:6px;padding:1px 6px}
li.anfitriona{background:rgba(var(--cyan-rgb),.08);border:1px solid rgba(var(--cyan-rgb),.25)}
#fijado{background:rgba(var(--cyan-rgb),.08);border:1px solid rgba(var(--cyan-rgb),.35)}
/* Mensaje destacado por el host en el chat de la audiencia */
li.destacado{background:rgba(var(--orange-rgb),.1);border:1px solid rgba(var(--orange-rgb),.4)}

/* Chat vacío: no se queda en blanco */
#chat-list:empty::before{content:"Aquí aparecerán los mensajes del chat.";display:block;padding:14px 4px;font-size:14px;color:var(--muted-2)}
/* Pantallas táctiles: el botón Agrandar alcanza el tamaño mínimo cómodo (44 px) */
@media (pointer:coarse){.btn-video{width:44px;height:44px}}

/* vista previa de un tema (grid de Apariencia del panel y web/temas.html) */
.chip{min-height:44px;padding:8px 16px;border-radius:999px;font:inherit;font-size:14px;font-weight:700;color:var(--muted-2);background:rgba(var(--surface-rgb),.88);border:1px solid rgba(var(--ink-rgb),.14);cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.chip:hover{border-color:rgba(var(--cyan-rgb),.55)}
.chip[aria-pressed=true]{color:var(--cyan);border-color:var(--cyan);background:rgba(var(--cyan-rgb),.08)}
.tema-caja{border:1px solid var(--glass-line);border-radius:var(--r);padding:var(--pad-md);display:grid;gap:12px;position:relative;overflow:hidden;isolation:isolate}
.tema-caja::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--bg-img);background-size:cover}
.tema-caja .t{font-size:clamp(22px,2.2vw,28px);line-height:1.1}
.tema-caja .sub{font-size:14px;line-height:20px;color:var(--body)}
.tema-caja .mini-card{padding:var(--pad-xs) var(--pad-sm);border-radius:var(--r);background:rgba(var(--surface-rgb),.9);border:1px solid var(--glass-line);box-shadow:var(--card-shadow);font-size:13px;color:var(--text-2)}
.tema-caja .btn{padding:11px 20px;font-size:13px;line-height:18px;border-radius:var(--btn-r)}
.tema-caja .btn-ghost{padding:10px 18px;font-size:13px}
.sw{display:inline-block;width:22px;height:22px;border-radius:50%;border:1px solid rgba(var(--ink-rgb),.25)}