:root {
    --cd-navy: #172641;
    --cd-navy-2: #213452;
    --cd-teal: #26aaa8;
    --cd-magenta: #d91b73;
    --cd-purple: #7046a5;
    --cd-green: #91b92d;
    --cd-bg: #f5f7fb;
    --cd-border: #dbe2ec;
    --cd-text: #192640;
    --cd-muted: #667085;
}

* { box-sizing: border-box; }

body {
    background: var(--cd-bg);
    color: var(--cd-text);
    min-height: 100vh;
}

a { color: #176c9a; }

.brand-header {
    background: #fff;
}

.brand-strip {
    height: 4px;
    background: linear-gradient(
        90deg,
        var(--cd-teal) 0 25%,
        var(--cd-magenta) 25% 49%,
        #2686c9 49% 72%,
        var(--cd-purple) 72% 88%,
        var(--cd-green) 88% 100%
    );
}

.brand-logo {
    width: 47px;
    height: 47px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 800;
    letter-spacing: -1px;
    background: conic-gradient(
        var(--cd-magenta),
        var(--cd-purple),
        var(--cd-green),
        var(--cd-teal),
        var(--cd-magenta)
    );
    color: #fff;
    border: 4px solid #fff;
    box-shadow: 0 0 0 1px #edf1f5;
}

.brand-title {
    font-size: 1.34rem;
    font-weight: 750;
    letter-spacing: -.03em;
}

.brand-subtitle {
    color: #748096;
    font-size: .9rem;
}

.app-navbar {
    background: var(--cd-navy);
    min-height: 58px;
}

.app-navbar .nav-link {
    color: rgba(255,255,255,.77);
    margin-right: .8rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    position: relative;
}

.app-navbar .nav-link:hover,
.app-navbar .nav-link.active {
    color: #fff;
}

.app-navbar .nav-link.active::after {
    content: "";
    position: absolute;
    left: .5rem;
    right: .5rem;
    bottom: .35rem;
    height: 3px;
    border-radius: 99px;
    background: var(--cd-teal);
}

.navbar-user {
    color: rgba(255,255,255,.72);
    font-size: .95rem;
}

.logout-link {
    color: #fff !important;
    margin: 0 !important;
}

.logout-link::after { display:none !important; }

.card {
    border: 1px solid var(--cd-border);
    border-radius: 1rem;
    background: #fff;
}

.card.shadow-sm {
    box-shadow: 0 .5rem 1.5rem rgba(23,38,65,.06) !important;
}

.page-heading {
    position: relative;
    padding-bottom: 13px;
}

.page-heading::after {
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:46px;
    height:3px;
    border-radius:99px;
    background: linear-gradient(90deg,var(--cd-teal) 0 52%,var(--cd-magenta) 52%);
}

.metric-card {
    overflow: hidden;
    position: relative;
    min-height: 118px;
}

.metric-card::before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:4px;
    background:var(--accent,var(--cd-teal));
}

.metric-card::after {
    content:"";
    position:absolute;
    width:68px;
    height:68px;
    border-radius:50%;
    right:-22px;
    top:-18px;
    background: color-mix(in srgb, var(--accent,var(--cd-teal)) 8%, white);
}

.metric-number {
    font-size: 2rem;
    font-weight: 760;
    line-height: 1;
}

.table > :not(caption) > * > * { vertical-align: middle; }

.btn-primary {
    --bs-btn-bg: var(--cd-navy);
    --bs-btn-border-color: var(--cd-navy);
    --bs-btn-hover-bg: #223655;
    --bs-btn-hover-border-color: #223655;
    --bs-btn-active-bg: #101d33;
    --bs-btn-active-border-color: #101d33;
}

.btn-outline-primary {
    --bs-btn-color: var(--cd-navy);
    --bs-btn-border-color: #9aa8bb;
    --bs-btn-hover-bg: var(--cd-navy);
    --bs-btn-hover-border-color: var(--cd-navy);
}

.form-control,
.form-select {
    border-color: #cbd5e1;
    min-height: 44px;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--cd-teal);
    box-shadow: 0 0 0 .2rem rgba(38,170,168,.12);
}

.subject-card { border-left: 5px solid #adb5bd; }
.subject-approved { border-left-color: #198754; }
.subject-failed { border-left-color: #dc3545; }
.subject-current { border-left-color: #0d6efd; }
.subject-pending { border-left-color: #adb5bd; }

.progress { height: .65rem; }

/* Login */
.login-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 15% 12%, rgba(38,170,168,.11), transparent 28%),
        radial-gradient(circle at 88% 85%, rgba(112,70,165,.09), transparent 29%),
        #f5f7fb;
}

.login-brand {
    padding: 30px 0 15px;
}

.login-panel {
    max-width: 1040px;
    margin: 40px auto;
    background: #fff;
    border: 1px solid var(--cd-border);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 1.5rem 3rem rgba(23,38,65,.09);
}

.login-info {
    min-height: 565px;
    padding: 58px;
    background:
        linear-gradient(rgba(23,38,65,.92), rgba(23,38,65,.94)),
        linear-gradient(135deg,#1f375a,#121e34);
    color: #fff;
    position: relative;
}

.login-info::after {
    content:"";
    position:absolute;
    left:58px;
    top:138px;
    width:58px;
    height:4px;
    border-radius:99px;
    background:linear-gradient(90deg,var(--cd-teal) 55%,var(--cd-magenta) 55%);
}

.login-info h1 {
    font-size: clamp(2rem,3.6vw,3.35rem);
    letter-spacing: -.05em;
    font-weight: 780;
    max-width: 520px;
    margin-top: 55px;
}

.login-info p {
    color: rgba(255,255,255,.72);
    max-width: 480px;
    font-size: 1.05rem;
}

.login-form-side {
    padding: 58px;
    display:flex;
    align-items:center;
}

.login-form-wrap {
    width:100%;
    max-width: 440px;
    margin: 0 auto;
}

.login-form-wrap h2 {
    font-size: 2.2rem;
    letter-spacing: -.04em;
    font-weight: 780;
}

.login-form-wrap .form-control {
    min-height: 52px;
    border-radius: .8rem;
}

.login-form-wrap .btn {
    min-height: 52px;
    border-radius: .8rem;
    font-size: 1.05rem;
    font-weight: 650;
}

.login-small-note {
    color: var(--cd-muted);
    font-size: .9rem;
}

@media (max-width: 991px) {
    .login-info {
        min-height: auto;
        padding: 38px;
    }
    .login-info h1 { margin-top: 35px; }
    .login-info::after { left:38px; top:105px; }
    .login-form-side { padding: 40px 30px; }
    .navbar-user { padding: .8rem 0; }
}


.brand-logo-img{width:54px;height:54px;object-fit:contain;display:block}
.status-card{position:relative;overflow:hidden;border-width:1px}
.status-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:7px;background:var(--status-color,#f59e0b)}
.status-card.status-green{--status-color:#20a36a;background:linear-gradient(90deg,rgba(32,163,106,.075),#fff 32%)}
.status-card.status-red{--status-color:#dc3545;background:linear-gradient(90deg,rgba(220,53,69,.075),#fff 32%)}
.status-card.status-purple{--status-color:#7046a5;background:linear-gradient(90deg,rgba(112,70,165,.08),#fff 32%)}
.status-card.status-orange{--status-color:#f59e0b;background:linear-gradient(90deg,rgba(245,158,11,.09),#fff 32%)}
.status-dot{width:13px;height:13px;border-radius:50%;display:inline-block;background:var(--status-color,#f59e0b);box-shadow:0 0 0 5px color-mix(in srgb,var(--status-color,#f59e0b) 12%,white)}
.status-name{font-size:1.5rem;font-weight:760;letter-spacing:-.02em}.status-note{color:#667085;font-size:.86rem}
.status-inline{display:inline-flex;align-items:center;gap:.48rem;padding:.38rem .65rem;border-radius:999px;font-weight:650;font-size:.82rem}
.status-inline.green{color:#13653f;background:#dff4e9}.status-inline.red{color:#a42330;background:#fde4e6}.status-inline.purple{color:#56347d;background:#eee7f6}.status-inline.orange{color:#946006;background:#fff0cf}
.catalog-actions{white-space:nowrap}.btn-edit{min-width:72px}


/* V1.2.1 — Resumen académico unificado */
.academic-summary-card { overflow: hidden; }

.academic-summary-item {
    min-height: 190px;
    padding: 1.65rem 1.8rem;
    position: relative;
}

.summary-divider { border-left: 1px solid #e1e7ef; }

.summary-label {
    color: #6b7280;
    font-size: .95rem;
    font-weight: 500;
}

.summary-value {
    color: #20252c;
    font-size: 1.55rem;
    line-height: 1.15;
    font-weight: 750;
    letter-spacing: -.02em;
}

.summary-percent { font-size: 1.35rem; white-space: nowrap; }

.summary-note {
    color: #68758b;
    font-size: .84rem;
    line-height: 1.45;
}

.status-summary {
    --status-color: #f59e0b;
    background: linear-gradient(90deg, rgba(245,158,11,.07), #fff 48%);
}
.status-summary::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px;
    background: var(--status-color);
}
.status-summary.status-green { --status-color: #20a36a; background: linear-gradient(90deg, rgba(32,163,106,.07), #fff 48%); }
.status-summary.status-red { --status-color: #dc3545; background: linear-gradient(90deg, rgba(220,53,69,.07), #fff 48%); }
.status-summary.status-purple { --status-color: #7046a5; background: linear-gradient(90deg, rgba(112,70,165,.07), #fff 48%); }
.status-summary.status-orange { --status-color: #f59e0b; background: linear-gradient(90deg, rgba(245,158,11,.07), #fff 48%); }

.academic-progress { height: 10px; border-radius: 999px; }

@media (max-width: 991.98px) {
    .academic-summary-item { min-height: auto; }
    .summary-divider { border-left: 0; border-top: 1px solid #e1e7ef; }
}

.proposal-priority {
    border-color: rgba(220,53,69,.35) !important;
    background: rgba(220,53,69,.035);
}

.pagination-select { width: 78px; min-height: 31px; }
.pagination-bar .page-link { color: var(--cd-navy); }
.pagination-bar .page-item.active .page-link { background: var(--cd-navy); border-color: var(--cd-navy); color:#fff; }


/* V1.9 — búsqueda, orientaciones y propuesta académica */
.search-toolbar .search-clear-btn {
    min-width: 84px;
    background: #fff;
    border-color: #aab5c4;
    color: var(--cd-navy);
    text-decoration: none;
}

.search-toolbar .search-clear-btn:hover {
    background: #eef2f7;
    border-color: #8392a6;
    color: var(--cd-navy);
}

.search-input {
    min-width: 230px;
}

.orientation-config-box {
    border: 1px solid #d9e1eb;
    border-radius: .9rem;
    padding: 1rem;
    background: #f8fafc;
}

.semester-pill {
    display: inline-flex;
    min-width: 42px;
    min-height: 34px;
    padding: .35rem .65rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #e7eef8;
    color: var(--cd-navy);
    font-weight: 750;
}

.suggestion-item {
    border: 1px solid #dce3ec;
    border-radius: .75rem;
    padding: .8rem;
    margin-bottom: .65rem;
    background: #fff;
}

.suggestion-item.suggestion-priority {
    border-color: rgba(220,53,69,.42);
    background: rgba(220,53,69,.035);
}

.orientation-choice {
    display: flex;
    align-items: center;
    gap: .8rem;
    border: 1px solid #e1e7ef;
    border-radius: .75rem;
    padding: .75rem;
}

.orientation-slot {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--cd-navy);
    color: #fff;
    font-weight: 750;
}


/* V1.11 — programación general */
.programming-search { max-width: 620px; }
.programming-tabs .nav-link {
    color: var(--cd-navy);
    font-weight: 650;
}
.programming-tabs .nav-link.active {
    color: var(--cd-navy);
}
.programming-table th {
    white-space: nowrap;
}
.programming-subjects {
    min-width: 380px;
}
.programming-subject-item {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .32rem 0;
    border-bottom: 1px solid #edf0f4;
}
.programming-subject-item:last-child {
    border-bottom: 0;
}
.programming-subject-item.is-priority {
    color: #b42331;
    font-weight: 650;
}
.programming-subject-key {
    display: inline-flex;
    min-width: 64px;
    font-weight: 750;
    color: var(--cd-navy);
}

/* V1.12 — historial agrupado y NRC/secciones */
.history-cycle-block {
    border: 1px solid #dfe5ed;
    border-radius: .9rem;
    overflow: hidden;
    background: #fff;
}
.history-cycle-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .75rem 1rem;
    background: #f5f7fa;
    border-bottom: 1px solid #dfe5ed;
}
.history-cycle-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .28rem .7rem;
    border-radius: 999px;
    background: var(--cd-navy);
    color: #fff;
    font-weight: 750;
    letter-spacing: .02em;
}
.history-cycle-block .table > :not(caption) > * > * {
    padding-left: 1rem;
    padding-right: 1rem;
}

/* V1.17.1: orientación destacada sin competir con las calificaciones. */
.history-cycle-block .table tbody tr.history-orientation-row > td {
    background-color: #f0f7fb;
}
.history-cycle-block .table tbody tr.history-orientation-row:hover > td {
    background-color: #e8f2f8;
}
.history-cycle-block .table tbody tr.history-orientation-row > td:first-child {
    box-shadow: inset 3px 0 0 #86b7cb;
}
.history-orientation-tag {
    display: inline-block;
    margin-left: .45rem;
    padding: .12rem .4rem;
    font-size: .7rem;
    font-weight: 600;
    color: #35667c;
    background: #e1edf3;
    border-radius: .3rem;
    vertical-align: middle;
}
.orientation-subject-list { margin-top: .4rem; }
.orientation-subject-item {
    padding: .65rem 0;
    border-top: 1px solid #e3e8ee;
}
.orientation-subject-name { font-size: .9rem; line-height: 1.45; }
.orientation-subject-state { font-size: .82rem; font-weight: 650; margin-top: .18rem; }
.orientation-subject-state.is-approved { color: #198754; }
.orientation-subject-state.is-pending { color: #687482; }

/* V1.17.2: fondos aplicados a las celdas (Bootstrap 5 pinta las celdas,
   no el <tr>). Las variables de Bootstrap se sobreescriben explícitamente. */
.history-cycle-block .table > tbody > tr.history-orientation-row > td {
    --bs-table-bg: #eef6fa;
    --bs-table-accent-bg: #eef6fa;
    background-color: #eef6fa !important;
    box-shadow: inset 0 0 0 9999px #eef6fa;
}
.history-cycle-block .table > tbody > tr.history-orientation-row:hover > td {
    --bs-table-bg: #e6f1f7;
    --bs-table-accent-bg: #e6f1f7;
    background-color: #e6f1f7 !important;
    box-shadow: inset 0 0 0 9999px #e6f1f7;
}
.history-cycle-block .table > tbody > tr.history-orientation-row > td:first-child {
    border-left: 3px solid #8ab7cc;
}
/* Panel derecho: materia y estado separados, con divisor discreto. */
.orientation-subject-list .orientation-subject-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .65rem 1rem;
    padding: .85rem 0;
    border-top: 1px solid #dde5ed;
}
.orientation-subject-list .orientation-subject-item:first-child { border-top: 0; }
.orientation-subject-list .orientation-subject-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .91rem;
    line-height: 1.4;
}
.orientation-subject-list .orientation-subject-state {
    flex: 0 0 auto;
    margin-top: 0;
    font-size: .83rem;
    font-weight: 750;
    white-space: nowrap;
}
.orientation-subject-list .orientation-subject-state.is-approved { color: #16834c; }
.orientation-subject-list .orientation-subject-state.is-pending { color: #505e6e; }
@media (max-width: 440px) {
    .orientation-subject-list .orientation-subject-item { align-items: flex-start; flex-direction: column; gap: .2rem; }
}

/* V1.17.3: alerta puntual de salto curricular */
.orientation-sequence-warning {
  color: #b42318;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.35;
  margin-top: .25rem;
}

/* Breadcrumbs compartidos - V1.20.3 */
.app-breadcrumb-wrap{padding-top:17px;padding-bottom:0}
.app-breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:9px;list-style:none;margin:0;padding:0;font-size:.85rem;font-weight:550;color:#748297}
.app-breadcrumb li{min-width:0}
.app-breadcrumb a{color:#426489;text-decoration:none;transition:color .15s}
.app-breadcrumb a:hover{color:#0b65a3;text-decoration:underline}
.app-breadcrumb-separator{color:#a9b4c2;font-size:1.15rem;line-height:1}
.app-breadcrumb-current{color:#24364e;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(50vw,460px)}
@media(max-width:575px){.app-breadcrumb{font-size:.78rem;gap:6px}.app-breadcrumb-current{max-width:55vw}}

/* V1.20.9: navegación compacta y cuenta personal */
.app-brand-link{color:inherit;text-decoration:none;min-width:0}
.app-brand-link:hover{color:inherit;text-decoration:none;opacity:.9}
.app-brand-link:focus-visible,.app-account-trigger:focus-visible{outline:3px solid #93c5fd;outline-offset:3px;border-radius:9px}
.app-account-trigger{color:#fff;border:1px solid rgba(255,255,255,.24);padding:.35rem .55rem;border-radius:12px;max-width:300px}
.app-account-trigger:hover,.app-account-trigger:focus{color:#fff;background:rgba(255,255,255,.12)}
.app-account-avatar{display:grid;place-items:center;width:35px;height:35px;flex:none;border-radius:50%;background:#e8f1ff;color:#19335a;font-weight:800}
.app-account-summary{min-width:0;line-height:1.2}
.app-account-name{max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.86rem;font-weight:650}
.app-account-role{font-size:.73rem;opacity:.75;margin-top:3px}
.app-account-menu{min-width:205px}
@media(max-width:991px){.app-account-dropdown{margin:.8rem 0 .25rem}.app-account-trigger{max-width:100%}.app-account-name{max-width:250px}}

/* V1.20.15: cabeceras de listados compactas y buscadores en una línea. */
.catalog-list-header {display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.catalog-list-header > h2 {margin:0;line-height:1.3;flex:0 0 auto;}
.catalog-list-search {display:flex;align-items:center;justify-content:flex-end;gap:.5rem;flex:1 1 300px;min-width:0;flex-wrap:nowrap;}
.catalog-list-search .search-input {min-width:0;width:100%;max-width:360px;flex:1 1 190px;}
.catalog-list-search .btn {white-space:nowrap;flex-shrink:0;}
@media(max-width:767px){.catalog-list-header{align-items:stretch;}.catalog-list-search{flex-basis:100%;justify-content:flex-start;}.catalog-list-search .search-input{max-width:none;}}