/* ===============================
   PALETA AZUL INSTITUCIONAL
   =============================== */
:root {
  --azul-oscuro: #0A2E5C;
  --azul-principal: #0D47A1;
  --azul-medio: #1565C0;
  --azul-claro: #E3F2FD;
  --azul-acento: #1E88E5;
  --gris-texto: #37474F;
}

/* ===============================
   RESET DE COLORES BOOTSTRAP
   =============================== */
.text-primary,
.btn-primary,
.bg-primary {
  color: #fff !important;
  background-color: var(--azul-principal) !important;
  border-color: var(--azul-principal) !important;
}

a {
  color: var(--azul-medio);
}

a:hover {
  color: var(--azul-oscuro);
}

/* ===============================
   BODY GENERAL
   =============================== */
body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--gris-texto);
  background-color: #fff;
}

/* ===============================
   HEADER
   =============================== */
header {
  padding-top: 2.5rem !important;
  padding-bottom: 2.5rem !important;
}

header h2 {
  margin-bottom: 0.3rem;
}

/* ===============================
   TÍTULOS
   =============================== */
.titulo-principal {
  background-image: linear-gradient(
    90deg,
    var(--azul-oscuro),
    var(--azul-principal),
    var(--azul-acento)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.titulo-secundario {
  color: var(--azul-principal);
}

/* ===============================
   SECCIÓN FORMULARIO
   =============================== */
section.bg-light {
  background-color: var(--azul-claro) !important;
  padding-top: 2rem !important;
}

/* Contenedor del formulario */
form {
  background-color: #fff;
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(13, 71, 161, 0.15);
  text-align: left;
}

/* ===============================
   INPUTS
   =============================== */
.form-label {
  font-weight: 600;
  color: var(--azul-oscuro);
}

.form-control,
.form-select {
  border-radius: 0.6rem;
  border: 1px solid #B0BEC5;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--azul-acento);
  box-shadow: 0 0 0 0.15rem rgba(30, 136, 229, 0.25);
}

/* ===============================
   BOTÓN
   =============================== */
.btn-primary {
  background-color: var(--azul-principal) !important;
  border-color: var(--azul-principal) !important;
  padding: 0.75rem;
  font-weight: 600;
  border-radius: 0.7rem;
}

.btn-primary:hover {
  background-color: var(--azul-oscuro) !important;
}

/* ===============================
   ALERTA DEPARTAMENTO
   =============================== */
.alert-info {
  background-color: #E3F2FD;
  border-left: 5px solid var(--azul-acento);
  color: var(--azul-oscuro);
}

/* ===============================
   FOOTER
   =============================== */
footer {
  border-top: 1px solid #E0E0E0;
  color: #607D8B;
}

/* ===============================
   OVERRIDE TOTAL DEL COLOR PRIMARIO
   =============================== */
:root {
  --bs-primary: #0D47A1 !important;
  --bs-primary-rgb: 13, 71, 161 !important;

  --bs-link-color: #1565C0;
  --bs-link-hover-color: #0A2E5C;
}

/* ===============================
   BOTONES
   =============================== */
.btn-primary,
.btn-primary:focus,
.btn-primary:active {
  background-color: #0D47A1 !important;
  border-color: #0D47A1 !important;
}

.btn-primary:hover {
  background-color: #0A2E5C !important;
  border-color: #0A2E5C !important;
}

/* ===============================
   TEXTOS PRIMARIOS (adiós guinda)
   =============================== */
.text-primary {
  color: #0D47A1 !important;
}

/* ===============================
   GRADIENTE AZUL PARA EL TÍTULO
   =============================== */
.text-gradient {
  background: linear-gradient(
    90deg,
    #0A2E5C,
    #0D47A1,
    #1E88E5
  ) !important;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

/* ===============================
   ALERTAS INFO
   =============================== */
.alert-info {
  background-color: #E3F2FD !important;
  color: #0A2E5C !important;
  border-left: 5px solid #1E88E5 !important;
}

/* ===============================
   ÍCONOS DE REDES SOCIALES
   =============================== */
.social-icon {
  color: #0D47A1 !important;
  transition: transform 0.2s ease, color 0.2s ease;
}

.social-icon:hover {
  color: #1E88E5 !important;
  transform: scale(1.15);
}

.escom-title {
  background: none !important;
  color: #0D47A1 !important;
  padding: 0 !important;
  margin: 0;
  box-shadow: none !important;
}