: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);
}

/* Perfil Especialista UGEL: señalización y acabado del modo institucional de consulta. */
.comano-read-only-banner {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin: 0 0 1rem;
    padding: .78rem 1rem;
    color: #124f34;
    background: linear-gradient(135deg, #f4fbf7 0%, #eef8f2 100%);
    border: 1px solid #cce5d5;
    border-left: 4px solid #087443;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(9, 76, 47, .08);
}

.comano-read-only-banner__icon {
    display: inline-grid;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    place-items: center;
    color: #fff;
    background: linear-gradient(145deg, #0a8550, #06643b);
    border-radius: 50%;
    box-shadow: 0 5px 14px rgba(8, 116, 67, .24);
}

.comano-read-only-banner div {
    display: grid;
    gap: .08rem;
    min-width: 0;
}

.comano-read-only-banner strong {
    font-size: .94rem;
    letter-spacing: .01em;
}

.comano-read-only-banner small {
    color: #527363;
    font-size: .78rem;
}

.comano-read-only-banner__badge {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    margin-left: auto;
    padding: .42rem .7rem;
    color: #17613f;
    background: rgba(255, 255, 255, .8);
    border: 1px solid #c7dfd0;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 700;
    white-space: nowrap;
}

.comano-read-only form[data-read-only-form="1"] :is(input, select, textarea):disabled {
    color: #334a40;
    background-color: #f4f7f5;
    border-color: #d8e2dc;
    opacity: 1;
    cursor: not-allowed;
}

@media (max-width: 640px) {
    .comano-read-only-banner {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .comano-read-only-banner__badge {
        width: 100%;
        justify-content: center;
        margin-left: 0;
    }
}

/* Docentes · Consolidado de metas por competencia (referencia 2026). */
.teacher-goals-dashboard {
    --tgd-dark: #004b28;
    --tgd-green: #087a45;
    --tgd-ad: #087a45;
    --tgd-a: #91ce3c;
    --tgd-b: #ffbd0d;
    --tgd-c: #f12e2b;
    --tgd-gold: #b87c00;
    --tgd-line: #dfe6e1;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #fff;
    color: #17241c;
    box-shadow: none;
    font-family: Arial, Helvetica, sans-serif;
}

.teacher-goals-dashboard,
.teacher-goals-dashboard * {
    box-sizing: border-box;
}

.teacher-goals-dashboard__hero {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 15px 50px;
    background: linear-gradient(105deg, #003f22 0%, #00592e 58%, #003f22 100%);
    box-shadow: none;
}

.teacher-goals-dashboard__hero h1 {
    min-width: 0;
    flex: 1;
    margin: 0;
    color: #ffc72c;
    font-size: clamp(1.15rem, 1.65vw, 1.75rem);
    font-weight: 900;
    letter-spacing: -.015em;
    line-height: 1.15;
    text-align: left;
}

.teacher-goals-dashboard__back {
    min-width: 102px;
    min-height: 40px;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 8px;
    background: #fff;
    color: #075b34;
    font-size: .78rem;
    font-weight: 850;
    text-decoration: none;
    box-shadow: 0 3px 10px rgba(0, 30, 15, .18);
    transition: transform .15s ease, background-color .15s ease, color .15s ease;
}

.teacher-goals-dashboard__back:hover {
    transform: translateY(-1px);
    background: #fff4c8;
    color: #004b28;
}

.teacher-goals-dashboard__back:focus-visible {
    outline: 3px solid rgba(255, 199, 44, .55);
    outline-offset: 3px;
}

.teacher-goals-dashboard__filters {
    display: grid;
    grid-template-columns: minmax(250px, 1.25fr) minmax(160px, .88fr) minmax(210px, 1.05fr) minmax(145px, .75fr) minmax(145px, .72fr) auto;
    gap: 22px;
    align-items: end;
    margin: 0 20px;
    padding: 22px 4px 24px;
    border: 0;
    border-bottom: 1px solid #e4e9e6;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
}

.teacher-goals-dashboard__filter {
    min-width: 0;
}

.teacher-goals-dashboard__filter > span:first-child {
    display: block;
    margin: 0 0 7px 8px;
    color: #086137;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .01em;
}

.teacher-goals-dashboard__control {
    position: relative;
    display: block;
    min-width: 0;
}

.teacher-goals-dashboard__control > i {
    position: absolute;
    top: 50%;
    left: 16px;
    z-index: 2;
    transform: translateY(-50%);
    color: var(--tgd-green);
    font-size: 1rem;
    pointer-events: none;
}

.teacher-goals-dashboard__control select {
    width: 100%;
    height: 42px;
    padding: 0 32px 0 16px;
    overflow: hidden;
    border: 1px solid #d7ded9;
    border-radius: 7px;
    outline: 0;
    background: #fff;
    color: #202c25;
    font-size: .78rem;
    font-weight: 740;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(18, 42, 27, .04);
}

.teacher-goals-dashboard__control--grade select {
    padding-left: 45px;
}

.teacher-goals-dashboard__control select:disabled {
    opacity: 1;
    cursor: default;
    background: #fff;
    color: #202c25;
}

.teacher-goals-dashboard__control select:focus-visible {
    border-color: var(--tgd-green);
    box-shadow: 0 0 0 3px rgba(8, 122, 69, .13);
}

.teacher-goals-dashboard__advanced {
    min-width: 168px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 15px;
    border: 1px solid #84b99b;
    border-radius: 7px;
    background: #fff;
    color: #096239;
    font: inherit;
    font-size: .73rem;
    font-weight: 850;
}

.teacher-goals-dashboard__advanced i {
    font-size: 1rem;
}

.teacher-goals-dashboard__advanced:hover:not(:disabled) {
    background: #f0f8f3;
}

.teacher-goals-dashboard__advanced:disabled {
    opacity: .55;
}

.teacher-goals-dashboard__alert {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 20px 0;
    padding: 9px 12px;
    border: 1px solid #efca82;
    border-radius: 7px;
    background: #fff8e8;
    color: #805600;
    font-size: .75rem;
}

.teacher-goals-dashboard__area-label {
    margin: 14px 30px 9px;
    color: #11673e;
    font-size: .73rem;
    font-weight: 900;
}

.teacher-goals-dashboard__area-strip {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    margin: 0 20px 14px;
    overflow: hidden;
    border: 1px solid #dbe3de;
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 2px 7px rgba(22, 55, 34, .04);
}

.teacher-goals-dashboard__area-arrow {
    display: grid;
    place-items: center;
    border: 0;
    background: #fff;
    color: #149253;
    font-size: 1.15rem;
}

.teacher-goals-dashboard__area-arrow:first-child {
    border-right: 1px solid #dde4df;
}

.teacher-goals-dashboard__area-arrow:last-child {
    border-left: 1px solid #dde4df;
}

.teacher-goals-dashboard__area-arrow:hover {
    background: #f0f8f3;
}

.teacher-goals-dashboard__areas {
    min-width: 0;
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.teacher-goals-dashboard__areas::-webkit-scrollbar {
    display: none;
}

.teacher-goals-dashboard__areas a {
    min-width: 185px;
    min-height: 48px;
    display: inline-flex;
    flex: 1 0 auto;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 17px;
    border-right: 1px solid #e0e6e2;
    border-bottom: 3px solid transparent;
    background: #fff;
    color: #536170;
    font-size: .72rem;
    font-weight: 740;
    text-decoration: none;
    white-space: nowrap;
}

.teacher-goals-dashboard__areas a i {
    color: #586878;
    font-size: 1.15rem;
}

.teacher-goals-dashboard__areas a:hover {
    background: #f6faf7;
    color: #087442;
}

.teacher-goals-dashboard__areas a.is-active {
    border-bottom-color: #0d9a55;
    background: #fff;
    color: #076238;
}

.teacher-goals-dashboard__areas a.is-active i {
    color: #078247;
}

.teacher-goals-dashboard__workspace {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(720px, 1.36fr) minmax(520px, 1fr);
    gap: 20px;
    align-items: stretch;
    margin: 0 20px 16px;
}

.teacher-goals-dashboard__matrix-card,
.teacher-goals-dashboard__chart-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #dfe6e1;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(21, 58, 36, .055);
}

.teacher-goals-dashboard__matrix-title {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 16px;
    border-bottom: 1px solid #e6ece8;
    background: linear-gradient(180deg, #fff 0%, #fbfdfb 100%);
}

.teacher-goals-dashboard__matrix-title > div {
    min-width: 0;
}

.teacher-goals-dashboard__matrix-title small {
    display: block;
    margin-bottom: 2px;
    color: #789184;
    font-size: .56rem;
    font-weight: 900;
    letter-spacing: .1em;
}

.teacher-goals-dashboard__matrix-title h2 {
    margin: 0;
    color: #0a6137;
    font-size: .94rem;
    font-weight: 900;
}

.teacher-goals-dashboard__matrix-title button {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid #d7e3dc;
    border-radius: 7px;
    background: #fff;
    color: #a56f00;
}

.teacher-goals-dashboard__matrix-title button:hover {
    background: #fff8e3;
}

.teacher-goals-dashboard__table-scroll {
    min-width: 0;
    max-height: 620px;
    overflow: auto;
    padding: 0 14px 14px;
}

.teacher-goals-dashboard__matrix {
    width: 100%;
    min-width: 850px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    color: #17231c;
    font-size: .68rem;
}

.teacher-goals-dashboard__matrix caption {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.teacher-goals-dashboard__matrix th,
.teacher-goals-dashboard__matrix td {
    height: 38px;
    padding: 6px 5px;
    border-right: 1px solid #d8e0db;
    border-bottom: 1px solid #d8e0db;
    text-align: center;
    vertical-align: middle;
}

.teacher-goals-dashboard__matrix tr > :first-child {
    border-left: 1px solid #d8e0db;
}

.teacher-goals-dashboard__matrix thead tr:first-child > * {
    border-top: 1px solid #07502d;
}

.teacher-goals-dashboard__matrix thead th {
    height: 31px;
    border-color: #7aa58d;
    background: linear-gradient(180deg, #075e34, #034b29);
    color: #fff;
    font-size: .65rem;
    font-weight: 900;
}

.teacher-goals-dashboard__matrix thead tr:first-child th:first-child {
    width: 160px;
    border-top-left-radius: 7px;
}

.teacher-goals-dashboard__matrix thead tr:first-child th:nth-child(2) {
    width: 92px;
}

.teacher-goals-dashboard__matrix thead tr:first-child th:last-child {
    border-top-right-radius: 7px;
}

.teacher-goals-dashboard__matrix thead th.is-goal {
    border-color: #dcb640;
    background: linear-gradient(180deg, #b88108, #a96e00);
}

.teacher-goals-dashboard__competency {
    padding: 10px 12px !important;
    background: #fbfdfb;
    color: #075b34;
    font-size: .69rem;
    font-weight: 850;
    line-height: 1.45;
}

.teacher-goals-dashboard__achievement {
    padding: 0 !important;
    color: #fff;
    font-size: .8rem;
    font-weight: 900;
}

.teacher-goals-dashboard__achievement--ad { background: linear-gradient(135deg, #138b52, #05703e); }
.teacher-goals-dashboard__achievement--a { background: linear-gradient(135deg, #a6d954, #86c82e); color: #17330c; }
.teacher-goals-dashboard__achievement--b { background: linear-gradient(135deg, #ffd331, #ffb500); color: #332300; }
.teacher-goals-dashboard__achievement--c { background: linear-gradient(135deg, #fa4a44, #ea201d); }

.teacher-goals-dashboard__matrix tbody td {
    font-size: .72rem;
    font-weight: 650;
}

.teacher-goals-dashboard__matrix tbody td.is-goal,
.teacher-goals-dashboard__total-row td.is-goal {
    background: #fff8df;
    color: #8a5c00;
    font-weight: 850;
}

.teacher-goals-dashboard__matrix tbody tr.is-competency-start > * {
    border-top: 1px solid #84b99b;
}

.teacher-goals-dashboard__total-row th,
.teacher-goals-dashboard__total-row td {
    height: 40px;
    background: #fbfcfb;
    font-weight: 900 !important;
}

.teacher-goals-dashboard__charts {
    min-width: 0;
    max-height: 760px;
    display: grid;
    gap: 12px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.teacher-goals-dashboard__chart-card {
    min-height: 300px;
}

.teacher-goals-dashboard__chart-card > header {
    min-height: 52px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 8px 15px 4px;
}

.teacher-goals-dashboard__chart-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e7f5eb;
    color: #087a45;
    font-size: 1.15rem;
}

.teacher-goals-dashboard__chart-card h2 {
    margin: 0;
    color: #075b34;
    font-size: .91rem;
    font-weight: 900;
    line-height: 1.18;
    white-space: normal;
}

.teacher-goals-dashboard__chart-card > header > i {
    color: #536159;
}

.teacher-goals-dashboard__canvas {
    position: relative;
    height: 242px;
    min-height: 0;
    padding: 0 9px 6px;
}

.teacher-goals-dashboard__canvas canvas {
    width: 100% !important;
    height: 100% !important;
}

.teacher-goals-dashboard__kpis {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    margin: 0 20px 13px;
}

.teacher-goals-dashboard__kpi {
    min-width: 0;
    min-height: 108px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px;
    border: 1px solid #dfe5e1;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 3px 9px rgba(25, 57, 38, .045);
}

.teacher-goals-dashboard__kpi-icon,
.teacher-goals-dashboard__kpi-badge {
    width: 54px;
    height: 54px;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    font-size: 1.12rem;
    font-weight: 900;
}

.teacher-goals-dashboard__kpi-icon {
    border: 7px solid #e8f4eb;
    color: #087a45;
    font-size: 1.38rem;
}

.teacher-goals-dashboard__kpi-badge {
    border: 7px solid;
    color: #fff;
}

.teacher-goals-dashboard__kpi--ad .teacher-goals-dashboard__kpi-badge { border-color: #d7f0df; background: var(--tgd-ad); }
.teacher-goals-dashboard__kpi--a .teacher-goals-dashboard__kpi-badge { border-color: #e5f5c9; background: var(--tgd-a); color: #203d0b; }
.teacher-goals-dashboard__kpi--b .teacher-goals-dashboard__kpi-badge { border-color: #fff0bd; background: var(--tgd-b); color: #3b2900; }
.teacher-goals-dashboard__kpi--c .teacher-goals-dashboard__kpi-badge { border-color: #ffd9d8; background: var(--tgd-c); }
.teacher-goals-dashboard__kpi--goal .teacher-goals-dashboard__kpi-icon { border-color: #e4f0f7; color: #287bb1; }

.teacher-goals-dashboard__kpi > div {
    min-width: 0;
}

.teacher-goals-dashboard__kpi small,
.teacher-goals-dashboard__kpi strong,
.teacher-goals-dashboard__kpi > div > span {
    display: block;
}

.teacher-goals-dashboard__kpi small {
    min-height: 31px;
    color: #28342c;
    font-size: .65rem;
    line-height: 1.2;
}

.teacher-goals-dashboard__kpi strong {
    margin: 2px 0;
    color: #09633a;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1;
}

.teacher-goals-dashboard__kpi > div > span {
    color: #5e6b63;
    font-size: .61rem;
    white-space: nowrap;
}

.teacher-goals-dashboard__status-strip {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(540px, .95fr);
    align-items: center;
    min-height: 45px;
    margin: 0 20px 5px;
    overflow: hidden;
    border: 1px solid #dde5df;
    border-radius: 8px;
    background: #fff;
}

.teacher-goals-dashboard__status-strip p {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 8px 16px;
    background: #f4fbf6;
    color: #33714d;
    font-size: .68rem;
}

.teacher-goals-dashboard__status-strip p i {
    color: #2a995b;
    font-size: 1.02rem;
}

.teacher-goals-dashboard__legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    padding: 7px 10px;
    color: #5c6861;
    font-size: .63rem;
}

.teacher-goals-dashboard__legend strong {
    white-space: nowrap;
}

.teacher-goals-dashboard__legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.teacher-goals-dashboard__legend b {
    min-width: 21px;
    height: 21px;
    display: grid;
    place-items: center;
    border-radius: 3px;
    color: #fff;
    font-size: .61rem;
}

.teacher-goals-dashboard__legend b.is-ad { background: var(--tgd-ad); }
.teacher-goals-dashboard__legend b.is-a { background: var(--tgd-a); color: #203d0b; }
.teacher-goals-dashboard__legend b.is-b { background: var(--tgd-b); color: #3b2900; }
.teacher-goals-dashboard__legend b.is-c { background: var(--tgd-c); }

/* Edición profesional e integrada de las metas por competencia. */
.teacher-goals-dashboard__editable-badge {
    min-height: 30px;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    border: 1px solid #edcf78;
    border-radius: 999px;
    background: #fff8df;
    color: #8b5d00;
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .01em;
}

.teacher-goals-dashboard__editable-badge.is-readonly {
    border-color: #d9e2dd;
    background: #f5f8f6;
    color: #617069;
}

.teacher-goals-dashboard__matrix-card > form {
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.teacher-goals-dashboard__editor-guide {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 14px 9px;
    padding: 9px 11px;
    border: 1px solid #d8eadf;
    border-radius: 8px;
    background: linear-gradient(90deg, #f0faf4, #f9fcfa);
    color: #315a43;
}

.teacher-goals-dashboard__editor-guide.is-readonly {
    border-color: #e0e6e2;
    background: #f7f9f8;
    color: #617069;
}

.teacher-goals-dashboard__editor-guide-icon {
    width: 30px;
    height: 30px;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 8px;
    background: #087a45;
    color: #fff;
    box-shadow: 0 4px 11px rgba(8, 122, 69, .18);
}

.teacher-goals-dashboard__editor-guide.is-readonly .teacher-goals-dashboard__editor-guide-icon {
    background: #76847c;
    box-shadow: none;
}

.teacher-goals-dashboard__editor-guide p,
.teacher-goals-dashboard__editor-guide strong,
.teacher-goals-dashboard__editor-guide span {
    margin: 0;
}

.teacher-goals-dashboard__editor-guide p {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: .65rem;
    line-height: 1.25;
}

.teacher-goals-dashboard__editor-guide strong {
    color: #0a6238;
    font-size: .69rem;
}

.teacher-goals-dashboard__editor-guide.is-readonly strong {
    color: #4e5c54;
}

.teacher-goals-dashboard__goal-heading-note {
    display: block;
    margin-top: 3px;
    color: #fff1b7;
    font-size: .48rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.teacher-goals-dashboard__matrix thead th.is-goal.is-editable {
    position: relative;
    background: linear-gradient(180deg, #d39a05, #b97d00);
}

.teacher-goals-dashboard__competency > span,
.teacher-goals-dashboard__competency > small,
.teacher-goals-dashboard__competency > em {
    display: block;
}

.teacher-goals-dashboard__competency > small {
    margin-top: 7px;
    color: #5f7568;
    font-size: .57rem;
    font-weight: 700;
    line-height: 1.3;
}

.teacher-goals-dashboard__competency > small.is-warning {
    padding: 5px 6px;
    border-radius: 5px;
    background: #fff1d7;
    color: #8b5800;
}

.teacher-goals-dashboard__competency > em {
    width: fit-content;
    margin: 7px auto 0;
    padding: 3px 7px;
    border-radius: 999px;
    font-size: .54rem;
    font-style: normal;
    font-weight: 850;
    line-height: 1.2;
}

.teacher-goals-dashboard__competency > em.is-valid {
    background: #e5f6eb;
    color: #087442;
}

.teacher-goals-dashboard__competency > em.is-invalid {
    background: #fff0e8;
    color: #a4461e;
}

.teacher-goals-dashboard__goal-input-cell {
    padding: 4px !important;
    background: linear-gradient(180deg, #fffaf0, #fff5d8) !important;
}

.teacher-goals-dashboard__goal-input-cell input {
    width: 100%;
    min-width: 48px;
    height: 30px;
    padding: 2px 4px;
    border: 1px solid #dab64e;
    border-radius: 6px;
    outline: 0;
    background: #fff;
    color: #5f4100;
    font: inherit;
    font-size: .76rem;
    font-weight: 900;
    text-align: center;
    box-shadow: inset 0 1px 2px rgba(68, 44, 0, .05);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.teacher-goals-dashboard__goal-input-cell input:hover:not(:disabled) {
    border-color: #b98100;
}

.teacher-goals-dashboard__goal-input-cell input:focus-visible {
    border-color: #087a45;
    box-shadow: 0 0 0 3px rgba(8, 122, 69, .18);
    transform: translateY(-1px);
}

.teacher-goals-dashboard__goal-input-cell input[aria-invalid="true"] {
    border-color: #dc6846;
    background: #fffaf8;
    box-shadow: 0 0 0 2px rgba(220, 104, 70, .1);
}

.teacher-goals-dashboard__goal-input-cell input:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.teacher-goals-dashboard__goal-percent {
    font-variant-numeric: tabular-nums;
}

.teacher-goals-dashboard__matrix tbody.is-valid .teacher-goals-dashboard__total-row td.is-goal {
    background: #edf8f1;
    color: #087442;
}

.teacher-goals-dashboard__matrix tbody.is-invalid .teacher-goals-dashboard__total-row td.is-goal {
    background: #fff0e8;
    color: #a4461e;
}

.teacher-goals-dashboard__savebar {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 11px 14px;
    border-top: 1px solid #dfe7e2;
    background: linear-gradient(180deg, #fbfdfc, #f3f8f5);
    box-shadow: 0 -5px 14px rgba(13, 63, 36, .04);
}

.teacher-goals-dashboard__save-status {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.teacher-goals-dashboard__save-status > span {
    width: 34px;
    height: 34px;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: #e5f5eb;
    color: #087442;
    font-size: 1rem;
}

.teacher-goals-dashboard__save-status p,
.teacher-goals-dashboard__save-status strong,
.teacher-goals-dashboard__save-status small {
    display: block;
    margin: 0;
}

.teacher-goals-dashboard__save-status strong {
    color: #234331;
    font-size: .7rem;
    line-height: 1.2;
}

.teacher-goals-dashboard__save-status small {
    margin-top: 3px;
    color: #68776e;
    font-size: .61rem;
    line-height: 1.25;
}

.teacher-goals-dashboard__matrix-card form[data-goal-state="invalid"] .teacher-goals-dashboard__save-status > span {
    background: #fff0e8;
    color: #b24d25;
}

.teacher-goals-dashboard__matrix-card form[data-goal-state="valid"] .teacher-goals-dashboard__save-status > span {
    background: #def4e6;
    color: #087442;
}

.teacher-goals-dashboard__save-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

.teacher-goals-dashboard__save-actions button {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 13px;
    border: 1px solid #066238;
    border-radius: 7px;
    background: linear-gradient(180deg, #0a884c, #06713f);
    color: #fff;
    font: inherit;
    font-size: .67rem;
    font-weight: 900;
    box-shadow: 0 4px 10px rgba(6, 113, 63, .18);
}

.teacher-goals-dashboard__save-actions button:hover:not(:disabled) {
    background: linear-gradient(180deg, #087b45, #045e34);
    transform: translateY(-1px);
}

.teacher-goals-dashboard__save-actions button:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(8, 122, 69, .2);
}

.teacher-goals-dashboard__save-actions button.is-secondary {
    border-color: #cbd7cf;
    background: #fff;
    color: #526159;
    box-shadow: none;
}

.teacher-goals-dashboard__save-actions button.is-secondary:hover:not(:disabled) {
    border-color: #9eb3a6;
    background: #f4f8f5;
}

.teacher-goals-dashboard__save-actions button:disabled {
    opacity: .5;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.teacher-goals-dashboard__goal-dialog {
    width: min(590px, calc(100vw - 28px));
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 13px;
    color: #17241c;
    box-shadow: 0 22px 70px rgba(0, 47, 24, .28);
}

.teacher-goals-dashboard__goal-dialog::backdrop {
    background: rgba(4, 40, 23, .55);
    backdrop-filter: blur(2px);
}

.teacher-goals-dashboard__goal-dialog form {
    padding: 0 20px 20px;
}

.teacher-goals-dashboard__goal-dialog header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 0 -20px 16px;
    padding: 15px 20px;
    background: #07542e;
    color: #fff;
}

.teacher-goals-dashboard__goal-dialog header small,
.teacher-goals-dashboard__goal-dialog header h2 {
    display: block;
    margin: 0;
}

.teacher-goals-dashboard__goal-dialog header small {
    color: #c9ebd7;
    font-size: .62rem;
    letter-spacing: .1em;
}

.teacher-goals-dashboard__goal-dialog header h2 {
    font-size: 1.03rem;
}

.teacher-goals-dashboard__goal-dialog header button {
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 1rem;
}

.teacher-goals-dashboard__goal-dialog form > p {
    margin: 0 0 13px;
    color: #5d6a62;
    font-size: .75rem;
}

.teacher-goals-dashboard__goal-fields {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.teacher-goals-dashboard__goal-fields label {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5px 8px;
    align-items: center;
    padding: 9px;
    border: 1px solid #dce4df;
    border-radius: 8px;
}

.teacher-goals-dashboard__goal-fields label > span {
    font-size: .75rem;
    font-weight: 900;
}

.teacher-goals-dashboard__goal-fields input {
    width: 100%;
    height: 34px;
    border: 1px solid #cdd8d1;
    border-radius: 6px;
    text-align: center;
    font-weight: 850;
}

.teacher-goals-dashboard__goal-fields small {
    grid-column: 1 / -1;
    color: #6a766e;
    text-align: right;
}

.teacher-goals-dashboard__observation {
    display: block;
    margin-top: 14px;
}

.teacher-goals-dashboard__observation > span {
    display: block;
    margin-bottom: 5px;
    color: #31513e;
    font-size: .72rem;
    font-weight: 850;
}

.teacher-goals-dashboard__observation textarea {
    width: 100%;
    padding: 9px 10px;
    resize: vertical;
    border: 1px solid #cfdad3;
    border-radius: 7px;
    font: inherit;
    font-size: .74rem;
}

.teacher-goals-dashboard__dialog-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 9px;
    align-items: center;
    margin-top: 15px;
}

.teacher-goals-dashboard__dialog-actions p {
    margin: 0;
    font-size: .69rem;
}

.teacher-goals-dashboard__dialog-actions p.is-valid { color: #087442; }
.teacher-goals-dashboard__dialog-actions p.is-invalid { color: #aa6500; }

.teacher-goals-dashboard__dialog-actions button {
    min-height: 39px;
    padding: 7px 13px;
    border: 1px solid #066238;
    border-radius: 7px;
    background: #067642;
    color: #fff;
    font: inherit;
    font-size: .72rem;
    font-weight: 850;
}

.teacher-goals-dashboard__dialog-actions button.is-secondary {
    border-color: #cbd6cf;
    background: #fff;
    color: #46564c;
}

.teacher-goals-dashboard__dialog-actions button:disabled {
    opacity: .5;
}

.teacher-goals-dashboard__empty {
    min-height: 380px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 7px;
    margin: 15px 20px;
    border: 1px dashed #acc4b5;
    border-radius: 10px;
    color: #65746a;
    text-align: center;
}

.teacher-goals-dashboard__empty i { color: #789f87; font-size: 2.5rem; }
.teacher-goals-dashboard__empty h2,
.teacher-goals-dashboard__empty p { margin: 0; }

@media (max-width: 1450px) {
    .teacher-goals-dashboard__filters {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 12px;
    }

    .teacher-goals-dashboard__filter--institution { grid-column: span 2; }
    .teacher-goals-dashboard__advanced { min-width: 0; }
    .teacher-goals-dashboard__workspace { grid-template-columns: minmax(650px, 1.22fr) minmax(450px, 1fr); gap: 14px; }
    .teacher-goals-dashboard__kpis { gap: 8px; }
    .teacher-goals-dashboard__kpi { gap: 8px; padding: 10px; }
    .teacher-goals-dashboard__kpi-icon,
    .teacher-goals-dashboard__kpi-badge { width: 45px; height: 45px; border-width: 5px; }
}

@media (max-width: 1180px) {
    .teacher-goals-dashboard__workspace { grid-template-columns: 1fr; }
    .teacher-goals-dashboard__charts { max-height: none; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
    .teacher-goals-dashboard__kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .teacher-goals-dashboard__status-strip { grid-template-columns: 1fr; }
    .teacher-goals-dashboard__legend { min-height: 44px; }
}

@media (max-width: 760px) {
    .teacher-goals-dashboard__hero { min-height: 72px; flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 16px; }
    .teacher-goals-dashboard__hero h1 { font-size: .95rem; line-height: 1.25; }
    .teacher-goals-dashboard__back { align-self: flex-end; order: -1; min-width: 94px; min-height: 36px; padding: 6px 13px; }
    .teacher-goals-dashboard__filters { grid-template-columns: 1fr 1fr; gap: 11px; margin: 0 12px; padding-top: 15px; }
    .teacher-goals-dashboard__filter--institution { grid-column: 1 / -1; }
    .teacher-goals-dashboard__advanced { width: 100%; min-width: 0; }
    .teacher-goals-dashboard__area-label { margin-left: 20px; }
    .teacher-goals-dashboard__area-strip,
    .teacher-goals-dashboard__workspace,
    .teacher-goals-dashboard__kpis,
    .teacher-goals-dashboard__status-strip { margin-right: 12px; margin-left: 12px; }
    .teacher-goals-dashboard__areas a { min-width: 165px; }
    .teacher-goals-dashboard__charts { grid-template-columns: 1fr; }
    .teacher-goals-dashboard__chart-card { min-height: 285px; }
    .teacher-goals-dashboard__canvas { height: 230px; }
    .teacher-goals-dashboard__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .teacher-goals-dashboard__legend { flex-wrap: wrap; gap: 8px 11px; }
    .teacher-goals-dashboard__goal-fields { grid-template-columns: repeat(2, 1fr); }
    .teacher-goals-dashboard__dialog-actions { grid-template-columns: 1fr 1fr; }
    .teacher-goals-dashboard__dialog-actions p { grid-column: 1 / -1; }
}

@media (max-width: 430px) {
    /* Compatibilidad del bloque visual base. */
    .teacher-goals-dashboard__filters { grid-template-columns: 1fr; }
    .teacher-goals-dashboard__filter--institution { grid-column: auto; }
    .teacher-goals-dashboard__kpis { grid-template-columns: 1fr; }
    .teacher-goals-dashboard__status-strip p { align-items: flex-start; }
}

@media (max-width: 760px) {
    .teacher-goals-dashboard__matrix-title {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 9px;
    }

    .teacher-goals-dashboard__editable-badge {
        min-height: 28px;
    }

    .teacher-goals-dashboard__editor-guide {
        align-items: flex-start;
        margin: 9px 10px;
    }

    .teacher-goals-dashboard__table-scroll {
        padding-right: 10px;
        padding-left: 10px;
    }

    .teacher-goals-dashboard__matrix {
        min-width: 890px;
    }

    .teacher-goals-dashboard__savebar {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .teacher-goals-dashboard__save-actions {
        justify-content: flex-end;
    }
}

@media (max-width: 430px) {
    .teacher-goals-dashboard__editor-guide p {
        font-size: .62rem;
    }

    .teacher-goals-dashboard__save-status {
        align-items: flex-start;
    }

    .teacher-goals-dashboard__save-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .teacher-goals-dashboard__save-actions button {
        width: 100%;
    }
}

/* Esta ruta reproduce el tablero de referencia a ancho completo. */
body.teacher-goals-focus.comano-body,
body.teacher-goals-focus.sidebar-collapsed.comano-body,
body.teacher-goals-focus.sidebar-open.comano-body {
    display: block !important;
    min-height: 100vh;
    background: #fff;
    overflow-x: hidden;
}

body.teacher-goals-focus.comano-body > .comano-sidebar,
body.teacher-goals-focus.comano-body > .comano-main > .topbar,
body.teacher-goals-focus.comano-body > .comano-main > .comano-footer {
    display: none !important;
}

body.teacher-goals-focus.comano-body > .comano-main {
    width: 100%;
    max-width: none;
    min-height: 100vh;
    display: block;
    overflow: visible;
}

body.teacher-goals-focus.comano-body > .comano-main > .content-wrapper {
    width: 100%;
    max-width: none;
    min-height: 100vh;
    margin: 0;
    padding: 0 !important;
}

/* APP UGEL H · Anexo 03 mensual de asistencia docente */
.ugel-annex03-register {
    --annex-blue: #5b9bd5;
    --annex-blue-dark: #2e75b6;
    --annex-line: #86a9e6;
    --annex-soft: #eef6fd;
    --annex-focus: #2563eb;
    margin: 0 auto;
    padding: 1rem;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 0.9rem;
    box-shadow: 0 14px 36px rgba(15, 47, 78, 0.08);
}

.ugel-annex03-register.is-secondary {
    --annex-blue: #70ad47;
    --annex-blue-dark: #548235;
    --annex-line: #93c47d;
    --annex-soft: #eef7e9;
    --annex-focus: #3f7d25;
}

.ugel-annex03-register.is-initial {
    --annex-blue: #f4b183;
    --annex-blue-dark: #c65911;
    --annex-line: #ed9a61;
    --annex-soft: #fff2e8;
    --annex-focus: #c65911;
}

.ugel-annex03-register-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    gap: 1rem;
    align-items: center;
    margin-bottom: 0.8rem;
}

.ugel-annex03-register-heading > span {
    display: block;
    color: #0b1727;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.35rem, 2.5vw, 2rem);
    font-weight: 900;
    line-height: 1;
    text-align: center;
}

.ugel-annex03-register-heading h1 {
    margin: 0.35rem 0 0;
    padding: 0.35rem 0.55rem;
    background: var(--annex-blue);
    color: #fff;
    font-size: clamp(0.95rem, 1.75vw, 1.3rem);
    font-weight: 900;
    letter-spacing: 0.01em;
}

.ugel-annex03-register-back {
    display: grid;
    gap: 0.3rem;
    justify-items: center;
    color: var(--annex-blue-dark);
    text-align: center;
    text-decoration: none;
}

.ugel-annex03-register-back i {
    font-size: 3.3rem;
    line-height: 1;
}

.ugel-annex03-register-back strong {
    width: 100%;
    padding: 0.6rem 0.4rem;
    border-radius: 0.55rem;
    background: var(--annex-blue);
    box-shadow: 0 4px 9px rgba(30, 64, 175, 0.24);
    color: #fff;
    font-size: 0.78rem;
}

.ugel-annex03-register-back:hover,
.ugel-annex03-register-back:focus-visible {
    color: var(--annex-blue-dark);
    transform: translateY(-1px);
}

.ugel-annex03-register-months {
    display: flex;
    gap: 0.35rem;
    margin-bottom: 0.65rem;
    overflow-x: auto;
    padding-bottom: 0.2rem;
}

.ugel-annex03-register-months a {
    flex: 1 0 auto;
    min-width: 76px;
    padding: 0.38rem 0.55rem;
    border: 1px solid var(--annex-line);
    border-radius: 0.4rem;
    background: var(--annex-soft);
    color: var(--annex-blue-dark);
    font-size: 0.72rem;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
}

.ugel-annex03-register-months a[aria-current="page"] {
    border-color: var(--annex-blue-dark);
    background: var(--annex-blue-dark);
    color: #fff;
}

.ugel-annex03-register-meta {
    display: grid;
    grid-template-columns: repeat(6, minmax(105px, 1fr));
    max-width: 980px;
    margin-bottom: 0.8rem;
    border-top: 1px solid var(--annex-line);
    border-left: 1px solid var(--annex-line);
}

.ugel-annex03-register-meta-item {
    min-width: 0;
    border-right: 1px solid var(--annex-line);
    border-bottom: 1px solid var(--annex-line);
}

.ugel-annex03-register-meta-item strong,
.ugel-annex03-register-meta-item span {
    display: block;
    padding: 0.18rem 0.45rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ugel-annex03-register-meta-item strong {
    background: var(--annex-blue);
    color: #fff;
    font-size: 0.68rem;
}

.ugel-annex03-register-meta-item span {
    min-height: 1.45rem;
    color: #12263b;
    font-size: 0.72rem;
    font-weight: 700;
}

.ugel-annex03-register-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    margin: 0.7rem 0;
    padding: 0.55rem 0.7rem;
    border-radius: 0.55rem;
    background: var(--annex-soft);
}

.ugel-annex03-register-actions p {
    margin: 0;
    color: var(--annex-blue-dark);
    font-size: 0.82rem;
}

.ugel-annex03-register-actions > div {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.ugel-annex03-register:is(.is-secondary, .is-initial) .ugel-annex03-register-actions .btn-primary {
    border-color: var(--annex-blue-dark);
    background: var(--annex-blue-dark);
}

.ugel-annex03-register:is(.is-secondary, .is-initial) .ugel-annex03-register-actions .btn-outline-primary,
.ugel-annex03-register:is(.is-secondary, .is-initial) .ugel-annex03-register-actions .btn-outline-secondary {
    border-color: var(--annex-blue-dark);
    color: var(--annex-blue-dark);
}

.ugel-annex03-register:is(.is-secondary, .is-initial) .ugel-annex03-register-actions .btn-outline-primary:hover,
.ugel-annex03-register:is(.is-secondary, .is-initial) .ugel-annex03-register-actions .btn-outline-primary:focus-visible,
.ugel-annex03-register:is(.is-secondary, .is-initial) .ugel-annex03-register-actions .btn-outline-secondary:hover,
.ugel-annex03-register:is(.is-secondary, .is-initial) .ugel-annex03-register-actions .btn-outline-secondary:focus-visible {
    background: var(--annex-blue-dark);
    color: #fff;
}

.ugel-annex03-register-table-wrap {
    width: 100%;
    overflow: auto;
    border: 1px solid var(--annex-line);
    background: #fff;
}

.ugel-annex03-register-table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    color: #10243b;
    font-size: 0.66rem;
}

.ugel-annex03-register-table th,
.ugel-annex03-register-table td {
    height: 31px;
    padding: 0.16rem 0.3rem;
    border: 1px solid var(--annex-line);
    text-align: center;
    vertical-align: middle;
}

.ugel-annex03-register-table thead th {
    background: var(--annex-blue);
    color: #fff;
    font-weight: 800;
}

.ugel-annex03-register-table th.is-number,
.ugel-annex03-register-table td.is-number {
    width: 36px;
    min-width: 36px;
}

.ugel-annex03-register-table th.is-name,
.ugel-annex03-register-table td.is-name {
    width: 220px;
    min-width: 220px;
    text-align: left;
    font-weight: 700;
}

.ugel-annex03-register-table tbody td:nth-child(3) {
    min-width: 78px;
}

.ugel-annex03-register-table tbody td:nth-child(4) {
    min-width: 100px;
    text-align: left;
}

.ugel-annex03-register-table tbody td:nth-child(5) {
    min-width: 88px;
}

.ugel-annex03-register-table tbody td:nth-child(6) {
    min-width: 60px;
}

.ugel-annex03-register-table th.is-day,
.ugel-annex03-register-table td.is-attendance {
    width: 38px;
    min-width: 38px;
    padding: 0;
}

.ugel-annex03-register-table th.is-day span,
.ugel-annex03-register-table th.is-day small {
    display: block;
    line-height: 1.15;
}

.ugel-annex03-register-table th.is-day small {
    margin-top: 0.15rem;
    font-size: 0.58rem;
    font-weight: 600;
}

.ugel-annex03-register-table select {
    width: 100%;
    height: 30px;
    padding: 0;
    border: 0;
    outline: 0;
    appearance: none;
    background: transparent;
    color: #10243b;
    font-size: 0.66rem;
    font-weight: 800;
    text-align: center;
    text-align-last: center;
    cursor: pointer;
}

.ugel-annex03-register-table select:focus {
    box-shadow: inset 0 0 0 2px var(--annex-focus);
    background: var(--annex-soft);
}

.ugel-annex03-register-table tbody tr:nth-child(even) td:not(.is-saturday):not(.is-sunday):not(.is-holiday) {
    background: #f8fbff;
}

.ugel-annex03-register-table .is-saturday {
    background: #c7ccd4 !important;
    color: #536170 !important;
}

.ugel-annex03-register-table .is-sunday,
.ugel-annex03-register-table .is-holiday {
    background: repeating-linear-gradient(135deg, #fff 0, #fff 3px, #ffb5b5 3px, #ffb5b5 5px) !important;
    color: #b42318 !important;
}

.ugel-annex03-register-table .is-fixed-code,
.ugel-annex03-register-table .is-non-working {
    font-weight: 900;
}

.ugel-annex03-register-table .is-total-heading,
.ugel-annex03-register-table .is-total {
    width: 34px;
    min-width: 34px;
}

.ugel-annex03-register-table .is-total {
    background: var(--annex-soft);
    color: var(--annex-blue-dark);
    font-weight: 900;
}

.ugel-annex03-register-empty {
    padding: 1.4rem !important;
    color: #64748b;
    font-size: 0.85rem;
    text-align: center;
}

.ugel-annex03-register-bottom {
    display: grid;
    grid-template-columns: minmax(270px, 390px) minmax(420px, 1fr);
    gap: 1.2rem;
    margin-top: 0.85rem;
}

.ugel-annex03-register-legend h2 {
    margin: 0;
    color: #172b43;
    font-size: 0.72rem;
    font-weight: 900;
}

.ugel-annex03-register-legend dl {
    margin: 0.2rem 0 0;
    border-top: 1px solid #77b65a;
    border-left: 1px solid #77b65a;
}

.ugel-annex03-register-legend dl > div {
    display: grid;
    grid-template-columns: 40px 1fr;
}

.ugel-annex03-register-legend dt,
.ugel-annex03-register-legend dd {
    margin: 0;
    padding: 0.12rem 0.35rem;
    border-right: 1px solid #77b65a;
    border-bottom: 1px solid #77b65a;
    font-size: 0.66rem;
}

.ugel-annex03-register-legend dt {
    font-weight: 900;
    text-align: center;
}

.ugel-annex03-register-certification > p {
    margin: 0;
    padding: 0 0.4rem 0.35rem;
    border-bottom: 1px solid var(--annex-blue-dark);
    color: #27374a;
    font-size: 0.72rem;
    text-align: right;
}

.ugel-annex03-register-signatures {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 3.5rem;
    row-gap: 4.5rem;
    margin-top: 3.6rem;
}

.ugel-annex03-register-signatures > div {
    min-width: 0;
    text-align: center;
}

.ugel-annex03-register-signatures > .is-bottom {
    grid-column: 1 / -1;
    justify-self: center;
    width: 52%;
}

.ugel-annex03-register-signatures > div > span:first-child {
    display: block;
    border-top: 1px solid #172b43;
}

.ugel-annex03-register-signatures .is-conei label {
    display: block;
    margin: 0;
}

.ugel-annex03-register-signatures .is-conei input {
    display: block;
    width: 100%;
    min-height: 1.65rem;
    padding: 0.08rem 0.3rem;
    border: 0;
    border-bottom: 1px dashed #c3ceda;
    outline: 0;
    background: transparent;
    color: #172b43;
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    text-transform: uppercase;
}

.ugel-annex03-register-signatures .is-conei input:focus {
    border-bottom-color: var(--annex-focus);
    background: var(--annex-soft);
    box-shadow: 0 1px 0 var(--annex-focus);
}

.ugel-annex03-register-signatures .is-conei input::placeholder {
    color: #64748b;
    font-weight: 500;
    opacity: 1;
    text-transform: none;
}

.ugel-annex03-register-signatures .is-conei small {
    padding-top: 0.22rem;
    color: #172b43;
    font-size: 0.72rem;
}

.ugel-annex03-register-signatures strong,
.ugel-annex03-register-signatures small {
    display: block;
    padding-top: 0.18rem;
    overflow: hidden;
    color: #172b43;
    font-size: 0.66rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ugel-annex03-register-signatures small {
    padding-top: 0;
    color: #617085;
}

@media (max-width: 900px) {
    .ugel-annex03-register-header {
        grid-template-columns: 1fr;
    }

    .ugel-annex03-register-back {
        grid-template-columns: auto 190px;
        justify-content: end;
        align-items: center;
    }

    .ugel-annex03-register-back i {
        font-size: 2.35rem;
    }

    .ugel-annex03-register-meta {
        grid-template-columns: repeat(3, minmax(105px, 1fr));
    }

    .ugel-annex03-register-bottom {
        grid-template-columns: 1fr;
    }
}

/* APP UGEL H · CG1 · Indicador de seguimiento 1.3 */
.ugel-indicator-13-results {
    --is13-gold: #f4b900;
    --is13-gold-dark: #b98200;
    --is13-cream: #fff5cf;
    box-sizing: border-box;
    width: 100%;
    padding: clamp(18px, 2.2vw, 34px);
    border: 1px solid #e4e7ec;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(16, 24, 40, 0.07);
}

.ugel-indicator-13-results-header h1 {
    margin: 0;
    color: #0f172a;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(1.45rem, 2.4vw, 2.25rem);
    font-weight: 950;
    letter-spacing: 0.02em;
    text-align: center;
}

.ugel-indicator-13-results-context {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    margin-top: 18px;
    padding: 10px 12px;
    border: 2px solid var(--is13-gold);
    background: var(--is13-cream);
}

.ugel-indicator-13-results-context p {
    margin: 0;
    color: #111827;
    font-size: 0.9rem;
    font-weight: 650;
    line-height: 1.45;
}

.ugel-indicator-13-results-context form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ugel-indicator-13-results-context label {
    color: #725400;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.ugel-indicator-13-results-context select {
    min-width: 145px;
    padding: 7px 30px 7px 9px;
    border: 1px solid #d8a400;
    border-radius: 7px;
    background: #fff;
    color: #172033;
    font-weight: 750;
}

.ugel-indicator-13-top-grid {
    display: grid;
    grid-template-columns: minmax(760px, 1fr) 190px;
    align-items: start;
    gap: 22px;
    margin-top: 18px;
}

.ugel-indicator-13-data-panel {
    min-width: 0;
}

.ugel-indicator-13-data-panel > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 7px;
    border-bottom: 2px solid var(--is13-gold);
}

.ugel-indicator-13-data-panel > header span {
    color: #8c6900;
    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.1em;
}

.ugel-indicator-13-data-panel > header h2 {
    margin: 0;
    color: #ef7d22;
    font-size: 1.3rem;
    font-weight: 900;
}

.ugel-indicator-13-data-panel > header button {
    padding: 8px 13px;
    border: 1px solid #b98200;
    border-radius: 8px;
    background: #fff4c4;
    color: #5c4300;
    font-size: 0.78rem;
    font-weight: 850;
}

.ugel-indicator-13-data-panel > header button:hover,
.ugel-indicator-13-data-panel > header button:focus-visible {
    background: var(--is13-gold);
    color: #111827;
}

.ugel-indicator-13-data-help {
    margin: 7px 0 10px;
    color: #64748b;
    font-size: 0.72rem;
}

.ugel-indicator-13-tables {
    display: grid;
    gap: 14px;
}

.ugel-indicator-13-grade-table h3 {
    margin: 0;
    padding: 5px 8px;
    border-bottom: 1px solid #f1b900;
    background: #ffd22e;
    color: #8c6900;
    font-size: 0.82rem;
    font-weight: 900;
    text-align: center;
}

.ugel-indicator-13-grade-table > div {
    overflow-x: auto;
}

.ugel-indicator-13-grade-table table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    table-layout: fixed;
}

.ugel-indicator-13-grade-table th,
.ugel-indicator-13-grade-table td {
    border: 1px solid #e8ae00;
}

.ugel-indicator-13-grade-table thead th {
    padding: 5px 3px;
    background: #ffc400;
    color: #8b6b00;
    font-size: 0.68rem;
    font-weight: 900;
    text-align: center;
}

.ugel-indicator-13-grade-table thead th:first-child {
    width: 22%;
}

.ugel-indicator-13-grade-table tbody th {
    padding: 5px 7px;
    background: #fffdf4;
    color: #a86d00;
    font-size: 0.76rem;
    font-style: italic;
    font-weight: 650;
    text-align: left;
}

.ugel-indicator-13-grade-table td {
    padding: 0;
    background: #fff8de;
    text-align: center;
}

.ugel-indicator-13-grade-table input {
    box-sizing: border-box;
    width: 100%;
    min-width: 58px;
    padding: 5px 3px;
    border: 0;
    background: transparent;
    color: #172033;
    font-size: 0.73rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.ugel-indicator-13-grade-table input:focus {
    outline: 2px solid #f59e0b;
    outline-offset: -2px;
    background: #fff;
}

.ugel-indicator-13-advance {
    padding: 5px 3px !important;
    background: #fff !important;
    color: #8b5c00;
    font-size: 0.73rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}

.ugel-indicator-13-side {
    display: grid;
    gap: 16px;
}

.ugel-indicator-13-side > a {
    display: grid;
    place-items: center;
    gap: 7px;
    color: #d39a00;
    text-decoration: none;
}

.ugel-indicator-13-side > a i {
    font-size: 4.2rem;
    line-height: 1;
}

.ugel-indicator-13-side > a strong {
    display: block;
    width: 100%;
    padding: 13px 8px;
    border: 1px solid #e5aa00;
    border-radius: 12px;
    background: #ffe79a;
    color: #111827;
    font-size: 0.8rem;
    text-align: center;
}

.ugel-indicator-13-side > a:hover strong,
.ugel-indicator-13-side > a:focus-visible strong {
    background: #ffc400;
}

.ugel-indicator-13-side > div {
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid #e7b62b;
    border-radius: 10px;
    background: #fffbeb;
    color: #594300;
    font-size: 0.7rem;
}

.ugel-indicator-13-side > div strong {
    text-transform: uppercase;
}

.ugel-indicator-13-side > div small {
    color: #7c6a34;
}

.ugel-indicator-13-import {
    display: grid;
    gap: 9px;
    padding: 13px;
    border: 1px solid #93c5fd;
    border-radius: 12px;
    background: linear-gradient(145deg, #eff6ff, #ffffff);
    color: #17365f;
    box-shadow: 0 8px 20px rgba(30, 64, 175, .08);
}

.ugel-indicator-13-import header {
    display: flex;
    align-items: center;
    gap: 9px;
}

.ugel-indicator-13-import header div {
    display: grid;
    gap: 1px;
}

.ugel-indicator-13-import header small {
    color: #2563eb;
    font-size: .66rem;
    font-weight: 850;
    letter-spacing: .06em;
}

.ugel-indicator-13-import header strong {
    font-size: .84rem;
}

.ugel-indicator-13-import-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 9px;
    background: #166534;
    color: #fff;
    font-size: 1rem;
}

.ugel-indicator-13-import p {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 0;
    padding: 8px;
    border-radius: 8px;
    font-size: .68rem;
    line-height: 1.45;
}

.ugel-indicator-13-import p.is-loaded {
    background: #dcfce7;
    color: #166534;
}

.ugel-indicator-13-import p.is-empty {
    background: #fff7ed;
    color: #9a3412;
}

.ugel-indicator-13-import > label {
    font-size: .69rem;
    font-weight: 850;
}

.ugel-indicator-13-import input[type="file"] {
    width: 100%;
    padding: 7px;
    border: 1px dashed #60a5fa;
    border-radius: 8px;
    background: #fff;
    color: #334155;
    font-size: .66rem;
}

.ugel-indicator-13-import-help {
    color: #64748b;
    font-size: .62rem;
    line-height: 1.4;
}

.ugel-indicator-13-import > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 37px;
    border: 0;
    border-radius: 8px;
    background: #166534;
    color: #fff;
    font-size: .7rem;
    font-weight: 850;
    cursor: pointer;
}

.ugel-indicator-13-import > button:hover,
.ugel-indicator-13-import > button:focus-visible {
    background: #14532d;
}

.ugel-indicator-13-charts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.ugel-indicator-13-charts.is-secondary {
    grid-template-columns: minmax(0, 1fr);
}

.ugel-indicator-13-charts.is-secondary .ugel-indicator-13-chart-card > div {
    height: 390px;
}

.ugel-indicator-13-results.is-secondary .ugel-indicator-13-data-panel > header h2 {
    color: #ef7d22;
}

.ugel-indicator-13-results.is-secondary .ugel-indicator-13-grade-table thead th:first-child {
    width: 23%;
}

.ugel-indicator-13-chart-card {
    min-width: 0;
    padding: 12px 12px 8px;
    border: 2px solid var(--is13-gold);
    border-radius: 14px;
    background: #fff;
}

.ugel-indicator-13-chart-card h2 {
    margin: 0;
    color: #111827;
    font-size: 0.9rem;
    font-weight: 750;
    text-align: center;
}

.ugel-indicator-13-chart-card > p {
    margin: 3px 0 7px;
    color: #64748b;
    font-size: 0.64rem;
    text-align: center;
}

.ugel-indicator-13-chart-card > div {
    position: relative;
    height: 255px;
}

.ugel-indicator-13-chart-card canvas {
    width: 100% !important;
    height: 100% !important;
}

.ugel-indicator-13-chart-empty {
    position: absolute;
    inset: 45% 0 auto;
    color: #94a3b8;
    font-size: 0.72rem;
    font-weight: 750;
    text-align: center;
    pointer-events: none;
}

.ugel-indicator-13-chart-empty[hidden] {
    display: none;
}

.ugel-indicator-13-analysis {
    margin-top: 18px;
    border-color: #f0b400;
    background: #fffaf0;
}

.ugel-indicator-21 {
    --is21-orange: #f06d22;
    --is21-orange-dark: #a93c06;
    --is21-cream: #fff2e8;
    box-sizing: border-box;
    width: 100%;
    padding: clamp(18px, 2.2vw, 34px);
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(16, 24, 40, .07);
}

.ugel-indicator-21-header h1 {
    max-width: 1200px;
    margin: 0 auto;
    color: #111827;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(1.45rem, 2.5vw, 2.35rem);
    font-weight: 950;
    line-height: 1.12;
    text-align: center;
}

.ugel-indicator-21-header > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    margin-top: 18px;
    padding: 10px 12px;
    border: 2px solid var(--is21-orange);
    background: #fff4ec;
}

.ugel-indicator-21-header p {
    margin: 0;
    color: #111827;
    font-size: .9rem;
    font-weight: 650;
    line-height: 1.45;
}

.ugel-indicator-21-header form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ugel-indicator-21-header label {
    color: #873800;
    font-size: .7rem;
    font-weight: 900;
}

.ugel-indicator-21-header select {
    min-width: 145px;
    padding: 7px 30px 7px 9px;
    border: 1px solid #d95b16;
    border-radius: 7px;
    background: #fff;
    color: #172033;
    font-weight: 750;
}

.ugel-indicator-21-summary-grid {
    display: grid;
    grid-template-columns: minmax(650px, 1fr) 235px;
    align-items: start;
    gap: 24px;
    margin-top: 18px;
}

.ugel-indicator-21-table-card {
    min-width: 0;
}

.ugel-indicator-21-progress {
    display: grid;
    grid-template-columns: 1fr minmax(150px, .45fr);
    border: 1px solid #d95b16;
}

.ugel-indicator-21-progress span,
.ugel-indicator-21-progress strong {
    padding: 7px 12px;
    text-align: center;
}

.ugel-indicator-21-progress span {
    background: #c90f00;
    color: #fff;
    font-weight: 900;
}

.ugel-indicator-21-progress strong {
    border-left: 1px solid #d95b16;
    background: #ffd278;
    color: #1f2937;
    font-size: 1.05rem;
}

.ugel-indicator-21-table-wrap {
    overflow-x: auto;
}

.ugel-indicator-21-table-wrap table {
    width: 100%;
    min-width: 650px;
    border-collapse: collapse;
}

.ugel-indicator-21-table-wrap th,
.ugel-indicator-21-table-wrap td {
    padding: 9px 10px;
    border: 1px solid #dc5a17;
    font-variant-numeric: tabular-nums;
}

.ugel-indicator-21-table-wrap thead th {
    background: #fff9f5;
    color: #111827;
    font-size: .78rem;
    font-weight: 900;
    text-align: center;
}

.ugel-indicator-21-table-wrap tbody th {
    background: #fffaf7;
    color: #172033;
    text-align: left;
}

.ugel-indicator-21-table-wrap tbody td {
    background: #ffeadc;
    color: #172033;
    font-weight: 750;
    text-align: center;
}

.ugel-indicator-21-table-wrap tbody tr.is-disabled th,
.ugel-indicator-21-table-wrap tbody tr.is-disabled td {
    background: #f1f5f9;
    color: #94a3b8;
}

.ugel-indicator-21-advance {
    background: #ffdc72 !important;
    color: #743100 !important;
    font-weight: 900 !important;
}

.ugel-indicator-21-table-card > p {
    margin: 7px 0 0;
    color: #64748b;
    font-size: .7rem;
}

.ugel-indicator-21-side {
    display: grid;
    gap: 14px;
}

.ugel-indicator-21-side > a {
    display: grid;
    place-items: center;
    gap: 7px;
    color: #111827;
    text-decoration: none;
}

.ugel-indicator-21-side > a i {
    font-size: 4.7rem;
    line-height: 1;
}

.ugel-indicator-21-side > a strong {
    padding: 12px;
    border: 2px solid #111827;
    border-radius: 12px;
    background: #fff;
    font-size: .75rem;
    text-align: center;
}

.ugel-indicator-21-side > div {
    display: grid;
    gap: 3px;
    padding: 12px;
    border: 1px solid #f09056;
    border-radius: 10px;
    background: #fff7f2;
    color: #71320f;
    text-align: center;
}

.ugel-indicator-21-side > div strong {
    font-size: 1.8rem;
}

.ugel-indicator-21-side > div small {
    color: #7c5d4c;
}

.ugel-indicator-21-chart {
    margin-top: 18px;
    padding: 14px;
    border: 2px solid var(--is21-orange);
    border-radius: 14px;
    background: #fff;
}

.ugel-indicator-21-chart header {
    text-align: center;
}

.ugel-indicator-21-chart h2 {
    margin: 0;
    color: #111827;
    font-size: 1.1rem;
}

.ugel-indicator-21-chart header p {
    margin: 4px 0 10px;
    color: #64748b;
    font-size: .75rem;
}

.ugel-indicator-21-chart > div {
    position: relative;
    height: 330px;
}

.ugel-indicator-21-chart canvas {
    width: 100% !important;
    height: 100% !important;
}

#indicator21ChartEmpty {
    position: absolute;
    inset: 45% 0 auto;
    color: #94a3b8;
    font-weight: 750;
    text-align: center;
}

#indicator21ChartEmpty[hidden] {
    display: none;
}

.ugel-indicator-21-analysis {
    margin-top: 18px;
    border-color: var(--is21-orange);
    background: #fff7f1;
}

@media (max-width: 1100px) {
    .ugel-indicator-21-summary-grid {
        grid-template-columns: 1fr;
    }

    .ugel-indicator-21-side {
        grid-template-columns: 235px minmax(0, 1fr);
        align-items: center;
    }
}

@media (max-width: 720px) {
    .ugel-indicator-21 {
        padding: 14px;
    }

    .ugel-indicator-21-header > div,
    .ugel-indicator-21-side {
        grid-template-columns: 1fr;
    }

    .ugel-indicator-21-header form {
        justify-content: flex-end;
    }

    .ugel-indicator-21-progress {
        grid-template-columns: 1fr;
    }

    .ugel-indicator-21-progress strong {
        border-top: 1px solid #d95b16;
        border-left: 0;
    }

    .ugel-indicator-21-chart > div {
        height: 280px;
    }
}

@media (max-width: 1200px) {
    .ugel-indicator-13-top-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ugel-indicator-13-side {
        grid-template-columns: 190px minmax(0, 1fr);
        align-items: center;
    }

    .ugel-indicator-13-charts {
        grid-template-columns: 1fr;
    }

    .ugel-indicator-13-chart-card > div {
        height: 320px;
    }
}

@media (max-width: 720px) {
    .ugel-indicator-13-results {
        padding: 14px;
    }

    .ugel-indicator-13-results-context {
        grid-template-columns: 1fr;
    }

    .ugel-indicator-13-results-context form {
        justify-content: flex-end;
    }

    .ugel-indicator-13-data-panel > header {
        align-items: flex-start;
        flex-direction: column;
    }

    .ugel-indicator-13-data-panel > header button {
        width: 100%;
    }

    .ugel-indicator-13-side {
        grid-template-columns: 1fr;
    }

    .ugel-indicator-13-side > a {
        justify-self: center;
        width: min(100%, 230px);
    }

    .ugel-indicator-13-chart-card > div {
        height: 280px;
    }
}

@media (max-width: 620px) {
    .ugel-annex03-register {
        padding: 0.65rem;
    }

    .ugel-annex03-register-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .ugel-annex03-register-actions > div,
    .ugel-annex03-register-actions button {
        width: 100%;
    }

    .ugel-annex03-register-meta {
        grid-template-columns: repeat(2, minmax(105px, 1fr));
    }

    .ugel-annex03-register-signatures {
        gap: 1rem;
    }

    .ugel-annex03-register-signatures > .is-bottom {
        width: 75%;
        margin-top: 2rem;
    }
}

/* APP UGEL H: calendarización anual */
/* APP UGEL H · Menú del Anexo 04 */
.ugel-annex04 {
    min-height: 560px;
    padding: 1.4rem;
    border: 1px solid #d9e4d3;
    border-radius: 0.9rem;
    background: #fff;
    box-shadow: 0 14px 36px rgba(45, 85, 34, 0.08);
    color: #183413;
}

.ugel-annex04-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 210px;
    gap: 1rem;
    align-items: center;
}

.ugel-annex04-brand {
    display: flex;
    justify-content: center;
    padding-left: 210px;
}

.ugel-annex04-brand img {
    width: min(470px, 76%);
    max-height: 76px;
    object-fit: contain;
}

.ugel-annex04-back {
    display: grid;
    gap: 0.35rem;
    justify-items: center;
    color: #6cb344;
    text-align: center;
    text-decoration: none;
}

.ugel-annex04-back i {
    font-size: 4.5rem;
    line-height: 1;
}

.ugel-annex04-back strong {
    width: 100%;
    padding: 0.75rem 0.55rem;
    border-radius: 0.55rem;
    background: linear-gradient(180deg, #7cc64e, #5ba933);
    box-shadow: 0 4px 9px rgba(50, 100, 35, 0.28);
    color: #fff;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
}

.ugel-annex04-back:hover,
.ugel-annex04-back:focus-visible {
    color: #4d8f2b;
    transform: translateY(-1px);
}

.ugel-annex04-title {
    margin-top: 0.45rem;
    padding: 0.25rem 0.8rem;
    border: 2px solid #548235;
    text-align: center;
}

.ugel-annex04-title h1 {
    margin: 0;
    color: #70ad47;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.25rem, 2.2vw, 2rem);
    font-weight: 900;
    line-height: 1.18;
    letter-spacing: 0.015em;
}

.ugel-annex04-title span {
    display: inline-block;
    margin-top: 0.2rem;
    color: #52733f;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.ugel-annex04-menu {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
    margin-top: clamp(4rem, 8vw, 7rem);
}

.ugel-annex04-menu button,
.ugel-annex04-menu a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
    padding: 1rem;
    border: 3px solid #4f8d33;
    border-radius: 1rem;
    outline: 2px solid #90c56d;
    outline-offset: -7px;
    background: linear-gradient(180deg, #85cb57 0%, #6db642 58%, #60a73b 100%);
    box-shadow: 0 5px 0 #356f27, 0 8px 15px rgba(47, 91, 35, 0.22), inset 0 2px 4px rgba(255, 255, 255, 0.65);
    color: #fff;
    font-size: clamp(0.82rem, 1.25vw, 1.05rem);
    font-weight: 900;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.18s ease, filter 0.18s ease;
}

.ugel-annex04-menu button:not(:disabled):hover,
.ugel-annex04-menu button:not(:disabled):focus-visible,
.ugel-annex04-menu a:hover,
.ugel-annex04-menu a:focus-visible {
    filter: brightness(1.06);
    transform: translateY(-2px);
}

.ugel-annex04-menu button.is-disabled {
    cursor: not-allowed;
    filter: grayscale(0.6);
    opacity: 0.42;
}

@media (max-width: 980px) {
    .ugel-annex04-brand {
        padding-left: 0;
    }

    .ugel-annex04-menu {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 3.5rem;
    }
}

@media (max-width: 620px) {
    .ugel-annex04 {
        padding: 0.75rem;
    }

    .ugel-annex04-top {
        grid-template-columns: 1fr;
    }

    .ugel-annex04-brand img {
        width: min(420px, 95%);
    }

    .ugel-annex04-back {
        grid-template-columns: auto 180px;
        justify-content: end;
        align-items: center;
    }

    .ugel-annex04-back i {
        font-size: 2.7rem;
    }

    .ugel-annex04-menu {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-top: 2rem;
    }
}

/* APP UGEL H · Reporte consolidado del Anexo 04 */
.ugel-annex04-report {
    --annex04-green: #70ad47;
    --annex04-green-dark: #548235;
    --annex04-green-soft: #e7f2df;
    width: 100%;
    padding: 0.65rem;
    border: 1px solid #b7c5b0;
    background: #fff;
    color: #101c0c;
}

.ugel-annex04-report-norms {
    display: grid;
    justify-items: center;
    font-size: 0.62rem;
    line-height: 1.1;
    text-align: center;
}

.ugel-annex04-report-norms strong {
    max-width: 1050px;
}

.ugel-annex04-report-heading-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 205px;
    gap: 1rem;
    align-items: center;
    margin-top: 0.25rem;
}

.ugel-annex04-report-heading-row h1 {
    margin: 0;
    padding: 0.25rem 0.45rem;
    background: var(--annex04-green);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 900;
}

.ugel-annex04-report-back {
    display: grid;
    gap: 0.3rem;
    justify-items: center;
    color: var(--annex04-green);
    text-align: center;
    text-decoration: none;
}

.ugel-annex04-report-back i {
    font-size: 3.5rem;
    line-height: 1;
}

.ugel-annex04-report-back strong {
    width: 100%;
    padding: 0.65rem 0.35rem;
    border-radius: 0.55rem;
    background: linear-gradient(180deg, #7bc24e, #5aa634);
    box-shadow: 0 4px 8px rgba(46, 92, 30, 0.25);
    color: #fff;
    font-size: 0.72rem;
}

.ugel-annex04-report-controls {
    display: grid;
    gap: 0.7rem;
}

.ugel-annex04-report-print {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: 1px solid var(--annex04-green-dark);
    border-radius: 0.5rem;
    background: #fff;
    color: var(--annex04-green-dark);
    font-size: 0.72rem;
    font-weight: 900;
    cursor: pointer;
}

.ugel-annex04-report-print:hover,
.ugel-annex04-report-print:focus-visible {
    background: var(--annex04-green-dark);
    color: #fff;
}

.ugel-annex04-report-meta {
    display: grid;
    grid-template-columns: 120px 1.45fr 1.15fr 110px 110px 190px;
    max-width: 950px;
    margin-top: 0.12rem;
    border-top: 1px solid var(--annex04-green);
    border-left: 1px solid var(--annex04-green);
}

.ugel-annex04-report-meta > div {
    min-width: 0;
    border-right: 1px solid var(--annex04-green);
    border-bottom: 1px solid var(--annex04-green);
}

.ugel-annex04-report-meta > div:nth-child(7) {
    grid-column: 1;
}

.ugel-annex04-report-meta > div:nth-child(8) {
    grid-column: 2;
}

.ugel-annex04-report-meta > div:nth-child(9) {
    grid-column: 3 / 5;
}

.ugel-annex04-report-meta strong,
.ugel-annex04-report-meta span,
.ugel-annex04-report-meta form,
.ugel-annex04-report-meta select {
    display: block;
    width: 100%;
}

.ugel-annex04-report-meta strong {
    padding: 0.08rem 0.35rem;
    background: var(--annex04-green);
    color: #fff;
    font-size: 0.62rem;
}

.ugel-annex04-report-meta span,
.ugel-annex04-report-meta select {
    min-height: 1.3rem;
    padding: 0.1rem 0.35rem;
    border: 0;
    background: #fff;
    color: #162a10;
    font-size: 0.64rem;
    font-weight: 800;
}

.ugel-annex04-report-meta .is-month select {
    color: #ef2f2f;
    text-align: center;
    cursor: pointer;
}

.ugel-annex04-report-table-wrap {
    width: 100%;
    margin-top: 1.35rem;
    overflow: auto;
    border: 1px solid var(--annex04-green);
}

.ugel-annex04-report-table {
    width: 100%;
    min-width: 1420px;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.57rem;
}

.ugel-annex04-report-table col.col-number { width: 34px; }
.ugel-annex04-report-table col.col-dni { width: 90px; }
.ugel-annex04-report-table col.col-name { width: 230px; }
.ugel-annex04-report-table col.col-position { width: 95px; }
.ugel-annex04-report-table col.col-condition { width: 100px; }
.ugel-annex04-report-table col.col-hours { width: 65px; }
.ugel-annex04-report-table col.col-month { width: 68px; }
.ugel-annex04-report-table col.col-small { width: 60px; }
.ugel-annex04-report-table col.col-observation { width: 330px; }

.ugel-annex04-report-table th,
.ugel-annex04-report-table td {
    height: 25px;
    padding: 0.12rem 0.25rem;
    border: 1px solid var(--annex04-green);
    text-align: center;
    vertical-align: middle;
}

.ugel-annex04-report-table th {
    background: var(--annex04-green);
    color: #fff;
    font-weight: 900;
}

.ugel-annex04-report-table tbody tr:nth-child(even) td {
    background: #f4f9f0;
}

.ugel-annex04-report-table tbody td:nth-child(1) { width: 34px; }
.ugel-annex04-report-table tbody td:nth-child(2) { width: 90px; }
.ugel-annex04-report-table tbody td:nth-child(3) { width: 230px; }
.ugel-annex04-report-table tbody td:nth-child(4) { width: 95px; }
.ugel-annex04-report-table tbody td:nth-child(5) { width: 100px; }
.ugel-annex04-report-table tbody td:nth-child(6) { width: 65px; }
.ugel-annex04-report-table tbody td:nth-child(7) { width: 68px; }
.ugel-annex04-report-table tbody td:nth-child(8),
.ugel-annex04-report-table tbody td:nth-child(13) { width: 60px; }
.ugel-annex04-report-table tbody td:nth-child(9),
.ugel-annex04-report-table tbody td:nth-child(10),
.ugel-annex04-report-table tbody td:nth-child(11),
.ugel-annex04-report-table tbody td:nth-child(12) { width: 58px; }
.ugel-annex04-report-table tbody td:nth-child(14) { width: 330px; }

.ugel-annex04-report-table td.is-name,
.ugel-annex04-report-table td.is-observation {
    text-align: left;
}

.ugel-annex04-report-table td.is-name {
    font-weight: 800;
}

.ugel-annex04-report-table td.is-month-name {
    color: #ef2f2f;
    font-weight: 900;
}

.ugel-annex04-report-table td.is-observation {
    background: var(--annex04-green-soft) !important;
}

.ugel-annex04-report-table td.is-empty {
    padding: 1.25rem;
    color: #607057;
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
}

.ugel-annex04-report-footer {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 0.8rem 1.2rem;
    margin-top: 0.3rem;
    font-size: 0.63rem;
}

.ugel-annex04-report-notes {
    display: grid;
}

.ugel-annex04-report-place {
    border-bottom: 1px solid #15210f;
    text-align: right;
}

.ugel-annex04-report-signatures {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 3.5rem;
    width: 100%;
    margin-top: 3.4rem;
    text-align: center;
}

.ugel-annex04-report-signatures > div {
    min-width: 0;
}

.ugel-annex04-report-signatures > div > span:first-child {
    display: block;
    border-top: 1px solid #15210f;
}

.ugel-annex04-report-signatures strong,
.ugel-annex04-report-signatures small {
    display: block;
    padding-top: 0.15rem;
    font-size: 0.62rem;
}

.ugel-annex04-report-signatures .is-conei label {
    display: block;
    margin: 0;
}

.ugel-annex04-report-signatures .is-conei input {
    display: block;
    width: 100%;
    min-height: 1.6rem;
    padding: 0.05rem 0.25rem;
    border: 0;
    border-bottom: 1px dashed #c3cebd;
    outline: 0;
    background: transparent;
    color: #15210f;
    font-size: 0.72rem;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
}

.ugel-annex04-report-signatures .is-conei input:focus {
    border-bottom-color: var(--annex04-green-dark);
    background: #f2f8ee;
}

.ugel-annex04-report-signatures .is-conei input::placeholder {
    color: #65745e;
    font-weight: 500;
    opacity: 1;
    text-transform: none;
}

@media (max-width: 900px) {
    .ugel-annex04-report-heading-row {
        grid-template-columns: 1fr;
    }

    .ugel-annex04-report-back {
        grid-template-columns: auto 190px;
        justify-content: end;
        align-items: center;
    }

    .ugel-annex04-report-back i {
        font-size: 2.5rem;
    }

    .ugel-annex04-report-meta {
        grid-template-columns: repeat(3, minmax(110px, 1fr));
        max-width: none;
    }

    .ugel-annex04-report-meta > div:nth-child(n) {
        grid-column: auto;
    }
}

@media (max-width: 600px) {
    .ugel-annex04-report-meta,
    .ugel-annex04-report-footer {
        grid-template-columns: 1fr 1fr;
    }

    .ugel-annex04-report-signatures {
        grid-template-columns: 1fr;
        gap: 2.8rem;
    }
}

@media print {
    @page {
        size: A3 landscape;
        margin: 6mm;
    }

    body.ugel-annex03-print-page.comano-body,
    body.ugel-annex03-print-page.sidebar-collapsed.comano-body,
    body.ugel-annex03-print-page.sidebar-open.comano-body {
        display: block !important;
        width: auto !important;
        min-height: auto !important;
        overflow: visible !important;
        background: #fff !important;
    }

    body.ugel-annex03-print-page .comano-sidebar,
    body.ugel-annex03-print-page .topbar,
    body.ugel-annex03-print-page .comano-footer,
    body.ugel-annex03-print-page .ugel-annex03-register-back,
    body.ugel-annex03-print-page .ugel-annex03-register-months,
    body.ugel-annex03-print-page .ugel-annex03-register-actions {
        display: none !important;
    }

    body.ugel-annex03-print-page .comano-main,
    body.ugel-annex03-print-page .content-wrapper {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    body.ugel-annex03-print-page .ugel-annex03-register {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    body.ugel-annex03-print-page .ugel-annex03-register-header {
        display: block !important;
        margin-bottom: 2mm;
    }

    body.ugel-annex03-print-page .ugel-annex03-register-heading > span {
        font-size: 15pt;
    }

    body.ugel-annex03-print-page .ugel-annex03-register-heading h1 {
        padding: 1.5mm;
        font-size: 10pt;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    body.ugel-annex03-print-page .ugel-annex03-register-meta {
        width: 72%;
        max-width: none;
        margin-bottom: 2mm;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    body.ugel-annex03-print-page .ugel-annex03-register-table-wrap {
        overflow: visible !important;
    }

    body.ugel-annex03-print-page .ugel-annex03-register-table {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed;
        font-size: 5.2pt;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    body.ugel-annex03-print-page .ugel-annex03-register-table th,
    body.ugel-annex03-print-page .ugel-annex03-register-table td {
        height: 7mm;
        padding: 0.3mm;
        overflow: hidden;
    }

    body.ugel-annex03-print-page .ugel-annex03-register-table th.is-number,
    body.ugel-annex03-print-page .ugel-annex03-register-table td.is-number {
        width: 7mm;
        min-width: 0;
    }

    body.ugel-annex03-print-page .ugel-annex03-register-table th.is-name,
    body.ugel-annex03-print-page .ugel-annex03-register-table td.is-name {
        width: 43mm;
        min-width: 0;
    }

    body.ugel-annex03-print-page .ugel-annex03-register-table th.is-dni,
    body.ugel-annex03-print-page .ugel-annex03-register-table tbody td:nth-child(3) {
        width: 18mm;
        min-width: 0;
    }

    body.ugel-annex03-print-page .ugel-annex03-register-table th.is-position,
    body.ugel-annex03-print-page .ugel-annex03-register-table tbody td:nth-child(4) {
        width: 23mm;
        min-width: 0;
    }

    body.ugel-annex03-print-page .ugel-annex03-register-table th.is-condition,
    body.ugel-annex03-print-page .ugel-annex03-register-table tbody td:nth-child(5) {
        width: 18mm;
        min-width: 0;
    }

    body.ugel-annex03-print-page .ugel-annex03-register-table th.is-hours-heading,
    body.ugel-annex03-print-page .ugel-annex03-register-table tbody td:nth-child(6) {
        width: 13mm;
        min-width: 0;
    }

    body.ugel-annex03-print-page .ugel-annex03-register-table th.is-day,
    body.ugel-annex03-print-page .ugel-annex03-register-table td.is-attendance {
        width: 6mm;
        min-width: 0;
    }

    body.ugel-annex03-print-page .ugel-annex03-register-table .is-total-heading,
    body.ugel-annex03-print-page .ugel-annex03-register-table .is-total {
        width: 5mm;
        min-width: 0;
    }

    body.ugel-annex03-print-page .ugel-annex03-register-table select {
        height: 6mm;
        font-size: 5.2pt;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    body.ugel-annex03-print-page .ugel-annex03-register-bottom {
        grid-template-columns: 35% 1fr;
        gap: 5mm;
        margin-top: 3mm;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    body.ugel-annex03-print-page .ugel-annex03-register-signatures {
        column-gap: 12mm;
        row-gap: 14mm;
        margin-top: 12mm;
    }

    body.ugel-annex03-print-page .ugel-annex03-register-signatures .is-conei input {
        border-bottom: 0;
        font-size: 7pt;
    }

    body.ugel-annex03-print-page .ugel-annex03-register-signatures .is-conei input::placeholder {
        color: transparent;
    }
}

@media print {
    @page {
        size: A3 landscape;
        margin: 6mm;
    }

    body.ugel-annex04-print-page.comano-body,
    body.ugel-annex04-print-page.sidebar-collapsed.comano-body,
    body.ugel-annex04-print-page.sidebar-open.comano-body {
        display: block !important;
        width: auto !important;
        min-height: auto !important;
        overflow: visible !important;
        background: #fff !important;
    }

    body.ugel-annex04-print-page .comano-sidebar,
    body.ugel-annex04-print-page .topbar,
    body.ugel-annex04-print-page .comano-footer,
    body.ugel-annex04-print-page .ugel-annex04-report-controls {
        display: none !important;
    }

    body.ugel-annex04-print-page .comano-main,
    body.ugel-annex04-print-page .content-wrapper {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    body.ugel-annex04-print-page .ugel-annex04-report {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    body.ugel-annex04-print-page .ugel-annex04-report-heading-row {
        display: block !important;
        margin-top: 1mm;
    }

    body.ugel-annex04-print-page .ugel-annex04-report-norms {
        font-size: 6pt;
    }

    body.ugel-annex04-print-page .ugel-annex04-report-heading-row h1 {
        padding: 1mm 2mm;
        font-size: 8pt;
    }

    body.ugel-annex04-print-page .ugel-annex04-report-meta {
        grid-template-columns: 25mm 48mm 40mm 28mm 25mm 40mm;
        width: 206mm;
        max-width: none;
        margin-top: 0.5mm;
    }

    body.ugel-annex04-print-page .ugel-annex04-report-meta strong,
    body.ugel-annex04-print-page .ugel-annex04-report-meta span,
    body.ugel-annex04-print-page .ugel-annex04-report-meta select {
        min-height: 0;
        padding: 0.35mm 1mm;
        font-size: 5.5pt;
    }

    body.ugel-annex04-print-page .ugel-annex04-report-meta select {
        appearance: none;
        -webkit-appearance: none;
    }

    body.ugel-annex04-print-page .ugel-annex04-report-table-wrap {
        margin-top: 3mm;
        overflow: visible !important;
    }

    body.ugel-annex04-print-page .ugel-annex04-report-table {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed;
        font-size: 5.2pt;
    }

    body.ugel-annex04-print-page .ugel-annex04-report-table th,
    body.ugel-annex04-print-page .ugel-annex04-report-table td {
        height: 5.5mm;
        padding: 0.25mm 0.45mm;
        overflow: hidden;
        overflow-wrap: anywhere;
    }

    body.ugel-annex04-print-page .ugel-annex04-report-table col.col-number { width: 7mm; }
    body.ugel-annex04-print-page .ugel-annex04-report-table col.col-dni { width: 20mm; }
    body.ugel-annex04-print-page .ugel-annex04-report-table col.col-name { width: 43mm; }
    body.ugel-annex04-print-page .ugel-annex04-report-table col.col-position { width: 23mm; }
    body.ugel-annex04-print-page .ugel-annex04-report-table col.col-condition { width: 23mm; }
    body.ugel-annex04-print-page .ugel-annex04-report-table col.col-hours { width: 15mm; }
    body.ugel-annex04-print-page .ugel-annex04-report-table col.col-month { width: 17mm; }
    body.ugel-annex04-print-page .ugel-annex04-report-table col.col-small { width: 13mm; }
    body.ugel-annex04-print-page .ugel-annex04-report-table col.col-observation { width: auto; }

    body.ugel-annex04-print-page .ugel-annex04-report-footer {
        grid-template-columns: 1fr 1.25fr;
        gap: 2mm 5mm;
        margin-top: 2mm;
        font-size: 5.5pt;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    body.ugel-annex04-print-page .ugel-annex04-report-signatures {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 16mm;
        margin-top: 14mm;
    }

    body.ugel-annex04-print-page .ugel-annex04-report-signatures strong,
    body.ugel-annex04-print-page .ugel-annex04-report-signatures small,
    body.ugel-annex04-print-page .ugel-annex04-report-signatures .is-conei input {
        font-size: 6.5pt;
    }

    body.ugel-annex04-print-page .ugel-annex04-report-signatures .is-conei input {
        min-height: 4mm;
        border-bottom: 0;
        padding: 0;
    }

    body.ugel-annex04-print-page .ugel-annex04-report-signatures .is-conei input::placeholder {
        color: transparent;
    }
}

.ugel-calendar-page {
    --calendar-blue: #284f86;
    --calendar-line: #172131;
    width: 100%;
    color: #050b14;
}

.ugel-calendar-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 1320px;
    margin: 0 auto 1rem;
}

.ugel-calendar-year-form,
.ugel-calendar-toolbar-actions {
    display: flex;
    align-items: center;
    gap: .65rem;
}

.ugel-calendar-toolbar-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.ugel-calendar-year-form label {
    color: #17385e;
    font-weight: 900;
}

.ugel-calendar-year-form select,
.ugel-calendar-edit,
.ugel-calendar-print,
.ugel-calendar-home {
    min-height: 42px;
    border: 1px solid #2e5c98;
    border-radius: 8px;
    background: #fff;
    color: #173f70;
    font-weight: 800;
}

.ugel-calendar-year-form select {
    min-width: 104px;
    padding: .45rem 2.25rem .45rem .7rem;
}

.ugel-calendar-edit,
.ugel-calendar-print,
.ugel-calendar-home {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .45rem .8rem;
    text-decoration: none;
    cursor: pointer;
}

.ugel-calendar-home {
    flex-direction: column;
    min-width: 112px;
    padding: .35rem .7rem;
    text-transform: uppercase;
}

.ugel-calendar-home i {
    font-size: 1.55rem;
    line-height: 1;
}

.ugel-calendar-home span {
    font-size: .65rem;
}

.ugel-calendar-edit:hover,
.ugel-calendar-print:hover,
.ugel-calendar-home:hover {
    background: #edf5ff;
    color: #102f54;
}

.ugel-calendar-sheet {
    width: min(1320px, 100%);
    margin: 0 auto;
    padding: 18px;
    overflow: hidden;
    border: 1px solid #c6d2df;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 14px 36px rgba(16, 48, 82, .1);
}

.ugel-calendar-header {
    text-align: center;
}

.ugel-calendar-header img {
    width: min(640px, 72%);
    height: 48px;
    object-fit: contain;
}

.ugel-calendar-header h1 {
    margin: 7px 0 10px;
    padding: 9px 12px;
    border: 2px solid var(--calendar-line);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(1.35rem, 2.8vw, 2.1rem);
    font-weight: 950;
    letter-spacing: .035em;
    line-height: 1.12;
}

.ugel-calendar-header p {
    margin: 0 0 12px;
    padding: 3px 10px;
    border: 2px solid var(--calendar-line);
    font-size: .92rem;
    font-weight: 900;
    line-height: 1.1;
}

.ugel-calendar-meta-wrap,
.ugel-calendar-matrix-wrap {
    overflow-x: auto;
}

.ugel-calendar-meta {
    width: 100%;
    min-width: 1000px;
    margin-bottom: 26px;
    border-collapse: collapse;
    table-layout: fixed;
}

.ugel-calendar-meta th,
.ugel-calendar-meta td {
    height: 24px;
    padding: 2px 6px;
    border: 1px solid var(--calendar-line);
    font-family: Arial, sans-serif;
    font-size: .72rem;
    line-height: 1.05;
}

.ugel-calendar-meta th {
    width: 9%;
    background: #315994;
    color: #fff;
    font-weight: 900;
    text-align: left;
}

.ugel-calendar-meta td {
    width: 20%;
    font-weight: 700;
}

.ugel-calendar-meta .ugel-calendar-modular-title {
    width: 7%;
    text-align: center;
}

.ugel-calendar-check {
    display: inline-grid;
    width: 17px;
    height: 17px;
    place-items: center;
    border: 1px solid #111;
    font-size: .66rem;
    line-height: 1;
}

.ugel-calendar-matrix {
    width: 100%;
    min-width: 1120px;
    border-collapse: collapse;
    table-layout: fixed;
    font-family: Arial, sans-serif;
    font-size: .61rem;
    font-weight: 800;
}

.ugel-calendar-matrix th,
.ugel-calendar-matrix td {
    height: 25px;
    padding: 1px;
    border: 1px solid var(--calendar-line);
    text-align: center;
    vertical-align: middle;
}

.ugel-calendar-matrix thead th {
    background: #294f87;
    color: #fff;
    font-size: .59rem;
}

.ugel-calendar-matrix thead th:not(.ugel-calendar-month-heading),
.ugel-calendar-matrix td:not(:first-child) {
    width: 28px;
}

.ugel-calendar-matrix .ugel-calendar-month-heading,
.ugel-calendar-matrix tbody th {
    width: 96px;
    padding-left: 5px;
    background: #294f87;
    color: #fff;
    text-align: left;
}

.ugel-calendar-cell.invalid,
.ugel-calendar-cell.code-empty {
    background: #f4f5f7;
}

.ugel-calendar-cell.js-calendar-day {
    cursor: pointer;
    transition: filter .12s ease, outline-color .12s ease;
}

.ugel-calendar-cell.js-calendar-day:hover,
.ugel-calendar-cell.js-calendar-day:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: -2px;
    filter: brightness(.92);
}

.ugel-calendar-cell.code-f,
.ugel-calendar-legend .code-f { background: #ff2020; color: #000; }
.ugel-calendar-cell.code-s { background: #ffe800; color: #111; }
.ugel-calendar-cell.code-d { background: #fff274; color: #111; }
.ugel-calendar-cell.code-rec,
.ugel-calendar-legend .code-rec { background: #fff0dc; color: #121212; }
.ugel-calendar-cell.code-sg,
.ugel-calendar-legend .code-sg { background: #3d6499; color: #fff; }
.ugel-calendar-cell.code-b1 { background: #b9d4ee; color: #111; }
.ugel-calendar-cell.code-b2 { background: #bcebd9; color: #111; }
.ugel-calendar-cell.code-b3 { background: #99d47f; color: #111; }
.ugel-calendar-cell.code-b4 { background: #b7df7e; color: #111; }
.ugel-calendar-cell.code-anv,
.ugel-calendar-legend .code-anv { background: #ffd43b; color: #111; }
.ugel-calendar-cell.code-dei,
.ugel-calendar-legend .code-dei { background: #ffbf00; color: #111; }
.ugel-calendar-cell.code-l,
.ugel-calendar-legend .code-l { background: #c9cdd3; color: #111; }
.ugel-calendar-cell.code-c,
.ugel-calendar-legend .code-c { background: #bfc4ca; color: #111; }
.ugel-calendar-cell.code-at,
.ugel-calendar-legend .code-at { background: #cbe9ff; color: #111; }

.ugel-calendar-count {
    background: #f8fbff;
    font-weight: 900;
}

.ugel-calendar-count.total,
.ugel-calendar-matrix tfoot td {
    background: #315994;
    color: #fff;
}

.ugel-calendar-matrix tfoot th {
    padding-right: 8px;
    background: #fff;
    font-size: .72rem;
    text-align: right;
}

.ugel-calendar-matrix tfoot td {
    font-size: .68rem;
    font-weight: 900;
}

.ugel-calendar-empty {
    margin: .75rem 0 0;
    padding: .55rem .75rem;
    border: 1px solid #e4b857;
    background: #fff7df;
    color: #73530e;
    font-size: .78rem;
    font-weight: 800;
}

.ugel-calendar-lower-grid {
    display: grid;
    grid-template-columns: minmax(540px, .95fr) minmax(240px, 1.05fr);
    gap: 20px;
    margin-top: 16px;
}

.ugel-calendar-summary {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-family: Arial, sans-serif;
    font-size: .66rem;
}

.ugel-calendar-summary th,
.ugel-calendar-summary td {
    height: 22px;
    padding: 2px 4px;
    border: 1px solid var(--calendar-line);
    text-align: center;
}

.ugel-calendar-summary thead th {
    background: #fff;
    font-weight: 900;
}

.ugel-calendar-summary tbody tr.type-bimestre { background: #b9d4ee; }
.ugel-calendar-summary tbody tr.type-gestion { background: #8fd47e; }
.ugel-calendar-summary tbody th { background: #315994; color: #fff; }

.ugel-calendar-legend-hours {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    border: 1px solid var(--calendar-line);
    border-top: 0;
    font-family: Arial, sans-serif;
    font-size: .64rem;
}

.ugel-calendar-legend,
.ugel-calendar-hours {
    display: grid;
    grid-template-columns: 68px 1fr;
}

.ugel-calendar-legend {
    border-right: 1px solid var(--calendar-line);
}

.ugel-calendar-legend > strong,
.ugel-calendar-hours > strong {
    display: grid;
    padding: 4px;
    place-items: center;
    border-right: 1px solid var(--calendar-line);
    font-size: .66rem;
}

.ugel-calendar-legend dl,
.ugel-calendar-hours dl,
.ugel-calendar-legend dt,
.ugel-calendar-legend dd,
.ugel-calendar-hours dt,
.ugel-calendar-hours dd {
    margin: 0;
}

.ugel-calendar-legend dl > div,
.ugel-calendar-hours dl > div {
    display: grid;
    grid-template-columns: 42px 1fr;
    min-height: 18px;
    border-bottom: 1px solid var(--calendar-line);
}

.ugel-calendar-legend dl > div:last-child,
.ugel-calendar-hours dl > div:last-child {
    border-bottom: 0;
}

.ugel-calendar-legend dt,
.ugel-calendar-hours dd {
    display: grid;
    place-items: center;
    border-right: 1px solid var(--calendar-line);
    font-weight: 900;
}

.ugel-calendar-legend dd,
.ugel-calendar-hours dt {
    padding: 2px 5px;
    font-weight: 700;
}

.ugel-calendar-hours dl > div {
    grid-template-columns: 1fr 34px;
}

.ugel-calendar-hours dt {
    border-right: 1px solid var(--calendar-line);
}

.ugel-calendar-hours dd {
    border-right: 0;
}

.ugel-calendar-approval {
    container-type: inline-size;
    min-height: 250px;
}

.ugel-calendar-approval-layout {
    display: grid;
    min-height: 250px;
    grid-template-columns: 1fr;
    align-content: end;
    gap: 24px;
}

.ugel-calendar-signature-slot {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 10px;
}

.ugel-calendar-signature-preview {
    display: grid;
    width: 100%;
    min-height: 145px;
    place-items: center;
}

.ugel-calendar-signature-preview img {
    display: block;
    width: min(410px, 96%);
    height: 145px;
    object-fit: contain;
}

.ugel-calendar-signature-preview.is-empty {
    border: 2px dashed #b8c6d8;
    border-radius: 10px;
    background: #f6f9fd;
    color: #7790ad;
}

.ugel-calendar-signature-preview.is-empty i {
    font-size: 3rem;
}

.ugel-calendar-signature-upload {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.ugel-calendar-signature-button {
    display: inline-flex;
    width: 100%;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .55rem .8rem;
    border: 1px solid #1e6e4b;
    border-radius: 8px;
    background: #087f4c;
    color: #fff;
    font-size: .78rem;
    font-weight: 900;
    text-align: center;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}

.ugel-calendar-signature-button:hover {
    transform: translateY(-1px);
    background: #06673e;
}

.ugel-calendar-signature-button.is-loading {
    opacity: .75;
    pointer-events: none;
}

.ugel-calendar-signature-upload small {
    color: #6b7b90;
    font-size: .66rem;
}

@container (min-width: 560px) {
    .ugel-calendar-approval-layout {
        grid-template-columns: repeat(2, minmax(240px, 1fr));
        gap: 32px;
    }
}

.ugel-calendar-events-panel {
    width: min(1320px, 100%);
    margin: 1rem auto 0;
    padding: 1rem;
    border: 1px solid #c6d2df;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(16, 48, 82, .08);
}

.ugel-calendar-events-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .85rem;
}

.ugel-calendar-events-heading span {
    color: #0c7a43;
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.ugel-calendar-events-heading h2 {
    margin: .15rem 0;
    color: #163d68;
    font-size: 1.2rem;
    font-weight: 900;
}

.ugel-calendar-events-heading p {
    margin: 0;
    color: #617086;
    font-size: .82rem;
}

.ugel-calendar-events-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

.ugel-calendar-events-table th,
.ugel-calendar-events-table td {
    padding: .55rem .65rem;
    border: 1px solid #d5dee9;
    font-size: .78rem;
    vertical-align: middle;
}

.ugel-calendar-events-table thead th {
    background: #294f87;
    color: #fff;
    font-weight: 900;
}

.ugel-calendar-events-table td:nth-child(1),
.ugel-calendar-events-table td:nth-child(3),
.ugel-calendar-events-table td:nth-child(4),
.ugel-calendar-events-table td:nth-child(5) {
    text-align: center;
}

.ugel-calendar-events-table td strong,
.ugel-calendar-events-table td small {
    display: block;
}

.ugel-calendar-events-table td small {
    margin-top: .15rem;
    color: #69798f;
}

.ugel-calendar-event-badge {
    display: inline-grid;
    min-width: 48px;
    min-height: 28px;
    padding: .2rem .45rem;
    place-items: center;
    border: 1px solid rgba(0, 0, 0, .28);
    border-radius: 6px;
    background: #eef2f7;
    font-weight: 900;
}

.ugel-calendar-event-badge.code-f { background: #ff2020; }
.ugel-calendar-event-badge.code-anv { background: #ffd43b; }
.ugel-calendar-event-badge.code-dei { background: #ffbf00; }
.ugel-calendar-event-badge.code-sg { background: #3d6499; color: #fff; }
.ugel-calendar-event-badge.code-l,
.ugel-calendar-event-badge.code-c { background: #c9cdd3; }
.ugel-calendar-event-badge.code-at { background: #cbe9ff; }
.ugel-calendar-event-badge.code-rec { background: #fff0dc; }

.ugel-calendar-events-empty {
    padding: 1.25rem !important;
    color: #6a788b;
    text-align: center !important;
}

.ugel-calendar-modal-header {
    border: 0;
    background: linear-gradient(135deg, #294f87, #17365f);
    color: #fff;
}

.ugel-calendar-modal-header span {
    display: block;
    color: #bad7ff;
    font-size: .67rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.ugel-calendar-config-grid {
    display: grid;
    grid-template-columns: 160px minmax(280px, 1fr) repeat(3, minmax(150px, .55fr));
    gap: .9rem;
    align-items: end;
}

.ugel-calendar-config-norm {
    grid-column: span 2;
}

.ugel-calendar-shifts {
    display: flex;
    min-height: 39px;
    align-items: center;
    gap: 1rem;
    padding: .4rem .65rem;
    border: 1px solid #ced4da;
    border-radius: .375rem;
}

.ugel-calendar-shifts legend {
    float: none;
    width: auto;
    margin: 0;
    color: #52637a;
    font-size: .76rem;
    font-weight: 800;
}

.ugel-calendar-shifts label {
    font-size: .82rem;
    font-weight: 700;
}

.ugel-calendar-period-editor {
    margin-top: 1.2rem;
    padding: 1rem;
    border: 1px solid #ccdaea;
    border-radius: 8px;
    background: #f7faff;
}

.ugel-calendar-period-editor h6 {
    margin: 0;
    color: #173f70;
    font-weight: 900;
}

.ugel-calendar-period-editor p {
    margin: .2rem 0 .75rem;
    color: #65758b;
    font-size: .78rem;
}

.ugel-calendar-period-editor table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
}

.ugel-calendar-period-editor th,
.ugel-calendar-period-editor td {
    padding: .45rem;
    border: 1px solid #ccdaea;
}

.ugel-calendar-period-editor thead th {
    background: #315994;
    color: #fff;
    text-align: center;
}

.ugel-calendar-period-editor tbody th {
    width: 180px;
    background: #e8f0fb;
    color: #173f70;
}

@media (max-width: 980px) {
    .ugel-calendar-sheet {
        padding: 12px;
    }

    .ugel-calendar-lower-grid {
        grid-template-columns: 1fr;
    }

    .ugel-calendar-approval {
        min-height: 190px;
    }

    .ugel-calendar-config-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ugel-calendar-config-norm {
        grid-column: span 1;
    }
}

@media (max-width: 620px) {
    .ugel-calendar-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .ugel-calendar-toolbar-actions {
        justify-content: flex-start;
    }

    .ugel-calendar-edit,
    .ugel-calendar-print,
    .ugel-calendar-home {
        flex: 1 1 140px;
    }

    .ugel-calendar-header img {
        width: 100%;
    }

    .ugel-calendar-header h1 {
        font-size: 1.15rem;
    }

    .ugel-calendar-legend-hours {
        grid-template-columns: 1fr;
    }

    .ugel-calendar-legend {
        border-right: 0;
        border-bottom: 1px solid var(--calendar-line);
    }

    .ugel-calendar-events-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .ugel-calendar-config-grid {
        grid-template-columns: 1fr;
    }
}

@media print {
    @page {
        size: A3 landscape;
        margin: 6mm;
    }

    body.ugel-calendar-view.comano-body,
    body.ugel-calendar-view.sidebar-collapsed.comano-body,
    body.ugel-calendar-view.sidebar-open.comano-body {
        display: block !important;
        grid-template-columns: none !important;
        width: auto !important;
        min-height: auto !important;
        background: #fff !important;
        overflow: visible !important;
    }

    body.ugel-calendar-view > .comano-main,
    body.ugel-calendar-view .content-wrapper {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    body.ugel-calendar-view .comano-footer {
        display: none !important;
    }

    .ugel-calendar-sheet {
        width: 100%;
        max-width: none;
        padding: 0;
        overflow: visible;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .ugel-calendar-meta-wrap,
    .ugel-calendar-matrix-wrap {
        overflow: visible;
    }

    .ugel-calendar-meta,
    .ugel-calendar-matrix {
        min-width: 0;
    }

    .ugel-calendar-matrix th,
    .ugel-calendar-matrix td {
        height: 20px;
    }

    .ugel-calendar-lower-grid {
        break-inside: avoid;
        grid-template-columns: 1fr 1fr;
    }

    .ugel-calendar-approval-layout {
        grid-template-columns: repeat(2, minmax(260px, 1fr));
        gap: 36px;
    }

    .ugel-calendar-signature-preview img {
        width: 100%;
        max-width: 400px;
    }
}

.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: .6rem 0 0;
    color: #52657a;
    font-weight: 700;
    line-height: 1.35;
    max-width: 100%;
}

@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;
    width: 100%;
}

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

.login-password-group {
    align-items: stretch;
}

.login-password-group .form-control {
    min-width: 0;
}

.login-password-group .input-group-text {
    flex: 0 0 66px;
    justify-content: center;
}

.login-password-group .js-toggle-password {
    display: inline-flex;
    flex: 0 0 66px;
    align-items: center;
    justify-content: center;
    width: 66px;
    margin-top: 0;
}

.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;
}

.menu-heading[data-menu-href] {
    cursor: pointer;
}

.menu-heading-chevron {
    padding: .2rem;
    border-radius: .45rem;
}

.menu-heading-chevron:hover {
    background: rgba(255, 255, 255, .12);
}

.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);
}

.submenu-branch {
    margin: .1rem 0;
}

.submenu-parent {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .38rem .5rem;
    border: 0;
    border-radius: .5rem;
    background: transparent;
    color: #c7d2df;
    font: inherit;
    font-size: .94rem;
    text-align: left;
}

.submenu-parent:hover,
.submenu-parent:focus-visible,
.submenu-branch.open > .submenu-parent {
    color: #fff;
    background: rgba(255, 255, 255, .08);
}

.submenu-parent:focus-visible {
    outline: 2px solid rgba(255, 199, 44, .72);
    outline-offset: 2px;
}

.submenu-parent-chevron {
    margin-left: auto;
    font-size: .72rem;
    transition: transform .18s ease;
}

.submenu-branch.open .submenu-parent-chevron {
    transform: rotate(90deg);
}

.submenu-children {
    display: none;
    margin: .1rem 0 .25rem .55rem;
    padding-left: .7rem;
    border-left: 1px solid rgba(255, 255, 255, .18);
}

.submenu-branch.open .submenu-children {
    display: block;
}

.submenu-children a {
    position: relative;
    padding-left: .75rem;
    font-size: .88rem;
}

.submenu-children a::before {
    content: '';
    position: absolute;
    top: 50%;
    left: .05rem;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: .65;
}

.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; }

.evaluation-hub-title {
    align-items: flex-end;
}

.evaluation-hub-shell {
    padding: 1.15rem;
    border: 1px solid #cfe3d6;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(0, 114, 54, .07), transparent 38%),
        linear-gradient(315deg, rgba(8, 127, 91, .06), transparent 34%),
        #fff;
    box-shadow: 0 18px 36px rgba(15, 44, 70, .07);
}

.evaluation-hub-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #dbe9df;
}

.evaluation-hub-eyebrow {
    display: inline-flex;
    align-items: center;
    margin-bottom: .35rem;
    color: var(--brand);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.evaluation-hub-intro h2 {
    margin: 0;
    color: var(--ink);
    font-size: 1.6rem;
    font-weight: 900;
}

.evaluation-hub-intro p {
    max-width: 820px;
    margin: .35rem 0 0;
    color: var(--muted);
    font-weight: 600;
}

.evaluation-hub-summary {
    min-width: 176px;
    padding: .9rem 1rem;
    border: 1px solid #cfe3d6;
    border-radius: 8px;
    background: #f7fbf9;
    text-align: right;
}

.evaluation-hub-summary i {
    color: var(--brand);
    font-size: 1.25rem;
}

.evaluation-hub-summary strong {
    display: block;
    color: var(--ink);
    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
}

.evaluation-hub-summary span {
    color: var(--muted);
    font-size: .84rem;
    font-weight: 800;
}

.evaluation-hub-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: 1rem;
}

.evaluation-hub-card {
    position: relative;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: .65rem;
    min-height: 202px;
    padding: 1rem;
    overflow: hidden;
    color: var(--ink);
    text-decoration: none;
    border: 1px solid #d7e6dd;
    border-top: 4px solid var(--brand);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 26px rgba(15, 44, 70, .06);
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.evaluation-hub-card:hover {
    color: var(--ink);
    border-color: #82c59c;
    box-shadow: 0 16px 30px rgba(8, 100, 52, .12);
    transform: translateY(-2px);
}

.evaluation-hub-icon {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    color: var(--brand);
    background: var(--brand-soft);
    border: 1px solid var(--brand-line);
    border-radius: 8px;
    font-size: 1.35rem;
}

.evaluation-hub-card strong {
    position: relative;
    z-index: 1;
    color: var(--ink);
    font-size: 1.08rem;
    font-weight: 900;
    line-height: 1.2;
}

.evaluation-hub-card p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--muted);
    font-size: .94rem;
    line-height: 1.35;
}

.evaluation-hub-action {
    position: relative;
    z-index: 1;
    display: inline-flex;
    gap: .35rem;
    align-items: center;
    justify-self: start;
    color: var(--brand-dark);
    font-size: .88rem;
    font-weight: 900;
}

.evaluation-hub-card.is-success { border-top-color: #198754; }
.evaluation-hub-card.is-success .evaluation-hub-icon { color: #146c43; background: #e8f6ef; border-color: #bfe7d0; }
.evaluation-hub-card.is-info { border-top-color: #087f5b; }
.evaluation-hub-card.is-info .evaluation-hub-icon { color: #075f47; background: #e6f6f1; border-color: #bfe3d8; }
.evaluation-hub-card.is-warning { border-top-color: #f0ad00; }
.evaluation-hub-card.is-warning .evaluation-hub-icon { color: #8a6200; background: #fff6d8; border-color: #ffe39b; }
.evaluation-hub-card.is-danger { border-top-color: #dc3545; }
.evaluation-hub-card.is-danger .evaluation-hub-icon { color: #b02a37; background: #fff0f2; border-color: #f5c2c7; }
.evaluation-hub-card.is-secondary { border-top-color: #52637a; }
.evaluation-hub-card.is-secondary .evaluation-hub-icon { color: #334155; background: #eef3f8; border-color: #d4dde8; }

@media (max-width: 1100px) {
    .evaluation-hub-grid {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
    }
}

@media (max-width: 700px) {
    .evaluation-hub-shell {
        padding: .85rem;
    }

    .evaluation-hub-intro {
        grid-template-columns: 1fr;
    }

    .evaluation-hub-summary {
        min-width: 0;
        text-align: left;
    }

    .evaluation-hub-intro h2 {
        font-size: 1.28rem;
    }

    .evaluation-hub-grid {
        grid-template-columns: 1fr;
    }

    .evaluation-hub-card {
        min-height: 172px;
    }
}

.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%;
    min-width: 0;
}

.bootstrap-autocomplete-input {
    min-height: 46px;
    padding: .62rem 2.5rem .62rem .9rem;
    border-color: #d5e1ec;
    border-radius: 8px;
    color: #172033;
    background-color: #fff;
    background-image:
        linear-gradient(45deg, transparent 50%, #344054 52%),
        linear-gradient(135deg, #344054 52%, transparent 50%);
    background-position:
        calc(100% - 19px) 50%,
        calc(100% - 13px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bootstrap-autocomplete-input:hover {
    border-color: #b8c8d9;
}

.bootstrap-autocomplete-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 .2rem rgba(0, 114, 54, .14), 0 8px 18px rgba(16, 24, 40, .08);
}

.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: .4rem;
    padding: .4rem;
    border: 1px solid #d6e1ec;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .18);
    z-index: 1080;
}

.bootstrap-autocomplete-item {
    width: 100%;
    padding: .62rem .75rem;
    border-radius: 6px;
    color: #172033;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.bootstrap-autocomplete-item:hover,
.bootstrap-autocomplete-item:focus {
    color: #063b22;
    background: #edf8f2;
}

.bootstrap-autocomplete-item.active,
.bootstrap-autocomplete-item.active:hover,
.bootstrap-autocomplete-item.active:focus {
    color: #fff;
    background: var(--brand);
}

.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;
}

.student-exoneration-filter {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 1rem;
    align-items: end;
}

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

.student-exoneration-filter-panel {
    position: relative;
    z-index: 20;
}

.student-exoneration-filter > div {
    min-width: 0;
}

.student-exoneration-filter .bootstrap-autocomplete-menu {
    z-index: 1200;
}

.student-exoneration-filter .filter-wide {
    grid-column: 1 / span 3;
    flex: initial;
}

.student-exoneration-filter .btn {
    grid-column: 4;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    width: 100%;
    min-height: 46px;
    padding-inline: 1.1rem;
    justify-content: center;
    white-space: nowrap;
}

.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-fit, minmax(min(100%, 390px), 430px));
    justify-content: center;
    gap: 1rem;
    padding: 1rem;
    background: #eef5f1;
}

.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 {
    --card-gold: #e9ba2b;
    --card-green: #005532;
    --card-green-deep: #003c25;
    position: relative;
    width: 100%;
    max-width: 430px;
    aspect-ratio: 85.6 / 53.98;
    overflow: hidden;
    isolation: isolate;
    border: 0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(0, 48, 29, .2), 0 3px 8px rgba(0, 0, 0, .12);
    break-inside: avoid;
}

.student-id-card::before,
.student-id-card::after {
    content: "";
    position: absolute;
    z-index: 9;
    pointer-events: none;
}

.student-id-card::before {
    inset: 0;
    border: 2px solid #002f1d;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px #efc34f;
}

.student-id-card::after {
    inset: 4px;
    border: 1px solid rgba(255, 236, 164, .72);
    border-radius: 9px;
}

.student-id-card-template {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
    user-select: none;
}

.student-id-card-year {
    position: absolute;
    display: grid;
    z-index: 5;
    top: 0;
    right: 0;
    width: 14.4%;
    height: 15.2%;
    place-items: center;
    padding: 0 1.1% .3%;
    border-bottom-left-radius: 24%;
    background: linear-gradient(150deg, #00351f, #005536 75%, #003b24);
    color: #f3c446;
    font-size: clamp(.82rem, 3.9cqw, 1.38rem);
    font-weight: 1000;
    line-height: 1;
    letter-spacing: -.04em;
    text-shadow: 0 1px 1px #644900, 0 0 2px rgba(255, 229, 128, .75);
}

.student-id-card-fields {
    position: absolute;
    z-index: 5;
    inset: 0;
    margin: 0;
    pointer-events: none;
}

.student-id-card-fields > div {
    position: absolute;
    min-width: 0;
}

.student-id-card-fields dt,
.student-id-card-fields dd {
    margin: 0;
    min-width: 0;
    text-transform: uppercase;
}

.student-id-card-fields dd {
    overflow: hidden;
    padding: .08rem .18rem .07rem;
    background: rgba(255, 255, 255, .96);
    color: #003c25;
    font-size: clamp(.43rem, 1.8cqw, .62rem);
    font-weight: 1000;
    line-height: 1.08;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-id-card-name {
    top: 39.4%;
    right: 3.5%;
    left: 54.1%;
    height: 7.4%;
}

.student-id-card-name dd {
    display: -webkit-box;
    padding-top: 0;
    font-size: clamp(.4rem, 1.65cqw, .57rem);
    line-height: 1.02;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.student-id-card-grade {
    top: 51.9%;
    right: 3.6%;
    left: 63.1%;
}

.student-id-card-section {
    top: 60.9%;
    right: 3.6%;
    left: 64.2%;
}

.student-id-card-level {
    top: 70.1%;
    right: 3.6%;
    left: 61.7%;
}

.student-id-card-dni {
    top: 79.4%;
    right: 3.6%;
    left: 59.3%;
}

.student-id-card-qr-panel {
    position: absolute;
    z-index: 5;
    top: 37.1%;
    left: 21.3%;
    width: 29.1%;
    height: 42.5%;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 3px;
    background: #fff;
    box-shadow:
        0 0 0 1px #003822,
        0 0 0 3px #efc34f,
        0 0 0 5px #003c25,
        0 4px 9px rgba(0, 40, 24, .24);
}

.student-id-card-qr {
    display: grid;
    place-items: center;
    width: auto;
    height: 100%;
    max-width: 100%;
    aspect-ratio: 1;
    padding: 0;
    background: #fff;
}

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

.student-id-card-qr > span {
    color: #0b5738;
    font-size: .7rem;
    font-weight: 900;
    text-align: center;
}

.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 > .staff-person-section-icon {
    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-teacher-profile-heading {
    min-width: 220px;
}

.staff-teacher-profile-cell {
    min-width: 230px;
}

.staff-teacher-profile-summary {
    align-items: center;
    display: flex;
    gap: .65rem;
}

.staff-teacher-profile-icon {
    align-items: center;
    background: linear-gradient(145deg, #e9f8ef, #d8f0e2);
    border: 1px solid #bfe3cd;
    border-radius: .65rem;
    color: #08733d;
    display: inline-flex;
    flex: 0 0 38px;
    font-size: 1.05rem;
    height: 38px;
    justify-content: center;
}

.staff-teacher-profile-summary strong,
.staff-teacher-profile-summary small {
    display: block;
}

.staff-teacher-profile-summary strong {
    color: #173a2a;
    font-size: .88rem;
    font-weight: 800;
    line-height: 1.25;
}

.staff-teacher-profile-summary small {
    color: #64748b;
    font-size: .78rem;
    margin-top: .12rem;
}

.staff-teacher-profile-na {
    background: #f1f5f9;
    border: 1px solid #dbe4ec;
    border-radius: 999px;
    color: #64748b;
    display: inline-flex;
    font-size: .76rem;
    font-weight: 800;
    padding: .28rem .65rem;
}

.staff-teacher-professional {
    background: #fff;
    border-color: #b9ddc7;
    box-shadow: 0 14px 34px rgba(15, 71, 43, .08);
    overflow: hidden;
    padding: 0;
}

.staff-teacher-professional-title {
    align-items: center;
    background: linear-gradient(110deg, #f5fcf8 0%, #fff 72%);
    border-bottom-color: #d9ebe0;
    display: grid;
    gap: .85rem;
    grid-template-columns: 44px minmax(0, 1fr) max-content;
    margin: 0;
    padding: 1rem 1.1rem;
}

.staff-teacher-professional-title > .staff-person-section-icon {
    background: #e8f7ee;
    border-color: #bde3cb;
    border-radius: .7rem;
    color: #08733d;
    font-size: 1.15rem;
    height: 44px;
    width: 44px;
}

.staff-teacher-professional-heading-copy {
    min-width: 0;
}

.staff-teacher-professional-heading-copy strong {
    color: #103e28;
    font-size: 1.05rem;
}

.staff-teacher-professional-heading-copy small {
    color: #597064;
    font-size: .86rem;
    line-height: 1.35;
}

.staff-teacher-required-note {
    align-items: center;
    align-self: center;
    background: #eaf7ef;
    border: 1px solid #b9dfc8;
    border-radius: 999px;
    color: #086c39;
    display: inline-flex;
    font-size: .76rem;
    font-weight: 800;
    gap: .38rem;
    justify-self: end;
    justify-content: center;
    line-height: 1.2;
    min-height: 34px;
    padding: .42rem .72rem;
    white-space: nowrap;
}

.staff-teacher-required-note i {
    font-size: .86rem;
}

.staff-teacher-professional-body {
    display: grid;
    gap: .9rem;
    padding: 1rem 1.1rem 1.1rem;
}

.staff-teacher-fields {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.staff-teacher-fields .staff-teacher-field {
    grid-column: auto;
    min-width: 0;
}

.staff-teacher-field .form-select {
    background-color: #fff;
    border-color: #cbded3;
    font-size: .95rem;
    min-height: 50px;
}

.staff-teacher-field .form-select:hover {
    border-color: #8fc5a6;
}

.staff-required-mark {
    color: #c62828;
}

.staff-field-help {
    color: #627469;
    display: block;
    font-size: .8rem;
    line-height: 1.4;
    margin-top: .4rem;
}

.staff-teacher-profile-callout {
    align-items: center;
    background: #f3f8ff;
    border: 1px solid #ccdef4;
    border-radius: .65rem;
    color: #38516d;
    display: grid;
    font-size: .82rem;
    gap: .7rem;
    grid-template-columns: 36px minmax(0, 1fr);
    line-height: 1.42;
    padding: .72rem .8rem;
    width: 100%;
}

.staff-teacher-profile-callout > span:last-child {
    min-width: 0;
}

.staff-teacher-profile-callout strong {
    color: #174b7a;
    display: block;
    font-size: .84rem;
    margin-bottom: .08rem;
}

.staff-teacher-profile-callout-icon {
    align-items: center;
    background: #e2efff;
    border-radius: .55rem;
    color: #1c67ad;
    display: inline-flex;
    font-size: 1rem;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.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;
    }

    .staff-teacher-fields {
        grid-template-columns: 1fr;
    }

    .staff-teacher-professional-title {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .staff-teacher-required-note {
        grid-column: 2;
        justify-self: start;
    }
}

.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;
}

.grades-entry-table {
    max-height: none;
    height: auto;
    overflow-y: visible;
}

.evaluation-table table {
    min-width: 1200px;
}

.evaluation-table th,
.evaluation-table td {
    min-width: 220px;
}

.evaluation-table .competency-col {
    width: 260px;
    min-width: 260px;
    max-width: 260px;
    white-space: normal;
    vertical-align: middle;
}

.evaluation-table .competency-header-label {
    display: block;
    max-width: 100%;
    color: #0e2a4a;
    font-size: .95rem;
    font-weight: 900;
    line-height: 1.18;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
}

.evaluation-grade-cell {
    width: 260px;
    min-width: 260px;
    max-width: 260px;
}

.transversal-consolidated-panel .panel-header {
    align-items: flex-start;
}

.transversal-readonly-table table {
    min-width: 980px;
}

.transversal-readonly-cell {
    background: #fbfdfc;
}

.transversal-edit-cell {
    vertical-align: top;
}

.transversal-edit-cell .js-conclusion-limited {
    min-height: 84px;
    resize: vertical;
}

.transversal-grade-line {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-wrap: wrap;
    margin-bottom: .45rem;
}

.transversal-grade-line small,
.transversal-average {
    color: var(--muted);
    font-weight: 800;
}

.grade-badge {
    display: inline-grid;
    place-items: center;
    min-width: 42px;
    min-height: 36px;
    padding: .25rem .65rem;
    border-radius: .65rem;
    color: #fff;
    background: #6c7a89;
    font-size: 1.05rem;
    font-weight: 950;
    letter-spacing: .02em;
}

.grade-ad {
    background: #087f5b;
}

.grade-a {
    background: #0b74de;
}

.grade-b {
    background: #c78212;
}

.grade-c {
    background: #c0392b;
}

.grade-empty {
    color: #687789;
    background: #eef3f6;
    border: 1px solid #d7e2ea;
}

.transversal-readonly-detail,
.transversal-readonly-conclusion {
    margin-top: .55rem;
    padding: .65rem .75rem;
    border: 1px solid #dce9df;
    border-radius: .65rem;
    color: #203046;
    background: #fff;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.35;
}

.transversal-readonly-conclusion {
    border-color: #f0dfba;
    background: #fffaf0;
}

.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: #c1121f;
    font-weight: 900;
}

.evaluation-grade-cell.requires-conclusion {
    background: #fff7f8;
}

.js-conclusion-limited.is-conclusion-required {
    border-color: #f0a3b1;
    background-color: #fff0f3;
    color: #7b1020;
    box-shadow: inset 0 0 0 1px rgba(193, 18, 31, .12);
}

.js-conclusion-limited.is-conclusion-required:focus {
    border-color: #d6334f;
    background-color: #fff7f9;
    box-shadow: 0 0 0 .2rem rgba(214, 51, 79, .18);
}

.js-conclusion-limited.has-saved-conclusion,
.js-conclusion-limited.has-saved-conclusion:focus {
    color: #0b5ed7;
}

.conclusion-length-counter {
    display: block;
    margin-top: .2rem;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 700;
    text-align: right;
}

.js-grades-form[data-conclusions="none"] .js-conclusion-limited,
.js-grades-form[data-conclusions="none"] .js-conclusion-length-counter {
    display: none !important;
}

.ugel-h-board {
    width: min(1120px, 100%);
    margin: 0 auto;
    padding: 22px 22px 28px;
    border: 1px solid #d8e0ea;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(15, 44, 79, .1);
}

.ugel-h-brand {
    display: flex;
    justify-content: center;
    min-height: 66px;
    margin-bottom: 12px;
}

.ugel-h-brand img {
    width: min(760px, 100%);
    height: 58px;
    object-fit: contain;
}

.ugel-h-title-box {
    display: grid;
    place-items: center;
    min-height: 174px;
    padding: 24px;
    border: 6px double #274f80;
    border-radius: 16px;
    background: linear-gradient(180deg, #fff 0%, #f9fbfe 100%);
    box-shadow: 0 3px 0 rgba(22, 48, 78, .35);
    text-align: center;
}

.ugel-h-title-box span {
    color: #a42a31;
    font-size: .75rem;
    font-weight: 900;
    letter-spacing: .16em;
}

.ugel-h-title-box h1 {
    margin: 4px 0 0;
    color: #25547f;
    font-size: clamp(1.9rem, 3.6vw, 2.7rem);
    font-weight: 950;
    letter-spacing: .035em;
    line-height: 1.1;
}

.ugel-h-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 62px;
    margin-top: 20px;
}

.ugel-h-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 74px;
    padding: 12px 16px;
    border: 4px double #0b2c88;
    border-radius: 14px;
    background: linear-gradient(180deg, #385a8a 0%, #253f6d 100%);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .08), 0 4px 7px rgba(15, 36, 67, .3);
    color: #fff;
    text-decoration: none;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.ugel-h-action:hover,
.ugel-h-action:focus-visible {
    transform: translateY(-2px);
    background: linear-gradient(180deg, #42699e 0%, #2a4a7e 100%);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12), 0 7px 14px rgba(15, 36, 67, .32);
    color: #fff;
}

.ugel-h-action strong {
    max-width: calc(100% - 54px);
    font-size: .94rem;
    line-height: 1.15;
}

.ugel-h-action i {
    flex: 0 0 auto;
    font-size: 2.45rem;
    line-height: 1;
}

.ugel-h-institution-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 44px;
    margin: 26px 2px 0;
}

.ugel-h-institution-grid > div {
    min-width: 0;
}

.ugel-h-institution-grid dt,
.ugel-h-institution-grid dd {
    margin: 0;
}

.ugel-h-institution-grid dt {
    padding: 4px 8px;
    background: #355c9d;
    color: #fff;
    font-size: .94rem;
    font-weight: 900;
    line-height: 1.1;
    text-align: center;
}

.ugel-h-institution-grid dd {
    min-height: 29px;
    margin-top: 5px;
    padding: 4px 6px;
    overflow: hidden;
    border: 1px solid #355c9d;
    color: #0d1625;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: .91rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ugel-h-institution-grid > div:nth-child(3n) dd {
    text-align: center;
}

@media (max-width: 980px) {
    .ugel-h-actions {
        gap: 16px 22px;
    }

    .ugel-h-institution-grid {
        gap: 8px 20px;
    }
}

@media (max-width: 760px) {
    .ugel-h-board {
        padding: 15px;
        border-radius: 12px;
    }

    .ugel-h-title-box {
        min-height: 132px;
        padding: 18px 12px;
    }

    .ugel-h-actions,
    .ugel-h-institution-grid {
        grid-template-columns: 1fr;
    }

    .ugel-h-action {
        min-height: 66px;
    }

    .ugel-h-institution-grid > div:nth-child(3n) dd {
        text-align: left;
    }
}

.ugel-achievements-menu {
    box-sizing: border-box;
    width: min(1180px, 100%);
    min-height: 610px;
    margin: 0 auto;
    padding: 26px 24px 54px;
    border: 1px solid #d8e0ea;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(15, 44, 79, .1);
}

.ugel-achievements-brand {
    display: flex;
    justify-content: center;
    min-height: 66px;
}

.ugel-achievements-brand img {
    width: min(760px, 100%);
    height: 58px;
    object-fit: contain;
}

.ugel-achievements-title-box {
    display: grid;
    place-items: center;
    min-height: 76px;
    margin-top: 22px;
    padding: 12px 24px;
    border: 2px solid #111827;
    text-align: center;
}

.ugel-achievements-title-box h1 {
    margin: 0;
    color: #07101c;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(1.75rem, 4vw, 3rem);
    font-weight: 950;
    letter-spacing: .02em;
    line-height: 1.08;
}

.ugel-achievements-options {
    display: grid;
    grid-template-columns: 236px 236px 210px;
    align-items: center;
    justify-content: center;
    gap: clamp(36px, 8vw, 100px);
    margin-top: 50px;
}

.ugel-achievements-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 236px;
    min-height: 192px;
    padding: 20px 16px 14px;
    border: 6px double #163968;
    border-radius: 30px;
    background: linear-gradient(180deg, #365888 0%, #274673 100%);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .08), 0 5px 8px rgba(15, 36, 67, .35);
    color: #fff;
    text-align: center;
    text-decoration: none;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.ugel-achievements-card:hover,
.ugel-achievements-card:focus-visible {
    transform: translateY(-3px);
    background: linear-gradient(180deg, #41699e 0%, #2b4d80 100%);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12), 0 9px 17px rgba(15, 36, 67, .32);
    color: #fff;
}

.ugel-achievements-card i {
    margin-bottom: 26px;
    font-size: 3.25rem;
    line-height: 1;
}

.ugel-achievements-card strong {
    font-size: 1.08rem;
    line-height: 1.08;
}

.ugel-achievements-home {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #050505;
    text-align: center;
    text-decoration: none;
}

.ugel-achievements-home i {
    margin-bottom: 8px;
    font-size: 5.4rem;
    line-height: 1;
    transition: transform .16s ease;
}

.ugel-achievements-home strong {
    display: block;
    min-width: 210px;
    padding: 12px 16px;
    border: 2px solid #111;
    border-radius: 10px;
    background: #fff;
    font-size: 1.08rem;
    line-height: 1.1;
}

.ugel-achievements-home:hover,
.ugel-achievements-home:focus-visible {
    color: #25547f;
}

.ugel-achievements-home:hover i,
.ugel-achievements-home:focus-visible i {
    transform: translateY(-3px);
}

.ugel-monitoring-menu {
    width: min(1420px, 100%);
    min-height: 640px;
}

.ugel-monitoring-menu .ugel-achievements-options {
    grid-template-columns: 280px 280px 210px;
    gap: clamp(46px, 7vw, 100px);
    margin-top: 72px;
}

.ugel-monitoring-menu .ugel-achievements-card {
    width: 280px;
    min-height: 220px;
}

.ugel-monitoring-menu .ugel-achievements-card strong {
    font-size: 1.04rem;
}

@media (max-width: 980px) {
    .ugel-achievements-options {
        grid-template-columns: repeat(2, 236px);
        gap: 30px 50px;
    }

    .ugel-achievements-home {
        grid-column: 1 / -1;
    }

    .ugel-monitoring-menu .ugel-achievements-options {
        grid-template-columns: repeat(2, 280px);
    }
}

@media (max-width: 620px) {
    .ugel-achievements-menu {
        min-height: 0;
        padding: 18px 14px 34px;
        border-radius: 12px;
    }

    .ugel-achievements-title-box {
        min-height: 70px;
        margin-top: 14px;
        padding: 12px;
    }

    .ugel-achievements-options {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-top: 30px;
    }

    .ugel-achievements-card {
        width: min(236px, 100%);
        min-height: 176px;
        margin: 0 auto;
    }

    .ugel-achievements-home {
        grid-column: auto;
    }

    .ugel-monitoring-menu .ugel-achievements-options {
        grid-template-columns: 1fr;
    }

    .ugel-monitoring-menu .ugel-achievements-card {
        width: min(280px, 100%);
    }
}

.ugel-periods-page {
    box-sizing: border-box;
    width: 100%;
    min-height: 640px;
    padding: 18px;
    border: 1px solid #cfd9d2;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(25, 67, 45, .09);
}

.ugel-periods-toolbar {
    display: grid;
    grid-template-columns: minmax(540px, 1fr) 390px;
    gap: 28px;
    align-items: stretch;
}

.ugel-periods-selector {
    padding: 6px;
    border: 4px solid #68a84b;
    border-radius: 13px;
    background: #fff;
}

.ugel-periods-selector-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 7px 6px;
}

.ugel-periods-selector-head h1 {
    margin: 0;
    color: #111;
    font-family: Arial, sans-serif;
    font-size: 1rem;
    font-weight: 900;
    text-decoration: underline;
}

.ugel-periods-selector-head form {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ugel-periods-selector-head label {
    color: #315b24;
    font-size: .74rem;
    font-weight: 900;
}

.ugel-periods-selector-head select {
    min-width: 84px;
    padding: 3px 24px 3px 7px;
    border: 1px solid #71975f;
    border-radius: 5px;
    background: #f4faef;
    color: #15220f;
    font-size: .82rem;
    font-weight: 800;
}

.ugel-periods-levels {
    display: grid;
    gap: 6px;
}

.ugel-periods-level-row {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 12px;
}

.ugel-periods-level-row > strong {
    display: flex;
    align-items: center;
    min-height: 32px;
    padding: 5px 9px;
    border: 1px solid #7b9470;
    border-radius: 8px;
    background: #c8e2b8;
    color: #3d5b34;
    font-size: .82rem;
    font-weight: 900;
}

.ugel-periods-level-row > strong.is-selected {
    background: #a7d38e;
    color: #214d19;
}

.ugel-periods-level-row > div {
    display: grid;
    grid-template-columns: repeat(6, minmax(54px, 1fr));
    gap: 7px;
}

.ugel-periods-grade {
    display: grid;
    place-items: center;
    min-height: 32px;
    padding: 4px 8px;
    border: 1px solid #7b9470;
    border-radius: 7px;
    background: #e8f2e2;
    color: #111;
    font-size: .82rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
}

.ugel-periods-grade:hover,
.ugel-periods-grade:focus-visible {
    border-color: #4d7e37;
    background: #d8edcb;
    color: #183d14;
}

.ugel-periods-grade.is-selected {
    border-color: #be8b00;
    background: #ffc107;
    box-shadow: inset 0 0 0 1px #ffe083;
    color: #111;
}

.ugel-periods-actions {
    display: grid;
    grid-template-columns: 150px minmax(180px, 1fr);
    gap: 8px 14px;
    align-items: center;
}

.ugel-periods-back,
.ugel-periods-tracking {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #111;
    text-align: center;
    text-decoration: none;
}

.ugel-periods-back i {
    color: #aeb2b3;
    font-size: 4.4rem;
    line-height: 1;
}

.ugel-periods-back strong {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 9px 12px;
    border: 4px outset #858585;
    border-radius: 9px;
    background: linear-gradient(#c8c8c8, #8f8f8f);
    color: #111;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1rem;
    font-weight: 500;
}

.ugel-periods-tracking {
    min-height: 108px;
    padding: 10px 12px;
    border: 3px double #153967;
    border-radius: 10px;
    background: linear-gradient(180deg, #f7f9fb 0 55%, #31517d 55% 100%);
    box-shadow: 0 3px 6px rgba(15, 44, 79, .26);
}

.ugel-periods-tracking i {
    margin-bottom: 11px;
    color: #365c83;
    font-size: 2.7rem;
    line-height: 1;
}

.ugel-periods-tracking span {
    color: #fff;
    font-size: .73rem;
    font-weight: 900;
    line-height: 1.02;
}

.ugel-periods-excel {
    grid-column: 1 / -1;
    justify-self: end;
    padding: 5px 10px;
    border: 1px solid #27814b;
    border-radius: 6px;
    color: #126a36;
    font-size: .74rem;
    font-weight: 900;
    text-decoration: none;
}

.ugel-periods-excel:hover,
.ugel-periods-excel:focus-visible {
    background: #e8f6ed;
    color: #0d5b2d;
}

.ugel-periods-context {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 7px;
    color: #3f672f;
    font-size: .78rem;
}

.ugel-periods-context span,
.ugel-periods-context em {
    padding-left: 8px;
    border-left: 1px solid #99b88c;
}

.ugel-periods-context em {
    margin-left: auto;
    font-style: normal;
}

.ugel-periods-table-wrap {
    max-height: 68vh;
    overflow: auto;
    border: 1px solid #4d8b38;
}

.ugel-periods-table {
    width: 100%;
    min-width: 1190px;
    margin: 0;
    border-collapse: collapse;
    color: #111;
    font-family: Arial, sans-serif;
    font-size: .68rem;
    line-height: 1.08;
}

.ugel-periods-table th,
.ugel-periods-table td {
    padding: 3px 4px;
    border: 1px solid #65a64f;
    text-align: center;
    vertical-align: middle;
}

.ugel-periods-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #4c7f30;
    color: #fff;
    font-weight: 900;
}

.ugel-periods-table thead tr:nth-child(2) th {
    top: 28px;
}

.ugel-periods-table thead tr:nth-child(3) th {
    top: 50px;
}

.ugel-periods-table .ugel-periods-vertical {
    width: 46px;
    min-width: 46px;
    height: 54px;
    padding: 3px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.ugel-periods-table .ugel-periods-area-head {
    width: 130px;
    min-width: 130px;
}

.ugel-periods-table .ugel-periods-competency-head {
    width: 360px;
    min-width: 360px;
}

.ugel-periods-table .ugel-periods-bimester-name {
    min-width: 96px;
}

.ugel-periods-letter-row th:first-child {
    height: 0;
    padding: 0;
    border: 0;
}

.ugel-periods-table tbody td {
    min-width: 26px;
    background: #f5faef;
}

.ugel-periods-table tbody tr:nth-child(even) td {
    background: #e7f1df;
}

.ugel-periods-table tbody td:nth-child(4),
.ugel-periods-table tbody td:nth-child(5) {
    text-align: left;
}

.ugel-periods-table tbody td:nth-child(5) {
    min-width: 360px;
}

.ugel-periods-table .ugel-periods-final-cell {
    background: #fff !important;
}

.ugel-periods-empty {
    display: grid;
    justify-items: center;
    gap: 7px;
    min-height: 260px;
    padding: 60px 20px;
    border: 1px dashed #8eb47c;
    background: #f8fcf5;
    color: #35582b;
    text-align: center;
}

.ugel-periods-empty i {
    font-size: 2.4rem;
}

.ugel-periods-empty span {
    color: #63725e;
    font-size: .86rem;
}

@media (max-width: 1180px) {
    .ugel-periods-toolbar {
        grid-template-columns: 1fr;
    }

    .ugel-periods-actions {
        grid-template-columns: 150px 220px auto;
        justify-content: center;
    }

    .ugel-periods-excel {
        grid-column: auto;
        justify-self: start;
    }
}

@media (max-width: 700px) {
    .ugel-periods-page {
        padding: 10px;
    }

    .ugel-periods-selector-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .ugel-periods-level-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .ugel-periods-level-row > div {
        grid-template-columns: repeat(3, 1fr);
    }

    .ugel-periods-actions {
        grid-template-columns: 130px minmax(160px, 210px);
    }

    .ugel-periods-excel {
        grid-column: 1 / -1;
        justify-self: center;
    }
}

.ugel-learning-dashboard {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    border: 1px solid #b9c8d7;
    background: #f8fafc;
    box-shadow: 0 12px 32px rgba(15, 44, 79, .09);
}

.ugel-learning-dashboard-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 176px;
    gap: 18px;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 2px solid #246b45;
    background: #fff;
}

.ugel-learning-dashboard-head > div:first-child {
    text-align: center;
}

.ugel-learning-dashboard-head span {
    display: block;
    margin-bottom: 2px;
    color: #33714b;
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .14em;
}

.ugel-learning-dashboard-head h1 {
    margin: 0;
    color: #173f78;
    font-size: clamp(1.45rem, 3vw, 2.15rem);
    font-weight: 950;
    letter-spacing: .025em;
    line-height: 1.04;
}

.ugel-learning-dashboard-year {
    display: grid;
    gap: 3px;
}

.ugel-learning-dashboard-year label {
    color: #163c70;
    font-size: .72rem;
    font-weight: 900;
}

.ugel-learning-dashboard-year select {
    min-width: 94px;
    padding: 6px 28px 6px 9px;
    border: 1px solid #6384b2;
    border-radius: 6px;
    background: #f6f9ff;
    color: #14294a;
    font-weight: 800;
}

.ugel-learning-dashboard-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    color: #173f78;
    text-align: center;
    text-decoration: none;
}

.ugel-learning-dashboard-nav i {
    font-size: 3.4rem;
    line-height: 1;
}

.ugel-learning-dashboard-nav strong {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid #5685d8;
    border-radius: 10px;
    background: #fff;
    color: #111;
    font-size: .78rem;
    line-height: 1.05;
}

.ugel-dashboard-section {
    min-width: 0;
    margin: 8px;
    border: 1px solid #b7c0ca;
    background: #fff;
}

.ugel-dashboard-section > h2 {
    margin: 0;
    padding: 5px 8px;
    background: #adadad;
    color: #080808;
    font-size: clamp(.9rem, 1.5vw, 1.2rem);
    font-weight: 900;
    line-height: 1.08;
}

.ugel-dashboard-overview-grid,
.ugel-dashboard-diagnostic-grid {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(360px, 1.2fr) 220px;
    gap: 8px;
    padding: 8px;
}

.ugel-dashboard-filter-chart-grid {
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    gap: 8px;
    padding: 8px;
}

.ugel-dashboard-dps-report {
    padding-bottom: 8px;
}

.ugel-dashboard-dps-filter-grid {
    display: grid;
    grid-template-columns: minmax(150px, .85fr) minmax(150px, .85fr) minmax(190px, 1fr) minmax(300px, 2.4fr);
    gap: 8px;
    padding: 8px;
    border-bottom: 1px solid #d6dde7;
    background: #fbfcfe;
}

.ugel-dashboard-dps-filter-grid > .ugel-dashboard-slicers {
    align-content: start;
}

.ugel-dashboard-dps-filter-grid .ugel-dashboard-slicers label {
    min-height: 72px;
}

.ugel-dashboard-dps-filter-grid .ugel-dashboard-slicers:first-child label {
    min-height: 0;
}

.ugel-dashboard-dps-chart-card {
    margin: 0 8px;
    border-top: 0;
}

.ugel-dashboard-canvas.is-diagnostic-total {
    height: 360px;
    padding: 12px 18px 16px;
}

.ugel-dashboard-chart-card {
    position: relative;
    min-width: 0;
    border: 1px solid #d2d8df;
    background: #fff;
}

.ugel-dashboard-chart-card h3 {
    margin: 0;
    padding: 7px 10px 0;
    color: #111827;
    font-size: .94rem;
    font-weight: 800;
    text-align: center;
}

.ugel-dashboard-canvas {
    position: relative;
    height: 310px;
    padding: 4px 8px 8px;
}

.ugel-dashboard-canvas.is-medium {
    height: 340px;
}

.ugel-dashboard-canvas.is-tall {
    height: 440px;
}

.ugel-dashboard-canvas canvas {
    width: 100% !important;
    height: 100% !important;
}

.ugel-dashboard-empty-chart {
    position: absolute;
    top: 50%;
    right: 16px;
    left: 16px;
    z-index: 2;
    margin: 0;
    transform: translateY(-50%);
    color: #64748b;
    font-size: .86rem;
    font-weight: 700;
    text-align: center;
    pointer-events: none;
}

.ugel-dashboard-slicers {
    display: grid;
    align-content: start;
    gap: 7px;
    min-width: 0;
}

.ugel-dashboard-slicers label {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 7px 8px 8px;
    border: 1px solid #4d7ed4;
    background: #fff;
    color: #0f172a;
    font-size: .77rem;
    font-weight: 900;
}

.ugel-dashboard-slicers select {
    width: 100%;
    min-width: 0;
    min-height: 34px;
    padding: 5px 27px 5px 9px;
    border: 1px solid #98add2;
    border-radius: 4px;
    background: #4a78c6;
    color: #fff;
    font-size: .79rem;
    font-weight: 700;
    text-overflow: ellipsis;
}

.ugel-dashboard-slicers select option {
    background: #fff;
    color: #111827;
}

@media (max-width: 1250px) {
    .ugel-dashboard-overview-grid,
    .ugel-dashboard-diagnostic-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ugel-dashboard-overview-grid > .ugel-dashboard-slicers,
    .ugel-dashboard-diagnostic-grid > .ugel-dashboard-slicers {
        grid-column: 1 / -1;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .ugel-dashboard-dps-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .ugel-learning-dashboard-head {
        grid-template-columns: 1fr auto;
    }

    .ugel-learning-dashboard-nav {
        grid-column: 1 / -1;
        justify-self: center;
        width: 176px;
    }

    .ugel-dashboard-overview-grid,
    .ugel-dashboard-diagnostic-grid,
    .ugel-dashboard-filter-chart-grid {
        grid-template-columns: 1fr;
    }

    .ugel-dashboard-dps-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ugel-dashboard-overview-grid > .ugel-dashboard-slicers,
    .ugel-dashboard-diagnostic-grid > .ugel-dashboard-slicers,
    .ugel-dashboard-filter-chart-grid > .ugel-dashboard-slicers {
        grid-column: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .ugel-learning-dashboard-head {
        grid-template-columns: 1fr;
    }

    .ugel-learning-dashboard-year {
        justify-self: center;
    }

    .ugel-dashboard-overview-grid > .ugel-dashboard-slicers,
    .ugel-dashboard-diagnostic-grid > .ugel-dashboard-slicers,
    .ugel-dashboard-filter-chart-grid > .ugel-dashboard-slicers {
        grid-template-columns: 1fr;
    }

    .ugel-dashboard-canvas,
    .ugel-dashboard-canvas.is-medium {
        height: 290px;
    }

    .ugel-dashboard-dps-filter-grid {
        grid-template-columns: 1fr;
    }

    .ugel-dashboard-dps-filter-grid .ugel-dashboard-slicers label,
    .ugel-dashboard-dps-filter-grid .ugel-dashboard-slicers:first-child label {
        min-height: 0;
    }

    .ugel-dashboard-canvas.is-diagnostic-total {
        height: 300px;
    }

    .ugel-dashboard-canvas.is-tall {
        height: 400px;
    }
}

.ugel-commitments-page {
    box-sizing: border-box;
    width: 100%;
    min-height: 680px;
    padding: 14px;
    border: 1px solid #d8e0ea;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 14px 36px rgba(15, 44, 79, .09);
}

.ugel-commitments-brand {
    display: flex;
    justify-content: center;
    min-height: 54px;
}

.ugel-commitments-brand img {
    width: min(700px, 100%);
    height: 52px;
    object-fit: contain;
}

.ugel-commitments-title-box {
    display: grid;
    place-items: center;
    min-height: 74px;
    margin: 8px 0 16px;
    padding: 10px 18px;
    border: 2px solid #22794b;
    text-align: center;
}

.ugel-commitments-title-box h1 {
    margin: 0;
    color: #05080d;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(1.85rem, 3.5vw, 2.8rem);
    font-weight: 950;
    letter-spacing: .015em;
    line-height: 1.05;
}

.ugel-commitments-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
        'cg1 cg2 home'
        'cg3 cg4 cg5';
    gap: 14px 20px;
    align-items: stretch;
}

.ugel-commitment-cg1 { grid-area: cg1; }
.ugel-commitment-cg2 { grid-area: cg2; }
.ugel-commitment-cg3 { grid-area: cg3; }
.ugel-commitment-cg4 { grid-area: cg4; }
.ugel-commitment-cg5 { grid-area: cg5; }

.ugel-commitment-card {
    --commit-color: #315d9a;
    --commit-light: #5c8ad0;
    --commit-dark: #173f78;
    min-width: 0;
}

.ugel-commitment-card > h2 {
    box-sizing: border-box;
    display: grid;
    place-items: center;
    min-height: 67px;
    margin: 0 0 9px;
    padding: 9px 12px;
    border: 5px double var(--commit-dark);
    border-radius: 13px;
    background: linear-gradient(180deg, var(--commit-light) 0%, var(--commit-color) 58%, var(--commit-dark) 100%);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 4px 7px rgba(15, 36, 67, .28);
    color: #fff;
    font-size: clamp(.78rem, 1.25vw, 1rem);
    font-weight: 950;
    line-height: 1.08;
    text-align: center;
}

.ugel-commitment-card.is-yellow {
    --commit-color: #ffc400;
    --commit-light: #ffdc45;
    --commit-dark: #b78100;
}

.ugel-commitment-card.is-brown {
    --commit-color: #a64913;
    --commit-light: #c27038;
    --commit-dark: #6f2706;
}

.ugel-commitment-card.is-green {
    --commit-color: #62b83d;
    --commit-light: #8bd25f;
    --commit-dark: #347d20;
}

.ugel-commitment-card.is-blue {
    --commit-color: #3765aa;
    --commit-light: #638fd1;
    --commit-dark: #1d477f;
}

.ugel-commitment-card.is-orange {
    --commit-color: #ff7d2c;
    --commit-light: #ffac72;
    --commit-dark: #bd4810;
}

.ugel-commitment-items {
    box-sizing: border-box;
    display: grid;
    align-items: start;
    gap: 10px 4px;
    min-height: 246px;
    padding: 12px 10px;
    border: 2px solid var(--commit-color);
    border-radius: 13px;
    background: linear-gradient(180deg, #fff 0%, #fdfefe 100%);
}

.ugel-commitment-cg1 .ugel-commitment-items,
.ugel-commitment-cg2 .ugel-commitment-items {
    min-height: 166px;
}

.ugel-commitment-items.layout-four,
.ugel-commitment-items.layout-four-six {
    grid-template-columns: repeat(8, minmax(0, 1fr));
}

.ugel-commitment-items.layout-four a,
.ugel-commitment-items.layout-four-six a {
    grid-column: span 2;
}

.ugel-commitment-items.layout-four-six a:nth-child(5) {
    grid-column: 3 / span 2;
}

.ugel-commitment-items.layout-four-six a:nth-child(6) {
    grid-column: 5 / span 2;
}

.ugel-commitment-items.layout-three-five {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.ugel-commitment-items.layout-three-five a {
    grid-column: span 2;
}

.ugel-commitment-items.layout-three-five a:nth-child(4) {
    grid-column: 2 / span 2;
}

.ugel-commitment-items.layout-three-five a:nth-child(5) {
    grid-column: 4 / span 2;
}

.ugel-commitment-items.layout-single {
    grid-template-columns: minmax(120px, 180px);
    justify-content: center;
}

.ugel-commitment-items a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
    padding: 5px 4px;
    color: var(--commit-color);
    text-align: center;
    text-decoration: none;
    transition: transform .16s ease, filter .16s ease;
}

.ugel-commitment-items a:hover,
.ugel-commitment-items a:focus-visible {
    transform: translateY(-3px);
    filter: saturate(1.15);
}

.ugel-commitment-items i {
    display: grid;
    place-items: center;
    min-height: 54px;
    font-size: 2.75rem;
    line-height: 1;
}

.ugel-commitment-items strong {
    display: block;
    width: min(96px, 100%);
    min-width: 0;
    padding: 8px 9px;
    border: 4px outset var(--commit-light);
    border-radius: 8px;
    background: linear-gradient(180deg, var(--commit-light), var(--commit-color) 68%, var(--commit-dark));
    box-shadow: 0 4px 7px rgba(15, 36, 67, .3);
    color: #fff;
    font-size: .82rem;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.ugel-commitment-items span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.ugel-commitments-home {
    grid-area: home;
    align-self: center;
    justify-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: min(230px, 100%);
    color: #050505;
    text-align: center;
    text-decoration: none;
}

.ugel-commitments-home i {
    font-size: 5rem;
    line-height: 1;
    transition: transform .16s ease;
}

.ugel-commitments-home strong {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #111;
    border-radius: 10px;
    background: #fff;
    color: #111;
    font-size: 1rem;
}

.ugel-commitments-home:hover i,
.ugel-commitments-home:focus-visible i {
    transform: translateY(-3px);
}

@media (max-width: 1180px) {
    .ugel-commitments-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            'cg1 cg2'
            'cg3 cg4'
            'cg5 home';
    }
}

@media (max-width: 720px) {
    .ugel-commitments-page {
        padding: 10px;
    }

    .ugel-commitments-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            'cg1'
            'cg2'
            'cg3'
            'cg4'
            'cg5'
            'home';
    }

    .ugel-commitments-home {
        margin: 16px 0;
    }
}

@media (max-width: 430px) {
    .ugel-commitment-items.layout-four,
    .ugel-commitment-items.layout-four-six,
    .ugel-commitment-items.layout-three-five {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ugel-commitment-items.layout-four a,
    .ugel-commitment-items.layout-four-six a,
    .ugel-commitment-items.layout-three-five a,
    .ugel-commitment-items.layout-four-six a:nth-child(5),
    .ugel-commitment-items.layout-four-six a:nth-child(6),
    .ugel-commitment-items.layout-three-five a:nth-child(4),
    .ugel-commitment-items.layout-three-five a:nth-child(5) {
        grid-column: auto;
    }
}

.ugel-pg41-page{--pg41-blue:#315ea8;--pg41-light:#d8e2f3;width:100%;padding:14px;border:1px solid #ccd7ea;border-radius:14px;background:#fff;box-shadow:0 12px 34px rgba(30,67,126,.09);color:#111}.ugel-pg41-toolbar,.ugel-pg41-toolbar form,.ugel-pg41-toolbar label{display:flex;align-items:center;gap:9px}.ugel-pg41-toolbar{flex-wrap:wrap;margin-bottom:12px;padding:10px 12px;border:1px solid #becbe1;border-radius:9px;background:#f3f6fc}.ugel-pg41-toolbar label span{color:#244a86;font-size:.72rem;font-weight:900}.ugel-pg41-toolbar select{min-height:37px;padding:5px 33px 5px 9px;border:1px solid #8ea6cb;border-radius:6px;background:#fff;font-weight:800}.ugel-pg41-note{margin-left:auto;padding:7px 10px;border-radius:999px;background:#e8effa;color:#244a86;font-size:.74rem;font-weight:750}.ugel-pg41-layout{display:grid;grid-template-columns:minmax(0,1fr) 255px;gap:22px;align-items:start}.ugel-pg41-layout>main{min-width:0}.ugel-pg41-title{display:grid;min-height:65px;place-items:center;padding:8px 18px;border:2px solid var(--pg41-blue);text-align:center}.ugel-pg41-title h1{margin:0;font-size:clamp(1rem,1.45vw,1.3rem);line-height:1.35}.ugel-pg41-progress{display:grid;grid-template-columns:315px 270px minmax(170px,1fr);align-items:center;margin:5px 0 7px;border:2px solid var(--pg41-blue);background:#edf3fc;font-size:.79rem;font-weight:900}.ugel-pg41-progress>strong,.ugel-pg41-progress>span{padding:5px 8px;border-right:1px solid var(--pg41-blue)}.ugel-pg41-progress>strong{background:#4774bc;color:#fff}.ugel-pg41-progress>div{position:relative;height:25px;margin:2px;overflow:hidden;border:1px solid #efae00;background:#fff8d0}.ugel-pg41-progress i{position:absolute;inset:0 auto 0 0;display:block;background:#ffc341}.ugel-pg41-progress b{position:relative;z-index:1;display:grid;height:100%;place-items:center}.ugel-pg41-table-wrap{overflow-x:auto;border:1px solid var(--pg41-blue)}.ugel-pg41-table{width:100%;min-width:980px;border-collapse:collapse;table-layout:fixed;font-size:.72rem}.ugel-pg41-table th,.ugel-pg41-table td{padding:5px 4px;border:1px solid #3564ad;vertical-align:middle}.ugel-pg41-table thead th{background:#fff;text-align:center;font-weight:950}.ugel-pg41-table th:nth-child(1){width:55px}.ugel-pg41-table th:nth-child(2){width:22%}.ugel-pg41-table th:nth-child(3),.ugel-pg41-table th:nth-child(5){width:28%}.ugel-pg41-table th:nth-child(4),.ugel-pg41-table th:nth-child(6){width:70px}.ugel-pg41-table .is-cg{text-align:center;font-size:.9rem;font-weight:900}.ugel-pg41-table .is-practice{font-size:.78rem;line-height:1.47}.ugel-pg41-table .is-value{padding:3px;background:var(--pg41-light)}.ugel-pg41-table input{width:100%;height:36px;padding:4px;border:1px solid #7895c3;border-radius:4px;background:#f8faff;text-align:center;font-weight:900}.ugel-pg41-table tfoot th{background:#eef3fa;text-align:right;font-weight:950}.ugel-pg41-table tfoot th:nth-child(4),.ugel-pg41-table tfoot th:nth-child(6){text-align:center}.ugel-pg41-home{padding-top:18px}.ugel-pg41-home a{display:flex;flex-direction:column;align-items:center;gap:9px;color:#111;text-align:center;text-decoration:none}.ugel-pg41-home i{color:#4774bc;font-size:5rem;line-height:1}.ugel-pg41-home span{width:100%;padding:12px 8px;border:1px solid #171717;border-radius:12px;background:#fff;box-shadow:0 4px 0 #c5c5c5;font-size:.8rem;font-weight:800}.ugel-pg41-suggestbar{display:flex;align-items:center;gap:12px;margin:16px 0 12px;padding:11px 13px;border:1px solid #9eb9df;border-radius:9px;background:#f1f6ff;color:#264f82}.ugel-pg41-suggestbar span{margin-right:auto;font-size:.8rem;font-weight:700}.ugel-pg41-suggestbar button{min-height:41px;padding:8px 14px;border:1px solid #236cae;border-radius:7px;background:#2c77b9;color:#fff;font-size:.8rem;font-weight:900}.ugel-pg41-narratives{display:grid;gap:14px}.ugel-pg41-narratives article{border:1px solid var(--pg41-blue);background:var(--pg41-light)}.ugel-pg41-narratives h2{margin:0;padding:5px 7px;border-bottom:1px solid var(--pg41-blue);background:#fff;font-size:.78rem;font-weight:500}.ugel-pg41-narratives textarea{display:block;width:100%;min-height:190px;padding:11px 12px;resize:vertical;border:0;outline:0;background:var(--pg41-light);font-size:.82rem;line-height:1.48}.ugel-pg41-savebar{position:sticky;z-index:15;bottom:8px;display:flex;align-items:center;gap:12px;margin-top:14px;padding:10px 12px;border:1px solid #bdcbe2;border-radius:10px;background:rgba(255,255,255,.96);box-shadow:0 8px 24px rgba(31,66,122,.16)}.ugel-pg41-savebar span{margin-right:auto;color:#4d5f7d;font-size:.79rem;font-weight:700}.ugel-pg41-savebar span.has-changes{color:#a45b00}.ugel-pg41-savebar button{min-height:41px;padding:8px 15px;border:1px solid #245999;border-radius:7px;background:#2e6cb5;color:#fff;font-size:.82rem;font-weight:900}@media(max-width:1100px){.ugel-pg41-layout{grid-template-columns:1fr}.ugel-pg41-home{padding-top:0}.ugel-pg41-home a{flex-direction:row;justify-content:center}.ugel-pg41-home i{font-size:3rem}.ugel-pg41-home span{width:auto}.ugel-pg41-progress{grid-template-columns:1fr}.ugel-pg41-progress>strong,.ugel-pg41-progress>span{border-right:0;border-bottom:1px solid var(--pg41-blue)}}@media(max-width:720px){.ugel-pg41-page{padding:8px}.ugel-pg41-note{margin-left:0}.ugel-pg41-suggestbar,.ugel-pg41-savebar{align-items:stretch;flex-direction:column}.ugel-pg41-suggestbar button,.ugel-pg41-savebar button{width:100%}}

.ugel-pg36-page{--pg36-green:#58a936;--pg36-dark:#377c27;width:100%;padding:14px;border:1px solid #d6e1d2;border-radius:14px;background:#fff;box-shadow:0 12px 34px rgba(24,66,42,.08);color:#111}.ugel-pg36-toolbar,.ugel-pg36-toolbar form,.ugel-pg36-toolbar label{display:flex;align-items:center;gap:9px}.ugel-pg36-toolbar{flex-wrap:wrap;margin-bottom:12px;padding:10px 12px;border:1px solid #cddfc5;border-radius:9px;background:#f5faf2}.ugel-pg36-toolbar label span{color:#315c28;font-size:.72rem;font-weight:900}.ugel-pg36-toolbar select{min-height:37px;padding:5px 33px 5px 9px;border:1px solid #9eb893;border-radius:6px;background:#fff;font-weight:800}.ugel-pg36-source{margin-left:auto}.ugel-pg36-source span{display:block;padding:7px 10px;border-radius:999px;background:#fff2d7;color:#8d5900;font-size:.74rem;font-weight:750}.ugel-pg36-layout{display:grid;grid-template-columns:minmax(0,1fr) 255px;gap:22px;align-items:start}.ugel-pg36-layout>main{min-width:0}.ugel-pg36-title{display:grid;min-height:65px;place-items:center;padding:8px 18px;border:2px solid var(--pg36-dark);text-align:center}.ugel-pg36-title h1{margin:0;font-size:clamp(1rem,1.45vw,1.34rem);line-height:1.35}.ugel-pg36-progress{display:grid;grid-template-columns:315px 270px minmax(170px,1fr);align-items:center;margin:5px 0 7px;border:2px solid var(--pg36-green);background:#f0f8eb;font-size:.79rem;font-weight:900}.ugel-pg36-progress>strong,.ugel-pg36-progress>span{padding:5px 8px;border-right:1px solid var(--pg36-dark)}.ugel-pg36-progress>strong{background:#a9d28f;color:#fff}.ugel-pg36-progress>div{position:relative;height:25px;margin:2px;overflow:hidden;border:1px solid #efae00;background:#fff8d0}.ugel-pg36-progress i{position:absolute;inset:0 auto 0 0;display:block;background:#ffc341}.ugel-pg36-progress b{position:relative;z-index:1;display:grid;height:100%;place-items:center}.ugel-pg36-table-wrap{overflow-x:auto;border:1px solid var(--pg36-green)}.ugel-pg36-table{width:100%;min-width:900px;border-collapse:collapse;table-layout:fixed;font-size:.78rem}.ugel-pg36-table th,.ugel-pg36-table td{padding:8px 6px;border:1px solid #68ad4a;vertical-align:middle}.ugel-pg36-table thead th{background:#fff;text-align:center;font-weight:950}.ugel-pg36-table th:nth-child(1){width:55px}.ugel-pg36-table th:nth-child(2){width:23%}.ugel-pg36-table th:nth-child(3),.ugel-pg36-table th:nth-child(5){width:27%}.ugel-pg36-table th:nth-child(4),.ugel-pg36-table th:nth-child(6){width:78px}.ugel-pg36-table .is-cg{text-align:center;font-weight:900}.ugel-pg36-table .is-practice{font-size:.86rem;line-height:1.55}.ugel-pg36-table .is-answer{padding:3px;background:#e3efdc}.ugel-pg36-table .is-answer select{width:100%;height:39px;padding:4px 23px 4px 5px;border:1px solid #91b381;border-radius:4px;background:#f8fcf6;font-weight:900;text-align:center}.ugel-pg36-table tfoot th{background:#f3f8f0;text-align:right;font-weight:950}.ugel-pg36-table tfoot th:nth-child(4),.ugel-pg36-table tfoot th:nth-child(6){text-align:center}.ugel-pg36-home{padding-top:18px}.ugel-pg36-home a{display:flex;flex-direction:column;align-items:center;gap:9px;color:#111;text-align:center;text-decoration:none}.ugel-pg36-home i{color:#62ad3c;font-size:5rem;line-height:1}.ugel-pg36-home span{width:100%;padding:12px 8px;border:1px solid #171717;border-radius:12px;background:#fff;box-shadow:0 4px 0 #c5c5c5;font-size:.8rem;font-weight:800}.ugel-pg36-suggestbar{display:flex;align-items:center;gap:12px;margin:16px 0 12px;padding:11px 13px;border:1px solid #9eb9df;border-radius:9px;background:#f1f6ff;color:#264f82}.ugel-pg36-suggestbar span{margin-right:auto;font-size:.8rem;font-weight:700}.ugel-pg36-suggestbar button{min-height:41px;padding:8px 14px;border:1px solid #236cae;border-radius:7px;background:#2c77b9;color:#fff;font-size:.8rem;font-weight:900}.ugel-pg36-narratives{display:grid;gap:14px}.ugel-pg36-narratives article{border:1px solid var(--pg36-green);background:#e3efdc}.ugel-pg36-narratives h2{margin:0;padding:5px 7px;border-bottom:1px solid var(--pg36-green);background:#fff;font-size:.78rem;font-weight:500}.ugel-pg36-narratives textarea{display:block;width:100%;min-height:210px;padding:11px 12px;resize:vertical;border:0;outline:0;background:#e3efdc;color:#172215;font-size:.82rem;line-height:1.48}.ugel-pg36-narratives textarea:focus{background:#f5fbf2;box-shadow:inset 0 0 0 3px rgba(55,124,39,.18)}.ugel-pg36-savebar{position:sticky;z-index:15;bottom:8px;display:flex;align-items:center;gap:12px;margin-top:14px;padding:10px 12px;border:1px solid #bed3b4;border-radius:10px;background:rgba(255,255,255,.96);box-shadow:0 8px 24px rgba(23,55,34,.16)}.ugel-pg36-savebar span{margin-right:auto;color:#4f6454;font-size:.79rem;font-weight:700}.ugel-pg36-savebar span.has-changes{color:#a45b00}.ugel-pg36-savebar button{min-height:41px;padding:8px 15px;border:1px solid #25742d;border-radius:7px;background:#2c8a3a;color:#fff;font-size:.82rem;font-weight:900}@media(max-width:1100px){.ugel-pg36-layout{grid-template-columns:1fr}.ugel-pg36-home{padding-top:0}.ugel-pg36-home a{flex-direction:row;justify-content:center}.ugel-pg36-home i{font-size:3rem}.ugel-pg36-home span{width:auto}.ugel-pg36-progress{grid-template-columns:1fr}.ugel-pg36-progress>strong,.ugel-pg36-progress>span{border-right:0;border-bottom:1px solid var(--pg36-dark)}}@media(max-width:720px){.ugel-pg36-page{padding:8px;border-radius:8px}.ugel-pg36-source{margin-left:0}.ugel-pg36-suggestbar,.ugel-pg36-savebar{align-items:stretch;flex-direction:column}.ugel-pg36-suggestbar button,.ugel-pg36-savebar button{width:100%}}

.ugel-pg51-page{--pg36-green:#f4772b;--pg36-dark:#d65b13;border-color:#f4c5a9;box-shadow:0 12px 34px rgba(180,76,18,.1)}.ugel-pg51-page .ugel-pg36-toolbar{border-color:#f3c7ab;background:#fff8f3}.ugel-pg51-page .ugel-pg36-toolbar label span{color:#a8460e}.ugel-pg51-page .ugel-pg36-toolbar select{border-color:#e49a70}.ugel-pg51-page .ugel-pg36-source span{background:#ffeadf;color:#9d3f09}.ugel-pg51-page .ugel-pg36-layout{display:block}.ugel-pg51-toolbar-home{display:flex;flex:0 0 144px;align-self:stretch;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px 7px;border-left:1px solid #f3d7c5;border-right:1px solid #f3d7c5;color:#111;text-align:center;text-decoration:none}.ugel-pg51-toolbar-home i{color:#ff7d35;font-size:2.35rem;line-height:1}.ugel-pg51-toolbar-home span{width:100%;padding:4px 5px;border:1px solid #777;border-radius:5px;background:#fff;box-shadow:0 2px 0 #d1d1d1;font-size:.42rem;font-weight:900;line-height:1.12}.ugel-pg51-page .ugel-pg36-progress{background:#fff2ea}.ugel-pg51-page .ugel-pg36-progress>strong{background:#ef7b31}.ugel-pg51-page .ugel-pg36-table-wrap{border-color:#f4772b}.ugel-pg51-page .ugel-pg36-table th,.ugel-pg51-page .ugel-pg36-table td{border-color:#f4772b}.ugel-pg51-page .ugel-pg36-table .is-answer{background:#fde5d7}.ugel-pg51-page .ugel-pg36-table .is-answer select{border-color:#e6a27a;background:#fff8f4}.ugel-pg51-page .ugel-pg36-table tfoot th{background:#fff1e8}.ugel-pg51-page .ugel-pg36-suggestbar{border-color:#efad85;background:#fff2e9;color:#8b3a0b}.ugel-pg51-page .ugel-pg36-suggestbar button{border-color:#c85616;background:#ed742c}.ugel-pg51-page .ugel-pg36-narratives article{border-color:#f4772b;background:#fde5d7}.ugel-pg51-page .ugel-pg36-narratives h2{border-color:#f4772b}.ugel-pg51-page .ugel-pg36-narratives textarea{background:#fde5d7;color:#2c160b}.ugel-pg51-page .ugel-pg36-narratives textarea:focus{background:#fff8f3;box-shadow:inset 0 0 0 3px rgba(244,119,43,.18)}.ugel-pg51-page .ugel-pg36-savebar{border-color:#efbd9f;box-shadow:0 8px 24px rgba(139,58,11,.15)}.ugel-pg51-page .ugel-pg36-savebar button{border-color:#bd4e12;background:#e96f28}@media(max-width:760px){.ugel-pg51-toolbar-home{flex:1 1 125px;min-height:74px}.ugel-pg51-page .ugel-pg36-source{flex:1 0 100%;margin-left:0}.ugel-pg51-page .ugel-pg36-source span{text-align:center}}

.ugel-pg35-page { --pg35-green:#58a936; --pg35-dark:#377c27; width:100%; padding:14px; border:1px solid #d6e1d2; border-radius:14px; background:#fff; box-shadow:0 12px 34px rgba(24,66,42,.08); color:#111; }
.ugel-pg35-toolbar,.ugel-pg35-toolbar form,.ugel-pg35-toolbar label { display:flex; align-items:center; gap:9px; }
.ugel-pg35-toolbar { flex-wrap:wrap; margin-bottom:12px; padding:10px 12px; border:1px solid #cddfc5; border-radius:9px; background:#f5faf2; }
.ugel-pg35-toolbar label span { color:#315c28; font-size:.72rem; font-weight:900; }
.ugel-pg35-toolbar select { min-height:37px; padding:5px 33px 5px 9px; border:1px solid #9eb893; border-radius:6px; background:#fff; font-weight:800; }
.ugel-pg35-source { display:flex; flex-wrap:wrap; gap:7px; margin-left:auto; }
.ugel-pg35-source span { padding:7px 10px; border-radius:999px; background:#e4f2dc; color:#2e6526; font-size:.73rem; font-weight:750; }
.ugel-pg35-source span.is-note { background:#fff2d7; color:#8d5900; }
.ugel-pg35-layout { display:grid; grid-template-columns:minmax(0,1fr) 255px; gap:22px; align-items:start; }
.ugel-pg35-layout>main { min-width:0; }
.ugel-pg35-title { display:grid; min-height:65px; place-items:center; padding:8px 18px; border:2px solid var(--pg35-dark); text-align:center; }
.ugel-pg35-title h1 { margin:0; font-size:clamp(1rem,1.45vw,1.34rem); line-height:1.35; }
.ugel-pg35-progress { display:grid; grid-template-columns:315px 270px minmax(170px,1fr); align-items:center; margin:5px 0 7px; border:2px solid var(--pg35-green); background:#f0f8eb; font-size:.79rem; font-weight:900; }
.ugel-pg35-progress>strong,.ugel-pg35-progress>span { padding:5px 8px; border-right:1px solid var(--pg35-dark); }
.ugel-pg35-progress>strong { background:#a9d28f; color:#fff; }
.ugel-pg35-progress>div { position:relative; height:25px; margin:2px; overflow:hidden; border:1px solid #efae00; background:#fff8d0; }
.ugel-pg35-progress i { position:absolute; inset:0 auto 0 0; display:block; background:#ffc341; }
.ugel-pg35-progress b { position:relative; z-index:1; display:grid; height:100%; place-items:center; }
.ugel-pg35-table-wrap { overflow-x:auto; border:1px solid var(--pg35-green); }
.ugel-pg35-table { width:100%; min-width:900px; border-collapse:collapse; table-layout:fixed; font-size:.78rem; }
.ugel-pg35-table th,.ugel-pg35-table td { padding:8px 6px; border:1px solid #68ad4a; vertical-align:middle; }
.ugel-pg35-table thead th { background:#fff; text-align:center; font-weight:950; }
.ugel-pg35-table th:nth-child(1){width:55px}.ugel-pg35-table th:nth-child(2){width:23%}.ugel-pg35-table th:nth-child(3),.ugel-pg35-table th:nth-child(5){width:27%}.ugel-pg35-table th:nth-child(4),.ugel-pg35-table th:nth-child(6){width:78px}
.ugel-pg35-table .is-cg{text-align:center;font-weight:900}.ugel-pg35-table .is-practice{font-size:.86rem;line-height:1.55}.ugel-pg35-table .is-answer{padding:3px;background:#e3efdc}
.ugel-pg35-table .is-answer select{width:100%;height:39px;padding:4px 23px 4px 5px;border:1px solid #91b381;border-radius:4px;background:#f8fcf6;font-weight:900;text-align:center}.ugel-pg35-table .is-answer select:focus{border-color:#1f70b4;outline:0;box-shadow:0 0 0 3px rgba(31,112,180,.16)}
.ugel-pg35-table tfoot th{background:#f3f8f0;text-align:right;font-weight:950}.ugel-pg35-table tfoot th:nth-child(4),.ugel-pg35-table tfoot th:nth-child(6){text-align:center}
.ugel-pg35-home{padding-top:18px}.ugel-pg35-home a{display:flex;flex-direction:column;align-items:center;gap:9px;color:#111;text-align:center;text-decoration:none}.ugel-pg35-home i{color:#62ad3c;font-size:5rem;line-height:1}.ugel-pg35-home span{width:100%;padding:12px 8px;border:1px solid #171717;border-radius:12px;background:#fff;box-shadow:0 4px 0 #c5c5c5;font-size:.8rem;font-weight:800}
.ugel-pg35-suggestbar{display:flex;align-items:center;gap:12px;margin:16px 0 12px;padding:11px 13px;border:1px solid #9eb9df;border-radius:9px;background:#f1f6ff;color:#264f82}.ugel-pg35-suggestbar span{margin-right:auto;font-size:.8rem;font-weight:700}.ugel-pg35-suggestbar button{min-height:41px;padding:8px 14px;border:1px solid #236cae;border-radius:7px;background:#2c77b9;color:#fff;font-size:.8rem;font-weight:900}
.ugel-pg35-narratives{display:grid;gap:14px}.ugel-pg35-narratives article{border:1px solid var(--pg35-green);background:#e3efdc}.ugel-pg35-narratives h2{margin:0;padding:5px 7px;border-bottom:1px solid var(--pg35-green);background:#fff;font-size:.78rem;font-weight:500}.ugel-pg35-narratives textarea{display:block;width:100%;min-height:210px;padding:11px 12px;resize:vertical;border:0;border-radius:0;outline:0;background:#e3efdc;color:#172215;font-size:.82rem;line-height:1.48}.ugel-pg35-narratives textarea:focus{background:#f5fbf2;box-shadow:inset 0 0 0 3px rgba(55,124,39,.18)}
.ugel-pg35-savebar{position:sticky;z-index:15;bottom:8px;display:flex;align-items:center;gap:12px;margin-top:14px;padding:10px 12px;border:1px solid #bed3b4;border-radius:10px;background:rgba(255,255,255,.96);box-shadow:0 8px 24px rgba(23,55,34,.16)}.ugel-pg35-savebar span{margin-right:auto;color:#4f6454;font-size:.79rem;font-weight:700}.ugel-pg35-savebar span.has-changes{color:#a45b00}.ugel-pg35-savebar button{min-height:41px;padding:8px 15px;border:1px solid #25742d;border-radius:7px;background:#2c8a3a;color:#fff;font-size:.82rem;font-weight:900}
@media(max-width:1100px){.ugel-pg35-layout{grid-template-columns:1fr}.ugel-pg35-home{padding-top:0}.ugel-pg35-home a{flex-direction:row;justify-content:center}.ugel-pg35-home i{font-size:3rem}.ugel-pg35-home span{width:auto}.ugel-pg35-progress{grid-template-columns:1fr}.ugel-pg35-progress>strong,.ugel-pg35-progress>span{border-right:0;border-bottom:1px solid var(--pg35-dark)}}
@media(max-width:720px){.ugel-pg35-page{padding:8px;border-radius:8px}.ugel-pg35-source{margin-left:0}.ugel-pg35-suggestbar,.ugel-pg35-savebar{align-items:stretch;flex-direction:column}.ugel-pg35-suggestbar button,.ugel-pg35-savebar button{width:100%}}

.ugel-pg34-page {
    --pg34-green: #58a936;
    --pg34-green-dark: #377c27;
    width: 100%; padding: 14px; border: 1px solid #d6e1d2; border-radius: 14px;
    background: #fff; box-shadow: 0 12px 34px rgba(24,66,42,.08); color: #111;
}
.ugel-pg34-toolbar,.ugel-pg34-toolbar form,.ugel-pg34-toolbar label { display:flex; align-items:center; gap:9px; }
.ugel-pg34-toolbar { flex-wrap:wrap; margin-bottom:12px; padding:10px 12px; border:1px solid #cddfc5; border-radius:9px; background:#f5faf2; }
.ugel-pg34-toolbar label span { color:#315c28; font-size:.72rem; font-weight:900; }
.ugel-pg34-toolbar select { min-height:37px; padding:5px 33px 5px 9px; border:1px solid #9eb893; border-radius:6px; background:#fff; font-weight:800; }
.ugel-pg34-source { display:flex; flex-wrap:wrap; gap:7px; margin-left:auto; }
.ugel-pg34-source span { padding:7px 10px; border-radius:999px; background:#edf2e9; color:#4b6345; font-size:.73rem; font-weight:750; }
.ugel-pg34-source span.is-ok { background:#e0f2d7; color:#286820; }
.ugel-pg34-source span.is-alert { background:#fff0d7; color:#995200; }
.ugel-pg34-layout { display:grid; grid-template-columns:minmax(0,1fr) 255px; gap:22px; align-items:start; }
.ugel-pg34-layout > main { min-width:0; }
.ugel-pg34-title { display:grid; min-height:65px; place-items:center; padding:8px 18px; border:2px solid var(--pg34-green-dark); text-align:center; }
.ugel-pg34-title h1 { margin:0; font-size:clamp(1rem,1.45vw,1.34rem); font-weight:700; line-height:1.35; }
.ugel-pg34-title h1 strong { font-weight:950; }
.ugel-pg34-progress { display:grid; grid-template-columns:315px 270px minmax(170px,1fr); align-items:center; margin:5px 0 7px; border:2px solid var(--pg34-green); background:#f0f8eb; font-size:.79rem; font-weight:900; }
.ugel-pg34-progress > strong,.ugel-pg34-progress > span { padding:5px 8px; border-right:1px solid var(--pg34-green-dark); }
.ugel-pg34-progress > strong { background:#a9d28f; color:#fff; }
.ugel-pg34-progress > div { position:relative; height:25px; margin:2px; overflow:hidden; border:1px solid #efae00; background:#fff8d0; }
.ugel-pg34-progress i { position:absolute; inset:0 auto 0 0; display:block; background:#ffc341; transition:width .2s ease; }
.ugel-pg34-progress b { position:relative; z-index:1; display:grid; height:100%; place-items:center; }
.ugel-pg34-table-wrap { overflow-x:auto; border:1px solid var(--pg34-green); }
.ugel-pg34-table { width:100%; min-width:980px; border-collapse:collapse; table-layout:fixed; font-size:.75rem; }
.ugel-pg34-table th,.ugel-pg34-table td { padding:6px 5px; border:1px solid #68ad4a; vertical-align:middle; }
.ugel-pg34-table thead th { background:#fff; text-align:center; font-weight:950; }
.ugel-pg34-table th:nth-child(1) { width:55px; }
.ugel-pg34-table th:nth-child(2) { width:23%; }
.ugel-pg34-table th:nth-child(3),.ugel-pg34-table th:nth-child(5) { width:27%; }
.ugel-pg34-table th:nth-child(4),.ugel-pg34-table th:nth-child(6) { width:78px; }
.ugel-pg34-table .is-cg { text-align:center; font-weight:900; }
.ugel-pg34-table .is-practice { font-size:.8rem; line-height:1.52; }
.ugel-pg34-table .is-answer { padding:3px; background:#e3efdc; }
.ugel-pg34-table .is-answer select { width:100%; height:36px; padding:4px 23px 4px 5px; border:1px solid #91b381; border-radius:4px; background:#f8fcf6; font-weight:900; text-align:center; }
.ugel-pg34-table .is-answer select:focus { border-color:#1f70b4; outline:0; box-shadow:0 0 0 3px rgba(31,112,180,.16); }
.ugel-pg34-table tfoot th { background:#f3f8f0; text-align:right; font-weight:950; }
.ugel-pg34-table tfoot th:nth-child(4),.ugel-pg34-table tfoot th:nth-child(6) { text-align:center; }
.ugel-pg34-home { padding-top:18px; }
.ugel-pg34-home a { display:flex; flex-direction:column; align-items:center; gap:9px; color:#111; text-align:center; text-decoration:none; }
.ugel-pg34-home i { color:#62ad3c; font-size:5rem; line-height:1; }
.ugel-pg34-home span { width:100%; padding:12px 8px; border:1px solid #171717; border-radius:12px; background:#fff; box-shadow:0 4px 0 #c5c5c5; font-size:.8rem; font-weight:800; }
.ugel-pg34-suggestbar { display:flex; align-items:center; gap:12px; margin:16px 0 12px; padding:11px 13px; border:1px solid #9eb9df; border-radius:9px; background:#f1f6ff; color:#264f82; }
.ugel-pg34-suggestbar span { margin-right:auto; font-size:.79rem; font-weight:700; }
.ugel-pg34-suggestbar button { min-height:41px; padding:8px 14px; border:1px solid #236cae; border-radius:7px; background:#2c77b9; color:#fff; font-size:.8rem; font-weight:900; }
.ugel-pg34-narratives { display:grid; gap:14px; }
.ugel-pg34-narratives article { border:1px solid var(--pg34-green); background:#e3efdc; }
.ugel-pg34-narratives h2 { margin:0; padding:5px 7px; border-bottom:1px solid var(--pg34-green); background:#fff; font-size:.78rem; font-weight:500; }
.ugel-pg34-narratives textarea { display:block; width:100%; min-height:210px; padding:11px 12px; resize:vertical; border:0; border-radius:0; outline:0; background:#e3efdc; color:#172215; font-size:.82rem; line-height:1.48; }
.ugel-pg34-narratives textarea:focus { background:#f5fbf2; box-shadow:inset 0 0 0 3px rgba(55,124,39,.18); }
.ugel-pg34-savebar { position:sticky; z-index:15; bottom:8px; display:flex; align-items:center; gap:12px; margin-top:14px; padding:10px 12px; border:1px solid #bed3b4; border-radius:10px; background:rgba(255,255,255,.96); box-shadow:0 8px 24px rgba(23,55,34,.16); }
.ugel-pg34-savebar span { margin-right:auto; color:#4f6454; font-size:.79rem; font-weight:700; }
.ugel-pg34-savebar span.has-changes { color:#a45b00; }
.ugel-pg34-savebar button { min-height:41px; padding:8px 15px; border:1px solid #25742d; border-radius:7px; background:#2c8a3a; color:#fff; font-size:.82rem; font-weight:900; }
@media (max-width:1100px) {
    .ugel-pg34-layout { grid-template-columns:1fr; }
    .ugel-pg34-home { padding-top:0; }
    .ugel-pg34-home a { flex-direction:row; justify-content:center; }
    .ugel-pg34-home i { font-size:3rem; }
    .ugel-pg34-home span { width:auto; }
    .ugel-pg34-progress { grid-template-columns:1fr; }
    .ugel-pg34-progress > strong,.ugel-pg34-progress > span { border-right:0; border-bottom:1px solid var(--pg34-green-dark); }
}
@media (max-width:720px) {
    .ugel-pg34-page { padding:8px; border-radius:8px; }
    .ugel-pg34-source { margin-left:0; }
    .ugel-pg34-suggestbar,.ugel-pg34-savebar { align-items:stretch; flex-direction:column; }
    .ugel-pg34-suggestbar button,.ugel-pg34-savebar button { width:100%; }
}

.ugel-pg32-page {
    --pg32-green: #58a936;
    --pg32-green-dark: #377c27;
    box-sizing: border-box;
    width: 100%;
    padding: 14px;
    border: 1px solid #d6e1d2;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(24, 66, 42, .08);
    color: #111;
}

.ugel-pg32-toolbar,
.ugel-pg32-toolbar form,
.ugel-pg32-toolbar label {
    display: flex;
    align-items: center;
    gap: 9px;
}

.ugel-pg32-toolbar {
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 1px solid #cddfc5;
    border-radius: 9px;
    background: #f5faf2;
}

.ugel-pg32-toolbar label span {
    color: #315c28;
    font-size: .72rem;
    font-weight: 900;
}

.ugel-pg32-toolbar select {
    min-height: 37px;
    padding: 5px 33px 5px 9px;
    border: 1px solid #9eb893;
    border-radius: 6px;
    background: #fff;
    font-weight: 800;
}

.ugel-pg32-source {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-left: auto;
}

.ugel-pg32-source span {
    padding: 7px 10px;
    border-radius: 999px;
    background: #e4f2dc;
    color: #2e6526;
    font-size: .74rem;
    font-weight: 700;
}

.ugel-pg32-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 255px;
    gap: 22px;
    align-items: start;
}

.ugel-pg32-layout > main { min-width: 0; }

.ugel-pg32-title {
    display: grid;
    min-height: 65px;
    place-items: center;
    padding: 8px 18px;
    border: 2px solid var(--pg32-green-dark);
    text-align: center;
}

.ugel-pg32-title h1 {
    margin: 0;
    font-size: clamp(1rem, 1.45vw, 1.34rem);
    font-weight: 700;
    line-height: 1.35;
}

.ugel-pg32-title h1 strong { font-weight: 950; }

.ugel-pg32-progress {
    display: grid;
    grid-template-columns: 315px 270px minmax(170px, 1fr);
    align-items: center;
    margin: 5px 0 7px;
    border: 2px solid var(--pg32-green);
    background: #f0f8eb;
    font-size: .79rem;
    font-weight: 900;
}

.ugel-pg32-progress > strong,
.ugel-pg32-progress > span {
    padding: 5px 8px;
    border-right: 1px solid var(--pg32-green-dark);
}

.ugel-pg32-progress > strong { background: #a9d28f; color: #fff; }

.ugel-pg32-progress > div {
    position: relative;
    height: 25px;
    margin: 2px;
    overflow: hidden;
    border: 1px solid #efae00;
    background: #fff8d0;
}

.ugel-pg32-progress i {
    position: absolute;
    inset: 0 auto 0 0;
    display: block;
    background: #ffc341;
    transition: width .2s ease;
}

.ugel-pg32-progress b {
    position: relative;
    z-index: 1;
    display: grid;
    height: 100%;
    place-items: center;
}

.ugel-pg32-table-wrap { overflow-x: auto; border: 1px solid var(--pg32-green); }

.ugel-pg32-table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: .77rem;
}

.ugel-pg32-table th,
.ugel-pg32-table td {
    padding: 7px 5px;
    border: 1px solid #68ad4a;
    vertical-align: middle;
}

.ugel-pg32-table thead th { background: #fff; text-align: center; font-weight: 950; }
.ugel-pg32-table th:nth-child(1) { width: 55px; }
.ugel-pg32-table th:nth-child(2) { width: 23%; }
.ugel-pg32-table th:nth-child(3),
.ugel-pg32-table th:nth-child(5) { width: 27%; }
.ugel-pg32-table th:nth-child(4),
.ugel-pg32-table th:nth-child(6) { width: 78px; }
.ugel-pg32-table .is-cg { text-align: center; font-weight: 900; }
.ugel-pg32-table .is-practice { font-size: .83rem; line-height: 1.55; }
.ugel-pg32-table .is-answer { padding: 3px; background: #e3efdc; }

.ugel-pg32-table .is-answer select {
    width: 100%;
    min-width: 65px;
    height: 39px;
    padding: 4px 24px 4px 5px;
    border: 1px solid #91b381;
    border-radius: 4px;
    background: #f8fcf6;
    color: #111;
    font-size: .8rem;
    font-weight: 900;
    text-align: center;
}

.ugel-pg32-table .is-answer select:focus {
    border-color: #1f70b4;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(31, 112, 180, .16);
}

.ugel-pg32-table tfoot th { background: #f3f8f0; text-align: right; font-weight: 950; }
.ugel-pg32-table tfoot th:nth-child(4),
.ugel-pg32-table tfoot th:nth-child(6) { text-align: center; }

.ugel-pg32-home { padding-top: 18px; }
.ugel-pg32-home a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    color: #111;
    text-align: center;
    text-decoration: none;
}

.ugel-pg32-home i { color: #62ad3c; font-size: 5rem; line-height: 1; }
.ugel-pg32-home span {
    width: 100%;
    padding: 12px 8px;
    border: 1px solid #171717;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 0 #c5c5c5;
    font-size: .8rem;
    font-weight: 800;
}

.ugel-pg32-suggestbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0 12px;
    padding: 11px 13px;
    border: 1px solid #9eb9df;
    border-radius: 9px;
    background: #f1f6ff;
    color: #264f82;
}

.ugel-pg32-suggestbar span { margin-right: auto; font-size: .8rem; font-weight: 700; }
.ugel-pg32-suggestbar button {
    min-height: 41px;
    padding: 8px 14px;
    border: 1px solid #236cae;
    border-radius: 7px;
    background: #2c77b9;
    color: #fff;
    font-size: .8rem;
    font-weight: 900;
}

.ugel-pg32-narratives { display: grid; gap: 14px; }
.ugel-pg32-narratives article { border: 1px solid var(--pg32-green); background: #e3efdc; }
.ugel-pg32-narratives h2 {
    margin: 0;
    padding: 5px 7px;
    border-bottom: 1px solid var(--pg32-green);
    background: #fff;
    font-size: .78rem;
    font-weight: 500;
}

.ugel-pg32-narratives textarea {
    display: block;
    width: 100%;
    min-height: 190px;
    padding: 11px 12px;
    resize: vertical;
    border: 0;
    border-radius: 0;
    outline: 0;
    background: #e3efdc;
    color: #172215;
    font-size: .82rem;
    line-height: 1.48;
}

.ugel-pg32-narratives textarea:focus { background: #f5fbf2; box-shadow: inset 0 0 0 3px rgba(55, 124, 39, .18); }

.ugel-pg32-savebar {
    position: sticky;
    z-index: 15;
    bottom: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding: 10px 12px;
    border: 1px solid #bed3b4;
    border-radius: 10px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 8px 24px rgba(23, 55, 34, .16);
}

.ugel-pg32-savebar span { margin-right: auto; color: #4f6454; font-size: .79rem; font-weight: 700; }
.ugel-pg32-savebar span.has-changes { color: #a45b00; }
.ugel-pg32-savebar button {
    min-height: 41px;
    padding: 8px 15px;
    border: 1px solid #25742d;
    border-radius: 7px;
    background: #2c8a3a;
    color: #fff;
    font-size: .82rem;
    font-weight: 900;
}

@media (max-width: 1100px) {
    .ugel-pg32-layout { grid-template-columns: 1fr; }
    .ugel-pg32-home { padding-top: 0; }
    .ugel-pg32-home a { flex-direction: row; justify-content: center; }
    .ugel-pg32-home i { font-size: 3rem; }
    .ugel-pg32-home span { width: auto; }
    .ugel-pg32-progress { grid-template-columns: 1fr; }
    .ugel-pg32-progress > strong,
    .ugel-pg32-progress > span { border-right: 0; border-bottom: 1px solid var(--pg32-green-dark); }
}

@media (max-width: 720px) {
    .ugel-pg32-page { padding: 8px; border-radius: 8px; }
    .ugel-pg32-source { margin-left: 0; }
    .ugel-pg32-suggestbar,
    .ugel-pg32-savebar { align-items: stretch; flex-direction: column; }
    .ugel-pg32-suggestbar button,
    .ugel-pg32-savebar button { width: 100%; }
}

.ugel-pg31-page {
    --pg31-green: #58a936;
    --pg31-green-dark: #377c27;
    box-sizing: border-box;
    width: 100%;
    padding: 14px;
    border: 1px solid #d6e1d2;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(24, 66, 42, .08);
    color: #111;
}

.ugel-pg31-toolbar,
.ugel-pg31-toolbar form,
.ugel-pg31-toolbar label {
    display: flex;
    align-items: center;
    gap: 9px;
}

.ugel-pg31-toolbar {
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 1px solid #cddfc5;
    border-radius: 9px;
    background: #f5faf2;
}

.ugel-pg31-toolbar label span {
    color: #315c28;
    font-size: .72rem;
    font-weight: 900;
}

.ugel-pg31-toolbar select {
    min-height: 37px;
    padding: 5px 33px 5px 9px;
    border: 1px solid #9eb893;
    border-radius: 6px;
    background: #fff;
    font-weight: 800;
}

.ugel-pg31-source {
    padding: 7px 11px;
    border-radius: 999px;
    font-size: .77rem;
    font-weight: 800;
}

.ugel-pg31-source.is-ready { background: #dff2d5; color: #28651d; }
.ugel-pg31-source.is-pending { background: #fff0d5; color: #8e5700; }

.ugel-pg31-toolbar > a {
    margin-left: auto;
    padding: 8px 12px;
    border: 1px solid #2f7d24;
    border-radius: 7px;
    background: #fff;
    color: #2d6d24;
    font-size: .79rem;
    font-weight: 900;
    text-decoration: none;
}

.ugel-pg31-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 255px;
    gap: 22px;
    align-items: start;
}

.ugel-pg31-layout > main { min-width: 0; }

.ugel-pg31-title {
    display: grid;
    min-height: 65px;
    place-items: center;
    padding: 8px 18px;
    border: 2px solid var(--pg31-green-dark);
    text-align: center;
}

.ugel-pg31-title h1 {
    margin: 0;
    font-size: clamp(1rem, 1.45vw, 1.34rem);
    font-weight: 700;
    line-height: 1.35;
}

.ugel-pg31-title h1 strong { font-weight: 950; }

.ugel-pg31-progress {
    display: grid;
    grid-template-columns: 315px 270px minmax(170px, 1fr);
    align-items: center;
    margin: 5px 0 7px;
    border: 2px solid var(--pg31-green);
    background: #f0f8eb;
    font-size: .79rem;
    font-weight: 900;
}

.ugel-pg31-progress > strong,
.ugel-pg31-progress > span {
    padding: 5px 8px;
    border-right: 1px solid var(--pg31-green-dark);
}

.ugel-pg31-progress > strong { background: #a9d28f; color: #fff; }

.ugel-pg31-progress > div {
    position: relative;
    height: 25px;
    margin: 2px;
    overflow: hidden;
    border: 1px solid #efae00;
    background: #fff8d0;
}

.ugel-pg31-progress i {
    position: absolute;
    inset: 0 auto 0 0;
    display: block;
    background: #ffc341;
    transition: width .2s ease;
}

.ugel-pg31-progress b {
    position: relative;
    z-index: 1;
    display: grid;
    height: 100%;
    place-items: center;
}

.ugel-pg31-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--pg31-green);
}

.ugel-pg31-table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: .76rem;
}

.ugel-pg31-table th,
.ugel-pg31-table td {
    padding: 7px 5px;
    border: 1px solid #68ad4a;
    vertical-align: middle;
}

.ugel-pg31-table thead th { background: #fff; text-align: center; font-weight: 950; }
.ugel-pg31-table th:nth-child(1) { width: 55px; }
.ugel-pg31-table th:nth-child(2) { width: 23%; }
.ugel-pg31-table th:nth-child(3),
.ugel-pg31-table th:nth-child(5) { width: 27%; }
.ugel-pg31-table th:nth-child(4),
.ugel-pg31-table th:nth-child(6) { width: 78px; }
.ugel-pg31-table .is-cg { text-align: center; font-weight: 900; }
.ugel-pg31-table .is-practice { font-size: .83rem; line-height: 1.5; }
.ugel-pg31-table .is-number { padding: 3px; background: #e5efdf; }

.ugel-pg31-table input {
    width: 100%;
    min-width: 60px;
    height: 39px;
    padding: 4px;
    border: 1px solid #91b381;
    border-radius: 4px;
    background: #f8fcf6;
    color: #111;
    font-size: .87rem;
    font-weight: 900;
    text-align: center;
}

.ugel-pg31-table input:focus {
    border-color: #1f70b4;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(31, 112, 180, .16);
}

.ugel-pg31-table tfoot th { background: #f3f8f0; text-align: right; font-weight: 950; }
.ugel-pg31-table tfoot th:nth-child(4),
.ugel-pg31-table tfoot th:nth-child(6) { text-align: center; }

.ugel-pg31-home { padding-top: 18px; }

.ugel-pg31-home a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    color: #111;
    text-align: center;
    text-decoration: none;
}

.ugel-pg31-home i { color: #62ad3c; font-size: 5rem; line-height: 1; }
.ugel-pg31-home span {
    width: 100%;
    padding: 12px 8px;
    border: 1px solid #171717;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 0 #c5c5c5;
    font-size: .8rem;
    font-weight: 800;
}

.ugel-pg31-suggestbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0 12px;
    padding: 11px 13px;
    border: 1px solid #9eb9df;
    border-radius: 9px;
    background: #f1f6ff;
    color: #264f82;
}

.ugel-pg31-suggestbar span { margin-right: auto; font-size: .8rem; font-weight: 700; }
.ugel-pg31-suggestbar button {
    min-height: 41px;
    padding: 8px 14px;
    border: 1px solid #236cae;
    border-radius: 7px;
    background: #2c77b9;
    color: #fff;
    font-size: .8rem;
    font-weight: 900;
}

.ugel-pg31-narratives { display: grid; gap: 14px; }
.ugel-pg31-narratives article { border: 1px solid var(--pg31-green); background: #e3efdc; }
.ugel-pg31-narratives h2 {
    margin: 0;
    padding: 5px 7px;
    border-bottom: 1px solid var(--pg31-green);
    background: #fff;
    font-size: .78rem;
    font-weight: 500;
}

.ugel-pg31-narratives textarea {
    display: block;
    width: 100%;
    min-height: 190px;
    padding: 11px 12px;
    resize: vertical;
    border: 0;
    border-radius: 0;
    outline: 0;
    background: #e3efdc;
    color: #172215;
    font-size: .82rem;
    line-height: 1.48;
}

.ugel-pg31-narratives textarea:focus { background: #f5fbf2; box-shadow: inset 0 0 0 3px rgba(55, 124, 39, .18); }

.ugel-pg31-savebar {
    position: sticky;
    z-index: 15;
    bottom: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding: 10px 12px;
    border: 1px solid #bed3b4;
    border-radius: 10px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 8px 24px rgba(23, 55, 34, .16);
}

.ugel-pg31-savebar span { margin-right: auto; color: #4f6454; font-size: .79rem; font-weight: 700; }
.ugel-pg31-savebar span.has-changes { color: #a45b00; }
.ugel-pg31-savebar button {
    min-height: 41px;
    padding: 8px 15px;
    border: 1px solid #25742d;
    border-radius: 7px;
    background: #2c8a3a;
    color: #fff;
    font-size: .82rem;
    font-weight: 900;
}

@media (max-width: 1100px) {
    .ugel-pg31-layout { grid-template-columns: 1fr; }
    .ugel-pg31-home { padding-top: 0; }
    .ugel-pg31-home a { flex-direction: row; justify-content: center; }
    .ugel-pg31-home i { font-size: 3rem; }
    .ugel-pg31-home span { width: auto; }
    .ugel-pg31-progress { grid-template-columns: 1fr; }
    .ugel-pg31-progress > strong,
    .ugel-pg31-progress > span { border-right: 0; border-bottom: 1px solid var(--pg31-green-dark); }
}

@media (max-width: 720px) {
    .ugel-pg31-page { padding: 8px; border-radius: 8px; }
    .ugel-pg31-toolbar > a { margin-left: 0; }
    .ugel-pg31-suggestbar,
    .ugel-pg31-savebar { align-items: stretch; flex-direction: column; }
    .ugel-pg31-suggestbar button,
    .ugel-pg31-savebar button { width: 100%; }
}

.ugel-pg33-page {
    --pg33-green: #59b234;
    --pg33-green-dark: #357e24;
    box-sizing: border-box;
    width: 100%;
    padding: 14px;
    border: 1px solid #d6e1d2;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(24, 66, 42, .08);
    color: #0a0f14;
}

.ugel-pg33-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 10px;
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 1px solid #cfe0c9;
    border-radius: 10px;
    background: #f5faf2;
}

.ugel-pg33-filters label {
    display: grid;
    gap: 4px;
    min-width: 180px;
}

.ugel-pg33-filters label span {
    color: #315c28;
    font-size: .7rem;
    font-weight: 900;
}

.ugel-pg33-filters select {
    min-height: 38px;
    padding: 6px 34px 6px 10px;
    border: 1px solid #aebfab;
    border-radius: 6px;
    background: #fff;
    color: #142014;
    font-weight: 700;
}

.ugel-pg33-filters button {
    min-height: 38px;
    padding: 7px 15px;
    border: 1px solid var(--pg33-green-dark);
    border-radius: 6px;
    background: var(--pg33-green-dark);
    color: #fff;
    font-weight: 800;
}

.ugel-pg33-cut {
    margin-left: auto;
    padding: 8px 12px;
    border-radius: 999px;
    background: #e4f3db;
    color: #2e6823;
    font-size: .84rem;
    font-weight: 800;
}

.ugel-pg33-edit-note {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
    padding: 8px 11px;
    border: 1px solid #b8d4aa;
    border-radius: 7px;
    background: #f1f8ed;
    color: #315b27;
    font-size: .78rem;
    font-weight: 700;
}

.ugel-pg33-edit-note.has-manual-values {
    border-color: #9dbbe8;
    background: #eef5ff;
    color: #244d83;
}

.ugel-pg33-edit-note i {
    font-size: 1.1rem;
}

.ugel-pg33-edit-note small {
    margin-left: auto;
    color: #607064;
    white-space: nowrap;
}

.ugel-pg33-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 235px;
    gap: 18px;
    align-items: start;
}

.ugel-pg33-main {
    min-width: 0;
}

.ugel-pg33-metadata {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 610px;
    margin: 0 0 7px auto;
    padding: 4px 10px;
    background: #e2efd9;
    color: #3c682e;
    font-size: .76rem;
    font-style: italic;
}

.ugel-pg33-metadata span {
    display: flex;
    justify-content: space-between;
    gap: 14px;
}

.ugel-pg33-metadata strong {
    min-width: 34px;
    color: #111;
    font-style: normal;
}

.ugel-pg33-metadata .is-disabled {
    color: #7a817f;
    text-decoration: line-through;
}

.ugel-pg33-title {
    display: grid;
    place-items: center;
    min-height: 56px;
    padding: 6px 14px;
    border: 2px solid var(--pg33-green-dark);
    text-align: center;
}

.ugel-pg33-title h1 {
    margin: 0;
    font-size: clamp(.95rem, 1.45vw, 1.32rem);
    font-weight: 950;
    line-height: 1.22;
}

.ugel-pg33-progress {
    display: grid;
    grid-template-columns: 250px 255px minmax(180px, 1fr);
    align-items: center;
    gap: 2px;
    margin: 6px 0;
    border: 2px solid var(--pg33-green);
    background: #eef7e9;
    font-size: .8rem;
    font-weight: 900;
}

.ugel-pg33-progress > strong,
.ugel-pg33-progress > span {
    padding: 4px 8px;
    border-right: 1px solid var(--pg33-green-dark);
}

.ugel-pg33-progress > div {
    position: relative;
    height: 24px;
    margin: 2px;
    overflow: hidden;
    border: 1px solid #e2b000;
    background: #fff8d5;
}

.ugel-pg33-progress i {
    position: absolute;
    inset: 0 auto 0 0;
    display: block;
    background: linear-gradient(90deg, #ffd33d, #ffbf00);
}

.ugel-pg33-progress b {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    height: 100%;
    color: #111;
}

.ugel-pg33-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--pg33-green);
}

.ugel-pg33-table {
    width: 100%;
    min-width: 875px;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: .76rem;
    line-height: 1.22;
}

.ugel-pg33-table th,
.ugel-pg33-table td {
    padding: 6px 5px;
    border: 1px solid #67af48;
    vertical-align: middle;
}

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

.ugel-pg33-table th:nth-child(1) { width: 46px; }
.ugel-pg33-table th:nth-child(2) { width: 25%; }
.ugel-pg33-table th:nth-child(3),
.ugel-pg33-table th:nth-child(5) { width: 30%; }
.ugel-pg33-table th:nth-child(4),
.ugel-pg33-table th:nth-child(6) { width: 66px; }

.ugel-pg33-cg,
.ugel-pg33-number {
    text-align: center;
    font-weight: 800;
}

.ugel-pg33-number {
    padding: 3px !important;
}

.ugel-pg33-value {
    width: 100%;
    min-width: 58px;
    height: 38px;
    padding: 5px 3px;
    border: 1px solid #9fba91;
    border-radius: 5px;
    background: #f8fbf6;
    color: #132111;
    font-size: .85rem;
    font-weight: 900;
    text-align: center;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.ugel-pg33-value:hover,
.ugel-pg33-value:focus {
    border-color: #287ec4;
    outline: 0;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(40, 126, 196, .16);
}

.ugel-pg33-value.is-manual {
    border-color: #2d78bc;
    background: #e8f3ff;
    color: #124e84;
}

.ugel-pg33-table tr.is-disabled-level td {
    background: #ecefee;
    color: #777f7d;
}

.ugel-pg33-table tr.is-disabled-level input {
    border-color: #b8bfbd;
    background: #dfe3e2;
    color: #7b8381;
    cursor: not-allowed;
}

.ugel-pg33-practice {
    font-size: .82rem;
    line-height: 1.55;
}

.ugel-pg33-table tfoot th {
    background: #f4f9f1;
    text-align: right;
    font-weight: 950;
}

.ugel-pg33-table tfoot th:nth-child(4),
.ugel-pg33-table tfoot th:nth-child(6) {
    text-align: center;
}

.ugel-pg33-actions {
    display: grid;
    gap: 14px;
    padding-top: 42px;
}

.ugel-pg33-actions a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    transition: transform .16s ease, filter .16s ease;
}

.ugel-pg33-actions a:hover,
.ugel-pg33-actions a:focus-visible {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

.ugel-pg33-actions .is-home {
    flex-direction: column;
    padding: 10px;
    border: 1px solid #171717;
    border-radius: 11px;
    background: #fff;
    color: #111;
    font-size: .75rem;
    font-weight: 800;
}

.ugel-pg33-actions .is-home i {
    color: #62ad3c;
    font-size: 4rem;
    line-height: .9;
}

.ugel-pg33-actions .is-report {
    padding: 9px 13px;
    border: 4px outset #8ad063;
    border-radius: 8px;
    background: linear-gradient(180deg, #8bd45e, #59b334 70%, #3c8028);
    box-shadow: 0 5px 8px rgba(30, 71, 22, .3);
    font-weight: 900;
}

.ugel-pg33-actions .is-report i {
    font-size: 1.35rem;
}

.ugel-pg33-charts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 16px 253px 16px 0;
}

.ugel-pg33-charts.has-two-levels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ugel-pg33-chart-card {
    min-width: 0;
    padding: 9px;
    border: 2px solid #4472c4;
    border-radius: 13px;
    background: #fff;
    text-align: center;
}

.ugel-pg33-chart-card.level-ini { border-color: #e7ad00; }
.ugel-pg33-chart-card.level-sec { border-color: #59a63b; }

.ugel-pg33-chart-card h2 {
    min-height: 34px;
    margin: 0;
    font-size: .76rem;
    font-weight: 900;
}

.ugel-pg33-chart-card p {
    margin: 0 0 2px;
    color: #587080;
    font-size: .7rem;
}

.ugel-pg33-canvas {
    height: 220px;
}

.ugel-pg33-suggestbar {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 2px 0 12px;
    padding: 11px 13px;
    border: 1px solid #9db8df;
    border-radius: 9px;
    background: linear-gradient(90deg, #eef5ff, #f8fbff);
    color: #264f82;
}

.ugel-pg33-suggestbar > span {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: auto;
    font-size: .8rem;
    font-weight: 700;
}

.ugel-pg33-suggestbar > span i {
    color: #286fb0;
    font-size: 1.25rem;
}

.ugel-pg33-suggestbar button {
    flex: 0 0 auto;
    min-height: 41px;
    padding: 8px 14px;
    border: 1px solid #236cae;
    border-radius: 7px;
    background: linear-gradient(180deg, #3988ce, #2469a8);
    box-shadow: 0 4px 9px rgba(32, 92, 148, .2);
    color: #fff;
    font-size: .8rem;
    font-weight: 900;
}

.ugel-pg33-suggestbar button:hover,
.ugel-pg33-suggestbar button:focus-visible {
    background: linear-gradient(180deg, #4598df, #1e5d95);
    outline: 0;
    transform: translateY(-1px);
}

.ugel-pg33-narratives {
    display: grid;
    gap: 12px;
}

.ugel-pg33-narratives article {
    border: 1px solid var(--pg33-green);
    background: #e5f0de;
}

.ugel-pg33-narratives h2 {
    margin: 0;
    padding: 5px 8px;
    border-bottom: 1px solid var(--pg33-green);
    background: #fff;
    font-size: .78rem;
    font-weight: 900;
}

.ugel-pg33-narratives article > div,
.ugel-pg33-narratives textarea {
    min-height: 110px;
    padding: 10px 12px;
    font-size: .8rem;
    line-height: 1.45;
}

.ugel-pg33-narratives textarea {
    display: block;
    width: 100%;
    min-height: 150px;
    resize: vertical;
    border: 0;
    border-radius: 0;
    outline: 0;
    background: #e5f0de;
    color: #14210f;
}

.ugel-pg33-narratives textarea:focus {
    background: #f3faef;
    box-shadow: inset 0 0 0 3px rgba(53, 126, 36, .2);
}

.ugel-pg33-savebar {
    position: sticky;
    z-index: 15;
    bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 10px 12px;
    border: 1px solid #bed3b4;
    border-radius: 10px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 8px 24px rgba(23, 55, 34, .16);
    backdrop-filter: blur(8px);
}

.ugel-pg33-savebar > span {
    margin-right: auto;
    color: #4f6454;
    font-size: .78rem;
    font-weight: 700;
}

.ugel-pg33-savebar > span.has-changes {
    color: #a45b00;
}

.ugel-pg33-savebar button {
    min-height: 40px;
    padding: 8px 14px;
    border-radius: 7px;
    font-size: .82rem;
    font-weight: 900;
}

.ugel-pg33-savebar .is-reset {
    border: 1px solid #8ba0af;
    background: #fff;
    color: #425867;
}

.ugel-pg33-savebar .is-save {
    border: 1px solid #25742d;
    background: linear-gradient(180deg, #3ba84b, #237b31);
    color: #fff;
    box-shadow: 0 4px 9px rgba(29, 102, 42, .24);
}

@media (max-width: 1200px) {
    .ugel-pg33-layout {
        grid-template-columns: 1fr;
    }

    .ugel-pg33-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding-top: 0;
    }

    .ugel-pg33-actions .is-home {
        flex-direction: row;
    }

    .ugel-pg33-actions .is-home i {
        font-size: 2rem;
    }

    .ugel-pg33-charts {
        margin-right: 0;
    }
}

@media (max-width: 760px) {
    .ugel-pg33-page {
        padding: 9px;
    }

    .ugel-pg33-cut {
        width: 100%;
        margin-left: 0;
        text-align: center;
    }

    .ugel-pg33-edit-note,
    .ugel-pg33-suggestbar,
    .ugel-pg33-savebar {
        align-items: stretch;
        flex-direction: column;
    }

    .ugel-pg33-edit-note small,
    .ugel-pg33-suggestbar > span,
    .ugel-pg33-savebar > span {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        white-space: normal;
    }

    .ugel-pg33-suggestbar button {
        width: 100%;
    }

    .ugel-pg33-metadata,
    .ugel-pg33-progress,
    .ugel-pg33-actions,
    .ugel-pg33-charts {
        grid-template-columns: 1fr;
    }

    .ugel-pg33-progress > strong,
    .ugel-pg33-progress > span {
        border-right: 0;
        border-bottom: 1px solid var(--pg33-green-dark);
    }

    .ugel-pg33-actions .is-home {
        flex-direction: column;
    }

    .ugel-pg33-canvas {
        height: 240px;
    }
}

.ugel-pg33-students {
    --students-green: #5b9f3d;
    box-sizing: border-box;
    width: 100%;
    min-height: 720px;
    padding: 14px;
    border: 1px solid #d4e1cf;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(30, 68, 42, .08);
}

.ugel-pg33-students-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 14px;
    padding: 12px 16px;
    border: 1px solid #b9d1ad;
    border-radius: 10px;
    background: linear-gradient(90deg, #f2f8ef, #fff);
}

.ugel-pg33-students-header > div {
    min-width: 0;
    margin-right: auto;
}

.ugel-pg33-students-header > div > span {
    color: #39712c;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .06em;
}

.ugel-pg33-students-header h1 {
    margin: 2px 0;
    color: #123a68;
    font-size: clamp(1.25rem, 2.1vw, 2rem);
    font-weight: 950;
    line-height: 1.05;
}

.ugel-pg33-students-header p {
    margin: 0;
    color: #65717d;
    font-size: .84rem;
}

.ugel-pg33-students-header form label {
    display: grid;
    gap: 4px;
    min-width: 150px;
}

.ugel-pg33-students-header form label span,
.ugel-pg33-grade-filter span {
    color: #3e6a34;
    font-size: .68rem;
    font-weight: 900;
}

.ugel-pg33-students-header select,
.ugel-pg33-grade-filter select {
    min-height: 39px;
    padding: 6px 32px 6px 10px;
    border: 1px solid #a8bba3;
    border-radius: 6px;
    background: #fff;
    color: #172517;
    font-weight: 800;
}

.ugel-pg33-students-grid {
    display: grid;
    grid-template-columns: 170px minmax(650px, 1.08fr) minmax(520px, .92fr);
    grid-template-areas:
        'nav summary incidents'
        'nav accumulated evolution';
    gap: 14px;
    align-items: stretch;
}

.ugel-pg33-students-nav {
    grid-area: nav;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 10px;
    border: 1px solid #d6ded2;
    border-radius: 10px;
    background: #f9fbf8;
}

.ugel-pg33-students-nav .is-back {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 155px;
    padding: 13px 9px;
    border: 6px outset #f33;
    border-radius: 19px;
    background: linear-gradient(180deg, #ff2828, #eb0000);
    box-shadow: 0 8px 9px rgba(81, 10, 10, .3);
    color: #fff;
    text-align: center;
    text-decoration: none;
}

.ugel-pg33-students-nav .is-back i {
    font-size: 2.6rem;
    line-height: 1;
}

.ugel-pg33-students-nav .is-back strong {
    font-size: .78rem;
}

.ugel-pg33-level-buttons {
    display: grid;
    gap: 10px;
}

.ugel-pg33-level-buttons button {
    display: grid;
    gap: 3px;
    min-height: 58px;
    padding: 8px 10px;
    border: 1px solid currentColor;
    border-radius: 8px;
    background: #eef3eb;
    font-weight: 800;
    text-align: left;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.ugel-pg33-level-buttons button small {
    font-size: .65rem;
    font-weight: 700;
    opacity: .75;
}

.ugel-pg33-level-buttons button:hover,
.ugel-pg33-level-buttons button:focus-visible,
.ugel-pg33-level-buttons button.active {
    transform: translateX(3px);
    outline: 0;
    box-shadow: 0 4px 9px rgba(23, 52, 73, .15);
    filter: saturate(1.12);
}

.ugel-pg33-level-buttons button:disabled,
.ugel-pg33-level-buttons button.is-disabled {
    border-color: #aab2b0;
    background: #e3e6e5;
    box-shadow: none;
    color: #7a8280;
    cursor: not-allowed;
    filter: grayscale(1);
    opacity: .72;
    transform: none;
}

.ugel-pg33-level-buttons button.is-initial {
    background: #fff0c8;
    color: #e28515;
}

.ugel-pg33-level-buttons button.is-primary {
    background: #d6e8fb;
    color: #326cb4;
}

.ugel-pg33-level-buttons button.is-secondary {
    background: #d9edcf;
    color: #3f7730;
}

.ugel-pg33-level-buttons button.active {
    border-width: 3px;
    background-image: linear-gradient(90deg, rgba(255,255,255,.15), rgba(255,255,255,.65));
}

.ugel-pg33-grade-filter {
    display: grid;
    gap: 4px;
    margin-top: 2px;
}

.ugel-pg33-grade-filter select {
    width: 100%;
    font-size: .73rem;
}

.ugel-pg33-students-summary,
.ugel-pg33-students-chart {
    min-width: 0;
    overflow: hidden;
    border: 3px solid var(--students-green);
    border-radius: 15px;
    background: #fff;
}

.ugel-pg33-students-summary {
    grid-area: summary;
}

.ugel-pg33-students-panel-title {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 62px;
    padding: 8px 12px;
    border-bottom: 1px solid #b4cea8;
    background: #f5faf2;
}

.ugel-pg33-students-panel-title > div:first-child {
    display: grid;
    min-width: 145px;
}

.ugel-pg33-students-panel-title > div:first-child span {
    color: #173f6d;
    font-size: .95rem;
    font-weight: 950;
}

.ugel-pg33-students-panel-title > div:first-child small {
    color: #637080;
    font-size: .68rem;
}

.ugel-pg33-students-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    width: 100%;
}

.ugel-pg33-students-kpis span {
    display: grid;
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid #cbd8c5;
    border-radius: 6px;
    background: #fff;
    color: #67716b;
    font-size: .62rem;
    text-align: center;
}

.ugel-pg33-students-kpis b {
    overflow: hidden;
    color: #173f6d;
    font-size: .96rem;
    text-overflow: ellipsis;
}

.ugel-pg33-monthly-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.ugel-pg33-monthly-table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: .72rem;
}

.ugel-pg33-monthly-table th,
.ugel-pg33-monthly-table td {
    padding: 8px 5px;
    border: 1px solid #d8e0e6;
    text-align: center;
}

.ugel-pg33-monthly-table thead th {
    height: 78px;
    background: #fff;
    font-size: .66rem;
    font-weight: 900;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.ugel-pg33-monthly-table thead th:first-child {
    width: 120px;
    writing-mode: horizontal-tb;
    transform: none;
}

.ugel-pg33-monthly-table tbody th {
    padding-left: 9px;
    text-align: left;
    font-size: .77rem;
    font-weight: 950;
}

.ugel-pg33-monthly-table tbody td {
    font-weight: 850;
}

.ugel-pg33-monthly-table tr.is-asistio { background: #dbe5f7; color: #2c57a0; }
.ugel-pg33-monthly-table tr.is-tardanza { background: #fff2cc; color: #ed7900; }
.ugel-pg33-monthly-table tr.is-justificada { background: #e2f0d9; color: #4b9d35; }
.ugel-pg33-monthly-table tr.is-falta { background: #fde9df; color: #d70000; }
.ugel-pg33-monthly-table .is-total { background: rgba(255,255,255,.45); font-size: .78rem; font-weight: 950; }

.ugel-pg33-students-chart {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 345px;
    padding: 10px 12px 8px;
}

.ugel-pg33-students-chart.is-incidents { grid-area: incidents; }
.ugel-pg33-students-chart.is-accumulated { grid-area: accumulated; }
.ugel-pg33-students-chart.is-evolution { grid-area: evolution; }

.ugel-pg33-students-chart h2 {
    margin: 0;
    padding: 1px 4px 7px;
    color: #151515;
    font-size: 1rem;
    font-weight: 900;
    text-align: center;
}

.ugel-pg33-students-chart p {
    margin: -4px 0 3px;
    color: #62706b;
    font-size: .7rem;
    text-align: center;
}

.ugel-pg33-students-chart > div {
    position: relative;
    min-height: 285px;
}

.ugel-pg33-students-chart.is-accumulated {
    grid-template-rows: auto auto minmax(0, 1fr);
}

@media (max-width: 1500px) {
    .ugel-pg33-students-grid {
        grid-template-columns: 170px minmax(0, 1fr);
        grid-template-areas:
            'nav summary'
            'nav incidents'
            'nav accumulated'
            'nav evolution';
    }

    .ugel-pg33-students-nav {
        position: sticky;
        top: 10px;
        align-self: start;
    }
}

@media (max-width: 850px) {
    .ugel-pg33-students {
        padding: 9px;
    }

    .ugel-pg33-students-header {
        align-items: stretch;
        flex-direction: column;
    }

    .ugel-pg33-students-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            'nav'
            'summary'
            'incidents'
            'accumulated'
            'evolution';
    }

    .ugel-pg33-students-nav {
        position: static;
    }

    .ugel-pg33-students-nav .is-back {
        min-height: 72px;
        flex-direction: row;
        border-radius: 10px;
    }

    .ugel-pg33-students-nav .is-back i {
        font-size: 1.7rem;
    }

    .ugel-pg33-level-buttons {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ugel-pg33-level-buttons button {
        text-align: center;
    }

    .ugel-pg33-students-panel-title {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 540px) {
    .ugel-pg33-level-buttons,
    .ugel-pg33-students-kpis {
        grid-template-columns: 1fr;
    }
}

.ugel-pg33-staff-page {
    box-sizing: border-box;
    width: 100%;
    min-height: 610px;
    padding: 24px 28px 38px;
    border: 1px solid #d8e2d3;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(31, 71, 43, .08);
}

.ugel-pg33-staff-top {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 120px;
}

.ugel-pg33-staff-brand {
    grid-column: 2;
    display: flex;
    justify-content: center;
}

.ugel-pg33-staff-brand img {
    width: min(570px, 48vw);
    height: 86px;
    object-fit: contain;
}

.ugel-pg33-staff-back {
    grid-column: 3;
    justify-self: end;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    width: min(215px, 100%);
    color: #65ad42;
    text-decoration: none;
}

.ugel-pg33-staff-back i {
    font-size: 4.9rem;
    line-height: .95;
    transition: transform .16s ease;
}

.ugel-pg33-staff-back strong {
    width: 100%;
    padding: 12px 15px;
    border: 4px outset #8dca6a;
    border-radius: 8px;
    background: linear-gradient(180deg, #81c357, #5aa934 72%, #438c29);
    box-shadow: 0 5px 8px rgba(34, 79, 28, .28);
    color: #fff;
    font-size: 1rem;
    text-align: center;
}

.ugel-pg33-staff-back:hover i,
.ugel-pg33-staff-back:focus-visible i {
    transform: translateY(-3px);
}

.ugel-pg33-staff-title {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 76px;
    margin: 6px 0 42px;
    padding: 10px 18px;
    border: 2px solid #4b7f38;
    text-align: center;
}

.ugel-pg33-staff-title h1 {
    margin: 0;
    color: #65ad42;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 950;
    letter-spacing: .015em;
    line-height: 1;
    text-shadow: 1px 1px 0 #c7b428;
}

.ugel-pg33-staff-title span {
    position: absolute;
    right: 12px;
    bottom: 5px;
    color: #6b7a68;
    font-size: .67rem;
    font-weight: 800;
}

.ugel-pg33-staff-menu {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 34px;
    align-items: start;
    padding: 0 38px;
}

.ugel-pg33-staff-menu a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 17px;
    min-width: 0;
    color: #68ae43;
    text-align: center;
    text-decoration: none;
    transition: transform .16s ease, filter .16s ease;
}

.ugel-pg33-staff-menu a:hover,
.ugel-pg33-staff-menu a:focus-visible {
    transform: translateY(-4px);
    filter: saturate(1.12);
    outline: 0;
}

.ugel-pg33-staff-menu i {
    display: grid;
    place-items: center;
    min-height: 94px;
    font-size: 5.5rem;
    line-height: 1;
}

.ugel-pg33-staff-menu strong {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 64px;
    padding: 10px 12px;
    border: 4px outset #8ccb68;
    background: linear-gradient(180deg, #7cc152, #5aa934 70%, #438e28);
    box-shadow: 0 5px 8px rgba(34, 79, 28, .28);
    color: #fff;
    font-size: .92rem;
    line-height: 1.18;
}

.ugel-pg33-staff-menu span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .ugel-pg33-staff-top {
        grid-template-columns: 1fr auto;
    }

    .ugel-pg33-staff-brand {
        grid-column: 1;
    }

    .ugel-pg33-staff-brand img {
        width: min(560px, 65vw);
    }

    .ugel-pg33-staff-back {
        grid-column: 2;
    }

    .ugel-pg33-staff-menu {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 34px 24px;
    }
}

@media (max-width: 650px) {
    .ugel-pg33-staff-page {
        padding: 15px 12px 28px;
    }

    .ugel-pg33-staff-top {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .ugel-pg33-staff-brand,
    .ugel-pg33-staff-back {
        grid-column: 1;
        justify-self: center;
    }

    .ugel-pg33-staff-brand img {
        width: 100%;
        height: 66px;
    }

    .ugel-pg33-staff-back {
        flex-direction: row;
        width: 100%;
    }

    .ugel-pg33-staff-back i {
        font-size: 2.3rem;
    }

    .ugel-pg33-staff-title {
        margin-bottom: 28px;
    }

    .ugel-pg33-staff-title h1 {
        font-size: 1.7rem;
    }

    .ugel-pg33-staff-menu {
        grid-template-columns: 1fr;
        padding: 0 16px;
    }

    .ugel-pg33-staff-menu i {
        min-height: 70px;
        font-size: 4.3rem;
    }
}

.ugel-staff-roster {
    --roster-green: #6caf45;
    box-sizing: border-box;
    width: 100%;
    padding: 22px clamp(12px, 2vw, 30px) 42px;
    border: 1px solid #d8e4d2;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(34, 75, 42, .08);
}

.ugel-staff-roster-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}

.ugel-staff-roster-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: #53813a;
    font-size: .75rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.ugel-staff-roster-toolbar h1 {
    margin: 0;
    color: #163b27;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(1.55rem, 3vw, 2.45rem);
    font-weight: 950;
    letter-spacing: .02em;
}

.ugel-staff-roster-back {
    display: flex;
    flex: 0 0 215px;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    color: var(--roster-green);
    text-align: center;
    text-decoration: none;
}

.ugel-staff-roster-back i {
    font-size: 4.2rem;
    line-height: .9;
    transition: transform .16s ease;
}

.ugel-staff-roster-back span {
    width: 100%;
    padding: 8px 12px;
    border: 3px outset #9bca7e;
    border-radius: 10px;
    background: linear-gradient(180deg, #fff, #eef2ed);
    box-shadow: 0 4px 8px rgba(47, 82, 36, .2);
    color: #54833b;
    font-size: .76rem;
    font-weight: 900;
    line-height: 1.12;
}

.ugel-staff-roster-back:hover i,
.ugel-staff-roster-back:focus-visible i {
    transform: translateY(-3px);
}

.ugel-staff-roster-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(1060px, calc(100% - 245px));
    margin: 0 0 34px;
    border: 1px solid #5e9e39;
}

.ugel-staff-roster-meta-item {
    min-width: 0;
    border-right: 1px solid #5e9e39;
    border-bottom: 1px solid #5e9e39;
}

.ugel-staff-roster-meta-item:nth-child(3n) {
    border-right: 0;
}

.ugel-staff-roster-meta-item:nth-last-child(-n + 3) {
    border-bottom: 0;
}

.ugel-staff-roster-meta-item strong,
.ugel-staff-roster-meta-item span {
    display: block;
    min-height: 23px;
    padding: 3px 12px;
    line-height: 1.15;
}

.ugel-staff-roster-meta-item strong {
    background: var(--roster-green);
    color: #fff;
    font-size: .78rem;
    letter-spacing: .025em;
}

.ugel-staff-roster-meta-item span {
    background: #f9fcf8;
    color: #102116;
    font-size: .85rem;
    font-weight: 800;
}

.ugel-staff-roster-sections {
    display: grid;
    gap: 24px;
}

.ugel-staff-roster-group {
    --group-color: #6caf45;
    --group-soft: #e9f5e4;
}

.ugel-staff-roster-group.is-administrative {
    --group-color: #f1b900;
    --group-soft: #fff7d5;
}

.ugel-staff-roster-group.is-initial {
    --group-color: #f27b27;
    --group-soft: #ffebdd;
}

.ugel-staff-roster-group.is-primary {
    --group-color: #61b63d;
    --group-soft: #e8f5e3;
}

.ugel-staff-roster-group.is-secondary {
    --group-color: #4176c5;
    --group-soft: #e6eef9;
}

.ugel-staff-roster-group.is-disabled {
    --group-color: #a8afad;
    --group-soft: #ecefee;
    filter: grayscale(.8);
    opacity: .78;
}

.ugel-staff-roster-group-title {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    width: min(330px, 100%);
    padding: 7px 11px 4px;
    border-bottom: 2px solid var(--group-color);
    background: var(--group-soft);
}

.ugel-staff-roster-group-title h2 {
    margin: 0;
    color: #101b13;
    font-size: 1.08rem;
    font-weight: 950;
}

.ugel-staff-roster-group-title span {
    color: #526057;
    font-size: .68rem;
    font-weight: 800;
}

.ugel-staff-roster-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--group-color);
    border-top-width: 0;
}

.ugel-staff-roster table {
    width: 100%;
    min-width: 1040px;
    border-collapse: collapse;
    color: #152019;
    font-size: .77rem;
}

.ugel-staff-roster th,
.ugel-staff-roster td {
    padding: 5px 8px;
    border-right: 1px solid color-mix(in srgb, var(--group-color) 66%, #fff);
    border-bottom: 1px solid color-mix(in srgb, var(--group-color) 66%, #fff);
    vertical-align: middle;
}

.ugel-staff-roster th:last-child,
.ugel-staff-roster td:last-child {
    border-right: 0;
}

.ugel-staff-roster tbody tr:last-child td {
    border-bottom: 0;
}

.ugel-staff-roster th {
    background: var(--group-color);
    color: #fff;
    font-weight: 900;
    text-align: center;
    white-space: nowrap;
}

.ugel-staff-roster td {
    background: #fff;
    text-align: center;
}

.ugel-staff-roster tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--group-soft) 50%, #fff);
}

.ugel-staff-roster td:nth-child(1) {
    width: 44px;
}

.ugel-staff-roster td:nth-child(2),
.ugel-staff-roster th:nth-child(2) {
    min-width: 260px;
    text-align: left;
}

.ugel-staff-roster-name {
    font-weight: 750;
}

.ugel-staff-roster-empty td {
    padding: 14px;
    color: #758078;
    font-style: italic;
    text-align: center !important;
}

@media (max-width: 920px) {
    .ugel-staff-roster-meta {
        width: 100%;
    }
}

@media (max-width: 620px) {
    .ugel-staff-roster {
        padding: 16px 10px 30px;
    }

    .ugel-staff-roster-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .ugel-staff-roster-back {
        flex: none;
        flex-direction: row;
        width: 100%;
    }

    .ugel-staff-roster-back i {
        font-size: 2.6rem;
    }

    .ugel-staff-roster-meta {
        grid-template-columns: 1fr;
    }

    .ugel-staff-roster-meta-item,
    .ugel-staff-roster-meta-item:nth-child(3n),
    .ugel-staff-roster-meta-item:nth-last-child(-n + 3) {
        border-right: 0;
        border-bottom: 1px solid #5e9e39;
    }

    .ugel-staff-roster-meta-item:last-child {
        border-bottom: 0;
    }
}

.ugel-annex03 {
    box-sizing: border-box;
    width: 100%;
    min-height: 720px;
    padding: 20px clamp(14px, 3vw, 48px) 34px;
    border: 1px solid #dce4ec;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(28, 67, 105, .08);
}

.ugel-annex03-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    align-items: center;
    gap: 24px;
    min-height: 132px;
}

.ugel-annex03-brand {
    grid-column: 1;
    display: flex;
    justify-content: center;
}

.ugel-annex03-brand img {
    width: min(590px, 100%);
    height: 92px;
    object-fit: contain;
}

.ugel-annex03-back {
    grid-column: 2;
    justify-self: end;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    width: min(360px, 100%);
    color: #5a9bd3;
    text-align: center;
    text-decoration: none;
}

.ugel-annex03-back i {
    font-size: 5rem;
    line-height: .86;
    transition: transform .16s ease;
}

.ugel-annex03-back strong {
    width: 100%;
    padding: 13px 16px;
    border-radius: 12px;
    background: linear-gradient(180deg, #68abe1, #3f8bcc);
    box-shadow: 0 5px 9px rgba(37, 80, 117, .33);
    color: #fff;
    font-size: 1.02rem;
    font-weight: 900;
    line-height: 1.22;
}

.ugel-annex03-back:hover i,
.ugel-annex03-back:focus-visible i {
    transform: translateY(-3px);
}

.ugel-annex03-title {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 78px;
    margin: 0 0 25px;
    padding: 10px 22px;
    border: 2px solid #5b9bd5;
    text-align: center;
}

.ugel-annex03-title h1 {
    margin: 0;
    color: #4472c4;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(1.5rem, 3vw, 2.35rem);
    font-weight: 950;
    letter-spacing: .02em;
    line-height: 1.08;
    text-shadow: 1px 1px 0 #d29035;
}

.ugel-annex03-title span {
    position: absolute;
    right: 10px;
    bottom: 3px;
    color: #688098;
    font-size: .65rem;
    font-weight: 900;
}

.ugel-annex03-levels {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 2.4vw, 34px);
    width: min(1260px, 100%);
    margin: 0 auto;
}

.ugel-annex03-level {
    --annex-color: #5b9bd5;
    --annex-soft: #a9c9eb;
    padding: 15px 13px 17px;
    border: 6px solid var(--annex-color);
    border-radius: 20px;
}

.ugel-annex03-level.is-initial {
    --annex-color: #f5b800;
    --annex-soft: #ffd98b;
}

.ugel-annex03-level.is-primary {
    --annex-color: #5b9bd5;
    --annex-soft: #a7c7e9;
}

.ugel-annex03-level.is-secondary {
    --annex-color: #70ad47;
    --annex-soft: #acd19a;
}

.ugel-annex03-level h2 {
    display: grid;
    place-items: center;
    min-height: 74px;
    margin: 0 0 11px;
    padding: 8px 12px;
    border: 1px solid var(--annex-color);
    border-radius: 14px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--annex-soft) 74%, #fff), var(--annex-soft));
    color: #101820;
    font-size: .98rem;
    font-weight: 900;
    text-align: center;
}

.ugel-annex03-level h2 small {
    display: block;
    margin-top: 5px;
    color: #6f7775;
    font-size: .62rem;
    letter-spacing: .035em;
}

.ugel-annex03-months {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px clamp(16px, 2.4vw, 42px);
}

.ugel-annex03-months a,
.ugel-annex03-months span {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 8px 14px;
    border: 1px solid var(--annex-color);
    border-radius: 10px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--annex-soft) 70%, #fff), var(--annex-soft));
    color: #101820;
    font-size: .88rem;
    font-weight: 750;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.ugel-annex03-level.is-disabled {
    --annex-color: #a7aeac;
    --annex-soft: #dfe3e2;
    filter: grayscale(1);
    opacity: .7;
}

.ugel-annex03-level.is-disabled .ugel-annex03-months span {
    cursor: not-allowed;
}

.ugel-calendar-meta .is-disabled-level,
.ugel-calendar-summary .is-disabled-level,
.ugel-calendar-hours .is-disabled-level {
    background: #e5e8e7 !important;
    color: #747c79 !important;
    filter: grayscale(1);
}

.ugel-annex03-months a:hover,
.ugel-annex03-months a:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 5px 10px color-mix(in srgb, var(--annex-color) 30%, transparent);
    filter: saturate(1.12);
    outline: 0;
}

.ugel-annex03-footer-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(28px, 5vw, 80px);
    width: min(1210px, calc(100% - 50px));
    margin: 16px auto 0;
}

.ugel-annex03-footer-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 68px;
    padding: 12px 20px;
    border-radius: 12px;
    color: #fff;
    font-size: clamp(1rem, 2vw, 1.6rem);
    font-weight: 950;
    text-align: center;
    text-decoration: none;
    transition: transform .16s ease, filter .16s ease;
}

.ugel-annex03-footer-links a:hover,
.ugel-annex03-footer-links a:focus-visible {
    transform: translateY(-3px);
    filter: brightness(.96) saturate(1.08);
    outline: 0;
}

.ugel-annex03-footer-links .is-administrative {
    background: #a6a6a6;
}

.ugel-annex03-footer-links .is-follow-up {
    border: 1px solid #ed7d31;
    background: #f4ad8e;
    color: #c4510b;
}

.ugel-effective-hours .ugel-annex03-footer-links {
    grid-template-columns: 1fr;
}

.ugel-effective-hours-report {
    --effective-color: #5b9bd5;
    --effective-dark: #4472c4;
    --effective-soft: #dbeaf8;
    box-sizing: border-box;
    width: 100%;
    min-height: 720px;
    padding: 8px 10px 28px;
    border: 1px solid #b9c9d9;
    background: #fff;
    color: #071321;
}

.ugel-effective-hours-report.is-secondary {
    --effective-color: #70ad47;
    --effective-dark: #548235;
    --effective-soft: #e2f0d9;
}

.ugel-effective-hours-report.is-initial {
    --effective-color: #f4b183;
    --effective-dark: #ed7d31;
    --effective-soft: #fce4d6;
}

.ugel-effective-hours-report-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 230px;
    gap: 20px;
    align-items: start;
}

.ugel-effective-hours-report-heading h1 {
    margin: 0;
    color: var(--effective-color);
    font-size: clamp(1.15rem, 2vw, 1.65rem);
    font-weight: 900;
    line-height: 1.08;
    text-align: center;
}

.ugel-effective-hours-report-heading h2 {
    margin: 2px 0 0;
    padding: 5px 8px;
    background: var(--effective-color);
    color: #fff;
    font-size: 0.86rem;
    font-weight: 900;
}

.ugel-effective-hours-report-back {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--effective-color);
    text-align: center;
    text-decoration: none;
}

.ugel-effective-hours-report-back i {
    font-size: 4.2rem;
    line-height: 0.9;
}

.ugel-effective-hours-report-back strong {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--effective-color) 82%, #fff), var(--effective-dark));
    box-shadow: 0 4px 8px color-mix(in srgb, var(--effective-dark) 35%, transparent);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 900;
}

.ugel-effective-hours-report-back:hover i,
.ugel-effective-hours-report-back:focus-visible i {
    transform: translateY(-2px);
}

.ugel-effective-hours-report-meta {
    display: grid;
    grid-template-columns: 110px 155px 130px 110px 74px 100px;
    max-width: 820px;
    border-top: 1px solid var(--effective-color);
    border-left: 1px solid var(--effective-color);
}

.ugel-effective-hours-report-meta > div {
    min-width: 0;
    border-right: 1px solid var(--effective-color);
    border-bottom: 1px solid var(--effective-color);
}

.ugel-effective-hours-report-meta > div:nth-child(7) { grid-column: 1; }
.ugel-effective-hours-report-meta > div:nth-child(8) { grid-column: 2; }
.ugel-effective-hours-report-meta > div:nth-child(9) { grid-column: 3; }

.ugel-effective-hours-report-meta strong,
.ugel-effective-hours-report-meta span {
    display: block;
    min-height: 20px;
    padding: 2px 8px;
    font-size: 0.65rem;
    line-height: 1.15;
}

.ugel-effective-hours-report-meta strong {
    background: var(--effective-color);
    color: #fff;
    font-weight: 900;
}

.ugel-effective-hours-report-meta span {
    background: #fff;
    font-weight: 800;
}

.ugel-effective-hours-report-table-wrap {
    width: 100%;
    margin-top: 6px;
    overflow: auto;
}

.ugel-effective-hours-report-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 8px;
    padding: 7px 10px;
    border: 1px solid color-mix(in srgb, var(--effective-color) 55%, #fff);
    background: color-mix(in srgb, var(--effective-soft) 48%, #fff);
}

.ugel-effective-hours-report-actions p {
    margin: 0;
    color: #314457;
    font-size: 0.72rem;
}

.ugel-effective-hours-report-actions > div {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
}

.ugel-effective-hours-report-actions .btn-primary {
    border-color: var(--effective-dark);
    background: var(--effective-dark);
}

.ugel-effective-hours-report-table {
    width: 100%;
    min-width: 1300px;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.56rem;
}

.ugel-effective-hours-report-table th,
.ugel-effective-hours-report-table td {
    height: 25px;
    padding: 2px 3px;
    border: 1px solid var(--effective-color);
    text-align: center;
    vertical-align: middle;
}

.ugel-effective-hours-report-table thead th {
    background: var(--effective-color);
    color: #fff;
    font-weight: 900;
}

.ugel-effective-hours-report-table .is-number { width: 34px; }
.ugel-effective-hours-report-table .is-name { width: 205px; }
.ugel-effective-hours-report-table .is-workload { width: 63px; }
.ugel-effective-hours-report-table .is-grade { width: 55px; }
.ugel-effective-hours-report-table .is-section { width: 55px; }
.ugel-effective-hours-report-table .is-programmed { width: 95px; }
.ugel-effective-hours-report-table .is-total { width: 48px; }
.ugel-effective-hours-report-table .is-percent { width: 55px; }

.ugel-effective-hours-report-table th.is-day,
.ugel-effective-hours-report-table td.is-day-value {
    width: 24px;
    min-width: 24px;
    padding: 1px;
}

.ugel-effective-hours-report-table td.is-day-value input {
    display: block;
    width: 100%;
    min-width: 0;
    height: 23px;
    padding: 1px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #15273a;
    font: inherit;
    font-weight: 800;
    text-align: center;
    appearance: textfield;
    -moz-appearance: textfield;
}

.ugel-effective-hours-report-table td.is-day-value input::-webkit-inner-spin-button,
.ugel-effective-hours-report-table td.is-day-value input::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
}

.ugel-effective-hours-report-table td.is-day-value input:focus {
    background: #fff8c7;
    box-shadow: inset 0 0 0 2px var(--effective-dark);
}

.ugel-effective-hours-report-table td.is-day-value input.is-overridden {
    color: #0b5ed7;
}

.ugel-effective-hours-report-table th.is-day span,
.ugel-effective-hours-report-table th.is-day small {
    display: block;
    line-height: 1.1;
}

.ugel-effective-hours-report-table th.is-day span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    margin: 0 auto 2px;
}

.ugel-effective-hours-report-table tbody tr:nth-child(even) td:not(.is-saturday):not(.is-sunday):not(.is-holiday) {
    background: color-mix(in srgb, var(--effective-soft) 70%, #fff);
}

.ugel-effective-hours-report-table tbody td.is-name {
    overflow-wrap: anywhere;
    font-weight: 800;
    text-align: left;
}

.ugel-effective-hours-report-table .is-programmed-value,
.ugel-effective-hours-report-table .is-total-value,
.ugel-effective-hours-report-table .is-percent-value {
    font-weight: 900;
}

.ugel-effective-hours-report-table .is-saturday {
    background: #aeb7c1 !important;
    color: #142234;
}

.ugel-effective-hours-report-table .is-sunday,
.ugel-effective-hours-report-table .is-holiday {
    background: repeating-linear-gradient(125deg, #fff 0 3px, #ff6d74 3px 4px) !important;
    color: #8c0d16;
}

.ugel-effective-hours-report-table .is-management {
    background: repeating-linear-gradient(135deg, #d9ead3 0 4px, #a8cf98 4px 6px) !important;
    color: #315b22;
    font-weight: 900;
}

.ugel-effective-hours-report-table .is-fixed-code {
    display: block;
    font-size: 0.52rem;
    font-weight: 900;
    line-height: 1;
}

.ugel-effective-hours-report-table .is-empty {
    padding: 18px;
    color: #5e6e7e;
    font-size: 0.8rem;
    font-weight: 700;
}

.ugel-effective-hours-report-footer > p {
    width: min(520px, 100%);
    margin: 2px 0 0 auto;
    padding: 3px 7px;
    border-bottom: 1px solid var(--effective-dark);
    font-size: 0.65rem;
    text-align: right;
}

.ugel-effective-hours-report-signatures {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(35px, 7vw, 110px);
    width: min(1120px, 96%);
    margin: 76px auto 0;
    text-align: center;
}

.ugel-effective-hours-report-signatures > div > span:first-child {
    display: block;
    border-top: 1px solid var(--effective-dark);
}

.ugel-effective-hours-report-signatures strong,
.ugel-effective-hours-report-signatures small {
    display: block;
    padding-top: 3px;
    font-size: 0.65rem;
}

.ugel-effective-hours-report-signatures .is-conei label {
    display: block;
    margin: 0;
}

.ugel-effective-hours-report-signatures .is-conei input {
    display: block;
    width: 100%;
    min-height: 1.55rem;
    padding: 1px 5px;
    border: 0;
    border-bottom: 1px dashed color-mix(in srgb, var(--effective-dark) 35%, transparent);
    outline: 0;
    background: transparent;
    color: #162433;
    font-size: 0.72rem;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
}

.ugel-effective-hours-report-signatures .is-conei input:focus {
    border-bottom-color: var(--effective-dark);
    background: var(--effective-soft);
}

.ugel-effective-hours-report-signatures .is-conei input::placeholder {
    color: #657488;
    font-weight: 500;
    opacity: 1;
    text-transform: none;
}

@media (max-width: 900px) {
    .ugel-effective-hours-report-header {
        grid-template-columns: 1fr;
    }

    .ugel-effective-hours-report-back {
        justify-self: end;
        width: min(230px, 100%);
    }

    .ugel-effective-hours-report-meta {
        grid-template-columns: repeat(3, minmax(100px, 1fr));
        max-width: none;
    }

    .ugel-effective-hours-report-meta > div:nth-child(n) {
        grid-column: auto;
    }

    .ugel-effective-hours-report-actions {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 600px) {
    .ugel-effective-hours-report-meta,
    .ugel-effective-hours-report-signatures {
        grid-template-columns: 1fr;
    }

    .ugel-effective-hours-report-signatures {
        gap: 55px;
    }
}

@media print {
    body.ugel-effective-hours-print-page.comano-body,
    body.ugel-effective-hours-print-page.sidebar-collapsed.comano-body,
    body.ugel-effective-hours-print-page.sidebar-open.comano-body {
        display: block !important;
        width: auto !important;
        min-height: auto !important;
        overflow: visible !important;
        background: #fff !important;
    }

    body.ugel-effective-hours-print-page .comano-sidebar,
    body.ugel-effective-hours-print-page .topbar,
    body.ugel-effective-hours-print-page .comano-footer,
    body.ugel-effective-hours-print-page .ugel-effective-hours-report-back,
    body.ugel-effective-hours-print-page .ugel-effective-hours-report-actions {
        display: none !important;
    }

    body.ugel-effective-hours-print-page .comano-main,
    body.ugel-effective-hours-print-page .content-wrapper {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    body.ugel-effective-hours-print-page .ugel-effective-hours-report {
        width: 100% !important;
        min-height: 0 !important;
        margin: 20mm 0 0 !important;
        padding: 0 !important;
        border: 0 !important;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    body.ugel-effective-hours-print-page .ugel-effective-hours-report-header {
        display: block !important;
    }

    body.ugel-effective-hours-print-page .ugel-effective-hours-report-heading h1 {
        font-size: 12pt;
    }

    body.ugel-effective-hours-print-page .ugel-effective-hours-report-heading h2 {
        padding: 1mm;
        font-size: 8pt;
    }

    body.ugel-effective-hours-print-page .ugel-effective-hours-report-meta {
        grid-template-columns: 25mm 42mm 35mm 30mm 22mm 30mm;
        width: 184mm;
        max-width: none;
    }

    body.ugel-effective-hours-print-page .ugel-effective-hours-report-meta strong,
    body.ugel-effective-hours-print-page .ugel-effective-hours-report-meta span {
        min-height: 0;
        padding: 0.3mm 1mm;
        font-size: 5.2pt;
    }

    body.ugel-effective-hours-print-page .ugel-effective-hours-report-table-wrap {
        overflow: visible !important;
    }

    body.ugel-effective-hours-print-page .ugel-effective-hours-report-table {
        width: 100% !important;
        min-width: 0 !important;
        font-size: 4.8pt;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    body.ugel-effective-hours-print-page .ugel-effective-hours-report-table th,
    body.ugel-effective-hours-print-page .ugel-effective-hours-report-table td {
        height: 5mm;
        padding: 0.2mm;
    }

    body.ugel-effective-hours-print-page .ugel-effective-hours-report-table td.is-day-value input {
        height: auto;
        padding: 0;
        color: #000;
        box-shadow: none;
    }

    body.ugel-effective-hours-print-page .ugel-effective-hours-report-table .is-number { width: 6mm; }
    body.ugel-effective-hours-print-page .ugel-effective-hours-report-table .is-name { width: 38mm; }
    body.ugel-effective-hours-print-page .ugel-effective-hours-report-table .is-workload { width: 12mm; }
    body.ugel-effective-hours-print-page .ugel-effective-hours-report-table .is-grade { width: 11mm; }
    body.ugel-effective-hours-print-page .ugel-effective-hours-report-table .is-section { width: 11mm; }
    body.ugel-effective-hours-print-page .ugel-effective-hours-report-table .is-programmed { width: 18mm; }
    body.ugel-effective-hours-print-page .ugel-effective-hours-report-table th.is-day,
    body.ugel-effective-hours-print-page .ugel-effective-hours-report-table td.is-day-value { width: 5mm; min-width: 0; }
    body.ugel-effective-hours-print-page .ugel-effective-hours-report-table .is-total { width: 10mm; }
    body.ugel-effective-hours-print-page .ugel-effective-hours-report-table .is-percent { width: 12mm; }

    body.ugel-effective-hours-print-page .ugel-effective-hours-report-footer {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    body.ugel-effective-hours-print-page .ugel-effective-hours-report-signatures {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 16mm;
        margin-top: 14mm;
    }

    body.ugel-effective-hours-print-page .ugel-effective-hours-report-signatures .is-conei input {
        min-height: 4mm;
        padding: 0;
        border-bottom: 0;
        font-size: 6.5pt;
    }

    body.ugel-effective-hours-print-page .ugel-effective-hours-report-signatures .is-conei input::placeholder {
        color: transparent;
    }
}

@media (max-width: 1120px) {
    .ugel-annex03-top {
        grid-template-columns: minmax(0, 1fr) 280px;
    }

    .ugel-annex03-levels {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ugel-annex03-level.is-secondary {
        grid-column: 1 / -1;
        width: min(580px, 100%);
        justify-self: center;
    }
}

@media (max-width: 720px) {
    .ugel-annex03 {
        padding: 14px 10px 26px;
    }

    .ugel-annex03-top {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .ugel-annex03-brand,
    .ugel-annex03-back {
        grid-column: 1;
        justify-self: center;
    }

    .ugel-annex03-brand img {
        height: 70px;
    }

    .ugel-annex03-back {
        flex-direction: row;
        width: 100%;
    }

    .ugel-annex03-back i {
        font-size: 2.8rem;
    }

    .ugel-annex03-levels,
    .ugel-annex03-footer-links {
        grid-template-columns: 1fr;
    }

    .ugel-annex03-level.is-secondary {
        grid-column: auto;
    }

    .ugel-annex03-footer-links {
        width: 100%;
        gap: 12px;
    }
}

@media (max-width: 420px) {
    .ugel-annex03-months {
        grid-template-columns: 1fr;
    }
}

.evaluation-table .student-col {
    width: 320px;
    min-width: 320px;
    max-width: 320px;
    position: sticky;
    left: 0;
    background: #fff;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    z-index: 2;
}

.evaluation-table thead .student-col {
    background: #eef5fb;
    z-index: 3;
}

.evaluation-table .student-col strong {
    display: block;
    max-width: 100%;
    color: #071d35;
    font-weight: 900;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
}

.evaluation-table .student-col small {
    display: block;
    margin-top: .25rem;
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: anywhere;
}

.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 small {
    color: #5f7089;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.35;
}

.monitoring-kpi strong {
    color: var(--ink);
    font-size: 2rem;
    line-height: 1;
    font-weight: 900;
}

.monitoring-reading-panel {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    border: 1px solid #cfe6d8;
    border-left: 6px solid var(--brand);
    border-radius: 14px;
    background: #fff;
    padding: 1rem 1.15rem;
    box-shadow: 0 14px 32px rgba(0, 114, 54, .07);
}

.monitoring-reading-panel i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 12px;
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-size: 1.25rem;
    flex: 0 0 auto;
}

.monitoring-reading-panel strong {
    display: block;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 900;
}

.monitoring-reading-panel p {
    margin: .25rem 0 0;
    color: #53647b;
}

.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-list-stacked {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    max-height: none;
    overflow: visible;
}

.monitoring-dimension-chart-wrap {
    min-height: 360px;
}

.monitoring-dimension-chart-wrap canvas {
    width: 100% !important;
    min-height: 320px;
}

.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 small {
    display: block;
    color: #65758c;
    font-size: .76rem;
    font-weight: 800;
    margin-top: .15rem;
}

.monitoring-action-item p {
    margin: .35rem 0 0;
    color: var(--ink);
}

@media (max-width: 767.98px) {
    .monitoring-action-list-stacked {
        grid-template-columns: 1fr;
    }

    .monitoring-dimension-chart-wrap {
        min-height: 300px;
    }

    .monitoring-dimension-chart-wrap canvas {
        min-height: 280px;
    }
}

.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;
}

/* Instrumento 2: ficha digital de datos generales */
.monitoring-form .instrument2-general-block {
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 24px;
    background: transparent;
    box-shadow: none;
}

.monitoring-form .instrument2-monitoring-sheet {
    padding: 0;
    overflow: hidden;
    border: 1px solid #cfe0d5;
    border-radius: 24px;
    background: #f3f8f5;
    box-shadow: 0 22px 50px rgba(5, 58, 31, .12);
}

.instrument2-sheet-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: clamp(1.2rem, 2vw, 1.75rem);
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 88% 0%, rgba(255, 210, 72, .2), transparent 30%),
        linear-gradient(125deg, #043d21 0%, #066433 52%, #087b40 100%);
}

.instrument2-sheet-hero::after {
    position: absolute;
    z-index: -1;
    right: -58px;
    bottom: -96px;
    width: 270px;
    height: 270px;
    border: 42px solid rgba(255, 255, 255, .05);
    border-radius: 50%;
    content: "";
}

.instrument2-sheet-emblem {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 64px;
    height: 64px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 18px;
    color: #ffe07d;
    background: rgba(255, 255, 255, .12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 12px 25px rgba(0, 0, 0, .16);
    font-size: 1.8rem;
    backdrop-filter: blur(8px);
}

.instrument2-sheet-heading {
    min-width: 0;
}

.instrument2-sheet-kicker {
    display: block;
    margin-bottom: .25rem;
    color: #ffe38c;
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.monitoring-form .instrument2-monitoring-sheet .instrument2-title {
    margin: 0;
    color: #fff;
    font-size: clamp(1.25rem, 2vw, 1.85rem);
    font-weight: 800;
    line-height: 1.18;
    text-align: left;
}

.instrument2-sheet-heading p {
    max-width: 850px;
    margin: .45rem 0 0;
    color: rgba(255, 255, 255, .82);
    font-size: .9rem;
    font-weight: 500;
    line-height: 1.45;
}

.instrument2-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 38px;
    padding: .5rem .8rem;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 999px;
    color: #fff;
    background: rgba(255, 255, 255, .12);
    font-size: .78rem;
    font-weight: 800;
    white-space: nowrap;
    backdrop-filter: blur(8px);
}

.instrument2-status-pill.is-editing i {
    color: #ffe38c;
}

.instrument2-status-pill.is-finalized {
    border-color: rgba(183, 244, 207, .42);
    background: rgba(1, 42, 22, .34);
}

.instrument2-status-pill.is-finalized i {
    color: #b7f4cf;
}

.instrument2-sheet-content {
    display: grid;
    gap: 1rem;
    padding: clamp(1rem, 2vw, 1.5rem);
}

.instrument2-section-card {
    overflow: hidden;
    border: 1px solid #d9e6de;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(8, 54, 31, .055);
}

.instrument2-section-heading {
    display: flex;
    gap: .75rem;
    align-items: center;
    padding: .9rem 1rem;
    border-bottom: 1px solid #e2ebe6;
    background: linear-gradient(90deg, #f7fcf9 0%, #fbfdfc 100%);
}

.instrument2-section-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid #cde5d5;
    border-radius: 12px;
    color: #08703b;
    background: #eaf7ef;
    font-size: 1.1rem;
}

.instrument2-section-heading h4 {
    margin: 0;
    color: #06391f;
    font-size: 1rem;
    font-weight: 850;
    line-height: 1.25;
}

.instrument2-section-heading p {
    margin: .12rem 0 0;
    color: #647384;
    font-size: .8rem;
    font-weight: 500;
    line-height: 1.35;
}

.instrument2-form-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: .9rem;
    padding: 1rem;
}

.instrument2-form-field {
    min-width: 0;
}

.instrument2-form-field.field-span-4 {
    grid-column: span 4;
}

.instrument2-form-field.field-span-6 {
    grid-column: span 6;
}

.instrument2-form-field.field-span-8 {
    grid-column: span 8;
}

.instrument2-form-field.field-span-12 {
    grid-column: 1 / -1;
}

.instrument2-form-field.field-highlight {
    padding: .8rem;
    margin: -.2rem;
    border: 1px solid #cde7d6;
    border-radius: 14px;
    background: linear-gradient(135deg, #f6fcf8, #eef9f2);
}

.instrument2-form-label {
    display: block;
    margin-bottom: .4rem;
    color: #33475b;
    font-size: .76rem;
    font-weight: 850;
    letter-spacing: .025em;
    text-transform: uppercase;
}

.monitoring-form .instrument2-monitoring-sheet .instrument2-sheet-control,
.monitoring-form .instrument2-monitoring-sheet .instrument2-capacity-listbox {
    min-height: 46px;
    padding: .65rem .8rem;
    border: 1px solid #cfded5;
    border-radius: 11px;
    color: #132b3e;
    background-color: #fff;
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.35;
    box-shadow: inset 0 1px 2px rgba(8, 54, 31, .025);
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.monitoring-form .instrument2-monitoring-sheet .instrument2-sheet-control:hover:not(:disabled),
.monitoring-form .instrument2-monitoring-sheet .instrument2-capacity-listbox:hover:not(:disabled) {
    border-color: #9fc7ae;
}

.monitoring-form .instrument2-monitoring-sheet .instrument2-sheet-control:focus,
.monitoring-form .instrument2-monitoring-sheet .instrument2-capacity-listbox:focus {
    border-color: #08703b;
    box-shadow: 0 0 0 .22rem rgba(8, 112, 59, .13);
}

.monitoring-form .instrument2-monitoring-sheet .instrument2-sheet-control:disabled,
.monitoring-form .instrument2-monitoring-sheet .instrument2-sheet-control[readonly],
.monitoring-form .instrument2-monitoring-sheet .instrument2-capacity-listbox:disabled {
    color: #496071;
    background-color: #f4f8f6;
    opacity: 1;
}

.monitoring-form .instrument2-monitoring-sheet textarea.instrument2-sheet-control {
    min-height: 86px;
    resize: vertical;
}

.monitoring-form .instrument2-monitoring-sheet #monitorPerformanceSheet2 {
    min-height: 138px;
}

.monitoring-form .instrument2-monitoring-sheet #monitorPurposeSheet2 {
    min-height: 112px;
}

.instrument2-static-value {
    display: flex;
    gap: .65rem;
    align-items: center;
    min-height: 46px;
    padding: .65rem .8rem;
    overflow: hidden;
    border: 1px solid #dce7e0;
    border-radius: 11px;
    color: #173449;
    background: #f6f9f7;
    font-size: .92rem;
    font-weight: 700;
}

.instrument2-static-value i {
    flex: 0 0 auto;
    color: #16814a;
    font-size: 1rem;
}

.instrument2-static-value span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.instrument2-control-with-icon {
    position: relative;
}

.instrument2-control-with-icon > i {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: .85rem;
    color: #16814a;
    pointer-events: none;
    transform: translateY(-50%);
}

.monitoring-form .instrument2-monitoring-sheet .instrument2-control-with-icon .instrument2-sheet-control {
    padding-left: 2.55rem;
}

.monitoring-form .instrument2-monitoring-sheet .instrument2-teacher-picker {
    display: flex;
    flex-wrap: nowrap;
    gap: .55rem;
}

.monitoring-form .instrument2-monitoring-sheet .instrument2-teacher-picker .form-control {
    min-width: 0;
    border-radius: 11px !important;
}

.monitoring-form .instrument2-monitoring-sheet .instrument2-sheet-button {
    display: inline-flex;
    gap: .45rem;
    align-items: center;
    justify-content: center;
    min-width: 148px;
    min-height: 46px;
    padding: .6rem .9rem;
    border: 1px solid #08703b;
    border-radius: 11px !important;
    color: #fff;
    background: linear-gradient(135deg, #08703b, #0a8747);
    font-size: .83rem;
    font-weight: 800;
    box-shadow: 0 8px 16px rgba(8, 112, 59, .16);
}

.monitoring-form .instrument2-monitoring-sheet .instrument2-sheet-button:hover,
.monitoring-form .instrument2-monitoring-sheet .instrument2-sheet-button:focus {
    color: #fff;
    border-color: #055d30;
    background: #055d30;
}

.instrument2-classroom-summary,
.instrument2-field-hint {
    display: flex;
    gap: .4rem;
    align-items: flex-start;
    margin-top: .5rem;
    color: #496575;
    font-size: .78rem;
    font-weight: 650;
    line-height: 1.4;
}

.instrument2-classroom-summary {
    padding: .5rem .65rem;
    border: 1px solid #d7e9de;
    border-radius: 10px;
    color: #17633c;
    background: rgba(255, 255, 255, .76);
}

.instrument2-classroom-summary.is-empty {
    color: #697b89;
    border-color: #dce4df;
    background: #f8faf9;
    font-style: normal;
}

.instrument2-classroom-summary i,
.instrument2-field-hint i {
    flex: 0 0 auto;
    margin-top: .08rem;
    color: #16814a;
}

.monitoring-form .instrument2-monitoring-sheet .instrument2-area-select .input-group {
    flex-wrap: nowrap;
}

.monitoring-form .instrument2-monitoring-sheet .instrument2-area-select .input-group-text {
    min-width: 46px;
    justify-content: center;
    border-color: #cfded5;
    border-radius: 11px 0 0 11px;
    color: #08703b;
    background: #edf8f1;
}

.monitoring-form .instrument2-monitoring-sheet .instrument2-area-select .form-select {
    border-radius: 0 11px 11px 0;
}

.monitoring-form .instrument2-monitoring-sheet .instrument2-capacity-listbox {
    min-height: 174px;
    padding: .5rem;
    background: linear-gradient(180deg, #fff 0%, #f8fbf9 100%);
}

.monitoring-form .instrument2-monitoring-sheet .instrument2-capacity-listbox option {
    padding: .55rem .65rem;
    border-radius: 8px;
    white-space: normal;
}

.monitoring-form .instrument2-monitoring-sheet .instrument2-capacity-listbox option:checked {
    color: #fff;
    background: linear-gradient(90deg, #08703b, #0a8747);
}

.instrument2-attendance-card {
    background: linear-gradient(135deg, #fff 0%, #fbfefc 100%);
}

.instrument2-number-control {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: .65rem;
    align-items: center;
}

.instrument2-number-control > span {
    display: grid;
    place-items: center;
    width: 52px;
    height: 46px;
    border: 1px solid #cee6d6;
    border-radius: 12px;
    color: #08703b;
    background: #eaf7ef;
    font-size: 1.2rem;
}

.instrument2-number-control.is-attendance > span {
    color: #9a6a00;
    border-color: #f2dfae;
    background: #fff7df;
}

.instrument2-number-control .form-control {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
}

@media (max-width: 991.98px) {
    .instrument2-form-field.field-span-4,
    .instrument2-form-field.field-span-6 {
        grid-column: span 6;
    }

    .instrument2-form-field.field-span-8 {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767.98px) {
    .monitoring-form .instrument2-general-block,
    .monitoring-form .instrument2-monitoring-sheet {
        border-radius: 18px;
    }

    .instrument2-sheet-hero {
        grid-template-columns: auto minmax(0, 1fr);
        gap: .8rem;
        align-items: start;
        padding: 1rem;
    }

    .instrument2-sheet-emblem {
        width: 50px;
        height: 50px;
        border-radius: 14px;
        font-size: 1.35rem;
    }

    .instrument2-status-pill {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .instrument2-sheet-content {
        padding: .75rem;
    }

    .instrument2-section-heading {
        align-items: flex-start;
        padding: .8rem;
    }

    .instrument2-section-icon {
        width: 38px;
        height: 38px;
    }

    .instrument2-form-grid {
        grid-template-columns: 1fr;
        gap: .8rem;
        padding: .8rem;
    }

    .instrument2-form-field.field-span-4,
    .instrument2-form-field.field-span-6,
    .instrument2-form-field.field-span-8,
    .instrument2-form-field.field-span-12 {
        grid-column: 1 / -1;
    }

    .monitoring-form .instrument2-monitoring-sheet .instrument2-teacher-picker {
        display: grid;
        grid-template-columns: 1fr;
    }

    .monitoring-form .instrument2-monitoring-sheet .instrument2-sheet-button {
        width: 100%;
    }
}

.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);
}

@media (max-width: 992px) {
    .observation-admin-strip {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
}

.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;
}

/* Observación de aula · matriz profesional de comentarios D1-D5 */
.observation-official-sheet {
    overflow: visible;
}

.observation-evidence-shell {
    position: relative;
    overflow-x: auto;
    border: 1px solid #078342;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 14px 30px rgba(5, 91, 47, .12);
    scrollbar-color: #168a4f #e5f2e9;
    scrollbar-width: thin;
}

.observation-evidence-table {
    width: 100%;
    min-width: 1040px;
    overflow: hidden;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    color: #10251a;
    background: #fff;
}

.observation-evidence-table col.observation-performance-column { width: 18%; }
.observation-evidence-table col.observation-aspect-column { width: 23%; }
.observation-evidence-table col.observation-comment-column { width: 59%; }

.observation-evidence-table th,
.observation-evidence-table td {
    border: 0;
    border-right: 1px solid #13894c;
    border-bottom: 1px solid #13894c;
}

.observation-evidence-table tr > :last-child {
    border-right: 0;
}

.observation-evidence-table tbody:last-of-type tr:last-child > * {
    border-bottom: 0;
}

.observation-evidence-table .observation-section-title {
    padding: 0 !important;
    color: #fff !important;
    background: linear-gradient(100deg, #00783a 0%, #079249 58%, #087d40 100%) !important;
}

.observation-section-heading {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .8rem;
    min-height: 72px;
    padding: .75rem .9rem;
}

.observation-section-number {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, .42);
    border-radius: 12px;
    color: #fff;
    background: rgba(255, 255, 255, .14);
    font-size: 1.2rem;
    font-weight: 950;
}

.observation-section-copy {
    display: block;
    min-width: 0;
}

.observation-section-copy strong,
.observation-section-copy small {
    display: block;
}

.observation-section-copy strong {
    color: #fff;
    font-size: clamp(1rem, 1.45vw, 1.35rem);
    font-weight: 950;
    letter-spacing: .015em;
    line-height: 1.18;
    text-transform: uppercase;
}

.observation-section-copy small {
    margin-top: .28rem;
    color: rgba(255, 255, 255, .85);
    font-size: .78rem;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
}

.observation-comment-progress {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    padding: .5rem .7rem;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 999px;
    color: #fff;
    background: rgba(0, 51, 25, .22);
    font-size: .75rem;
    font-weight: 850;
    white-space: nowrap;
    transition: background .18s ease, border-color .18s ease;
}

.observation-comment-progress.is-complete {
    border-color: #d6ffdf;
    color: #06371d;
    background: #dff8e6;
}

.observation-evidence-heading th {
    height: 54px;
    padding: .7rem .85rem;
    color: #082817;
    border-color: #13894c;
    background: linear-gradient(180deg, #c9edb8, #b4e3a1);
    font-size: .9rem;
    font-weight: 950;
    letter-spacing: .015em;
    text-align: left;
    text-transform: uppercase;
}

.observation-evidence-heading th i {
    margin-right: .35rem;
    color: #08783d;
    font-size: 1rem;
}

.observation-evidence-row {
    --performance-accent: #3f8f3b;
    --performance-soft: #e0f2d8;
    --performance-faint: #f7fcf5;
}

.observation-evidence-row.observation-performance-d1 {
    --performance-accent: #2c7131;
    --performance-soft: #dff1d5;
    --performance-faint: #f7fcf5;
}

.observation-evidence-row.observation-performance-d2 {
    --performance-accent: #9b4b98;
    --performance-soft: #f1d4ee;
    --performance-faint: #fdf8fd;
}

.observation-evidence-row.observation-performance-d3 {
    --performance-accent: #176a91;
    --performance-soft: #cceaf6;
    --performance-faint: #f5fbfe;
}

.observation-evidence-row.observation-performance-d4 {
    --performance-accent: #984818;
    --performance-soft: #f7d4bb;
    --performance-faint: #fff9f5;
}

.observation-evidence-row.observation-performance-d5 {
    --performance-accent: #655bb0;
    --performance-soft: #dbd7f7;
    --performance-faint: #f9f8ff;
}

.observation-evidence-table .observation-performance-cell {
    position: relative;
    width: auto;
    padding: 1.1rem .9rem;
    overflow: hidden;
    vertical-align: middle !important;
    color: #102219;
    background: var(--performance-soft);
    box-shadow: inset 6px 0 0 var(--performance-accent);
    text-align: center;
}

.observation-performance-cell::after {
    position: absolute;
    right: -34px;
    bottom: -42px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .28);
    content: '';
    pointer-events: none;
}

.observation-performance-cell .observation-performance-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 36px;
    margin-bottom: .7rem;
    padding: .35rem .65rem;
    border-radius: 999px;
    color: #fff;
    background: var(--performance-accent);
    box-shadow: 0 5px 12px rgba(12, 44, 25, .15);
    font-size: 1rem;
    font-weight: 950;
    letter-spacing: .035em;
}

.observation-evidence-table .observation-performance-cell strong {
    position: relative;
    z-index: 1;
    display: block;
    margin: 0;
    color: #102219;
    font-size: .94rem;
    font-weight: 900;
    line-height: 1.42;
}

.observation-performance-cell small {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: .7rem;
    color: color-mix(in srgb, var(--performance-accent) 72%, #12251a);
    font-size: .72rem;
    font-weight: 800;
}

.observation-evidence-table .observation-aspect-cell {
    width: auto;
    padding: 1rem;
    vertical-align: middle !important;
    background: linear-gradient(135deg, var(--performance-faint), #fff);
}

.observation-aspect-code {
    display: inline-flex !important;
    align-items: center;
    min-height: 26px;
    margin-bottom: .55rem !important;
    padding: .25rem .52rem;
    border: 1px solid color-mix(in srgb, var(--performance-accent) 32%, #fff);
    border-radius: 7px;
    color: var(--performance-accent) !important;
    background: color-mix(in srgb, var(--performance-soft) 55%, #fff);
    font-size: .72rem !important;
    font-weight: 950;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.observation-evidence-table .observation-aspect-cell strong {
    display: block;
    margin: 0;
    color: #17271e;
    font-size: .88rem;
    font-weight: 800;
    line-height: 1.45;
}

.observation-evidence-table .observation-evidence-cell {
    min-height: 154px;
    padding: .75rem;
    vertical-align: top;
    background: #fff;
}

.observation-comment-editor {
    min-height: 100%;
}

.observation-comment-label {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0 0 .42rem .15rem;
    color: #52645a;
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .025em;
    text-transform: uppercase;
}

.observation-comment-label i {
    color: var(--performance-accent);
}

.observation-evidence-table .observation-evidence-cell textarea {
    display: block;
    width: 100%;
    min-height: 112px;
    padding: .8rem .9rem;
    border: 1px solid #cddbd2;
    border-left: 4px solid var(--performance-accent);
    border-radius: 10px;
    color: #17241c;
    background: #fbfdfb;
    box-shadow: inset 0 1px 2px rgba(14, 42, 25, .04);
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.5;
    resize: vertical;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.observation-evidence-table .observation-evidence-cell textarea:hover {
    border-color: color-mix(in srgb, var(--performance-accent) 55%, #ced9d2);
    background: #fff;
}

.observation-evidence-table .observation-evidence-cell textarea:focus {
    border-color: var(--performance-accent);
    background: #fff;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--performance-accent) 14%, transparent);
    outline: 0;
}

@media (max-width: 768px) {
    .observation-official-sheet {
        padding: .55rem;
        border-radius: 12px;
    }

    .observation-evidence-shell {
        border-radius: 10px;
    }

    .observation-evidence-table {
        min-width: 900px;
    }

    .observation-section-heading {
        grid-template-columns: auto minmax(0, 1fr);
        padding: .65rem;
    }

    .observation-comment-progress {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .observation-section-copy small {
        display: none;
    }
}

/* Observación de aula · datos generales, carga docente y ayudas de redacción */
.observation-general-shell {
    overflow-x: auto;
    border: 1px solid #0b7d43;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 14px 30px rgba(4, 80, 41, .1);
    scrollbar-color: #168a4f #e5f2e9;
    scrollbar-width: thin;
}

.observation-general-shell:focus-visible {
    outline: 3px solid rgba(13, 130, 72, .25);
    outline-offset: 3px;
}

.observation-general-table {
    min-width: 1120px;
    overflow: hidden;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.observation-general-table th,
.observation-general-table td {
    border: 0;
    border-right: 1px solid #b8cfc0;
    border-bottom: 1px solid #b8cfc0;
}

.observation-general-table tr > :last-child {
    border-right: 0;
}

.observation-general-table tbody tr:last-child > * {
    border-bottom: 0;
}

.observation-general-table .observation-section-title {
    padding: 0 !important;
    background: linear-gradient(100deg, #075b31 0%, #087b41 60%, #066334 100%) !important;
}

.observation-general-heading {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 62px;
    padding: .7rem .9rem;
    text-align: left;
}

.observation-general-heading-icon {
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: 11px;
    color: #fff;
    background: rgba(255, 255, 255, .14);
    font-size: 1.1rem;
}

.observation-general-heading strong,
.observation-general-heading small {
    display: block;
}

.observation-general-heading strong {
    color: #fff;
    font-size: 1rem;
    font-weight: 950;
    letter-spacing: .045em;
}

.observation-general-heading small {
    margin-top: .18rem;
    color: rgba(255, 255, 255, .84);
    font-size: .76rem;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
}

.observation-general-table th:not(.observation-section-title) {
    padding: .65rem .7rem;
    color: #0a2c1a;
    background: linear-gradient(135deg, #e5f1df, #d9ebd3);
    font-size: .82rem;
    font-weight: 900;
    text-align: right;
}

.observation-general-table th label {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .42rem;
    margin: 0;
    line-height: 1.3;
}

.observation-general-table th label i {
    color: #087941;
    font-size: .95rem;
}

.observation-general-table td {
    padding: .48rem;
    background: #fff;
}

.observation-general-table .observation-sheet-control {
    min-height: 44px !important;
    padding: .58rem .72rem;
    border: 1px solid #c4d8ca;
    border-radius: 9px !important;
    color: #102219;
    background-color: #fff;
    box-shadow: inset 0 1px 2px rgba(11, 52, 29, .035);
    font-size: .9rem;
    font-weight: 800 !important;
}

.observation-general-table .observation-sheet-control:focus {
    border-color: #0a8448;
    box-shadow: 0 0 0 3px rgba(10, 132, 72, .14);
}

.observation-general-table .observation-sheet-control[readonly] {
    color: #294638;
    background: #f6faf7;
}

.observation-teacher-picker .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .38rem;
    min-width: 92px;
    border-radius: 0 9px 9px 0 !important;
    font-size: .82rem;
    font-weight: 850;
}

.observation-general-table .observation-sheet-textarea {
    min-height: 74px !important;
    padding: .72rem .8rem;
    border: 1px solid #c4d8ca;
    background: #fcfefd;
    font-size: .9rem;
    line-height: 1.45;
}

.observation-assignment-row td {
    padding: .6rem .7rem;
    background: #f5faf7;
}

.observation-assignment-status {
    display: grid;
    grid-template-columns: auto minmax(260px, 1fr) auto;
    align-items: center;
    gap: .75rem;
    min-height: 52px;
    padding: .6rem .7rem;
    border: 1px solid #b8ddc5;
    border-radius: 11px;
    color: #17452c;
    background: #edf8f1;
    transition: border-color .18s ease, background .18s ease;
}

.observation-assignment-status-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: #fff;
    background: #087a42;
    font-size: 1.05rem;
}

.observation-assignment-status-copy strong,
.observation-assignment-status-copy > span {
    display: block;
}

.observation-assignment-status-copy strong {
    color: #075c32;
    font-size: .8rem;
    font-weight: 950;
    text-transform: uppercase;
}

.observation-assignment-status-copy > span {
    margin-top: .12rem;
    color: #456253;
    font-size: .78rem;
    font-weight: 650;
}

.observation-assignment-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .35rem;
}

.observation-assignment-chips > span {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    padding: .3rem .5rem;
    border: 1px solid #b8ddc5;
    border-radius: 999px;
    color: #075c32;
    background: #fff;
    font-size: .7rem;
    font-weight: 850;
    white-space: nowrap;
}

.observation-assignment-status[data-state="missing"] {
    border-color: #efb5b5;
    color: #7d1f25;
    background: #fff1f1;
}

.observation-assignment-status[data-state="missing"] .observation-assignment-status-icon {
    background: #bd2832;
}

.observation-assignment-status[data-state="missing"] .observation-assignment-status-copy strong {
    color: #971d27;
}

.observation-assignment-status[data-state="historical"] {
    border-color: #e8c46d;
    background: #fff9e9;
}

.observation-assignment-status[data-state="historical"] .observation-assignment-status-icon {
    background: #a86c05;
}

.monitoring-teacher-load {
    display: flex;
    align-items: flex-start;
    gap: .42rem;
    color: #365345;
    font-size: .76rem;
    font-weight: 700;
    line-height: 1.35;
}

.monitoring-teacher-load i {
    margin-top: .08rem;
    color: #087a42;
}

.observation-comment-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .45rem;
    margin: 0 0 .48rem .1rem;
}

.observation-comment-toolbar .observation-comment-label {
    margin: 0;
}

.observation-suggestion-tools {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
    padding: .24rem;
    border: 1px solid #d4e2d8;
    border-radius: 9px;
    background: #f7faf8;
}

.observation-suggestion-caption {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    padding: 0 .35rem;
    color: #52685b;
    font-size: .68rem;
    font-weight: 900;
    text-transform: uppercase;
}

.observation-suggestion-caption i {
    color: #987000;
}

.observation-suggestion-option {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    min-height: 28px;
    padding: .28rem .45rem;
    border: 1px solid transparent;
    border-radius: 7px;
    background: #fff;
    font-size: .68rem;
    font-weight: 850;
    line-height: 1;
    transition: transform .15s ease, box-shadow .15s ease, color .15s ease, background .15s ease;
}

.observation-suggestion-option:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(19, 48, 31, .1);
}

.observation-suggestion-option.is-compliant {
    color: #08733e;
    border-color: #a8d7b8;
}

.observation-suggestion-option.is-progress {
    color: #855d00;
    border-color: #e8c766;
}

.observation-suggestion-option.is-urgent {
    color: #a4262e;
    border-color: #e7afb3;
}

.observation-suggestion-option.is-compliant.is-selected {
    color: #fff;
    background: #087a42;
    border-color: #087a42;
}

.observation-suggestion-option.is-progress.is-selected {
    color: #332400;
    background: #f1bd24;
    border-color: #d7a60e;
}

.observation-suggestion-option.is-urgent.is-selected {
    color: #fff;
    background: #bd2832;
    border-color: #bd2832;
}

.observation-suggestion-feedback {
    display: block;
    min-height: 16px;
    margin: .3rem .2rem 0;
    color: #66786d;
    font-size: .67rem;
    font-weight: 700;
}

.observation-comment-editor[data-suggestion-state="cumple"] textarea {
    border-right: 4px solid #087a42;
}

.observation-comment-editor[data-suggestion-state="proceso"] textarea {
    border-right: 4px solid #d5a308;
}

.observation-comment-editor[data-suggestion-state="no_cumple"] textarea {
    border-right: 4px solid #bd2832;
}

.observation-closing-panel {
    overflow: hidden;
    border: 1px solid #b8d8c3;
    border-radius: 18px;
    box-shadow: 0 16px 34px rgba(5, 76, 40, .11);
}

.observation-closing-panel .observation-closing-header {
    align-items: center;
    color: #fff;
    background: linear-gradient(105deg, #075b31, #098048);
}

.observation-closing-header h2,
.observation-closing-header small {
    color: #fff;
}

.observation-closing-header small {
    display: block;
    margin-top: .2rem;
    opacity: .82;
}

.observation-closing-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .68rem;
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 999px;
    color: #fff;
    background: rgba(255, 255, 255, .12);
    font-size: .72rem;
    font-weight: 850;
    white-space: nowrap;
}

.observation-closing-notice {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: .9rem;
    padding: .7rem .8rem;
    border: 1px solid #d7e8dc;
    border-radius: 11px;
    color: #3c5b4a;
    background: #f5faf7;
    font-size: .78rem;
    font-weight: 700;
}

.observation-closing-notice i {
    color: #b17b00;
    font-size: 1.05rem;
}

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

.observation-closing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .65rem;
    min-width: 0;
    padding: .9rem;
    overflow: hidden;
    border: 1px solid #d4e2d8;
    border-top: 4px solid #13804a;
    border-radius: 14px;
    background: linear-gradient(180deg, #fbfefc, #fff 38%);
    box-shadow: 0 8px 18px rgba(17, 63, 37, .065);
}

.observation-closing-card.is-support {
    border-top-color: #c79008;
}

.observation-closing-card.is-follow-up {
    border-top-color: #256ba6;
}

.observation-closing-card-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .65rem;
}

.observation-closing-number {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    color: #fff;
    background: #087a42;
    font-size: .75rem;
    font-weight: 950;
}

.observation-closing-card.is-support .observation-closing-number {
    color: #3a2900;
    background: #f0bd2e;
}

.observation-closing-card.is-follow-up .observation-closing-number {
    background: #256ba6;
}

.observation-closing-card-header label,
.observation-closing-card-header small {
    display: block;
}

.observation-closing-card-header label {
    margin: 0;
    color: #123421;
    font-size: .88rem;
    font-weight: 900;
}

.observation-closing-card-header small {
    margin-top: .15rem;
    color: #6a7c71;
    font-size: .7rem;
    font-weight: 650;
    line-height: 1.3;
}

.observation-closing-suggestion {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .38rem .62rem;
    border: 1px solid #b8d8c3;
    color: #076b39;
    background: #edf8f1;
    font-size: .72rem;
    font-weight: 850;
}

.observation-closing-suggestion:hover,
.observation-closing-suggestion:focus {
    color: #fff;
    background: #087a42;
    border-color: #087a42;
}

.observation-closing-card textarea {
    min-height: 142px;
    border-color: #cbdcd0;
    border-radius: 10px;
    color: #1d3025;
    background: #fff;
    font-size: .86rem;
    font-weight: 600;
    line-height: 1.48;
    resize: vertical;
}

.observation-closing-card textarea:focus {
    border-color: #0a8448;
    box-shadow: 0 0 0 3px rgba(10, 132, 72, .13);
}

.observation-closing-feedback {
    min-height: 18px;
    margin-top: .55rem;
    color: #526b5c;
    font-size: .72rem;
    font-weight: 700;
    text-align: right;
}

@media (max-width: 1199px) {
    .observation-closing-grid {
        grid-template-columns: 1fr;
    }

    .observation-assignment-status {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .observation-assignment-chips {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .observation-general-table {
        min-width: 1080px;
    }

    .observation-closing-badge {
        display: none;
    }

    .observation-comment-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }
}

.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);
        padding-top: 64px;
        transform: translateX(-100%);
        visibility: visible;
        pointer-events: auto;
        transition: transform .2s ease;
    }
    .topbar { z-index: 30; }
    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;
    }
    .student-exoneration-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .student-exoneration-filter .filter-wide,
    .student-exoneration-filter .btn {
        grid-column: 1 / -1;
    }
    .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%; }
    .student-exoneration-filter {
        grid-template-columns: 1fr;
    }
    .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(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-edit-modal {
    border-radius: 16px;
    border: 0;
    box-shadow: 0 24px 70px rgba(15, 44, 70, .22);
    max-height: calc(100dvh - 2rem);
    overflow: hidden;
}

.teacher-planning-edit-dialog {
    margin: 1rem auto;
    max-height: calc(100dvh - 2rem);
    width: calc(100% - 2rem);
}

.teacher-planning-edit-modal > form {
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 2rem);
    min-height: 0;
}

.teacher-planning-edit-modal .modal-header {
    background: linear-gradient(135deg, #f8fbff 0%, #eef6ff 100%);
    border-bottom-color: #d7e6f5;
    flex: 0 0 auto;
    padding: 1rem 1.25rem;
}

.teacher-planning-edit-modal .modal-body {
    background: #fff;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.15rem 1.25rem;
    scrollbar-color: #9bb6d4 #edf3f9;
    scrollbar-width: thin;
}

.teacher-planning-edit-modal .modal-body::-webkit-scrollbar {
    width: 9px;
}

.teacher-planning-edit-modal .modal-body::-webkit-scrollbar-track {
    background: #edf3f9;
}

.teacher-planning-edit-modal .modal-body::-webkit-scrollbar-thumb {
    background: #9bb6d4;
    border: 2px solid #edf3f9;
    border-radius: 999px;
}

.teacher-planning-edit-modal .modal-title {
    color: #102a43;
    font-size: 1.22rem;
    font-weight: 800;
}

.teacher-planning-edit-kicker {
    color: #175cd3;
    display: block;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
    margin-bottom: .15rem;
    text-transform: uppercase;
}

.teacher-planning-replace-box {
    background: linear-gradient(145deg, #f8fbff, #f2f7fc);
    border: 1px dashed #8fb8e3;
    border-radius: 12px;
    display: grid;
    gap: .55rem;
    padding: 1rem;
}

.teacher-planning-replace-box p {
    color: #173b67;
    overflow-wrap: anywhere;
}

.teacher-planning-replace-box small {
    color: #667085;
}

.teacher-planning-edit-footer {
    align-items: center;
    background: #fff;
    border-top: 1px solid #d7e6f5;
    box-shadow: 0 -8px 24px rgba(31, 64, 104, .07);
    display: flex;
    flex: 0 0 auto;
    justify-content: space-between;
    padding: .85rem 1.25rem;
    position: relative;
    z-index: 2;
}

.teacher-planning-edit-footer-note {
    align-items: center;
    color: #52677d;
    display: inline-flex;
    font-size: .82rem;
    gap: .48rem;
    line-height: 1.3;
    max-width: 52%;
}

.teacher-planning-edit-footer-note i {
    color: #087443;
    font-size: 1rem;
}

.teacher-planning-edit-footer-actions {
    display: flex;
    gap: .65rem;
}

.teacher-planning-edit-footer-actions .btn {
    align-items: center;
    border-radius: 9px;
    display: inline-flex;
    font-weight: 750;
    gap: .42rem;
    justify-content: center;
    min-height: 42px;
    padding-left: 1rem;
    padding-right: 1rem;
}

.teacher-planning-edit-footer-actions .btn-primary {
    box-shadow: 0 7px 16px rgba(23, 92, 211, .2);
    min-width: 166px;
}

@media (max-width: 767px), (max-height: 700px) {
    .teacher-planning-edit-dialog {
        margin: .5rem auto;
        max-height: calc(100dvh - 1rem);
        width: calc(100% - 1rem);
    }

    .teacher-planning-edit-modal,
    .teacher-planning-edit-modal > form {
        max-height: calc(100dvh - 1rem);
    }

    .teacher-planning-edit-modal .modal-header,
    .teacher-planning-edit-modal .modal-body,
    .teacher-planning-edit-footer {
        padding-left: .9rem;
        padding-right: .9rem;
    }

    .teacher-planning-edit-footer {
        align-items: stretch;
        flex-direction: column;
        gap: .7rem;
    }

    .teacher-planning-edit-footer-note {
        max-width: none;
    }

    .teacher-planning-edit-footer-actions {
        justify-content: flex-end;
    }
}

@media (max-width: 480px) {
    .teacher-planning-edit-footer-actions {
        display: grid;
        grid-template-columns: 1fr 1.25fr;
    }

    .teacher-planning-edit-footer-actions .btn,
    .teacher-planning-edit-footer-actions .btn-primary {
        min-width: 0;
        width: 100%;
    }
}

.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::before {
        border-width: .38mm;
        box-shadow: inset 0 0 0 .16mm #efc34f;
    }
    .student-id-card::after {
        inset: .78mm;
        border-width: .12mm;
        border-radius: 1.55mm;
    }
    .student-id-card:nth-of-type(8n) {
        break-after: page;
        page-break-after: always;
    }
    .student-id-card-fields dd {
        padding: .15mm .45mm .12mm;
        font-size: 4.75pt;
    }
    .student-id-card-name dd {
        font-size: 4.35pt;
    }
    .student-id-card-year {
        width: 12.35mm;
        height: 8.2mm;
        padding: 0 .8mm .2mm;
        font-size: 14pt;
    }
    .student-id-card-qr-panel {
        top: 20.02mm;
        left: 18.23mm;
        width: 24.91mm;
        height: 22.94mm;
        border-radius: .45mm;
        box-shadow:
            0 0 0 .18mm #003822,
            0 0 0 .48mm #efc34f,
            0 0 0 .84mm #003c25;
    }
    .student-id-card-qr {
        width: auto;
        height: 100%;
        padding: 0;
    }
}
/* Aula virtual */
.virtual-classroom-title h1 {
    margin-bottom: 0;
}

.virtual-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 1rem;
    align-items: stretch;
    padding: clamp(1rem, 2vw, 1.5rem);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(4, 95, 70, 0.98), rgba(8, 118, 95, 0.94) 58%, rgba(13, 148, 136, 0.9)),
        #075f4b;
    color: #fff;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.14);
}

.virtual-hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.virtual-hero-copy > span,
.virtual-section-heading span {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.virtual-hero h1 {
    margin: 0.25rem 0 0;
    font-weight: 900;
    line-height: 1.05;
    font-size: clamp(2rem, 4vw, 3.4rem);
}

.virtual-hero p {
    max-width: 760px;
    margin: 0.85rem 0 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 1.02rem;
    line-height: 1.5;
}

.virtual-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1.15rem;
}

.virtual-hero-actions .btn {
    border-radius: 8px;
    font-weight: 800;
}

.virtual-connection-card {
    display: grid;
    align-content: center;
    gap: 0.35rem;
    min-height: 180px;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.13);
    backdrop-filter: blur(8px);
}

.virtual-connection-icon {
    display: inline-flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 1.55rem;
}

.virtual-connection-card span {
    margin-top: 0.5rem;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.virtual-connection-card strong {
    font-size: 1.35rem;
    line-height: 1.15;
}

.virtual-connection-card small {
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.4;
}

.virtual-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.virtual-summary-grid article {
    position: relative;
    min-height: 104px;
    padding: 1rem;
    border: 1px solid rgba(15, 122, 59, 0.14);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}

.virtual-summary-grid article i {
    position: absolute;
    top: 1rem;
    right: 1rem;
    color: #0f7a3b;
    font-size: 1.45rem;
}

.virtual-summary-grid article span {
    display: block;
    color: #5d6b82;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
}

.virtual-summary-grid article strong {
    display: block;
    margin-top: 0.6rem;
    color: #12233d;
    font-size: 2rem;
    line-height: 1;
}

.virtual-summary-live {
    background: linear-gradient(180deg, #ffffff, #f3fbf8) !important;
}

.virtual-live-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    gap: 1rem;
    align-items: start;
}

.virtual-live-panel,
.virtual-route-panel {
    padding: 1rem;
    border: 1px solid rgba(15, 122, 59, 0.14);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}

.virtual-section-heading {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 0.85rem;
}

.virtual-section-heading span {
    color: #0f7a3b;
}

.virtual-section-heading h2 {
    margin: 0.15rem 0 0;
    color: #12233d;
    font-size: 1.15rem;
    font-weight: 900;
}

.virtual-section-heading > strong {
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    background: #eef8f1;
    color: #0f7a3b;
    font-size: 0.8rem;
}

.virtual-session-list {
    display: grid;
    gap: 0.15rem;
}

.virtual-session-row {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) auto;
    gap: 0.85rem;
    align-items: center;
    min-width: 0;
    padding: 0.75rem 0;
    border-top: 1px solid #e7edf4;
}

.virtual-session-row:first-child {
    border-top: 0;
    padding-top: 0;
}

.virtual-session-date {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border-radius: 8px;
    background: #eef8f1;
    color: #0f7a3b;
}

.virtual-session-date span {
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1;
}

.virtual-session-date small {
    font-size: 0.68rem;
    font-weight: 900;
}

.virtual-session-main {
    min-width: 0;
}

.virtual-session-main strong,
.virtual-session-main small,
.virtual-session-main span {
    display: block;
    overflow-wrap: anywhere;
}

.virtual-session-main strong {
    color: #12233d;
    font-weight: 900;
}

.virtual-session-main small {
    color: #5d6b82;
}

.virtual-session-main span {
    color: #0f7a3b;
    font-size: 0.84rem;
    font-weight: 700;
}

.virtual-route-steps {
    display: grid;
    gap: 0.65rem;
}

.virtual-route-steps div {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 0.65rem;
    align-items: center;
}

.virtual-route-steps i {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #eef8f1;
    color: #0f7a3b;
}

.virtual-route-steps span {
    color: #2d3c50;
    font-weight: 750;
    line-height: 1.25;
}

.virtual-route-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    margin-top: 1rem;
}

.virtual-route-stats div {
    padding: 0.75rem;
    border: 1px solid #e0ebf3;
    border-radius: 8px;
    background: #f8fbfd;
}

.virtual-route-stats strong {
    display: block;
    color: #12233d;
    font-size: 1.4rem;
    line-height: 1;
}

.virtual-route-stats span {
    display: block;
    margin-top: 0.25rem;
    color: #607086;
    font-size: 0.78rem;
    font-weight: 800;
}

.virtual-empty-state {
    display: grid;
    justify-items: center;
    gap: 0.35rem;
    padding: 1.5rem 1rem;
    border: 1px dashed #b9d8c6;
    border-radius: 8px;
    background: #f8fcf9;
    color: #607086;
    text-align: center;
}

.virtual-empty-state i {
    color: #0f7a3b;
    font-size: 1.8rem;
}

.virtual-empty-state strong {
    color: #12233d;
}

.virtual-video-row {
    --bs-table-bg: #f5fbf8;
}

.virtual-meeting-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.45rem;
    color: #0f7a3b;
    font-weight: 850;
    text-decoration: none;
}

.virtual-meeting-link:hover {
    color: #075f4b;
    text-decoration: underline;
}

.virtual-manage-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.2fr);
    gap: 1rem;
    align-items: start;
}

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

.virtual-wide {
    grid-column: 1 / -1;
}

.virtual-tab-content {
    padding: 0;
}

.virtual-muted-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 1100px) {
    .virtual-hero,
    .virtual-live-layout {
        grid-template-columns: 1fr;
    }

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

    .virtual-manage-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .virtual-hero {
        padding: 1rem;
    }

    .virtual-hero-actions,
    .virtual-hero-actions .btn {
        width: 100%;
    }

    .virtual-connection-card {
        min-height: auto;
    }

    .virtual-summary-grid {
        grid-template-columns: 1fr;
    }

    .virtual-section-heading {
        display: grid;
    }

    .virtual-session-row {
        grid-template-columns: 52px minmax(0, 1fr);
    }

    .virtual-session-row > .btn {
        grid-column: 1 / -1;
        width: 100%;
    }

    .virtual-session-date {
        width: 50px;
        height: 50px;
    }

    .virtual-route-stats {
        grid-template-columns: 1fr;
    }

    .virtual-form {
        grid-template-columns: 1fr;
    }

    .virtual-tab-content table thead {
        display: none;
    }

    .virtual-tab-content table,
    .virtual-tab-content tbody,
    .virtual-tab-content tr,
    .virtual-tab-content td {
        display: block;
        width: 100%;
    }

    .virtual-tab-content tr {
        border-bottom: 1px solid #d9e2ef;
        padding: 0.75rem 0;
    }

    .virtual-tab-content td {
        border: 0;
        padding: 0.45rem 0.75rem;
    }

    .virtual-tab-content td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 0.15rem;
        color: #667085;
        font-size: 0.72rem;
        font-weight: 800;
        text-transform: uppercase;
    }

    .virtual-tab-content td.text-end,
    .virtual-tab-content td.text-center {
        text-align: left !important;
    }
}

@media print {
    @page {
        size: A3 landscape;
        margin: 6mm;
    }

    body.ugel-calendar-view.comano-body,
    body.ugel-calendar-view.sidebar-collapsed.comano-body,
    body.ugel-calendar-view.sidebar-open.comano-body {
        display: block !important;
        grid-template-columns: none !important;
        width: auto !important;
        min-height: auto !important;
        background: #fff !important;
        overflow: visible !important;
    }

    body.ugel-calendar-view > .comano-main,
    body.ugel-calendar-view .content-wrapper {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    body.ugel-calendar-view .comano-footer {
        display: none !important;
    }

    .ugel-calendar-sheet {
        width: 100%;
        max-width: none;
        padding: 0;
        overflow: visible;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .ugel-calendar-meta-wrap,
    .ugel-calendar-matrix-wrap {
        overflow: visible;
    }

    .ugel-calendar-meta,
    .ugel-calendar-matrix {
        min-width: 0;
    }

    .ugel-calendar-matrix th,
    .ugel-calendar-matrix td {
        height: 20px;
    }

    .ugel-calendar-lower-grid {
        break-inside: avoid;
        grid-template-columns: 1fr 1fr;
    }
}

/* APP UGEL H · P.G. 3.3 · seguimiento de asistencia del personal docente */
.ugel-effective-hours-tracking {
    --tracking-orange: #f27a25;
    --tracking-blue: #4472c4;
    width: min(100%, 1780px);
    margin: 0 auto;
    padding: 8px 0 24px;
    color: #101828;
}

.ugel-effective-hours-tracking-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 24px;
    margin-bottom: 22px;
}

.ugel-effective-hours-tracking-header > div {
    text-align: center;
}

.ugel-effective-hours-tracking-header > div > span {
    display: block;
    margin-bottom: 4px;
    color: #667085;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.ugel-effective-hours-tracking-header h1 {
    margin: 0;
    color: var(--tracking-orange);
    font-family: Arial, sans-serif;
    font-size: clamp(1.65rem, 2.25vw, 2.45rem);
    font-weight: 800;
    line-height: 1.12;
}

.ugel-effective-hours-tracking-year label {
    display: grid;
    gap: 5px;
}

.ugel-effective-hours-tracking-year span {
    color: #475467;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.ugel-effective-hours-tracking-year select {
    min-width: 126px;
    height: 40px;
    padding: 0 34px 0 12px;
    border: 1px solid #d0d5dd;
    border-radius: 9px;
    background: #fff;
    color: #101828;
    font-weight: 800;
}

.ugel-effective-hours-tracking-grid {
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
        "nav ini sec"
        "nav pri consolidated";
    gap: 22px 18px;
    align-items: stretch;
}

.ugel-effective-hours-tracking-nav {
    grid-area: nav;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 28px;
    padding: 14px 0;
}

.ugel-effective-hours-tracking-nav > a {
    display: grid;
    justify-items: center;
    gap: 10px;
    color: var(--tracking-orange);
    text-decoration: none;
}

.ugel-effective-hours-tracking-nav > a i {
    font-size: 5.25rem;
    line-height: 1;
    filter: drop-shadow(0 2px 1px rgba(16, 24, 40, 0.12));
}

.ugel-effective-hours-tracking-nav > a strong {
    display: block;
    width: 100%;
    padding: 20px 14px;
    border-radius: 10px;
    background: var(--tracking-orange);
    box-shadow: 0 5px 9px rgba(16, 24, 40, 0.24);
    color: #fff;
    font-size: 1rem;
    text-align: center;
}

.ugel-effective-hours-tracking-nav > a:hover strong,
.ugel-effective-hours-tracking-nav > a:focus-visible strong {
    background: #db6415;
}

.ugel-effective-hours-tracking-source {
    display: grid;
    gap: 4px;
    padding: 16px;
    border: 1px solid #fed7aa;
    border-radius: 12px;
    background: #fff7ed;
    text-align: center;
}

.ugel-effective-hours-tracking-source span,
.ugel-effective-hours-tracking-source small {
    color: #9a3412;
    font-size: 0.68rem;
    font-weight: 700;
}

.ugel-effective-hours-tracking-source b {
    color: #c2410c;
    font-size: 1.8rem;
}

.ugel-effective-hours-tracking-card {
    min-width: 0;
    min-height: 340px;
    padding: 12px 12px 8px;
    border: 1px solid #d0d5dd;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.ugel-effective-hours-tracking-card.is-ini { grid-area: ini; }
.ugel-effective-hours-tracking-card.is-sec { grid-area: sec; }
.ugel-effective-hours-tracking-card.is-pri { grid-area: pri; }
.ugel-effective-hours-tracking-card.is-consolidated { grid-area: consolidated; }

.ugel-effective-hours-tracking-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 38px;
    padding: 0 8px 6px;
}

.ugel-effective-hours-tracking-card-heading h2 {
    margin: 0;
    color: #101828;
    font-family: Arial, sans-serif;
    font-size: 0.98rem;
    font-weight: 700;
    text-align: center;
}

.ugel-effective-hours-tracking-card-heading span {
    flex: 0 0 auto;
    padding: 4px 8px;
    border-radius: 999px;
    background: #eff4ff;
    color: #3538cd;
    font-size: 0.66rem;
    font-weight: 800;
}

.ugel-effective-hours-tracking-card.is-disabled .ugel-effective-hours-tracking-card-heading span {
    background: #f2f4f7;
    color: #667085;
}

.ugel-effective-hours-tracking-canvas {
    position: relative;
    height: 275px;
}

.ugel-effective-hours-tracking-canvas canvas {
    width: 100% !important;
    height: 100% !important;
}

.ugel-effective-hours-tracking-empty {
    position: absolute;
    inset: 42% 12px auto;
    z-index: 2;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    color: #667085;
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
}

@media (max-width: 1350px) {
    .ugel-effective-hours-tracking-grid {
        grid-template-columns: 230px minmax(0, 1fr) minmax(0, 1fr);
    }

    .ugel-effective-hours-tracking-card-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 1050px) {
    .ugel-effective-hours-tracking-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "nav nav"
            "ini sec"
            "pri consolidated";
    }

    .ugel-effective-hours-tracking-nav {
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
        padding: 0;
    }

    .ugel-effective-hours-tracking-nav > a {
        grid-template-columns: auto 1fr;
        width: min(100%, 390px);
    }

    .ugel-effective-hours-tracking-nav > a i {
        font-size: 3.2rem;
    }

    .ugel-effective-hours-tracking-nav > a strong {
        padding: 15px 12px;
    }
}

@media (max-width: 760px) {
    .ugel-effective-hours-tracking-header {
        grid-template-columns: 1fr;
    }

    .ugel-effective-hours-tracking-year {
        justify-self: center;
    }

    .ugel-effective-hours-tracking-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "nav"
            "ini"
            "sec"
            "pri"
            "consolidated";
    }

    .ugel-effective-hours-tracking-nav {
        align-items: stretch;
        flex-direction: column;
    }

    .ugel-effective-hours-tracking-card {
        min-height: 380px;
    }

    .ugel-effective-hours-tracking-canvas {
        height: 315px;
    }
}

/* APP UGEL H · P.G. 3.3 · tablero de horas efectivas */
.ugel-effective-hours-dashboard {
    width: min(100%, 1780px);
    margin: 0 auto;
    padding: 4px 0 24px;
    color: #101828;
}

.ugel-effective-hours-dashboard-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 20px;
    margin-bottom: 16px;
}

.ugel-effective-hours-dashboard-header > div {
    text-align: center;
}

.ugel-effective-hours-dashboard-header > div > span {
    display: block;
    color: #667085;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.07em;
}

.ugel-effective-hours-dashboard-header h1 {
    margin: 2px 0 0;
    color: #f27a25;
    font-family: Arial, sans-serif;
    font-size: clamp(1.7rem, 2.3vw, 2.5rem);
    font-weight: 800;
}

.ugel-effective-hours-dashboard-header form label {
    display: grid;
    gap: 4px;
}

.ugel-effective-hours-dashboard-header form span {
    color: #475467;
    font-size: 0.66rem;
    font-weight: 800;
}

.ugel-effective-hours-dashboard-header select {
    min-width: 120px;
    height: 38px;
    padding: 0 32px 0 11px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    background: #fff;
    color: #101828;
    font-weight: 800;
}

.ugel-effective-hours-dashboard-summary {
    display: grid;
    grid-template-columns: minmax(760px, 1fr) 280px 250px;
    align-items: center;
    gap: 18px;
    margin-bottom: 22px;
}

.ugel-effective-hours-dashboard-table-wrap {
    min-width: 0;
    overflow-x: auto;
}

.ugel-effective-hours-dashboard-table-wrap table,
.ugel-effective-hours-dashboard-progress-table table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-family: Arial, sans-serif;
    font-size: 0.68rem;
}

.ugel-effective-hours-dashboard-table-wrap th,
.ugel-effective-hours-dashboard-table-wrap td,
.ugel-effective-hours-dashboard-progress-table th,
.ugel-effective-hours-dashboard-progress-table td {
    padding: 5px 6px;
    border-bottom: 1px solid #e4e7ec;
    text-align: right;
    white-space: nowrap;
}

.ugel-effective-hours-dashboard-table-wrap thead th,
.ugel-effective-hours-dashboard-progress-table thead th {
    color: #344054;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.035em;
}

.ugel-effective-hours-dashboard-table-wrap th:first-child,
.ugel-effective-hours-dashboard-progress-table th:first-child {
    text-align: left;
}

.ugel-effective-hours-dashboard-table-wrap tbody th,
.ugel-effective-hours-dashboard-progress-table tbody th {
    color: #101828;
    font-weight: 800;
}

.ugel-effective-hours-dashboard-table-wrap tr.is-disabled,
.ugel-effective-hours-dashboard-progress-table tr.is-disabled {
    color: #98a2b3;
}

.ugel-effective-hours-dashboard-progress-table {
    padding: 9px;
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    background: #fff;
}

.ugel-effective-hours-dashboard-back {
    display: grid;
    justify-items: center;
    gap: 8px;
    color: #f27a25;
    text-decoration: none;
}

.ugel-effective-hours-dashboard-back i {
    font-size: 4rem;
    line-height: 1;
}

.ugel-effective-hours-dashboard-back strong {
    display: block;
    width: 100%;
    padding: 16px 12px;
    border-radius: 9px;
    background: #f27a25;
    box-shadow: 0 4px 8px rgba(16, 24, 40, 0.25);
    color: #fff;
    font-size: 0.86rem;
    text-align: center;
}

.ugel-effective-hours-dashboard-back:hover strong,
.ugel-effective-hours-dashboard-back:focus-visible strong {
    background: #db6415;
}

.ugel-effective-hours-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
    grid-template-rows: 205px 325px;
    grid-template-areas:
        "monthly donuts"
        "monthly annual";
    gap: 22px;
}

.ugel-effective-hours-dashboard-panel {
    min-width: 0;
    padding: 10px 12px 8px;
    border: 1px solid #d0d5dd;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.ugel-effective-hours-dashboard-panel > header {
    text-align: center;
}

.ugel-effective-hours-dashboard-panel > header h2 {
    margin: 0;
    color: #101828;
    font-family: Arial, sans-serif;
    font-size: 0.98rem;
    font-weight: 800;
}

.ugel-effective-hours-dashboard-panel > header span {
    display: block;
    margin-top: 2px;
    color: #667085;
    font-size: 0.68rem;
    font-weight: 600;
}

.ugel-effective-hours-dashboard-panel.is-monthly {
    grid-area: monthly;
}

.ugel-effective-hours-dashboard-panel.is-monthly > div {
    height: 475px;
}

.ugel-effective-hours-dashboard-donuts {
    grid-area: donuts;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.ugel-effective-hours-dashboard-panel.is-donut {
    min-height: 0;
    padding: 10px 8px 5px;
}

.ugel-effective-hours-dashboard-panel.is-donut > div {
    height: 132px;
}

.ugel-effective-hours-dashboard-panel.is-donut.is-disabled {
    background: #f9fafb;
}

.ugel-effective-hours-dashboard-panel.is-annual {
    grid-area: annual;
}

.ugel-effective-hours-dashboard-panel.is-annual > div {
    height: 270px;
}

.ugel-effective-hours-dashboard-panel canvas {
    width: 100% !important;
    height: 100% !important;
}

@media (max-width: 1450px) {
    .ugel-effective-hours-dashboard-summary {
        grid-template-columns: minmax(680px, 1fr) 250px 210px;
        gap: 12px;
    }

    .ugel-effective-hours-dashboard-summary table {
        font-size: 0.62rem;
    }
}

@media (max-width: 1180px) {
    .ugel-effective-hours-dashboard-summary {
        grid-template-columns: minmax(0, 1fr) 250px;
    }

    .ugel-effective-hours-dashboard-table-wrap {
        grid-column: 1 / -1;
    }

    .ugel-effective-hours-dashboard-back {
        grid-template-columns: auto 1fr;
    }

    .ugel-effective-hours-dashboard-back i {
        font-size: 3rem;
    }

    .ugel-effective-hours-dashboard-grid {
        grid-template-columns: 1fr;
        grid-template-rows: 520px 205px 325px;
        grid-template-areas:
            "monthly"
            "donuts"
            "annual";
    }
}

@media (max-width: 720px) {
    .ugel-effective-hours-dashboard-header {
        grid-template-columns: 1fr;
    }

    .ugel-effective-hours-dashboard-header form {
        justify-self: center;
    }

    .ugel-effective-hours-dashboard-summary {
        grid-template-columns: 1fr;
    }

    .ugel-effective-hours-dashboard-table-wrap,
    .ugel-effective-hours-dashboard-progress-table,
    .ugel-effective-hours-dashboard-back {
        grid-column: auto;
    }

    .ugel-effective-hours-dashboard-donuts {
        grid-template-columns: 1fr;
    }

    .ugel-effective-hours-dashboard-grid {
        grid-template-rows: 520px 600px 340px;
    }

    .ugel-effective-hours-dashboard-panel.is-donut > div {
        height: 130px;
    }
}

/* APP UGEL H · Compromiso de gestión 1 · Indicador de seguimiento 1 */
.ugel-indicator-11 {
    --indicator-gold: #ffc400;
    --indicator-gold-light: #ffd45a;
    --indicator-gold-dark: #c99000;
    box-sizing: border-box;
    width: 100%;
    min-height: 650px;
    padding: clamp(34px, 5vw, 72px) clamp(20px, 6vw, 90px);
    border: 1px solid #e4e7ec;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(16, 24, 40, 0.07);
}

.ugel-indicator-11-header {
    width: min(100%, 1120px);
    margin: 0 auto;
    text-align: center;
}

.ugel-indicator-11-header > span {
    display: block;
    margin-bottom: 5px;
    color: #8b6b00;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.11em;
}

.ugel-indicator-11-header h1 {
    margin: 0;
    color: var(--indicator-gold-dark);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(1.75rem, 3.2vw, 2.8rem);
    font-weight: 950;
    letter-spacing: 0.015em;
    line-height: 1.1;
}

.ugel-indicator-11-header p {
    margin: 28px 0 0;
    padding: 8px 10px;
    border: 2px solid var(--indicator-gold);
    color: #101828;
    font-size: clamp(0.92rem, 1.4vw, 1.1rem);
    font-weight: 650;
    line-height: 1.45;
    text-align: left;
}

.ugel-indicator-11-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(170px, 210px)) minmax(210px, 245px);
    align-items: end;
    justify-content: center;
    gap: clamp(22px, 3vw, 38px);
    margin-top: 30px;
}

.ugel-indicator-13 .ugel-indicator-11-options,
.ugel-indicator-14 .ugel-indicator-11-options {
    grid-template-columns: repeat(2, minmax(190px, 220px)) minmax(220px, 260px);
}

.ugel-indicator-11-level {
    box-sizing: border-box;
    display: grid;
    grid-template-rows: 1fr auto auto;
    place-items: center;
    min-height: 205px;
    padding: 18px 15px 12px;
    border: 1px solid #ffca1b;
    border-radius: 17px;
    background: linear-gradient(160deg, var(--indicator-gold-light) 0%, var(--indicator-gold) 70%, #e7ad00 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 5px 9px rgba(16, 24, 40, 0.28);
    color: #fff;
    text-align: center;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.ugel-indicator-11-level:hover,
.ugel-indicator-11-level:focus-visible {
    transform: translateY(-5px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 9px 16px rgba(16, 24, 40, 0.3);
}

.ugel-indicator-11-level i {
    font-size: 5.8rem;
    line-height: 1;
}

.ugel-indicator-11-level strong {
    display: block;
    width: 100%;
    padding: 11px 7px;
    border: 1px solid rgba(255, 213, 45, 0.9);
    border-radius: 10px;
    background: rgba(236, 177, 0, 0.3);
    color: #0b0f16;
    font-size: 1.05rem;
    font-weight: 900;
}

.ugel-indicator-11-level small {
    margin-top: 5px;
    color: #654b00;
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
}

.ugel-indicator-11-level.is-disabled {
    cursor: not-allowed;
    filter: grayscale(0.7);
    opacity: 0.48;
}

.ugel-indicator-11-back {
    display: grid;
    justify-items: center;
    align-self: center;
    gap: 9px;
    color: var(--indicator-gold);
    text-decoration: none;
}

.ugel-indicator-11-back i {
    font-size: 5.6rem;
    line-height: 1;
    filter: drop-shadow(0 2px 1px rgba(16, 24, 40, 0.1));
}

.ugel-indicator-11-back strong {
    display: block;
    width: 100%;
    padding: 17px 12px;
    border: 2px solid #111827;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 7px 0 #777, 0 9px 12px rgba(16, 24, 40, 0.2);
    color: #101828;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
}

.ugel-indicator-11-back:hover strong,
.ugel-indicator-11-back:focus-visible strong {
    background: #fffaf0;
}

@media (max-width: 1160px) {
    .ugel-indicator-11-options {
        grid-template-columns: repeat(3, minmax(170px, 210px));
    }

    .ugel-indicator-13 .ugel-indicator-11-options,
    .ugel-indicator-14 .ugel-indicator-11-options {
        grid-template-columns: repeat(2, minmax(180px, 220px));
    }

    .ugel-indicator-11-back {
        grid-column: 1 / -1;
        grid-template-columns: auto minmax(230px, 330px);
        margin-top: 10px;
    }

    .ugel-indicator-11-back i {
        font-size: 4rem;
    }
}

@media (max-width: 760px) {
    .ugel-indicator-11 {
        padding: 30px 16px;
    }

    .ugel-indicator-11-options {
        grid-template-columns: minmax(200px, 290px);
    }

    .ugel-indicator-13 .ugel-indicator-11-options,
    .ugel-indicator-14 .ugel-indicator-11-options {
        grid-template-columns: minmax(200px, 290px);
    }

    .ugel-indicator-11-back {
        grid-column: auto;
        grid-template-columns: 1fr;
    }

    .ugel-indicator-11-level {
        min-height: 190px;
    }
}

/* APP UGEL H · CG1 · I.S. 1.1 por nivel */
.ugel-indicator-11-results {
    --is11-gold: #ffb900;
    --is11-gold-dark: #d79000;
    box-sizing: border-box;
    width: 100%;
    min-height: 720px;
    padding: 8px;
    border: 1px solid #d0d5dd;
    background: #fff;
    color: #101828;
}

.ugel-indicator-11-results-header h1 {
    margin: 0;
    padding: 0 10px 20px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(1.55rem, 2.4vw, 2.25rem);
    font-weight: 950;
    line-height: 1.08;
    text-align: center;
}

.ugel-indicator-11-results-context {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 8px 10px;
    border: 2px solid var(--is11-gold);
    background: #fff5cf;
}

.ugel-indicator-11-results-context p {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 650;
    line-height: 1.35;
}

.ugel-indicator-11-results-context form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ugel-indicator-11-results-context label {
    color: #7a5700;
    font-size: 0.72rem;
    font-weight: 900;
}

.ugel-indicator-11-results-context select {
    min-width: 105px;
    padding: 6px 28px 6px 9px;
    border: 1px solid #d79000;
    border-radius: 5px;
    background: #fff;
    color: #101828;
    font-weight: 750;
}

.ugel-indicator-11-results-grid {
    display: grid;
    grid-template-columns: minmax(470px, 0.9fr) minmax(620px, 1.1fr) minmax(215px, 255px);
    align-items: stretch;
    gap: 16px;
    margin-top: 18px;
}

.ugel-indicator-11-results-table-panel,
.ugel-indicator-11-results-chart-panel,
.ugel-indicator-11-results-aside {
    min-width: 0;
}

.ugel-indicator-11-results-table-panel {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    border: 1px solid var(--is11-gold);
    background: #fff;
}

.ugel-indicator-11-meta-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 9px 12px;
    border-bottom: 1px solid #b7dfca;
    background: #edf9f2;
    color: #08783f;
    font-size: .78rem;
    font-weight: 700;
}

.ugel-indicator-11-meta-summary span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ugel-indicator-11-meta-summary small {
    color: #687386;
    font-size: .65rem;
    font-weight: 600;
    text-align: right;
}

.ugel-indicator-11-meta-cell,
.ugel-indicator-11-meta-heading {
    min-width: 104px;
}

.ugel-indicator-11-meta-heading {
    background: #078449 !important;
    color: #fff !important;
    white-space: nowrap;
}

.ugel-indicator-11-meta-cell strong,
.ugel-indicator-11-meta-cell span {
    display: block;
    font-size: .76rem;
    line-height: 1.1;
}

.ugel-indicator-11-meta-cell small {
    display: block;
    margin-top: 3px;
    font-size: .53rem;
    font-weight: 900;
    letter-spacing: .05em;
    line-height: 1;
    text-transform: uppercase;
}

.ugel-indicator-11-meta-cell.is-linked {
    background: #eaf8ef !important;
    color: #08783f;
}

.ugel-indicator-11-meta-cell.is-linked small {
    color: #0b8650;
}

.ugel-indicator-11-meta-cell.is-missing {
    background: #fff1f1 !important;
    color: #b42318;
}

.ugel-indicator-11-results-table-panel tbody tr:hover td.ugel-indicator-11-meta-cell.is-linked {
    background: #ddf4e6 !important;
}

.ugel-indicator-11-results-table-panel tbody tr:hover td.ugel-indicator-11-meta-cell.is-missing {
    background: #ffe5e5 !important;
}

.ugel-indicator-11-results-table-panel h2 {
    margin: 0;
    padding: 4px 10px;
    border-bottom: 1px solid var(--is11-gold);
    color: #ef7d32;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.35rem;
    font-weight: 900;
    text-align: center;
}

.ugel-indicator-11-results-table-wrap {
    max-height: 575px;
    overflow: auto;
}

.ugel-indicator-11-results-table-panel table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
}

.ugel-indicator-11-results-table-panel th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 5px 4px;
    border: 1px solid var(--is11-gold);
    background: #ffc400;
    color: #846300;
    font-size: 0.74rem;
    font-weight: 900;
    text-align: center;
}

.ugel-indicator-11-results-table-panel td {
    padding: 3px 5px;
    border: 1px solid var(--is11-gold);
    background: #fff;
    text-align: center;
    white-space: nowrap;
}

.ugel-indicator-11-results-table-panel td:first-child {
    max-width: 185px;
    color: #b47b00;
    font-style: italic;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mantiene visible el área al desplazar la matriz. La meta SIRGILA se ubica
   junto a la competencia para que sea visible desde el primer cuadro. */
.ugel-indicator-11-results-table-panel th:first-child,
.ugel-indicator-11-results-table-panel td:first-child {
    position: sticky;
    left: 0;
}

.ugel-indicator-11-results-table-panel th:first-child {
    z-index: 5;
    background: #ffc400;
}

.ugel-indicator-11-results-table-panel td:first-child {
    z-index: 3;
    background: #fff;
    box-shadow: 8px 0 12px -12px rgba(16, 24, 40, .55);
}

.ugel-indicator-11-results-table-panel tbody tr:hover td {
    background: #fff8df;
}

.ugel-indicator-11-results-table-panel footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 8px;
    border-top: 1px solid var(--is11-gold);
    background: #fff8df;
    color: #7a5700;
    font-size: 0.67rem;
}

.ugel-indicator-11-results-chart-panel {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 625px;
    padding: 12px 12px 8px;
    border: 2px solid #f0c66a;
    border-radius: 16px;
    background: #fff;
}

.ugel-indicator-11-results-chart-panel > header {
    text-align: center;
}

.ugel-indicator-11-results-chart-panel h2 {
    max-width: 700px;
    margin: 0 auto;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.35;
}

.ugel-indicator-11-results-chart-panel header p {
    margin: 3px 0 0;
    color: #667085;
    font-size: 0.68rem;
    font-weight: 650;
}

.ugel-indicator-11-results-chart-scroll {
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
}

.ugel-indicator-11-results-chart-frame {
    height: 535px;
    min-width: 760px;
}

.ugel-indicator-11-results-chart-frame canvas {
    width: 100% !important;
    height: 100% !important;
}

.ugel-indicator-11-results-empty {
    position: absolute;
    inset: 105px 25px 45px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.94);
    color: #667085;
    text-align: center;
}

.ugel-indicator-11-results-empty i {
    font-size: 3rem;
}

.ugel-indicator-11-results-aside {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ugel-indicator-11-results-back {
    display: grid;
    justify-items: center;
    gap: 6px;
    color: var(--is11-gold);
    text-decoration: none;
}

.ugel-indicator-11-results-back i {
    font-size: 4.5rem;
    line-height: 1;
}

.ugel-indicator-11-results-back strong {
    display: block;
    width: min(100%, 190px);
    padding: 14px 12px;
    border: 1px solid var(--is11-gold);
    border-radius: 12px;
    background: #ffe69a;
    box-shadow: 0 3px 7px rgba(16, 24, 40, 0.18);
    color: #101828;
    font-size: 0.78rem;
    text-align: center;
}

.ugel-indicator-11-results-back:hover strong,
.ugel-indicator-11-results-back:focus-visible strong {
    background: #ffd864;
}

.ugel-indicator-11-area-filter {
    padding: 7px;
    border: 1px solid var(--is11-gold);
    background: #fff;
}

.ugel-indicator-11-area-filter header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 6px;
    color: #101828;
    font-size: 0.78rem;
}

.ugel-indicator-11-area-filter header button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 5px;
    border: 0;
    background: transparent;
    color: #667085;
    font-size: 0.65rem;
    font-weight: 750;
}

.ugel-indicator-11-area-filter > div {
    display: grid;
    gap: 5px;
}

.ugel-indicator-11-area-option {
    width: 100%;
    padding: 6px 9px;
    border: 1px solid #e4e7ec;
    border-radius: 5px;
    background: #f2f4f7;
    color: #344054;
    font-size: 0.72rem;
    line-height: 1.2;
    text-align: left;
}

.ugel-indicator-11-area-option.is-selected {
    border-color: #eda900;
    background: #ffbd0a;
    color: #fff;
}

.ugel-indicator-11-area-option:focus-visible {
    outline: 3px solid rgba(255, 185, 0, 0.3);
    outline-offset: 1px;
}

.ugel-indicator-11-results-source {
    display: grid;
    gap: 3px;
    margin-top: auto;
    padding: 9px;
    border: 1px solid #f0c66a;
    border-radius: 8px;
    background: #fffbeb;
    color: #475467;
    font-size: 0.66rem;
}

.ugel-indicator-11-results-source strong {
    color: #7a5700;
    font-size: 0.72rem;
    text-transform: uppercase;
}

.ugel-indicator-11-results-source em {
    margin-top: 4px;
    color: #7a5700;
    line-height: 1.3;
}

@media (max-width: 1500px) {
    .ugel-indicator-11-results-grid {
        grid-template-columns: minmax(430px, 0.8fr) minmax(560px, 1.2fr) 220px;
        gap: 10px;
    }
}

@media (max-width: 1380px) {
    .ugel-indicator-11-results-grid {
        grid-template-columns: minmax(410px, 0.9fr) minmax(520px, 1.1fr);
    }

    .ugel-indicator-11-results-aside {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 210px minmax(0, 1fr) 250px;
        align-items: center;
    }

    .ugel-indicator-11-area-filter > div {
        grid-template-columns: repeat(4, minmax(120px, 1fr));
    }
}

@media (max-width: 900px) {
    .ugel-indicator-11-results-grid {
        grid-template-columns: 1fr;
    }

    .ugel-indicator-11-results-aside {
        grid-column: auto;
        grid-template-columns: 1fr;
    }

    .ugel-indicator-11-results-chart-panel {
        min-height: 570px;
    }

    .ugel-indicator-11-results-chart-frame {
        height: 480px;
    }
}

@media (max-width: 620px) {
    .ugel-indicator-11-results-context {
        grid-template-columns: 1fr;
    }

    .ugel-indicator-11-results-context form {
        justify-content: flex-end;
    }

    .ugel-indicator-11-results-table-panel table {
        min-width: 530px;
    }

    .ugel-indicator-11-area-filter > div {
        grid-template-columns: 1fr 1fr;
    }
}

.ugel-indicator-11-analysis {
    display: grid;
    gap: 18px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e4e7ec;
}

.ugel-indicator-11-analysis > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 13px 16px;
    border: 1px solid #f0c66a;
    border-radius: 10px;
    background: #fff8df;
}

.ugel-indicator-11-analysis > header span {
    display: block;
    color: #9a6700;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.ugel-indicator-11-analysis > header h2 {
    margin: 2px 0 0;
    color: #101828;
    font-size: 1.1rem;
    font-weight: 900;
}

.ugel-indicator-11-analysis > header p {
    margin: 3px 0 0;
    color: #667085;
    font-size: 0.72rem;
}

.ugel-indicator-11-analysis-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.ugel-indicator-11-analysis > header button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 125px;
    padding: 10px 17px;
    border: 1px solid #bc7f00;
    border-radius: 8px;
    background: #ffbd0a;
    box-shadow: 0 3px 7px rgba(16, 24, 40, 0.15);
    color: #503700;
    font-size: 0.82rem;
    font-weight: 900;
    text-transform: uppercase;
}

.ugel-indicator-11-analysis > header button:hover,
.ugel-indicator-11-analysis > header button:focus-visible {
    background: #ffd154;
    transform: translateY(-1px);
}

.ugel-indicator-11-analysis > header button.is-save {
    border-color: #18794e;
    background: #238b5d;
    color: #fff;
}

.ugel-indicator-11-analysis > header button.is-save:hover,
.ugel-indicator-11-analysis > header button.is-save:focus-visible {
    background: #176b47;
}

.ugel-indicator-11-analysis-block {
    display: grid;
    border: 1px solid #e9b21a;
    background: #fff4cc;
}

.ugel-indicator-11-analysis-block label {
    padding: 5px 8px;
    border-bottom: 1px solid #e9b21a;
    background: #fff8df;
    color: #8a6200;
    font-size: 0.72rem;
    font-weight: 900;
}

.ugel-indicator-11-analysis-block textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 215px;
    padding: 12px;
    border: 0;
    border-radius: 0;
    outline: 0;
    resize: vertical;
    background: #fff4cc;
    color: #172033;
    font-family: Arial, sans-serif;
    font-size: 0.8rem;
    line-height: 1.5;
}

.ugel-indicator-11-analysis-block textarea:focus {
    box-shadow: inset 0 0 0 3px rgba(255, 185, 0, 0.3);
}

.ugel-indicator-11-analysis-block.is-actions {
    border-color: #4a8f73;
}

.ugel-indicator-11-analysis-block.is-actions label {
    border-bottom-color: #4a8f73;
    color: #29644e;
}

.ugel-indicator-11-analysis-status {
    min-height: 1.2em;
    margin: -10px 2px 0;
    color: #667085;
    font-size: 0.7rem;
    font-weight: 650;
    text-align: right;
}

@media (max-width: 700px) {
    .ugel-indicator-11-analysis > header {
        align-items: stretch;
        flex-direction: column;
    }

    .ugel-indicator-11-analysis > header button {
        align-self: flex-end;
    }

    .ugel-indicator-11-analysis-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .ugel-indicator-11-analysis-block textarea {
        min-height: 240px;
    }
}

/* Distribución con el filtro sobre el gráfico: Secundaria y el I.S. 1.2 */
@media (min-width: 1381px) {
    .ugel-indicator-11-results-grid.has-chart-top-filter {
        grid-template-columns: minmax(470px, 0.82fr) minmax(640px, 1.18fr) minmax(190px, 220px);
        grid-template-rows: auto minmax(0, 1fr);
        align-items: stretch;
    }

    .ugel-indicator-11-results-grid.has-chart-top-filter .ugel-indicator-11-results-table-panel {
        grid-column: 1;
        grid-row: 1 / 3;
    }

    .ugel-indicator-11-results-grid.has-chart-top-filter .ugel-indicator-11-area-filter.is-chart-top-position {
        grid-column: 2;
        grid-row: 1;
    }

    .ugel-indicator-11-results-grid.has-chart-top-filter .ugel-indicator-11-results-chart-panel {
        grid-column: 2;
        grid-row: 2;
        min-height: 520px;
    }

    .ugel-indicator-11-results-grid.has-chart-top-filter .ugel-indicator-11-results-chart-frame {
        height: 430px;
    }

    .ugel-indicator-11-results-grid.has-chart-top-filter .ugel-indicator-11-results-aside {
        grid-column: 3;
        grid-row: 1 / 3;
    }
}

.ugel-indicator-11-results-grid.has-chart-top-filter .ugel-indicator-11-area-filter.is-chart-top-position > div {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
}

.ugel-indicator-11-results.is-secondary .ugel-indicator-11-results-table-panel h2 {
    color: #ef7d32;
    text-align: left;
}

.ugel-indicator-11-results.is-secondary .ugel-indicator-11-results-table-panel td:first-child {
    max-width: 220px;
}

@media (min-width: 901px) and (max-width: 1380px) {
    .ugel-indicator-11-results-grid.has-chart-top-filter {
        grid-template-columns: minmax(410px, 0.9fr) minmax(520px, 1.1fr);
        grid-template-rows: auto minmax(0, 1fr) auto;
    }

    .ugel-indicator-11-results-grid.has-chart-top-filter .ugel-indicator-11-results-table-panel {
        grid-column: 1;
        grid-row: 1 / 3;
    }

    .ugel-indicator-11-results-grid.has-chart-top-filter .ugel-indicator-11-area-filter.is-chart-top-position {
        grid-column: 2;
        grid-row: 1;
    }

    .ugel-indicator-11-results-grid.has-chart-top-filter .ugel-indicator-11-results-chart-panel {
        grid-column: 2;
        grid-row: 2;
        min-height: 520px;
    }

    .ugel-indicator-11-results-grid.has-chart-top-filter .ugel-indicator-11-results-chart-frame {
        height: 430px;
    }

    .ugel-indicator-11-results-grid.has-chart-top-filter .ugel-indicator-11-results-aside {
        grid-column: 1 / -1;
        grid-row: 3;
    }
}

@media (max-width: 900px) {
    .ugel-indicator-11-results-grid.has-chart-top-filter .ugel-indicator-11-results-table-panel,
    .ugel-indicator-11-results-grid.has-chart-top-filter .ugel-indicator-11-area-filter.is-chart-top-position,
    .ugel-indicator-11-results-grid.has-chart-top-filter .ugel-indicator-11-results-chart-panel,
    .ugel-indicator-11-results-grid.has-chart-top-filter .ugel-indicator-11-results-aside {
        grid-column: auto;
        grid-row: auto;
    }

    .ugel-indicator-11-results-grid.has-chart-top-filter .ugel-indicator-11-area-filter.is-chart-top-position > div {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }
}

/* Compromiso 5: el identificador CG usa solo el ancho necesario. */
.ugel-pg51-page .ugel-pg36-table th:first-child,
.ugel-pg51-page .ugel-pg36-table td.is-cg {
    width: 38px;
    padding-left: 3px;
    padding-right: 3px;
}

.ugel-pg51-page .ugel-pg36-table col.is-cg-column {
    width: 38px;
}

.ugel-pg51-page .ugel-pg36-table col.is-practice-column {
    width: 23%;
}

.ugel-pg51-page .ugel-pg36-table col.is-answer-column {
    width: 78px;
}

.ugel-pg51-page .ugel-pg36-table th {
    width: auto;
}

/* P.G. 5.6 conserva el tema naranja, con la distribucion amplia de P.G. 4.5. */
.ugel-pg56-organized .ugel-pg36-progress {
    grid-template-columns: 27% 23% minmax(260px, 1fr);
}

.ugel-pg56-organized .ugel-pg36-table {
    min-width: 1180px;
    font-size: .8rem;
}

.ugel-pg56-organized .ugel-pg36-table col.is-cg-column,
.ugel-pg56-organized .ugel-pg36-table col.is-practice-column {
    width: 22%;
}

.ugel-pg56-organized .ugel-pg36-table col:nth-child(3),
.ugel-pg56-organized .ugel-pg36-table col:nth-child(5),
.ugel-pg56-organized .ugel-pg36-table col.is-answer-column {
    width: 14%;
}

.ugel-pg56-organized .ugel-pg36-table th:first-child,
.ugel-pg56-organized .ugel-pg36-table td.is-cg {
    width: auto;
    padding-left: 8px;
    padding-right: 8px;
}

.ugel-pg56-organized .ugel-pg36-table tbody tr {
    min-height: 96px;
}

.ugel-pg56-organized .ugel-pg36-table tbody td {
    height: 96px;
    padding: 10px 8px;
    line-height: 1.45;
}

.ugel-pg56-organized .ugel-pg36-table .is-cg,
.ugel-pg56-organized .ugel-pg36-table .is-practice {
    vertical-align: top;
    padding-top: 14px;
}

.ugel-pg56-organized .ugel-pg36-table .is-answer select {
    min-height: 52px;
    font-size: .9rem;
}

@media (max-width: 1100px) {
    .ugel-pg56-organized .ugel-pg36-progress {
        grid-template-columns: 1fr;
    }
}

/* Agenda pedagógica de APP UGEL H */
.ugel-agenda-page{--agenda-blue:#386dbd;width:100%;padding:14px;border:1px solid #c9d5e8;border-radius:14px;background:#fff;color:#101827;box-shadow:0 12px 34px rgba(31,69,126,.1)}
.ugel-agenda-heading{display:flex;align-items:center;justify-content:center;gap:28px;min-height:105px;padding:12px 24px;border-radius:10px 10px 0 0;background:#e5e7eb;text-align:center}
.ugel-agenda-heading-copy{flex:1}.ugel-agenda-heading-copy>span{display:block;color:#315f9c;font-size:.72rem;font-weight:900;letter-spacing:.12em}.ugel-agenda-heading h1{margin:1px 0 2px;font-family:Georgia,'Times New Roman',serif;font-size:clamp(2rem,4vw,3.35rem);line-height:1}.ugel-agenda-heading p{margin:6px 0 0;color:#526277;font-size:.85rem}
.ugel-agenda-home{display:flex;flex:0 0 150px;flex-direction:column;align-items:center;gap:5px;color:#111;text-decoration:none}.ugel-agenda-home i{color:#9ca3af;font-size:3.9rem;line-height:.9}.ugel-agenda-home span{width:100%;padding:9px;border:1px solid #222;border-radius:7px;background:linear-gradient(#fff,#aaa);font-size:.66rem;font-weight:900;box-shadow:0 3px 0 #555}
.ugel-agenda-period{display:flex;flex-wrap:wrap;align-items:end;gap:12px;margin:12px 0;padding:12px 14px;border:1px solid #bed0ea;border-radius:9px;background:#f4f7fc}.ugel-agenda-period label{display:grid;gap:4px}.ugel-agenda-period label span{color:#244f89;font-size:.7rem;font-weight:900}.ugel-agenda-period select{min-width:150px;min-height:40px;padding:6px 32px 6px 9px;border:1px solid #91a9cf;border-radius:6px;background:#fff;font-weight:800}.ugel-agenda-period button{min-height:40px;padding:7px 13px;border:1px solid #285e9c;border-radius:6px;background:#356eb0;color:#fff;font-weight:850}.ugel-agenda-period-note{display:flex;align-items:center;gap:7px;margin-left:auto;padding:9px 12px;border-radius:999px;background:#e6eef9;color:#315f9c;font-size:.78rem}.ugel-agenda-period-note i{font-size:1.1rem}
.ugel-agenda-institution{display:flex;align-items:stretch;gap:14px;margin-bottom:12px}.ugel-agenda-institution dl{display:grid;flex:1;grid-template-columns:repeat(3,minmax(180px,1fr));margin:0;border:1px solid #d1d5db}.ugel-agenda-institution dl div{border-right:1px solid #d1d5db}.ugel-agenda-institution dl div:last-child{border-right:0}.ugel-agenda-institution dt{padding:4px 7px;background:#d7d9dc;font-size:.67rem}.ugel-agenda-institution dd{min-height:30px;margin:0;padding:6px 8px;background:#f8fafc;font-size:.76rem;font-weight:750}.ugel-agenda-summary{display:grid;grid-template-columns:repeat(3,minmax(110px,1fr));border:1px solid #c4d1e4}.ugel-agenda-summary span{display:grid;min-width:120px;place-items:center;padding:6px 9px;border-right:1px solid #c4d1e4;color:#526277;text-align:center;font-size:.67rem}.ugel-agenda-summary span:last-child{border-right:0}.ugel-agenda-summary b{display:block;color:#264d80;font-size:.85rem}
.ugel-agenda-filters{display:grid;grid-template-columns:1.05fr 1.18fr 1.35fr 1fr auto;gap:12px;align-items:stretch;margin:0 0 12px}.ugel-agenda-filters fieldset{min-width:0;margin:0;padding:6px;border:1px solid #4778c6;background:#fff}.ugel-agenda-filters legend{width:100%;padding:0 3px;color:#102a52;font-size:.72rem;font-weight:900}.ugel-agenda-filters fieldset>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;max-height:108px;overflow:auto}.ugel-agenda-filters fieldset button{min-width:0;padding:5px 7px;overflow:hidden;border:0;border-radius:3px;background:#b9bec6;color:#172033;text-align:left;text-overflow:ellipsis;white-space:nowrap;font-size:.68rem}.ugel-agenda-filters fieldset button[aria-pressed=true]{background:#4476c4;color:#fff}.ugel-agenda-clear{align-self:center;min-height:42px;padding:7px 10px;border:1px solid #8c98aa;border-radius:6px;background:#fff;color:#34445b;font-weight:800}
.ugel-agenda-table-wrap{position:relative;max-height:none;overflow-x:auto;overflow-y:visible;border:1px solid var(--agenda-blue)}.ugel-agenda-table{width:max-content;min-width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:.69rem}.ugel-agenda-table th,.ugel-agenda-table td{padding:5px;border-right:1px solid var(--agenda-blue);border-bottom:1px solid var(--agenda-blue);vertical-align:middle}.ugel-agenda-table thead{position:sticky;z-index:8;top:0}.ugel-agenda-table thead th{background:#3f72bd;color:#fff;text-align:center;font-weight:900}.ugel-agenda-table thead tr:first-child th{height:54px}.ugel-agenda-table th:nth-child(1),.ugel-agenda-table td:nth-child(1){width:58px;min-width:58px;text-align:center}.ugel-agenda-table th:nth-child(2),.ugel-agenda-table td:nth-child(2){width:108px;min-width:108px}.ugel-agenda-table th:nth-child(3),.ugel-agenda-table td:nth-child(3){width:58px;min-width:58px;text-align:center}.ugel-agenda-table th:nth-child(4),.ugel-agenda-table td:nth-child(4){width:180px;min-width:180px}.ugel-agenda-table th:nth-child(5),.ugel-agenda-table td:nth-child(5){width:230px;min-width:230px}.ugel-agenda-table th:nth-child(6),.ugel-agenda-table td:nth-child(6){width:185px;min-width:185px}.ugel-agenda-table th:nth-child(7),.ugel-agenda-table td:nth-child(7){width:125px;min-width:125px}.ugel-agenda-table th:nth-child(8),.ugel-agenda-table td:nth-child(8){width:110px;min-width:110px}.ugel-agenda-table th:nth-child(9),.ugel-agenda-table td:nth-child(9),.ugel-agenda-table th:nth-child(10),.ugel-agenda-table td:nth-child(10){width:72px;min-width:72px;text-align:center}.ugel-agenda-table th:nth-child(11),.ugel-agenda-table td:nth-child(11){width:48px;min-width:48px;text-align:center}.ugel-agenda-table th:nth-child(12),.ugel-agenda-table td:nth-child(12){width:105px;min-width:105px;text-align:center}.ugel-agenda-table th:nth-child(13),.ugel-agenda-table td:nth-child(13){width:85px;min-width:85px}.ugel-agenda-table tbody tr:nth-child(even)>td:not(.ugel-agenda-day-cell){background:#f6f8fc}.ugel-agenda-table tbody td{height:68px;background:#fff;line-height:1.35}.ugel-agenda-table tbody tr:hover>td:not(.ugel-agenda-day-cell){background:#eaf1fc}
.ugel-agenda-timeline-title{background:#315d9d!important}.ugel-agenda-days{top:54px}.ugel-agenda-days>th:first-child{height:58px;background:#e8edf5!important}.ugel-agenda-days th:not(:first-child){width:28px;min-width:28px;height:58px;padding:0;background:#f7f9fc;color:#1e3658}.ugel-agenda-days th span{display:block;transform:rotate(-90deg);font-size:.55rem}.ugel-agenda-days th small{position:absolute;bottom:1px;display:block;width:28px;font-size:.5rem}.ugel-agenda-days th.is-weekend{background:repeating-linear-gradient(135deg,#d5d9df,#d5d9df 2px,#fff 2px,#fff 4px)!important}.ugel-agenda-day-cell{width:28px;min-width:28px;padding:0!important;background:#fff}.ugel-agenda-day-cell.is-weekend{background:repeating-linear-gradient(135deg,#d5d9df,#d5d9df 2px,#fff 2px,#fff 4px)}.ugel-agenda-day-cell.is-active{border-top:6px solid #5c86c8;border-bottom:6px solid #5c86c8;background:#8daedf}.ugel-agenda-day-cell.is-active.is-complete{border-color:#2e9b63;background:#71c695}.ugel-agenda-day-cell.is-active.is-progress{border-color:#d99922;background:#f1c261}.ugel-agenda-day-cell.is-active.is-upcoming{border-color:#8a62b9;background:#bea6dc}
.ugel-agenda-status{display:inline-block;padding:4px 6px;border-radius:999px;font-size:.58rem;font-weight:900}.ugel-agenda-status.is-complete{background:#dcf4e7;color:#12693c}.ugel-agenda-status.is-progress{background:#fff0ce;color:#8a5600}.ugel-agenda-status.is-upcoming{background:#eee7f7;color:#65418c}.ugel-agenda-progress{position:relative;height:30px;overflow:hidden;border:1px solid #8ca7cf;border-radius:4px;background:#edf3fb}.ugel-agenda-progress i{position:absolute;inset:0 auto 0 0;background:#76a3df}.ugel-agenda-progress b{position:relative;z-index:1;display:grid;height:100%;place-items:center}.ugel-agenda-empty{display:flex;align-items:center;justify-content:center;gap:9px;min-height:130px;color:#64748b}.ugel-agenda-empty i{font-size:1.8rem}
@media(max-width:1100px){.ugel-agenda-heading{align-items:stretch;flex-direction:column}.ugel-agenda-home{flex-basis:auto;flex-direction:row;justify-content:center}.ugel-agenda-home span{width:auto}.ugel-agenda-institution{flex-direction:column}.ugel-agenda-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.ugel-agenda-clear{align-self:stretch}.ugel-agenda-period-note{margin-left:0}}
@media(max-width:720px){.ugel-agenda-page{padding:8px}.ugel-agenda-heading h1{font-size:2rem}.ugel-agenda-institution dl,.ugel-agenda-summary,.ugel-agenda-filters{grid-template-columns:1fr}.ugel-agenda-institution dl div{border-right:0;border-bottom:1px solid #d1d5db}.ugel-agenda-period>*{width:100%}.ugel-agenda-period select,.ugel-agenda-period button{width:100%}}

/* Ajuste compacto según la matriz institucional de la agenda. */
.ugel-agenda-page{padding:6px;border-radius:0;background-color:#fff;background-image:linear-gradient(#e9ecef 1px,transparent 1px),linear-gradient(90deg,#e9ecef 1px,transparent 1px);background-size:34px 23px}
.ugel-agenda-heading{min-height:105px;padding:6px 25%;border-radius:0;background:#dcdcdc}.ugel-agenda-heading-copy{min-width:0}.ugel-agenda-heading h1{font-family:Arial,Helvetica,sans-serif;font-size:clamp(2rem,3vw,3rem);letter-spacing:.03em}.ugel-agenda-home{flex:0 0 135px}.ugel-agenda-home i{color:#aaa;font-size:3.8rem}.ugel-agenda-home span{padding:8px;background:linear-gradient(#f9f9f9,#8d8d8d);font-size:.65rem}
.ugel-agenda-control-grid{display:grid;grid-template-columns:355px minmax(760px,1fr) 355px;gap:8px;min-height:142px;margin:0 0 8px;background:rgba(255,255,255,.7)}
.ugel-agenda-control-grid .ugel-agenda-institution{display:block;margin:0;background:transparent}.ugel-agenda-control-grid .ugel-agenda-institution dl{display:grid;grid-template-columns:1fr;margin:0;border:0}.ugel-agenda-control-grid .ugel-agenda-institution dl div{border:0}.ugel-agenda-control-grid .ugel-agenda-institution dt{padding:3px 4px;background:transparent;color:#111;font-size:.62rem;text-decoration:underline}.ugel-agenda-control-grid .ugel-agenda-institution dd{min-height:22px;padding:3px 5px;background:#d6d6d6;color:#111;font-size:.68rem}
.ugel-agenda-control-grid .ugel-agenda-period{display:grid;grid-template-columns:1fr 1fr 34px;gap:4px;margin:4px 0 0;padding:3px;border:0;border-radius:0;background:#fff}.ugel-agenda-control-grid .ugel-agenda-period label{gap:1px}.ugel-agenda-control-grid .ugel-agenda-period label span{font-size:.56rem}.ugel-agenda-control-grid .ugel-agenda-period select{min-width:0;min-height:27px;padding:2px 20px 2px 4px;border-radius:0;font-size:.66rem}.ugel-agenda-control-grid .ugel-agenda-period button{min-height:27px;padding:2px;border-radius:0}
.ugel-agenda-control-grid .ugel-agenda-filters{position:relative;display:grid;grid-template-columns:1fr 1.15fr 1.45fr 1.55fr;gap:8px;margin:0}.ugel-agenda-control-grid .ugel-agenda-filters fieldset{height:142px;padding:4px}.ugel-agenda-control-grid .ugel-agenda-filters fieldset>div{max-height:112px}.ugel-agenda-control-grid .ugel-agenda-filters fieldset button{padding:3px 6px;font-size:.62rem}.ugel-agenda-control-grid .ugel-agenda-clear{position:absolute;right:4px;top:-3px;min-height:19px;padding:1px 6px;border:0;background:transparent;font-size:.55rem}
.ugel-agenda-legend{display:flex;flex-direction:column;justify-content:center;padding:8px 6px;background:rgba(255,255,255,.82);font-size:.66rem}.ugel-agenda-legend>div{display:flex;align-items:center;gap:5px;line-height:1.35}.ugel-agenda-legend i{display:block;width:18px;height:14px;border:1px solid #c7c7c7}.ugel-agenda-legend .is-holiday{background:repeating-linear-gradient(135deg,#ff3b3b,#ff3b3b 2px,#fff 2px,#fff 4px)}.ugel-agenda-legend .is-sunday{background:repeating-linear-gradient(135deg,#222,#222 1px,#fff 1px,#fff 3px)}.ugel-agenda-legend .is-management{background:#b9c0c8}.ugel-agenda-legend .is-achievement{background:#ffe76e}.ugel-agenda-legend .is-activity{background:#456fbb}.ugel-agenda-legend p{margin:6px 0 0;padding:5px;background:#f1f4f8;color:#354a68;text-align:center;font-size:.61rem}
.ugel-agenda-table-wrap{max-height:none;background:#fff}.ugel-agenda-table tbody td{height:68px}.ugel-agenda-days th.is-holiday,.ugel-agenda-day-cell.is-holiday{background:repeating-linear-gradient(135deg,#ff4242,#ff4242 2px,#fff 2px,#fff 4px)!important}.ugel-agenda-day-cell.is-holiday.is-active{border-top-color:#e62525;border-bottom-color:#e62525}
@media(max-width:1450px){.ugel-agenda-heading{padding-left:18%;padding-right:18%}.ugel-agenda-control-grid{grid-template-columns:300px minmax(680px,1fr) 300px}}
@media(max-width:1100px){.ugel-agenda-heading{padding:12px}.ugel-agenda-control-grid{grid-template-columns:1fr}.ugel-agenda-control-grid .ugel-agenda-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.ugel-agenda-control-grid .ugel-agenda-clear{position:static;margin:0}.ugel-agenda-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px}.ugel-agenda-legend p{grid-column:1/-1}.ugel-agenda-table-wrap{max-height:none}}
@media(max-width:720px){.ugel-agenda-control-grid .ugel-agenda-filters{grid-template-columns:1fr}.ugel-agenda-control-grid .ugel-agenda-filters fieldset{height:auto}.ugel-agenda-control-grid .ugel-agenda-filters fieldset>div{max-height:130px}.ugel-agenda-legend{grid-template-columns:1fr}}

.ugel-agenda-filters button[hidden]{display:none}.ugel-agenda-status.is-empty{display:none}.ugel-agenda-day-cell.is-active,.ugel-agenda-day-cell.is-active.is-complete,.ugel-agenda-day-cell.is-active.is-progress,.ugel-agenda-day-cell.is-active.is-upcoming,.ugel-agenda-day-cell.is-active.is-empty{border-top-color:#294f8b;border-bottom-color:#294f8b;background:#315b96}

.ugel-pg52-page .ugel-pg52-table tbody tr {
    min-height: 62px;
}
/* Metas académicas SIRGILA visibles en APP UGEL H */
.ugel-academic-goals {
    margin-top: 24px;
    padding: 22px;
    border: 1px solid #b9d7cc;
    border-radius: 18px;
    background: linear-gradient(145deg, #fff 0%, #f2fbf7 100%);
    box-shadow: 0 14px 34px rgba(21, 91, 68, .09);
}

.ugel-academic-goals__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

.ugel-academic-goals__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    color: #08744f;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ugel-academic-goals__header h2 {
    margin: 0;
    color: #0b2e50;
    font-size: clamp(1.35rem, 2vw, 2rem);
}

.ugel-academic-goals__header p {
    margin: 6px 0 0;
    color: #53677a;
}

.ugel-academic-goals__source {
    display: flex;
    min-width: 250px;
    align-items: center;
    gap: 10px;
    padding: 10px 13px;
    border: 1px solid #b8dccf;
    border-radius: 12px;
    background: #eaf8f2;
    color: #145b45;
    font-size: .82rem;
}

.ugel-academic-goals__source i {
    font-size: 1.3rem;
}

.ugel-academic-goals__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 15px;
    padding: 12px;
    border: 1px solid #d8e7e1;
    border-radius: 13px;
    background: #fff;
}

.ugel-academic-goals__year-form {
    display: flex;
    align-items: flex-end;
    gap: 9px;
}

.ugel-academic-goals__year-form label {
    display: grid;
    gap: 4px;
    color: #294c65;
    font-size: .74rem;
    font-weight: 800;
}

.ugel-academic-goals__year-form select {
    min-width: 130px;
    min-height: 39px;
    padding: 6px 30px 6px 10px;
    border: 1px solid #acc8be;
    border-radius: 8px;
    background: #fff;
    color: #153a52;
    font-weight: 800;
}

.ugel-academic-goals__year-form button,
.ugel-academic-goals__manage {
    display: inline-flex;
    min-height: 39px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 13px;
    border: 1px solid #0a7a54;
    border-radius: 8px;
    background: #0b835b;
    color: #fff;
    text-decoration: none;
    font-weight: 850;
    cursor: pointer;
}

.ugel-academic-goals__manage {
    background: #fff;
    color: #08744f;
}

.ugel-academic-goals__kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 15px;
}

.ugel-academic-goals__kpis > div {
    padding: 13px;
    border: 1px solid #d4e6df;
    border-radius: 12px;
    background: #fff;
}

.ugel-academic-goals__kpis span {
    display: block;
    color: #667889;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.ugel-academic-goals__kpis strong {
    display: block;
    margin-top: 3px;
    color: #0a3655;
    font-size: 1.45rem;
}

.ugel-academic-goals__list {
    display: grid;
    gap: 9px;
}

.ugel-academic-goals__row {
    display: grid;
    grid-template-columns: 135px minmax(150px, 1fr) minmax(180px, 2fr) 90px;
    align-items: center;
    gap: 13px;
    padding: 12px 14px;
    border: 1px solid #d4e5df;
    border-radius: 12px;
    background: #fff;
    color: #223f55;
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.ugel-academic-goals__row:hover {
    transform: translateY(-1px);
    border-color: #77b99f;
    box-shadow: 0 8px 18px rgba(16, 91, 65, .1);
}

.ugel-academic-goals__level {
    display: inline-flex;
    width: max-content;
    padding: 5px 8px;
    border-radius: 999px;
    background: #dff2ea;
    color: #0b6c4c;
    font-size: .72rem;
    font-weight: 900;
}

.ugel-academic-goals__level.is-sec {
    background: #e6eefc;
    color: #23599b;
}

.ugel-academic-goals__grade {
    font-weight: 850;
}

.ugel-academic-goals__progress {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #e4ece9;
}

.ugel-academic-goals__progress > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #10a56f, #2cc38b);
}

.ugel-academic-goals__row strong {
    color: #075f43;
    text-align: right;
    font-size: 1.05rem;
}

.ugel-academic-goals__empty {
    display: grid;
    min-height: 120px;
    place-items: center;
    padding: 20px;
    border: 1px dashed #aac9bd;
    border-radius: 12px;
    background: #fff;
    color: #5f7180;
    text-align: center;
}

.ugel-academic-goals__empty i {
    display: block;
    margin-bottom: 7px;
    color: #0d9164;
    font-size: 2rem;
}

.ugel-academic-goals__footer {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid #d5e6df;
    color: #5c6f7d;
    font-size: .78rem;
}

@media (max-width: 900px) {
    .ugel-academic-goals__header {
        flex-direction: column;
    }

    .ugel-academic-goals__source {
        min-width: 0;
        width: 100%;
    }

    .ugel-academic-goals__kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ugel-academic-goals__row {
        grid-template-columns: 110px 1fr 90px;
    }

    .ugel-academic-goals__progress {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

@media (max-width: 600px) {
    .ugel-academic-goals {
        padding: 14px;
    }

    .ugel-academic-goals__toolbar,
    .ugel-academic-goals__year-form {
        align-items: stretch;
        flex-direction: column;
    }

    .ugel-academic-goals__year-form select,
    .ugel-academic-goals__year-form button,
    .ugel-academic-goals__manage {
        width: 100%;
    }

    .ugel-academic-goals__kpis {
        grid-template-columns: 1fr 1fr;
    }

    .ugel-academic-goals__row {
        grid-template-columns: 1fr auto;
    }

    .ugel-academic-goals__grade,
    .ugel-academic-goals__progress {
        grid-column: 1 / -1;
        grid-row: auto;
    }
}

/* Docentes · Plan de metas anual. Todo el módulo permanece encapsulado. */
.teacher-goals-dashboard {
    --tgd-dark: #04572d;
    --tgd-green: #087a45;
    --tgd-green-2: #159254;
    --tgd-a: #8abd4d;
    --tgd-b: #ffb20f;
    --tgd-c: #f04438;
    --tgd-ink: #18261e;
    --tgd-muted: #637168;
    --tgd-line: #dce5df;
    --tgd-soft: #f5f8f6;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #d9e3dc;
    border-radius: 14px;
    background: #f8faf9;
    color: var(--tgd-ink);
    box-shadow: 0 14px 36px rgba(18, 65, 39, .08);
}

.teacher-goals-dashboard,
.teacher-goals-dashboard * {
    box-sizing: border-box;
}

.teacher-goals-dashboard__hero {
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 22px;
    background: linear-gradient(112deg, #034b27 0%, #006a37 56%, #07522e 100%);
    color: #fff;
    box-shadow: 0 3px 13px rgba(3, 75, 39, .22);
}

.teacher-goals-dashboard__hero-copy {
    flex: 1;
    min-width: 0;
    text-align: center;
}

.teacher-goals-dashboard__hero-kicker {
    display: block;
    margin-bottom: 2px;
    color: #c8eed7;
    font-size: .67rem;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.teacher-goals-dashboard__hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.18rem, 2vw, 1.78rem);
    font-weight: 900;
    letter-spacing: -.015em;
    line-height: 1.15;
}

.teacher-goals-dashboard__hero-context {
    min-width: 190px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.teacher-goals-dashboard__hero-context > i {
    width: 38px;
    height: 38px;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 1.1rem;
}

.teacher-goals-dashboard__hero-context span,
.teacher-goals-dashboard__hero-context small,
.teacher-goals-dashboard__hero-context strong {
    display: block;
}

.teacher-goals-dashboard__hero-context small {
    color: #ccebd8;
    font-size: .66rem;
}

.teacher-goals-dashboard__hero-context strong {
    max-width: 180px;
    overflow: hidden;
    font-size: .78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.teacher-goals-dashboard__filters {
    display: grid;
    grid-template-columns: minmax(245px, 1.35fr) minmax(155px, .88fr) minmax(165px, .95fr) minmax(135px, .75fr) minmax(245px, 1.2fr);
    gap: 12px;
    margin: 14px;
    padding: 11px;
    border: 1px solid var(--tgd-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 5px 16px rgba(24, 60, 39, .055);
}

.teacher-goals-dashboard__filter {
    min-width: 0;
}

.teacher-goals-dashboard__filter > span:first-child {
    display: block;
    margin: 0 0 5px 9px;
    color: #17673c;
    font-size: .67rem;
    font-weight: 900;
    letter-spacing: .015em;
}

.teacher-goals-dashboard__control {
    position: relative;
    min-width: 0;
    display: block;
}

.teacher-goals-dashboard__control > i {
    position: absolute;
    top: 50%;
    left: 13px;
    z-index: 1;
    transform: translateY(-50%);
    color: var(--tgd-green);
    font-size: .98rem;
    pointer-events: none;
}

.teacher-goals-dashboard__control select {
    width: 100%;
    height: 44px;
    padding: 0 32px 0 40px;
    overflow: hidden;
    border: 1px solid #d8e2dc;
    border-radius: 9px;
    outline: 0;
    background-color: #fff;
    color: #17241c;
    font-size: .8rem;
    font-weight: 760;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.teacher-goals-dashboard__control select:disabled {
    opacity: 1;
    cursor: default;
    background-color: #fbfcfb;
    color: #25342b;
}

.teacher-goals-dashboard__control select:focus-visible {
    border-color: var(--tgd-green);
    box-shadow: 0 0 0 3px rgba(8, 122, 69, .15);
}

.teacher-goals-dashboard__place-actions {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) auto;
    gap: 10px;
}

.teacher-goals-dashboard__place-actions button {
    min-width: 112px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 14px;
    border: 1px solid #056536;
    border-radius: 9px;
    background: linear-gradient(180deg, #078247, #056536);
    color: #fff;
    font-size: .77rem;
    font-weight: 850;
    box-shadow: 0 4px 10px rgba(5, 101, 54, .16);
    transition: transform .15s ease, box-shadow .15s ease;
}

.teacher-goals-dashboard__place-actions button:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 7px 14px rgba(5, 101, 54, .2);
}

.teacher-goals-dashboard__place-actions button:focus-visible,
.teacher-goals-dashboard__area-next:focus-visible,
.teacher-goals-dashboard__areas a:focus-visible,
.teacher-goals-dashboard__goal-actions button:focus-visible {
    outline: 3px solid rgba(24, 154, 89, .3);
    outline-offset: 2px;
}

.teacher-goals-dashboard__place-actions button:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.teacher-goals-dashboard__alert {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 14px 14px;
    padding: 11px 13px;
    border: 1px solid #f1c37d;
    border-radius: 10px;
    background: #fff8e8;
    color: #7e5000;
    font-size: .8rem;
}

.teacher-goals-dashboard__alert i {
    margin-top: 1px;
    color: #d58a00;
}

.teacher-goals-dashboard__area-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    margin: 0 14px 14px;
    overflow: hidden;
    border: 1px solid var(--tgd-line);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 4px 13px rgba(31, 65, 43, .04);
}

.teacher-goals-dashboard__areas {
    min-width: 0;
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: #b8c9be transparent;
}

.teacher-goals-dashboard__areas a {
    min-width: max-content;
    min-height: 55px;
    display: inline-flex;
    flex: 1 0 auto;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 10px 22px;
    border-right: 1px solid #e2e8e4;
    border-bottom: 3px solid transparent;
    background: #fff;
    color: #48594e;
    font-size: .72rem;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}

.teacher-goals-dashboard__areas a i {
    color: #52665a;
    font-size: 1rem;
}

.teacher-goals-dashboard__areas a:hover {
    background: #f5faf7;
    color: var(--tgd-green);
}

.teacher-goals-dashboard__areas a.is-active {
    border-bottom-color: var(--tgd-green);
    background: #f0f8f3;
    color: #07683a;
}

.teacher-goals-dashboard__areas a.is-active i {
    color: var(--tgd-green);
}

.teacher-goals-dashboard__area-next {
    display: grid;
    place-items: center;
    border: 0;
    border-left: 1px solid #e1e8e3;
    background: #fff;
    color: #35443a;
    font-size: 1.05rem;
}

.teacher-goals-dashboard__area-next:hover {
    background: #f1f7f3;
    color: var(--tgd-green);
}

.teacher-goals-dashboard__workspace {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(700px, 1.16fr) minmax(450px, .84fr);
    gap: 14px;
    align-items: stretch;
    margin: 0 14px 14px;
}

.teacher-goals-dashboard__matrix-card,
.teacher-goals-dashboard__chart-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--tgd-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 5px 16px rgba(25, 61, 40, .055);
}

.teacher-goals-dashboard__matrix-card {
    display: flex;
    flex-direction: column;
}

.teacher-goals-dashboard__matrix-head {
    min-height: 49px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 13px;
    border-bottom: 1px solid #e3ebe6;
}

.teacher-goals-dashboard__matrix-head > div span,
.teacher-goals-dashboard__matrix-head > div strong {
    display: block;
}

.teacher-goals-dashboard__matrix-head > div span {
    color: #0b6d3e;
    font-size: .75rem;
    font-weight: 900;
}

.teacher-goals-dashboard__matrix-head > div strong {
    margin-top: 2px;
    color: var(--tgd-muted);
    font-size: .67rem;
}

.teacher-goals-dashboard__goal-state {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border: 1px solid;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 850;
    white-space: nowrap;
}

.teacher-goals-dashboard__goal-state.is-saved {
    border-color: #a7ddbf;
    background: #eaf8f0;
    color: #087442;
}

.teacher-goals-dashboard__goal-state.is-proposed {
    border-color: #f1d183;
    background: #fff8df;
    color: #8b5b00;
}

.teacher-goals-dashboard__matrix-card form {
    min-height: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
}

.teacher-goals-dashboard__table-scroll {
    min-width: 0;
    overflow-x: auto;
    padding: 13px 13px 0;
}

.teacher-goals-dashboard__matrix {
    width: 100%;
    min-width: 680px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    color: #19271f;
    font-size: .72rem;
}

.teacher-goals-dashboard__matrix caption {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.teacher-goals-dashboard__matrix th,
.teacher-goals-dashboard__matrix td {
    height: 42px;
    padding: 7px 6px;
    border-right: 1px solid #d9e1dc;
    border-bottom: 1px solid #d9e1dc;
    text-align: center;
    vertical-align: middle;
}

.teacher-goals-dashboard__matrix tr > :first-child {
    border-left: 1px solid #d9e1dc;
}

.teacher-goals-dashboard__matrix thead tr:first-child > * {
    border-top: 1px solid #064f2a;
}

.teacher-goals-dashboard__matrix thead th {
    height: 34px;
    border-color: #74a589;
    background: linear-gradient(180deg, #075e32, #034d28);
    color: #fff;
    font-size: .66rem;
    font-weight: 900;
}

.teacher-goals-dashboard__matrix thead tr:first-child th:first-child {
    border-top-left-radius: 9px;
}

.teacher-goals-dashboard__matrix thead tr:first-child th:last-child {
    border-top-right-radius: 9px;
}

.teacher-goals-dashboard__matrix thead th.is-goal {
    border-color: #d6bf82;
    background: linear-gradient(180deg, #0a6738, #05542d);
}

.teacher-goals-dashboard__level-heading {
    width: 170px;
    line-height: 1.25;
}

.teacher-goals-dashboard__matrix tbody th {
    width: 52px;
    padding: 0;
}

.teacher-goals-dashboard__level span {
    min-height: 55px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 1rem;
    font-weight: 900;
}

.teacher-goals-dashboard__level--ad span {
    background: linear-gradient(135deg, #138b52, #05703e);
}

.teacher-goals-dashboard__level--a span {
    background: linear-gradient(135deg, #a7d765, var(--tgd-a));
    color: #16370c;
}

.teacher-goals-dashboard__level--b span {
    background: linear-gradient(135deg, #ffc92f, var(--tgd-b));
    color: #3e2b00;
}

.teacher-goals-dashboard__level--c span {
    background: linear-gradient(135deg, #fa5b53, var(--tgd-c));
}

.teacher-goals-dashboard__level-label {
    width: 118px;
    text-align: left !important;
}

.teacher-goals-dashboard__level-label i {
    display: none;
}

.teacher-goals-dashboard__level-label span {
    display: block;
    font-size: .67rem;
    font-weight: 700;
    line-height: 1.25;
}

.teacher-goals-dashboard__matrix tbody tr:nth-child(even) td:not(.teacher-goals-dashboard__goal-cell) {
    background: #fbfcfb;
}

.teacher-goals-dashboard__matrix td.is-empty,
.teacher-goals-dashboard__matrix tfoot td.is-empty {
    color: #9aa69e;
    background: #fafcfa;
}

.teacher-goals-dashboard__goal-cell,
.teacher-goals-dashboard__matrix tfoot td.is-goal {
    background: #fff8e5;
}

.teacher-goals-dashboard__goal-cell input {
    width: 52px;
    height: 32px;
    padding: 3px 4px;
    border: 1px solid #d6bd76;
    border-radius: 6px;
    outline: 0;
    background: #fffdf7;
    color: #765300;
    font: inherit;
    font-size: .79rem;
    font-weight: 900;
    text-align: center;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.teacher-goals-dashboard__goal-cell input:focus-visible {
    border-color: #b58100;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(255, 178, 15, .18);
}

.teacher-goals-dashboard__goal-cell input[aria-invalid="true"] {
    border-color: #e6a65e;
}

.teacher-goals-dashboard__goal-cell input:disabled {
    opacity: .58;
    cursor: not-allowed;
}

.teacher-goals-dashboard__goal-percent {
    color: #6d530e;
    font-weight: 850;
}

.teacher-goals-dashboard__matrix tfoot th,
.teacher-goals-dashboard__matrix tfoot td {
    height: 48px;
    background: #eaf5ed;
    font-weight: 900;
}

.teacher-goals-dashboard__matrix tfoot th {
    border-bottom-left-radius: 9px;
    text-align: center;
}

.teacher-goals-dashboard__matrix tfoot td:last-child {
    border-bottom-right-radius: 9px;
}

.teacher-goals-dashboard__rounding-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 13px 0;
    padding: 10px 12px;
    border: 1px solid #d6e5dc;
    border-radius: 8px;
    background: #f4faf6;
    color: #2e7049;
    font-size: .71rem;
}

.teacher-goals-dashboard__rounding-note i {
    color: var(--tgd-green);
    font-size: .95rem;
}

.teacher-goals-dashboard__goal-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: end;
    margin-top: auto;
    padding: 13px;
}

.teacher-goals-dashboard__goal-editor > label {
    min-width: 0;
}

.teacher-goals-dashboard__goal-editor > label > span {
    display: block;
    margin-bottom: 5px;
    color: #31523e;
    font-size: .69rem;
    font-weight: 850;
}

.teacher-goals-dashboard__goal-editor > label small {
    color: #7a897f;
    font-weight: 600;
}

.teacher-goals-dashboard__goal-editor textarea {
    width: 100%;
    min-height: 62px;
    display: block;
    padding: 8px 10px;
    resize: vertical;
    border: 1px solid #cfdcd4;
    border-radius: 8px;
    outline: 0;
    background: #fff;
    color: #27362c;
    font: inherit;
    font-size: .73rem;
    line-height: 1.35;
}

.teacher-goals-dashboard__goal-editor textarea:focus-visible {
    border-color: var(--tgd-green);
    box-shadow: 0 0 0 3px rgba(8, 122, 69, .13);
}

.teacher-goals-dashboard__goal-actions {
    min-width: 205px;
    display: grid;
    gap: 7px;
}

.teacher-goals-dashboard__goal-actions p {
    min-height: 28px;
    display: flex;
    align-items: flex-start;
    gap: 5px;
    margin: 0;
    font-size: .66rem;
    line-height: 1.25;
}

.teacher-goals-dashboard__goal-actions p.is-valid {
    color: #087442;
}

.teacher-goals-dashboard__goal-actions p.is-invalid {
    color: #a96000;
}

.teacher-goals-dashboard__goal-actions button {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid #056435;
    border-radius: 8px;
    background: linear-gradient(180deg, #078247, #056536);
    color: #fff;
    font: inherit;
    font-size: .76rem;
    font-weight: 900;
    box-shadow: 0 4px 10px rgba(5, 101, 54, .16);
}

.teacher-goals-dashboard__goal-actions button:disabled {
    border-color: #aab8af;
    background: #aab8af;
    box-shadow: none;
    cursor: not-allowed;
}

.teacher-goals-dashboard__charts {
    min-width: 0;
    display: grid;
    grid-template-rows: repeat(2, minmax(285px, 1fr));
    gap: 14px;
}

.teacher-goals-dashboard__chart-card {
    min-height: 285px;
}

.teacher-goals-dashboard__chart-card > header {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 13px 7px;
}

.teacher-goals-dashboard__chart-card > header > div {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
}

.teacher-goals-dashboard__chart-card > header > div > i {
    flex: 0 0 auto;
    color: var(--tgd-green);
    font-size: 1.05rem;
}

.teacher-goals-dashboard__chart-card h2 {
    margin: 0;
    overflow: hidden;
    color: #126239;
    font-size: .86rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.teacher-goals-dashboard__chart-card > header > i {
    color: #5d6962;
}

.teacher-goals-dashboard__canvas {
    position: relative;
    height: calc(100% - 48px);
    min-height: 235px;
    padding: 0 10px 8px;
}

.teacher-goals-dashboard__canvas canvas {
    width: 100% !important;
    height: 100% !important;
}

.teacher-goals-dashboard__data-notes {
    display: grid;
    gap: 5px;
    margin: 0 14px 14px;
    padding: 10px 12px;
    border: 1px solid #d6e3da;
    border-radius: 9px;
    background: #f4f8f5;
    color: #526159;
}

.teacher-goals-dashboard__data-notes p {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    font-size: .69rem;
    line-height: 1.35;
}

.teacher-goals-dashboard__data-notes i {
    margin-top: 1px;
    color: var(--tgd-green);
}

.teacher-goals-dashboard__empty {
    min-height: 360px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 7px;
    margin: 0 14px 14px;
    padding: 30px;
    border: 1px dashed #aec6b7;
    border-radius: 12px;
    background: #fff;
    color: #66766c;
    text-align: center;
}

.teacher-goals-dashboard__empty i {
    color: #789f87;
    font-size: 2.6rem;
}

.teacher-goals-dashboard__empty h2,
.teacher-goals-dashboard__empty p {
    margin: 0;
}

.teacher-goals-dashboard__empty h2 {
    color: #24432f;
    font-size: 1.05rem;
}

.teacher-goals-dashboard__empty p {
    max-width: 540px;
    font-size: .82rem;
}

@media (max-width: 1450px) {
    .teacher-goals-dashboard__filters {
        grid-template-columns: minmax(225px, 1.25fr) repeat(3, minmax(125px, .78fr)) minmax(225px, 1.1fr);
        gap: 9px;
    }

    .teacher-goals-dashboard__areas a {
        padding-right: 16px;
        padding-left: 16px;
    }

    .teacher-goals-dashboard__workspace {
        grid-template-columns: minmax(545px, .98fr) minmax(470px, 1.02fr);
    }
}

@media (max-width: 1540px) {
    .teacher-goals-dashboard__filters {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .teacher-goals-dashboard__filter--institution,
    .teacher-goals-dashboard__filter--place {
        grid-column: span 3;
    }

    .teacher-goals-dashboard__filter:not(.teacher-goals-dashboard__filter--institution):not(.teacher-goals-dashboard__filter--place) {
        grid-column: span 2;
    }

    .teacher-goals-dashboard__workspace {
        grid-template-columns: 1fr;
    }

    .teacher-goals-dashboard__charts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
    }

    .teacher-goals-dashboard__chart-card {
        min-height: 330px;
    }
}

@media (max-width: 900px) {
    .teacher-goals-dashboard__hero {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .teacher-goals-dashboard__hero-copy {
        text-align: left;
    }

    .teacher-goals-dashboard__hero-context {
        width: 100%;
        justify-content: flex-start;
    }

    .teacher-goals-dashboard__filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .teacher-goals-dashboard__filter,
    .teacher-goals-dashboard__filter--institution,
    .teacher-goals-dashboard__filter--place,
    .teacher-goals-dashboard__filter:not(.teacher-goals-dashboard__filter--institution):not(.teacher-goals-dashboard__filter--place) {
        grid-column: span 1;
    }

    .teacher-goals-dashboard__filter--institution,
    .teacher-goals-dashboard__filter--place {
        grid-column: 1 / -1;
    }

    .teacher-goals-dashboard__charts {
        grid-template-columns: 1fr;
    }

    .teacher-goals-dashboard__chart-card {
        min-height: 310px;
    }

    .teacher-goals-dashboard__goal-editor {
        grid-template-columns: 1fr;
    }

    .teacher-goals-dashboard__goal-actions {
        min-width: 0;
    }
}

@media (max-width: 620px) {
    .teacher-goals-dashboard {
        border-right: 0;
        border-left: 0;
        border-radius: 0;
    }

    .teacher-goals-dashboard__hero {
        padding: 13px 15px;
    }

    .teacher-goals-dashboard__hero h1 {
        font-size: 1rem;
    }

    .teacher-goals-dashboard__filters,
    .teacher-goals-dashboard__area-strip,
    .teacher-goals-dashboard__workspace,
    .teacher-goals-dashboard__data-notes,
    .teacher-goals-dashboard__empty {
        margin-right: 8px;
        margin-left: 8px;
    }

    .teacher-goals-dashboard__filters {
        grid-template-columns: 1fr;
        padding: 9px;
    }

    .teacher-goals-dashboard__filter,
    .teacher-goals-dashboard__filter--institution,
    .teacher-goals-dashboard__filter--place,
    .teacher-goals-dashboard__filter:not(.teacher-goals-dashboard__filter--institution):not(.teacher-goals-dashboard__filter--place) {
        grid-column: auto;
    }

    .teacher-goals-dashboard__place-actions {
        grid-template-columns: 1fr;
    }

    .teacher-goals-dashboard__place-actions button {
        width: 100%;
    }

    .teacher-goals-dashboard__matrix-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .teacher-goals-dashboard__table-scroll {
        padding-right: 8px;
        padding-left: 8px;
    }

    .teacher-goals-dashboard__rounding-note,
    .teacher-goals-dashboard__goal-editor {
        margin-right: 8px;
        margin-left: 8px;
    }

    .teacher-goals-dashboard__goal-editor {
        padding-right: 0;
        padding-left: 0;
    }

    .teacher-goals-dashboard__chart-card h2 {
        font-size: .75rem;
    }

    .teacher-goals-dashboard__chart-card {
        min-height: 295px;
    }

    .teacher-goals-dashboard__canvas {
        min-height: 240px;
        padding-right: 4px;
        padding-left: 4px;
    }
}

/* Docentes · Consolidado de metas por competencia (referencia 2026). */
.teacher-goals-dashboard {
    --tgd-dark: #004b28;
    --tgd-green: #087a45;
    --tgd-ad: #087a45;
    --tgd-a: #91ce3c;
    --tgd-b: #ffbd0d;
    --tgd-c: #f12e2b;
    --tgd-gold: #b87c00;
    --tgd-line: #dfe6e1;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #fff;
    color: #17241c;
    box-shadow: none;
    font-family: Arial, Helvetica, sans-serif;
}

.teacher-goals-dashboard,
.teacher-goals-dashboard * {
    box-sizing: border-box;
}

.teacher-goals-dashboard__hero {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 15px 50px;
    background: linear-gradient(105deg, #003f22 0%, #00592e 58%, #003f22 100%);
    box-shadow: none;
}

.teacher-goals-dashboard__hero h1 {
    margin: 0;
    color: #ffc72c;
    font-size: clamp(1.15rem, 1.65vw, 1.75rem);
    font-weight: 900;
    letter-spacing: -.015em;
    line-height: 1.15;
    text-align: left;
}

.teacher-goals-dashboard__filters {
    display: grid;
    grid-template-columns: minmax(250px, 1.25fr) minmax(160px, .88fr) minmax(210px, 1.05fr) minmax(145px, .75fr) minmax(145px, .72fr) auto;
    gap: 22px;
    align-items: end;
    margin: 0 20px;
    padding: 22px 4px 24px;
    border: 0;
    border-bottom: 1px solid #e4e9e6;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
}

.teacher-goals-dashboard__filter {
    min-width: 0;
}

.teacher-goals-dashboard__filter > span:first-child {
    display: block;
    margin: 0 0 7px 8px;
    color: #086137;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .01em;
}

.teacher-goals-dashboard__control {
    position: relative;
    display: block;
    min-width: 0;
}

.teacher-goals-dashboard__control > i {
    position: absolute;
    top: 50%;
    left: 16px;
    z-index: 2;
    transform: translateY(-50%);
    color: var(--tgd-green);
    font-size: 1rem;
    pointer-events: none;
}

.teacher-goals-dashboard__control select {
    width: 100%;
    height: 42px;
    padding: 0 32px 0 16px;
    overflow: hidden;
    border: 1px solid #d7ded9;
    border-radius: 7px;
    outline: 0;
    background: #fff;
    color: #202c25;
    font-size: .78rem;
    font-weight: 740;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(18, 42, 27, .04);
}

.teacher-goals-dashboard__control--grade select {
    padding-left: 45px;
}

.teacher-goals-dashboard__control select:disabled {
    opacity: 1;
    cursor: default;
    background: #fff;
    color: #202c25;
}

.teacher-goals-dashboard__control select:focus-visible {
    border-color: var(--tgd-green);
    box-shadow: 0 0 0 3px rgba(8, 122, 69, .13);
}

.teacher-goals-dashboard__advanced {
    min-width: 168px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 15px;
    border: 1px solid #84b99b;
    border-radius: 7px;
    background: #fff;
    color: #096239;
    font: inherit;
    font-size: .73rem;
    font-weight: 850;
}

.teacher-goals-dashboard__advanced i {
    font-size: 1rem;
}

.teacher-goals-dashboard__advanced:hover:not(:disabled) {
    background: #f0f8f3;
}

.teacher-goals-dashboard__advanced:disabled {
    opacity: .55;
}

.teacher-goals-dashboard__alert {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 20px 0;
    padding: 9px 12px;
    border: 1px solid #efca82;
    border-radius: 7px;
    background: #fff8e8;
    color: #805600;
    font-size: .75rem;
}

.teacher-goals-dashboard__area-label {
    margin: 14px 30px 9px;
    color: #11673e;
    font-size: .73rem;
    font-weight: 900;
}

.teacher-goals-dashboard__area-strip {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    margin: 0 20px 14px;
    overflow: hidden;
    border: 1px solid #dbe3de;
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 2px 7px rgba(22, 55, 34, .04);
}

.teacher-goals-dashboard__area-arrow {
    display: grid;
    place-items: center;
    border: 0;
    background: #fff;
    color: #149253;
    font-size: 1.15rem;
}

.teacher-goals-dashboard__area-arrow:first-child {
    border-right: 1px solid #dde4df;
}

.teacher-goals-dashboard__area-arrow:last-child {
    border-left: 1px solid #dde4df;
}

.teacher-goals-dashboard__area-arrow:hover {
    background: #f0f8f3;
}

.teacher-goals-dashboard__areas {
    min-width: 0;
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.teacher-goals-dashboard__areas::-webkit-scrollbar {
    display: none;
}

.teacher-goals-dashboard__areas a {
    min-width: 185px;
    min-height: 48px;
    display: inline-flex;
    flex: 1 0 auto;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 17px;
    border-right: 1px solid #e0e6e2;
    border-bottom: 3px solid transparent;
    background: #fff;
    color: #536170;
    font-size: .72rem;
    font-weight: 740;
    text-decoration: none;
    white-space: nowrap;
}

.teacher-goals-dashboard__areas a i {
    color: #586878;
    font-size: 1.15rem;
}

.teacher-goals-dashboard__areas a:hover {
    background: #f6faf7;
    color: #087442;
}

.teacher-goals-dashboard__areas a.is-active {
    border-bottom-color: #0d9a55;
    background: #fff;
    color: #076238;
}

.teacher-goals-dashboard__areas a.is-active i {
    color: #078247;
}

.teacher-goals-dashboard__workspace {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(720px, 1.36fr) minmax(520px, 1fr);
    gap: 20px;
    align-items: stretch;
    margin: 0 20px 16px;
}

.teacher-goals-dashboard__matrix-card,
.teacher-goals-dashboard__chart-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #dfe6e1;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(21, 58, 36, .055);
}

.teacher-goals-dashboard__matrix-title {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 16px;
    border-bottom: 1px solid #e6ece8;
    background: linear-gradient(180deg, #fff 0%, #fbfdfb 100%);
}

.teacher-goals-dashboard__matrix-title h2 {
    margin: 0;
    color: #0a6137;
    font-size: .94rem;
    font-weight: 900;
}

.teacher-goals-dashboard__matrix-title button {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid #d7e3dc;
    border-radius: 7px;
    background: #fff;
    color: #a56f00;
}

.teacher-goals-dashboard__matrix-title button:hover {
    background: #fff8e3;
}

.teacher-goals-dashboard__table-scroll {
    min-width: 0;
    max-height: 620px;
    overflow: auto;
    padding: 0 14px 14px;
}

.teacher-goals-dashboard__matrix {
    width: 100%;
    min-width: 850px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    color: #17231c;
    font-size: .68rem;
}

.teacher-goals-dashboard__matrix caption {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.teacher-goals-dashboard__matrix th,
.teacher-goals-dashboard__matrix td {
    height: 38px;
    padding: 6px 5px;
    border-right: 1px solid #d8e0db;
    border-bottom: 1px solid #d8e0db;
    text-align: center;
    vertical-align: middle;
}

.teacher-goals-dashboard__matrix tr > :first-child {
    border-left: 1px solid #d8e0db;
}

.teacher-goals-dashboard__matrix thead tr:first-child > * {
    border-top: 1px solid #07502d;
}

.teacher-goals-dashboard__matrix thead th {
    height: 31px;
    border-color: #7aa58d;
    background: linear-gradient(180deg, #075e34, #034b29);
    color: #fff;
    font-size: .65rem;
    font-weight: 900;
}

.teacher-goals-dashboard__matrix thead tr:first-child th:first-child {
    width: 160px;
    border-top-left-radius: 7px;
}

.teacher-goals-dashboard__matrix thead tr:first-child th:nth-child(2) {
    width: 92px;
}

.teacher-goals-dashboard__matrix thead tr:first-child th:last-child {
    border-top-right-radius: 7px;
}

.teacher-goals-dashboard__matrix thead th.is-goal {
    border-color: #dcb640;
    background: linear-gradient(180deg, #b88108, #a96e00);
}

.teacher-goals-dashboard__competency {
    padding: 10px 12px !important;
    background: #fbfdfb;
    color: #075b34;
    font-size: .69rem;
    font-weight: 850;
    line-height: 1.45;
}

.teacher-goals-dashboard__achievement {
    padding: 0 !important;
    color: #fff;
    font-size: .8rem;
    font-weight: 900;
}

.teacher-goals-dashboard__achievement--ad { background: linear-gradient(135deg, #138b52, #05703e); }
.teacher-goals-dashboard__achievement--a { background: linear-gradient(135deg, #a6d954, #86c82e); color: #17330c; }
.teacher-goals-dashboard__achievement--b { background: linear-gradient(135deg, #ffd331, #ffb500); color: #332300; }
.teacher-goals-dashboard__achievement--c { background: linear-gradient(135deg, #fa4a44, #ea201d); }

.teacher-goals-dashboard__matrix tbody td {
    font-size: .72rem;
    font-weight: 650;
}

.teacher-goals-dashboard__matrix tbody td.is-goal,
.teacher-goals-dashboard__total-row td.is-goal {
    background: #fff8df;
    color: #8a5c00;
    font-weight: 850;
}

.teacher-goals-dashboard__matrix tbody tr.is-competency-start > * {
    border-top: 1px solid #84b99b;
}

.teacher-goals-dashboard__total-row th,
.teacher-goals-dashboard__total-row td {
    height: 40px;
    background: #fbfcfb;
    font-weight: 900 !important;
}

.teacher-goals-dashboard__charts {
    min-width: 0;
    max-height: 760px;
    display: grid;
    gap: 12px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.teacher-goals-dashboard__chart-card {
    min-height: 300px;
}

.teacher-goals-dashboard__chart-card > header {
    min-height: 52px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 8px 15px 4px;
}

.teacher-goals-dashboard__chart-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e7f5eb;
    color: #087a45;
    font-size: 1.15rem;
}

.teacher-goals-dashboard__chart-card h2 {
    margin: 0;
    color: #075b34;
    font-size: .91rem;
    font-weight: 900;
    line-height: 1.18;
    white-space: normal;
}

.teacher-goals-dashboard__chart-card > header > i {
    color: #536159;
}

.teacher-goals-dashboard__canvas {
    position: relative;
    height: 242px;
    min-height: 0;
    padding: 0 9px 6px;
}

.teacher-goals-dashboard__canvas canvas {
    width: 100% !important;
    height: 100% !important;
}

.teacher-goals-dashboard__kpis {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    margin: 0 20px 13px;
}

.teacher-goals-dashboard__kpi {
    min-width: 0;
    min-height: 108px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px;
    border: 1px solid #dfe5e1;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 3px 9px rgba(25, 57, 38, .045);
}

.teacher-goals-dashboard__kpi-icon,
.teacher-goals-dashboard__kpi-badge {
    width: 54px;
    height: 54px;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    font-size: 1.12rem;
    font-weight: 900;
}

.teacher-goals-dashboard__kpi-icon {
    border: 7px solid #e8f4eb;
    color: #087a45;
    font-size: 1.38rem;
}

.teacher-goals-dashboard__kpi-badge {
    border: 7px solid;
    color: #fff;
}

.teacher-goals-dashboard__kpi--ad .teacher-goals-dashboard__kpi-badge { border-color: #d7f0df; background: var(--tgd-ad); }
.teacher-goals-dashboard__kpi--a .teacher-goals-dashboard__kpi-badge { border-color: #e5f5c9; background: var(--tgd-a); color: #203d0b; }
.teacher-goals-dashboard__kpi--b .teacher-goals-dashboard__kpi-badge { border-color: #fff0bd; background: var(--tgd-b); color: #3b2900; }
.teacher-goals-dashboard__kpi--c .teacher-goals-dashboard__kpi-badge { border-color: #ffd9d8; background: var(--tgd-c); }
.teacher-goals-dashboard__kpi--goal .teacher-goals-dashboard__kpi-icon { border-color: #e4f0f7; color: #287bb1; }

.teacher-goals-dashboard__kpi > div {
    min-width: 0;
}

.teacher-goals-dashboard__kpi small,
.teacher-goals-dashboard__kpi strong,
.teacher-goals-dashboard__kpi > div > span {
    display: block;
}

.teacher-goals-dashboard__kpi small {
    min-height: 31px;
    color: #28342c;
    font-size: .65rem;
    line-height: 1.2;
}

.teacher-goals-dashboard__kpi strong {
    margin: 2px 0;
    color: #09633a;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1;
}

.teacher-goals-dashboard__kpi > div > span {
    color: #5e6b63;
    font-size: .61rem;
    white-space: nowrap;
}

.teacher-goals-dashboard__status-strip {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(540px, .95fr);
    align-items: center;
    min-height: 45px;
    margin: 0 20px 5px;
    overflow: hidden;
    border: 1px solid #dde5df;
    border-radius: 8px;
    background: #fff;
}

.teacher-goals-dashboard__status-strip p {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 8px 16px;
    background: #f4fbf6;
    color: #33714d;
    font-size: .68rem;
}

.teacher-goals-dashboard__status-strip p i {
    color: #2a995b;
    font-size: 1.02rem;
}

.teacher-goals-dashboard__legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    padding: 7px 10px;
    color: #5c6861;
    font-size: .63rem;
}

.teacher-goals-dashboard__legend strong {
    white-space: nowrap;
}

.teacher-goals-dashboard__legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.teacher-goals-dashboard__legend b {
    min-width: 21px;
    height: 21px;
    display: grid;
    place-items: center;
    border-radius: 3px;
    color: #fff;
    font-size: .61rem;
}

.teacher-goals-dashboard__legend b.is-ad { background: var(--tgd-ad); }
.teacher-goals-dashboard__legend b.is-a { background: var(--tgd-a); color: #203d0b; }
.teacher-goals-dashboard__legend b.is-b { background: var(--tgd-b); color: #3b2900; }
.teacher-goals-dashboard__legend b.is-c { background: var(--tgd-c); }

.teacher-goals-dashboard__goal-dialog {
    width: min(590px, calc(100vw - 28px));
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 13px;
    color: #17241c;
    box-shadow: 0 22px 70px rgba(0, 47, 24, .28);
}

.teacher-goals-dashboard__goal-dialog::backdrop {
    background: rgba(4, 40, 23, .55);
    backdrop-filter: blur(2px);
}

.teacher-goals-dashboard__goal-dialog form {
    padding: 0 20px 20px;
}

.teacher-goals-dashboard__goal-dialog header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 0 -20px 16px;
    padding: 15px 20px;
    background: #07542e;
    color: #fff;
}

.teacher-goals-dashboard__goal-dialog header small,
.teacher-goals-dashboard__goal-dialog header h2 {
    display: block;
    margin: 0;
}

.teacher-goals-dashboard__goal-dialog header small {
    color: #c9ebd7;
    font-size: .62rem;
    letter-spacing: .1em;
}

.teacher-goals-dashboard__goal-dialog header h2 {
    font-size: 1.03rem;
}

.teacher-goals-dashboard__goal-dialog header button {
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 1rem;
}

.teacher-goals-dashboard__goal-dialog form > p {
    margin: 0 0 13px;
    color: #5d6a62;
    font-size: .75rem;
}

.teacher-goals-dashboard__goal-fields {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.teacher-goals-dashboard__goal-fields label {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5px 8px;
    align-items: center;
    padding: 9px;
    border: 1px solid #dce4df;
    border-radius: 8px;
}

.teacher-goals-dashboard__goal-fields label > span {
    font-size: .75rem;
    font-weight: 900;
}

.teacher-goals-dashboard__goal-fields input {
    width: 100%;
    height: 34px;
    border: 1px solid #cdd8d1;
    border-radius: 6px;
    text-align: center;
    font-weight: 850;
}

.teacher-goals-dashboard__goal-fields small {
    grid-column: 1 / -1;
    color: #6a766e;
    text-align: right;
}

.teacher-goals-dashboard__observation {
    display: block;
    margin-top: 14px;
}

.teacher-goals-dashboard__observation > span {
    display: block;
    margin-bottom: 5px;
    color: #31513e;
    font-size: .72rem;
    font-weight: 850;
}

.teacher-goals-dashboard__observation textarea {
    width: 100%;
    padding: 9px 10px;
    resize: vertical;
    border: 1px solid #cfdad3;
    border-radius: 7px;
    font: inherit;
    font-size: .74rem;
}

.teacher-goals-dashboard__dialog-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 9px;
    align-items: center;
    margin-top: 15px;
}

.teacher-goals-dashboard__dialog-actions p {
    margin: 0;
    font-size: .69rem;
}

.teacher-goals-dashboard__dialog-actions p.is-valid { color: #087442; }
.teacher-goals-dashboard__dialog-actions p.is-invalid { color: #aa6500; }

.teacher-goals-dashboard__dialog-actions button {
    min-height: 39px;
    padding: 7px 13px;
    border: 1px solid #066238;
    border-radius: 7px;
    background: #067642;
    color: #fff;
    font: inherit;
    font-size: .72rem;
    font-weight: 850;
}

.teacher-goals-dashboard__dialog-actions button.is-secondary {
    border-color: #cbd6cf;
    background: #fff;
    color: #46564c;
}

.teacher-goals-dashboard__dialog-actions button:disabled {
    opacity: .5;
}

.teacher-goals-dashboard__empty {
    min-height: 380px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 7px;
    margin: 15px 20px;
    border: 1px dashed #acc4b5;
    border-radius: 10px;
    color: #65746a;
    text-align: center;
}

.teacher-goals-dashboard__empty i { color: #789f87; font-size: 2.5rem; }
.teacher-goals-dashboard__empty h2,
.teacher-goals-dashboard__empty p { margin: 0; }

@media (max-width: 1450px) {
    .teacher-goals-dashboard__filters {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 12px;
    }

    .teacher-goals-dashboard__filter--institution { grid-column: span 2; }
    .teacher-goals-dashboard__advanced { min-width: 0; }
    .teacher-goals-dashboard__workspace { grid-template-columns: minmax(650px, 1.22fr) minmax(450px, 1fr); gap: 14px; }
    .teacher-goals-dashboard__kpis { gap: 8px; }
    .teacher-goals-dashboard__kpi { gap: 8px; padding: 10px; }
    .teacher-goals-dashboard__kpi-icon,
    .teacher-goals-dashboard__kpi-badge { width: 45px; height: 45px; border-width: 5px; }
}

@media (max-width: 1180px) {
    .teacher-goals-dashboard__workspace { grid-template-columns: 1fr; }
    .teacher-goals-dashboard__charts { max-height: none; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
    .teacher-goals-dashboard__kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .teacher-goals-dashboard__status-strip { grid-template-columns: 1fr; }
    .teacher-goals-dashboard__legend { min-height: 44px; }
}

@media (max-width: 760px) {
    .teacher-goals-dashboard__hero { min-height: 72px; padding: 14px 16px; }
    .teacher-goals-dashboard__hero h1 { font-size: .95rem; line-height: 1.25; }
    .teacher-goals-dashboard__filters { grid-template-columns: 1fr 1fr; gap: 11px; margin: 0 12px; padding-top: 15px; }
    .teacher-goals-dashboard__filter--institution { grid-column: 1 / -1; }
    .teacher-goals-dashboard__advanced { width: 100%; min-width: 0; }
    .teacher-goals-dashboard__area-label { margin-left: 20px; }
    .teacher-goals-dashboard__area-strip,
    .teacher-goals-dashboard__workspace,
    .teacher-goals-dashboard__kpis,
    .teacher-goals-dashboard__status-strip { margin-right: 12px; margin-left: 12px; }
    .teacher-goals-dashboard__areas a { min-width: 165px; }
    .teacher-goals-dashboard__charts { grid-template-columns: 1fr; }
    .teacher-goals-dashboard__chart-card { min-height: 285px; }
    .teacher-goals-dashboard__canvas { height: 230px; }
    .teacher-goals-dashboard__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .teacher-goals-dashboard__legend { flex-wrap: wrap; gap: 8px 11px; }
    .teacher-goals-dashboard__goal-fields { grid-template-columns: repeat(2, 1fr); }
    .teacher-goals-dashboard__dialog-actions { grid-template-columns: 1fr 1fr; }
    .teacher-goals-dashboard__dialog-actions p { grid-column: 1 / -1; }
}

@media (max-width: 430px) {
    .teacher-goals-dashboard__filters { grid-template-columns: 1fr; }
    .teacher-goals-dashboard__filter--institution { grid-column: auto; }
    .teacher-goals-dashboard__kpis { grid-template-columns: 1fr; }
    .teacher-goals-dashboard__status-strip p { align-items: flex-start; }
}

@media (max-width: 760px) {
    .teacher-goals-dashboard__matrix-title {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 9px;
    }

    .teacher-goals-dashboard__editable-badge { min-height: 28px; }

    .teacher-goals-dashboard__editor-guide {
        align-items: flex-start;
        margin: 9px 10px;
    }

    .teacher-goals-dashboard__table-scroll {
        padding-right: 10px;
        padding-left: 10px;
    }

    .teacher-goals-dashboard__matrix { min-width: 890px; }

    .teacher-goals-dashboard__savebar {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .teacher-goals-dashboard__save-actions { justify-content: flex-end; }
}

@media (max-width: 430px) {
    .teacher-goals-dashboard__editor-guide p { font-size: .62rem; }
    .teacher-goals-dashboard__save-status { align-items: flex-start; }

    .teacher-goals-dashboard__save-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .teacher-goals-dashboard__save-actions button { width: 100%; }
}

/* Docentes · composición superior alineada con la referencia del consolidado. */
@media (min-width: 1181px) {
    .teacher-goals-dashboard__hero {
        min-height: 82px;
        padding: 18px 54px;
        background: #004b28;
    }

    .teacher-goals-dashboard__hero h1 {
        font-size: clamp(1.35rem, 1.67vw, 1.98rem);
    }

    .teacher-goals-dashboard__back {
        width: 116px;
        min-width: 116px;
        min-height: 45px;
        padding: 9px 18px;
        font-size: .82rem;
    }

    .teacher-goals-dashboard__filters {
        grid-template-columns:
            minmax(250px, 1.42fr)
            minmax(150px, 1fr)
            minmax(190px, 1.19fr)
            minmax(130px, .85fr)
            minmax(130px, .82fr)
            190px;
        gap: clamp(14px, 1.32vw, 25px);
        margin: 0 20px;
        padding: 30px 6px 19px;
    }

    .teacher-goals-dashboard__filter--institution,
    .teacher-goals-dashboard__filter--place,
    .teacher-goals-dashboard__filter:not(.teacher-goals-dashboard__filter--institution):not(.teacher-goals-dashboard__filter--place) {
        grid-column: auto;
    }

    .teacher-goals-dashboard__filter > span:first-child {
        margin: 0 0 8px 9px;
        font-size: .75rem;
        line-height: 1.2;
    }

    .teacher-goals-dashboard__control > i {
        left: 18px;
    }

    .teacher-goals-dashboard__control select {
        height: 48px;
        padding-right: 36px;
        padding-left: 22px;
        border-radius: 8px;
        font-size: .82rem;
    }

    .teacher-goals-dashboard__control--grade select {
        padding-left: 55px;
    }

    .teacher-goals-dashboard__advanced {
        width: 190px;
        min-width: 190px;
        height: 48px;
        border-radius: 8px;
        font-size: .78rem;
    }
}

/* Docentes · Escritorio personal, integrado al menú principal. */

.teacher-home-dashboard {
    --teacher-home-green-950: #034525;
    --teacher-home-green-900: #075b34;
    --teacher-home-green-800: #08743f;
    --teacher-home-green-700: #0b884a;
    --teacher-home-green-100: #e5f2e9;
    --teacher-home-green-50: #f4faf6;
    --teacher-home-ink: #18221c;
    --teacher-home-muted: #637068;
    --teacher-home-line: #dfe6e1;
    --teacher-home-surface: #fff;
    --teacher-home-warning: #ee9d05;
    --teacher-home-danger: #ce2028;
    width: 100%;
    min-height: 100vh;
    color: var(--teacher-home-ink);
    background:
        radial-gradient(circle at 88% 7%, rgba(16, 129, 73, .045), transparent 25rem),
        #f9fbfa;
    font-family: inherit;
}

.teacher-home-dashboard,
.teacher-home-dashboard *,
.teacher-home-dashboard *::before,
.teacher-home-dashboard *::after {
    box-sizing: border-box;
}

.teacher-home-dashboard__header {
    min-height: 108px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 18px clamp(22px, 2.5vw, 42px);
    border-bottom: 1px solid #d8ded9;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 2px 10px rgba(19, 65, 40, .035);
    position: relative;
    z-index: 20;
}

.teacher-home-dashboard__heading {
    min-width: 0;
}

.teacher-home-dashboard__heading h1 {
    margin: 0;
    color: var(--teacher-home-green-900);
    font-size: clamp(2rem, 3vw, 2.72rem);
    font-weight: 850;
    letter-spacing: -.04em;
    line-height: 1.03;
}

.teacher-home-dashboard__heading p {
    margin: 7px 0 0;
    color: #263029;
    font-size: clamp(.94rem, 1.35vw, 1.18rem);
    line-height: 1.25;
}

.teacher-home-dashboard__header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: none;
}

.teacher-home-dashboard__notification {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 50%;
    color: #172019;
    font-size: 1.55rem;
    text-decoration: none;
    transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}

.teacher-home-dashboard__notification:hover,
.teacher-home-dashboard__notification:focus-visible {
    border-color: #c4d8ca;
    background: var(--teacher-home-green-50);
    color: var(--teacher-home-green-800);
    transform: translateY(-1px);
}

.teacher-home-dashboard__profile {
    position: relative;
}

.teacher-home-dashboard__profile summary {
    min-height: 56px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 4px 7px;
    border-radius: 12px;
    color: #19231d;
    cursor: pointer;
    list-style: none;
    transition: background .18s ease;
}

.teacher-home-dashboard__profile summary::-webkit-details-marker {
    display: none;
}

.teacher-home-dashboard__profile summary:hover,
.teacher-home-dashboard__profile summary:focus-visible,
.teacher-home-dashboard__profile[open] summary {
    outline: none;
    background: var(--teacher-home-green-50);
}

.teacher-home-dashboard__avatar {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    flex: none;
    border: 3px solid var(--teacher-home-green-800);
    border-radius: 50%;
    background: #fff;
    color: var(--teacher-home-green-900);
    font-size: .91rem;
    font-weight: 900;
    letter-spacing: .02em;
}

.teacher-home-dashboard__profile-name {
    max-width: 230px;
    overflow: hidden;
    font-size: 1.02rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.teacher-home-dashboard__profile summary > i {
    margin-left: 5px;
    font-size: .8rem;
    transition: transform .18s ease;
}

.teacher-home-dashboard__profile[open] summary > i {
    transform: rotate(180deg);
}

.teacher-home-dashboard__profile nav {
    width: 205px;
    display: grid;
    gap: 3px;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 50;
    padding: 7px;
    border: 1px solid var(--teacher-home-line);
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 16px 38px rgba(17, 55, 33, .16);
}

.teacher-home-dashboard__profile nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 7px;
    color: #2a382f;
    font-size: .88rem;
    font-weight: 700;
    text-decoration: none;
}

.teacher-home-dashboard__profile nav a:hover,
.teacher-home-dashboard__profile nav a:focus-visible {
    background: var(--teacher-home-green-50);
    color: var(--teacher-home-green-800);
}

.teacher-home-dashboard__body {
    width: 100%;
    max-width: 1700px;
    margin: 0 auto;
    padding: 18px clamp(18px, 1.75vw, 30px) 30px;
}

.teacher-home-dashboard__toolbar {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 14px;
}

.teacher-home-dashboard__toolbar h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: clamp(1.08rem, 1.7vw, 1.4rem);
    font-weight: 800;
    letter-spacing: -.015em;
    white-space: nowrap;
}

.teacher-home-dashboard__toolbar h2 i {
    color: var(--teacher-home-green-800);
    font-size: 1.55rem;
}

.teacher-home-dashboard__filters {
    display: grid;
    grid-template-columns: repeat(3, minmax(190px, 1fr));
    gap: 18px;
    position: relative;
}

.teacher-home-dashboard__filters label {
    min-width: 0;
}

.teacher-home-dashboard__filters select {
    width: 100%;
    height: 47px;
    padding: 9px 42px 9px 15px;
    border: 1px solid #cfd7d1;
    border-radius: 8px;
    outline: 0;
    background-color: #fff;
    color: #252e28;
    font: inherit;
    font-size: .88rem;
    box-shadow: 0 1px 2px rgba(25, 60, 39, .025);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.teacher-home-dashboard__filters select:hover {
    border-color: #a8b9ad;
}

.teacher-home-dashboard__filters select:focus-visible {
    border-color: var(--teacher-home-green-700);
    box-shadow: 0 0 0 3px rgba(11, 136, 74, .14);
}

.teacher-home-dashboard__apply-filters {
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    position: absolute;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}

.teacher-home-dashboard__apply-filters:focus {
    width: auto;
    height: 39px;
    padding: 7px 13px;
    overflow: visible;
    clip: auto;
    clip-path: none;
    top: calc(100% + 5px);
    right: 0;
    z-index: 15;
    border-radius: 7px;
    background: var(--teacher-home-green-800);
    color: #fff;
}

.teacher-home-dashboard__kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 16px;
}

.teacher-home-dashboard__notice {
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 15px;
    padding: 10px 14px;
    border: 1px solid #e7cf86;
    border-radius: 9px;
    background: #fff9e8;
    color: #71520a;
    font-size: .82rem;
    line-height: 1.4;
}

.teacher-home-dashboard__notice i {
    flex: none;
    color: #bd7b00;
    font-size: 1rem;
}

.teacher-home-dashboard__notice.is-error {
    border-color: #efb1b4;
    background: #fff1f2;
    color: #912029;
}

.teacher-home-dashboard__notice.is-error i {
    color: #c62831;
}

.teacher-home-dashboard__kpi {
    min-width: 0;
    min-height: 128px;
    display: flex;
    align-items: center;
    gap: clamp(14px, 1.6vw, 24px);
    padding: 18px clamp(16px, 1.7vw, 25px);
    border: 1px solid var(--teacher-home-line);
    border-radius: 12px;
    background: var(--teacher-home-surface);
    box-shadow: 0 4px 14px rgba(22, 58, 37, .075);
}

.teacher-home-dashboard__kpi-icon {
    width: 78px;
    height: 78px;
    display: grid;
    place-items: center;
    flex: none;
    border-radius: 50%;
    background: var(--teacher-home-green-100);
    color: var(--teacher-home-green-800);
    font-size: 2.45rem;
}

.teacher-home-dashboard__kpi > div {
    min-width: 0;
}

.teacher-home-dashboard__kpi > div > span {
    display: block;
    overflow: hidden;
    color: var(--teacher-home-green-900);
    font-size: clamp(.96rem, 1.3vw, 1.13rem);
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.teacher-home-dashboard__kpi strong {
    display: block;
    margin-top: 3px;
    color: var(--teacher-home-green-900);
    font-size: clamp(2rem, 3vw, 2.7rem);
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1;
}

.teacher-home-dashboard__kpi strong.is-empty {
    margin-top: 9px;
    color: #77827b;
    font-size: 1rem;
    letter-spacing: 0;
}

.teacher-home-dashboard__kpi-note {
    display: block;
    margin-top: 6px;
    color: #6a776f;
    font-size: .65rem;
    font-weight: 650;
    line-height: 1.2;
}

.teacher-home-dashboard__kpi--risk .teacher-home-dashboard__kpi-icon {
    background: #fae6e7;
    color: var(--teacher-home-danger);
}

.teacher-home-dashboard__kpi--risk > div > span,
.teacher-home-dashboard__kpi--risk strong {
    color: var(--teacher-home-danger);
}

.teacher-home-dashboard__kpi--risk strong.is-empty {
    color: #77827b;
}

.teacher-home-dashboard__workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.47fr) minmax(350px, 1fr);
    gap: 18px;
    align-items: start;
}

.teacher-home-dashboard__primary-column,
.teacher-home-dashboard__secondary-column {
    min-width: 0;
    display: grid;
    gap: 16px;
}

.teacher-home-dashboard__card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--teacher-home-line);
    border-radius: 12px;
    background: var(--teacher-home-surface);
    box-shadow: 0 4px 14px rgba(22, 58, 37, .065);
}

.teacher-home-dashboard__card-header {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 17px 20px 10px;
}

.teacher-home-dashboard__card-header h2 {
    margin: 0;
    color: var(--teacher-home-green-900);
    font-size: clamp(1.02rem, 1.45vw, 1.25rem);
    font-weight: 850;
    letter-spacing: -.018em;
    line-height: 1.2;
}

.teacher-home-dashboard__card-header small {
    display: block;
    margin-top: 4px;
    color: var(--teacher-home-muted);
    font-size: .76rem;
}

.teacher-home-dashboard__areas-card {
    min-height: 354px;
}

.teacher-home-dashboard__area-list {
    display: grid;
    gap: 21px;
    padding: 15px 22px 14px;
}

.teacher-home-dashboard__area-row {
    display: grid;
    grid-template-columns: minmax(130px, 175px) minmax(120px, 1fr) 54px;
    align-items: center;
    gap: 16px;
}

.teacher-home-dashboard__area-name {
    overflow: hidden;
    color: #263129;
    font-size: .91rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.teacher-home-dashboard__progress {
    height: 13px;
    display: block;
    overflow: hidden;
    border-radius: 999px;
    background: #e9edeb;
}

.teacher-home-dashboard__progress > span {
    width: var(--teacher-area-progress, 0%);
    height: 100%;
    display: block;
    border-radius: inherit;
    background: linear-gradient(90deg, #159347, #087b3a);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .1);
}

.teacher-home-dashboard__area-row.is-process .teacher-home-dashboard__progress > span {
    background: linear-gradient(90deg, #f6bc16, #e9a501);
}

.teacher-home-dashboard__area-row.is-empty .teacher-home-dashboard__progress > span {
    display: none;
}

.teacher-home-dashboard__area-row > strong {
    color: var(--teacher-home-green-800);
    font-size: 1.18rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.teacher-home-dashboard__area-row.is-process > strong {
    color: #d99300;
}

.teacher-home-dashboard__area-row.is-empty > strong {
    color: #879088;
    font-size: .72rem;
    font-weight: 700;
}

.teacher-home-dashboard__progress-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 30px;
    padding: 7px 22px 19px;
    color: #445047;
    font-size: .78rem;
}

.teacher-home-dashboard__progress-legend span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.teacher-home-dashboard__progress-legend i,
.teacher-home-dashboard__risk-legend i {
    width: 15px;
    height: 15px;
    display: inline-block;
    flex: none;
    border-radius: 3px;
    background: #149245;
}

.teacher-home-dashboard__progress-legend i.is-process {
    background: #f0aa00;
}

.teacher-home-dashboard__progress-legend i.is-empty {
    background: #cbd2cd;
}

.teacher-home-dashboard__empty-state {
    min-height: 230px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 5px;
    padding: 24px;
    color: #6b766f;
    text-align: center;
}

.teacher-home-dashboard__empty-state i {
    margin-bottom: 3px;
    color: #82a08c;
    font-size: 2rem;
}

.teacher-home-dashboard__empty-state strong {
    color: #3c4b41;
    font-size: .93rem;
}

.teacher-home-dashboard__empty-state span {
    max-width: 440px;
    font-size: .78rem;
    line-height: 1.45;
}

.teacher-home-dashboard__empty-state--compact {
    min-height: 145px;
}

.teacher-home-dashboard__empty-state--risk {
    min-height: 260px;
}

.teacher-home-dashboard__attention-card {
    min-height: 318px;
}

.teacher-home-dashboard__table-wrap {
    width: 100%;
    overflow-x: auto;
}

.teacher-home-dashboard__table {
    width: 100%;
    min-width: 740px;
    border-collapse: collapse;
    font-size: .76rem;
}

.teacher-home-dashboard__table th,
.teacher-home-dashboard__table td {
    padding: 10px 11px;
    border-top: 1px solid #e2e7e3;
    vertical-align: middle;
}

.teacher-home-dashboard__table th {
    color: #354139;
    background: #fbfcfb;
    font-weight: 800;
    text-align: left;
    white-space: nowrap;
}

.teacher-home-dashboard__table tbody tr {
    transition: background .15s ease;
}

.teacher-home-dashboard__table tbody tr:hover {
    background: #f8fbf9;
}

.teacher-home-dashboard__student {
    display: flex;
    align-items: center;
    gap: 9px;
}

.teacher-home-dashboard__student > i {
    flex: none;
    color: #819087;
    font-size: 1.18rem;
}

.teacher-home-dashboard__student > i.is-high { color: var(--teacher-home-danger); }
.teacher-home-dashboard__student > i.is-medium { color: var(--teacher-home-warning); }
.teacher-home-dashboard__student > i.is-low { color: var(--teacher-home-green-700); }

.teacher-home-dashboard__student strong,
.teacher-home-dashboard__student small {
    display: block;
}

.teacher-home-dashboard__student strong {
    color: #29342d;
    font-size: .78rem;
}

.teacher-home-dashboard__student small {
    margin-top: 2px;
    color: #77827b;
    font-size: .65rem;
}

.teacher-home-dashboard__achievement {
    min-width: 32px;
    display: inline-flex;
    justify-content: center;
    padding: 3px 8px;
    border: 1px solid #cfd7d1;
    border-radius: 5px;
    background: #f7f9f8;
    color: #4e5952;
    font-weight: 850;
}

.teacher-home-dashboard__achievement.is-positive {
    border-color: #74bf8d;
    background: #ebf8ef;
    color: #08783b;
}

.teacher-home-dashboard__achievement.is-process {
    border-color: #efc86a;
    background: #fff7df;
    color: #9c6800;
}

.teacher-home-dashboard__achievement.is-critical {
    border-color: #f1a3a6;
    background: #fff0f0;
    color: #b51e26;
}

.teacher-home-dashboard__risk-tag {
    display: inline-flex;
    padding: 4px 7px;
    border: 1px solid #d3dbd6;
    border-radius: 5px;
    background: #f8faf9;
    color: #56625a;
    line-height: 1.15;
}

.teacher-home-dashboard__risk-tag.is-high {
    border-color: #eea3a7;
    background: #fff0f0;
    color: #b71d25;
}

.teacher-home-dashboard__risk-tag.is-medium {
    border-color: #f1c36b;
    background: #fff6e5;
    color: #a36500;
}

.teacher-home-dashboard__risk-tag.is-low {
    border-color: #92c9a4;
    background: #eef9f1;
    color: #08743b;
}

.teacher-home-dashboard__follow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 5px 8px;
    border: 1px solid #5b9b70;
    border-radius: 5px;
    color: var(--teacher-home-green-800);
    font-size: .7rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.teacher-home-dashboard__follow:hover,
.teacher-home-dashboard__follow:focus-visible {
    background: var(--teacher-home-green-800);
    color: #fff;
}

.teacher-home-dashboard__follow.is-disabled {
    border-color: #d5dbd7;
    color: #89918c;
    cursor: default;
}

.teacher-home-dashboard__table-note {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid #e1e7e3;
    background: #fbfcfb;
    color: #69756d;
    font-size: .68rem;
}

.teacher-home-dashboard__table-note i {
    color: var(--teacher-home-green-800);
}

.teacher-home-dashboard__risk-card {
    min-height: 307px;
}

.teacher-home-dashboard__risk-content {
    min-height: 240px;
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(155px, .95fr);
    align-items: center;
    gap: clamp(14px, 2vw, 28px);
    padding: 3px 22px 22px;
}

.teacher-home-dashboard__risk-donut {
    width: min(190px, 100%);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    justify-self: center;
    position: relative;
    border-radius: 50%;
    background: conic-gradient(
        var(--teacher-home-danger) 0 var(--teacher-risk-high-end),
        var(--teacher-home-warning) var(--teacher-risk-high-end) var(--teacher-risk-medium-end),
        #2f9e44 var(--teacher-risk-medium-end) var(--teacher-risk-low-end),
        #cbd2cd var(--teacher-risk-low-end) 100%
    );
    filter: drop-shadow(0 3px 6px rgba(20, 73, 40, .08));
}

.teacher-home-dashboard__risk-donut::after {
    width: 58%;
    aspect-ratio: 1;
    position: absolute;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(18, 79, 43, .035);
    content: "";
}

.teacher-home-dashboard__risk-donut > span {
    display: grid;
    place-items: center;
    position: relative;
    z-index: 1;
    color: var(--teacher-home-green-900);
    line-height: 1;
}

.teacher-home-dashboard__risk-donut strong {
    font-size: 1.4rem;
    font-variant-numeric: tabular-nums;
}

.teacher-home-dashboard__risk-donut small {
    margin-top: 5px;
    color: var(--teacher-home-muted);
    font-size: .62rem;
    font-weight: 750;
    text-transform: uppercase;
}

.teacher-home-dashboard__risk-legend {
    min-width: 0;
    display: grid;
    gap: 2px;
    margin: 0;
}

.teacher-home-dashboard__risk-legend > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 2px;
}

.teacher-home-dashboard__risk-legend dt {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #354038;
    font-size: .82rem;
    font-weight: 500;
}

.teacher-home-dashboard__risk-legend dd {
    margin: 0;
    color: #202a23;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}

.teacher-home-dashboard__risk-legend i {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.teacher-home-dashboard__risk-legend i.is-high { background: var(--teacher-home-danger); }
.teacher-home-dashboard__risk-legend i.is-medium { background: var(--teacher-home-warning); }
.teacher-home-dashboard__risk-legend i.is-low { background: #2f9e44; }
.teacher-home-dashboard__risk-legend i.is-no-data { background: #cbd2cd; }

.teacher-home-dashboard__risk-legend > div.is-total {
    margin-top: 5px;
    padding-top: 12px;
    border-top: 1px solid #dce3de;
}

.teacher-home-dashboard__risk-legend > div.is-total dt,
.teacher-home-dashboard__risk-legend > div.is-total dd {
    font-weight: 850;
}

.teacher-home-dashboard__risk-legend > div.is-total dd {
    color: var(--teacher-home-green-800);
    font-size: 1.13rem;
}

.teacher-home-dashboard__upcoming-card {
    min-height: 263px;
}

.teacher-home-dashboard__upcoming-list {
    padding: 0 18px 10px;
}

.teacher-home-dashboard__upcoming-item {
    min-height: 72px;
    display: grid;
    grid-template-columns: 45px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
    border-top: 1px solid #dfe5e1;
}

.teacher-home-dashboard__upcoming-item:first-child {
    border-top: 0;
}

.teacher-home-dashboard__calendar-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--teacher-home-green-100);
    color: var(--teacher-home-green-900);
    font-size: 1.3rem;
}

.teacher-home-dashboard__upcoming-item > div {
    min-width: 0;
}

.teacher-home-dashboard__upcoming-item strong,
.teacher-home-dashboard__upcoming-item span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.teacher-home-dashboard__upcoming-item strong {
    color: #303a33;
    font-size: .78rem;
    font-weight: 700;
}

.teacher-home-dashboard__upcoming-item span {
    margin-top: 3px;
    color: #657169;
    font-size: .69rem;
}

.teacher-home-dashboard__upcoming-item time {
    color: var(--teacher-home-green-800);
    font-size: .7rem;
    font-variant-numeric: tabular-nums;
    font-weight: 850;
    white-space: nowrap;
}

.teacher-home-dashboard__intervention {
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 13px 20px;
    border: 1px solid #04743d;
    border-radius: 10px;
    background: linear-gradient(110deg, #078244, #026b36);
    color: #fff;
    font-size: clamp(1rem, 1.55vw, 1.28rem);
    font-weight: 850;
    letter-spacing: -.01em;
    text-decoration: none;
    box-shadow: 0 6px 13px rgba(3, 105, 53, .17);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.teacher-home-dashboard__intervention i {
    font-size: 1.8rem;
}

.teacher-home-dashboard__intervention:hover,
.teacher-home-dashboard__intervention:focus-visible {
    color: #fff;
    filter: brightness(1.04);
    transform: translateY(-1px);
    box-shadow: 0 9px 18px rgba(3, 105, 53, .22);
}

.teacher-home-dashboard__scope {
    min-height: 43px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
    padding: 9px 14px;
    border: 1px solid #d8e8dd;
    border-radius: 9px;
    background: #f4faf6;
    color: #477055;
    font-size: .73rem;
}

.teacher-home-dashboard__scope span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.teacher-home-dashboard__scope i {
    color: var(--teacher-home-green-800);
}

.teacher-home-dashboard__scope small {
    flex: none;
    font-size: .69rem;
}

@media (max-width: 1320px) {
    .teacher-home-dashboard__header-actions { gap: 10px; }
    .teacher-home-dashboard__filters { gap: 10px; grid-template-columns: repeat(3, minmax(165px, 1fr)); }
    .teacher-home-dashboard__kpis { gap: 12px; }
    .teacher-home-dashboard__kpi { gap: 13px; padding: 16px; }
    .teacher-home-dashboard__kpi-icon { width: 66px; height: 66px; font-size: 2rem; }
    .teacher-home-dashboard__workspace { grid-template-columns: minmax(0, 1.35fr) minmax(330px, 1fr); gap: 14px; }
}

@media (max-width: 1420px) and (min-width: 781px) {
    .teacher-home-dashboard__toolbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 13px;
    }

    .teacher-home-dashboard__filters {
        width: 100%;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .teacher-home-dashboard__kpi > div > span {
        white-space: normal;
        line-height: 1.15;
    }

    .teacher-home-dashboard__workspace {
        grid-template-columns: 1fr;
    }

    .teacher-home-dashboard__secondary-column {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
    }

    .teacher-home-dashboard__secondary-column .teacher-home-dashboard__intervention {
        grid-column: 1 / -1;
    }
}

@media (max-width: 1080px) {
    .teacher-home-dashboard__toolbar { align-items: flex-start; flex-direction: column; gap: 13px; }
    .teacher-home-dashboard__filters { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .teacher-home-dashboard__workspace { grid-template-columns: 1fr; }
    .teacher-home-dashboard__secondary-column { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
    .teacher-home-dashboard__secondary-column .teacher-home-dashboard__intervention { grid-column: 1 / -1; }
    .teacher-home-dashboard__risk-card,
    .teacher-home-dashboard__upcoming-card { min-height: 100%; }
}

@media (max-width: 780px) {
    .teacher-home-dashboard__header { min-height: 88px; padding: 14px 16px; }
    .teacher-home-dashboard__heading h1 { font-size: 1.7rem; }
    .teacher-home-dashboard__heading p { max-width: 420px; font-size: .82rem; }
    .teacher-home-dashboard__header-actions { gap: 3px; }
    .teacher-home-dashboard__notification { width: 39px; height: 39px; font-size: 1.25rem; }
    .teacher-home-dashboard__avatar { width: 43px; height: 43px; border-width: 2px; }
    .teacher-home-dashboard__profile-name { display: none; }
    .teacher-home-dashboard__profile summary { gap: 5px; padding-right: 2px; }
    .teacher-home-dashboard__body { padding: 14px 12px 22px; }
    .teacher-home-dashboard__filters { grid-template-columns: 1fr; gap: 8px; }
    .teacher-home-dashboard__filters select { height: 44px; }
    .teacher-home-dashboard__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .teacher-home-dashboard__kpi { min-height: 104px; padding: 13px; }
    .teacher-home-dashboard__kpi-icon { width: 55px; height: 55px; font-size: 1.65rem; }
    .teacher-home-dashboard__kpi > div > span { font-size: .78rem; }
    .teacher-home-dashboard__kpi strong { font-size: 1.85rem; }
    .teacher-home-dashboard__secondary-column { grid-template-columns: 1fr; }
    .teacher-home-dashboard__secondary-column .teacher-home-dashboard__intervention { grid-column: auto; }
    .teacher-home-dashboard__area-row { grid-template-columns: minmax(90px, 135px) minmax(80px, 1fr) 48px; gap: 9px; }
    .teacher-home-dashboard__area-list { gap: 18px; padding-right: 15px; padding-left: 15px; }
    .teacher-home-dashboard__area-name { font-size: .78rem; }
    .teacher-home-dashboard__area-row > strong { font-size: .95rem; }
    .teacher-home-dashboard__risk-content { grid-template-columns: minmax(135px, .9fr) minmax(145px, 1fr); }
    .teacher-home-dashboard__scope { align-items: flex-start; flex-direction: column; gap: 5px; }
}

@media (max-width: 470px) {
    .teacher-home-dashboard__header { align-items: flex-start; }
    .teacher-home-dashboard__heading h1 { font-size: 1.43rem; }
    .teacher-home-dashboard__heading p { font-size: .72rem; }
    .teacher-home-dashboard__notification { display: none; }
    .teacher-home-dashboard__profile summary > i { display: none; }
    .teacher-home-dashboard__toolbar h2 { font-size: 1rem; }
    .teacher-home-dashboard__kpi { min-height: 93px; gap: 10px; padding: 11px; }
    .teacher-home-dashboard__kpi-icon { width: 46px; height: 46px; font-size: 1.35rem; }
    .teacher-home-dashboard__kpi > div > span { white-space: normal; line-height: 1.1; }
    .teacher-home-dashboard__kpi strong { font-size: 1.5rem; }
    .teacher-home-dashboard__kpi strong.is-empty { font-size: .72rem; }
    .teacher-home-dashboard__card-header { padding-right: 14px; padding-left: 14px; }
    .teacher-home-dashboard__area-row { grid-template-columns: 1fr 43px; }
    .teacher-home-dashboard__area-name { grid-column: 1 / -1; }
    .teacher-home-dashboard__risk-content { grid-template-columns: 1fr; }
    .teacher-home-dashboard__risk-donut { width: 165px; }
    .teacher-home-dashboard__upcoming-item { grid-template-columns: 40px minmax(0, 1fr); }
    .teacher-home-dashboard__upcoming-item time { grid-column: 2; }
}