/* ═══════════════════════════════════════════════════════════
   🎨 UNOS MATES — base.css
   Variables, temas y utilidades. Se carga SIEMPRE.
   ═══════════════════════════════════════════════════════════ */
@charset "UTF-8";

/* ═══════════════════════════════════════════════════════════
   1. VARIABLES GLOBALES
   ═══════════════════════════════════════════════════════════ */
:root {
  /* Tipografía fluida */
  --fs-sm:   clamp(0.875rem, 0.80rem + 0.35vw, 1.10rem);
  --fs-base: clamp(1.00rem,  0.90rem + 0.50vw, 1.35rem);
  --fs-md:   clamp(1.15rem,  1.00rem + 0.75vw, 1.75rem);
  --fs-lg:   clamp(1.50rem,  1.20rem + 1.50vw, 2.75rem);
  --fs-xl:   clamp(2.00rem,  1.50rem + 2.50vw, 4.00rem);
  --fs-2xl:  clamp(2.75rem,  1.80rem + 4.50vw, 6.00rem);

  /* Espaciado fluido */
  --sp-ss: clamp(0.30rem, 0.20rem + 0.30vw, 0.60rem);
  --sp-sm: clamp(0.50rem, 0.40rem + 0.50vw, 0.75rem);
  --sp-md: clamp(1.00rem, 0.80rem + 1.00vw, 1.50rem);
  --sp-lg: clamp(1.50rem, 1.00rem + 2.50vw, 2.50rem);
  --sp-xl: clamp(2.00rem, 1.50rem + 4.00vw, 4.00rem);

  /* Radios */
  --r-sm:   clamp(4px, 0.4vw, 8px);
  --r-md:   clamp(8px, 1vw, 16px);
  --r-lg:   clamp(12px, 1.5vw, 24px);
  --r-pill: 9999px;

  /* Sombras */
  --shadow:        0 8px 25px rgba(0, 0, 0, 0.08);
  --shadow-strong: 0 12px 30px rgba(0, 0, 0, 0.5);

  /* Fuentes */
  --font-main:  'Poppins', system-ui, sans-serif;
  --font-title: 'Oswald', sans-serif;
  --font-hand:  'Caveat', cursive;
  --font-alt:   'Allison', cursive;

  /* Navbar público */
  --nav-h: 96px;

  /* Navbar panel */
  --panel-h: 64px;

  /* ═══ Inputs (formularios) ═══ */
  --input-bg:            rgba(0, 0, 0, 0.08);
  --input-bg-focus:      rgba(0, 0, 0, 0.12);
  --input-border:        rgba(0, 0, 0, 0.2);
  --input-border-focus:  var(--primary);
  --input-text:          #141414;
  --input-placeholder:   #888;

  --sp-2xl: clamp(3.00rem, 2.00rem + 6.00vw, 6.00rem);
  --bg-banner: rgba(0, 0, 0, 0.5);
}

/* ═══════════════════════════════════════════════════════════
   2. TEMA CLARO
   ═══════════════════════════════════════════════════════════ */
.light-theme {
  --bg:            #5cbbe0;
  --bg-alt:        #ffffff;
  --text:          #141414;
  --muted:         #666666;
  --primary:       #eb7141;
  --primary-dark:  #ee5112;

  --card-bg:       rgba(255, 255, 255, 0.75);
  --navbar-bg:     rgba(20, 20, 20, 0.85);
  --footer-grad:   linear-gradient(#ffffff05 10%, #c2dce4ba 75%);

  --texture:       url('../img/textures/45-degree-fabric-dark.png');
  --paper:         url('../img/letter-paper.png');
  --banner:        url('../img/bg4.jpg');

  --icon-ig:  url('../img/icons/instagram_icon_b.png');
  --icon-yt:  url('../img/icons/youtube_icon_b.png');
  --icon-gh:  url('../img/icons/github_icon_b.png');
}

/* ═══════════════════════════════════════════════════════════
   3. TEMA OSCURO
   ═══════════════════════════════════════════════════════════ */
.dark-theme {
  --bg:            #021a38;
  --bg-alt:        #2b2b2b;
  --text:          #f2f2f2;
  --muted:         #aaaaaa;
  --primary:       #e69f43;
  --primary-dark:  #c97910;

  --card-bg:       rgba(255, 255, 255, 0.08);
  --navbar-bg:     rgba(20, 20, 20, 0.85);
  --footer-grad:   linear-gradient(#00384210 10%, #00141aaf 75%);

  --input-bg:            rgba(255, 255, 255, 0.08);
  --input-bg-focus:      rgba(255, 255, 255, 0.14);
  --input-border:        rgba(255, 255, 255, 0.2);
  --input-text:          #f2f2f2;
  --input-placeholder:   #aaa;

  --texture:       url('../img/textures/45-degree-fabric-light.png');
  --paper:         url('../img/letter-paper.png');
  --banner:        url('../img/bg5.jpg');

  --icon-ig:  url('../img/icons/instagram_icon_w.png');
  --icon-yt:  url('../img/icons/youtube_icon_w.png');
  --icon-gh:  url('../img/icons/github_icon_w.png');
}

/* ═══════════════════════════════════════════════════════════
   4. BASE — aplica tipografía y transición suave de tema
   ═══════════════════════════════════════════════════════════ */
body {
  font-family: var(--font-main);
  font-size: var(--fs-base);
  background-color: var(--bg);
  color: var(--text);
  transition: background-color 0.3s ease, color 0.3s ease;
  min-height: 100dvh;
}

/* El layout público reserva espacio para el navbar fixed */
body.layout-public {
  padding-top: var(--nav-h);
}

/* Fondo con textura para páginas del sitio público */
body.layout-public {
  background-image: var(--texture);
  background-attachment: fixed;
  background-repeat: repeat;
  background-blend-mode: soft-light;
}

/* ═══════════════════════════════════════════════════════════
   5. TIPOGRAFÍA — Títulos con fuentes custom
   ═══════════════════════════════════════════════════════════ */
h1, h2, h3 {
  font-family: var(--font-title);
  color: var(--primary);
  text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.4);
}

h2 {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Clases de fuentes */
.font-hand    { font-family: var(--font-hand); }
.font-alt     { font-family: var(--font-alt); }
.font-titan   { font-family: 'Titan One', sans-serif; }
.font-amatic  { font-family: 'Amatic SC', sans-serif; }
.font-alumni  { font-family: 'Alumni Sans', sans-serif; }
.font-rubik   { font-family: 'Rubik Dirt', system-ui; }

/* Sombras de texto */
.shadow-sm-text { text-shadow: 2px 2px 7px #333; }
.shadow-md-text { text-shadow: 4px 4px 2px black; }

/* ═══════════════════════════════════════════════════════════
   6. UTILIDADES
   ═══════════════════════════════════════════════════════════ */
.hidden { display: none !important; }

/* Focus accesible para todos los links/botones */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════
   7. RESPONSIVE — Ajustes de variables
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  :root { --nav-h: 72px; }
}

/* ═══════════════════════════════════════════════════════════
   8. PÁGINAS DE ERROR (compartidas en los 3 layouts)
   ═══════════════════════════════════════════════════════════ */
.error-page {
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 5rem) var(--sp-md);
  text-align: center;
  animation: errorFadeIn 0.4s ease-out;
}

.error-page .error-code {
  font-family: var(--font-title);
  font-size: clamp(5rem, 14vw, 11rem);
  line-height: 1;
  color: var(--primary);
  text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.25);
  margin-bottom: var(--sp-md);
  letter-spacing: -0.02em;
}

.error-page h1 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  margin-bottom: var(--sp-sm);
  color: var(--text);
  text-shadow: none;
}

.error-page p {
  font-size: var(--fs-base);
  color: var(--muted);
  margin-bottom: var(--sp-xl);
  line-height: 1.5;
}

.error-page .error-actions {
  display: flex;
  justify-content: center;
  gap: var(--sp-md);
  flex-wrap: wrap;
}

.error-page .error-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--r-pill);
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(235, 113, 65, 0.35);
}

.error-page .error-back:hover {
  background: var(--primary-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(235, 113, 65, 0.5);
}

@keyframes errorFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ═══════════════════════════════════════════════════════════
   9. OVERRIDES DE BOOTSTRAP PARA TEMAS
   ═══════════════════════════════════════════════════════════ */
.text-muted,
.text-body-secondary {
  color: var(--muted) !important;
}

.text-light-emphasis {
  color: var(--muted) !important;
}

/* Placeholder universal */
input::placeholder,
textarea::placeholder,
select::placeholder {
  color: var(--input-placeholder);
  opacity: 1;
}

/* Dropdowns nativos con color-scheme según tema */
.light-theme input,
.light-theme textarea,
.light-theme select {
  color-scheme: light;
}

.dark-theme input,
.dark-theme textarea,
.dark-theme select {
  color-scheme: dark;
}