:root{--bg:#0B0F1A;--panel:#111827;--ink:#F3F4F6;--soft:#8B93A7;--vio:#38BDF8;--vio2:#7DD3FC;--cyan:#22D3EE;--mag:#F471B5;--line:rgba(148,163,184,.18);--glow:rgba(56,189,248,.35);}
html{color-scheme:dark}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:'Sora',sans-serif}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(900px 520px at 86% -6%,rgba(56,189,248,.12),transparent 60%),radial-gradient(720px 520px at -6% 14%,rgba(34,211,238,.08),transparent 55%),radial-gradient(680px 620px at 52% 116%,rgba(14,165,233,.08),transparent 60%)}
.z{position:relative;z-index:1}
.font-d{font-family:'Space Grotesk',-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif}
.wrap{max-width:760px;margin:0 auto;padding:0 18px}
.grad{background:linear-gradient(110deg,#7DD3FC,#38BDF8,#22D3EE,#7DD3FC);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shine 7s ease-in-out infinite}
@keyframes shine{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:0 12px 34px -22px rgba(0,0,0,.7);transition:border-color .25s}
.card:hover{border-color:rgba(56,189,248,.3)}
input,textarea,select{width:100%;font-family:'Sora';font-size:15px;background:#0F172A;border:1.5px solid var(--line);border-radius:11px;padding:11px 12px;color:var(--ink);color-scheme:dark;resize:vertical;transition:border-color .2s,box-shadow .2s}
input::placeholder,textarea::placeholder{color:#64748B}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--vio);box-shadow:0 0 0 3px rgba(56,189,248,.18)}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2338BDF8' stroke-width='2.5' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}
select option,select optgroup{background:#111827;color:var(--ink)}
.btn{font-family:'Sora';font-weight:600;font-size:14px;border:none;border-radius:11px;padding:11px 16px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;transition:transform .15s,box-shadow .2s,filter .2s,background-color .2s,border-color .2s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn:disabled{opacity:.5;cursor:default}
.primary{background:linear-gradient(110deg,#38BDF8,#0EA5E9);color:#06283D;box-shadow:0 6px 22px -8px var(--glow)}
.primary:hover{filter:brightness(1.06)}
.alt{background:#0F172A;border:1px solid rgba(34,211,238,.45);color:var(--ink)}
.ghost{background:transparent;color:var(--soft);padding:7px 9px}
.danger{background:#0F172A;border:1px solid rgba(244,113,181,.5);color:#F471B5}
.tab{background:none;border:none;color:var(--soft);font-family:'Sora';font-weight:600;font-size:14px;padding:0 0 11px;cursor:pointer;position:relative;white-space:nowrap}
.tab.on{color:var(--ink)}
.tab.on::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,#38BDF8,#22D3EE);border-radius:2px;animation:rise .3s both}
.lbl{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--soft)}
.pill{font-size:11px;font-weight:700;padding:2px 9px;border-radius:99px;display:inline-block}
.spin{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.rise{animation:rise .5s cubic-bezier(.2,.7,.3,1) both}@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.overlay{position:fixed;inset:0;background:rgba(3,7,18,.7);z-index:30;display:flex;align-items:center;justify-content:center;padding:18px;animation:fadein .2s both}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.modal{max-width:430px;width:100%;background:#111827}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--soft);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.05em}
.scroll{overflow-x:auto}
pre{font-family:'Sora';white-space:pre-wrap;line-height:1.62;margin:0;font-size:14px;color:var(--ink)}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:rgba(56,189,248,.3);border-radius:8px}
#root>.boot{padding-top:100px;text-align:center;color:var(--vio2);font-family:'Space Grotesk',-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:18px}

/* Botón de "generar por lotes": brillo animado tipo reflejo pasando por encima */
.batch-glow-btn{box-shadow:0 0 0 1px rgba(56,189,248,.15), 0 0 18px -4px rgba(56,189,248,.45)}
.batch-glow-btn::after{
  content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg, transparent, rgba(125,211,252,.35), transparent);
  transform:skewX(-20deg);animation:batchSweep 2.8s ease-in-out infinite;
}
@keyframes batchSweep{0%{left:-60%}55%{left:130%}100%{left:130%}}

/* ===== Nuevo UI de autenticación (registro / login / crear usuario) ===== */
@keyframes authRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes authGrid{from{background-position:0 0,0 0}to{background-position:60px 60px,60px 60px}}
@keyframes authAuraA{0%,100%{transform:translate(-12%,-6%) scale(1);opacity:.55}50%{transform:translate(10%,8%) scale(1.18);opacity:.85}}
@keyframes authAuraB{0%,100%{transform:translate(14%,10%) scale(1.1);opacity:.4}50%{transform:translate(-8%,-10%) scale(.9);opacity:.7}}
@keyframes authSweep{from{transform:translateX(-120%)}to{transform:translateX(320%)}}
@keyframes authPulse{0%,100%{box-shadow:0 12px 34px -12px rgba(34,211,238,.7)}50%{box-shadow:0 12px 48px -8px rgba(34,211,238,.95)}}
@keyframes authPop{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
.auth-rise{animation:authRise .5s cubic-bezier(.2,.8,.3,1) both}
.auth-grid{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(120,180,235,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(120,180,235,.055) 1px,transparent 1px);
  background-size:60px 60px;animation:authGrid 22s linear infinite;
  mask-image:radial-gradient(70% 60% at 50% 45%,#000 30%,transparent 100%);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 45%,#000 30%,transparent 100%)}
.auth-aura-a{position:absolute;top:-18%;left:8%;width:640px;height:640px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(34,211,238,.22),transparent 65%);filter:blur(40px);animation:authAuraA 16s ease-in-out infinite}
.auth-aura-b{position:absolute;bottom:-22%;right:4%;width:560px;height:560px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(56,189,248,.16),transparent 65%);filter:blur(50px);animation:authAuraB 19s ease-in-out infinite}
.auth-sweep{position:absolute;top:0;left:0;height:1px;width:34%;pointer-events:none;
  background:linear-gradient(90deg,transparent,#22d3ee,transparent);animation:authSweep 5.5s ease-in-out infinite}
.auth-input{width:100%;padding:14px 42px 14px 15px;border-radius:12px;font-size:15px;font-family:inherit;
  border:1px solid rgba(120,180,235,.16);background:#101d2b;color:var(--ink);transition:border-color .18s,box-shadow .18s}
.auth-input::placeholder{color:#4d6377}
.auth-input:focus{outline:none;border-color:#22d3ee;box-shadow:0 0 0 4px rgba(34,211,238,.13),0 0 28px -6px rgba(34,211,238,.7)}
.auth-input.bad{border-color:rgba(253,164,175,.6)}
.auth-ok{position:absolute;right:14px;top:50%;transform:translateY(-50%);display:flex;color:#34D399;animation:authPop .22s cubic-bezier(.2,1.4,.5,1) both}
.auth-req{padding:2px 8px;border-radius:999px;font-size:9.5px;font-weight:700;letter-spacing:.1em;
  color:#f9a8d4;background:rgba(244,114,182,.11);border:1px solid rgba(244,114,182,.28)}
.auth-lbl{font-size:11.5px;font-weight:600;letter-spacing:.13em;color:#8fa6ba}
.auth-btn-on{animation:authRise .5s cubic-bezier(.2,.8,.3,1) both,authPulse 2.6s ease-in-out infinite .6s}

/* Panel de "estamos creando tu perfil de voz": ondas de audio latiendo,
   evoca que se está analizando la voz del usuario. */
@keyframes voiceBar{0%,100%{transform:scaleY(.35);opacity:.55}50%{transform:scaleY(1);opacity:1}}
.vp-bar{width:5px;border-radius:3px;background:linear-gradient(180deg,var(--cyan),var(--vio2));transform-origin:center;animation:voiceBar 1.25s ease-in-out infinite}
@keyframes voicePulse{0%,100%{box-shadow:0 0 0 0 rgba(56,189,248,.28)}50%{box-shadow:0 0 0 14px rgba(56,189,248,0)}}
.vp-halo{animation:voicePulse 2.4s ease-out infinite}

/* Respeta el notch/Dynamic Island y la barra de gestos del iPhone -- sin
   esto, con viewport-fit=cover el contenido queda DEBAJO de la cámara
   frontal y no se puede tocar ahí. */
.app-header{padding-top:calc(30px + env(safe-area-inset-top)) !important}
.app-bottom-safe{padding-bottom:env(safe-area-inset-bottom)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}}