/* ============================================================================
   IFRITLAB · V2 · base.css
   Fundamento visual de toda la aplicación: tokens "Aurora Glass", reset,
   fondo, tipografía y primitivos compartidos (botones, tarjetas, scrollbar).
   CSS 100% propio — sin frameworks.
   ============================================================================ */

/* ---------------------------------------------------------------- TOKENS --- */
/* `color-scheme: dark` aplicado en el root: dice al navegador que use SU tema
   oscuro para todos los widgets nativos (lista desplegable de los <select>,
   scrollbars, datepicker, autofill, modal "elegir archivo"). Sin esto, el
   <option> dentro de los desplegables coge el tema del SO, lo que en máquinas
   con SO en modo claro hace que el desplegable salga blanco sobre nuestra UI
   oscura. Forzarlo aquí lo unifica en todos los dispositivos. */
:root{
  color-scheme:dark;
  /* Superficies */
  --bg:#06060B;
  --bg-2:#0A0A11;
  --glass:rgba(255,255,255,.045);
  --glass-2:rgba(255,255,255,.07);
  --glass-3:rgba(255,255,255,.10);
  --border:rgba(255,255,255,.10);
  --border-2:rgba(255,255,255,.18);

  /* Texto */
  --text:#F6F5FA;
  --text-dim:#B6B4C6;
  --text-faint:#7B7990;
  --text-ghost:#55546A;

  /* Marca · fuego Ifrit */
  --fire-1:#FFB347;
  --fire-2:#FF6A2B;
  --fire-3:#FF3D2E;
  --mag:#FF2D78;
  --vio:#6D5EF8;
  --fire-grad:linear-gradient(135deg,#FFB347,#FF6A2B 48%,#FF2D78);
  --fire-grad-soft:linear-gradient(135deg,rgba(255,179,71,.2),rgba(255,45,120,.2));

  /* Estados */
  --ok:#3DE6A4;
  --warn:#FFB347;
  --alert:#FF4D6D;
  --info:#6D5EF8;

  /* Forma */
  --r-xs:8px;
  --r-sm:11px;
  --r-md:14px;
  --r-lg:18px;
  --r-xl:22px;
  --shadow-sm:0 4px 14px -6px rgba(0,0,0,.6);
  --shadow:0 18px 44px -22px rgba(0,0,0,.78);
  --shadow-glow:0 12px 34px -10px rgba(255,106,43,.55);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ----------------------------------------------------------------- RESET --- */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:14px;
  line-height:1.5;
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}
img,svg{display:block}
ul,ol{list-style:none}
::selection{background:rgba(255,106,43,.32);color:#fff}

/* Scrollbar coherente */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.12);
  border-radius:99px;
  border:3px solid transparent;
  background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.22);background-clip:padding-box}

/* --------------------------------------------------------------- AURORA --- */
/* Fondo aurora animado: blobs de color desenfocados que derivan despacio. */
.aurora{
  position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
}
.aurora .blob{
  position:absolute;border-radius:50%;
  filter:blur(90px);opacity:.55;
  will-change:transform;
}
.aurora .b1{width:46vw;height:46vw;left:-8vw;top:-12vw;
  background:radial-gradient(circle,rgba(255,106,43,.95),transparent 66%);
  animation:drift1 26s var(--ease) infinite alternate}
.aurora .b2{width:42vw;height:42vw;right:-10vw;top:-6vw;
  background:radial-gradient(circle,rgba(255,45,120,.85),transparent 66%);
  animation:drift2 32s var(--ease) infinite alternate}
.aurora .b3{width:50vw;height:50vw;left:24vw;bottom:-26vw;
  background:radial-gradient(circle,rgba(109,94,248,.8),transparent 66%);
  animation:drift3 30s var(--ease) infinite alternate}
.aurora .b4{width:34vw;height:34vw;left:-6vw;bottom:-12vw;
  background:radial-gradient(circle,rgba(255,179,71,.6),transparent 66%);
  animation:drift1 36s var(--ease) infinite alternate-reverse}
.aurora::after{                       /* veladura para legibilidad */
  content:"";position:absolute;inset:0;
  background:rgba(6,6,11,.5);
  backdrop-filter:saturate(1.1);
}
@keyframes drift1{from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(7vw,5vw,0) scale(1.16)}}
@keyframes drift2{from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(-6vw,8vw,0) scale(1.2)}}
@keyframes drift3{from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(-5vw,-7vw,0) scale(1.14)}}

/* --------------------------------------------------------- MARCA / LOGO --- */
.flame-mark{
  position:relative;
  display:grid;place-items:center;flex-shrink:0;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,140,60,.32), transparent 65%),
    radial-gradient(circle at 80% 90%, rgba(255,45,120,.22), transparent 60%),
    linear-gradient(140deg, #1a1018 0%, #0a0810 100%);
  border-radius:var(--r-sm);
  box-shadow:
    0 8px 24px -6px rgba(255,45,120,.55),
    inset 0 0 0 1px rgba(255,106,43,.42);
  overflow:hidden;
}
.flame-mark::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg,rgba(255,140,60,.6),rgba(255,45,120,.35) 60%,rgba(109,94,248,.3));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
}
.flame-mark img{
  width:82%;height:82%;
  object-fit:contain;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.55));
  position:relative;z-index:1;
}
.flame-mark svg{width:60%;height:60%}
.flame-mark svg path{fill:#fff}

.wordmark{font-weight:800;letter-spacing:-.02em}
.wordmark .lab{
  background:var(--fire-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ----------------------------------------------------------- PRIMITIVOS --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:700;font-size:13.5px;letter-spacing:-.01em;
  padding:13px 20px;border-radius:var(--r-md);
  background:var(--fire-grad);color:#fff;
  box-shadow:var(--shadow-glow);
  transition:transform .14s var(--ease),filter .14s,box-shadow .14s;
}
.btn:hover{transform:translateY(-1px);filter:brightness(1.07)}
.btn:active{transform:translateY(0) scale(.99)}
.btn:disabled{opacity:.7;cursor:not-allowed;transform:none;filter:saturate(.7)}
.btn svg{width:17px;height:17px}
/* `.btn-ghost` se usa tanto modificando a `.btn` como por sí solo — debe
   funcionar standalone (mismo layout y dimensiones que `.btn`).             */
.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:inherit;font-weight:700;font-size:13.5px;letter-spacing:-.01em;
  line-height:1;cursor:pointer;text-decoration:none;
  padding:13px 20px;border-radius:var(--r-md);
  background:var(--glass-2);color:var(--text);
  border:1px solid var(--border-2);box-shadow:none;backdrop-filter:blur(10px);
  transition:background .14s,border-color .14s,transform .14s var(--ease);
}
.btn-ghost:hover{background:var(--glass-3);filter:none;transform:translateY(-1px)}
.btn-ghost:active{transform:translateY(0) scale(.99)}
.btn-ghost:disabled{opacity:.6;cursor:not-allowed;transform:none}
.btn-ghost svg{width:17px;height:17px;flex-shrink:0}

.glass{
  background:var(--glass);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  backdrop-filter:blur(20px);
  box-shadow:var(--shadow);
}

/* Accesibilidad: respetar quien pide menos movimiento */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}