/* ===== VARIABLES CORPORATIVAS GLOBALES ===== */
:root {
  /* Fondos y Texto */
  --bg-body: #0b132b; 
  --bg-card: #1c2541; 
  --bg-card-hover: #232d4d; 
  --text-primary: #ffffff; 
  --text-secondary: #9aa8c3; 
  --text-badge-dark: #0b132b;
  
  /* Acentos de Marca */
  --brand-gold: #f5a623; 
  --brand-gold-hover: #d98e19; 
  --blue-accent: #3a86ff; 
  --blue-hover: #2563eb; 
  --green-accent: #10b981; 
  --red-accent: #ff0055; 
  
  /* Fondos de Alerta (10% Opacidad) */
  --bg-alert-red: rgba(255, 0, 85, 0.1);      
  --bg-alert-yellow: rgba(245, 166, 35, 0.1); 
  --bg-alert-green: rgba(16, 185, 129, 0.1);  

  /* Estilos Estructurales */
  --border-light: rgba(255, 255, 255, 0.08); 
  --shadow-card: 0 20px 40px -12px rgba(0, 0, 0, 0.5); 
  --radius-card: 24px; 
  --radius-btn: 40px; 
  
  /* Tipografía */
  --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif; 
  --font-heading: "Playfair Display", serif; 
}

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

body {
  font-family: var(--font-body);
  background: var(--bg-body);
  color: var(--text-primary);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 1.5rem;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

/* ===== MATERIAL ICONS Y ALINEACIÓN GLOBAL ===== */
.material-icons {
  vertical-align: middle;
  font-size: 1.25em;
  line-height: 1;
}

.align-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.visual-anchor {
  vertical-align: middle;
  margin-right: 0.5rem;
  color: var(--text-secondary);
}

/* ===== SPINNER GLOBAL ===== */
.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 0.6s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}