/* Reset, layout general, tipografía y páginas. La base sobre la que
   se apoyan los componentes. */

/* -------------------- RESET & BASE -------------------- */
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;}
body{
  background:
    radial-gradient(900px 500px at 20% 0%, rgba(240,198,116,0.04), transparent),
    radial-gradient(600px 400px at 80% 0%, rgba(96,165,250,0.03), transparent),
    var(--bg);
  color:var(--text);font-family:var(--font-ui);font-size:14px;line-height:1.5;
  min-height:100vh;padding:var(--space-5) var(--space-3) 80px;
}
::selection{background:rgba(240,198,116,0.25);color:#fff;}
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:var(--border-hover);}
[onclick],button,.tile,.toggle-opt,.tab,.step-btn,.topnav-btn,.history-item,.chart-menu-item,.libro-row,.conversor-row{
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;
}

/* -------------------- LAYOUT -------------------- */
.wrap{max-width:840px;margin:0 auto;}
.app-container{animation:fadeIn 0.5s ease-out;}
/* La pone y la quita js/ui/auth.js. Lleva !important porque el panel de trabajo le da al
   mismo contenedor un display propio, y esconder tiene que ganar siempre. */
.app-container.oculta{display:none!important;}
.auth-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:var(--space-5) var(--space-3);
  background:radial-gradient(600px 400px at 50% 30%, rgba(240,198,116,0.05), transparent);
}

/* -------------------- TYPOGRAPHY -------------------- */
h1.title{
  text-align:center;font-size:26px;letter-spacing:-0.02em;font-weight:700;
  margin:0 0 var(--space-5);
  background:linear-gradient(180deg,var(--text),var(--text-secondary));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
h1.title span{color:var(--gold);-webkit-text-fill-color:var(--gold);}

/* -------------------- PAGES -------------------- */
.page{display:none;}
.page[style*="block"]{display:block!important;animation:fadeIn 0.4s ease-out;}

/* -------------------- ANIMATIONS -------------------- */
@keyframes fadeIn{
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes slideUp{
  from{opacity:0;transform:translateY(20px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes shake{
  0%,100%{transform:translateX(0);}
  25%{transform:translateX(-6px);}
  75%{transform:translateX(6px);}
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 4px rgba(14,203,129,0.2);}
  50%{box-shadow:0 0 0 8px rgba(14,203,129,0);}
}
@keyframes shimmer{
  0%{background-position:200% 0;}
  100%{background-position:-200% 0;}
}
@keyframes toastIn{
  from{opacity:0;transform:translateX(40px) scale(0.95);}
  to{opacity:1;transform:translateX(0) scale(1);}
}
@keyframes toastOut{
  from{opacity:1;transform:translateX(0);}
  to{opacity:0;transform:translateX(40px);}
}
@keyframes progressShrink{
  from{width:100%;}
  to{width:0%;}
}
@keyframes float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-8px);}
}