/* ==========================================================================
   GLOBAL CSS - State of Mind
   ========================================================================== */

/* ── 1. RESET Y CONFIGURACIÓN BASE ── */
*, *::before, *::after { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
}

:root { 
  /* Paleta Principal (Landing & App) */
  --pink: #C63678; 
  --pink-deep: #8B1A4A;
  --pink-dim: rgba(198,54,120,0.6); 
  --pink-faint: rgba(198,54,120,0.12); 
  --pink-border: rgba(198,54,120,0.22); 
  
  /* Fondos */
  --bg: #0A0008; 
  --bg-card: rgba(255,255,255,0.04); 
  --bg-item: rgba(255,255,255,0.025); 
  
  /* Textos y Opacidades */
  --text: #F0E0EA; 
  --text-mid: rgba(240,224,234,0.55); 
  --text-muted: rgba(240,224,234,0.5); 
  --text-low: rgba(240,224,234,0.28);
  --text-faint: rgba(240,224,234,0.22); 
  
  /* Colores de Estado (Admin Dashboard) */
  --green: #2ed573; 
  --green-bg: rgba(46,213,115,0.08); 
  --green-border: rgba(46,213,115,0.3); 
  --red: #ff4757; 
  --red-bg: rgba(255,71,87,0.08); 
  --red-border: rgba(255,71,87,0.3); 
  --amber: #ffa502; 
  
  /* Bordes y Utilidades */
  --radius: 12px; 
  --radius-sm: 8px; 
}

html { 
  scroll-behavior: smooth; 
}

body { 
  background: var(--bg); 
  color: var(--text); 
  font-family: 'Inter', sans-serif; 
  font-weight: 300; 
  overflow-x: hidden; 
}

/* ── 2. COMPONENTES DE FORMULARIO ── */

/* Inputs y Textareas */
.inp { 
  width: 100%; 
  background: rgba(255,255,255,0.04); 
  border: 0.5px solid var(--pink-border); 
  border-radius: var(--radius-sm); 
  padding: 12px 14px; 
  font-size: 13px; 
  color: var(--text); 
  font-family: 'Inter', sans-serif; 
  outline: none; 
  transition: border-color 0.2s ease, background 0.2s ease; 
  margin-bottom: 12px; 
}

.inp:focus { 
  border-color: rgba(198,54,120,0.6); 
  background: rgba(255,255,255,0.06);
}

.inp::placeholder {
  color: var(--text-faint);
}

/* Etiquetas (Labels) */
.lbl { 
  display: block; 
  font-size: 10px; 
  letter-spacing: 2px; 
  text-transform: uppercase; 
  color: var(--pink-dim); 
  margin-bottom: 5px; 
}

/* ── 3. BOTONES GLOBALES ── */

/* Botón Estándar de App (Admin, Login, Contacto) */
.btn { 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  gap: 8px; 
  padding: 12px 18px; 
  border: none; 
  border-radius: var(--radius-sm); 
  font-size: 11px; 
  letter-spacing: 2px; 
  text-transform: uppercase; 
  cursor: pointer; 
  transition: all 0.2s ease; 
  font-family: 'Inter', sans-serif; 
}

.btn-primary { 
  background: var(--pink); 
  color: #fff; 
  width: 100%; 
}

.btn-primary:hover:not(:disabled) { 
  background: #a82d66; 
  transform: translateY(-1px);
}

.btn-primary:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Botón Principal de la Landing Page */
.btn-main { 
  font-size: 11px; 
  letter-spacing: 2.5px; 
  text-transform: uppercase; 
  background: var(--pink); 
  color: #fff; 
  padding: 14px 32px; 
  border: none; 
  border-radius: 2px; 
  cursor: pointer; 
  transition: all 0.2s ease; 
}

.btn-main:hover { 
  background: var(--pink-deep); 
  transform: translateY(-2px); 
}

/* Botón Secundario (Ghost) */
.btn-ghost { 
  font-size: 11px; 
  letter-spacing: 2.5px; 
  text-transform: uppercase; 
  background: transparent; 
  color: var(--text-mid); 
  padding: 14px 0; 
  border: none; 
  cursor: pointer; 
  transition: color 0.2s ease; 
  display: flex; 
  align-items: center; 
  gap: 8px; 
}

.btn-ghost::after { 
  content: '→'; 
  transition: transform 0.2s ease; 
}

.btn-ghost:hover { 
  color: var(--text); 
}

.btn-ghost:hover::after { 
  transform: translateX(4px); 
}

/* ── 4. ALERTAS (MENSAJES DE ERROR / ÉXITO) ── */
.alert { 
  font-size: 12px; 
  padding: 10px 14px; 
  border-radius: 6px; 
  margin-bottom: 1rem; 
  display: none; 
  text-align: center; 
}

.alert.error { 
  background: var(--red-bg); 
  border: 0.5px solid var(--red-border); 
  color: var(--red); 
  display: block; 
}

.alert.success {
  background: var(--green-bg); 
  border: 0.5px solid var(--green-border); 
  color: var(--green); 
  display: block; 
}