/* css/main.css */

/* ==========================================================================
   1. VARIABLES DE TEMA (El alma del universo - Mutables desde Configuración)
   ========================================================================== */
:root {
  /* Fondo y contenedor de tarjetas (Modificables dinámicamente) */
  --bg-universo: #0f0c0a;         /* Negro profundo y cálido de fondo */
  --bg-tarjeta: #1c1714;          /* Marrón gótico sutil para las tarjetas */
  
  /* Color de Acento (Modificable: dorado, burdeos, tinto, etc.) */
  --color-acento: #d4a373;        /* Dorado alquímico por defecto */
  --borde-sutil: rgba(212, 163, 115, 0.15); /* Transparencia basada en el acento */
  
  /* Colores estáticos de interfaz */
  --texto-principal: #fcfaf7;     /* Blanco pergamino para una lectura cómoda */
  --texto-secundario: #a89a90;    /* Tono ceniza para textos de menor jerarquía */
  --bg-input: #26201c;            /* Fondo para inputs y formularios */
  --rojo-peligro: #b84a62;        /* Para acciones destructivas (ej. eliminar) */
  
  /* Tipografías */
  --fuente-titulos: 'Georgia', 'Times New Roman', serif;
  --fuente-cuerpo: 'system-ui', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  
  /* Transiciones globales */
  --transicion-suave: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ==========================================================================
   2. REGLAS BASE Y RESET
   ========================================================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-universo);
  color: var(--texto-principal);
  font-family: var(--fuente-cuerpo);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  transition: background-color 0.4s ease, color 0.4s ease;
  line-height: 1.6;
}

/* Estilo de la barra de desplazamiento (Scrollbar temática) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-universo);
}
::-webkit-scrollbar-thumb {
  background: var(--bg-tarjeta);
  border: 1px solid var(--borde-sutil);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-acento);
}

/* ==========================================================================
   3. TIPOGRAFÍA Y ENLACES
   ========================================================================== */
h1, h2, h3, h4, .serif-font {
  font-family: var(--fuente-titulos);
  font-weight: normal;
  letter-spacing: 0.5px;
  color: var(--texto-principal);
}

a {
  color: var(--color-acento);
  text-decoration: none;
  transition: var(--transicion-suave);
}

a:hover {
  filter: brightness(1.2);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ==========================================================================
   4. ESTRUCTURA DE LA MAQUETA (LAYOUT COMÚN)
   ========================================================================== */
.contenedor-universo {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

/* Botones estándar del sistema */
.btn-mágico {
  font-family: var(--fuente-titulos);
  background-color: transparent;
  color: var(--color-acento);
  border: 1px solid var(--color-acento);
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  transition: var(--transicion-suave);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-mágico:hover {
  background-color: var(--color-acento);
  color: var(--bg-universo);
  box-shadow: 0 0 10px var(--borde-sutil);
}