:root {
    --sidebar: #14281d;
    --sidebar-2: #0b1d14;
    --ink: #122033;
    --muted: #65758b;
    --brand: #007236;
    --brand-2: #0b8d46;
    --brand-3: #13a65f;
    --brand-dark: #034f28;
    --brand-soft: #e8f6ed;
    --brand-line: #bfe8cf;
    --brand-accent: #b8dc3d;
    --cyan: #087f5b;
    --surface: #ffffff;
    --line: #dbe4ef;
    --page: #eef6f1;
    --bs-primary: var(--brand);
    --bs-primary-rgb: 0, 114, 54;
    --bs-link-color: var(--brand);
    --bs-link-hover-color: var(--brand-dark);
    --bs-focus-ring-color: rgba(0, 114, 54, .24);
}

.family-portal-title h1 {
    margin-bottom: 0;
}

.family-portal-filter .panel-body {
    padding: 18px;
}

.family-portal-layout {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.family-student-list {
    position: sticky;
    top: 18px;
    display: grid;
    gap: 14px;
    align-content: start;
}

.family-student-results {
    display: grid;
    gap: 10px;
    max-height: 72vh;
    overflow: auto;
    padding: 14px;
}

.family-student-card {
    display: grid;
    gap: 3px;
    padding: 12px;
    border: 1px solid #d8e6df;
    border-radius: 8px;
    color: #102033;
    text-decoration: none;
    background: #fff;
}

.family-student-card:hover,
.family-student-card.is-selected {
    border-color: #0b7c4b;
    background: #f0faf4;
}

.family-student-card strong {
    font-size: .95rem;
}

.family-student-card span,
.family-student-card small {
    color: #667085;
    line-height: 1.25;
}

.family-student-card em {
    width: fit-content;
    padding: 2px 8px;
    border-radius: 999px;
    color: #8a4b00;
    background: #fff3d6;
    font-style: normal;
    font-size: .76rem;
    font-weight: 700;
}

.family-profile-band {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 22px;
    border-radius: 8px;
    background: linear-gradient(135deg, #075b35, #0b7c4b);
    color: #fff;
}

.family-profile-band h2 {
    margin: 4px 0;
    font-size: clamp(1.45rem, 2.4vw, 2.2rem);
    font-weight: 800;
}

.family-profile-band span,
.family-profile-band p {
    margin: 0;
    color: rgba(255, 255, 255, .82);
}

.family-profile-band > div:last-child {
    min-width: 220px;
    text-align: right;
}

.family-profile-band strong {
    display: block;
}

.family-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 14px 0;
}

.family-metric-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 10px;
    align-items: center;
    padding: 14px;
    border: 1px solid #dbe7ef;
    border-radius: 8px;
    background: #fff;
}

.family-metric-card i {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    color: #075b35;
    background: #e8f5ee;
    font-size: 1.2rem;
}

.family-metric-card strong {
    font-size: 1.35rem;
    line-height: 1;
}

.family-metric-card span {
    color: #667085;
    font-size: .86rem;
}

.family-section {
    scroll-margin-top: 82px;
}

.family-section-tabs {
    position: sticky;
    top: 0;
    z-index: 8;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 14px;
    padding: 8px;
    border: 1px solid #dbe7ef;
    border-radius: 8px;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(8px);
}

.family-section-tabs .nav-item {
    min-width: 0;
}

.family-section-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 38px;
    padding: 6px 10px;
    border: 0;
    border-radius: 8px;
    color: #102033;
    background: #f5f8fb;
    text-decoration: none;
    font-size: .84rem;
    font-weight: 800;
}

.family-section-tabs .nav-link:hover,
.family-section-tabs .nav-link.active {
    color: #075b35;
    background: #e8f5ee;
}

.family-tab-content {
    min-width: 0;
}

.family-chart-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.family-chart-grid article {
    min-height: 250px;
    padding: 12px;
    border: 1px solid #dbe7ef;
    border-radius: 8px;
    background: #fff;
}

.family-chart-grid strong {
    display: block;
    margin-bottom: 8px;
    color: #102033;
}

.family-chart-grid canvas {
    width: 100%;
    height: 205px !important;
}

.family-action-stack,
.family-action-form,
.family-request-list {
    display: grid;
    gap: 10px;
}

.family-action-form {
    padding: 12px;
    border: 1px solid #dbe7ef;
    border-radius: 8px;
    background: #f8fbfd;
}

.family-action-split {
    display: grid;
    grid-template-columns: minmax(260px, 380px) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.family-request-list {
    padding: 12px;
    border: 1px solid #dbe7ef;
    border-radius: 8px;
    background: #fff;
}

.family-request-list article {
    display: grid;
    gap: 2px;
    padding: 10px;
    border-radius: 8px;
    background: #f5f8fb;
}

.family-request-list article span,
.family-request-list article small {
    color: #667085;
    font-size: .82rem;
}

.family-teacher-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.family-teacher-card {
    display: grid;
    gap: 4px;
    padding: 14px;
    border: 1px solid #dbe7ef;
    border-radius: 8px;
    background: #fff;
}

.family-teacher-card span {
    color: #075b35;
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.family-teacher-card small,
.family-teacher-card em {
    color: #667085;
    font-size: .84rem;
    font-style: normal;
}

.family-grade-strip,
.family-attendance-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.family-grade-strip div,
.family-attendance-summary div {
    padding: 12px;
    border-radius: 8px;
    background: #f5f8fb;
    text-align: center;
}

.family-grade-strip strong,
.family-attendance-summary strong {
    display: block;
    font-size: 1.25rem;
}

.family-grade-strip span,
.family-attendance-summary span {
    color: #667085;
    font-size: .82rem;
}

.family-contact-list,
.family-timeline {
    display: grid;
    gap: 10px;
}

.family-contact-list article,
.family-timeline-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
}

.family-contact-list span,
.family-contact-list small,
.family-timeline-item span {
    display: block;
    color: #667085;
    font-size: .84rem;
}

.family-timeline-item {
    border-left: 4px solid #0b7c4b;
}

.family-timeline-item.priority-alta {
    border-left-color: #f59e0b;
}

.family-timeline-item.priority-urgente {
    border-left-color: #dc2626;
}

.family-timeline-item p {
    margin: 6px 0 0;
    color: #344054;
}

.family-status-form {
    display: flex;
    gap: 6px;
    align-items: start;
    min-width: 150px;
}

.family-notice-form {
    padding: 12px;
    border: 1px solid #dbe7ef;
    border-radius: 8px;
    background: #f8fbfd;
}

.family-sidebar-notices .panel-body {
    padding: 14px;
}

.family-sidebar-notices .family-timeline {
    max-height: 38vh;
    overflow: auto;
}

.family-sidebar-notices .family-timeline-item {
    display: grid;
}

.family-sidebar-notices .family-status-form {
    width: 100%;
    min-width: 0;
}

.family-compact-table {
    font-size: .88rem;
}

.family-status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 8px;
    border-radius: 999px;
    color: #075b35;
    background: #e8f5ee;
    font-size: .75rem;
    font-weight: 700;
}

.family-portal-empty {
    display: grid;
    place-items: center;
    gap: 6px;
    padding: 24px;
    color: #667085;
    text-align: center;
}

.family-portal-empty i {
    color: #0b7c4b;
    font-size: 2rem;
}

.family-portal-empty strong {
    color: #102033;
}

.family-portal-empty.is-large {
    min-height: 300px;
}

.family-report-card-panel,
.family-auxiliary-panel {
    margin-bottom: 14px;
}

.family-report-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid #dbe7ef;
    border-radius: 8px;
    background: #f8fbfd;
}

.family-report-head strong,
.family-report-head span {
    display: block;
}

.family-report-head span {
    color: #667085;
    font-size: .86rem;
}

.family-report-table {
    min-width: 860px;
    font-size: .82rem;
}

.family-report-mobile,
.family-auxiliary-mobile {
    display: none;
}

.family-report-table th {
    white-space: nowrap;
    background: #edf4f7;
}

.family-report-area {
    width: 170px;
    font-weight: 800;
    color: #102033;
    background: #f7fafc;
}

.family-report-conclusion {
    min-width: 260px;
    color: #344054;
}

.family-note-pill {
    display: inline-grid;
    place-items: center;
    min-width: 34px;
    min-height: 26px;
    padding: 2px 8px;
    border-radius: 8px;
    color: #344054;
    background: #eef2f6;
    font-size: .78rem;
    font-weight: 800;
}

.family-note-pill.note-ad {
    color: #065f46;
    background: #d1fae5;
}

.family-note-pill.note-a {
    color: #075985;
    background: #e0f2fe;
}

.family-note-pill.note-b {
    color: #92400e;
    background: #fef3c7;
}

.family-note-pill.note-c {
    color: #991b1b;
    background: #fee2e2;
}

.family-current-risk {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.family-current-risk span {
    padding: 6px 10px;
    border-radius: 8px;
    color: #344054;
    background: #f3f7fb;
    font-size: .82rem;
    font-weight: 700;
}

.family-auxiliary-summary {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.family-auxiliary-table {
    min-width: 980px;
}

.family-auxiliary-table td span,
.family-auxiliary-table td em {
    display: block;
    color: #667085;
    font-size: .82rem;
    font-style: normal;
}

.family-auxiliary-table td em {
    margin-top: 4px;
    color: #075985;
    font-weight: 700;
}

.family-mobile-card {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid #dbe7ef;
    border-radius: 8px;
    background: #fff;
}

.family-mobile-card header {
    display: grid;
    gap: 2px;
}

.family-mobile-card header span,
.family-mobile-card footer {
    color: #667085;
    font-size: .82rem;
    font-weight: 700;
}

.family-mobile-card header strong {
    color: #102033;
    line-height: 1.25;
}

.family-mobile-card p {
    margin: 0;
    color: #344054;
    font-size: .88rem;
    line-height: 1.35;
}

.family-mobile-card em {
    color: #075985;
    font-size: .86rem;
    font-style: normal;
    font-weight: 800;
}

.family-period-notes,
.family-mobile-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.family-period-notes div,
.family-mobile-meta {
    align-items: center;
}

.family-period-notes div {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 8px;
    border-radius: 8px;
    background: #f5f8fb;
}

.family-period-notes div > span,
.family-mobile-meta > span:first-child {
    color: #667085;
    font-size: .78rem;
    font-weight: 800;
}

.family-mobile-meta {
    display: flex;
    justify-content: space-between;
    padding: 8px;
    border-radius: 8px;
    background: #f5f8fb;
}

.login-parent-hint {
    display: block;
    margin-top: -8px;
    color: #52657a;
    font-weight: 700;
}

@media (max-width: 1199px) {
    .family-portal-layout {
        grid-template-columns: 1fr;
    }

    .family-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .family-student-list {
        position: static;
    }

    .family-student-results {
        grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
        max-height: none;
    }

    .family-chart-grid,
    .family-action-split {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .family-portal-title {
        display: grid;
        gap: 10px;
    }

    .family-portal-title h1 {
        font-size: 1.55rem;
    }

    .family-portal-filter .panel-body {
        padding: 12px;
    }

    .family-portal-layout {
        gap: 12px;
    }

    .family-student-list .panel-header {
        padding: 12px;
    }

    .family-student-results {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        padding: 10px 12px 14px;
        scroll-snap-type: x proximity;
    }

    .family-student-card {
        flex: 0 0 min(82vw, 320px);
        scroll-snap-align: start;
    }

    .family-profile-band,
    .family-contact-list article,
    .family-timeline-item {
        display: grid;
    }

    .family-profile-band {
        gap: 10px;
        padding: 16px;
    }

    .family-profile-band h2 {
        font-size: 1.35rem;
        line-height: 1.15;
    }

    .family-profile-band > div:last-child {
        min-width: 0;
        text-align: left;
    }

    .family-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin: 10px 0;
    }

    .family-metric-card {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 10px;
    }

    .family-metric-card i {
        grid-row: auto;
        width: 32px;
        height: 32px;
    }

    .family-metric-card strong {
        font-size: 1.1rem;
    }

    .family-section-tabs {
        top: 0;
        grid-template-columns: repeat(6, minmax(62px, 1fr));
        gap: 6px;
        margin-bottom: 10px;
        overflow-x: auto;
    }

    .family-section-tabs .nav-link {
        display: grid;
        gap: 2px;
        min-width: 62px;
        min-height: 52px;
        padding: 6px 4px;
        font-size: .7rem;
        line-height: 1.1;
    }

    .family-chart-grid article {
        min-height: 230px;
    }

    .family-grade-strip,
    .family-attendance-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .family-grade-strip div,
    .family-attendance-summary div {
        padding: 9px;
    }

    .family-auxiliary-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .family-report-head {
        display: grid;
    }

    .family-desktop-table {
        display: none;
    }

    .family-report-mobile,
    .family-auxiliary-mobile {
        display: grid;
        gap: 10px;
    }

    .family-responsive-table,
    .family-responsive-table thead,
    .family-responsive-table tbody,
    .family-responsive-table tr,
    .family-responsive-table td {
        display: block;
        width: 100%;
    }

    .family-responsive-table thead {
        display: none;
    }

    .family-responsive-table tr {
        margin-bottom: 10px;
        padding: 10px;
        border: 1px solid #dbe7ef;
        border-radius: 8px;
        background: #fff;
    }

    .family-responsive-table td {
        display: grid;
        grid-template-columns: minmax(92px, 34%) minmax(0, 1fr);
        gap: 10px;
        align-items: start;
        padding: 8px 0;
        border: 0;
    }

    .family-responsive-table td + td {
        border-top: 1px solid #edf2f7;
    }

    .family-responsive-table td::before {
        content: attr(data-label);
        color: #667085;
        font-size: .75rem;
        font-weight: 800;
        text-transform: uppercase;
    }

    .family-timeline-item {
        gap: 8px;
    }

    .family-status-form {
        min-width: 0;
    }
}

.diagnostic-note {
    display: grid;
    gap: .25rem;
    border: 1px solid #f2c94c;
    border-left: 5px solid #f0ad00;
    border-radius: 8px;
    padding: .85rem 1rem;
    background: #fff8e1;
    color: #172235;
}

.diagnostic-note span {
    color: #5d6d83;
    font-size: .9rem;
    font-weight: 700;
}

.diagnostic-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(190px, 1fr));
    gap: 1rem;
}

.diagnostic-summary-grid .metric-card small {
    display: block;
    margin-top: .35rem;
    color: #61728a;
    font-weight: 800;
}

.diagnostic-import-strip {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(260px, .55fr) auto;
    gap: .85rem;
    align-items: center;
    border: 1px solid var(--brand-line);
    border-radius: 8px;
    padding: .85rem;
    background: #f8fffb;
}

.diagnostic-import-copy {
    display: flex;
    gap: .75rem;
    align-items: center;
    min-width: 0;
}

.diagnostic-import-copy i {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 8px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 1.25rem;
}

.diagnostic-import-copy strong,
.diagnostic-import-copy span {
    display: block;
}

.diagnostic-import-copy span {
    color: #61728a;
    font-size: .88rem;
    font-weight: 700;
}

.diagnostic-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: start;
}

.diagnostic-entry-panel,
.diagnostic-chart-panel {
    overflow: hidden;
}

.diagnostic-table-wrap {
    max-height: 70vh;
    border-top: 1px solid var(--line);
}

.diagnostic-eval-table {
    min-width: 1180px;
    margin-bottom: 0;
    font-size: .82rem;
}

.diagnostic-eval-table th,
.diagnostic-eval-table td {
    border-color: #f0ad00 !important;
    vertical-align: middle;
}

.diagnostic-eval-table thead th {
    background: #ffc107;
    color: #5c4100;
    text-align: center;
    white-space: nowrap;
}

.diagnostic-eval-table tbody td:nth-child(4) {
    min-width: 170px;
    color: #895c00;
    font-style: italic;
    background: #fff8e6;
}

.diagnostic-eval-table tbody td:nth-child(5) {
    min-width: 260px;
    background: #fffdf6;
}

.diagnostic-eval-table tbody td:nth-child(5) strong,
.diagnostic-eval-table tbody td:nth-child(5) span {
    display: block;
}

.diagnostic-eval-table tbody td:nth-child(5) span {
    color: #26364a;
    line-height: 1.18;
}

.diagnostic-eval-table input[type="number"] {
    min-width: 54px;
    padding-right: .35rem;
    padding-left: .35rem;
    font-weight: 800;
}

.diagnostic-chart-canvas {
    height: 340px;
    padding: 1rem;
}

.diagnostic-legend-note {
    border-top: 1px solid var(--line);
    padding: .8rem 1rem 1rem;
    color: #5d6d83;
    font-size: .88rem;
}

@media (max-width: 1180px) {
    .diagnostic-summary-grid,
    .diagnostic-layout,
    .diagnostic-import-strip {
        grid-template-columns: 1fr;
    }
}

.inventory-title .btn {
    min-height: 46px;
}

.inventory-filter-panel {
    margin-bottom: 1rem;
}

.inventory-filter-grid {
    display: grid;
    grid-template-columns: 140px minmax(260px, 1.35fr) minmax(220px, 1fr) minmax(160px, .75fr) minmax(260px, 1.25fr) auto;
    gap: 1rem;
    align-items: end;
    padding: 1.25rem;
}

.inventory-filter-grid .form-label,
.inventory-item-modal .form-label {
    color: var(--ink);
    font-weight: 800;
    font-size: .78rem;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.inventory-filter-actions {
    display: flex;
    gap: .5rem;
}

.inventory-year-status {
    align-items: center;
    background: #fff;
    border: 1px solid #d7e3ee;
    border-left: 5px solid var(--brand);
    border-radius: 8px;
    box-shadow: 0 8px 22px rgba(15, 41, 77, .04);
    display: flex;
    gap: .85rem;
    margin: 0 0 1rem;
    padding: .9rem 1rem;
}

.inventory-year-status i {
    align-items: center;
    background: #e7f6ed;
    border-radius: 8px;
    color: var(--brand-dark);
    display: inline-flex;
    flex: 0 0 42px;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.inventory-year-status strong,
.inventory-year-status span {
    display: block;
}

.inventory-year-status strong {
    color: var(--ink);
    font-weight: 900;
}

.inventory-year-status span {
    color: #5f6f84;
}

.inventory-year-status.is-closed {
    border-left-color: #6c757d;
}

.inventory-year-status.is-closed i {
    background: #eef1f4;
    color: #5d6670;
}

.inventory-format-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .85rem;
    margin: 1rem 0;
}

.inventory-format-pill {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .75rem;
    min-height: 72px;
    padding: .9rem 1rem;
    color: var(--ink);
    text-decoration: none;
    background: #fff;
    border: 1px solid #d7e3ee;
    border-top: 4px solid var(--brand);
    border-radius: 8px;
    box-shadow: 0 8px 22px rgba(15, 41, 77, .05);
}

.inventory-format-pill strong,
.inventory-format-pill em {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 42px;
    min-height: 32px;
    border-radius: 999px;
    background: #e7f6ed;
    color: var(--brand-dark);
    font-style: normal;
    font-weight: 900;
}

.inventory-format-pill span {
    color: #52657c;
    font-weight: 750;
    line-height: 1.25;
}

.inventory-format-pill.active,
.inventory-format-pill:hover {
    border-color: var(--brand);
    background: #f4fbf7;
}

.inventory-table-panel .panel-header p {
    margin: .15rem 0 0;
    color: #66758a;
}

.inventory-table thead th {
    white-space: nowrap;
}

.inventory-table td {
    vertical-align: middle;
}

.inventory-state {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: .2rem .65rem;
    color: #005f37;
    background: #e7f6ed;
    border: 1px solid #bfe5ce;
    border-radius: 999px;
    font-weight: 800;
    font-size: .8rem;
}

.inventory-modal-header {
    background: linear-gradient(90deg, #006b3f, #11945c);
    color: #fff;
}

.inventory-modal-header span {
    display: block;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .06em;
}

.inventory-modal-header .modal-title {
    color: #fff;
    font-size: 1.45rem;
    font-weight: 900;
}

.inventory-modal-note {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.1rem;
    padding: 1rem 1.15rem;
    border: 1px solid #bfe5ce;
    border-radius: 8px;
    background: #f4fbf7;
}

.inventory-modal-note i {
    display: inline-flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    color: var(--brand-dark);
    background: #e7f6ed;
    border-radius: 8px;
    font-size: 1.35rem;
}

.inventory-modal-note strong {
    display: block;
    color: var(--ink);
    font-weight: 900;
}

.inventory-modal-note span {
    color: #5c6d83;
}

.inventory-check-line {
    align-items: flex-start;
    background: #f5fbf8;
    border: 1px solid #c7ead5;
    border-radius: 8px;
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 12px 14px;
}

.inventory-check-line small {
    color: #5c6d83;
    display: block;
    font-weight: 500;
    line-height: 1.35;
    margin-top: 3px;
}

.inventory-form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.inventory-field-wide {
    grid-column: span 2;
}

.inventory-item-modal .form-control,
.inventory-item-modal .form-select {
    min-height: 48px;
}

@media (max-width: 1200px) {
    .inventory-filter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .inventory-format-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .inventory-filter-grid,
    .inventory-form-grid,
    .inventory-format-strip {
        grid-template-columns: 1fr;
    }

    .inventory-field-wide {
        grid-column: auto;
    }

    .inventory-filter-actions {
        flex-direction: column;
    }
}

a {
    color: var(--brand);
}

a:hover {
    color: var(--brand-dark);
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-dark);
    --bs-btn-hover-border-color: var(--brand-dark);
    --bs-btn-focus-shadow-rgb: 0, 114, 54;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #025f2e;
    --bs-btn-active-border-color: #025f2e;
    --bs-btn-disabled-bg: #6ba982;
    --bs-btn-disabled-border-color: #6ba982;
}

.btn-outline-primary {
    --bs-btn-color: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand);
    --bs-btn-hover-border-color: var(--brand);
    --bs-btn-focus-shadow-rgb: 0, 114, 54;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-dark);
    --bs-btn-active-border-color: var(--brand-dark);
    --bs-btn-disabled-color: #6ba982;
    --bs-btn-disabled-border-color: #8dcaa2;
}

.text-bg-primary {
    color: #fff !important;
    background-color: var(--brand) !important;
}

.text-primary {
    color: var(--brand) !important;
}

.bg-primary {
    background-color: var(--brand) !important;
}

.border-primary {
    border-color: var(--brand) !important;
}

.link-primary {
    color: var(--brand) !important;
}

.link-primary:hover,
.link-primary:focus {
    color: var(--brand-dark) !important;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: #43b86c;
    box-shadow: 0 0 0 .25rem rgba(0, 114, 54, .18);
}

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

.page-link {
    color: var(--brand);
}

.active > .page-link,
.page-link.active,
.dt-paging .page-item.active .page-link {
    color: #fff;
    background-color: var(--brand);
    border-color: var(--brand);
}

* { box-sizing: border-box; }

html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body {
    color: var(--ink);
    background: var(--page);
    min-height: 100vh;
    overflow-x: hidden;
}

.login-body {
    background: var(--page);
    overflow: hidden;
}

.login-shell {
    height: 100vh;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(390px, 34vw) minmax(0, 1fr);
    overflow: hidden;
}

.login-panel {
    background: rgba(255, 255, 255, .94);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
    overflow-y: auto;
    padding: clamp(1.5rem, 3.6vw, 4rem);
}

.school-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.45rem;
}

.school-head img {
    width: 86px;
    height: 86px;
    object-fit: contain;
}

.school-head span,
.page-title span {
    color: var(--brand);
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: .8rem;
}

.school-head h1 {
    margin: 0;
    font-weight: 900;
    font-size: clamp(2rem, 3.25vw, 2.75rem);
    line-height: 1.08;
}

.school-head p {
    margin: 0;
    color: var(--muted);
    font-size: 1.05rem;
}

.login-security-note {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .9rem 1rem;
    margin-bottom: .9rem;
    border: 1px solid rgba(0, 108, 55, .18);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(0, 108, 55, .08), rgba(255, 255, 255, .92));
    color: #244334;
    font-weight: 650;
    line-height: 1.35;
}

.login-security-note i {
    color: var(--brand);
    font-size: 1.35rem;
}

.login-form label {
    font-weight: 700;
    margin: .65rem 0 .32rem;
}

.login-form .form-control,
.login-form .form-select,
.login-form .input-group-text {
    border-color: #cfe5d6;
    background: #f8fcf9;
}

.login-form .input-group {
    flex-wrap: nowrap;
}

.login-form .js-toggle-password,
.account-panel .js-toggle-password {
    border-color: #cfe5d6;
    background: #fff;
}

.login-form .btn {
    margin-top: 1rem;
    font-weight: 800;
}

.login-create-ie-btn {
    margin-top: .7rem !important;
}

.login-level-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .85rem;
}

.login-level-option {
    display: grid;
    gap: .55rem;
    padding: .9rem;
    border: 1px solid #cfe5d6;
    border-radius: 10px;
    background: #f8fcf9;
    font-weight: 800;
}

.login-level-option span {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.institution-create-modal .modal-header span {
    font-size: .78rem;
    letter-spacing: .05em;
}

.institution-create-modal {
    border: 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(12, 37, 24, .24);
}

.institution-create-header {
    color: #fff;
    background:
        linear-gradient(135deg, rgba(184, 220, 61, .2), transparent 38%),
        linear-gradient(135deg, var(--brand-dark), var(--brand) 58%, var(--brand-2));
    border-bottom: 0;
    padding: 1.05rem 1.35rem;
}

.institution-create-header .btn-close {
    filter: invert(1) grayscale(1) brightness(2);
    opacity: .84;
}

.institution-create-title span {
    display: block;
    color: rgba(255, 255, 255, .78);
    font-weight: 900;
    text-transform: uppercase;
}

.institution-create-title h5 {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: .15rem 0 0;
    font-size: clamp(1.25rem, 2.2vw, 1.65rem);
    font-weight: 950;
}

.institution-form-shell {
    display: grid;
    gap: 1rem;
}

.institution-form-section {
    padding: 1rem;
    border: 1px solid #d7e9de;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff, #fbfefc);
    box-shadow: 0 10px 24px rgba(18, 32, 51, .05);
}

.institution-section-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .9rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid #e4efe8;
}

.institution-section-head i {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    color: var(--brand);
    background: var(--brand-soft);
    border: 1px solid var(--brand-line);
    border-radius: 12px;
    font-size: 1.25rem;
}

.institution-section-head strong,
.institution-section-head span {
    display: block;
}

.institution-section-head strong {
    color: var(--ink);
    font-size: 1rem;
    font-weight: 950;
}

.institution-section-head span {
    color: var(--muted);
    font-size: .82rem;
    font-weight: 750;
}

.institution-create-modal .form-label {
    margin-bottom: .35rem;
    color: #223149;
    font-weight: 800;
}

.institution-create-modal .form-control,
.institution-create-modal .form-select,
.institution-create-modal .bootstrap-autocomplete-input {
    min-height: 46px;
    border-color: #d6e1eb;
    border-radius: 10px;
    background-color: #fff;
}

.institution-create-modal .form-control:focus,
.institution-create-modal .form-select:focus,
.institution-create-modal .bootstrap-autocomplete-input:focus {
    border-color: #38a968;
    box-shadow: 0 0 0 .22rem rgba(0, 114, 54, .14);
}

.institution-level-grid {
    gap: .9rem;
}

.institution-level-option {
    min-height: 112px;
    border-radius: 14px;
    background: #f7fcf9;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.institution-level-option:focus-within,
.institution-level-option:hover {
    border-color: #8fd0a9;
    box-shadow: 0 10px 22px rgba(0, 114, 54, .08);
    transform: translateY(-1px);
}

.institution-location-select:disabled {
    color: #8793a4;
    background-color: #f2f5f7;
    cursor: not-allowed;
}

.institution-location-status {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-top: .9rem;
    padding: .48rem .7rem;
    color: var(--brand-dark);
    background: var(--brand-soft);
    border: 1px solid var(--brand-line);
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 800;
}

.institution-create-footer {
    background: #f8fbf9;
    border-top: 1px solid #dbe8e0;
    padding: .9rem 1.25rem;
}

.institution-create-footer .btn {
    min-height: 46px;
    font-weight: 850;
}

.login-hero {
    background:
        linear-gradient(90deg, rgba(0, 72, 33, .72), rgba(0, 0, 0, .2)),
        url("../img/fondo-login.jpg"),
        linear-gradient(135deg, var(--brand), #f6fbf8);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    min-height: 0;
    overflow: hidden;
    padding: clamp(2rem, 5vw, 4rem);
}

.hero-overlay {
    color: #fff;
    max-width: 760px;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .24);
}

.hero-overlay span {
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.hero-overlay h2 {
    font-weight: 900;
    font-size: clamp(2.2rem, 4.1vw, 4rem);
    line-height: 1.04;
    margin: .45rem 0 1rem;
}

.hero-overlay p {
    font-size: clamp(1rem, 2vw, 1.25rem);
}

body.comano-body {
    display: grid !important;
    grid-template-columns: 292px minmax(0, 1fr);
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 100vh;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden;
    transition: grid-template-columns .2s ease;
}

body.comano-body > .comano-sidebar {
    min-height: 100vh;
    width: 292px;
    min-width: 292px;
    max-width: 292px;
    margin: 0 !important;
    background: linear-gradient(180deg, var(--sidebar), var(--sidebar-2));
    color: #e9eef6;
    position: sticky;
    top: 0;
    left: 0;
    overflow-y: auto;
    z-index: 20;
    transition: transform .2s ease, visibility .2s ease;
}

body.sidebar-collapsed.comano-body {
    grid-template-columns: 0 minmax(0, 1fr);
}

body.sidebar-collapsed.comano-body > .comano-sidebar {
    transform: translateX(-100%);
    visibility: hidden;
    pointer-events: none;
}

.brand {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1rem 1.15rem;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.brand img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.brand small,
.user-panel small {
    display: block;
    color: #b9c6d5;
}

.user-panel {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    color: var(--brand-dark);
    display: grid;
    place-items: center;
    font-weight: 900;
}

.sidebar-menu {
    padding: .75rem;
}

.menu-group {
    margin-bottom: .25rem;
}

.menu-heading,
.logout-link {
    width: 100%;
    border: 0;
    background: transparent;
    color: #d9e3ee;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .82rem .9rem;
    border-radius: .65rem;
    text-decoration: none;
    font-weight: 700;
}

.menu-heading:hover,
.logout-link:hover,
.menu-group.open .menu-heading {
    background: rgba(255, 255, 255, .11);
    color: #fff;
}

.submenu {
    display: none;
    padding: .15rem 0 .4rem 2.35rem;
}

.menu-group.open .submenu {
    display: block;
}

.submenu a {
    display: block;
    color: #c7d2df;
    text-decoration: none;
    padding: .38rem .5rem;
    border-radius: .5rem;
    font-size: .94rem;
}

.submenu a:hover {
    color: #fff;
    background: rgba(255, 255, 255, .08);
}

.m02-template {
    border: 1px solid #bfd2e8;
    border-radius: 14px;
    background: linear-gradient(180deg, #f8fbff, #ffffff);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7);
    padding: 1rem;
}

.m02-template-head {
    border-left: 5px solid var(--brand);
    background: var(--brand-soft);
    border-radius: 10px;
    padding: .85rem 1rem;
    margin-bottom: .9rem;
}

.m02-template-head span {
    display: block;
    color: var(--brand);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .06em;
}

.m02-template-head strong {
    display: block;
    font-size: 1.05rem;
    font-weight: 900;
}

.m02-template-head p {
    margin: .25rem 0 0;
    color: #4f6178;
    font-size: .9rem;
}

.m02-required-text {
    color: #d00000;
    font-weight: 800;
    line-height: 1.35;
}

.m02-block {
    border-top: 1px solid #dbe6f3;
    padding-top: .9rem;
    margin-top: .9rem;
}

.m02-block h6 {
    color: #163a5c;
    font-weight: 900;
    margin-bottom: .6rem;
}

.m02-table {
    border: 1px solid #9bbce0;
    margin-bottom: .4rem;
}

.m02-table thead th {
    background: var(--brand-dark);
    color: #fff;
    border-color: #023c1f;
    font-weight: 800;
    vertical-align: middle;
}

.m02-table td {
    border-color: #b9d0ea;
}

.m02-check-col {
    width: 92px;
}

.m02-wide-text-row td {
    background: #fbfdff;
    padding: .55rem .65rem;
}

.m02-wide-textarea {
    display: grid;
    grid-template-columns: minmax(120px, 150px) minmax(0, 1fr);
    align-items: center;
    gap: .85rem;
}

.m02-wide-textarea .form-control {
    min-height: 96px;
    resize: vertical;
}

@media (max-width: 767.98px) {
    .m02-wide-textarea {
        grid-template-columns: 1fr;
        gap: .45rem;
    }
}

.m02-commit-card {
    border: 1px solid #f1b8b8;
    border-radius: 10px;
    background: #fff8f8;
    color: #d00000;
    padding: .85rem 1rem;
    height: 100%;
}

.m02-commit-card strong {
    display: block;
    margin-bottom: .35rem;
}

.m02-commit-card ol {
    margin-bottom: 0;
    padding-left: 1.15rem;
}

.m03-template .m02-template-head {
    border-left-color: #198754;
    background: #edf8f1;
}

.m03-commit-text {
    color: #009245;
    font-weight: 700;
    line-height: 1.35;
}

.m04-template .m02-template-head {
    border-left-color: #dc3545;
    background: #fff1f3;
}

.m04-commit-card {
    border-color: #f1b8b8;
    background: #fff8f8;
    color: #c30000;
}

.m05-template .m02-template-head {
    border-left-color: #198754;
    background: linear-gradient(135deg, #edf9f2, #f8fffb);
}

.m05-commit-card {
    border-color: #b6e2c7;
    background: #f3fbf6;
    color: #145c32;
}

.m01-template .m02-template-head {
    border-left-color: #0f6f7d;
    background: linear-gradient(135deg, #eaf8fb, #f8fdff);
}

.m06-template .m02-template-head {
    border-left-color: var(--brand-2);
    background: linear-gradient(135deg, var(--brand-soft), #fbfffc);
}

.m06-commit-card {
    border-color: var(--brand-line);
    background: #f5fbf7;
    color: var(--brand-dark);
}

.m07-template .m02-template-head {
    border-left-color: #20c997;
    background: linear-gradient(135deg, #e8fbf5, #f8fffc);
}

.m07-commit-card {
    border-color: #b8ead8;
    background: #f2fcf8;
    color: #116347;
}

.m08-template .m02-template-head {
    border-left-color: var(--brand);
    background: linear-gradient(135deg, var(--brand-soft), #fbfffc);
}

.m08-required-text {
    color: #144164;
}

.m08-status-table th:not(:first-child),
.m08-status-table td:not(:first-child) {
    width: 7.5rem;
}

body.comano-body > .comano-main {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
}

.topbar {
    width: 100%;
    max-width: 100%;
    min-height: 64px;
    background: linear-gradient(90deg, var(--brand-dark), var(--brand), var(--brand-2));
    color: #fff;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .75rem 1.25rem;
    box-shadow: 0 2px 10px rgba(0, 72, 33, .22);
    position: sticky;
    top: 0;
    z-index: 10;
}

.topbar small {
    display: block;
    opacity: .92;
}

.sidebar-toggle {
    color: #fff;
    font-size: 1.65rem;
    text-decoration: none;
    width: 2.65rem;
    height: 2.65rem;
    display: inline-grid;
    place-items: center;
    border-radius: .6rem;
    transition: background-color .18s ease, transform .18s ease;
}

.sidebar-toggle:hover,
.sidebar-toggle:focus {
    color: #fff;
    background: rgba(255, 255, 255, .12);
}

body.sidebar-collapsed .sidebar-toggle i {
    transform: rotate(90deg);
}

.content-wrapper {
    flex: 1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: clamp(1rem, 2.2vw, 1.75rem);
}

.comano-footer {
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
    color: var(--muted);
    background: #fff;
    border-top: 1px solid var(--line);
}

.page-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.page-title h1 {
    font-size: clamp(1.65rem, 4vw, 2.55rem);
    font-weight: 900;
    margin: 0;
}

.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: .85rem;
    box-shadow: 0 10px 24px rgba(15, 44, 70, .06);
    overflow: hidden;
}

.panel-header,
.panel-footer {
    padding: 1rem 1.15rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--line);
}

.panel-footer {
    border-top: 1px solid var(--line);
    border-bottom: 0;
}

.panel-subheader {
    background: #f7fafc;
}

.panel-header h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 900;
}

.panel-body {
    padding: 1.15rem;
}

.maintenance-overview {
    display: grid;
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.maintenance-stat {
    position: relative;
    min-height: 116px;
    padding: 1rem;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-top: 4px solid var(--brand);
    border-radius: .85rem;
    box-shadow: 0 10px 24px rgba(15, 44, 70, .06);
}

.maintenance-stat i {
    position: absolute;
    top: .9rem;
    right: 1rem;
    color: var(--brand);
    font-size: 2.1rem;
    opacity: .16;
}

.maintenance-stat span {
    display: block;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.maintenance-stat strong {
    display: block;
    margin-top: .45rem;
    font-size: clamp(1.05rem, 2.1vw, 1.45rem);
    font-weight: 900;
    overflow-wrap: anywhere;
}

.maintenance-action-list {
    display: grid;
    gap: .75rem;
}

.backup-form .btn,
.maintenance-action-list .btn {
    font-weight: 800;
}

.account-panel {
    max-width: 920px;
}

.account-panel .input-group-text {
    background: var(--brand-soft);
    color: var(--brand-dark);
    border-color: var(--brand-line);
}

.security-users-table th {
    white-space: nowrap;
}

.security-users-table td {
    vertical-align: middle;
}

.security-admin-form {
    display: grid;
    gap: .9rem;
    grid-template-columns: minmax(280px, 1.7fr) minmax(140px, .65fr) minmax(150px, .75fr) minmax(150px, .75fr) minmax(120px, .55fr) minmax(150px, .65fr);
    align-items: start;
}

.security-admin-form .form-label {
    color: var(--ink);
    font-weight: 800;
    margin-bottom: .35rem;
}

.security-admin-form-action {
    align-self: end;
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.metric-card {
    background: #fff;
    border-radius: .85rem;
    border: 1px solid var(--line);
    padding: 1rem;
    min-height: 124px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.metric-card i {
    position: absolute;
    right: 1rem;
    top: 1rem;
    font-size: 2.2rem;
    opacity: .16;
}

.metric-card strong {
    font-size: 2.15rem;
    font-weight: 900;
}

.metric-card span {
    color: var(--muted);
    font-weight: 700;
}

.tone-primary { border-top: 4px solid var(--brand); }
.tone-success { border-top: 4px solid #198754; }
.tone-info { border-top: 4px solid #087f5b; }
.tone-warning { border-top: 4px solid #ffc107; }
.tone-danger { border-top: 4px solid #dc3545; }
.tone-dark { border-top: 4px solid #212529; }

.auxiliary-monitoring-progress {
    height: 1.35rem;
    min-width: 140px;
    background: #eef3f7;
}

.auxiliary-monitoring-progress .progress-bar {
    min-width: 3.75rem;
    font-weight: 800;
}

.admin-ie-hero {
    display: grid;
    grid-template-columns: minmax(260px, 400px) minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.15rem;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(232, 246, 237, .82));
    border: 1px solid var(--line);
    border-radius: 1rem;
    box-shadow: 0 14px 34px rgba(15, 44, 70, .08);
}

.admin-ie-title-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 124px;
    padding: 1rem 1.15rem;
    color: #fff;
    background:
        linear-gradient(135deg, rgba(184, 220, 61, .2), transparent 42%),
        linear-gradient(135deg, var(--brand-dark), var(--brand) 52%, var(--brand-3));
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: .95rem;
    box-shadow: 0 16px 28px rgba(13, 66, 37, .18);
}

.admin-ie-title-card i {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: .85rem;
    font-size: 2.25rem;
}

.admin-ie-title-card strong {
    display: block;
    font-size: clamp(1.45rem, 2.6vw, 2.15rem);
    font-weight: 900;
    line-height: 1;
}

.admin-ie-title-card span {
    display: block;
    margin-top: .35rem;
    color: rgba(255, 255, 255, .78);
    font-weight: 800;
}

.admin-ie-hero-copy {
    padding: .25rem .55rem;
}

.admin-ie-hero-copy > span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: .45rem;
    color: var(--brand);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.admin-ie-hero-copy h2 {
    max-width: 760px;
    margin: 0 0 .45rem;
    font-size: clamp(1.15rem, 2vw, 1.55rem);
    font-weight: 900;
    line-height: 1.12;
}

.admin-ie-hero-copy p {
    margin: 0;
    color: var(--muted);
    font-size: .98rem;
    max-width: 760px;
}

.admin-ie-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: .75rem;
}

.admin-ie-meta span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .36rem .58rem;
    color: var(--brand-dark);
    background: var(--brand-soft);
    border: 1px solid var(--brand-line);
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 800;
}

.admin-ie-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.admin-ie-tile {
    position: relative;
    min-height: 214px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: .95rem;
    overflow: hidden;
    color: var(--ink);
    text-decoration: none;
    padding: 1rem;
    background: #fff;
    border: 1px solid var(--line);
    border-top: 5px solid var(--brand);
    border-radius: 1rem;
    box-shadow: 0 12px 28px rgba(15, 44, 70, .08);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.admin-ie-tile:hover,
.admin-ie-tile:focus {
    color: var(--ink);
    transform: translateY(-3px);
    border-color: rgba(0, 114, 54, .36);
    box-shadow: 0 18px 38px rgba(15, 44, 70, .14);
}

.admin-ie-tile.is-prepared {
    border-top-color: var(--brand-accent);
}

.admin-ie-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    color: var(--brand-dark);
    background: var(--brand-soft);
    border: 1px solid var(--brand-line);
    border-radius: .9rem;
}

.admin-ie-icon i {
    font-size: 2rem;
    line-height: 1;
}

.admin-ie-tile strong {
    display: block;
    margin-bottom: .45rem;
    font-size: 1.18rem;
    font-weight: 900;
    line-height: 1.12;
}

.admin-ie-tile small {
    display: block;
    color: var(--muted);
    font-size: .93rem;
    font-weight: 600;
    line-height: 1.35;
}

.admin-ie-action {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    width: 100%;
    padding-top: .8rem;
    color: var(--brand);
    border-top: 1px solid #eef2f7;
    font-weight: 900;
}

.admin-ie-action i {
    font-size: 1.3rem;
}

.admin-ie-status {
    position: absolute;
    top: .85rem;
    right: .85rem;
    z-index: 2;
    padding: .24rem .6rem;
    color: #0f766e;
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 900;
}

.admin-ie-tile.is-active .admin-ie-status {
    color: #fff;
    background: var(--brand);
    border-color: var(--brand);
}

.admin-module-panel {
    overflow: hidden;
    border: 1px solid #d8e6f2;
    box-shadow: 0 16px 34px rgba(15, 44, 70, .07);
}

.admin-module-panel .panel-body {
    padding: 1.35rem 1.45rem;
    background:
        linear-gradient(135deg, rgba(14, 126, 70, .06), transparent 38%),
        #fff;
}

.admin-module-shell {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 1.15rem;
    align-items: center;
}

.admin-module-icon {
    width: 96px;
    height: 96px;
    display: grid;
    place-items: center;
    color: #fff;
    background:
        radial-gradient(circle at 72% 22%, rgba(255, 255, 255, .28), transparent 28%),
        linear-gradient(135deg, #21a85a, #06723a);
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 16px;
    box-shadow: 0 14px 28px rgba(6, 114, 58, .18);
    font-size: 2.85rem;
}

.admin-module-badge {
    display: inline-flex;
    margin-bottom: .5rem;
    padding: .24rem .62rem;
    border-radius: 999px;
    color: #0a6834;
    background: #e7f6ed;
    font-size: .78rem;
    font-weight: 900;
}

.admin-module-shell h2 {
    margin: 0 0 .35rem;
    font-size: clamp(1.45rem, 3vw, 2.1rem);
    font-weight: 900;
    letter-spacing: 0;
}

.admin-module-shell p {
    margin: 0;
    color: var(--muted);
    max-width: 900px;
    font-size: 1rem;
    line-height: 1.5;
}

.ie-profile-panel {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 18px 38px rgba(15, 44, 70, .08);
}

.ie-profile-head {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 1.35rem 1.45rem;
    color: #fff;
    background:
        radial-gradient(circle at 82% 15%, rgba(255, 255, 255, .18), transparent 28%),
        linear-gradient(135deg, #046b37, #07884b 54%, #0aa868);
}

.ie-profile-mark {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.ie-profile-mark img {
    width: 92px;
    height: 92px;
    object-fit: contain;
    padding: .25rem;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 10px 22px rgba(0, 0, 0, .18);
}

.ie-profile-mark span,
.ie-profile-mark small {
    display: block;
    color: rgba(255, 255, 255, .82);
    font-weight: 800;
}

.ie-profile-mark strong {
    display: block;
    font-size: clamp(1.5rem, 4vw, 2.45rem);
    font-weight: 900;
    line-height: 1.03;
}

.ie-profile-codes {
    display: grid;
    grid-template-columns: repeat(3, minmax(112px, 1fr));
    gap: .75rem;
}

.ie-profile-codes div {
    min-width: 112px;
    padding: .78rem .9rem;
    color: #084526;
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 12px;
    box-shadow: 0 12px 24px rgba(0, 54, 26, .12);
}

.ie-profile-codes span {
    display: block;
    color: #577064;
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.ie-profile-codes strong {
    display: block;
    font-size: 1.25rem;
    font-weight: 900;
}

.ie-profile-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding: 1.15rem;
    background: linear-gradient(180deg, #f8fbfd, #fff);
}

.ie-data-card {
    padding: 1.15rem;
    background: #fbfdff;
    border: 1px solid #dce8f2;
    border-radius: 14px;
    box-shadow: 0 10px 22px rgba(15, 44, 70, .045);
}

.ie-section-title {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .85rem;
}

.ie-section-title i {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: #08703b;
    background: #e4f6ed;
    border-radius: 12px;
    font-size: 1.25rem;
}

.ie-section-title h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 900;
}

.ie-data-grid {
    display: grid;
    grid-template-columns: minmax(128px, .42fr) 1fr;
    gap: .65rem 1rem;
    margin: 0;
}

.ie-data-grid dt {
    color: #52677b;
    font-weight: 800;
}

.ie-data-grid dd {
    margin: 0;
    color: #006b3d;
    font-weight: 900;
}

.ie-insignia-workspace {
    display: grid;
    justify-items: start;
    gap: .6rem;
    margin-top: 1rem;
}

.ie-insignia-preview {
    width: 132px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    padding: .5rem;
    background: #fff;
    border: 2px solid #4caf3d;
    border-radius: 4px;
    box-shadow: 0 10px 22px rgba(15, 44, 70, .08);
}

.ie-insignia-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.ie-change-btn {
    min-width: 132px;
    font-size: 1.05rem;
    font-weight: 900;
}

.ie-profile-actions {
    display: flex;
    justify-content: flex-end;
    padding: 0 1.15rem 1.15rem;
    background: linear-gradient(180deg, #fff, #f8fbfd);
}

.ie-edit-btn {
    min-width: 220px;
    padding: .8rem 1.45rem;
    font-size: 1.2rem;
    font-weight: 900;
    box-shadow: 0 12px 22px rgba(22, 126, 58, .22);
}

.institution-modal {
    border: 0;
    border-radius: 18px;
    overflow: hidden;
}

.institution-modal .modal-header {
    color: #fff;
    background:
        radial-gradient(circle at 90% 0%, rgba(255, 255, 255, .16), transparent 28%),
        linear-gradient(135deg, #007236, #13a65f);
}

.institution-modal .modal-header span {
    display: block;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
    opacity: .9;
}

.institution-modal .modal-header h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 900;
}

.institution-modal-note {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .75rem .9rem;
    margin-bottom: 1rem;
    color: #07543a;
    background: #e9f8ef;
    border: 1px solid #bfe8cf;
    border-radius: 10px;
    font-weight: 800;
}

.institution-modal .form-label {
    color: #18324a;
    font-weight: 800;
}

.siagie-admin-shell {
    overflow: hidden;
    background: #fff;
    border-left: 3px solid #007236;
    box-shadow: 0 10px 24px rgba(14, 45, 28, .08);
}

.siagie-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .45rem .75rem;
    color: #fff;
    background: #007236;
}

.siagie-heading > div {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: clamp(1.15rem, 2.8vw, 1.75rem);
    line-height: 1.1;
}

.siagie-heading i {
    color: #13a14f;
    font-size: 2.2rem;
}

.siagie-back,
.siagie-back:hover,
.siagie-back:focus {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem .7rem;
    color: #e8ff91;
    background: #10a24c;
    text-decoration: none;
    font-weight: 900;
}

.siagie-content {
    padding: 1rem 1.15rem;
}

.siagie-section-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .8rem;
}

.siagie-section-row h2 {
    margin: 0;
    color: #007585;
    font-size: 1.35rem;
    font-weight: 900;
}

.siagie-section-row::after {
    content: "";
    height: 1px;
    flex: 1;
    background: #c8d3d9;
}

.environment-board-title {
    margin: .25rem 0 .65rem;
    color: #111;
    font-weight: 900;
    text-align: center;
}

.siagie-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin-bottom: .65rem;
}

.siagie-tool-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: 36px;
    padding: .35rem .75rem;
    color: #fff;
    background: #057436;
    border: 1px solid #057436;
    text-decoration: none;
    font-weight: 900;
}

.siagie-tool-btn:hover,
.siagie-tool-btn:focus {
    color: #fff;
    background: #0b8d46;
}

.siagie-tool-btn i {
    color: #a4d63b;
    font-size: 1.1rem;
}

.environment-table-wrap {
    border: 1px solid #057436;
}

.environment-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
    color: #3d4540;
    font-size: .92rem;
}

.environment-table th {
    padding: .25rem .35rem;
    color: #fff;
    background: #056b32;
    border-right: 1px solid #fff;
    font-size: .86rem;
    line-height: 1.05;
    white-space: nowrap;
}

.environment-table td {
    padding: .28rem .4rem;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    vertical-align: middle;
}

.environment-table tbody tr:nth-child(even) {
    background: #dceee8;
}

.environment-table tbody tr:nth-child(odd) {
    background: #f8fbf9;
}

.environment-state {
    display: inline-flex;
    min-width: 84px;
    justify-content: center;
    padding: .16rem .45rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 900;
}

.environment-state.is-good {
    color: #056b32;
    background: #dbf5e8;
}

.environment-state.is-regular {
    color: #856404;
    background: #fff4c2;
}

.environment-state.is-bad {
    color: #a6192e;
    background: #ffe1e7;
}

.environment-actions {
    min-width: 92px;
    text-align: center;
    white-space: nowrap;
}

.admin-ie-submodules {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: flex-end;
    margin: 1rem 0;
    padding: .85rem 1rem .65rem;
    background: #fff;
    border: 2px solid #9aca38;
    border-radius: 8px;
    box-shadow: 0 12px 24px rgba(15, 44, 70, .05);
}

.admin-ie-submodules::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 1.35rem;
    width: 18px;
    height: 18px;
    background: #fff;
    border-left: 2px solid #9aca38;
    border-top: 2px solid #9aca38;
    transform: rotate(45deg);
}

.admin-ie-submodules a {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: 58px auto;
    justify-items: center;
    min-width: 86px;
    color: #071e12;
    text-decoration: none;
    font-size: .82rem;
    font-weight: 900;
    line-height: 1;
}

.admin-ie-submodules span {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    color: #fff;
    background: #007236;
    border-radius: 2px;
    font-size: 2.05rem;
    box-shadow: 0 10px 18px rgba(0, 114, 54, .12);
}

.admin-ie-submodules a.active span,
.admin-ie-submodules a:hover span,
.admin-ie-submodules a:focus span {
    background: #0d8a46;
    box-shadow: 0 12px 20px rgba(0, 114, 54, .22);
}

.school-year-submodules {
    justify-content: flex-start;
    gap: 1.55rem;
}

.school-year-submodules a {
    min-width: 86px;
}

.academic-year-table th,
.academic-year-table td {
    white-space: nowrap;
}

.academic-year-status-icon {
    width: 26px;
    height: 26px;
    display: inline-grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(180deg, #83c4ff, #1c83e7);
    border: 2px solid #91d6ff;
    border-radius: 50%;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .16), 0 1px 3px rgba(0, 0, 0, .18);
    font-weight: 900;
}

.academic-year-status-icon.is-current {
    background: linear-gradient(180deg, #65df63, #17a53a);
    border-color: #a4efa0;
}

.academic-year-status-icon.is-inactive {
    background: linear-gradient(180deg, #ff958e, #e43d30);
    border-color: #ffc3bf;
}

.academic-year-status-icon.is-closed {
    background: linear-gradient(180deg, #83c4ff, #1c83e7);
    border-color: #91d6ff;
}

.academic-year-status-icon i {
    line-height: 1;
}

.phase-section-row {
    flex-wrap: wrap;
}

.phase-year-filter {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
    color: #064b29;
    font-weight: 900;
}

.phase-year-filter .form-select {
    min-width: 190px;
    border-color: #8ecaa7;
}

.phase-table td:nth-child(2) {
    font-weight: 700;
}

.phase-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: 1rem;
    color: #3d4540;
    font-size: .9rem;
}

.phase-legend .academic-year-status-icon {
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

.phase-modal-grid .form-label {
    color: #111827;
    font-weight: 900;
}

.phase-code-input {
    max-width: 86px;
    text-align: center;
    font-weight: 900;
}

.phase-check {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: .45rem;
    width: 100%;
    padding: .7rem .95rem;
    background: #eaf7f0;
    border: 1px solid #bbdfcc;
}

.phase-check .form-check-input {
    width: 1.2rem;
    height: 1.2rem;
    margin-left: 0;
}

.phase-required,
.phase-required-note span {
    color: #ef4444;
    font-weight: 900;
}

.phase-required-note {
    color: #1f2937;
    font-style: italic;
    font-weight: 800;
}

.siagie-tool-btn.is-danger {
    background: #b91c1c;
    border-color: #b91c1c;
}

.siagie-tool-btn.is-danger:hover,
.siagie-tool-btn.is-danger:focus {
    background: #dc2626;
}

.special-date-section-row {
    align-items: flex-end;
}

.special-date-filter {
    display: grid;
    grid-template-columns: minmax(150px, 190px) minmax(190px, 240px) minmax(220px, 1fr) auto;
    gap: .5rem;
    align-items: center;
    margin-left: auto;
    width: min(920px, 100%);
}

.special-date-filter .form-control,
.special-date-filter .form-select {
    border-color: #9fc7b5;
}

.special-date-alerts {
    margin: .5rem 0 1rem;
    padding: .8rem;
    background: linear-gradient(135deg, #f0fdf4, #eff6ff);
    border: 1px solid #9fd6bd;
}

.special-date-alert-head {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: .65rem;
    color: #064b29;
}

.special-date-alert-head i {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #fff;
    background: #057436;
    border-radius: 8px;
}

.special-date-alert-head strong,
.special-date-alert-head span {
    display: block;
}

.special-date-alert-head span {
    color: #47606b;
    font-size: .9rem;
}

.special-date-alert-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: .55rem;
}

.special-date-alert-item {
    display: grid;
    gap: .12rem;
    padding: .65rem .75rem;
    background: #fff;
    border-left: 4px solid #0ea5e9;
    box-shadow: 0 8px 16px rgba(15, 23, 42, .06);
}

.special-date-alert-item.is-today {
    border-left-color: #dc2626;
}

.special-date-alert-item span {
    color: #0f766e;
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.special-date-alert-item strong {
    color: #102033;
    line-height: 1.18;
}

.special-date-alert-item small {
    color: #607083;
}

.special-sync-panel {
    margin: .65rem 0 1rem;
    padding: .9rem;
    background: #fff;
    border: 1px solid #c7ddec;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .05);
}

.special-sync-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .75rem;
}

.special-sync-head strong,
.special-sync-head span {
    display: block;
}

.special-sync-head strong {
    color: #102033;
    font-weight: 900;
}

.special-sync-head span {
    color: #607083;
}

.special-sync-auto {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
    padding: .55rem .7rem;
    color: var(--brand-dark);
    background: var(--brand-soft);
    border: 1px solid var(--brand-line);
    font-weight: 800;
}

.special-date-official-note {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: .75rem;
    padding: .62rem .75rem;
    color: #064b29;
    background: #f0fdf4;
    border: 1px solid #9fd6bd;
    font-weight: 850;
}

.special-date-official-note i {
    color: #07833d;
    font-size: 1.1rem;
}

.special-sync-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: .65rem;
}

.special-sync-source {
    display: grid;
    gap: .35rem;
    padding: .75rem;
    border-left: 4px solid #64748b;
    background: #f8fafc;
}

.special-sync-source.is-ok {
    border-left-color: #16a34a;
}

.special-sync-source.is-sin-cambios {
    border-left-color: var(--brand-accent);
}

.special-sync-source.is-error {
    border-left-color: #dc2626;
}

.special-sync-source strong,
.special-sync-source span,
.special-sync-source small {
    display: block;
}

.special-sync-source span,
.special-sync-source small,
.special-sync-source p {
    color: #607083;
}

.special-sync-source p {
    margin: 0;
    font-size: .85rem;
}

.special-sync-source-state {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.special-sync-source-state span {
    padding: .12rem .5rem;
    color: #102033;
    background: #e2e8f0;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 900;
}

.special-sync-log {
    margin-top: .75rem;
}

.special-sync-log summary {
    cursor: pointer;
    color: var(--brand);
    font-weight: 900;
}

.special-date-table {
    min-width: 1120px;
}

.special-date-table td:nth-child(2) {
    min-width: 320px;
}

.special-date-group-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .85rem;
    margin: 1rem 0;
}

.special-date-group-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .75rem;
    min-height: 78px;
    padding: .9rem 1rem;
    color: var(--ink);
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--line);
    border-left: 5px solid var(--brand);
    border-radius: .85rem;
    box-shadow: 0 10px 22px rgba(15, 44, 70, .06);
}

.special-date-group-card:hover,
.special-date-group-card.is-active {
    color: var(--ink);
    border-color: #90d2aa;
    box-shadow: 0 16px 32px rgba(15, 44, 70, .1);
}

.special-date-group-card span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    color: var(--brand);
    background: var(--brand-soft);
    border-radius: .75rem;
    font-size: 1.2rem;
}

.special-date-group-card strong {
    font-weight: 900;
    line-height: 1.1;
}

.special-date-group-card small {
    color: var(--muted);
    font-weight: 800;
    white-space: nowrap;
}

.special-date-group-card.is-holiday-group {
    border-left-color: #b91c1c;
}

.special-date-group-card.is-holiday-group span {
    color: #991b1b;
    background: #fee2e2;
}

.special-date-group-card.is-civic-group {
    border-left-color: #2563eb;
}

.special-date-group-card.is-civic-group span {
    color: #1d4ed8;
    background: #dbeafe;
}

.special-date-group-card.is-environmental-group {
    border-left-color: #16a34a;
}

.special-date-group-card.is-environmental-group span {
    color: #166534;
    background: #dcfce7;
}

.special-date-group-panel {
    margin-top: 1rem;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: .85rem;
    box-shadow: 0 10px 22px rgba(15, 44, 70, .05);
}

.special-date-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    background: #f8fbf9;
    border-bottom: 1px solid var(--line);
}

.special-date-group-head > div {
    display: flex;
    align-items: center;
    gap: .85rem;
}

.special-date-group-head i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--brand);
    background: var(--brand-soft);
    border-radius: .8rem;
    font-size: 1.25rem;
}

.special-date-group-head h3 {
    margin: 0;
    color: var(--ink);
    font-size: 1.1rem;
    font-weight: 900;
}

.special-date-group-head span {
    color: var(--muted);
    font-weight: 800;
}

.special-date-group-panel.is-holiday-group .special-date-group-head i {
    color: #991b1b;
    background: #fee2e2;
}

.special-date-group-panel.is-civic-group .special-date-group-head i {
    color: #1d4ed8;
    background: #dbeafe;
}

.special-date-group-panel.is-environmental-group .special-date-group-head i {
    color: #166534;
    background: #dcfce7;
}

.special-date-empty {
    margin-top: 1rem;
    padding: 1.25rem;
    text-align: center;
    color: var(--muted);
    background: #fff;
    border: 1px dashed #b6c7d8;
    border-radius: .85rem;
    font-weight: 800;
}

.special-date-type {
    display: inline-flex;
    justify-content: center;
    min-width: 148px;
    padding: .18rem .45rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 900;
}

.special-date-type.is-holiday {
    color: #991b1b;
    background: #fee2e2;
}

.special-date-type.is-national-holiday {
    color: #fff;
    background: #b91c1c;
}

.special-date-type.is-regional-holiday {
    color: #064b29;
    background: #bbf7d0;
    border: 1px solid #22c55e;
}

.special-date-type.is-civic {
    color: var(--brand-dark);
    background: var(--brand-soft);
}

.special-date-type.is-environmental {
    color: #166534;
    background: #dcfce7;
}

.special-date-type.is-institutional {
    color: #6d4800;
    background: #fef3c7;
}

.special-date-modal .form-label {
    color: #111827;
    font-weight: 900;
}

.special-date-dashboard-alert {
    border-left-color: #0ea5e9;
}

.evaluation-period-table .period-subhead th {
    color: #fff;
    background: #08703b;
}

.siagie-date-input {
    max-width: 160px;
    margin: 0 auto;
    text-align: center;
    border-color: #9fc7b5;
    border-radius: 0;
}

.bootstrap-autocomplete-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.bootstrap-autocomplete-field {
    position: relative;
    width: 100%;
}

.bootstrap-autocomplete-input {
    padding-right: 2.25rem;
    background-image:
        linear-gradient(45deg, transparent 50%, #344054 50%),
        linear-gradient(135deg, #344054 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 50%,
        calc(100% - 12px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

.bootstrap-autocomplete-input:disabled {
    color: #98a2b3;
    background-color: #f2f4f7;
}

.bootstrap-autocomplete-menu {
    width: 100%;
    min-width: 100%;
    max-height: min(440px, 58vh);
    overflow-y: auto;
    margin-top: .2rem;
    padding: .25rem;
    border: 1px solid #b9d4ff;
    border-radius: 6px;
    box-shadow: 0 14px 28px rgba(15, 23, 42, .16);
    z-index: 1080;
}

.bootstrap-autocomplete-item {
    border-radius: 4px;
    font-weight: 700;
    white-space: nowrap;
}

.bootstrap-autocomplete-item mark {
    padding: 0 .05rem;
    color: inherit;
    background: #fff3bf;
    border-radius: 2px;
}

.bootstrap-autocomplete-item.active mark {
    color: #fff;
    background: rgba(255, 255, 255, .22);
}

.teacher-assignment-modal {
    overflow: hidden;
    border: 0;
    border-radius: 18px;
    box-shadow: 0 24px 58px rgba(5, 55, 27, .22);
}

.teacher-assignment-modal .modal-header {
    color: #fff;
    background: linear-gradient(90deg, #034f28, #007236, #0b8d46);
    border-bottom: 0;
}

.teacher-assignment-modal .modal-title {
    font-weight: 900;
}

.teacher-assignment-modal .btn-close {
    filter: invert(1) grayscale(100%);
    opacity: .9;
}

.assignment-modal-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.assignment-field {
    min-width: 0;
}

.assignment-field .form-label {
    margin-bottom: .35rem;
    color: #142235;
    font-weight: 800;
}

.assignment-teacher-field {
    grid-column: span 2;
}

.assignment-field-wide {
    grid-column: 1 / -1;
}

.assignment-search-button {
    min-width: 128px;
    font-weight: 800;
}

.assignment-helper {
    display: block;
    margin-top: .35rem;
    color: #667085;
    font-weight: 700;
}

.assignment-area-listbox {
    min-height: 176px;
    padding: .45rem;
    border-color: #badcc8;
    background: linear-gradient(180deg, #ffffff, #f7fbf8);
    font-weight: 800;
}

.assignment-area-listbox:focus {
    border-color: #0a8a45;
    box-shadow: 0 0 0 .22rem rgba(0, 114, 54, .18);
}

.assignment-area-listbox option {
    margin-bottom: .25rem;
    padding: .45rem .55rem;
    border-radius: .45rem;
}

.assignment-area-listbox option:checked {
    color: #fff;
    background: linear-gradient(90deg, #08703b, #0b8d46);
}

.assignment-area-help {
    color: #0a6335;
}

.assignment-teacher-meta {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: .35rem;
    color: #526071;
    font-size: .82rem;
}

.assignment-teacher-meta strong {
    color: #0a6335;
    font-weight: 900;
}

.assignment-picker-modal .monitoring-picker-table-shell {
    overflow-x: auto;
}

.assignment-workbench {
    border: 1px solid rgba(8, 112, 59, .16);
    border-radius: 18px;
    background: linear-gradient(180deg, #f7fcf9 0%, #edf7f1 100%);
    box-shadow: 0 20px 48px rgba(5, 55, 27, .12);
}

.assignment-window {
    overflow: hidden;
    border: 1px solid rgba(8, 112, 59, .12);
    border-radius: 18px;
    background: #fff;
}

.assignment-window-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1.05rem;
    border-bottom: 0;
    color: #fff;
    background: linear-gradient(135deg, #005a2d 0%, #007c3f 54%, #16a15a 100%);
}

.assignment-window-title {
    display: flex;
    align-items: center;
    gap: .8rem;
    min-width: 0;
}

.assignment-window-title::before {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 12px;
    background: rgba(255, 255, 255, .14);
    font-family: "bootstrap-icons";
    font-size: 1.25rem;
    content: "\F4D8";
}

.assignment-window-title strong {
    display: block;
    font-size: clamp(1rem, 1.5vw, 1.18rem);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.15;
}

.assignment-window-title span {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-top: .22rem;
    padding: .2rem .62rem;
    border-radius: 999px;
    color: #005a2d;
    background: rgba(255, 255, 255, .9);
    font-size: .76rem;
    font-weight: 900;
}

.assignment-close-button {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: 12px;
    color: #fff;
    background: rgba(255, 255, 255, .12);
    transition: background-color .18s ease, transform .18s ease;
}

.assignment-close-button:hover,
.assignment-close-button:focus {
    color: #005a2d;
    background: #fff;
    transform: translateY(-1px);
}

.assignment-window-body {
    padding: 1rem;
    background: linear-gradient(180deg, #f8fcfa 0%, #fff 48%);
}

.assignment-entry-grid {
    display: grid;
    grid-template-columns: 160px minmax(300px, 1.25fr) minmax(300px, 1.1fr) 170px;
    gap: .85rem 1rem;
    align-items: start;
    padding: 1rem;
    border: 1px solid #d6eadf;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 14px 32px rgba(8, 112, 59, .06);
}

.assignment-field {
    min-width: 0;
}

.assignment-entry-grid .form-label {
    margin-bottom: .32rem;
    color: #11243a;
    font-size: .79rem;
    font-weight: 900;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.assignment-entry-grid .form-control,
.assignment-entry-grid .form-select {
    min-height: 46px;
    border-color: #d4e3da;
    border-radius: 10px;
    background-color: #fff;
    color: #0d2236;
    font-weight: 800;
    box-shadow: 0 1px 2px rgba(13, 34, 54, .04);
}

.assignment-entry-grid .form-control:focus,
.assignment-entry-grid .form-select:focus {
    border-color: #08703b;
    box-shadow: 0 0 0 .2rem rgba(8, 112, 59, .13);
}

.assignment-teacher-field {
    grid-column: span 1;
}

.assignment-area-cell {
    grid-column: span 2;
}

.assignment-coordinator-field {
    grid-column: span 2;
}

.assignment-field-wide {
    grid-column: 1 / -1;
}

.assignment-search-button {
    min-width: 58px;
    border-color: #08703b;
    border-radius: 0 10px 10px 0;
    background: linear-gradient(135deg, #006934, #0a8f49);
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(8, 112, 59, .18);
}

.assignment-search-button:hover,
.assignment-search-button:focus {
    border-color: #005a2d;
    background: #005a2d;
}

.assignment-helper {
    display: block;
    margin-top: .34rem;
    color: #4d5f72;
    font-size: .78rem;
    font-weight: 800;
    line-height: 1.35;
}

.assignment-area-help {
    color: #006934;
}

.assignment-area-listbox {
    min-height: 132px;
    padding: .35rem;
}

.assignment-area-combobox {
    min-height: 46px;
    padding-right: 2.25rem;
    border-color: #d4e3da;
    border-radius: 10px;
    background:
        linear-gradient(45deg, transparent 50%, #0b5c33 50%) calc(100% - 18px) 50% / 6px 6px no-repeat,
        linear-gradient(135deg, #0b5c33 50%, transparent 50%) calc(100% - 12px) 50% / 6px 6px no-repeat,
        #fff;
    font-weight: 900;
}

.assignment-area-combobox:focus {
    border-color: #08703b;
    box-shadow: 0 0 0 .18rem rgba(8, 112, 59, .14);
}

.assignment-area-listbox option {
    padding: .38rem .45rem;
    border-bottom: 1px solid #d6eee7;
    font-weight: 800;
}

.assignment-area-listbox option:checked {
    color: #fff;
    background: linear-gradient(90deg, #08703b, #0b8d46);
}

.assignment-grid-shell {
    overflow: hidden;
    margin-top: 1rem;
    border: 1px solid #d6eadf;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 26px rgba(13, 34, 54, .06);
}

.assignment-desktop-table {
    width: 100%;
    min-width: 980px;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    color: #0d2236;
}

.assignment-desktop-table th {
    padding: .78rem .62rem;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
    color: #fff;
    background: #006934;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .03em;
    text-align: center;
    text-transform: uppercase;
}

.assignment-desktop-table td {
    padding: .78rem .68rem;
    border: 0;
    border-bottom: 1px solid #e3eee8;
    font-size: .9rem;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
}

.assignment-desktop-table tbody tr:nth-child(odd) td {
    background: #fff;
}

.assignment-desktop-table tbody tr:nth-child(even) td {
    background: #f7fbf8;
}

.assignment-desktop-table tbody tr:hover td {
    background: #edf8f2;
}

.assignment-desktop-table tbody tr.is-selected td {
    color: #0d2236;
    background: #eef9f2;
    border-top: 1px solid #08703b;
    border-bottom: 1px solid #08703b;
    box-shadow: none;
}

.assignment-desktop-table tbody tr.is-selected td:first-child {
    border-left: 4px solid #08703b;
    background: #08703b;
    color: #fff;
    font-weight: 900;
}

.assignment-desktop-table tbody tr.is-selected td:last-child {
    border-right: 1px solid #08703b;
}

.assignment-existing-badge {
    display: inline-flex;
    align-items: center;
    margin-left: .4rem;
    padding: .16rem .48rem;
    border: 1px solid #b9e7c9;
    border-radius: 999px;
    color: #075f32;
    background: #e7f7ed;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
    vertical-align: middle;
}

.assignment-locked-badge,
.assignment-generated-badge {
    display: inline-flex;
    align-items: center;
    margin-left: .4rem;
    padding: .16rem .48rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
    vertical-align: middle;
}

.assignment-locked-badge {
    border: 1px solid rgba(220, 53, 69, .24);
    background: #fff1f3;
    color: #b42335;
}

.assignment-generated-badge {
    border: 1px solid rgba(13, 110, 253, .24);
    background: #eef6ff;
    color: #0b5ed7;
}

.assignment-row-indicator {
    width: 38px;
}

.assignment-empty-row td {
    padding: 2.4rem 1rem;
    color: #526071;
    background: #fbfdfc !important;
    font-weight: 800;
}

.assignment-window-footer {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .9rem 1rem;
    border-top: 1px solid #d6eadf;
    background: #fff;
}

.assignment-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-width: 118px;
    min-height: 44px;
    padding: .48rem .82rem;
    border: 1px solid #cfe3d7;
    border-radius: 10px;
    color: #006934;
    background: #f7fbf8;
    font-weight: 900;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.assignment-action-button i {
    font-size: 1.22rem;
}

.assignment-action-button:hover,
.assignment-action-button:focus {
    color: #fff;
    background: #08703b;
    border-color: #08703b;
    transform: translateY(-1px);
}

.assignment-window-footer .assignment-action-button:first-child,
.assignment-window-footer .assignment-action-button:nth-child(2) {
    color: #fff;
    border-color: #08703b;
    background: linear-gradient(135deg, #006934, #0a8f49);
    box-shadow: 0 10px 22px rgba(8, 112, 59, .16);
}

.assignment-action-button.assignment-danger {
    color: #b42318;
    border-color: #f3c2bd;
    background: #fff7f6;
}

.assignment-action-button.assignment-danger:hover,
.assignment-action-button.assignment-danger:focus {
    color: #fff;
    background: #b42318;
}

.assignment-total-label {
    margin-left: auto;
    color: #2f7d32;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.15;
    text-align: right;
}

.assignment-counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 112px;
    min-height: 44px;
    padding: .48rem .9rem;
    border: 1px solid #b9e7c9;
    border-radius: 10px;
    color: #075f32;
    background: #e7f7ed;
    font-size: 1.1rem;
    font-weight: 900;
    text-align: center;
}

.grade-section-shell {
    border: 0;
    border-radius: 1rem;
    box-shadow: 0 16px 34px rgba(15, 44, 70, .08);
}

.grade-section-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 1.15rem;
    background: linear-gradient(135deg, #f8fbff, #eef8f1);
    border: 1px solid #dbe8ef;
    border-radius: .95rem;
}

.grade-section-title-row h2 {
    margin: 0 0 .35rem;
    color: #007585;
    font-size: clamp(1.8rem, 3.4vw, 2.55rem);
    font-weight: 900;
}

.grade-section-title-row p {
    margin: 0;
    color: var(--muted);
    font-size: 1.05rem;
    font-weight: 800;
}

.grade-section-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .55rem;
    min-width: min(100%, 460px);
}

.grade-section-filter .form-select {
    min-width: 210px;
    min-height: 44px;
    background-color: #fff;
    border-color: #d6e2f1;
    border-radius: .65rem;
    box-shadow: 0 4px 12px rgba(15, 44, 70, .04);
}

.grade-section-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-bottom: 1.2rem;
}

.grade-action-button {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-height: 46px;
    padding: .55rem 1.05rem;
    color: #fff;
    background: #0f766e;
    border: 1px solid rgba(15, 118, 110, .16);
    border-radius: .55rem;
    box-shadow: 0 8px 18px rgba(15, 118, 110, .16);
    font-weight: 900;
}

.grade-action-button i {
    font-size: 1.35rem;
}

.grade-action-button.is-report {
    background: #007346;
}

.grade-action-button.is-disabled,
.grade-action-button:disabled {
    color: #9ca3af;
    background: #e5e5e5;
    border-color: #e5e5e5;
    box-shadow: none;
    cursor: not-allowed;
}

.grade-report-menu {
    border: 1px solid #cde6d8;
    border-radius: 4px;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .12);
}

.grade-report-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-weight: 800;
}

.grade-section-table-wrap {
    overflow-x: auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: .9rem;
    box-shadow: 0 12px 28px rgba(15, 44, 70, .06);
}

.grade-section-table {
    width: 100%;
    min-width: 900px;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--ink);
    background: #fff;
    font-size: 1rem;
}

.grade-section-table th,
.grade-section-table td {
    padding: .95rem .9rem;
    border: 0;
    border-bottom: 1px solid #dde6ef;
    vertical-align: middle;
}

.grade-section-table thead th {
    color: #0f2744;
    background: #f8fafc;
    text-align: center;
    font-weight: 900;
    white-space: nowrap;
}

.grade-section-table tbody tr.grade-main-row:hover {
    background: #f8fbff;
}

.grade-section-table tbody tr.grade-main-row.is-open {
    background: #eef8f1;
    box-shadow: inset 4px 0 0 #0f766e;
}

.grade-section-table tbody td:first-child {
    width: 74px;
    text-align: center;
}

.grade-link-number {
    padding: 0;
    color: var(--brand-dark);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--brand-dark);
    font-weight: 800;
}

.grade-link-number:hover,
.grade-link-number:focus {
    color: #007346;
    border-bottom-color: #007346;
}

.grade-section-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-width: 92px;
    padding: .35rem .65rem;
    color: var(--brand-dark);
    background: var(--brand-soft);
    border: 1px solid var(--brand-line);
    border-radius: 999px;
    font-weight: 800;
}

.grade-section-count strong {
    font-size: 1rem;
    font-weight: 900;
}

.grade-section-count small {
    color: #52616d;
    font-size: .76rem;
    font-weight: 800;
}

.grade-section-count i,
.grade-section-actions i {
    color: #007346;
    font-size: 1.15rem;
}

.grade-section-actions {
    text-align: center;
    white-space: nowrap;
}

.grade-section-actions .btn {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    margin: 0 .1rem;
    color: #007346;
    background: #f1fbf6;
    border: 1px solid #d3f1df;
    border-radius: .5rem;
    text-decoration: none;
}

.grade-section-actions .btn:hover,
.grade-section-actions .btn:focus {
    color: #fff;
    background: #007346;
    border-color: #007346;
}

.grade-section-actions .btn:hover i,
.grade-section-actions .btn:focus i {
    color: #fff;
}

.grade-section-actions .btn.text-danger {
    color: #dc3545 !important;
    background: #fff5f5;
    border-color: #ffd4d8;
}

.grade-section-actions .btn.text-danger i {
    color: #dc3545;
}

.grade-section-actions .btn.text-danger:hover,
.grade-section-actions .btn.text-danger:focus {
    color: #fff !important;
    background: #dc3545;
    border-color: #dc3545;
}

.grade-section-actions .btn.text-danger:hover i,
.grade-section-actions .btn.text-danger:focus i {
    color: #fff;
}

.grade-section-detail-row > td {
    padding: 0 1rem 1rem;
    background: #f8fafc;
    border-bottom: 1px solid #cbd9e6;
}

.grade-section-detail {
    padding: .95rem;
    background: #fff;
    border: 1px solid #dbe4ef;
    border-radius: .85rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
}

.grade-section-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .85rem;
    margin-bottom: .85rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid #edf2f7;
}

.grade-section-detail-head strong,
.grade-section-detail-head span {
    display: block;
}

.grade-section-detail-head strong {
    font-weight: 900;
}

.grade-section-detail-head span {
    color: var(--muted);
    font-size: .9rem;
}

.grade-classroom-table {
    width: 100%;
    min-width: 980px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid #dbe4ef;
    border-radius: .65rem;
}

.grade-classroom-table th,
.grade-classroom-table td {
    padding: .75rem .8rem;
    border-bottom: 1px solid #e2e8f0;
}

.grade-classroom-table thead th {
    color: #10243d;
    background: #eef6ff;
    text-align: center;
    font-size: .9rem;
    font-weight: 900;
}

.grade-classroom-table tbody tr:last-child td {
    border-bottom: 0;
}

.grade-classroom-table tbody tr:hover {
    background: #fbfdff;
}

.grade-classroom-actions {
    text-align: center;
    white-space: nowrap;
}

.grade-classroom-actions .btn {
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: .45rem;
    text-decoration: none;
}

.grade-classroom-pager {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .75rem;
    padding-top: .8rem;
    color: var(--muted);
    font-size: .9rem;
}

.classroom-form {
    padding: 1rem;
    background: #f4fbf7;
    border: 1px solid #cde6d8;
}

.classroom-form .form-label {
    font-weight: 900;
}

.classroom-modal-table {
    min-width: 760px;
}

.grade-areas-summary {
    display: flex;
    gap: .9rem;
    align-items: center;
    padding: .9rem 1rem;
    border: 1px solid #cde6d8;
    background: #f4fbf7;
}

.grade-areas-summary i {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: #fff;
    background: #08703b;
    border-radius: 4px;
    font-size: 1.35rem;
}

.grade-areas-summary strong {
    display: block;
    color: #083b23;
    font-weight: 900;
}

.grade-areas-summary span {
    color: #52616d;
    font-size: .9rem;
}

.grade-areas-table {
    width: 100%;
    min-width: 880px;
    border-collapse: collapse;
    background: #fff;
    color: #001427;
}

.grade-area-list-modal {
    border: 0;
    border-radius: 6px;
    overflow: hidden;
}

.grade-area-list-head {
    color: #fff;
    background: #08703b;
    border: 0;
    padding: 1.35rem 1.75rem;
}

.grade-area-list-head h5 {
    font-size: 1.35rem;
    font-weight: 900;
}

.grade-area-list-modal .modal-body {
    padding: 1.9rem;
}

.grade-area-meta {
    margin-bottom: 1.4rem;
    color: #2b2f36;
}

.grade-area-meta span,
.grade-area-meta strong {
    display: block;
}

.grade-area-meta strong {
    margin-top: .35rem;
    color: #222;
    font-size: 1.05rem;
    font-weight: 500;
}

.grade-areas-table th,
.grade-areas-table td {
    padding: 1rem .9rem;
    border: 1px solid #bfbfbf;
    vertical-align: middle;
}

.grade-areas-table thead th {
    background: #fff;
    text-align: center;
    font-weight: 900;
}

.grade-areas-table tbody tr.is-locked {
    color: #667085;
    background: #f3f4f6;
}

.grade-area-lock {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-left: .75rem;
    padding: .12rem .45rem;
    color: #5f6368;
    background: #e5e7eb;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.grade-area-count {
    display: inline-block;
    min-width: 1.5rem;
    text-align: right;
}

.grade-area-eye,
.grade-area-sync {
    color: #08703b;
    text-decoration: none;
}

.grade-area-eye:disabled,
.grade-area-sync:disabled {
    color: #9ca3af;
    opacity: .75;
    pointer-events: none;
}

.grade-close-button {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    padding: .75rem 1.75rem;
    color: #fff;
    background: #08703b;
    border: 0;
    font-weight: 900;
    text-transform: uppercase;
}

.grade-close-button:hover {
    background: #075f34;
}

.grade-area-pill {
    display: inline-flex;
    justify-content: center;
    min-width: 82px;
    padding: .18rem .5rem;
    color: #056b32;
    background: #dff3e8;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 900;
}

.grade-area-pill.is-cross {
    color: #7a4a00;
    background: #fff1cc;
}

.environment-modal-head {
    color: #fff;
    background: linear-gradient(135deg, #08703b, #0aa75a);
}

.environment-modal-head span {
    display: block;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .78rem;
    font-weight: 900;
    opacity: .9;
}

.environment-modal-head h5 {
    margin: 0;
    font-weight: 900;
    text-transform: uppercase;
}

.environment-form-toolbar {
    display: flex;
    gap: .25rem;
    margin-bottom: .9rem;
}

.environment-furniture-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    border: 1px solid #d7e0e7;
}

.environment-furniture-card {
    border-right: 1px solid #d7e0e7;
    background: #fbfdfc;
}

.environment-furniture-card:last-child {
    border-right: 0;
}

.environment-furniture-card h3 {
    margin: 0;
    padding: .42rem .5rem;
    color: #fff;
    background: #056b32;
    font-size: .95rem;
    font-weight: 900;
    text-align: center;
}

.environment-furniture-card label {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: .5rem;
    align-items: center;
    margin: 0;
    padding: .35rem .5rem;
    font-weight: 800;
}

.convivencia-metrics {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.convivencia-tabs {
    gap: .5rem;
    flex-wrap: wrap;
}

.convivencia-tabs .nav-link {
    border: 1px solid #d8e4ef;
    color: #1c3858;
    font-weight: 800;
}

.convivencia-tabs .nav-link.active {
    background: var(--brand);
    border-color: var(--brand);
}

.conv-section-title {
    margin: 0 0 .8rem;
    color: #18324f;
    font-size: 1rem;
    font-weight: 900;
}

.conv-step-list {
    display: grid;
    gap: .75rem;
}

.conv-step {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: .75rem;
    align-items: start;
    padding: .9rem;
    border: 1px solid #d8e4ef;
    border-radius: 8px;
    background: #f8fbff;
}

.conv-step > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #fff;
    background: #198754;
    border-radius: 8px;
    font-weight: 900;
}

.conv-step strong,
.conv-note strong {
    display: block;
    color: #122033;
    font-weight: 900;
}

.conv-step p,
.conv-note p {
    margin: .25rem 0 0;
    color: var(--muted);
}

.conv-note {
    margin-bottom: .75rem;
    padding: .85rem;
    border: 1px solid #d8e4ef;
    border-left: 4px solid #10b7cf;
    border-radius: 8px;
    background: #fff;
}

.conv-note small {
    display: block;
    margin-top: .4rem;
    color: #51657e;
}

.conv-protection-callout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
    gap: 1rem;
    align-items: stretch;
    padding: 1rem;
    border: 1px solid #f1c7ce;
    border-left: 5px solid #dc3545;
    border-radius: 8px;
    background: #fff7f8;
}

.conv-protection-callout h3 {
    margin: .45rem 0;
    color: #7f1d1d;
    font-size: 1.05rem;
    font-weight: 900;
}

.conv-protection-callout p {
    margin: 0 0 .45rem;
    color: #34465d;
}

.conv-protection-callout > div:last-child {
    display: grid;
    align-content: center;
    gap: .35rem;
    padding: .85rem;
    border-radius: 8px;
    background: #fff;
}

.deadline-alert-panel {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid #f1c7ce;
    border-left: 5px solid #dc3545;
    border-radius: 8px;
    background: #fff7f8;
}

.deadline-alert-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    margin-bottom: .85rem;
}

.deadline-alert-head span {
    color: #9f1239;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.deadline-alert-head h2 {
    margin: .15rem 0 0;
    color: #7f1d1d;
    font-size: 1.15rem;
    font-weight: 900;
}

.deadline-alert-list {
    display: grid;
    gap: .65rem;
}

.deadline-alert-item,
.conv-deadline-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: .8rem;
    align-items: center;
    padding: .85rem;
    border: 1px solid #f0c2c7;
    border-radius: 8px;
    background: #fff;
}

.deadline-alert-item > i,
.conv-deadline-card > i {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #fee2e2;
    color: #b42337;
    font-size: 1.25rem;
}

.deadline-alert-item.is-soon > i,
.conv-deadline-card.is-soon > i {
    background: #fff6dd;
    color: #946200;
}

.deadline-alert-item strong,
.conv-deadline-card strong {
    display: block;
    color: #122033;
    font-weight: 900;
}

.deadline-alert-item span,
.conv-deadline-card p {
    margin: .12rem 0 0;
    color: #51657e;
}

.deadline-alert-item small,
.conv-deadline-card small {
    display: block;
    color: #6b7d92;
}

.deadline-status,
.conv-deadline-card > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #dc3545;
    color: #fff !important;
    padding: .3rem .65rem;
    font-weight: 900;
    white-space: nowrap;
}

.deadline-alert-item.is-soon .deadline-status,
.conv-deadline-card.is-soon > span {
    background: #f59f00;
    color: #172033 !important;
}

.fiscal-alert-table .btn-group {
    justify-content: flex-end;
    gap: .35rem;
}

.fiscal-alert-table .btn-group form {
    display: inline-flex;
}

.fiscal-admin-panel .panel-header {
    align-items: center;
}

.fiscal-admin-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(120px, 1fr));
    gap: .8rem;
}

.fiscal-admin-grid article {
    min-height: 78px;
    border: 1px solid #dce8f2;
    border-radius: 8px;
    padding: .8rem;
    background: #fbfdff;
}

.fiscal-admin-grid span {
    display: block;
    color: #51657e;
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.fiscal-admin-grid strong {
    display: block;
    margin-top: .35rem;
    color: #061b39;
    font-size: 1.7rem;
    line-height: 1;
}

.fiscal-detected-alerts-table td {
    vertical-align: top;
}

.fiscal-alert-type-filter {
    min-width: min(360px, 100%);
}

.fiscal-alert-type-filter .form-select {
    min-height: 42px;
}

.fiscal-source-pill {
    display: inline-flex;
    align-items: center;
    border: 1px solid #cfe1f3;
    border-radius: 999px;
    padding: .22rem .55rem;
    background: #eef6ff;
    color: #163b63;
    font-size: .78rem;
    font-weight: 800;
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .fiscal-admin-grid {
        grid-template-columns: repeat(3, minmax(120px, 1fr));
    }
}

@media (max-width: 640px) {
    .fiscal-admin-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.fiscal-coverage-panel .panel-body {
    padding-top: .25rem;
}

.fiscal-coverage-box {
    height: 100%;
    border: 1px solid #dce8f2;
    border-radius: 8px;
    padding: .85rem;
    background: #fbfdff;
}

.fiscal-coverage-box h3 {
    margin: 0 0 .65rem;
    font-size: .96rem;
    font-weight: 900;
    color: #10233f;
}

.fiscal-coverage-table {
    margin-bottom: 0;
}

.fiscal-coverage-table th {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: 0;
    color: #51657e;
}

.fiscal-coverage-table td {
    font-size: .86rem;
}

.conv-empty-state {
    display: grid;
    place-items: center;
    gap: .3rem;
    min-height: 150px;
    padding: 1rem;
    border: 1px dashed #b8cfeb;
    border-radius: 8px;
    color: #58708c;
    background: #f8fbff;
    text-align: center;
}

.conv-empty-state i {
    color: #198754;
    font-size: 2rem;
}

.filter-bar {
    display: flex;
    gap: .85rem;
    align-items: end;
    flex-wrap: wrap;
}

.filter-bar > div {
    min-width: 160px;
}

.filter-bar label {
    font-weight: 800;
    font-size: .8rem;
    text-transform: uppercase;
    color: #18324f;
}

.filter-wide {
    flex: 1 1 260px;
}

.form-hint {
    color: var(--muted);
    font-size: .94rem;
    margin: .45rem 0 0;
}

.enrollment-guardian-box {
    margin-top: .35rem;
    padding: 1rem;
    border: 1px solid #c7ead6;
    border-radius: 8px;
    background: linear-gradient(180deg, #f8fffb 0%, #ffffff 100%);
}

.enrollment-guardian-heading {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin-bottom: .9rem;
}

.enrollment-guardian-heading strong {
    display: block;
    color: var(--ink);
    font-size: 1rem;
}

.enrollment-guardian-heading small {
    color: var(--muted);
}

.enrollment-guardian-icon {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    color: #007a3d;
    background: #e9f8ef;
    border: 1px solid #bae4c8;
    font-size: 1.25rem;
    flex: 0 0 auto;
}

.enrollment-selected-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .85rem;
    min-height: 64px;
    padding: .8rem .95rem;
    border: 1px solid #d7e2ed;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(15, 35, 55, .05);
}

.enrollment-selected-card .fw-bold {
    color: var(--ink);
}

.enrollment-family-panel {
    margin-top: 1rem;
    border: 1px solid #d7e9df;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.enrollment-family-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding: .75rem .9rem;
    border-bottom: 1px solid #d7e9df;
    background: #f4fbf7;
}

.enrollment-family-toolbar strong {
    display: block;
    color: var(--ink);
}

.enrollment-family-toolbar small {
    display: block;
    color: var(--muted);
}

.enrollment-family-count {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: .2rem .6rem;
    border-radius: 999px;
    color: #006b37;
    background: #e7f7ed;
    border: 1px solid #bfe7ce;
    font-weight: 800;
    white-space: nowrap;
}

.enrollment-family-empty {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
    padding: .9rem;
    color: #5b6e86;
    background: #fff;
}

.enrollment-family-empty i {
    color: #007a3d;
    font-size: 1.15rem;
}

.enrollment-family-table-wrap {
    max-height: 260px;
}

.enrollment-family-table thead th {
    color: #12304e;
    background: #edf5fb;
    border-bottom-color: #cbdbe8;
    font-size: .82rem;
    text-transform: uppercase;
}

.enrollment-family-table tbody tr.is-guardian {
    background: #f2fbf6;
}

.enrollment-family-table tbody tr.is-guardian td {
    border-top-color: #bfe7ce;
    border-bottom-color: #bfe7ce;
}

.enrollment-family-badge {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: .18rem .55rem;
    border-radius: 999px;
    color: #4f5f70;
    background: #eef2f6;
    border: 1px solid #d8e0e8;
    font-size: .78rem;
    font-weight: 800;
}

.enrollment-family-badge.is-official {
    color: #006b37;
    background: #e7f7ed;
    border-color: #bfe7ce;
}

.enrollment-family-badge.is-pending {
    color: #8a4c00;
    background: #fff7e6;
    border-color: #ffd58a;
}

.enrollment-picker-modal .modal-header {
    background: #f6fbf8;
    border-bottom-color: #d7ecdf;
}

.modal-eyebrow {
    display: block;
    color: #007a3d;
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.enrollment-picker-intro {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: .9rem;
    padding: .75rem .85rem;
    border: 1px solid #d4eadc;
    border-radius: 8px;
    color: #244760;
    background: #f5fbf7;
}

.enrollment-picker-intro i {
    color: #007a3d;
    font-size: 1.1rem;
}

.enrollment-picker-table {
    border: 1px solid #dce7f1;
    border-radius: 8px;
    overflow: hidden;
}

.enrollment-picker-table thead th {
    color: #12304e;
    background: #edf5fb;
    border-bottom-color: #cbdbe8;
}

.guardian-dni-pill {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: .25rem .55rem;
    border: 1px solid #c7ead6;
    border-radius: 999px;
    color: #006b37;
    background: #eefaf2;
    font-weight: 800;
}

@media (max-width: 768px) {
    .enrollment-selected-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .enrollment-selected-card .btn {
        width: 100%;
    }
}

.student-cards-filter-panel,
.student-cards-filter-panel .panel-body,
.student-cards-filter-panel .filter-bar,
.student-cards-filter-panel .filter-bar > div {
    overflow: visible;
}

.student-cards-filter-panel {
    position: relative;
    z-index: 18;
}

.student-cards-filter-panel .bootstrap-autocomplete-field {
    z-index: 28;
}

.student-cards-filter-panel .bootstrap-autocomplete-menu {
    width: max-content;
    min-width: 100%;
    max-width: min(520px, 92vw);
    max-height: min(520px, 64vh);
}

.student-cards-toolbar {
    display: grid;
    grid-template-columns: repeat(3, minmax(160px, 1fr));
    gap: .85rem;
    margin: 1rem 0;
}

.student-cards-toolbar article {
    border: 1px solid #d8e6f1;
    border-radius: 8px;
    padding: .9rem 1rem;
    background: #fff;
}

.student-cards-toolbar span,
.student-cards-toolbar strong {
    display: block;
}

.student-cards-toolbar span {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.student-cards-toolbar strong {
    color: #102033;
    font-size: 1.35rem;
    line-height: 1.1;
}

.student-cards-print-panel .panel-header small {
    display: block;
    color: var(--muted);
    font-weight: 700;
}

.student-cards-sheet {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 1rem;
    padding: 1rem;
    background: #f2f7fb;
}

.student-card-empty {
    display: grid;
    place-items: center;
    gap: .35rem;
    min-height: 180px;
    border: 1px dashed #b9cedf;
    border-radius: 8px;
    color: #58708c;
    background: #fff;
    text-align: center;
}

.student-card-empty i {
    color: #087f3f;
    font-size: 2rem;
}

.student-id-card {
    position: relative;
    width: 100%;
    max-width: 386px;
    aspect-ratio: 85.6 / 53.98;
    overflow: hidden;
    border: 2px solid #1f58bf;
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 14px 32px rgba(16, 32, 51, .12);
    break-inside: avoid;
}

.student-id-card::after {
    content: "";
    position: absolute;
    right: -18px;
    bottom: -28px;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: #def7fa;
}

.student-id-card-header {
    position: relative;
    z-index: 1;
    display: grid;
    align-content: center;
    min-height: 24%;
    padding: .32rem .72rem .24rem;
    background: linear-gradient(90deg, #064191 0%, #00bcd7 55%, #078240 100%);
    color: #fff;
    text-transform: uppercase;
}

.student-id-card-header strong {
    overflow: hidden;
    font-size: .95rem;
    font-weight: 900;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 1px 1px 0 #061a2f;
}

.student-id-card-header span {
    display: block;
    overflow: hidden;
    font-size: .48rem;
    font-weight: 900;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-id-card-body {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 124px 1fr;
    gap: .58rem;
    align-items: start;
    padding: .56rem .62rem .28rem;
}

.student-id-card-qr {
    display: grid;
    place-items: center;
    width: 120px;
    height: 120px;
    padding: .2rem;
    border: 1px solid #b2bfcb;
    border-radius: 4px;
    background: #fff;
}

.student-id-card-qr svg {
    display: block;
    width: 100%;
    height: 100%;
}

.student-id-card-qr span {
    color: #6b7f92;
    font-size: .75rem;
    font-weight: 900;
}

.student-id-card-data {
    display: grid;
    gap: .15rem;
    min-width: 0;
}

.student-id-card-data span {
    display: block;
    color: #242b36;
    font-size: .48rem;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.student-id-card-data strong {
    display: block;
    color: #063cdd;
    font-size: .7rem;
    font-weight: 900;
    line-height: 1.08;
    overflow-wrap: anywhere;
    text-transform: uppercase;
}

.student-id-card-name strong {
    min-height: 1.36rem;
    max-height: 2rem;
    overflow: hidden;
    font-size: .68rem;
}

.student-id-card-name {
    padding-right: 48px;
}

.student-id-card-badge {
    position: absolute;
    right: .72rem;
    bottom: 1.72rem;
    z-index: 2;
    width: 46px;
    height: 54px;
    object-fit: contain;
}

.student-id-card-footer {
    position: absolute;
    right: .6rem;
    bottom: .42rem;
    left: calc(124px + 1.2rem);
    z-index: 2;
    color: #1f314d;
    font-size: .48rem;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
}

.staff-person-modal .modal-dialog {
    max-width: min(1180px, calc(100vw - 2rem));
}

.staff-person-modal-content {
    background: #f4f8f6;
    border: 0;
    border-radius: .85rem;
    box-shadow: 0 24px 70px rgba(18, 32, 51, .22);
    overflow: hidden;
}

.staff-person-modal-header {
    align-items: flex-start;
    background: linear-gradient(135deg, #f8fbff 0%, #f2fbf6 100%);
    border-bottom: 1px solid #d9eadf;
    padding: 1.15rem 1.45rem;
    position: relative;
}

.staff-person-modal-header::before {
    background: linear-gradient(90deg, #007236, #12a365, #2d6cdf);
    content: "";
    height: 4px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.staff-person-modal-header span {
    color: var(--brand);
    display: block;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.staff-person-modal-header .modal-title {
    color: var(--ink);
    font-size: 1.4rem;
    font-weight: 900;
    margin: .2rem 0 0;
}

.staff-person-modal .modal-body {
    background: #f4f8f6;
    padding: 1.25rem 1.45rem 1.4rem;
}

.staff-person-intro {
    align-items: center;
    background: #fff;
    border: 1px solid #cfe9da;
    border-left: 5px solid var(--brand);
    border-radius: .5rem;
    box-shadow: 0 10px 22px rgba(18, 32, 51, .05);
    display: grid;
    gap: .85rem;
    grid-template-columns: auto 1fr;
    margin-bottom: 1rem;
    padding: .95rem 1rem;
}

.staff-person-intro-icon {
    align-items: center;
    background: #e9f7ef;
    border: 1px solid #bfe8cf;
    border-radius: .5rem;
    color: var(--brand);
    display: inline-flex;
    font-size: 1.45rem;
    height: 48px;
    justify-content: center;
    width: 48px;
}

.staff-person-intro strong {
    color: var(--ink);
    display: block;
    font-size: 1rem;
    font-weight: 900;
}

.staff-person-intro p {
    color: var(--muted);
    font-size: .94rem;
    margin: .15rem 0 0;
}

.staff-person-section {
    background: #fff;
    border: 1px solid #d9e6ef;
    border-radius: .5rem;
    box-shadow: 0 12px 26px rgba(18, 32, 51, .045);
    padding: 1rem;
}

.staff-person-section + .staff-person-section {
    margin-top: 1rem;
}

.staff-person-section-title {
    align-items: center;
    border-bottom: 1px solid #e5edf3;
    display: flex;
    gap: .75rem;
    margin: -.1rem 0 1rem;
    padding-bottom: .8rem;
}

.staff-person-section-title span {
    align-items: center;
    background: #eef6ff;
    border: 1px solid #cfe1f7;
    border-radius: .5rem;
    color: #195aa6;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1.1rem;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.staff-person-section-title strong {
    color: var(--ink);
    display: block;
    font-size: 1rem;
    font-weight: 900;
}

.staff-person-section-title small {
    color: #607089;
    display: block;
    font-size: .86rem;
    margin-top: .1rem;
}

.staff-person-form-grid {
    display: grid;
    gap: .9rem 1rem;
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.staff-person-field {
    grid-column: span 4;
    min-width: 0;
}

.staff-person-field-wide {
    grid-column: 1 / -1;
}

.staff-person-field-two {
    grid-column: span 8;
}

.staff-person-field .form-label {
    color: #1e344f;
    font-size: .8rem;
    font-weight: 900;
    letter-spacing: .02em;
    margin-bottom: .35rem;
    text-transform: uppercase;
}

.staff-person-field .form-control,
.staff-person-field .form-select {
    background-color: #fbfdff;
    border-color: #d7e2ec;
    border-radius: .5rem;
    box-shadow: inset 0 1px 2px rgba(18, 32, 51, .04);
    min-height: 48px;
    padding-left: .9rem;
    padding-right: .9rem;
}

.staff-person-field .form-control::placeholder {
    color: #7b8798;
}

.staff-person-field .form-control:focus,
.staff-person-field .form-select:focus {
    border-color: #43b86c;
    box-shadow: 0 0 0 .2rem rgba(0, 114, 54, .14);
}

.staff-person-modal-footer {
    background: #fff;
    border-top: 1px solid #d9e6ef;
    gap: .65rem;
    padding: .9rem 1.45rem;
}

.staff-person-modal-footer .btn {
    align-items: center;
    border-radius: .5rem;
    display: inline-flex;
    font-weight: 700;
    gap: .35rem;
    justify-content: center;
    min-height: 42px;
    min-width: 112px;
}

.student-record-form .modal-body {
    background: #f2f8f5;
    padding: 0;
}

.student-record-tabs {
    background: #0f6f3f;
    border-bottom: 3px solid #0b5b33;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    overflow-x: auto;
}

.student-record-tab {
    align-items: center;
    border-right: 1px solid rgba(255, 255, 255, .28);
    color: #fff;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: .84rem;
    font-weight: 900;
    gap: .38rem;
    letter-spacing: 0;
    min-height: 44px;
    padding: .65rem .95rem;
    text-decoration: none;
    white-space: nowrap;
}

.student-record-tab:hover,
.student-record-tab.is-active {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

.student-record-tab.is-muted {
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .72);
    cursor: default;
}

.student-record-shell {
    display: grid;
    gap: 1rem;
    grid-template-columns: 280px minmax(0, 1fr);
    padding: 1rem;
}

.student-record-help {
    align-self: start;
    background: #fff;
    border: 1px solid #cfe7d7;
    border-left: 4px solid #087f3f;
    border-radius: 8px;
    color: #26445c;
    display: grid;
    gap: .7rem;
    padding: 1rem;
}

.student-record-help strong {
    color: var(--brand);
    display: block;
    font-weight: 900;
}

.student-record-help p {
    font-size: .88rem;
    margin: 0;
}

.student-record-main {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.student-record-section {
    background: #fff;
    border: 1px solid #0f8a4b;
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(18, 32, 51, .045);
    display: none;
    scroll-margin-top: 1rem;
}

.student-record-section.is-active {
    display: block;
}

.student-record-section-title {
    align-items: center;
    border-bottom: 1px solid #d8eadf;
    display: flex;
    gap: .75rem;
    padding: .85rem 1rem;
}

.student-record-section-title span {
    align-items: center;
    background: #eaf8ef;
    border: 1px solid #b9e5c8;
    border-radius: 8px;
    color: #087f3f;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1.05rem;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.student-record-section-title strong {
    color: var(--ink);
    display: block;
    font-size: 1rem;
    font-weight: 900;
}

.student-record-section-title small {
    color: #607089;
    display: block;
    font-size: .85rem;
    margin-top: .08rem;
}

.student-record-grid {
    display: grid;
    gap: .85rem 1rem;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    padding: 1rem;
}

.student-record-field {
    grid-column: span 4;
    min-width: 0;
}

.student-record-field-wide {
    grid-column: 1 / -1;
}

.student-record-field-two {
    grid-column: span 8;
}

.student-record-field .form-label {
    color: #1e344f;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: 0;
    margin-bottom: .35rem;
    text-transform: uppercase;
}

.student-record-field .form-control,
.student-record-field .form-select {
    background-color: #fbfdff;
    border-color: #d5e1ea;
    border-radius: 8px;
    box-shadow: inset 0 1px 2px rgba(18, 32, 51, .04);
    min-height: 46px;
}

.student-record-field .form-control:focus,
.student-record-field .form-select:focus {
    border-color: #43b86c;
    box-shadow: 0 0 0 .2rem rgba(0, 114, 54, .14);
}

.student-record-readonly {
    background: #f7fbf9;
    border: 1px dashed #b9dac6;
    border-radius: 8px;
    color: #4e6276;
    min-height: 46px;
    padding: .65rem .8rem;
}

.student-family-callout {
    align-items: center;
    background: #f7fbf9;
    border: 1px solid #cfe7d7;
    border-radius: 8px;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin: 1rem;
    padding: .95rem 1rem;
}

.student-family-callout strong {
    color: var(--ink);
    display: block;
    font-weight: 900;
}

.student-family-callout p {
    color: var(--muted);
    margin: .15rem 0 0;
}

.student-family-section {
    background: #fff;
    border-color: #087f3f;
    padding: 1rem;
}

.student-family-student {
    background: #c9c9c9;
    color: #162338;
    display: grid;
    gap: .15rem;
    margin: 0 0 1.15rem;
    padding: .45rem .55rem;
}

.student-family-student span {
    font-size: .78rem;
    font-weight: 800;
}

.student-family-student strong {
    font-size: .95rem;
    font-weight: 500;
}

.student-family-fieldset {
    margin-bottom: 1.25rem;
}

.student-family-main-grid,
.student-family-birth-grid,
.student-family-language-grid,
.student-family-complement-grid {
    align-items: end;
    display: grid;
    gap: 1rem 1.35rem;
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.student-family-main-grid > .student-line-field {
    grid-column: span 4;
}

.student-family-main-grid > .student-reniec-fingerprint {
    align-self: end;
    grid-column: span 1;
    justify-self: start;
}

.student-family-main-grid > .student-surname-mode,
.student-family-main-grid > .student-check-row,
.student-family-main-grid > .student-family-guardian {
    grid-column: 1 / -1;
}

.student-family-main-grid > .student-radio-row {
    grid-column: span 4;
}

.student-family-wide {
    grid-column: 1 / -1 !important;
}

.student-family-birth-grid > .student-line-field {
    grid-column: span 3;
}

.student-family-birth-grid > .student-family-country {
    grid-column: span 9;
}

.student-family-language-grid > .student-line-field {
    grid-column: 1 / -1;
}

.student-family-complement-grid > .student-line-field,
.student-family-complement-grid > .student-radio-row {
    grid-column: span 3;
}

.student-family-complement-grid > .student-family-wide {
    grid-column: 1 / span 8 !important;
}

.student-check-row {
    align-items: center;
    color: #2f3542;
    display: inline-flex;
    gap: .45rem;
    min-height: 34px;
}

.student-family-actions {
    align-items: center;
    display: flex;
    gap: .75rem;
    justify-content: flex-end;
    margin: 1rem 0 2rem;
}

.student-family-actions .btn {
    border-radius: 0;
    min-width: 112px;
}

.student-family-list {
    margin-top: 1rem;
}

.student-family-table {
    border: 1px solid #b8c9c0;
}

.student-family-table thead th {
    background: #007a3d;
    border-color: #b8c9c0;
    color: #fff;
    font-size: .75rem;
    text-align: center;
    text-transform: uppercase;
}

.student-family-table td {
    border-color: #cbd8d1;
    font-size: .84rem;
}

.student-family-table .btn {
    border-radius: 0;
    min-width: 44px;
}

.student-hidden-controls {
    display: none;
}

.student-personal-section {
    background: #fff;
    border-color: #087f3f;
    padding: 1rem;
}

.student-personal-fieldset {
    border: 1px solid #087f3f;
    border-radius: 8px;
    margin: 0 0 1.25rem;
    padding: 1rem 1rem 1.1rem;
}

.student-personal-fieldset legend {
    color: #007184;
    float: none;
    font-size: .98rem;
    font-weight: 900;
    margin: 0;
    padding: 0 .45rem;
    width: auto;
}

.student-info-fieldset {
    min-height: 0;
}

.student-personal-grid {
    align-items: start;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 220px);
}

.student-personal-main {
    display: grid;
    gap: 1rem;
    max-width: 760px;
}

.student-line-grid {
    align-items: end;
    display: grid;
    gap: 1rem;
}

.student-line-grid-doc {
    grid-template-columns: minmax(180px, 260px) 50px minmax(150px, 1fr) auto;
}

.student-line-field {
    display: grid;
    gap: .12rem;
    min-width: 0;
}

.student-line-field span {
    color: #8a8f96;
    font-size: .72rem;
    font-weight: 800;
}

.student-line-field span::after {
    color: #e3364d;
}

.student-line-field .form-control,
.student-line-field .form-select {
    border: 0;
    border-bottom: 1px solid #9aa1a8;
    border-radius: 0;
    box-shadow: none;
    min-height: 34px;
    padding: .25rem 0;
}

.student-line-field .form-control:focus,
.student-line-field .form-select:focus {
    border-bottom-color: #087f3f;
    box-shadow: 0 2px 0 rgba(0, 114, 54, .18);
}

.student-line-field-short {
    max-width: 240px;
}

.student-line-field-counter {
    max-width: 650px;
    position: relative;
}

.student-line-field-counter small {
    bottom: -1.2rem;
    color: #8a8f96;
    font-size: .7rem;
    position: absolute;
    right: .2rem;
}

.student-reniec-fingerprint {
    align-items: center;
    background: #e4e4e4;
    border: 0;
    border-radius: 0;
    color: #a7a7a7;
    display: inline-flex;
    height: 34px;
    justify-content: center;
    width: 50px;
}

.student-reniec-status {
    align-items: center;
    color: #168154;
    display: inline-flex;
    font-size: .78rem;
    gap: .4rem;
    line-height: 1.05;
}

.student-reniec-status i {
    font-size: 1.65rem;
}

.student-reniec-button {
    border-radius: 0;
    font-size: .78rem;
    font-weight: 900;
    min-height: 34px;
    white-space: nowrap;
}

.student-radio-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem .65rem;
}

.student-radio-row strong {
    color: #333;
    font-size: .92rem;
    font-weight: 600;
    margin-right: .25rem;
}

.student-radio-row label {
    align-items: center;
    color: #8a8f96;
    display: inline-flex;
    gap: .3rem;
    font-size: .86rem;
}

.student-radio-row span {
    color: #e3364d;
}

.student-surname-mode {
    margin-top: 1rem;
}

.student-inline-fields {
    align-items: end;
    display: grid;
    gap: 1rem 1.5rem;
    grid-template-columns: 170px minmax(170px, .8fr) minmax(140px, .7fr);
    margin-top: .5rem;
    max-width: 650px;
}

.student-photo-panel {
    align-items: center;
    align-self: start;
    background: #f8fcfa;
    border: 1px solid #cfe8dc;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    justify-content: center;
    justify-self: end;
    min-height: 260px;
    padding: .85rem;
    width: 100%;
}

.student-photo-placeholder {
    align-items: center;
    background: #fff;
    border: 1px dashed #c9d8d0;
    border-radius: 8px;
    color: #b8b8b8;
    display: flex;
    font-size: 7.4rem;
    height: 160px;
    justify-content: center;
    overflow: hidden;
    width: 100%;
}

.student-photo-placeholder i {
    line-height: 1;
    transform: translateY(8px);
}

.student-photo-panel .btn {
    border-radius: 0;
    font-size: .82rem;
    font-weight: 900;
    min-height: 36px;
    width: 100%;
}

.student-birth-grid {
    display: grid;
    gap: 1rem 1.35rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.student-birth-country {
    grid-column: span 3;
}

.student-language-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

.student-personal-actions {
    display: flex;
    gap: .75rem;
    justify-content: flex-end;
    margin-top: -.45rem;
}

.student-personal-actions .btn {
    border-radius: 0;
    font-weight: 900;
    min-width: 112px;
}

.student-domicile-section {
    background: #f5faf7;
    border-color: #0f7d43;
}

.student-domicile-student {
    background: #c9cbc9;
    color: #1b2b38;
    display: grid;
    gap: .15rem;
    margin: 1rem 1rem .2rem;
    padding: .45rem .6rem;
}

.student-domicile-student span {
    font-size: .78rem;
    font-weight: 800;
}

.student-domicile-student strong {
    font-size: .92rem;
    font-weight: 500;
}

.student-domicile-card,
.student-domicile-list {
    background: #fff;
    border: 1px solid #087f3f;
    border-radius: 4px;
    box-shadow: 0 10px 24px rgba(18, 32, 51, .045);
    margin: .2rem 1rem 1rem;
    padding: .9rem 1rem;
}

.student-domicile-title,
.student-domicile-list-title {
    align-items: center;
    display: flex;
    gap: .65rem;
    margin-bottom: .85rem;
}

.student-domicile-title span {
    align-items: center;
    background: #eaf8ef;
    border: 1px solid #b9e5c8;
    border-radius: 8px;
    color: #087f3f;
    display: inline-flex;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.student-domicile-title strong,
.student-domicile-list-title strong {
    color: #007184;
    display: block;
    font-weight: 900;
}

.student-domicile-title small,
.student-domicile-list-title small {
    color: var(--muted);
    display: block;
    font-size: .82rem;
}

.student-domicile-grid {
    display: grid;
    gap: 1rem 1.25rem;
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.student-domicile-field {
    grid-column: span 3;
    min-width: 0;
}

.student-domicile-field-sm {
    grid-column: span 3;
}

.student-domicile-field-wide {
    grid-column: span 6;
}

.student-domicile-spacer {
    grid-column: span 9;
}

.student-domicile-field .form-label {
    color: #7a7f86;
    font-size: .74rem;
    font-weight: 800;
    margin-bottom: .05rem;
}

.student-domicile-field .form-control,
.student-domicile-field .form-select {
    border: 0;
    border-bottom: 1px solid #9aa1a8;
    border-radius: 0;
    box-shadow: none;
    min-height: 38px;
    padding-left: 0;
}

.student-domicile-field .form-control:focus,
.student-domicile-field .form-select:focus {
    border-bottom-color: #087f3f;
    box-shadow: 0 2px 0 rgba(0, 114, 54, .2);
}

.student-domicile-actions {
    display: flex;
    gap: .55rem;
    justify-content: flex-end;
    margin-top: .95rem;
}

.student-domicile-actions .btn {
    border-radius: 0;
    font-weight: 800;
    min-width: 108px;
}

.student-domicile-table {
    border: 1px solid #cbd8d1;
}

.student-domicile-table thead th {
    background: #006b37;
    color: #fff;
    font-size: .78rem;
    text-align: center;
    text-transform: uppercase;
}

.student-domicile-table td {
    border-color: #cbd8d1;
    font-size: .86rem;
}

.student-domicile-table .btn {
    border-radius: 0;
    min-width: 44px;
}

.family-link-modal .modal-header {
    background: #f6fbf8;
    border-bottom-color: #d7ecdf;
}

.family-link-card {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .9rem 1rem;
    border: 1px solid #c7ead6;
    border-radius: 8px;
    background: linear-gradient(180deg, #f8fffb 0%, #ffffff 100%);
}

.family-link-icon {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 8px;
    color: #007a3d;
    background: #e9f8ef;
    border: 1px solid #bae4c8;
    font-size: 1.25rem;
    flex: 0 0 auto;
}

.family-link-card strong,
.family-official-toggle strong {
    display: block;
    color: var(--ink);
}

.family-link-card small,
.family-official-toggle small {
    display: block;
    color: var(--muted);
}

.family-student-picker {
    display: grid;
    gap: .7rem;
}

.family-student-picker .input-group-text {
    background: #f4fbf7;
    border-color: #d7e4ee;
    color: #007a3d;
}

.family-student-selected {
    align-items: center;
    background: #f8fffb;
    border: 1px solid #c7ead6;
    border-radius: 8px;
    display: flex;
    gap: .75rem;
    justify-content: space-between;
    padding: .75rem .85rem;
}

.family-student-selected strong,
.family-student-results-head strong {
    color: var(--ink);
    display: block;
}

.family-student-selected small {
    color: var(--muted);
    display: block;
}

.family-student-results {
    background: #fff;
    border: 1px solid #d7e4ee;
    border-radius: 8px;
    overflow: hidden;
}

.family-student-results-head {
    align-items: center;
    background: #f3f8fb;
    border-bottom: 1px solid #d7e4ee;
    display: flex;
    gap: .75rem;
    justify-content: space-between;
    padding: .65rem .85rem;
}

.family-student-results-head span {
    color: var(--muted);
    font-size: .86rem;
}

.family-student-results-table {
    max-height: 250px;
    overflow: auto;
}

.family-student-results-table th {
    background: #edf6fb;
    color: var(--ink);
    font-size: .78rem;
    text-transform: uppercase;
}

.family-student-results-table td strong,
.family-student-results-table td small {
    display: block;
}

.family-student-results-table td small {
    color: var(--muted);
}

.family-student-empty {
    color: var(--muted);
    padding: .9rem;
    text-align: center;
}

.family-official-toggle {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    width: 100%;
    padding: .85rem 1rem;
    border: 1px solid #d7e9df;
    border-radius: 8px;
    background: #f8fffb;
    cursor: pointer;
}

.family-kind-grid {
    display: grid;
    gap: .65rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.family-kind-card {
    align-items: center;
    background: #fff;
    border: 1px solid #d7e4ee;
    border-radius: 8px;
    cursor: pointer;
    display: grid;
    gap: .35rem;
    min-height: 96px;
    padding: .75rem .65rem;
    place-items: center;
    text-align: center;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.family-kind-card .form-check-input {
    margin: 0;
}

.family-kind-card span {
    align-items: center;
    background: #eefaf2;
    border: 1px solid #c7ead6;
    border-radius: 999px;
    color: #007a3d;
    display: inline-flex;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.family-kind-card strong {
    color: var(--ink);
    font-size: .92rem;
}

.family-kind-card:has(.form-check-input:checked) {
    background: #f2fbf6;
    border-color: #43b86c;
    box-shadow: 0 0 0 .18rem rgba(0, 114, 54, .12);
}

.family-kind-card:has(.form-check-input:checked) strong {
    color: #006b37;
}

@media (max-width: 900px) {
    .student-record-shell {
        grid-template-columns: 1fr;
    }

    .student-record-field,
    .student-record-field-two,
    .student-record-field-wide {
        grid-column: 1 / -1;
    }

    .student-family-callout {
        align-items: stretch;
        flex-direction: column;
    }

    .student-personal-grid,
    .student-line-grid-doc,
    .student-inline-fields,
    .student-birth-grid {
        grid-template-columns: 1fr;
    }

    .student-birth-country {
        grid-column: 1 / -1;
    }

    .student-photo-panel {
        justify-self: stretch;
        min-height: 0;
    }

    .student-photo-placeholder {
        font-size: 8rem;
        height: 160px;
    }

    .student-personal-actions {
        flex-direction: column;
    }

    .student-domicile-field,
    .student-domicile-field-sm,
    .student-domicile-field-wide,
    .student-domicile-spacer {
        grid-column: 1 / -1;
    }

    .student-domicile-actions {
        flex-direction: column;
    }

    .student-family-main-grid,
    .student-family-birth-grid,
    .student-family-language-grid,
    .student-family-complement-grid {
        grid-template-columns: 1fr;
    }

    .student-family-main-grid > *,
    .student-family-birth-grid > *,
    .student-family-language-grid > *,
    .student-family-complement-grid > *,
    .student-family-complement-grid > .student-family-wide,
    .student-family-birth-grid > .student-family-country {
        grid-column: 1 / -1 !important;
    }

    .student-family-actions {
        flex-direction: column;
    }

    .staff-person-field {
        grid-column: span 6;
    }

    .staff-person-field-wide,
    .staff-person-field-two {
        grid-column: 1 / -1;
    }
}

.table {
    margin-bottom: 0;
}

.table thead th {
    background: #eef5fb;
    color: #1c3858;
    font-weight: 900;
    border-bottom: 1px solid #c9d9e8;
    white-space: nowrap;
}

.table td {
    vertical-align: middle;
}

.pdf-panel {
    overflow: hidden;
}

.pdf-preview-shell {
    min-height: min(72vh, 760px);
    background: #f7fafc;
    border-top: 1px solid #d8e4ef;
    display: flex;
    flex-direction: column;
}

.pdf-preview-toolbar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .75rem;
    background: #fff;
    border-bottom: 1px solid #d8e4ef;
}

.pdf-preview-page {
    color: #1c3858;
    font-size: .85rem;
    font-weight: 800;
    white-space: nowrap;
}

.pdf-preview-stage {
    position: relative;
    flex: 1;
    height: min(66vh, 700px);
    min-height: 520px;
    overflow: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 1rem;
    background:
        linear-gradient(45deg, rgba(28, 56, 88, .035) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(28, 56, 88, .035) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(28, 56, 88, .035) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(28, 56, 88, .035) 75%),
        #eef4f9;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    background-size: 16px 16px;
}

.pdf-preview-canvas {
    background: #fff;
    border: 1px solid #d8e4ef;
    border-radius: 4px;
    box-shadow: 0 14px 32px rgba(15, 23, 42, .18);
}

.pdf-preview-status {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    align-content: center;
    gap: .75rem;
    padding: 2rem;
    color: var(--muted);
    text-align: center;
    background: rgba(247, 250, 252, .92);
}

.pdf-preview-status i {
    font-size: 2.5rem;
}

@media (max-width: 767.98px) {
    .pdf-preview-stage {
        min-height: 460px;
        padding: .75rem;
    }
}

.commitment-modal {
    border: 0;
    overflow: hidden;
}

.commitment-modal-header {
    background: linear-gradient(135deg, var(--brand-dark), var(--brand), var(--brand-2));
    color: #fff;
    border: 0;
    padding: 1rem 1.25rem;
}

.commitment-modal-header .btn-close {
    filter: invert(1) grayscale(100%);
    opacity: .9;
}

.modal-eyebrow {
    display: block;
    font-size: .75rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .86;
}

.commitment-modal-body {
    background: #f4f8fb;
}

.commitment-file-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.commitment-file-control {
    border: 1px solid #d5e5dc;
    border-radius: 8px;
    display: grid;
    gap: 8px;
    padding: 12px;
}

.commitment-file-control > span {
    color: #153d2a;
    font-weight: 700;
}

.commitment-evidence-thumbnail {
    border: 1px solid #c8ddd1;
    border-radius: 6px;
    display: block;
    height: 48px;
    object-fit: cover;
    width: 64px;
}

@media (max-width: 767px) {
    .commitment-file-grid {
        grid-template-columns: 1fr;
    }
}

.act-form-section {
    background: #fff;
    border: 1px solid #d9e5ef;
    border-radius: .75rem;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 8px 18px rgba(15, 44, 70, .05);
}

.act-section-title {
    display: flex;
    gap: .7rem;
    align-items: center;
    padding-bottom: .8rem;
    margin-bottom: .9rem;
    border-bottom: 1px solid #e4edf5;
}

.act-section-title i {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: .7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-dark);
    background: var(--brand-soft);
    font-size: 1.1rem;
}

.act-section-title strong {
    display: block;
    font-size: 1rem;
    color: #102033;
}

.act-section-title span {
    display: block;
    color: var(--muted);
    font-size: .86rem;
}

.norma-selector {
    border: 1px solid #d8e4ef;
    border-radius: 8px;
    background: #f8fbff;
    overflow: hidden;
}

.norma-selector-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1rem;
    background: #fff;
    border-bottom: 1px solid #d8e4ef;
}

.norma-selector-head label {
    color: #122033;
    font-weight: 900;
}

.norma-selector-head small {
    display: block;
    color: var(--muted);
    margin-top: .15rem;
}

.norma-check-table thead th {
    background: var(--brand-dark);
    color: #fff;
    border-color: #023c1f;
    font-size: .92rem;
    letter-spacing: 0;
}

.norma-check-table td {
    border-color: #d8e4ef;
}

.norma-check-table tbody tr {
    cursor: pointer;
    transition: background-color .16s ease, box-shadow .16s ease;
}

.norma-check-table tbody tr:hover {
    background: var(--brand-soft);
}

.norma-check-table tbody tr.is-suggested {
    background: #f4fbf6;
}

.norma-check-table tbody tr.is-selected {
    background: #e9f8ef;
    box-shadow: inset 4px 0 0 #198754;
}

.norma-check-table strong {
    display: block;
    color: #122033;
    line-height: 1.15;
}

.norma-check-table small {
    display: block;
    color: var(--muted);
    margin-top: .18rem;
}

.norma-number-col {
    width: 82px;
}

.norma-check-col {
    width: 112px;
}

.norma-check-table .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
    border-color: #55708d;
}

.norma-check-table .form-check-input:checked {
    background-color: #198754;
    border-color: #198754;
}

.norma-selector .js-act-situation-extra {
    border-radius: 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    background: #fff;
}

.evaluation-table {
    max-height: 70vh;
}

.evaluation-table table {
    min-width: 1200px;
}

.evaluation-table th,
.evaluation-table td {
    min-width: 220px;
}

.evaluation-grade-cell {
    min-width: 300px;
}

.conclusion-suggestion-bar {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
    margin: .15rem 0 .35rem;
}

.conclusion-suggestion-bar .btn {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem .5rem;
    line-height: 1.2;
}

.conclusion-option-select {
    margin-bottom: .3rem;
}

.conclusion-suggestion-status {
    display: block;
    min-height: 1rem;
    margin: -.15rem 0 .3rem;
    color: var(--muted);
    font-size: .76rem;
    font-weight: 700;
    line-height: 1.2;
}

.conclusion-suggestion-status.is-required {
    color: #a15c07;
}

.conclusion-length-counter {
    display: block;
    margin-top: .2rem;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 700;
    text-align: right;
}

.evaluation-table .student-col {
    min-width: 260px;
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 2;
}

.evaluation-table thead .student-col {
    background: #eef5fb;
    z-index: 3;
}

.auxiliary-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    gap: .85rem;
}

.auxiliary-summary-card {
    background: #fff;
    border: 1px solid var(--line);
    border-left: 4px solid var(--brand);
    border-radius: .65rem;
    padding: .9rem 1rem;
    box-shadow: 0 10px 24px rgba(15, 44, 70, .05);
}

.auxiliary-summary-card span,
.auxiliary-summary-card small {
    display: block;
    color: var(--muted);
    font-weight: 700;
}

.auxiliary-summary-card strong {
    display: block;
    color: var(--ink);
    font-size: 1.65rem;
    line-height: 1.1;
    margin: .15rem 0;
}

.auxiliary-summary-card.level-ad { border-left-color: #087f5b; }
.auxiliary-summary-card.level-a { border-left-color: #1d8cf8; }
.auxiliary-summary-card.level-b { border-left-color: #f0ad4e; }
.auxiliary-summary-card.level-c { border-left-color: #dc3545; }

.auxiliary-session-form .panel-header small {
    display: block;
    color: var(--muted);
    font-weight: 700;
    margin-top: .2rem;
}

.auxiliary-session-grid {
    display: grid;
    grid-template-columns: 150px minmax(240px, 1fr) 150px minmax(240px, 1fr);
    gap: .85rem;
    align-items: end;
}

.auxiliary-field-wide {
    min-width: 0;
}

.auxiliary-capacity-box {
    border: 1px solid #d7e7dc;
    border-radius: .65rem;
    background: #f8fcfa;
    padding: .9rem;
}

.auxiliary-capacity-head {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    color: var(--ink);
    margin-bottom: .65rem;
}

.auxiliary-capacity-head span {
    color: var(--muted);
    font-size: .88rem;
    font-weight: 700;
}

.auxiliary-capacity-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: .45rem .75rem;
}

.auxiliary-performance-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: .55rem;
    max-height: 260px;
    overflow: auto;
    padding-right: .25rem;
}

.auxiliary-capacity-option,
.auxiliary-performance-option {
    margin: 0;
    padding: .55rem .65rem .55rem 2.1rem;
    border: 1px solid #dce8df;
    border-radius: .55rem;
    background: #fff;
}

.auxiliary-performance-option {
    line-height: 1.35;
}

.auxiliary-formative-grid {
    display: grid;
    grid-template-columns: minmax(300px, 1.2fr) minmax(240px, .9fr) minmax(240px, .9fr);
    gap: .85rem;
}

.auxiliary-student-table {
    max-height: 72vh;
}

.auxiliary-student-table table {
    min-width: 1540px;
}

.auxiliary-student-table th,
.auxiliary-student-table td {
    min-width: 150px;
}

.auxiliary-student-table tbody tr.is-active td,
.auxiliary-student-table tbody tr:focus-within td {
    background: #fbfffb;
    border-top-color: #78d46f;
    border-bottom-color: #78d46f;
    box-shadow: inset 0 2px 0 #78d46f, inset 0 -2px 0 #78d46f;
}

.auxiliary-student-table tbody tr.is-active td:first-child,
.auxiliary-student-table tbody tr:focus-within td:first-child {
    border-left-color: #78d46f;
    box-shadow: inset 2px 0 0 #78d46f, inset 0 2px 0 #78d46f, inset 0 -2px 0 #78d46f;
}

.auxiliary-student-table tbody tr.is-active td:last-child,
.auxiliary-student-table tbody tr:focus-within td:last-child {
    border-right-color: #78d46f;
    box-shadow: inset -2px 0 0 #78d46f, inset 0 2px 0 #78d46f, inset 0 -2px 0 #78d46f;
}

.auxiliary-student-table .student-col {
    min-width: 280px;
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 2;
}

.auxiliary-student-table thead .student-col {
    background: #eef5fb;
    z-index: 3;
}

.auxiliary-student-table tbody tr.is-active .student-col,
.auxiliary-student-table tbody tr:focus-within .student-col {
    background: #fbfffb;
}

.auxiliary-student-table .student-col small,
.auxiliary-session-list small,
.auxiliary-consolidated-cell small {
    display: block;
    color: var(--muted);
    font-weight: 700;
}

.auxiliary-session-list .auxiliary-session-selected td {
    border-top-color: #78d46f;
    border-bottom-color: #78d46f;
    box-shadow: inset 0 2px 0 #78d46f, inset 0 -2px 0 #78d46f;
}

.auxiliary-consolidated-cell {
    text-align: center;
}

.auxiliary-consolidated-cell strong {
    display: inline-grid;
    place-items: center;
    min-width: 38px;
    min-height: 32px;
    border-radius: .5rem;
    color: #fff;
    background: var(--brand);
}

.transversal-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: .85rem;
    margin-top: 1rem;
}

.transversal-summary-card {
    padding: 1rem;
    background: #fff;
    border: 1px solid #d7e5ef;
    border-radius: 14px;
    box-shadow: 0 10px 22px rgba(15, 44, 70, .055);
}

.transversal-summary-card span,
.transversal-summary-card small {
    display: block;
    color: var(--muted);
}

.transversal-summary-card span {
    min-height: 2.4rem;
    color: #18324f;
    font-weight: 900;
    line-height: 1.15;
}

.transversal-summary-card strong {
    display: block;
    margin-top: .35rem;
    color: #006b3d;
    font-size: 2rem;
    line-height: 1;
}

.transversal-summary-card div {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
    margin-top: .7rem;
}

.transversal-summary-card b {
    padding: .18rem .55rem;
    color: #0e2f4c;
    background: #eef5fb;
    border-radius: 999px;
    font-size: .82rem;
}

.transversal-entry-table table {
    min-width: 920px;
}

.transversal-entry-table th:not(.student-col),
.transversal-entry-table td:not(.student-col) {
    min-width: 300px;
}

.sirgila-sheet {
    max-height: 68vh;
    border-top: 1px solid var(--line);
}

.sirgila-sheet table {
    min-width: 1280px;
    font-size: .82rem;
}

.sirgila-sheet th,
.sirgila-sheet td {
    text-align: center;
    white-space: nowrap;
}

.sirgila-sheet .table-title th {
    background: #dff2e8;
    color: #10351f;
    letter-spacing: .03em;
}

.sirgila-sheet .student-col {
    min-width: 280px;
    text-align: left;
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
}

.sirgila-sheet thead .student-col {
    background: #eef5fb;
    z-index: 4;
}

.literal-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 1.75rem;
    border-radius: .5rem;
    font-weight: 900;
    background: #f1f5f9;
    color: #64748b;
}

.literal-AD { background: #dff8ea; color: #08713d; }
.literal-A { background: #e5f0ff; color: #0b5ed7; }
.literal-B { background: #fff3cd; color: #8a5c00; }
.literal-C { background: #ffe1e6; color: #b42337; }

.competency-legend {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: .45rem .8rem;
    padding: 1rem;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: .86rem;
}

.progress-indicator-note {
    border: 1px solid #f3bd2f;
    border-left: 5px solid #f0ad00;
    border-radius: .65rem;
    background: #fff7df;
    color: #1b2b3f;
    padding: .8rem 1rem;
    font-weight: 700;
}

.progress-cg-title {
    display: block;
    margin: -.15rem 0 .6rem;
    padding-bottom: .45rem;
    border-bottom: 2px solid #10723f;
    color: #000;
    font-size: 1.45rem;
    font-weight: 900;
    text-align: center;
    letter-spacing: .02em;
}

.progress-indicator-note small {
    display: block;
    margin-top: .25rem;
    color: #6b5b25;
    font-weight: 600;
}

.progress-report-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: start;
}

.progress-report-grid.is-secondary {
    grid-template-columns: 1fr;
}

.progress-table-panel,
.progress-chart-panel,
.progress-area-panel {
    overflow: hidden;
}

.progress-bimester-table-wrap {
    max-height: 70vh;
    border-top: 1px solid var(--line);
}

.progress-bimester-table {
    min-width: 780px;
    margin-bottom: 0;
    font-size: .86rem;
}

.progress-bimester-table th,
.progress-bimester-table td {
    border-color: #f3bd2f !important;
    vertical-align: middle;
}

.progress-bimester-table thead th {
    background: #ffc107;
    color: #664900;
    text-align: center;
    white-space: nowrap;
}

.progress-bimester-table .progress-table-title th {
    background: #fff3cd;
    color: #1b2b3f;
    text-align: left;
}

.progress-bimester-table tbody td:first-child {
    min-width: 230px;
    background: #fffaf0;
    color: #6b4a00;
    font-style: italic;
}

.progress-bimester-table tbody td:first-child strong,
.progress-bimester-table tbody td:first-child small {
    display: block;
}

.progress-bimester-table tbody td:first-child small {
    color: #456179;
    font-size: .72rem;
    font-style: normal;
    line-height: 1.2;
}

.progress-bimester-table tbody td:nth-child(n+3) {
    min-width: 72px;
    background: #fffdf5;
}

.progress-side-panel {
    display: grid;
    gap: 1rem;
}

.progress-side-panel.is-secondary {
    align-content: start;
}

.progress-side-panel.is-secondary .progress-chart-panel {
    order: -1;
}

.progress-chart-canvas {
    min-height: 420px;
    padding: 1rem;
}

.progress-report-grid.is-secondary .progress-chart-canvas {
    min-height: 455px;
}

.progress-chart-canvas canvas {
    width: 100% !important;
    height: 390px !important;
}

.progress-report-grid.is-secondary .progress-chart-canvas canvas {
    height: 430px !important;
}

.progress-area-list {
    display: grid;
    gap: .45rem;
    padding: 1rem;
}

.progress-area-panel.is-horizontal .progress-area-list {
    grid-template-columns: repeat(4, minmax(140px, 1fr));
    gap: .35rem;
}

.progress-area-list a {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    align-items: center;
    color: #25364a;
    text-decoration: none;
    background: #edf1f4;
    border: 1px solid #dce4ea;
    border-radius: .45rem;
    padding: .45rem .65rem;
    font-weight: 800;
}

.progress-area-panel.is-horizontal .progress-area-list a {
    background: #ffe8a3;
    border-color: #f0ad00;
    border-radius: .28rem;
    padding: .3rem .5rem;
    font-size: .82rem;
}

.progress-area-list a:hover,
.progress-area-list a.is-active {
    color: #083b22;
    background: #ffc107;
    border-color: #f0ad00;
}

.progress-area-list span {
    display: inline-grid;
    place-items: center;
    min-width: 26px;
    min-height: 22px;
    color: #005b33;
    background: rgba(255, 255, 255, .68);
    border-radius: 999px;
    font-size: .78rem;
}

@media (max-width: 1199.98px) {
    .progress-report-grid {
        grid-template-columns: 1fr;
    }

    .progress-chart-canvas,
    .progress-chart-canvas canvas {
        min-height: 340px;
        height: 340px !important;
    }
}

.achievement-note {
    border: 1px solid #b9e4c8;
    border-left: 5px solid #087f46;
    border-radius: .65rem;
    background: #f5fbf7;
    color: #18324f;
    padding: .85rem 1rem;
    font-weight: 700;
}

.achievement-note span {
    display: block;
    margin-top: .25rem;
    color: var(--muted);
    font-weight: 600;
}

.achievement-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1rem;
}

.achievement-risk-card {
    gap: .65rem;
}

.achievement-risk-lines {
    display: grid;
    gap: .35rem;
}

.achievement-risk-lines small {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    color: #475569;
    font-weight: 700;
}

.achievement-risk-lines b {
    color: #0f172a;
    font-size: 1rem;
}

.achievement-risk-lines em {
    color: #dc2626;
    font-style: normal;
    white-space: nowrap;
}

.achievement-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: start;
}

.achievement-table-panel,
.achievement-chart-panel,
.achievement-area-panel {
    overflow: hidden;
}

.achievement-table-wrap {
    max-height: 72vh;
    border-top: 1px solid var(--line);
}

.achievement-table {
    min-width: 1320px;
    margin-bottom: 0;
    font-size: .82rem;
}

.achievement-table th,
.achievement-table td {
    border-color: #f4bd19 !important;
    text-align: center;
    vertical-align: middle;
}

.achievement-table thead th {
    background: #ffc107;
    color: #604300;
    white-space: nowrap;
}

.achievement-table .achievement-title-row th {
    background: #fff3cd;
    color: #0f172a;
    font-size: .95rem;
    letter-spacing: .02em;
}

.achievement-table thead th.achievement-period-1,
.achievement-table thead th.achievement-period-head.achievement-period-1 {
    background: #dbeafe;
    color: #1e3a8a;
}

.achievement-table thead th.achievement-period-2,
.achievement-table thead th.achievement-period-head.achievement-period-2 {
    background: #dcfce7;
    color: #14532d;
}

.achievement-table thead th.achievement-period-3,
.achievement-table thead th.achievement-period-head.achievement-period-3 {
    background: #ffedd5;
    color: #7c2d12;
}

.achievement-table thead th.achievement-period-4,
.achievement-table thead th.achievement-period-head.achievement-period-4 {
    background: #ede9fe;
    color: #4c1d95;
}

.achievement-table thead th.achievement-final-head,
.achievement-table thead th.achievement-final-col {
    background: #e2e8f0;
    color: #334155;
}

.achievement-table tbody td.achievement-period-1 {
    background: #f8fbff;
}

.achievement-table tbody td.achievement-period-2 {
    background: #f6fef9;
}

.achievement-table tbody td.achievement-period-3 {
    background: #fffaf3;
}

.achievement-table tbody td.achievement-period-4 {
    background: #fbfaff;
}

.achievement-table tbody td.achievement-final-col {
    background: #f8fafc;
}

.achievement-table tbody td:nth-child(4),
.achievement-table tbody td:nth-child(5) {
    text-align: left;
    background: #fffaf0;
}

.achievement-table tbody td:nth-child(4) {
    min-width: 185px;
    color: #6b4a00;
    font-style: italic;
}

.achievement-table tbody td:nth-child(5) {
    min-width: 300px;
}

.achievement-table tbody td:nth-child(5) strong,
.achievement-table tbody td:nth-child(5) span {
    display: block;
}

.achievement-table tbody td:nth-child(5) span {
    color: #31445a;
    font-size: .76rem;
    line-height: 1.25;
}

.achievement-side {
    display: grid;
    gap: 1rem;
}

.achievement-chart-canvas {
    min-height: 380px;
    padding: 1rem;
}

.achievement-chart-canvas canvas {
    width: 100% !important;
    height: 350px !important;
}

.achievement-area-list {
    display: grid;
    gap: .55rem;
    padding: 1rem;
}

.achievement-area-list div {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .25rem .75rem;
    align-items: center;
    border: 1px solid #d7e5ef;
    border-left: 4px solid #087f46;
    border-radius: .55rem;
    background: #fbfdff;
    padding: .65rem .75rem;
}

.achievement-area-list strong {
    color: #14233b;
    font-weight: 900;
}

.achievement-area-list span {
    grid-column: 1;
    color: var(--muted);
    font-size: .86rem;
}

.achievement-area-list b {
    grid-row: 1 / span 2;
    grid-column: 2;
    align-self: center;
    min-width: 58px;
    border-radius: 999px;
    background: #eaf7ef;
    color: #08713d;
    padding: .25rem .45rem;
    text-align: center;
    font-size: .86rem;
}

@media (max-width: 1199.98px) {
    .achievement-summary-grid,
    .achievement-layout {
        grid-template-columns: 1fr;
    }

    .achievement-chart-canvas,
    .achievement-chart-canvas canvas {
        min-height: 320px;
        height: 320px !important;
    }
}

.student-col small {
    display: block;
    color: var(--muted);
}

.risk-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .75rem;
}

.risk-pill,
.risk-badge {
    border-radius: .7rem;
    padding: .65rem .8rem;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-weight: 900;
}

.risk-pill {
    justify-content: space-between;
}

.risk-pill strong {
    font-size: 1.65rem;
}

.risk-bajo { background: #eaf7ef; color: #11733c; }
.risk-medio { background: #fff6dd; color: #946200; }
.risk-alto { background: #ffe9df; color: #b84900; }
.risk-critico { background: #ffe3e7; color: #b42337; }

.upload-box {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 1rem;
}

.empty-state {
    border: 1px dashed #bfd2e6;
    background: #fff;
    border-radius: .85rem;
    padding: 3rem 1rem;
    text-align: center;
    color: var(--muted);
}

.empty-state i {
    font-size: 3rem;
    color: var(--cyan);
}

.empty-state h2 {
    color: var(--ink);
    font-weight: 900;
}

.empty-state.compact {
    padding: 1.5rem 1rem;
}

.empty-state.compact i {
    font-size: 2rem;
}

.monitoring-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.monitoring-kpi {
    min-height: 118px;
    border: 1px solid var(--brand-line);
    border-left: 6px solid var(--brand);
    border-radius: 16px;
    background: linear-gradient(135deg, #fff 0%, var(--brand-soft) 100%);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 14px 32px rgba(0, 114, 54, .08);
}

.monitoring-kpi span {
    color: var(--muted);
    font-weight: 800;
    text-transform: uppercase;
    font-size: .76rem;
    letter-spacing: .04em;
}

.monitoring-kpi strong {
    color: var(--ink);
    font-size: 2rem;
    line-height: 1;
    font-weight: 900;
}

.monitoring-achievement-panel .panel-header p {
    font-size: .9rem;
}

.monitoring-achievement-charts {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
}

.monitoring-achievement-charts h3 {
    margin: 0 0 .75rem;
    color: var(--ink);
    font-size: .95rem;
    font-weight: 900;
}

.monitoring-achievement-table th {
    background: #f3faf6;
    color: var(--brand-dark);
    font-size: .78rem;
    text-transform: uppercase;
}

.monitoring-achievement-table td {
    min-width: 190px;
    vertical-align: top;
}

.monitoring-achievement-table td:first-child {
    min-width: 260px;
}

.monitoring-achievement-table td:first-child strong,
.monitoring-achievement-table td:first-child small {
    display: block;
}

.monitoring-achievement-table td:first-child small {
    color: var(--muted);
    font-weight: 800;
}

.achievement-cell-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
}

.achievement-cell-head strong {
    color: var(--brand-dark);
    font-size: 1.15rem;
}

.achievement-cell-head span {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 800;
}

.achievement-level-list {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .45rem;
}

.achievement-level-list span {
    border-radius: 999px;
    padding: .22rem .5rem;
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-size: .72rem;
    font-weight: 800;
}

.section-change-note {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    border: 1px solid #b9e4c8;
    border-left: 5px solid #087f46;
    border-radius: .75rem;
    background: #f5fbf7;
    padding: 1rem;
    color: #18324f;
}

.section-change-note i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: .7rem;
    background: #e4f7eb;
    color: #087f46;
    font-size: 1.25rem;
    flex: 0 0 auto;
}

.section-change-note strong,
.section-change-note span,
.section-change-table td > span,
.section-change-table td > small,
.section-change-table td > strong {
    display: block;
}

.section-change-note span,
.section-change-table td > span,
.section-change-table td > small {
    color: var(--muted);
}

.section-change-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.section-change-table td:first-child {
    min-width: 280px;
}

.section-change-table td:nth-child(4) {
    min-width: 430px;
}

.section-change-current {
    font-weight: 800;
    color: #075f38 !important;
}

.section-change-controls {
    display: grid;
    grid-template-columns: minmax(150px, .7fr) minmax(180px, 1fr) auto;
    gap: .5rem;
    align-items: center;
}

@media (max-width: 991.98px) {
    .section-change-controls {
        grid-template-columns: 1fr;
    }
}

.monitoring-phase-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border-radius: 999px;
    padding: .3rem .65rem;
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-weight: 800;
    font-size: .78rem;
}

.monitoring-action-list {
    display: grid;
    gap: .85rem;
    max-height: 330px;
    overflow: auto;
}

.monitoring-action-item {
    border: 1px solid #d8eadf;
    border-radius: 14px;
    background: #fff;
    padding: .9rem;
}

.monitoring-action-item span {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.monitoring-action-item strong {
    display: block;
    color: var(--brand-dark);
    font-size: .95rem;
}

.monitoring-action-item p {
    margin: .35rem 0 0;
    color: var(--ink);
}

.monitoring-form .panel-header {
    background: linear-gradient(90deg, var(--brand-dark), var(--brand-2));
    color: #fff;
}

.monitoring-form .panel-header .badge {
    color: var(--brand-dark) !important;
    background: #fff !important;
}

.monitoring-dimension {
    border: 1px solid #d9e6dc;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

.monitoring-dimension + .monitoring-dimension {
    margin-top: 1rem;
}

.monitoring-dimension-title {
    margin: 0;
    padding: .8rem 1rem;
    background: #edf8f1;
    color: var(--brand-dark);
    font-weight: 900;
    font-size: 1rem;
    border-bottom: 1px solid #d9e6dc;
}

.monitoring-rubric-table {
    min-width: 940px;
}

.monitoring-rubric-table thead th {
    background: #0b5f32;
    color: #fff;
    border-color: #0a542d;
}

.monitoring-rubric-table td {
    vertical-align: middle;
}

.monitoring-rubric-table .btn-group .btn {
    min-width: 52px;
}

.monitoring-form-tabs-shell {
    margin-bottom: 1.25rem;
}

.monitoring-form-tabs {
    position: relative;
    gap: .65rem;
    padding: .65rem;
    margin: .35rem 0 1rem;
    border: 1px solid #b7ddc4;
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(246, 252, 248, .96)),
        #fff;
    box-shadow: 0 12px 26px rgba(8, 112, 59, .08);
}

.monitoring-form-tabs::before {
    content: "";
    position: absolute;
    left: 2.35rem;
    top: -10px;
    width: 18px;
    height: 18px;
    border-left: 1px solid #b7ddc4;
    border-top: 1px solid #b7ddc4;
    background: #fff;
    transform: rotate(45deg);
}

.monitoring-form-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 50px;
    padding: .75rem 1.2rem;
    border: 1px solid transparent;
    border-radius: 14px;
    color: #063f23;
    background: transparent;
    font-weight: 900;
    letter-spacing: .01em;
    box-shadow: none;
    transition: color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.monitoring-form-tabs .nav-link i {
    font-size: 1.05rem;
}

.monitoring-form-tabs .nav-link.active {
    background: linear-gradient(135deg, #007236, #0b8d46);
    color: #fff;
    box-shadow: 0 12px 22px rgba(0, 114, 54, .26);
}

.monitoring-form-tabs .nav-link:not(.active):hover {
    border-color: #cfe8d8;
    background: #f3fbf6;
    color: #007236;
    transform: translateY(-1px);
}

.monitoring-form-tab-content > .tab-pane {
    outline: none;
}

.monitoring-general-pane {
    margin-bottom: .25rem;
}

.monitoring-general-panel {
    overflow: hidden;
    margin-bottom: 0 !important;
}

.monitoring-general-panel .panel-header {
    padding: .85rem 1.05rem;
}

.monitoring-general-panel .panel-body {
    padding: 1rem 1.05rem 1.05rem;
}

.monitoring-general-panel .row.g-3 {
    --bs-gutter-y: .8rem;
}

.monitoring-save-bar {
    position: sticky;
    bottom: .75rem;
    z-index: 5;
    display: flex;
    justify-content: flex-end;
    gap: .75rem;
    padding: .85rem;
    border: 1px solid #cfe3d5;
    border-radius: 16px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 16px 32px rgba(6, 47, 26, .14);
    backdrop-filter: blur(8px);
}

.instrument-chip {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: .35rem;
    padding: .22rem .55rem;
    border-radius: 999px;
    color: #075f32;
    background: #fff;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .04em;
}

.monitoring-general-block {
    margin-top: .4rem;
    padding: 1rem;
    border: 1px solid #cfe3d5;
    border-radius: 14px;
    background: #fbfefc;
}

.monitoring-general-head {
    margin-bottom: .85rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid #dcebe1;
}

.monitoring-general-head span {
    display: inline-flex;
    margin-bottom: .25rem;
    color: #08703b;
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.monitoring-general-head h3 {
    margin: 0;
    color: #062f1a;
    font-size: 1.05rem;
    font-weight: 900;
}

.monitoring-general-head p {
    margin: .2rem 0 0;
    color: #53677a;
    font-size: .92rem;
    font-weight: 700;
}

.monitoring-time-field .form-control {
    min-width: 124px;
}

@media (min-width: 1200px) {
    .monitoring-time-start {
        margin-left: auto;
    }
}

.monitoring-status-field .form-select {
    min-width: 132px;
}

.instrument1-general-block {
    padding: 1.15rem;
    border-color: #b7d9c2;
    background: linear-gradient(180deg, #fbfffc 0%, #f7fcf9 100%);
}

.instrument1-general-sheet {
    width: 100%;
    min-width: 1080px;
    table-layout: fixed;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid #2a3c2e;
    box-shadow: 0 10px 24px rgba(6, 47, 26, .06);
}

.instrument1-general-sheet th,
.instrument1-general-sheet td {
    height: 44px;
    padding: .35rem .65rem;
    border: 1px solid #2a3c2e;
    vertical-align: middle;
}

.instrument1-general-sheet th {
    width: 16%;
    color: #04190d;
    background: #dcebd4;
    font-weight: 900;
    line-height: 1.1;
    text-align: right;
    text-transform: uppercase;
}

.instrument1-general-sheet td {
    color: #061c31;
    font-weight: 900;
    line-height: 1.35;
    word-break: break-word;
}

.instrument1-sheet-control {
    min-height: 34px;
    padding: .2rem .35rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background-color: #fff;
    color: #061c31;
    font-weight: 900;
    box-shadow: none !important;
}

.instrument1-sheet-control:focus {
    background: #f4fbf6;
    border-color: #08703b;
    outline: 2px solid rgba(8, 112, 59, .25);
}

.instrument1-general-sheet [data-preview-field].is-empty {
    color: #64748b;
    font-weight: 800;
}

.instrument1-teacher-picker {
    align-items: stretch;
}

.instrument1-teacher-picker .instrument1-sheet-control {
    background: transparent;
}

.instrument1-sheet-button {
    border-radius: 6px !important;
    padding-inline: .65rem;
    border-color: #08703b;
    color: #08703b;
    background: #fff;
}

.instrument1-sheet-button:hover {
    color: #fff;
    background: #08703b;
}

.monitoring-form .panel {
    border: 1px solid rgba(0, 114, 54, .16);
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(9, 65, 36, .08);
}

.monitoring-form .panel-header {
    padding: 1.05rem 1.25rem;
    background: linear-gradient(90deg, #034f28 0%, #007236 58%, #0b8d46 100%);
}

.monitoring-form .panel-header h2 {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: 1.08rem;
    letter-spacing: .01em;
}

.monitoring-form .panel-header h2 i {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 10px;
    background: rgba(255, 255, 255, .12);
}

.monitoring-form .panel-header .badge {
    padding: .48rem .75rem;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 999px;
    font-size: .78rem;
    letter-spacing: .02em;
    box-shadow: 0 8px 18px rgba(3, 79, 40, .18);
}

.monitoring-form .panel-body {
    background:
        linear-gradient(135deg, rgba(0, 114, 54, .045), transparent 32%),
        linear-gradient(315deg, rgba(184, 220, 61, .06), transparent 34%),
        #fff;
}

.monitoring-form .form-label {
    margin-bottom: .35rem;
    color: #102033;
    font-size: .79rem;
    font-weight: 900;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.monitoring-form .form-control,
.monitoring-form .form-select {
    min-height: 46px;
    border-color: #d7e3dc;
    border-radius: 11px;
    color: #122033;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(15, 44, 70, .03);
}

.monitoring-form .form-control:focus,
.monitoring-form .form-select:focus {
    border-color: #0b8d46;
    box-shadow: 0 0 0 .22rem rgba(0, 114, 54, .15);
}

.monitoring-form .input-group > .btn {
    border-radius: 0 11px 11px 0;
    font-weight: 900;
}

.monitoring-general-block {
    border-color: rgba(0, 114, 54, .2);
    border-radius: 18px;
    background: rgba(255, 255, 255, .86);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}

.monitoring-general-head {
    position: relative;
    padding: .1rem 0 .75rem 2.8rem;
}

.monitoring-general-head::before {
    content: "\f392";
    position: absolute;
    left: 0;
    top: .1rem;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid #cfe3d5;
    border-radius: 12px;
    background: #edf8f1;
    color: #08703b;
    font-family: "bootstrap-icons";
    font-size: 1.25rem;
}

.monitoring-general-head h3 {
    font-size: clamp(1.05rem, 2vw, 1.22rem);
}

.monitoring-general-head p {
    font-size: .88rem;
}

.instrument1-general-block {
    padding: 1rem;
    border-color: rgba(0, 114, 54, .24);
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 252, 249, .96)),
        #fff;
    box-shadow: 0 18px 34px rgba(0, 114, 54, .08);
}

.instrument1-general-block .table-responsive {
    padding: .18rem;
    border: 1px solid #d9eadf;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 24px rgba(6, 47, 26, .06);
}

.instrument1-general-sheet {
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    box-shadow: none;
}

.instrument1-general-sheet th,
.instrument1-general-sheet td {
    height: 46px;
    border-color: #bdd5c6;
    border-width: 0 1px 1px 0;
    padding: .42rem .6rem;
}

.instrument1-general-sheet tr:first-child th,
.instrument1-general-sheet tr:first-child td {
    border-top: 1px solid #bdd5c6;
}

.instrument1-general-sheet th:first-child,
.instrument1-general-sheet td:first-child {
    border-left: 1px solid #bdd5c6;
}

.instrument1-general-sheet tr:first-child th:first-child {
    border-top-left-radius: 12px;
}

.instrument1-general-sheet tr:first-child td:last-child {
    border-top-right-radius: 12px;
}

.instrument1-general-sheet tr:last-child th:first-child {
    border-bottom-left-radius: 12px;
}

.instrument1-general-sheet tr:last-child td:last-child {
    border-bottom-right-radius: 12px;
}

.instrument1-general-sheet th {
    color: #043d20;
    background: linear-gradient(180deg, #e7f3df 0%, #d9ead1 100%);
    font-size: .8rem;
    letter-spacing: .01em;
}

.instrument1-general-sheet td {
    background: #fff;
    color: #0d2236;
    font-size: .92rem;
}

.instrument1-general-sheet tr:nth-child(even) td {
    background: #fbfefc;
}

.instrument1-sheet-control {
    min-height: 36px;
    padding: .28rem .48rem;
    border: 1px solid #d6e4dc;
    border-radius: 10px;
    background-color: #fff;
    font-size: .9rem;
}

.monitoring-form .instrument1-general-sheet .instrument1-sheet-control {
    min-height: 34px;
    padding: .24rem .45rem;
    border-radius: 8px;
    font-size: .88rem;
}

.monitoring-form .instrument1-general-sheet .instrument1-sheet-button {
    min-height: 34px;
    padding-block: .2rem;
}

.instrument1-sheet-control[readonly] {
    background: #fbfefc;
    cursor: pointer;
}

.instrument1-sheet-control::placeholder {
    color: #6b7a90;
    font-weight: 700;
}

.instrument1-sheet-control:focus {
    background: #fff;
    border-color: #0b8d46;
    outline: 0;
    box-shadow: 0 0 0 .18rem rgba(0, 114, 54, .14) !important;
}

.instrument1-general-sheet [data-preview-field].is-empty {
    color: #7a8798;
    font-size: .88rem;
    font-style: italic;
    font-weight: 700;
}

.instrument1-teacher-picker {
    gap: .45rem;
}

.instrument1-teacher-picker .instrument1-sheet-control {
    background: #fff;
}

.instrument1-sheet-button {
    min-width: 44px;
    border-radius: 10px !important;
    background: #f5fbf7;
    box-shadow: 0 6px 14px rgba(0, 114, 54, .08);
}

.instrument1-sheet-button:hover,
.instrument1-sheet-button:focus {
    color: #fff;
    border-color: #007236;
    background: #007236;
}

.instrument1-classroom-summary {
    margin-top: .45rem;
    color: #0a6335;
    font-size: .82rem;
    font-weight: 800;
}

.instrument1-classroom-summary.is-empty {
    color: #7a8798;
    font-style: italic;
    font-weight: 700;
}

.monitoring-picker-modal {
    overflow: hidden;
    border: 0;
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(4, 31, 18, .22);
}

.monitoring-teacher-dialog {
    max-width: min(1420px, calc(100vw - 1rem));
}

.monitoring-picker-header {
    color: #fff;
    background: linear-gradient(90deg, #034f28, #007236, #0b8d46);
}

.monitoring-picker-header .modal-title {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-weight: 900;
}

.monitoring-picker-header .btn-close {
    filter: invert(1) grayscale(100%);
    opacity: .9;
}

.monitoring-picker-intro {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-bottom: 1rem;
    padding: .9rem 1rem;
    border: 1px solid #d3e7db;
    border-radius: 16px;
    background: linear-gradient(135deg, #f3fbf6, #fff);
}

.monitoring-picker-intro span {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    color: #007236;
    background: #e6f5ec;
    font-size: 1.35rem;
}

.monitoring-picker-intro strong {
    display: block;
    color: #0d2236;
    font-size: 1rem;
    font-weight: 900;
}

.monitoring-picker-intro p {
    margin: .18rem 0 0;
    color: #53677a;
    font-weight: 700;
}

.monitoring-picker-body {
    background: linear-gradient(180deg, #f8fcfa 0%, #fff 42%);
}

.monitoring-picker-table-shell {
    overflow-x: auto;
    width: 100%;
    padding: .2rem;
    border: 1px solid #d7e8de;
    border-radius: 16px;
    background: #fff;
}

.monitoring-picker-modal .dt-container,
.monitoring-picker-modal .dt-layout-row,
.monitoring-picker-modal .dt-layout-table,
.monitoring-picker-modal .dt-layout-full {
    width: 100% !important;
}

.monitoring-picker-modal .dt-layout-table,
.monitoring-picker-modal .dt-layout-table > .dt-layout-cell,
.monitoring-picker-modal .dt-layout-cell.dt-layout-full,
.monitoring-picker-modal .dt-scroll,
.monitoring-picker-modal .dt-scroll-head,
.monitoring-picker-modal .dt-scroll-body {
    display: block;
    width: 100% !important;
}

.monitoring-picker-modal .dt-layout-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin: .35rem 0 .85rem;
}

.monitoring-picker-modal .dt-layout-cell {
    min-width: 0;
}

.monitoring-picker-modal .dt-length,
.monitoring-picker-modal .dt-search {
    display: flex;
    align-items: center;
    gap: .55rem;
    color: #203044;
    font-weight: 800;
}

.monitoring-picker-modal .dt-length select,
.monitoring-picker-modal .dt-search input {
    min-height: 42px;
    border: 1px solid #d7e2ea;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 8px 20px rgba(11, 79, 44, .06);
}

.monitoring-picker-modal .dt-search input {
    min-width: min(330px, 42vw);
}

.monitoring-teacher-table {
    width: 100% !important;
    min-width: 1120px;
    margin: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

.monitoring-teacher-table thead th {
    color: #fff;
    background: linear-gradient(180deg, #08723c 0%, #065a2f 100%);
    border-color: #064924;
    font-size: .82rem;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.monitoring-teacher-table tbody td {
    padding: .85rem .75rem;
    border-color: #e0ebee;
    color: #142235;
    vertical-align: middle;
}

.monitoring-teacher-table tbody tr {
    transition: background-color .18s ease, box-shadow .18s ease;
}

.monitoring-teacher-table tbody tr:hover {
    background: #f2fbf5;
}

.monitoring-teacher-dni {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    padding: .35rem .5rem;
    border: 1px solid #d3e8dc;
    border-radius: 10px;
    color: #053b20;
    background: #f2fbf5;
    font-weight: 900;
}

.monitoring-teacher-person {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-width: 0;
}

.monitoring-teacher-person strong {
    display: block;
    color: #061c31;
    font-size: .98rem;
    line-height: 1.25;
    word-break: normal;
    overflow-wrap: anywhere;
}

.monitoring-teacher-person small {
    display: block;
    margin-top: .12rem;
    color: #607087;
    font-size: .78rem;
    font-weight: 800;
}

.monitoring-teacher-avatar {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg, #007236, #0b8d46);
    box-shadow: 0 10px 22px rgba(0, 114, 54, .22);
}

.monitoring-teacher-phone {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin: .4rem 0 0 3.25rem;
    padding: .2rem .45rem;
    border: 1px solid #cfe7d7;
    border-radius: 8px;
    color: #075f32;
    background: #f0fbf4;
    font-size: .78rem;
    font-weight: 900;
}

.monitoring-teacher-level {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 112px;
    padding: .35rem .65rem;
    border-radius: 999px;
    color: #065f32;
    background: #e9f8ee;
    font-weight: 900;
}

.monitoring-teacher-classroom-list {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.monitoring-teacher-classroom-list span {
    display: inline-flex;
    align-items: center;
    padding: .28rem .5rem;
    border: 1px solid #d5e9db;
    border-radius: 999px;
    color: #064624;
    background: #f5fcf7;
    font-size: .78rem;
    font-weight: 900;
}

.monitoring-teacher-classroom-list .is-more {
    color: #fff;
    border-color: #007236;
    background: #007236;
}

.monitoring-teacher-empty {
    color: #738197;
    font-size: .82rem;
    font-style: italic;
    font-weight: 800;
}

.monitoring-teacher-areas {
    display: block;
    margin-top: .45rem;
    color: #0a6b38;
    font-size: .78rem;
    font-weight: 800;
    line-height: 1.35;
}

.monitoring-teacher-areas.is-empty {
    color: #8792a2;
    font-style: italic;
}

.monitoring-teacher-table .btn {
    border-radius: 10px;
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(0, 114, 54, .18);
}

.instrument2-general-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}

.instrument2-general-field {
    padding: .8rem;
    border: 1px solid #dbe8df;
    border-radius: 12px;
    background: #fff;
}

.instrument2-general-field.field-full {
    grid-column: 1 / -1;
}

.instrument2-general-field .form-label {
    color: #062f1a;
    font-weight: 900;
}

.instrument2-general-field textarea.form-control {
    min-height: 92px;
    resize: vertical;
}

.instrument2-general-block {
    padding: 1rem;
    border-color: rgba(0, 114, 54, .24);
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 252, 249, .96)),
        #fff;
    box-shadow: 0 18px 34px rgba(0, 114, 54, .08);
}

.instrument2-monitoring-sheet {
    border-color: #c7ddcf;
    border-radius: 18px;
    background:
        linear-gradient(180deg, #fbfffc 0%, #f7fcf9 100%),
        #fff;
    box-shadow: 0 14px 28px rgba(6, 47, 26, .07);
}

.instrument2-monitoring-sheet .table-responsive {
    padding: .2rem;
    border: 1px solid #d9eadf;
    border-radius: 15px;
    background: #fff;
}

.instrument2-monitoring-table {
    border-collapse: separate;
    border-spacing: 0;
    min-width: 1120px;
    overflow: hidden;
}

.instrument2-monitoring-table th,
.instrument2-monitoring-table td {
    border-color: #b8d1c1;
    border-width: 0 1px 1px 0;
}

.instrument2-monitoring-table tr:first-child th,
.instrument2-monitoring-table tr:first-child td {
    border-top: 1px solid #b8d1c1;
}

.instrument2-monitoring-table th:first-child,
.instrument2-monitoring-table td:first-child {
    border-left: 1px solid #b8d1c1;
}

.instrument2-monitoring-table th {
    color: #043d20;
    background: linear-gradient(180deg, #e7f3df 0%, #d9ead1 100%);
    font-size: .78rem;
    letter-spacing: .01em;
}

.instrument2-monitoring-table td {
    background: #fff;
    color: #0d2236;
    font-size: .92rem;
    font-weight: 800;
}

.instrument2-monitoring-table .form-control,
.instrument2-monitoring-table .form-select {
    min-height: 36px;
    border-color: #d6e4dc;
    border-radius: 9px;
    background-color: #fff;
    color: #0d2236;
    font-size: .88rem;
    font-weight: 800;
}

.instrument2-monitoring-table textarea.form-control {
    min-height: 74px;
    resize: vertical;
}

.instrument2-monitoring-table .instrument2-tall-row textarea.form-control {
    min-height: 58px;
}

.instrument2-monitoring-table .instrument2-large-row textarea.form-control {
    min-height: 112px;
}

.instrument2-teacher-picker {
    gap: .45rem;
}

.instrument2-sheet-button {
    min-width: 44px;
    border-radius: 10px !important;
    border-color: #08703b;
    color: #08703b;
    background: #f5fbf7;
    box-shadow: 0 6px 14px rgba(0, 114, 54, .08);
}

.instrument2-sheet-button:hover {
    color: #fff;
    background: #08703b;
}

.instrument2-classroom-summary,
.instrument2-field-hint {
    display: block;
    margin-top: .35rem;
    color: #55687b;
    font-size: .78rem;
    font-weight: 800;
}

.instrument2-classroom-summary.is-empty {
    color: #7a8798;
    font-style: italic;
}

.instrument2-area-combobox,
.instrument2-area-select {
    position: relative;
}

.instrument2-area-combobox .input-group,
.instrument2-area-select .input-group {
    flex-wrap: nowrap;
}

.instrument2-area-combobox .input-group-text,
.instrument2-area-select .input-group-text {
    color: #08703b;
    border-color: #cfe2d6;
    background: #f1faf5;
    font-weight: 900;
}

.instrument2-area-combobox .form-control:focus,
.instrument2-area-select .form-select:focus {
    border-color: #08703b;
    box-shadow: 0 0 0 .2rem rgba(8, 112, 59, .12);
}

.instrument2-area-select .form-select {
    min-height: 46px;
    border-color: #cfe2d6;
    font-weight: 800;
    color: #0b1f3a;
}

.instrument2-area-toggle {
    min-width: 44px;
    border-color: #08703b;
    color: #08703b;
    background: #fff;
}

.instrument2-area-toggle:hover,
.instrument2-area-toggle:focus {
    color: #fff;
    background: #08703b;
}

.instrument2-area-menu {
    max-height: 300px;
    overflow: auto;
    padding: .45rem;
    border: 1px solid #b8d1c1;
    border-radius: 12px;
    box-shadow: 0 18px 38px rgba(10, 55, 32, .16);
}

.instrument2-area-option {
    display: grid;
    gap: .15rem;
    padding: .65rem .75rem;
    border-radius: 9px;
    white-space: normal;
}

.instrument2-area-option:hover,
.instrument2-area-option:focus {
    color: #06391f;
    background: #eaf7ef;
}

.instrument2-area-option-title {
    color: #082f1c;
    font-weight: 900;
}

.instrument2-area-option-meta,
.instrument2-area-empty {
    color: #5d6f7d;
    font-size: .78rem;
    font-weight: 700;
}

.instrument2-capacity-listbox {
    min-height: 168px !important;
    padding: .45rem;
    border-color: #cfe2d6;
    background:
        linear-gradient(180deg, #ffffff 0%, #f8fcfa 100%);
}

.instrument2-capacity-listbox option {
    padding: .45rem .55rem;
    border-radius: 8px;
    white-space: normal;
}

.instrument2-capacity-listbox option:checked {
    color: #fff;
    background: linear-gradient(90deg, #007236, #0b8d46);
}

.monitoring-form .instrument2-monitoring-table {
    min-width: 100%;
}

.monitoring-form .instrument2-monitoring-table th {
    width: 14%;
    padding: .34rem .48rem;
}

.monitoring-form .instrument2-monitoring-table td {
    padding: .32rem .42rem;
}

.monitoring-form .instrument2-monitoring-table .form-control,
.monitoring-form .instrument2-monitoring-table .form-select {
    min-height: 34px;
    padding: .28rem .42rem;
}

.instrument1-panel {
    border-color: #bddbc9;
    box-shadow: 0 18px 36px rgba(0, 114, 54, .08);
}

.instrument1-panel-header {
    background: linear-gradient(90deg, #064924, #08703b) !important;
}

.instrument1-panel-header small {
    display: block;
    color: rgba(255, 255, 255, .86);
    font-weight: 600;
    margin-top: .2rem;
}

.instrument1-intro {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid #cfe8d8;
    border-radius: 14px;
    background: linear-gradient(135deg, #f6fff9, #eefaf2);
}

.instrument1-intro strong,
.instrument1-intro span {
    display: block;
}

.instrument1-intro strong {
    color: #062f1a;
    font-size: 1.05rem;
    font-weight: 900;
}

.instrument1-intro span {
    color: #516273;
    font-size: .92rem;
}

.instrument1-counts {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    justify-content: flex-end;
}

.instrument1-counts span {
    min-width: 132px;
    padding: .65rem .75rem;
    border: 1px solid #bfe2ce;
    border-radius: 12px;
    background: #fff;
    color: #06371d;
    font-weight: 800;
    text-align: center;
}

.instrument1-counts b {
    display: block;
    color: #08703b;
    font-size: 1.3rem;
    line-height: 1;
}

.instrument1-import-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid #bfe2ce;
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(0, 114, 54, .08), rgba(255, 255, 255, .92) 42%),
        #fff;
    box-shadow: 0 14px 28px rgba(0, 114, 54, .08);
}

.instrument1-import-main {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    min-width: 0;
}

.instrument1-import-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: #08703b;
    color: #fff;
    font-size: 1.35rem;
    box-shadow: 0 10px 20px rgba(0, 114, 54, .2);
}

.instrument1-import-main strong {
    display: block;
    color: #062f1a;
    font-size: 1.02rem;
    font-weight: 900;
}

.instrument1-import-main p {
    margin: .25rem 0 0;
    color: #4c6276;
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.45;
}

.instrument1-import-actions {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .65rem;
    align-items: center;
}

.instrument1-import-actions .form-control {
    min-height: 44px;
}

.instrument1-import-actions .btn {
    min-height: 44px;
    border-radius: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.instrument1-template-link {
    border-color: #08703b;
    color: #08703b;
    background: #fff;
}

.instrument1-template-link:hover,
.instrument1-template-link:focus {
    border-color: #075f32;
    background: #effaf3;
    color: #064924;
}

.instrument1-import-status {
    grid-column: 1 / -1;
    padding: .65rem .85rem;
    border: 1px dashed #b7d9c2;
    border-radius: 11px;
    background: #f5fbf7;
    color: #53677a;
    font-size: .84rem;
    font-weight: 800;
}

.instrument1-import-status.is-success {
    border-color: #8bcba3;
    background: #effaf3;
    color: #075f32;
}

.instrument1-import-status.is-danger {
    border-color: #f5aeb5;
    background: #fff4f5;
    color: #b42318;
}

.instrument1-import-status.is-loading {
    border-color: #8bc5ff;
    background: #f1f8ff;
    color: #075985;
}

.instrument1-import-history {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    color: #064924;
    font-weight: 900;
}

.instrument1-import-history small {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: .25rem .55rem;
    border: 1px solid #d9eadf;
    border-radius: 999px;
    background: #fff;
    color: #42566a;
    font-weight: 800;
}

.instrument1-tabs {
    gap: .45rem;
    padding: .5rem .5rem 0;
    margin: 0;
    border: 1px solid #bfd8ca;
    border-bottom: 0;
    border-radius: 14px 14px 0 0;
    background: #f5fbf7;
}

.instrument1-tabs .nav-link {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-height: 48px;
    max-width: 360px;
    border: 1px solid transparent;
    border-radius: 12px 12px 0 0;
    color: #064924;
    font-size: .86rem;
    font-weight: 900;
    line-height: 1.15;
    text-align: left;
}

.instrument1-tabs .nav-link span {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: #dff1e7;
    color: #075f32;
}

.instrument1-tabs .nav-link b {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    min-width: 28px;
    height: 28px;
    padding: 0 .35rem;
    margin-left: auto;
    border-radius: 999px;
    background: #e8f4ee;
    color: #075f32;
    font-size: .78rem;
}

.instrument1-tabs .nav-link.active {
    border-color: #bfd8ca #bfd8ca #fff;
    background: #fff;
    color: #032f19;
}

.instrument1-tabs .nav-link.active span,
.instrument1-tabs .nav-link.active b {
    background: #08703b;
    color: #fff;
}

.instrument1-tab-content {
    padding: .9rem;
    border: 1px solid #bfd8ca;
    border-radius: 0 0 14px 14px;
    background: #fff;
}

.instrument1-section {
    border: 1px solid #bfd8ca;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

.instrument1-section + .instrument1-section {
    margin-top: 1rem;
}

.instrument1-section header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1rem;
    background: #e7f4ec;
    border-bottom: 1px solid #bfd8ca;
}

.instrument1-section header span {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #08703b;
    color: #fff;
    font-weight: 900;
}

.instrument1-section header h3 {
    margin: 0;
    color: #062f1a;
    font-size: 1rem;
    font-weight: 900;
}

.instrument1-table {
    width: 100%;
    min-width: 0;
    margin: 0;
    table-layout: fixed;
}

.instrument1-table thead th {
    color: #fff;
    background: #075f32;
    border-color: #064924;
    padding: .78rem .72rem;
    font-size: .82rem;
    font-weight: 900;
    letter-spacing: .01em;
    text-transform: uppercase;
    white-space: normal;
    overflow-wrap: anywhere;
}

.instrument1-table td {
    vertical-align: top;
    border-color: #d9e6dc;
    padding: .9rem .72rem;
    overflow-wrap: anywhere;
}

.instrument1-item-code {
    color: #064924;
    font-size: 1rem;
    font-weight: 900;
    text-align: center;
}

.instrument1-item-text {
    min-width: 0;
    color: #132235;
    font-weight: 800;
    line-height: 1.45;
}

.instrument1-mark {
    text-align: center;
}

.instrument1-indications {
    min-width: 0;
}

.instrument1-indications textarea {
    width: 100%;
    min-height: 62px;
    border-color: #dfe6ec;
    border-radius: 8px;
    font-weight: 700;
    resize: vertical;
}

.instrument1-support {
    min-width: 0;
    color: #064924;
    font-size: .86rem;
    font-weight: 900;
    line-height: 1.45;
    word-break: normal;
    overflow-wrap: anywhere;
}

.instrument1-mark .btn-group {
    max-width: 134px;
}

.instrument1-toggle .btn {
    min-width: 52px;
    font-weight: 800;
}

.monitoring-form-note {
    margin: 0 0 1rem;
    padding: .85rem 1rem;
    border-left: 4px solid #08703b;
    border-radius: 10px;
    background: #f3fbf6;
    color: #415466;
    font-weight: 700;
}

.monitoring-chart-card canvas {
    max-height: 260px;
}

@media (max-width: 768px) {
    .monitoring-achievement-charts {
        grid-template-columns: 1fr;
    }

    .monitoring-form-tabs,
    .instrument1-tabs,
    .monitoring-save-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .monitoring-form-tabs .nav-link,
    .instrument1-tabs .nav-link,
    .monitoring-save-bar .btn {
        width: 100%;
        justify-content: center;
    }

    .instrument1-tabs .nav-link {
        max-width: none;
    }

    .instrument1-import-card,
    .instrument1-import-actions {
        grid-template-columns: 1fr;
    }

    .instrument1-table {
        min-width: 920px;
    }

    .instrument2-general-grid {
        grid-template-columns: 1fr;
    }

    .monitoring-teacher-dialog {
        max-width: calc(100vw - 1rem);
        margin: .5rem auto;
    }

    .monitoring-picker-table-shell {
        overflow-x: auto;
    }

    .monitoring-picker-modal .dt-layout-row {
        flex-direction: column;
        align-items: stretch;
    }

    .monitoring-picker-modal .dt-length,
    .monitoring-picker-modal .dt-search {
        justify-content: space-between;
        width: 100%;
    }

    .monitoring-picker-modal .dt-search input {
        min-width: 0;
        width: 100%;
    }

    .monitoring-teacher-table {
        min-width: 860px;
    }
}

.observation-form .panel-header small {
    display: block;
    color: rgba(255, 255, 255, .82);
    font-weight: 600;
    margin-top: .2rem;
}

.instrument2-panel {
    border-color: #cfe3d5;
    box-shadow: 0 18px 36px rgba(15, 44, 70, .075);
}

.instrument2-panel-header {
    background: linear-gradient(90deg, #075f32, #099454) !important;
}

.instrument2-rubric-panel {
    border-color: #cfe3d5;
    box-shadow: 0 18px 36px rgba(8, 112, 59, .08);
}

.instrument2-rubric-intro {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid #cfe8d8;
    border-radius: 14px;
    background: linear-gradient(135deg, #f5fff8, #edf8f1);
}

.instrument2-rubric-intro strong,
.instrument2-rubric-intro span {
    display: block;
}

.instrument2-rubric-intro strong {
    color: #062f1a;
    font-size: 1.05rem;
    font-weight: 900;
}

.instrument2-rubric-intro span {
    color: #516273;
    font-size: .92rem;
}

.instrument2-level-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-end;
}

.instrument2-level-legend span {
    padding: .55rem .7rem;
    border: 1px solid #bfe2ce;
    border-radius: 999px;
    background: #fff;
    color: #06371d;
    font-size: .82rem;
    font-weight: 800;
}

.instrument2-level-legend b {
    color: #08703b;
}

.instrument2-tabs {
    gap: .45rem;
    padding: .5rem .5rem 0;
    border: 1px solid #bfd8ca;
    border-bottom: 0;
    border-radius: 14px 14px 0 0;
    background: #f5fbf7;
}

.instrument2-tabs .nav-link {
    display: flex;
    align-items: center;
    gap: .45rem;
    max-width: 290px;
    min-height: 52px;
    border: 1px solid transparent;
    border-radius: 12px 12px 0 0;
    color: #064924;
    font-size: .82rem;
    font-weight: 900;
    line-height: 1.15;
    text-align: left;
}

.instrument2-tabs .nav-link span {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: #dff1e7;
    color: #075f32;
}

.instrument2-tabs .nav-link.active {
    border-color: #bfd8ca #bfd8ca #fff;
    background: #fff;
    color: #032f19;
}

.instrument2-tabs .nav-link.active span {
    background: #08703b;
    color: #fff;
}

.instrument2-tab-content {
    padding: 1rem;
    border: 1px solid #bfd8ca;
    border-radius: 0 0 14px 14px;
    background: #fff;
}

.instrument2-performance {
    border: 1px solid #d5e7dd;
    border-radius: 14px;
    overflow: hidden;
}

.instrument2-performance-head {
    display: flex;
    gap: .85rem;
    padding: 1rem;
    background: #e7f4ec;
    border-bottom: 1px solid #bfd8ca;
}

.instrument2-performance-head > span {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #08703b;
    color: #fff;
    font-weight: 900;
}

.instrument2-performance-head h3 {
    margin: 0 0 .35rem;
    color: #062f1a;
    font-size: 1.05rem;
    font-weight: 900;
}

.instrument2-performance-head p {
    margin: 0;
    color: #415466;
    font-weight: 700;
}

.instrument2-aspects {
    padding: .95rem 1rem;
    border-bottom: 1px solid #d5e7dd;
    background: #fbfffc;
}

.instrument2-aspects strong {
    display: block;
    color: #075f32;
    font-weight: 900;
    margin-bottom: .45rem;
}

.instrument2-aspects ul {
    margin: 0;
    padding-left: 1.15rem;
    color: #243547;
    font-weight: 700;
}

.instrument2-rubric-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .95rem 1rem;
    border-bottom: 1px solid #d5e7dd;
}

.instrument2-rubric-title h4 {
    margin: 0;
    color: #132235;
    font-size: 1rem;
    font-weight: 900;
}

.instrument2-rubric-title span {
    color: #08703b;
    font-size: .85rem;
    font-weight: 900;
    text-transform: uppercase;
}

.instrument2-level-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
    padding: 1rem;
    background: #f8fbf9;
}

.instrument2-level-card {
    display: block;
    height: 100%;
    padding: .95rem;
    border: 2px solid #d9e5dd;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.instrument2-level-card:hover {
    border-color: #74ba91;
    box-shadow: 0 12px 22px rgba(8, 112, 59, .12);
    transform: translateY(-1px);
}

.instrument2-level-card span,
.instrument2-level-card strong,
.instrument2-level-card em {
    display: block;
}

.instrument2-level-card span {
    color: #075f32;
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.instrument2-level-card strong {
    margin: .45rem 0;
    color: #102033;
    font-weight: 900;
    line-height: 1.32;
}

.instrument2-level-card em {
    color: #52616d;
    font-style: normal;
    font-weight: 650;
    line-height: 1.42;
}

.btn-check:checked + .instrument2-level-card {
    border-color: #08703b;
    background: #f3fbf6;
    box-shadow: 0 0 0 4px rgba(8, 112, 59, .12);
}

.instrument2-evidence {
    padding: 1rem;
    border-top: 1px solid #d5e7dd;
}

.instrument2-evidence textarea {
    min-height: 120px;
    resize: vertical;
}

.instrument2-alert-mark {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    padding: .8rem .95rem;
    border: 1px solid #f2c7ce;
    border-radius: 12px;
    background: #fff5f6;
    color: #9f1239;
    font-weight: 900;
}

.instrument2-alert-mark input {
    width: 1.1rem;
    height: 1.1rem;
}

@media (max-width: 992px) {
    .instrument2-rubric-intro,
    .instrument2-rubric-title {
        flex-direction: column;
        align-items: stretch;
    }

    .instrument2-level-legend {
        justify-content: flex-start;
    }

    .instrument2-level-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .instrument2-tabs {
        flex-direction: column;
    }

    .instrument2-tabs .nav-link {
        width: 100%;
        max-width: none;
        justify-content: flex-start;
    }
}

.instrument2-control-strip {
    display: grid;
    grid-template-columns: minmax(180px, 1.4fr) repeat(4, minmax(130px, .75fr));
    gap: .8rem;
    padding: .85rem;
    margin-bottom: 1rem;
    background: #f1f8f3;
    border: 1px solid #d7eadc;
    border-radius: 12px;
}

.instrument2-control-strip .form-label {
    color: #16462a;
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.instrument2-sheet {
    padding: .95rem;
    background: #fff;
    border: 1px solid #b7c8b3;
    border-radius: 10px;
}

.instrument2-title {
    margin-bottom: .85rem;
    color: #000;
    font-size: clamp(1.2rem, 2.5vw, 1.75rem);
    font-weight: 900;
    text-align: center;
}

.instrument2-table {
    width: 100%;
    min-width: 1080px;
    border-collapse: collapse;
    table-layout: fixed;
}

.instrument2-table th,
.instrument2-table td {
    border: 1px solid #1b1f23;
    vertical-align: middle;
}

.instrument2-table th {
    width: 16%;
    padding: .38rem .55rem;
    color: #000;
    background: #dfedd7;
    font-weight: 900;
    text-align: right;
    text-transform: uppercase;
}

.instrument2-table td {
    padding: .34rem;
    background: #fff;
}

.instrument2-table .form-control,
.instrument2-table .form-select {
    border-color: #d8e0e6;
    border-radius: 6px;
    font-weight: 700;
}

.instrument2-table textarea.form-control {
    min-height: 100%;
    resize: vertical;
    font-weight: 600;
    line-height: 1.35;
}

.instrument2-inline,
.instrument2-two-cols {
    display: grid;
    grid-template-columns: minmax(110px, .3fr) 1fr;
    gap: .5rem;
}

.instrument2-tall-row th,
.instrument2-tall-row td {
    min-height: 58px;
}

.instrument2-large-row th,
.instrument2-large-row td {
    min-height: 96px;
}

.observation-performance {
    border-color: #cfe6d7;
}

.observation-performance-title {
    align-items: flex-end;
    gap: 1rem;
}

.observation-performance-title h2 {
    max-width: 980px;
}

.observation-level {
    min-width: 230px;
}

.observation-level .form-label {
    color: rgba(255, 255, 255, .9);
    font-weight: 800;
}

.observation-aspect-table {
    min-width: 1180px;
    border: 1px solid #d5e7dd;
}

.observation-aspect-table thead th {
    background: #0b5f32;
    color: #fff;
    border-color: #0a542d;
    vertical-align: middle;
}

.observation-aspect-table tbody tr:nth-child(even) {
    background: #f7fbf8;
}

.observation-aspect-table td {
    vertical-align: top;
    border-color: #dbe8e0;
}

.observation-aspect-table td:nth-child(2) {
    min-width: 290px;
}

.observation-aspect-table textarea {
    min-height: 96px;
    resize: vertical;
}

.observation-official-panel .panel-body,
.observation-i2-panel .panel-body {
    padding: 1rem;
}

.observation-admin-strip {
    display: grid;
    grid-template-columns: minmax(220px, .8fr) minmax(160px, .45fr) minmax(260px, 1fr);
    gap: .85rem;
    align-items: end;
    margin-bottom: 1rem;
    padding: .9rem;
    border: 1px solid #d6eadc;
    border-radius: 16px;
    background: #f8fcf9;
}

.observation-link-note {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-height: 46px;
    padding: .75rem .9rem;
    color: #315342;
    font-weight: 750;
    border: 1px dashed #b9dfc6;
    border-radius: 14px;
    background: #eff9f2;
}

.observation-link-note i {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: #fff;
    border-radius: 10px;
    background: var(--brand);
}

.observation-official-sheet {
    padding: 1rem;
    overflow-x: auto;
    border: 1px solid #bfdac8;
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(232, 246, 237, .45), rgba(255, 255, 255, .92) 190px),
        #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

.observation-official-title {
    margin-bottom: .85rem;
    color: #071324;
    font-size: clamp(1.2rem, 2vw, 1.65rem);
    font-weight: 950;
    text-align: center;
    text-transform: uppercase;
}

.observation-general-table,
.observation-evidence-table {
    width: 100%;
    min-width: 1120px;
    border-collapse: collapse;
    table-layout: fixed;
    color: #06162a;
}

.observation-general-table th,
.observation-general-table td,
.observation-evidence-table th,
.observation-evidence-table td {
    border: 1px solid #24342c;
    vertical-align: middle;
}

.observation-general-table th,
.observation-evidence-table .observation-performance-cell,
.observation-section-title {
    color: #06120d;
    font-weight: 950;
    background: #dfeeda;
}

.observation-general-table th {
    padding: .45rem .55rem;
    text-align: right;
}

.observation-general-table td {
    padding: .35rem;
    background: #fff;
}

.observation-section-title {
    padding: .55rem .7rem !important;
    color: #fff !important;
    text-align: left !important;
    letter-spacing: .02em;
    background: #075f32 !important;
}

.observation-sheet-control {
    min-height: 38px !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
}

.observation-sheet-textarea {
    min-height: 76px !important;
    border-radius: 8px !important;
    font-weight: 720 !important;
    resize: vertical;
}

.observation-teacher-picker .btn {
    min-width: 44px;
    border-radius: 0 8px 8px 0 !important;
}

.observation-evidence-heading th {
    padding: .65rem .7rem;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    background: #075f32;
}

.observation-performance-cell {
    width: 25%;
    padding: .8rem .9rem;
    vertical-align: top !important;
}

.observation-performance-cell strong,
.observation-performance-cell span,
.observation-aspect-cell strong,
.observation-aspect-cell span,
.observation-i2-rating-table td:first-child strong,
.observation-i2-rating-table td:first-child span {
    display: block;
}

.observation-performance-cell strong {
    margin-bottom: .45rem;
    color: var(--brand-dark);
    font-size: 1rem;
}

.observation-performance-cell span {
    line-height: 1.35;
    font-size: .92rem;
}

.observation-aspect-cell {
    width: 28%;
    padding: .8rem .85rem;
    vertical-align: top !important;
    background: #fbfefc;
}

.observation-aspect-cell strong {
    margin-bottom: .35rem;
    color: var(--brand);
    font-size: .82rem;
}

.observation-evidence-cell {
    padding: .65rem;
    background: #fff;
}

.observation-evidence-cell textarea {
    min-height: 120px;
    border-color: #d4e5da;
    border-radius: 12px;
    resize: vertical;
}

.observation-bridge-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .9rem;
}

.observation-bridge-grid .bridge-span-2 {
    grid-column: span 2;
}

.observation-i2-rating-table {
    min-width: 1100px;
    border: 1px solid #d4e7dc;
}

.observation-i2-rating-table thead th {
    padding: .7rem .8rem;
    color: #fff;
    background: #075f32;
    border-color: #064f2a;
}

.observation-i2-rating-table tbody td {
    padding: .75rem;
    vertical-align: top;
    border-color: #d8e8df;
}

.observation-i2-rating-table td:first-child {
    width: 26%;
    color: #102033;
    font-weight: 800;
    background: #f5fbf7;
}

.observation-i2-rating-table textarea {
    min-height: 92px;
    resize: vertical;
}

.teacher-picker-modal .btn-close {
    filter: invert(1) grayscale(1) brightness(2);
}

.teacher-picker-modal .modal-eyebrow {
    display: block;
    margin-bottom: .25rem;
    color: rgba(255, 255, 255, .76);
    font-size: .74rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.teacher-picker-table-shell {
    min-height: 360px;
}

.teacher-picker-table {
    min-width: 980px;
}

.teacher-picker-table .monitoring-teacher-person strong {
    text-transform: uppercase;
}

.teacher-picker-table .monitoring-teacher-level {
    min-width: 118px;
}

.teacher-phone-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 34px;
    padding: .32rem .6rem;
    color: #203044;
    font-weight: 850;
    border: 1px solid #d8e6de;
    border-radius: 10px;
    background: #f8fcfa;
}

.teacher-phone-pill i {
    color: var(--brand);
}

.teacher-picker-modal .dt-layout-row:first-child {
    padding: .8rem .85rem;
    border: 1px solid #e0ece5;
    border-radius: 14px;
    background: #f7fcf8;
}

.teacher-picker-modal .dt-layout-row:last-child {
    margin: .9rem 0 0;
}

.field-notebook-form .panel-header small {
    display: block;
    color: rgba(255, 255, 255, .82);
    font-weight: 600;
    margin-top: .2rem;
}

.field-notebook-table {
    min-width: 1280px;
    border: 1px solid #d5e7dd;
}

.field-notebook-table thead th {
    background: #0b5f32;
    color: #fff;
    border-color: #0a542d;
    vertical-align: middle;
}

.field-notebook-table tbody tr:nth-child(even) {
    background: #f7fbf8;
}

.field-notebook-table td {
    vertical-align: top;
    border-color: #dbe8e0;
}

.field-notebook-table textarea {
    min-height: 98px;
    resize: vertical;
}

.field-notebook-table .form-check-input {
    width: 1.2rem;
    height: 1.2rem;
}

.bapes-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    gap: 1rem;
}

.bapes-summary-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1rem;
    box-shadow: 0 10px 24px rgba(18, 32, 51, .05);
    border-top: 4px solid var(--cyan);
}

.bapes-summary-card span {
    display: block;
    color: var(--muted);
    font-weight: 800;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.bapes-summary-card strong {
    display: block;
    margin-top: .35rem;
    font-size: 2rem;
    line-height: 1;
    font-weight: 900;
}

.bapes-summary-card.danger {
    border-top-color: #dc3545;
}

.bapes-turn-list {
    display: grid;
    gap: 1rem;
}

.bapes-turn-card {
    border: 1px solid #d6e3f1;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff, #f9fbfe);
    overflow: hidden;
}

.bapes-turn-card > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid #dfe8f2;
}

.bapes-turn-card h3 {
    margin: .25rem 0 0;
    font-size: 1.1rem;
    font-weight: 900;
}

.bapes-turn-card small {
    color: var(--muted);
}

.bapes-date {
    color: #087d93;
    font-size: .8rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.bapes-table {
    margin-bottom: 0;
}

.bapes-table thead th {
    background: #eef6fd;
    color: #16314f;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.bapes-modal-header {
    background: linear-gradient(90deg, #047486, #11b8ce);
    color: #fff;
}

.bapes-modal-header span {
    display: block;
    font-size: .75rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .9;
}

.bapes-form-section {
    border: 1px solid #dbe8f5;
    border-radius: 14px;
    background: #fbfdff;
    padding: 1rem;
}

.bapes-template-modal {
    border: 0;
    overflow: hidden;
}

.bapes-template-hero {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    border: 1px solid #dbe8f5;
    border-radius: 12px;
    background: linear-gradient(135deg, #f2fbfd, #ffffff);
}

.bapes-template-hero-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #e3f8fb;
    color: #047486;
    font-size: 1.6rem;
}

.bapes-template-hero h6 {
    margin: 0 0 .2rem;
    color: #13253d;
    font-weight: 900;
}

.bapes-template-hero p {
    margin: 0;
    color: var(--muted);
}

.bapes-template-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .95rem;
}

.bapes-template-grid .wide,
.bapes-template-vars {
    grid-column: 1 / -1;
}

.bapes-template-grid .form-label {
    color: #14324f;
    font-weight: 900;
}

.bapes-template-grid textarea {
    resize: vertical;
}

.bapes-print-card {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: .9rem;
    align-items: center;
    padding: .95rem;
    border: 1px solid #f0ccd0;
    border-radius: 12px;
    background: #fff7f7;
}

.bapes-print-card i {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #ffe5e8;
    color: #b02a37;
    font-size: 1.35rem;
}

.bapes-print-card strong,
.bapes-print-card span {
    display: block;
}

.bapes-print-card strong {
    color: #2b1720;
    font-weight: 900;
}

.bapes-print-card span {
    color: var(--muted);
    font-size: .9rem;
}

.bapes-template-vars {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    padding: .85rem;
    border: 1px dashed #bbd7e4;
    border-radius: 12px;
    background: #f6fbfd;
}

.bapes-template-vars span {
    color: #16405a;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.bapes-variable-chip {
    border: 1px solid #a8d6e3;
    border-radius: 8px;
    background: #fff;
    color: #075a69;
    padding: .35rem .6rem;
    font-size: .82rem;
    font-weight: 800;
}

.bapes-variable-chip:hover {
    border-color: #047486;
    background: #eaf9fc;
}

.bapes-parent-slot {
    display: grid;
    grid-template-columns: 42px minmax(260px, 1fr) minmax(150px, 180px) minmax(150px, 180px);
    gap: .85rem;
    align-items: end;
    padding: .85rem;
    border: 1px solid #e0eaf4;
    border-radius: 12px;
    background: #fff;
}

.bapes-parent-slot + .bapes-parent-slot {
    margin-top: .75rem;
}

.bapes-parent-slot .slot-number {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #e9f8fb;
    color: #047486;
    font-weight: 900;
    align-self: center;
}

.bapes-attendance-person {
    border: 1px solid #dbe8f5;
    border-radius: 12px;
    padding: 1rem;
    background: #f5fbfd;
}

.bapes-attendance-person small,
.bapes-attendance-person span {
    display: block;
    color: var(--muted);
}

.bapes-attendance-person strong {
    display: block;
    font-size: 1.05rem;
    margin: .2rem 0;
}

.attendance-summary-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(120px, 1fr));
    gap: .75rem;
    margin: 1rem 0;
}

.attendance-today-toolbar,
.attendance-today-toolbar .panel-body,
.attendance-today-toolbar .filter-bar,
.attendance-today-toolbar .filter-bar > div {
    overflow: visible;
}

.attendance-today-toolbar {
    position: relative;
    z-index: 20;
}

.attendance-today-toolbar .bootstrap-autocomplete-field {
    z-index: 30;
}

.attendance-today-toolbar .bootstrap-autocomplete-menu {
    width: max-content;
    min-width: 100%;
    max-width: min(520px, 92vw);
    max-height: min(520px, 64vh);
}

.attendance-summary-card {
    border: 1px solid #dce8f0;
    border-radius: 8px;
    padding: .85rem 1rem;
    background: #fff;
}

.attendance-summary-card span,
.attendance-summary-card strong {
    display: block;
}

.attendance-summary-card span {
    color: var(--muted);
    font-size: .8rem;
    font-weight: 800;
    text-transform: uppercase;
}

.attendance-summary-card strong {
    color: #102033;
    font-size: 1.7rem;
    line-height: 1.1;
}

.attendance-summary-card.is-ok {
    border-color: #b9e1c8;
    background: #f2fbf5;
}

.attendance-summary-card.is-warn {
    border-color: #ffe2a8;
    background: #fff9ed;
}

.attendance-summary-card.is-danger,
.attendance-summary-card.is-alert {
    border-color: #f5c6cc;
    background: #fff6f7;
}

.attendance-summary-card.is-pending {
    border-color: #dce4ef;
    background: #f8fafc;
}

.attendance-editor-head {
    align-items: flex-start;
    gap: 1rem;
}

.attendance-editor-head span {
    color: var(--muted);
    font-weight: 700;
}

.attendance-action-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem;
}

.attendance-action-bar .btn {
    white-space: nowrap;
}

.attendance-editor-panel {
    overflow: hidden;
}

.attendance-editor-panel .panel-header {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.attendance-day-table-wrap {
    height: clamp(520px, calc(100vh - 210px), 820px);
    min-height: 520px;
    max-height: none;
    overflow: auto;
    scrollbar-gutter: stable both-edges;
}

.attendance-day-table {
    margin-bottom: 0;
    min-width: 1260px;
}

.attendance-day-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #edf7ff;
    color: #0f2a44;
    border-color: #bedaf3;
    font-weight: 900;
    text-transform: uppercase;
    font-size: .8rem;
}

.attendance-day-table th,
.attendance-day-table td {
    padding: .48rem .55rem;
}

.attendance-day-table tbody tr {
    border-left: 4px solid transparent;
}

.attendance-day-table tbody tr.is-asistio {
    border-left-color: #198754;
    background: #f6fcf8;
}

.attendance-day-table tbody tr.is-tardanza {
    border-left-color: #ffc107;
    background: #fffaf0;
}

.attendance-day-table tbody tr.is-falta,
.attendance-day-table tbody tr.is-evasion {
    border-left-color: #dc3545;
    background: #fff7f7;
}

.attendance-day-table tbody tr.is-justificada,
.attendance-day-table tbody tr.is-permiso,
.attendance-day-table tbody tr.is-salida {
    border-left-color: #0dcaf0;
    background: #f2fbfd;
}

.attendance-index {
    color: #31516b;
    font-weight: 900;
    width: 52px;
}

.attendance-student-name {
    min-width: 260px;
}

.attendance-student-name strong,
.attendance-student-name span {
    display: block;
}

.attendance-student-name span {
    color: var(--muted);
    font-size: .82rem;
}

.attendance-day-table .form-control-sm,
.attendance-day-table .form-select-sm {
    min-height: 38px;
    padding-top: .35rem;
    padding-bottom: .35rem;
}

.attendance-day-table input[type="time"] {
    min-width: 100px;
}

.attendance-day-table select {
    min-width: 124px;
}

.attendance-day-table .js-attendance-reason {
    min-width: 168px;
}

.attendance-day-table .js-attendance-observation {
    min-width: 200px;
}

.attendance-bool {
    display: inline-grid;
    place-items: center;
    min-width: 34px;
    height: 26px;
    border-radius: 8px;
    background: #fff1f1;
    color: #c12f3a;
    font-size: .76rem;
    font-weight: 900;
}

.attendance-bool.is-yes {
    background: #e7f7ed;
    color: #087f3f;
}

.attendance-blocked-panel {
    border-color: #ffd9a6;
    background: #fffaf0;
}

.attendance-blocked-message {
    display: flex;
    gap: .85rem;
    align-items: center;
    color: #7a4b00;
}

.attendance-blocked-message i {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 8px;
    background: #fff1cf;
    color: #b16b00;
    font-size: 1.35rem;
    flex: 0 0 auto;
}

.attendance-blocked-message strong,
.attendance-blocked-message span {
    display: block;
}

.attendance-blocked-message strong {
    color: #4c3200;
    font-size: 1.05rem;
}

.attendance-monthly-toolbar,
.attendance-monthly-toolbar .panel-body,
.attendance-monthly-toolbar .filter-bar,
.attendance-monthly-toolbar .filter-bar > div {
    overflow: visible;
}

.attendance-monthly-toolbar {
    position: relative;
    z-index: 18;
}

.attendance-monthly-toolbar .bootstrap-autocomplete-field {
    z-index: 28;
}

.attendance-monthly-toolbar .bootstrap-autocomplete-menu {
    width: max-content;
    min-width: 100%;
    max-width: min(520px, 92vw);
    max-height: min(520px, 64vh);
}

.attendance-monthly-summary {
    grid-template-columns: repeat(6, minmax(126px, 1fr));
}

.attendance-monthly-excluded {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    align-items: center;
    margin: .4rem 0 1rem;
    color: #39536c;
    font-size: .9rem;
}

.attendance-monthly-excluded strong {
    color: #102033;
}

.attendance-monthly-excluded span {
    border: 1px solid #ffd2da;
    border-radius: 999px;
    padding: .25rem .55rem;
    background: #fff6f7;
    color: #a12b38;
    font-weight: 700;
}

.attendance-monthly-panel .panel-header small {
    display: block;
    color: var(--muted);
    font-weight: 700;
}

.attendance-monthly-table-wrap {
    max-height: calc(100vh - 330px);
    min-height: 360px;
}

.attendance-monthly-table {
    min-width: 1180px;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.attendance-monthly-table th,
.attendance-monthly-table td {
    border-color: #bfe1f3;
    vertical-align: middle;
}

.attendance-monthly-table thead th {
    background: #edf7ff;
    color: #0f2a44;
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.attendance-monthly-kicker th,
.attendance-monthly-title th,
.attendance-monthly-meta th {
    text-align: center;
    border-color: #8ac8f0;
}

.attendance-monthly-kicker th {
    background: #f7fbff;
    color: #284a63;
    font-size: .85rem;
}

.attendance-monthly-title th {
    background: #e9f7ff;
    color: #061a2f;
    font-size: 1.1rem;
    letter-spacing: 0;
}

.attendance-monthly-meta th {
    background: #f4fbff;
    color: #39536c;
    font-size: .78rem;
}

.attendance-monthly-filters-row th {
    background: #fff6e8;
    color: #9b1c1c;
    font-size: .8rem;
}

.attendance-day-head,
.attendance-monthly-cell,
.attendance-monthly-total,
.attendance-monthly-index {
    min-width: 32px;
    width: 32px;
    text-align: center;
}

.attendance-monthly-index {
    color: #31516b;
    font-weight: 400;
}

.attendance-monthly-student {
    min-width: 245px;
    color: #06305a;
    font-weight: 400;
}

.attendance-monthly-table tbody tr:nth-child(odd) td {
    background: #fff7ef;
}

.attendance-monthly-table tbody tr:nth-child(even) td {
    background: #effcff;
}

.attendance-monthly-cell {
    font-weight: 900;
}

.attendance-monthly-cell.is-asistio {
    color: #087f3f;
    background: #eaf8ee !important;
}

.attendance-monthly-cell.is-tardanza {
    color: #8a5a00;
    background: #fff4cf !important;
}

.attendance-monthly-cell.is-justificada,
.attendance-monthly-cell.is-permiso,
.attendance-monthly-cell.is-salida {
    color: #056b85;
    background: #e7f8fb !important;
}

.attendance-monthly-cell.is-falta,
.attendance-monthly-cell.is-evasion {
    color: #d12432;
    background: #fff0f2 !important;
}

.attendance-monthly-cell.is-empty {
    color: #98a2b3;
}

.attendance-monthly-total {
    background: #f5f9ff !important;
    color: #102033;
    font-weight: 900;
}

.attendance-annual-toolbar,
.attendance-annual-toolbar .panel-body,
.attendance-annual-toolbar .filter-bar,
.attendance-annual-toolbar .filter-bar > div {
    overflow: visible;
}

.attendance-annual-toolbar {
    position: relative;
    z-index: 18;
}

.attendance-annual-summary {
    grid-template-columns: repeat(6, minmax(126px, 1fr));
}

.attendance-risk-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(140px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.attendance-risk-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 70px;
    border: 1px solid #d8e5f2;
    border-radius: 8px;
    padding: .9rem 1.1rem;
    background: #fff;
}

.attendance-risk-pill strong {
    color: #061a2f;
    font-size: 2rem;
    line-height: 1;
}

.attendance-risk-pill span {
    color: #52677f;
    font-weight: 900;
    text-transform: uppercase;
}

.attendance-risk-pill.is-bajo {
    border-color: #bde8ca;
    background: #effaf2;
}

.attendance-risk-pill.is-medio {
    border-color: #ffe09a;
    background: #fff8e5;
}

.attendance-risk-pill.is-alto {
    border-color: #ffc6a8;
    background: #fff0e8;
}

.attendance-risk-pill.is-critico {
    border-color: #ffb6c3;
    background: #fff0f3;
}

.attendance-annual-panel .panel-header small,
.attendance-annual-level-card .panel-header small,
.attendance-risk-panel .panel-header small {
    display: block;
    color: var(--muted);
    font-weight: 700;
}

.attendance-annual-table-wrap {
    max-height: 620px;
    scrollbar-gutter: stable both-edges;
}

.attendance-annual-table {
    min-width: 1180px;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.attendance-annual-table th,
.attendance-annual-table td {
    border-color: #c6d8ea;
    text-align: center;
    vertical-align: middle;
}

.attendance-annual-table thead th {
    background: #edf7ff;
    color: #0f2a44;
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.attendance-annual-table tbody td:first-child,
.attendance-annual-table tbody td:nth-child(2),
.attendance-annual-table tbody td:nth-child(4) {
    text-align: left;
    font-weight: 900;
}

.attendance-annual-table tbody tr.is-asistio td {
    background: #eaf4ff;
    color: #075985;
}

.attendance-annual-table tbody tr.is-tardanza td {
    background: #fff5d7;
    color: #8a5a00;
}

.attendance-annual-table tbody tr.is-justificada td {
    background: #edf9f0;
    color: #087f3f;
}

.attendance-annual-table tbody tr.is-falta td {
    background: #fff0f2;
    color: #c1121f;
}

.attendance-annual-level-row td {
    border-top: 2px solid #0b7f3a !important;
}

.attendance-annual-levels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.attendance-annual-rate {
    border-radius: 999px;
    background: #e8f7ef;
    color: #007a3d;
    font-weight: 900;
    padding: .35rem .7rem;
}

.attendance-annual-bars {
    display: grid;
    gap: .8rem;
    padding: 1rem 1.25rem 0;
}

.attendance-annual-bars div {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .75rem;
    align-items: center;
    padding-bottom: .75rem;
}

.attendance-annual-bars div::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 8px;
    border-radius: 999px;
    background: #e6edf5;
}

.attendance-annual-bars i {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    height: 8px;
    border-radius: 999px;
    background: #0b7f3a;
}

.attendance-annual-bars .is-risk i {
    background: #e11d48;
}

.attendance-annual-bars span,
.attendance-annual-bars strong {
    position: relative;
    z-index: 2;
    font-weight: 900;
}

.attendance-annual-bars span {
    color: #52677f;
}

.attendance-annual-grade-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: .75rem;
    padding: 1rem 1.25rem 1.25rem;
}

.attendance-annual-grade-card {
    border: 1px solid #d7e8df;
    border-radius: 8px;
    padding: .85rem;
    background: #fbfffd;
}

.attendance-annual-grade-card > strong,
.attendance-annual-grade-card > span {
    display: block;
}

.attendance-annual-grade-card > strong {
    color: #061a2f;
}

.attendance-annual-grade-card > span {
    color: #5f7188;
    font-weight: 700;
    margin-bottom: .65rem;
}

.attendance-annual-grade-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .25rem;
    align-items: center;
    text-align: center;
}

.attendance-annual-grade-metrics b {
    color: #061a2f;
    font-size: 1.1rem;
}

.attendance-annual-grade-metrics small {
    color: #5f7188;
    font-weight: 900;
}

.attendance-risk-table thead th {
    background: #edf7ff;
    color: #0f2a44;
    font-size: .82rem;
    font-weight: 900;
    text-transform: uppercase;
}

.attendance-risk-student {
    color: #061a2f;
    font-weight: 900;
}

.attendance-risk-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: .3rem .6rem;
    font-size: .78rem;
    font-weight: 900;
}

.attendance-risk-badge.is-bajo {
    background: #eaf7ef;
    color: #11733c;
}

.attendance-risk-badge.is-medio {
    background: #fff1be;
    color: #8a5a00;
}

.attendance-risk-badge.is-alto {
    background: #ffe1d2;
    color: #b84900;
}

.attendance-risk-badge.is-critico {
    background: #ffdce4;
    color: #b42337;
}

.attendance-annual-chart-grid {
    display: grid;
    grid-template-columns: minmax(420px, 1.2fr) minmax(320px, .8fr);
    gap: 1rem;
    margin: 1rem 0;
}

.attendance-annual-chart-card {
    border: 2px solid #3f70c9;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.attendance-annual-chart-card.is-full {
    grid-column: 1 / -1;
}

.attendance-annual-chart-card .panel-header {
    border-bottom: 1px solid #d7e3f1;
    background: #fff;
}

.attendance-annual-chart-card .panel-header h2 {
    text-transform: uppercase;
}

.attendance-annual-chart-card .panel-header small {
    display: block;
    color: var(--muted);
    font-weight: 700;
}

.attendance-annual-chart-canvas {
    height: 320px;
    padding: 1rem 1.25rem 1.2rem;
}

.attendance-annual-chart-canvas.is-horizontal {
    height: 390px;
}

.attendance-annual-chart-canvas.is-line {
    height: 360px;
}

.attendance-annual-chart-canvas canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

@media (max-width: 1200px) {
    .attendance-summary-grid {
        grid-template-columns: repeat(3, minmax(120px, 1fr));
    }

    .attendance-risk-strip {
        grid-template-columns: repeat(2, minmax(140px, 1fr));
    }

    .attendance-annual-chart-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .attendance-summary-grid {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }

    .attendance-risk-strip {
        grid-template-columns: 1fr;
    }

    .attendance-action-bar {
        justify-content: stretch;
    }

    .attendance-action-bar .btn {
        flex: 1 1 160px;
    }

    .attendance-annual-chart-canvas,
    .attendance-annual-chart-canvas.is-horizontal,
    .attendance-annual-chart-canvas.is-line {
        height: 320px;
        padding: .85rem;
    }
}

.teacher-schedule-hero {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 1.25rem;
    align-items: center;
    margin-bottom: 1rem;
    padding: 1.25rem;
    border: 1px solid #cae7d4;
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(0, 112, 55, .12), rgba(255, 255, 255, .92)),
        #fff;
    box-shadow: 0 12px 30px rgba(6, 34, 24, .06);
}

.teacher-schedule-hero-icon {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(135deg, #006b3f, #159947);
    box-shadow: 0 14px 26px rgba(0, 107, 63, .22);
    font-size: 2.1rem;
}

.teacher-schedule-hero span {
    color: #006b3f;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.teacher-schedule-hero h2 {
    margin: .15rem 0 .35rem;
    color: var(--ink);
    font-size: clamp(1.35rem, 2vw, 2.15rem);
    font-weight: 900;
}

.teacher-schedule-hero p {
    max-width: 900px;
    margin: 0;
    color: var(--muted);
}

.teacher-schedule-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.teacher-schedule-summary article {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: .35rem .75rem;
    align-items: center;
    padding: 1rem;
    border: 1px solid #d8eadf;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(15, 43, 65, .05);
}

.teacher-schedule-summary i {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    color: #006b3f;
    background: #e6f7ed;
    font-size: 1.35rem;
}

.teacher-schedule-summary strong {
    color: var(--ink);
    font-size: 1.6rem;
    line-height: 1;
}

.teacher-schedule-summary span {
    color: var(--muted);
    font-weight: 700;
}

.teacher-schedule-imports {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1rem;
    align-items: start;
    padding: 1rem;
    border: 1px solid #d8eadf;
    border-radius: 12px;
    background: #f7fcf9;
}

.teacher-schedule-imports-title {
    display: flex;
    gap: .5rem;
    align-items: center;
    color: #006b3f;
}

.teacher-schedule-import-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: .7rem;
}

.teacher-schedule-import-list > div {
    padding: .8rem;
    border: 1px solid #d8eadf;
    border-radius: 10px;
    background: #fff;
}

.teacher-schedule-import-list strong,
.teacher-schedule-import-list small {
    display: block;
}

.teacher-schedule-import-list small {
    color: var(--muted);
}

.teacher-schedule-filter .teacher-schedule-teacher-filter {
    flex: 1 1 360px;
}

.teacher-schedule-table-wrap {
    border: 1px solid #cfe6d8;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(8, 52, 32, .06);
}

.teacher-schedule-table {
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 980px;
}

.teacher-schedule-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    border: 0;
    padding: .85rem 1rem;
    background: #006b3f;
    color: #fff;
    font-size: .84rem;
    font-weight: 900;
    text-transform: uppercase;
}

.teacher-schedule-table thead th:first-child {
    border-top-left-radius: 14px;
}

.teacher-schedule-table thead th:last-child {
    border-top-right-radius: 14px;
}

.teacher-schedule-table td {
    border-color: #d9eadf;
    padding: .9rem 1rem;
    vertical-align: middle;
}

.teacher-schedule-table tbody tr {
    background: #fff;
}

.teacher-schedule-table tbody tr:nth-child(even) {
    background: #f8fcfa;
}

.teacher-schedule-table tbody tr.schedule-teacher-start td {
    border-top: 2px solid #9fd4b8;
}

.teacher-schedule-table tbody tr:hover {
    background: #eef9f2;
}

.schedule-teacher-cell,
.schedule-day-cell {
    background: #f2fbf5 !important;
    vertical-align: top !important;
}

.schedule-teacher-card {
    display: grid;
    gap: .35rem;
    min-width: 230px;
}

.schedule-teacher-card strong {
    color: var(--ink);
    line-height: 1.2;
}

.schedule-teacher-card small {
    color: var(--muted);
    font-weight: 700;
}

.schedule-level-pill,
.schedule-turn-pill {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 900;
}

.schedule-level-pill {
    padding: .25rem .65rem;
    background: #dcf7e7;
    color: #006b3f;
}

.schedule-day-cell span {
    display: inline-flex;
    justify-content: center;
    min-width: 92px;
    padding: .45rem .7rem;
    border-radius: 10px;
    background: #e8f5ee;
    color: #005b35;
    font-weight: 900;
}

.teacher-schedule-table .schedule-time {
    display: inline-flex;
    min-width: 112px;
    justify-content: center;
    padding: .35rem .65rem;
    border: 1px solid #cce7d5;
    border-radius: 999px;
    background: #eefaf3;
    color: #005b35;
    font-weight: 800;
}

.schedule-classroom,
.schedule-area {
    display: block;
    color: #0c2037;
    font-weight: 800;
}

.schedule-turn-pill {
    padding: .3rem .65rem;
    border: 1px solid #d4eadc;
    background: #f4fbf7;
    color: #006b3f;
}

.teacher-schedule-empty {
    padding: 2.5rem !important;
    text-align: center;
    color: var(--muted);
}

.teacher-schedule-empty i,
.teacher-schedule-empty strong,
.teacher-schedule-empty span {
    display: block;
}

.teacher-schedule-empty i {
    color: #0b7d48;
    font-size: 2rem;
    margin-bottom: .5rem;
}

.teacher-schedule-empty strong {
    color: var(--ink);
    font-size: 1.1rem;
}

@media (max-width: 1200px) {
    .metric-grid { grid-template-columns: repeat(3, 1fr); }
    .maintenance-overview { grid-template-columns: repeat(2, minmax(160px, 1fr)); }
    .admin-ie-grid { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
    .bapes-summary-grid,
    .auxiliary-summary-grid { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
    .teacher-schedule-summary { grid-template-columns: repeat(2, minmax(160px, 1fr)); }
    .bapes-parent-slot { grid-template-columns: 42px 1fr 1fr; }
    .bapes-parent-slot .slot-person { grid-column: span 2; }
    .instrument2-control-strip { grid-template-columns: repeat(3, minmax(160px, 1fr)); }
}

@media (max-height: 760px) and (min-width: 901px) {
    .login-panel { padding-block: 1rem; }
    .school-head { margin-bottom: 1rem; }
    .school-head img {
        width: 72px;
        height: 72px;
    }
    .school-head h1 { font-size: clamp(1.8rem, 2.7vw, 2.3rem); }
    .school-head p { font-size: .95rem; }
    .login-security-note {
        padding: .75rem .85rem;
        font-size: .92rem;
    }
    .login-form label { margin-top: .5rem; }
    .login-form .btn { margin-top: .75rem; }
    .hero-overlay h2 { font-size: clamp(2rem, 3.6vw, 3.35rem); }
}

@media (max-width: 900px) {
    .login-body { overflow: auto; }
    .login-shell {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }
    .login-panel {
        min-height: auto;
        overflow: visible;
    }
    .login-hero { min-height: 340px; }
    .login-level-grid { grid-template-columns: 1fr; }
    body.comano-body,
    body.sidebar-collapsed.comano-body { grid-template-columns: 1fr; }
    body.comano-body > .comano-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: 292px;
        max-width: min(292px, 86vw);
        transform: translateX(-100%);
        visibility: visible;
        pointer-events: auto;
        transition: transform .2s ease;
    }
    body.sidebar-open.comano-body > .comano-sidebar { transform: translateX(0); }
    .content-wrapper { padding: 1rem; }
    .admin-ie-hero { grid-template-columns: 1fr; }
    .ie-profile-head,
    .ie-profile-body {
        grid-template-columns: 1fr;
    }
    .ie-profile-codes {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .ie-profile-actions {
        justify-content: stretch;
    }
    .ie-edit-btn {
        width: 100%;
    }
    .conv-protection-callout { grid-template-columns: 1fr; }
    .deadline-alert-head {
        flex-direction: column;
        align-items: stretch;
    }
    .deadline-alert-item,
    .conv-deadline-card {
        grid-template-columns: 1fr;
    }
    .environment-furniture-grid {
        grid-template-columns: repeat(2, minmax(160px, 1fr));
    }
    .special-date-section-row {
        align-items: stretch;
        flex-direction: column;
    }
    .special-date-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-left: 0;
    }
    .special-date-group-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .special-sync-head,
    .special-sync-source-state {
        align-items: stretch;
        flex-direction: column;
    }
    .grade-section-title-row {
        align-items: stretch;
        flex-direction: column;
    }
    .grade-section-filter {
        justify-content: flex-start;
    }
    .bapes-summary-grid,
    .auxiliary-summary-grid { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
    .auxiliary-session-grid {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }
    .auxiliary-formative-grid {
        grid-template-columns: 1fr;
    }
    .bapes-turn-card > header {
        align-items: stretch;
        flex-direction: column;
    }
    .bapes-parent-slot {
        grid-template-columns: 42px 1fr;
    }
    .bapes-parent-slot .slot-person {
        grid-column: span 1;
    }
    .bapes-template-grid {
        grid-template-columns: 1fr;
    }
    .instrument2-control-strip,
    .instrument2-inline,
    .instrument2-two-cols {
        grid-template-columns: 1fr;
    }
    .teacher-schedule-hero,
    .teacher-schedule-imports {
        grid-template-columns: 1fr;
    }
    .assignment-modal-grid {
        grid-template-columns: 1fr;
    }
    .assignment-teacher-field,
    .assignment-field-wide {
        grid-column: auto;
    }
    .assignment-entry-grid {
        grid-template-columns: 1fr;
    }
    .assignment-area-cell,
    .assignment-coordinator-field {
        grid-column: auto;
    }
    .assignment-window-footer {
        flex-wrap: wrap;
    }
    .assignment-action-button {
        flex: 1 1 140px;
    }
    .assignment-total-label {
        flex: 1 1 100%;
        margin-left: 0;
        text-align: center;
    }
    .assignment-counter {
        flex: 1 1 100%;
    }
    .instrument2-sheet {
        padding: .65rem;
    }
    .security-admin-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .metric-grid,
    .maintenance-overview,
    .admin-ie-grid,
    .risk-strip,
    .teacher-schedule-summary { grid-template-columns: 1fr; }
    .page-title,
    .panel-header,
    .comano-footer,
    .upload-box { flex-direction: column; align-items: stretch; display: flex; }
    .topbar strong { font-size: .95rem; }
    .filter-bar > div { flex: 1 1 100%; }
    .admin-ie-title-card,
    .admin-module-shell {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .admin-ie-title-card {
        flex-direction: column;
        align-items: center;
    }
    .admin-module-icon {
        margin: 0 auto;
    }
    .ie-profile-mark {
        flex-direction: column;
        text-align: center;
    }
    .ie-profile-codes {
        grid-template-columns: 1fr;
    }
    .ie-data-grid {
        grid-template-columns: 1fr;
    }
    .ie-insignia-workspace {
        justify-items: center;
    }
    .siagie-heading {
        align-items: flex-start;
        flex-direction: column;
    }
    .siagie-toolbar,
    .environment-form-toolbar {
        display: grid;
        grid-template-columns: 1fr;
    }
    .environment-furniture-grid {
        grid-template-columns: 1fr;
    }
    .special-date-filter,
    .special-date-alert-list,
    .special-date-group-grid,
    .special-sync-grid {
        grid-template-columns: 1fr;
    }
    .special-date-group-head {
        align-items: stretch;
        flex-direction: column;
    }
    .special-date-group-head > div {
        align-items: flex-start;
    }
    .security-admin-form {
        grid-template-columns: 1fr;
    }
    .student-cards-toolbar {
        grid-template-columns: 1fr;
    }
    .bapes-summary-grid,
    .auxiliary-summary-grid,
    .bapes-parent-slot,
    .bapes-template-hero,
    .bapes-print-card {
        grid-template-columns: 1fr;
    }
    .auxiliary-session-grid,
    .auxiliary-capacity-list,
    .auxiliary-formative-grid {
        grid-template-columns: 1fr;
    }
    .staff-person-modal .modal-dialog {
        margin: .5rem;
        max-width: calc(100vw - 1rem);
    }
    .staff-person-intro,
    .staff-person-form-grid {
        grid-template-columns: 1fr;
    }
    .staff-person-field,
    .staff-person-field-wide {
        grid-column: 1 / -1;
    }
    .bapes-parent-slot .slot-number {
        width: 34px;
        height: 34px;
    }
    .instrument2-title {
        font-size: 1.1rem;
        text-align: left;
    }
    .instrument2-control-strip {
        padding: .65rem;
    }
    .grade-section-filter .form-select,
    .grade-section-toolbar .dropdown,
    .grade-section-toolbar .grade-action-button {
        width: 100%;
    }
    .grade-section-toolbar .dropdown-toggle {
        justify-content: center;
    }
    .grade-section-detail-head {
        align-items: stretch;
        flex-direction: column;
    }
    .grade-section-detail-head .btn {
        width: 100%;
    }
    .environment-furniture-card {
        border-right: 0;
        border-bottom: 1px solid #d7e0e7;
    }
    .environment-furniture-card:last-child {
        border-bottom: 0;
    }
}

.tut-sheet-workspace {
    display: grid;
    grid-template-columns: minmax(360px, 1fr) minmax(360px, 520px);
    gap: 1rem;
    align-items: start;
}

.tutor-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: .8rem;
    margin-top: 1rem;
}

.tutor-summary-card {
    align-items: center;
    background: #fff;
    border: 1px solid #dbe7ef;
    border-radius: 8px;
    box-shadow: 0 8px 18px rgba(15, 44, 70, .045);
    display: grid;
    gap: .25rem .65rem;
    grid-template-columns: auto 1fr;
    padding: .9rem 1rem;
}

.tutor-summary-card i {
    background: #e8f6ee;
    border-radius: 8px;
    color: #006b3d;
    display: grid;
    font-size: 1.1rem;
    grid-row: 1 / span 2;
    height: 38px;
    place-items: center;
    width: 38px;
}

.tutor-summary-card span {
    color: var(--muted);
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
}

.tutor-summary-card strong {
    color: #14213d;
    font-size: 1.55rem;
    line-height: 1;
}

.tutor-person strong,
.tutor-person small {
    display: block;
}

.tutor-person small {
    color: var(--muted);
}

.tutor-classroom-badge {
    align-items: center;
    background: #eef7f2;
    border-radius: 8px;
    color: #006b3d;
    display: inline-flex;
    font-weight: 800;
    gap: .3rem;
    padding: .28rem .55rem;
}

.tutor-activity-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.tutor-activity-pills span {
    align-items: center;
    background: #f5f8fb;
    border-radius: 8px;
    color: #344054;
    display: inline-flex;
    font-size: .82rem;
    gap: .25rem;
    padding: .25rem .45rem;
}

.tutor-activity-pills span.is-alert {
    background: #fff2f0;
    color: #b42318;
}

.tutor-list-table td {
    vertical-align: middle;
}

.teacher-planning-summary {
    display: grid;
    gap: .8rem;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.teacher-planning-summary article {
    align-items: center;
    background: #fff;
    border: 1px solid #dbe7ef;
    border-radius: 8px;
    box-shadow: 0 8px 18px rgba(15, 44, 70, .045);
    display: grid;
    gap: .25rem .65rem;
    grid-template-columns: auto 1fr;
    padding: .9rem 1rem;
}

.teacher-planning-summary i {
    background: #e8f1fb;
    border-radius: 8px;
    color: #175cd3;
    display: grid;
    font-size: 1.1rem;
    grid-row: 1 / span 2;
    height: 38px;
    place-items: center;
    width: 38px;
}

.teacher-planning-summary span {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.teacher-planning-summary strong {
    color: #14213d;
    font-size: 1.45rem;
    line-height: 1;
}

.teacher-planning-grid {
    align-items: start;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(330px, 420px) minmax(0, 1fr);
}

.teacher-planning-form,
.teacher-planning-filter {
    display: grid;
    gap: .85rem;
}

.teacher-planning-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.teacher-planning-filter {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.teacher-planning-wide {
    grid-column: 1 / -1;
}

.teacher-planning-doc strong,
.teacher-planning-doc span {
    display: block;
}

.teacher-planning-doc span {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.teacher-planning-file {
    display: inline-block;
    max-width: 260px;
    overflow-wrap: anywhere;
}

.teacher-planning-table td {
    vertical-align: middle;
}

.teacher-planning-tabs {
    gap: .35rem;
}

.teacher-planning-tabs .nav-link {
    align-items: center;
    border-radius: 8px 8px 0 0;
    color: #344054;
    display: inline-flex;
    font-weight: 800;
    gap: .45rem;
}

.teacher-planning-tabs .nav-link span {
    background: #eef2f6;
    border-radius: 999px;
    color: #475467;
    font-size: .74rem;
    padding: .12rem .42rem;
}

.teacher-planning-tabs .nav-link.active {
    color: #006b3d;
}

.teacher-planning-parent {
    background: #fff8e5;
    border: 1px solid #f5d77b;
    border-radius: 8px;
    color: #7a4f00;
    display: inline-block;
    font-size: .82rem;
    font-weight: 800;
    max-width: 240px;
    overflow-wrap: anywhere;
    padding: .22rem .5rem;
}

.teacher-planning-preview-modal .modal-body {
    background: #f5f8fb;
    min-height: 420px;
    padding: .75rem;
}

.teacher-planning-preview-frame {
    background: #fff;
    border: 1px solid #d8e2ea;
    border-radius: 8px;
    height: min(72vh, 720px);
    width: 100%;
}

.teacher-planning-preview-empty {
    align-items: center;
    background: #fff;
    border: 1px dashed #c7d7e0;
    border-radius: 8px;
    color: #344054;
    display: grid;
    gap: .45rem;
    justify-items: center;
    min-height: 360px;
    padding: 1.5rem;
    text-align: center;
}

.teacher-planning-preview-empty i {
    color: #175cd3;
    font-size: 2.2rem;
}

.teacher-planning-preview-empty strong {
    max-width: 100%;
    overflow-wrap: anywhere;
}

@media (max-width: 767px) {
    .tutor-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tutor-summary-card {
        padding: .75rem;
    }

    .tutor-summary-card strong {
        font-size: 1.3rem;
    }

    .tutor-list-table,
    .tutor-list-table table,
    .tutor-list-table tbody,
    .tutor-list-table tr,
    .tutor-list-table td {
        display: block;
        width: 100%;
    }

    .tutor-list-table thead {
        display: none;
    }

    .tutor-list-table tr {
        background: #fff;
        border: 1px solid #dbe7ef;
        border-radius: 8px;
        box-shadow: 0 8px 18px rgba(15, 44, 70, .045);
        margin-bottom: .85rem;
        padding: .65rem .75rem;
    }

    .tutor-list-table td {
        align-items: flex-start;
        border: 0;
        display: grid;
        gap: .35rem;
        grid-template-columns: 110px minmax(0, 1fr);
        padding: .42rem 0;
        text-align: left !important;
    }

    .tutor-list-table td::before {
        color: var(--muted);
        content: attr(data-label);
        font-size: .72rem;
        font-weight: 800;
        text-transform: uppercase;
    }

    .tutor-action-group {
        justify-content: flex-start;
        width: 100%;
    }

    .teacher-planning-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .teacher-planning-tabs {
        display: grid;
        grid-template-columns: 1fr;
    }

    .teacher-planning-tabs .nav-link {
        border-radius: 8px;
        justify-content: space-between;
        width: 100%;
    }

    .teacher-planning-grid,
    .teacher-planning-form,
    .teacher-planning-filter {
        grid-template-columns: 1fr;
    }

    .teacher-planning-table,
    .teacher-planning-table table,
    .teacher-planning-table tbody,
    .teacher-planning-table tr,
    .teacher-planning-table td {
        display: block;
        width: 100%;
    }

    .teacher-planning-table thead {
        display: none;
    }

    .teacher-planning-table tr {
        background: #fff;
        border: 1px solid #dbe7ef;
        border-radius: 8px;
        box-shadow: 0 8px 18px rgba(15, 44, 70, .045);
        margin-bottom: .85rem;
        padding: .65rem .75rem;
    }

    .teacher-planning-table td {
        align-items: flex-start;
        border: 0;
        display: grid;
        gap: .35rem;
        grid-template-columns: 108px minmax(0, 1fr);
        padding: .42rem 0;
        text-align: left !important;
    }

    .teacher-planning-table td::before {
        color: var(--muted);
        content: attr(data-label);
        font-size: .72rem;
        font-weight: 800;
        text-transform: uppercase;
    }
}

.tut-sheet-form-panel,
.tut-sheet-preview-panel {
    border-radius: 8px;
    overflow: hidden;
}

.tut-sheet-form {
    display: grid;
    gap: 1rem;
}

.tut-sheet-side {
    position: sticky;
    top: 1rem;
}

.tut-type-switch {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
    border: 1px solid #d5e5dc;
    border-radius: 8px;
    background: #f7fbf8;
    padding: .35rem;
}

.tut-type-switch .btn {
    align-items: center;
    border: 0;
    border-radius: 6px;
    color: #1d3c34;
    display: inline-flex;
    font-weight: 800;
    gap: .4rem;
    justify-content: center;
    min-height: 42px;
}

.tut-type-switch .btn-check:checked + .btn {
    background: #0f8f55;
    color: #fff;
    box-shadow: 0 8px 18px rgba(15, 143, 85, .18);
}

.tut-family-field {
    display: none;
}

.tut-sheet-form.is-family-sheet .tut-family-field {
    display: block;
}

.tut-evidence-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}

.tut-evidence-field {
    border: 1px dashed #b7cbd4;
    border-radius: 8px;
    background: #f9fcfd;
    display: grid;
    gap: .55rem;
    margin: 0;
    padding: .8rem;
}

.tut-evidence-field span {
    align-items: center;
    color: #1b4257;
    display: flex;
    font-size: .84rem;
    font-weight: 900;
    gap: .4rem;
    text-transform: uppercase;
}

.tut-evidence-preview {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    min-height: 1.7rem;
}

.tut-evidence-preview span {
    align-items: center;
    background: #edf7f1;
    border: 1px solid #c9e7d4;
    border-radius: 999px;
    color: #1f6341;
    display: inline-flex;
    font-size: .78rem;
    font-weight: 800;
    gap: .32rem;
    max-width: 100%;
    padding: .32rem .62rem;
}

.tut-sheet-stage {
    background:
        linear-gradient(135deg, rgba(13, 110, 253, .06), rgba(15, 143, 85, .05)),
        #f4f7fa;
    overflow: auto;
    padding: 1rem;
}

.tut-print-sheet {
    background: #fff;
    border: 1px solid #d5dde5;
    box-shadow: 0 18px 45px rgba(18, 32, 51, .12);
    color: #050b16;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0 auto;
    max-width: 100%;
    min-height: 860px;
    padding: 18px 22px 22px;
    width: 460px;
}

.tut-sheet-brand-row {
    align-items: center;
    border-bottom: 1px solid #785b45;
    display: grid;
    grid-template-columns: 1.1fr .85fr 1.35fr .75fr 1.1fr;
    gap: .35rem;
    margin-bottom: 1rem;
    padding-bottom: .45rem;
}

.tut-sheet-brand-row > div {
    border-right: 1px solid #d8dde2;
    min-height: 42px;
    padding: .12rem .32rem;
}

.tut-sheet-brand-row > div:last-child {
    border-right: 0;
}

.tut-sheet-brand-row strong {
    color: #8e1f24;
    display: block;
    font-size: .58rem;
    font-weight: 900;
    line-height: 1.1;
    text-transform: uppercase;
}

.tut-sheet-brand-row span {
    color: #243041;
    display: block;
    font-size: .5rem;
    font-weight: 700;
    line-height: 1.15;
}

.tut-logo-text strong {
    color: #48aa7a;
    font-size: .78rem;
    text-transform: none;
}

.tut-school-mark {
    align-items: center;
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: .25rem;
}

.tut-school-mark img {
    height: 30px;
    object-fit: contain;
    width: 28px;
}

.tut-print-sheet > h2 {
    color: #003a78;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.25;
    margin: .65rem 0 .95rem;
    text-align: center;
}

.tut-sheet-top {
    display: grid;
    grid-template-columns: 1.1fr .9fr .8fr;
    margin-bottom: 1.05rem;
}

.tut-sheet-top > div,
.tut-sheet-data > b,
.tut-sheet-data > span {
    border: 1px solid #070707;
    min-height: 22px;
}

.tut-sheet-top > div {
    display: grid;
    grid-template-columns: 90px 1fr;
    margin-left: -1px;
}

.tut-sheet-top > div:first-child {
    margin-left: 0;
}

.tut-sheet-top b,
.tut-sheet-data b {
    align-items: center;
    background: #09b65e;
    color: #001408;
    display: flex;
    font-size: .68rem;
    font-weight: 900;
    justify-content: center;
    line-height: 1.05;
    padding: .22rem .35rem;
}

.tut-sheet-top span,
.tut-sheet-data span {
    align-items: center;
    background: #fff;
    display: flex;
    font-size: .7rem;
    line-height: 1.15;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: .18rem .35rem;
}

.tut-sheet-data {
    display: grid;
    grid-template-columns: 125px minmax(0, 1fr) 70px minmax(58px, .4fr);
    margin-bottom: 1.35rem;
}

.tut-sheet-data > b,
.tut-sheet-data > span {
    margin-left: -1px;
    margin-top: -1px;
}

.tut-sheet-data > b:nth-child(1),
.tut-sheet-data > b:nth-child(5),
.tut-sheet-data > b:nth-child(7),
.tut-sheet-data > b:nth-child(9) {
    margin-left: 0;
}

.tut-sheet-data .wide {
    grid-column: span 3;
}

.tut-sheet-section {
    margin: 0 4px 1.2rem;
}

.tut-sheet-section h3 {
    align-items: center;
    display: grid;
    grid-template-columns: 40px 1fr;
    font-size: .78rem;
    font-weight: 900;
    gap: .65rem;
    line-height: 1.2;
    margin: 0 0 .65rem;
}

.tut-sheet-section h3 span {
    text-align: center;
}

.tut-sheet-lines {
    font-size: .72rem;
    line-height: 1.62rem;
    min-height: 178px;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    background-image: linear-gradient(to bottom, transparent calc(100% - 2px), #000 calc(100% - 1px), transparent 100%);
    background-size: 100% 1.62rem;
}

.tut-sheet-lines.small {
    min-height: 130px;
}

.tut-sheet-evidence {
    color: #2b4758;
    font-size: .64rem;
    font-weight: 700;
    min-height: 18px;
    overflow-wrap: anywhere;
}

.tut-sheet-signatures {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem 2rem;
    margin: 2.5rem 2rem 0;
    text-align: center;
}

.tut-sheet-signatures div {
    min-width: 0;
}

.tut-sheet-signatures span {
    border-top: 1px solid #000;
    display: block;
    height: 1px;
    margin-bottom: .28rem;
}

.tut-sheet-signatures b {
    display: block;
    font-size: .64rem;
    line-height: 1.05;
}

.tut-sheet-signatures .director {
    grid-column: 1 / -1;
    justify-self: center;
    width: 60%;
}

.tut-sheet-signatures .director b {
    font-size: 0;
}

.tut-sheet-signatures .director b::after {
    content: "V\00B0  B\00B0  DIRECTOR";
    font-size: .64rem;
    line-height: 1.05;
}

.tut-director-seal-box {
    grid-column: 1 / -1;
    justify-self: center;
    margin: .15rem 0 -.65rem;
    width: 58%;
}

.tut-director-seal {
    display: block;
    height: auto;
    margin: 0 auto;
    max-height: 56px;
    max-width: 100%;
    object-fit: contain;
    width: min(170px, 100%);
}

.tut-sheets-table td {
    vertical-align: top;
}

.tut-signature-upload-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.tut-signature-upload-grid .tut-evidence-field[hidden] {
    display: none;
}

.tut-evidence-thumbnail {
    display: block;
    width: 82px;
    height: 56px;
    margin-top: 6px;
    overflow: hidden;
    border: 1px solid #b8d8c7;
    border-radius: 6px;
    background: #f7fbf9;
}

.tut-evidence-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 1200px) {
    .tut-sheet-workspace {
        grid-template-columns: 1fr;
    }

    .tut-sheet-side {
        position: static;
    }

    .tut-print-sheet {
        width: min(100%, 620px);
    }
}

@media (max-width: 640px) {
    .tut-signature-upload-grid {
        grid-template-columns: 1fr;
    }
    .tut-evidence-grid,
    .tut-type-switch,
    .tut-sheet-top {
        grid-template-columns: 1fr;
    }

    .tut-sheet-top > div {
        grid-template-columns: 112px 1fr;
        margin-left: 0;
        margin-top: -1px;
    }

    .tut-sheet-top > div:first-child {
        margin-top: 0;
    }

    .tut-sheet-data {
        grid-template-columns: 112px minmax(0, 1fr);
    }

    .tut-sheet-data .wide {
        grid-column: span 1;
    }

    .tut-sheet-brand-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tut-print-sheet {
        padding: 14px;
        width: 100%;
    }
}

@media print {
    @page {
        size: A4 portrait;
        margin: 8mm;
    }

    @page tut-sheet-page {
        size: A4 portrait;
        margin: 8mm;
    }

    @page student-cards-page {
        size: A4 portrait;
        margin: 8mm;
    }

    @page attendance-annual-page {
        size: A4 landscape;
        margin: 8mm;
    }

    .comano-sidebar,
    .topbar,
    .page-title,
    .panel:not(.attendance-monthly-panel):not(.attendance-annual-panel):not(.attendance-annual-level-card):not(.attendance-annual-chart-card):not(.attendance-risk-panel):not(.student-cards-print-panel),
    .admin-ie-submodules,
    .no-print,
    .modal {
        display: none !important;
    }
    body.tut-sheet-printing.comano-body,
    body.tut-sheet-printing.sidebar-collapsed.comano-body,
    body.tut-sheet-printing.sidebar-open.comano-body {
        display: block !important;
        grid-template-columns: none !important;
        width: auto !important;
        max-width: none !important;
        min-height: auto !important;
        background: #fff !important;
        overflow: visible !important;
    }
    body.tut-sheet-printing > .comano-sidebar,
    body.tut-sheet-printing .topbar,
    body.tut-sheet-printing .comano-footer,
    body.tut-sheet-printing .page-title {
        display: none !important;
    }
    body.tut-sheet-printing > .comano-main {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }
    body.tut-sheet-printing .content-wrapper {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }
    body.tut-sheet-printing .panel.tut-sheet-preview-panel {
        border: 0 !important;
        box-shadow: none !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }
    body.tut-sheet-printing .tut-sheet-preview-panel .panel-header,
    body.tut-sheet-printing .tut-sheet-form-panel,
    body.tut-sheet-printing .tut-sheets-table,
    body.tut-sheet-printing .filter-bar {
        display: none !important;
    }
    body.tut-sheet-printing .tut-sheet-workspace,
    body.tut-sheet-printing .tut-sheet-side,
    body.tut-sheet-printing .tut-sheet-stage {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        position: static !important;
        background: #fff !important;
        overflow: visible !important;
    }
    body.tut-sheet-printing .tut-print-sheet {
        border: 0;
        box-shadow: none;
        margin: 0 auto !important;
        min-height: 276mm;
        padding: 4mm 5mm 6mm !important;
        page: tut-sheet-page;
        width: 190mm;
        max-width: none;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    body.tut-sheet-printing .tut-director-seal {
        max-height: none;
        width: 48mm;
    }
    body.comano-body {
        display: block;
        background: #fff;
    }
    .content-wrapper {
        padding: 0;
    }
    .siagie-admin-shell {
        border-left: 0;
        box-shadow: none;
    }
    .environment-table {
        min-width: 0;
        font-size: 10pt;
    }
    .attendance-monthly-panel {
        border: 0;
        box-shadow: none;
    }
    .attendance-monthly-table-wrap {
        max-height: none;
        overflow: visible !important;
    }
    .attendance-monthly-table {
        min-width: 0;
        font-size: 8pt;
    }
    .attendance-monthly-title th {
        font-size: 11pt;
    }
    .attendance-annual-panel,
    .attendance-annual-level-card,
    .attendance-annual-chart-card,
    .attendance-risk-panel {
        border: 0;
        box-shadow: none;
        break-inside: avoid;
    }
    .attendance-annual-panel {
        page: attendance-annual-page;
    }
    .attendance-annual-table-wrap {
        max-height: none;
        overflow: visible !important;
    }
    .attendance-annual-table {
        min-width: 0;
        font-size: 7.4pt;
    }
    .attendance-annual-levels {
        grid-template-columns: 1fr;
    }
    .attendance-annual-chart-grid {
        grid-template-columns: 1fr;
        page: attendance-annual-page;
    }
    .attendance-annual-chart-card {
        border: 1px solid #3f70c9;
        margin-bottom: 8mm;
    }
    .attendance-annual-chart-canvas,
    .attendance-annual-chart-canvas.is-horizontal,
    .attendance-annual-chart-canvas.is-line {
        height: 82mm;
        padding: 4mm;
    }
    .attendance-risk-strip,
    .attendance-risk-table {
        font-size: 8pt;
    }
    .attendance-monthly-student {
        min-width: 170px;
    }
    .attendance-day-head,
    .attendance-monthly-cell,
    .attendance-monthly-total,
    .attendance-monthly-index {
        min-width: 20px;
        width: 20px;
    }
    .student-cards-print-panel {
        border: 0;
        box-shadow: none;
        page: student-cards-page;
    }
    .student-cards-sheet {
        grid-template-columns: repeat(2, 85.6mm);
        justify-content: center;
        column-gap: 3.6mm;
        row-gap: 2.6mm;
        padding: 0;
        background: #fff;
    }
    .student-id-card {
        width: 85.6mm;
        max-width: none;
        height: 53.98mm;
        border-radius: 1.2mm;
        box-shadow: none;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .student-id-card::after {
        right: -4.4mm;
        bottom: -7mm;
        width: 25mm;
        height: 25mm;
    }
    .student-id-card:nth-of-type(8n) {
        break-after: page;
        page-break-after: always;
    }
    .student-id-card-header {
        min-height: 12.8mm;
        padding: 2mm 3mm 1.7mm;
    }
    .student-id-card-header strong {
        font-size: 7.6pt;
    }
    .student-id-card-header span {
        display: block;
        font-size: 3.8pt;
    }
    .student-id-card-body {
        grid-template-columns: 29.5mm 1fr;
        gap: 2mm;
        padding: 2.2mm 3mm 1.5mm;
    }
    .student-id-card-qr {
        width: 29mm;
        height: 29mm;
        padding: .8mm;
    }
    .student-id-card-data span {
        font-size: 4.6pt;
    }
    .student-id-card-data strong {
        font-size: 6.4pt;
    }
    .student-id-card-name strong {
        font-size: 6.2pt;
        max-height: 16pt;
    }
    .student-id-card-name {
        padding-right: 12mm;
    }
    .student-id-card-badge {
        right: 3.8mm;
        bottom: 11.5mm;
        width: 12mm;
        height: 14mm;
    }
    .student-id-card-footer {
        right: 3mm;
        bottom: 2.6mm;
        left: 34mm;
        font-size: 3.9pt;
    }
}