/* =========================================================
   COLEGIO IBERO – BRAND OVERRIDES (MIDONE / ENIGMA)
   ========================================================= */

/* =========================
   TOKENS INSTITUCIONALES
   ========================= */

:root {
  /* Colores base */
  --ibero-black: #010101;
  --ibero-gold:  #FEA600;
  --ibero-red:   #FE163C;
  --ibero-white: #FFFFFF;

  /* Override Midone core */
  --color-primary: var(--ibero-black);
  --color-success: var(--ibero-gold);
  --color-danger:  var(--ibero-red);

  /* Fondo y texto */
  --color-background: var(--color-slate-50);
  --color-foreground: var(--color-slate-800);
}

/* Dark mode controlado */
.dark {
  --color-background: var(--color-slate-950);
  --color-foreground: var(--color-slate-200);
}

/* =========================
   TOPBAR
   ========================= */

.top-bar {
  background-color: var(--ibero-black) !important;
}

/* =========================
   SIDEBAR
   ========================= */

.side-menu__link--active {
  background: var(--ibero-black) !important;
  box-shadow: inset 3px 0 0 var(--ibero-gold);
}

.side-menu__link--active,
.side-menu__link--active .side-menu__link__title,
.side-menu__link--active .side-menu__link__icon {
  color: var(--ibero-white) !important;
}

.side-menu__link--active .side-menu__link__icon {
  stroke: currentColor !important;
}

.side-menu__link:hover {
  background-color: color-mix(
    in oklch,
    var(--ibero-black),
    white 12%
  );
}

/* =========================
   BADGES
   ========================= */

.badge-success {
  background-color: var(--ibero-gold);
  color: var(--ibero-black);
}

.badge-danger {
  background-color: var(--ibero-red);
  color: var(--ibero-white);
}

/* =========================
   BOTONES PRIMARIOS (FIX DEFINITIVO)
   ========================= */

.btn.btn-primary,
.btn-primary,
button.btn-primary,
button.bg-primary {
  background-color: var(--ibero-black) !important;
  border-color: var(--ibero-black) !important;
  color: var(--ibero-white) !important;
}

.btn.btn-primary:hover,
.btn-primary:hover,
button.btn-primary:hover,
button.bg-primary:hover {
  background-color: color-mix(
    in oklch,
    var(--ibero-black),
    white 10%
  ) !important;
  border-color: color-mix(
    in oklch,
    var(--ibero-black),
    white 10%
  ) !important;
  color: var(--ibero-white) !important;
}

/* =========================
   INPUTS (opcional pero recomendado)
   ========================= */

.form-control:focus {
  border-color: var(--ibero-black);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--ibero-black), white 85%);
}

/* =========================================================
   BOTÓN LOGIN – ESTILO IBERO (premium, limpio)
   ========================================================= */

.btn-ibero{
  /* tamaño */
  height: 46px;
  border-radius: 14px;

  /* look */
  background: linear-gradient(
    180deg,
    color-mix(in oklch, var(--ibero-black), white 10%),
    var(--ibero-black)
  );
  border: 1px solid color-mix(in oklch, var(--ibero-black), white 22%);
  color: var(--ibero-white) !important;

  /* tipografía */
  font-weight: 600;
  letter-spacing: .2px;

  /* profundidad */
  box-shadow:
    0 10px 24px rgba(1,1,1,.18),
    inset 0 1px 0 rgba(255,255,255,.10);

  /* transición */
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}

.btn-ibero:hover{
  transform: translateY(-1px);
  box-shadow:
    0 14px 30px rgba(1,1,1,.22),
    inset 0 1px 0 rgba(255,255,255,.14);
}

.btn-ibero:active{
  transform: translateY(0);
  box-shadow:
    0 10px 22px rgba(1,1,1,.18),
    inset 0 2px 10px rgba(0,0,0,.35);
}

.btn-ibero:focus{
  outline: none;
}

.btn-ibero:focus-visible{
  outline: none;
  box-shadow:
    0 14px 30px rgba(1,1,1,.22),
    inset 0 1px 0 rgba(255,255,255,.14),
    0 0 0 4px color-mix(in oklch, var(--ibero-gold), white 70%);
}