/* Misma línea gráfica que noxis.pe: mismos tokens de color exactos que
   assets/css/styleshared.css / stylehome.css del sitio (--color-bg,
   --color-gold, --color-panel, fuente Cinzel para títulos). */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;900&display=swap');

:root {
  --color-bg: #04070A;
  --color-bg-elevated: #0C0A12;
  --color-bg-card: #28113E;
  --color-bg-card-hover: #4A2270;
  --color-border: rgba(190, 138, 68, 0.35);

  --color-primary: #4A2270;
  --color-primary-dim: #28113E;
  --color-gold: #BE8A44;
  --color-gold-soft: #E7C67E;
  --color-gold-dark: #6E4E24;

  --color-text: #FFFFFF;
  --color-text-muted: rgba(255, 255, 255, 0.62);
  --color-text-faint: rgba(255, 255, 255, 0.4);

  --color-success: #4ade80;
  --color-available: #facc15;
  --color-locked: #55507a;
  --color-danger: #FF6B6B;

  --font-heading: 'Cinzel', 'Segoe UI', serif;
  --font-body: 'Segoe UI', Arial, sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;

  --shadow-card: 0 16px 34px rgba(0, 0, 0, 0.5), 0 0 24px rgba(190, 138, 68, 0.12);
  --shadow-glow-gold: 0 0 0 1px rgba(190, 138, 68, 0.4), 0 0 16px rgba(190, 138, 68, 0.25);
  --shadow-glow-primary: 0 0 0 1px rgba(190, 138, 68, 0.5), 0 0 16px rgba(190, 138, 68, 0.3);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  background:
    radial-gradient(1200px 620px at 50% -12%, rgba(74, 34, 112, 0.45), transparent 60%),
    radial-gradient(900px 520px at 100% 0%, rgba(190, 138, 68, 0.10), transparent 55%),
    var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0.03em;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input {
  font-family: inherit;
}

a {
  color: inherit;
}

img,
svg {
  display: block;
}

.icon {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.oculto {
  display: none !important;
}

.contenedor {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 16px;
}

.pantalla {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--color-gold), var(--color-gold-dark));
  border-radius: 4px;
}

.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  max-width: 480px;
  margin: 0 auto;
  background: rgba(12, 10, 18, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(190, 138, 68, 0.25);
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
  z-index: 10;
}

.tabbar-boton {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 0;
  font-size: 11px;
  color: var(--color-text-faint);
  transition: color 0.2s ease;
}

.tabbar-boton .icon {
  width: 21px;
  height: 21px;
}

.tabbar-boton.activa {
  color: var(--color-gold-soft);
  text-shadow: 0 0 14px rgba(190, 138, 68, 0.5);
}