/* Identidad visual de Centro Educativo Bendición de Dios — generada desde la configuración del centro. */
:root {
  --marca-primario: #0E6B57;
  --marca-primario-oscuro: #0B5847;
  --marca-primario-suave: #E2EDEB;
  --marca-primario-texto: #FFFFFF;
  --marca-secundario: #10201C;
  --marca-secundario-texto: #FFFFFF;
  --marca-acento: #8A5A05;
  --marca-acento-suave: #EFE8DC;

  --bs-primary: #0E6B57;
  --bs-primary-rgb: 14, 107, 87;
  --bs-link-color: #0B5847;
  --bs-link-color-rgb: 11, 88, 71;
  --bs-link-hover-color: #0E6B57;
  --bs-focus-ring-color: rgba(14, 107, 87, 0.25);
}

.btn-primary,
.btn-primary:disabled,
.btn-primary.disabled {
  --bs-btn-bg: var(--marca-primario);
  --bs-btn-border-color: var(--marca-primario);
  --bs-btn-color: var(--marca-primario-texto);
  --bs-btn-hover-bg: var(--marca-primario-oscuro);
  --bs-btn-hover-border-color: var(--marca-primario-oscuro);
  --bs-btn-hover-color: var(--marca-primario-texto);
  --bs-btn-active-bg: var(--marca-primario-oscuro);
  --bs-btn-active-border-color: var(--marca-primario-oscuro);
  --bs-btn-active-color: var(--marca-primario-texto);
  --bs-btn-disabled-bg: var(--marca-primario);
  --bs-btn-disabled-border-color: var(--marca-primario);
  --bs-btn-disabled-color: var(--marca-primario-texto);
  background-color: var(--marca-primario);
  border-color: var(--marca-primario);
  color: var(--marca-primario-texto);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-check:checked + .btn-primary {
  background-color: var(--marca-primario-oscuro);
  border-color: var(--marca-primario-oscuro);
  color: var(--marca-primario-texto);
}

.btn-primary:focus,
.btn-primary:focus-visible {
  box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

.btn-outline-primary {
  --bs-btn-color: var(--marca-primario);
  --bs-btn-border-color: var(--marca-primario);
  --bs-btn-hover-bg: var(--marca-primario);
  --bs-btn-hover-border-color: var(--marca-primario);
  --bs-btn-hover-color: var(--marca-primario-texto);
  color: var(--marca-primario);
  border-color: var(--marca-primario);
}

.btn-outline-primary:hover,
.btn-outline-primary:active {
  background-color: var(--marca-primario);
  border-color: var(--marca-primario);
  color: var(--marca-primario-texto);
}

.btn-outline-secondary {
  --bs-btn-color: var(--marca-secundario);
  --bs-btn-border-color: var(--marca-secundario);
  --bs-btn-hover-bg: var(--marca-secundario);
  --bs-btn-hover-border-color: var(--marca-secundario);
  --bs-btn-hover-color: var(--marca-secundario-texto);
  color: var(--marca-secundario);
  border-color: var(--marca-secundario);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:active {
  background-color: var(--marca-secundario);
  border-color: var(--marca-secundario);
  color: var(--marca-secundario-texto);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--marca-primario);
  box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

.form-check-input:checked {
  background-color: var(--marca-primario);
  border-color: var(--marca-primario);
}

.nav-tabs .nav-link.active {
  color: var(--marca-primario);
  border-bottom-color: var(--bs-body-bg, #fff);
}

a { color: var(--bs-link-color); }
a:hover { color: var(--bs-link-hover-color); }

.navbar.bg-dark {
  background-color: var(--marca-secundario) !important;
}

.text-bg-primary,
.btn-dark {
  background-color: var(--marca-primario) !important;
  border-color: var(--marca-primario);
  color: var(--marca-primario-texto) !important;
}

.text-bg-secondary {
  background-color: var(--marca-secundario) !important;
  color: var(--marca-secundario-texto) !important;
}

.text-bg-success {
  background-color: var(--marca-primario) !important;
  color: var(--marca-primario-texto) !important;
}

.badge.text-bg-warning,
.alert-warning {
  --bs-alert-color: var(--marca-acento);
  --bs-alert-bg: var(--marca-acento-suave);
  --bs-alert-border-color: var(--marca-acento);
}

.table-light > :not(caption) > * > * {
  --bs-table-bg: var(--marca-primario-suave);
}

.permiso-critico { border-left-color: var(--marca-acento); }
.marca-logo { max-height: 2.25rem; width: auto; }
.marca-logo-grande { max-height: 5.5rem; width: auto; }
.sec-acento { color: var(--marca-primario); }