/* =====================================================================
   CI Modern — capa de rediseño sobre SB Admin 2 (Bootstrap 4)
   Cargar DESPUÉS de sb-admin-2.min.css. No cambia el HTML.
   Identidad CI: naranja #E15200 (acciones) + teal #00AD9A (chrome) + Open Sans.
   2026-07-13
   ===================================================================== */
:root{
  --ci-orange:#E15200; --ci-orange-dark:#C24700; --ci-orange-light:#F26A1B;
  --ci-teal:#00AD9A; --ci-teal-dark:#009D92; --ci-teal-deep:#0B564B;
  --ci-slate:#424953; --ci-ink:#2C3138; --ci-muted:#7B838E;
  --ci-line:#E7E3DC; --ci-ground:#F5F4F0; --ci-surface:#FFFFFF; --ci-pink:#CC3366;
  --ci-font:'Open Sans','Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
}

/* ---- Tipografía y fondo ---- */
body,.sidebar,.topbar,.btn,.form-control,.nav,input,select,textarea,button,.card{ font-family:var(--ci-font)!important; }
body#page-top{ background:var(--ci-ground); color:var(--ci-slate); }
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{ font-family:var(--ci-font)!important; color:var(--ci-slate); font-weight:700; letter-spacing:-.01em; }
.text-gray-800{ color:var(--ci-slate)!important; }
.text-gray-900{ color:var(--ci-ink)!important; }
a{ color:var(--ci-orange); }
a:hover{ color:var(--ci-orange-dark); }

/* ---- Sidebar: chrome teal profundo, activo naranja ---- */
.bg-gradient-primary,
.sidebar.bg-gradient-primary{ background-image:linear-gradient(180deg,var(--ci-teal-dark) 0%, var(--ci-teal-deep) 100%)!important; background-color:var(--ci-teal-deep)!important; }
.sidebar-dark .sidebar-brand{ color:#fff; }
.sidebar-dark .sidebar-heading{ color:rgba(255,255,255,.5)!important; letter-spacing:.08em; }
.sidebar-dark .sidebar-divider{ border-top:1px solid rgba(255,255,255,.13); }
.sidebar-dark .nav-item .nav-link{ color:rgba(255,255,255,.82); font-weight:600; }
.sidebar-dark .nav-item .nav-link i{ color:rgba(255,255,255,.62); }
.sidebar-dark .nav-item .nav-link:hover{ color:#fff; }
.sidebar-dark .nav-item .nav-link:hover i{ color:var(--ci-orange-light); }
.sidebar-dark .nav-item.active .nav-link{ color:#fff; font-weight:700; }
.sidebar-dark .nav-item.active{ background:rgba(0,0,0,.14); box-shadow:inset 3px 0 0 var(--ci-orange); }
.sidebar-dark .nav-item .nav-link[data-toggle=collapse]::after{ color:rgba(255,255,255,.6); }
.sidebar .collapse .collapse-inner,.sidebar .collapsing .collapse-inner{ border-radius:8px; box-shadow:0 8px 24px -12px rgba(0,0,0,.35); }
.collapse-inner .collapse-item{ color:var(--ci-slate); font-weight:500; }
.collapse-inner .collapse-item:hover{ background:color-mix(in srgb,var(--ci-orange) 8%,#fff); color:var(--ci-orange-dark); }
.collapse-inner .collapse-item.active{ color:var(--ci-orange); font-weight:700; }
.sidebar-dark #sidebarToggle{ background:rgba(255,255,255,.2); }
.sidebar-dark #sidebarToggle::before{ color:rgba(255,255,255,.75); }

/* ---- Topbar ---- */
.topbar{ background:var(--ci-surface)!important; box-shadow:0 1px 0 var(--ci-line)!important; border-radius:0; }
.topbar .nav-item .nav-link{ color:var(--ci-slate); }
.topbar .nav-item .nav-link:hover{ color:var(--ci-orange); }
.topbar .dropdown .dropdown-menu{ border:1px solid var(--ci-line); border-radius:12px; box-shadow:0 12px 34px -14px rgba(66,73,83,.3); }
.topbar-divider{ border-right:1px solid var(--ci-line); }
.topbar .badge-counter{ background:var(--ci-orange); }
.navbar-search .form-control{ border-radius:999px; }
.navbar-search .btn{ border-radius:0 999px 999px 0; }

/* ---- Botones ---- */
.btn{ border-radius:9px; font-weight:600; }
.btn-primary,.btn-primary:disabled{ background-color:var(--ci-orange); border-color:var(--ci-orange); box-shadow:none; }
.btn-primary:hover,.btn-primary:focus,.btn-primary:active,.btn-primary:not(:disabled):not(.disabled):active,.show>.btn-primary.dropdown-toggle{ background-color:var(--ci-orange-dark)!important; border-color:var(--ci-orange-dark)!important; box-shadow:none!important; }
.btn-primary:focus{ box-shadow:0 0 0 .2rem rgba(225,82,0,.35)!important; }
.btn-success{ background-color:var(--ci-teal); border-color:var(--ci-teal); }
.btn-success:hover,.btn-success:focus,.btn-success:active{ background-color:var(--ci-teal-dark)!important; border-color:var(--ci-teal-dark)!important; }
.btn-info{ background-color:var(--ci-teal); border-color:var(--ci-teal); }
.btn-info:hover{ background-color:var(--ci-teal-dark); border-color:var(--ci-teal-dark); }
.btn-secondary{ background-color:#EDEAE3; border-color:var(--ci-line); color:var(--ci-slate); }
.btn-secondary:hover{ background-color:#E3DFD6; border-color:#D8D3C8; color:var(--ci-ink); }
.btn-outline-primary{ color:var(--ci-orange); border-color:var(--ci-orange); }
.btn-outline-primary:hover{ background-color:var(--ci-orange); border-color:var(--ci-orange); color:#fff; }
.btn-link{ color:var(--ci-orange); }

/* ---- Utilidades de color (primary azul de SB Admin -> naranja CI) ---- */
.text-primary{ color:var(--ci-orange)!important; }
.text-info{ color:var(--ci-teal-dark)!important; }
.bg-primary{ background-color:var(--ci-orange)!important; }
.bg-info{ background-color:var(--ci-teal)!important; }
.border-bottom-primary{ border-bottom-color:var(--ci-orange)!important; }
.border-left-primary{ border-left-color:var(--ci-orange)!important; }
.border-left-info{ border-left-color:var(--ci-teal)!important; }
.border-left-warning{ border-left-color:var(--ci-orange-light)!important; }

/* ---- Cards ---- */
.card{ border:1px solid var(--ci-line); border-radius:14px; box-shadow:0 1px 2px rgba(66,73,83,.04),0 12px 30px -22px rgba(66,73,83,.35); }
.card-header{ background:var(--ci-surface); border-bottom:1px solid var(--ci-line); font-weight:700; color:var(--ci-slate); border-radius:14px 14px 0 0!important; }
.card-header .m-0.font-weight-bold.text-primary{ color:var(--ci-slate)!important; }
.shadow,.shadow-sm{ box-shadow:0 1px 2px rgba(66,73,83,.04),0 12px 30px -22px rgba(66,73,83,.35)!important; }

/* ---- Formularios ---- */
.form-control{ border:1.5px solid var(--ci-line); border-radius:9px; color:var(--ci-ink); background:#FAF8F5; }
.form-control:focus{ border-color:var(--ci-orange); background:#fff; box-shadow:0 0 0 3.5px rgba(225,82,0,.16); }
.form-control-user{ border-radius:9px!important; }
.custom-control-input:checked~.custom-control-label::before{ background-color:var(--ci-orange); border-color:var(--ci-orange); }

/* ---- Tablas / DataTables ---- */
.table thead th{ border-bottom:2px solid var(--ci-line); color:var(--ci-muted); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
.table td,.table th{ border-top:1px solid var(--ci-line); vertical-align:middle; }
.table-hover tbody tr:hover{ background:color-mix(in srgb,var(--ci-orange) 5%,#fff); }
.page-item.active .page-link{ background-color:var(--ci-orange); border-color:var(--ci-orange); }
.page-link{ color:var(--ci-orange); }
.page-link:hover{ color:var(--ci-orange-dark); }

/* ---- Badges / alerts ---- */
.badge-primary{ background-color:var(--ci-orange); }
.badge-success{ background-color:var(--ci-teal); }
.badge-info{ background-color:var(--ci-teal); }
.alert-primary{ color:var(--ci-orange-dark); background:color-mix(in srgb,var(--ci-orange) 10%,#fff); border-color:color-mix(in srgb,var(--ci-orange) 30%,var(--ci-line)); }

/* ---- Progreso / spinners ---- */
.progress-bar{ background-color:var(--ci-orange); }

/* ---- Botones de acceso al aula virtual (topbar): CI Language / CI Virtual ---- */
.ci-aula-btn{ display:inline-flex; align-items:center; gap:.5rem; height:38px; padding:0 1rem;
  border-radius:999px; font-weight:700; font-size:12.5px; letter-spacing:.01em; text-decoration:none;
  color:#fff!important; white-space:nowrap; line-height:1;
  transition:filter .14s, transform .05s, box-shadow .14s; }
.ci-aula-btn i{ font-size:15px!important; }
.ci-aula-btn:hover{ color:#fff!important; text-decoration:none; filter:brightness(1.07);
  box-shadow:0 7px 18px -9px rgba(0,0,0,.45); }
.ci-aula-btn:active{ transform:translateY(1px); }
.ci-aula-btn--lang{ background:var(--ci-teal); }
.ci-aula-btn--lang:hover{ background:var(--ci-teal-dark); }
.ci-aula-btn--virtual{ background:var(--ci-orange); }
.ci-aula-btn--virtual:hover{ background:var(--ci-orange-dark); }
@media (max-width:575px){ .ci-aula-btn span{ display:none; } .ci-aula-btn{ padding:0 .7rem; } }