@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Nunito:wght@400;600;700;800&display=swap');

/* ==========================================
   VARIABLES CSS GLOBALES
   Ruta: /assets/css/variables.css
   Tema: Semáforo de Dolor — paleta inspirada en
   Pinkie Pie / My Little Pony (rosa, globo amarillo,
   celeste, menta, lavanda). El semáforo de dolor
   conserva la lógica verde/amarillo/coral por
   legibilidad médica.
   ========================================== */

:root {
  /* COLORES - Semáforo (bajo / medio / alto dolor) */
  --color-verde: #6bd9a8;
  --color-amarillo: #ffcb4d;
  --color-rojo: #f2704f;

  /* COLORES - Marca (paleta Pinkie Pie) */
  --color-rosa: #f2549c;
  --color-rosa-oscuro: #d1327e;
  --color-rosa-suave: #fce1ef;
  --color-lavanda: #b685d6;
  --color-lavanda-suave: #f1e4f7;
  --color-celeste: #7fc8e8;
  --color-celeste-suave: #e6f4fa;
  --color-amarillo-suave: #fff4d6;
  --color-menta-suave: #e3f9f0;
  --color-coral-suave: #fde6de;

  /* COLORES - Neutros (tono cálido/rosado) */
  --color-gris-oscuro: #4a2e42;
  --color-gris: #8b7383;
  --color-gris-claro: #e6d9df;
  --color-blanco: #fdf3f7;
  --color-superficie: #ffffff;
  --color-negro: #2a1b24;

  /* COLORES - Funcionales */
  --color-info: var(--color-celeste);
  --color-exito: var(--color-verde);
  --color-advertencia: var(--color-amarillo);
  --color-error: var(--color-rojo);

  /* TIPOGRAFÍA */
  --font-principal: 'Nunito', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-display: 'Baloo 2', 'Nunito', system-ui, sans-serif;
  --font-tamaño-base: 16px;
  --font-tamaño-pequeño: 14px;
  --font-tamaño-grande: 18px;
  --font-tamaño-titulo: 30px;
  --font-tamaño-subtitulo: 22px;

  --font-peso-ligero: 300;
  --font-peso-normal: 400;
  --font-peso-medio: 600;
  --font-peso-bold: 800;

  /* ESPACIADO */
  --espaciado-xs: 4px;
  --espaciado-sm: 8px;
  --espaciado-md: 16px;
  --espaciado-lg: 24px;
  --espaciado-xl: 32px;
  --espaciado-xxl: 48px;

  /* BORDES Y SOMBRAS */
  --borde-radio: 16px;
  --borde-radio-lg: 24px;
  --borde-radio-full: 999px;
  --sombra: 0 4px 14px rgba(209, 50, 126, 0.12);
  --sombra-lg: 0 10px 28px rgba(209, 50, 126, 0.22);

  /* ANIMACIONES */
  --transicion: all 0.25s cubic-bezier(.34, 1.4, .4, 1);
  --transicion-rapida: all 0.15s ease;
  --rebote: cubic-bezier(.34, 1.56, .64, 1);
}

/* ==========================================
   RESET Y ESTILOS BASE
   ========================================== */

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

html {
  font-size: var(--font-tamaño-base);
}

body {
  font-family: var(--font-principal);
  color: var(--color-gris-oscuro);
  background: linear-gradient(180deg, var(--color-blanco) 0%, var(--color-rosa-suave) 100%);
  background-attachment: fixed;
  line-height: 1.6;
}

/* ==========================================
   COMPONENTES REUTILIZABLES
   ========================================== */

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--espaciado-md);
}

.container-pequeño {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 var(--espaciado-md);
}

/* Botones */
.btn {
  padding: var(--espaciado-md) var(--espaciado-lg);
  border: none;
  border-radius: var(--borde-radio-full);
  font-family: var(--font-display);
  font-size: var(--font-tamaño-base);
  font-weight: var(--font-peso-medio);
  cursor: pointer;
  transition: var(--transicion);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaciado-sm);
  text-decoration: none;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0) scale(0.97);
}

.btn-primario {
  background: linear-gradient(135deg, var(--color-rosa) 0%, var(--color-rosa-oscuro) 100%);
  color: white;
  box-shadow: 0 8px 20px rgba(209, 50, 126, 0.3);
}

.btn-primario:hover {
  box-shadow: 0 12px 26px rgba(209, 50, 126, 0.4);
}

.btn-exito {
  background-color: var(--color-verde);
  color: var(--color-gris-oscuro);
}

.btn-exito:hover {
  box-shadow: var(--sombra-lg);
}

.btn-info {
  background-color: var(--color-celeste);
  color: var(--color-gris-oscuro);
}

.btn-info:hover {
  box-shadow: var(--sombra-lg);
}

.btn-error {
  background-color: var(--color-rojo);
  color: white;
}

.btn-error:hover {
  box-shadow: var(--sombra-lg);
}

.btn-pequeño {
  padding: var(--espaciado-sm) var(--espaciado-md);
  font-size: var(--font-tamaño-pequeño);
}

/* Tarjetas */
.card {
  background: var(--color-superficie);
  border-radius: var(--borde-radio-lg);
  padding: var(--espaciado-lg);
  box-shadow: var(--sombra);
  transition: var(--transicion);
}

.card:hover {
  box-shadow: var(--sombra-lg);
  transform: translateY(-3px);
}

/* Inputs */
input, textarea, select {
  width: 100%;
  padding: var(--espaciado-md);
  border: 2px solid var(--color-gris-claro);
  border-radius: var(--borde-radio);
  font-family: var(--font-principal);
  font-size: var(--font-tamaño-base);
  background-color: var(--color-superficie);
  transition: var(--transicion-rapida);
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--color-rosa);
  box-shadow: 0 0 0 4px rgba(242, 84, 156, 0.15);
}

textarea {
  resize: vertical;
  min-height: 100px;
}

/* Titulos */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--color-gris-oscuro);
  font-weight: var(--font-peso-bold);
  line-height: 1.3;
}

h1 {
  font-size: var(--font-tamaño-titulo);
  margin-bottom: var(--espaciado-lg);
}

h2 {
  font-size: var(--font-tamaño-subtitulo);
  margin-bottom: var(--espaciado-md);
}

/* Utilidades */
.text-center {
  text-align: center;
}

.text-error {
  color: var(--color-rojo);
}

.text-exito {
  color: #2f9e6b;
}

.text-advertencia {
  color: #b5820a;
}

.mb-md {
  margin-bottom: var(--espaciado-md);
}

.mt-md {
  margin-top: var(--espaciado-md);
}

.gap-md {
  gap: var(--espaciado-md);
}

.flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Alertas */
.alerta {
  padding: var(--espaciado-md);
  border-radius: var(--borde-radio);
  margin-bottom: var(--espaciado-md);
  border-left: 4px solid;
}

.alerta-exito {
  background-color: var(--color-menta-suave);
  border-color: var(--color-verde);
  color: #1e6b4c;
}

.alerta-error {
  background-color: var(--color-coral-suave);
  border-color: var(--color-rojo);
  color: #a4441f;
}

.alerta-advertencia {
  background-color: var(--color-amarillo-suave);
  border-color: var(--color-amarillo);
  color: #8a6110;
}

.alerta-info {
  background-color: var(--color-celeste-suave);
  border-color: var(--color-celeste);
  color: #2f6a8c;
}