@charset "UTF-8";

/* SISTEMA DE COLORES */

:root {

  /* COLOR PRINCIPAL (IDENTIDAD VISUAL) */
  --color-primario: #4f46e5; /* azul principal */
  --color-primario-hover: #4338ca;

  /* 🌿 COLORES SECUNDARIOS / ACCIÓN */
  --color-secundario: #10b981; /* verde */
  --color-accent: #f59e0b; /* naranja / atención */

  /* 🖋️ TEXTO */
  --text-primario: #111827; /* texto principal */
  --text-secundario: #6b7280; /* texto secundario */
  --textoclaro: #9ca3af; /* texto suave */
  --text-inverse: #ffffff; /* texto sobre fondos oscuros */

  /* 🧱 FONDOS */

  --bg-cuerpo: #ffffff; /* fondo general */
  --bg-surface: #f9fafb; /* tarjetas / secciones */
  --bg-muted: #f3f4f6; /* fondos suaves */
  --bg-dark: #111827; /* modo oscuro */

  /* 🧱 FONDOS DEGRADADOS */


  /* Degradado principal */
  --bg-gradient-primary: linear-gradient(
    135deg,
    #4f46e5,
    #10b981
  );

  /* Degradado suave de fondo */
  --bg-gradient-soft: linear-gradient(
    180deg,
    #ffffff,
    #f3f4f6
  );

  /* Degradado oscuro */
  --bg-gradient-dark: linear-gradient(
    135deg,
    #111827,
    #1f2937
  );


  /* Degradado naranja */
  --bg-gradient-naranja: linear-gradient(
    135deg,
	#FF4F00,
	#FF8C00
  );

  /* otros */

--bg-gradient-naranja2: linear-gradient(
  135deg,
  #ff4f00 0%,
  #ff7b00 50%,
  #ffb000 100%
);

--bg-gradient-azul: linear-gradient(
  135deg,
  #1d4ed8 0%,
  #2563eb 50%,
  #38bdf8 100%
);

--bg-gradient-verde: linear-gradient(
  135deg,
  #047857 0%,
  #10b981 50%,
  #6ee7b7 100%
);

--bg-gradient-morado: linear-gradient(
  135deg,
  #6d28d9 0%,
  #8b5cf6 50%,
  #c084fc 100%
);

--bg-gradient-burdeos: linear-gradient(
  135deg,
  #AD2F15 0%,
  #662B20 50%,
  #F00000 100%
);

  /* 🧩 BORDES */
  --border-light: rgba(0, 0, 0, 0.08);
  --border-medium: rgba(0, 0, 0, 0.15);

  /* 🌙 SOMBRAS */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.12);

  /* 🔘 ESTADOS (UI) */
  --color-success: #22c55e;
  --color-warning: #facc15;
  --color-error: #ef4444;
  --color-info: #3b82f6;
}