/* ============================================================
   Portal del Estudiante — Paleta Microsoft (sin gradientes)
   #F25022 Rojo  · #7FBA00 Verde · #00A4EF Azul · #FFB900 Amarillo
   ============================================================ */

:root {
  --ms-red:    #F25022;
  --ms-green:  #7FBA00;
  --ms-blue:   #00A4EF;
  --ms-yellow: #FFB900;

  --ms-red-d:    #C0392B;
  --ms-green-d:  #107C10;
  --ms-blue-d:   #0078D4;
  --ms-yellow-d: #D98200;

  --ms-red-l:    #FFF0EE;
  --ms-green-l:  #F1F8E9;
  --ms-blue-l:   #E8F6FE;
  --ms-yellow-l: #FFFDE7;

  --pa-radius:      1rem;
  --pa-shadow:      0 4px 24px rgba(0, 120, 212, .13);
  --pa-shadow-hover:0 10px 36px rgba(0, 120, 212, .24);
}

/* ──────────────────────────────────────────────
   FONDO
   ────────────────────────────────────────────── */
#wrapper #content-wrapper {
  background: #f4f6f9 !important;
}

/* ──────────────────────────────────────────────
   SIDEBAR
   ────────────────────────────────────────────── */
.sidebar,
.sidebar.bg-gradient-primary,
ul.sidebar {
  background-color: var(--ms-blue-d) !important;
  background-image: none !important;
}

.sidebar-brand {
  padding: 1.5rem 1rem !important;
  background: rgba(0,0,0,.15);
}
.sidebar-brand-text {
  font-size: 1rem !important;
  font-weight: 800 !important;
  letter-spacing: .03em;
}

.sidebar .sidebar-divider {
  border-top: 1px solid rgba(255,255,255,.2);
  margin: .4rem 1rem;
}
.sidebar .sidebar-heading {
  color: rgba(255,255,255,.65) !important;
  font-size: .65rem;
  letter-spacing: .1em;
  padding: .75rem 1rem .25rem;
}
.sidebar .nav-item .nav-link {
  color: rgba(255,255,255,.9) !important;
  font-weight: 600;
  border-radius: 0 50px 50px 0;
  margin-right: 1rem;
  transition: background .2s, color .2s;
}
.sidebar .nav-item .nav-link:hover,
.sidebar .nav-item.active .nav-link {
  background: rgba(255,255,255,.2) !important;
  color: #fff !important;
}
.sidebar .nav-item .nav-link i { color: rgba(255,255,255,.75); }
.sidebar .nav-item.active .nav-link i { color: #fff; }

.sidebar .collapse-inner {
  border-radius: .6rem !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.15) !important;
}
.sidebar .collapse-item {
  border-radius: .4rem !important;
  font-weight: 600;
  transition: background .15s, color .15s;
}
.sidebar .collapse-item:hover {
  background: var(--ms-blue-l) !important;
  color: var(--ms-blue-d) !important;
}
.sidebar .collapse-item.active {
  background: var(--ms-blue) !important;
  color: #fff !important;
}

#sidebarToggle {
  background: rgba(255,255,255,.2) !important;
  border: 2px solid rgba(255,255,255,.45) !important;
}
#sidebarToggle:hover { background: rgba(255,255,255,.35) !important; }

/* ──────────────────────────────────────────────
   TOPBAR
   ────────────────────────────────────────────── */
.topbar.navbar {
  border-bottom: 4px solid transparent;
  border-image: linear-gradient(90deg,
    var(--ms-red)    0%   25%,
    var(--ms-green)  25%  50%,
    var(--ms-blue)   50%  75%,
    var(--ms-yellow) 75% 100%) 1;
  box-shadow: 0 2px 16px rgba(0,120,212,.1) !important;
}
.topbar-divider { border-right: 1px solid #dde4ef; }

/* ──────────────────────────────────────────────
   CARDS
   ────────────────────────────────────────────── */
.card {
  border: none !important;
  border-radius: var(--pa-radius) !important;
  box-shadow: var(--pa-shadow) !important;
  transition: transform .22s ease, box-shadow .22s ease;
  overflow: hidden;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--pa-shadow-hover) !important;
}
.card-header {
  border-radius: var(--pa-radius) var(--pa-radius) 0 0 !important;
  border-bottom: none !important;
  font-weight: 700;
}

/* ── Clases Microsoft para card-headers
   Sin text-white → fondo blanco + borde superior de color
   Con text-white  → fondo sólido Microsoft
   ── */
.card-header.ms-red    { background: #fff !important; border-top: 4px solid #F25022 !important; }
.card-header.ms-green  { background: #fff !important; border-top: 4px solid #7FBA00 !important; }
.card-header.ms-blue   { background: #fff !important; border-top: 4px solid #0078D4 !important; }
.card-header.ms-yellow { background: #fff !important; border-top: 4px solid #FFB900 !important; }

.card-header.ms-red.text-white    { background: #F25022 !important; border-top: none !important; color: #fff !important; }
.card-header.ms-green.text-white  { background: #7FBA00 !important; border-top: none !important; color: #fff !important; }
.card-header.ms-blue.text-white   { background: #0078D4 !important; border-top: none !important; color: #fff !important; }
.card-header.ms-yellow.text-white { background: #FFB900 !important; border-top: none !important; color: #1a1a1a !important; }
.card-header.bg-success {
  background: var(--ms-green) !important;
  color: #fff !important;
}
.card-header.bg-warning {
  background: var(--ms-yellow) !important;
  color: #fff !important;
}
.card-header.bg-danger {
  background: var(--ms-red) !important;
  color: #fff !important;
}
.card-header.bg-info {
  background: var(--ms-blue) !important;
  color: #fff !important;
}

/* Borde izquierdo */
.border-left-primary  { border-left: 5px solid var(--ms-blue)   !important; }
.border-left-success  { border-left: 5px solid var(--ms-green)  !important; }
.border-left-warning  { border-left: 5px solid var(--ms-yellow) !important; }
.border-left-danger   { border-left: 5px solid var(--ms-red)    !important; }
.border-left-info     { border-left: 5px solid var(--ms-blue)   !important; }
.border-left-secondary{ border-left: 5px solid var(--ms-blue-d) !important; }

/* ──────────────────────────────────────────────
   TÍTULOS DE PÁGINA
   ────────────────────────────────────────────── */
h1.h3.mb-0.text-gray-800 {
  color: var(--ms-blue-d) !important;
  font-weight: 800 !important;
  -webkit-text-fill-color: unset !important;
  background: none !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
}

/* ──────────────────────────────────────────────
   BOTONES
   ────────────────────────────────────────────── */
.btn {
  border-radius: 50rem !important;
  font-weight: 700 !important;
  letter-spacing: .02em;
  transition: transform .15s, box-shadow .15s, filter .15s !important;
}
.btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
  box-shadow: 0 6px 18px rgba(0,0,0,.18) !important;
}

.btn-primary  { background: var(--ms-blue-d) !important; border-color: transparent !important; color: #fff !important; }
.btn-success  { background: var(--ms-green)  !important; border-color: transparent !important; color: #fff !important; }
.btn-info     { background: var(--ms-blue)   !important; border-color: transparent !important; color: #fff !important; }
.btn-warning  { background: var(--ms-yellow) !important; border-color: transparent !important; color: #fff !important; }
.btn-danger   { background: var(--ms-red)    !important; border-color: transparent !important; color: #fff !important; }
.btn-secondary{ background: #546e7a          !important; border-color: transparent !important; color: #fff !important; }

/* Outline */
.btn-outline-primary { color: var(--ms-blue-d) !important; border-color: var(--ms-blue-d) !important; background: transparent !important; }
.btn-outline-primary:hover  { background: var(--ms-blue-d) !important; color: #fff !important; }
.btn-outline-success  { color: var(--ms-green)  !important; border-color: var(--ms-green)  !important; background: transparent !important; }
.btn-outline-success:hover  { background: var(--ms-green)  !important; color: #fff !important; }
.btn-outline-info     { color: var(--ms-blue)   !important; border-color: var(--ms-blue)   !important; background: transparent !important; }
.btn-outline-info:hover     { background: var(--ms-blue)   !important; color: #fff !important; }
.btn-outline-warning  { color: var(--ms-yellow-d)!important; border-color: var(--ms-yellow)!important; background: transparent !important; }
.btn-outline-warning:hover  { background: var(--ms-yellow) !important; color: #fff !important; }

/* ──────────────────────────────────────────────
   BADGES
   ────────────────────────────────────────────── */
.badge-primary  { background: var(--ms-blue-d) !important; color: #fff !important; }
.badge-success  { background: var(--ms-green)  !important; color: #fff !important; }
.badge-warning  { background: var(--ms-yellow) !important; color: #fff !important; }
.badge-info     { background: var(--ms-blue)   !important; color: #fff !important; }
.badge-danger   { background: var(--ms-red)    !important; color: #fff !important; }
.badge-pill { border-radius: 50rem !important; padding: .35em .75em !important; font-weight: 700 !important; }

/* ──────────────────────────────────────────────
   TABLAS
   ────────────────────────────────────────────── */
.table thead.thead-light th {
  background: var(--ms-blue-d) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 700;
  letter-spacing: .03em;
}
.table-bordered { border-radius: var(--pa-radius); overflow: hidden; }
.table-hover tbody tr:hover { background-color: var(--ms-blue-l) !important; }

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--ms-blue-d) !important;
  border-color: transparent !important;
  color: #fff !important;
  border-radius: 50rem !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--ms-blue-l) !important;
  border-color: transparent !important;
  color: var(--ms-blue-d) !important;
  border-radius: 50rem !important;
}

/* ──────────────────────────────────────────────
   FORMULARIOS
   ────────────────────────────────────────────── */
.form-control:focus {
  border-color: var(--ms-blue) !important;
  box-shadow: 0 0 0 .2rem rgba(0,164,239,.22) !important;
}
.form-control { border-radius: .6rem !important; }

/* ──────────────────────────────────────────────
   ALERTS
   ────────────────────────────────────────────── */
.alert {
  border-radius: var(--pa-radius) !important;
  border-left-width: 5px !important;
  font-weight: 500;
}
.alert-warning  { border-left-color: var(--ms-yellow) !important; background: var(--ms-yellow-l) !important; }
.alert-danger   { border-left-color: var(--ms-red)    !important; background: var(--ms-red-l)    !important; }
.alert-info     { border-left-color: var(--ms-blue)   !important; background: var(--ms-blue-l)   !important; }
.alert-success  { border-left-color: var(--ms-green)  !important; background: var(--ms-green-l)  !important; }

/* ──────────────────────────────────────────────
   FOOTER — borde 4 colores Microsoft
   ────────────────────────────────────────────── */
.sticky-footer {
  border-top: 4px solid transparent;
  border-image: linear-gradient(90deg,
    var(--ms-red)    0%   25%,
    var(--ms-green)  25%  50%,
    var(--ms-blue)   50%  75%,
    var(--ms-yellow) 75% 100%) 1 !important;
}
.sticky-footer .copyright { color: #6b7a99; font-size: .82rem; }

/* ──────────────────────────────────────────────
   SCROLL TO TOP
   ────────────────────────────────────────────── */
.scroll-to-top { background: var(--ms-blue-d) !important; }

/* ──────────────────────────────────────────────
   MODALES
   ────────────────────────────────────────────── */
.modal-header.bg-primary { background: var(--ms-blue-d) !important; }
.modal-content { border-radius: var(--pa-radius) !important; overflow: hidden; }

/* ──────────────────────────────────────────────
   ANIMACIÓN
   ────────────────────────────────────────────── */
#content .container-fluid { animation: fadeInUp .35s ease; }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}