@font-face { font-family: Inter; src: url('../fonts/InterVariable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
:root { --bs-primary: #14766b; --bs-primary-rgb: 20,118,107; --bs-link-color: #14766b; --bs-link-hover-color: #0c554c; --bs-body-font-family: Inter, 'Segoe UI', sans-serif; --bs-body-color: #233b37; }
body { background: #f6f8f7; font-size: .9rem; }
h1, h2, h3 { color: #192f2a; font-weight: 600; letter-spacing: -.035em; }
h1.h3 { font-size: clamp(1.65rem, 2.2vw, 2.15rem); line-height: 1.25; }
h2.h5 { font-size: 1.05rem; letter-spacing: -.02em; margin-bottom: 1rem; }
.text-body-secondary { color: #6f807a !important; }
.app-shell { width: 100%; max-width: 1512px; margin-inline: auto; padding-inline: clamp(20px, 3.5vw, 56px); }
.app-navbar { min-height: 80px; background: #fff; border-bottom: 1px solid #e5ebe8; }
.navbar-brand { display: inline-flex; align-items: center; gap: .7rem; color: #203c35; font-size: 1.1rem; font-weight: 650; letter-spacing: -.04em; margin: 0; }
.header-link { color: #526c63; font-size: .85rem; text-decoration: none; }
.header-link:hover { color: var(--bs-primary); }
.breadcrumb { --bs-breadcrumb-divider: '›'; font-size: .75rem; gap: .15rem; background: transparent; box-shadow: none; padding: 0; }
.breadcrumb a { color: #798a83; text-decoration: none; }
.breadcrumb a:hover { color: var(--bs-primary); }
.breadcrumb .active { color: #52685f; }
.page-heading { display: flex; align-items: start; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.8rem; }
.page-heading p { margin-bottom: 0; }
.eyebrow { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #798a83; margin-bottom: .5rem; }
.page-actions { display: flex; flex-wrap: wrap; gap: .5rem; flex-shrink: 0; }
.btn { border-radius: 10px; font-size: .82rem; font-weight: 600; padding: .65rem 1rem; box-shadow: none; }
.btn-sm { font-size: .74rem; padding: .4rem .7rem; }
.btn-primary { --bs-btn-bg: #14766b; --bs-btn-border-color: #14766b; --bs-btn-hover-bg: #0f6057; --bs-btn-hover-border-color: #0f6057; --bs-btn-active-bg: #0b4f48; --bs-btn-active-border-color: #0b4f48; --bs-btn-disabled-bg: #14766b; --bs-btn-disabled-border-color: #14766b; }
.btn-outline-primary { --bs-btn-color: #14766b; --bs-btn-border-color: #b8d5cd; --bs-btn-hover-bg: #14766b; --bs-btn-hover-border-color: #14766b; --bs-btn-active-bg: #14766b; --bs-btn-active-border-color: #14766b; background: #fff; }
.btn-outline-secondary { --bs-btn-color: #52685f; --bs-btn-border-color: #dce4df; --bs-btn-hover-bg: #eaf0ed; --bs-btn-hover-border-color: #dce4df; --bs-btn-hover-color: #233b37; background: #fff; }
.btn-quiet { color: #61776d; background: transparent; border-color: transparent; }
.btn-quiet:hover, .btn-quiet:focus-visible { color: #233b37; background: #edf3f0; }
.form-control, .form-select { font-size: .88rem; border-radius: 9px; border-color: #d9e3dd; padding-block: .65rem; }
.form-control:focus, .form-select:focus { border-color: #72aa9b; box-shadow: 0 0 0 3px #14766b18; }
.form-check-input:checked, .progress-bar { background-color: var(--bs-primary); border-color: var(--bs-primary); }
.form-label { font-size: .84rem; font-weight: 500; }
.card, .surface, .report-section { background: #fff; border: 1px solid #e3eae6; border-radius: 18px; box-shadow: 0 2px 6px #203b3103; }
.surface, .report-section { padding: 1.6rem; }
.card-body { padding: 1.5rem; }
.report-metrics .card { border: 1px solid #e3eae6; }
.report-metrics > div:first-child .card { background: #e8f3ee; border-color: #dcece3; }
.report-metrics .fs-3 { color: #233b37; font-size: 2rem !important; font-weight: 600; letter-spacing: -.05em; font-variant-numeric: tabular-nums; margin: .5rem 0; }
.report-metrics .small { font-size: .73rem; }
.table { --bs-table-color: #3b5048; --bs-table-striped-bg: #f9fbfa; --bs-table-border-color: #edf1ee; font-size: .82rem; }
.table thead th { background: #fafcfb; color: #83928b; font-size: .7rem; font-weight: 500; text-transform: none; letter-spacing: 0; border-bottom-width: 1px; }
.table > :not(caption) > * > * { padding: .85rem 1rem; }
.table td:first-child { color: #89968f; }
.table td a:not(.btn) { color: #243d33; font-weight: 550; text-decoration: none; }
.table td a:not(.btn):hover { color: var(--bs-primary); }
.status-pill { display: inline-flex; align-items: center; gap: .4rem; border-radius: 6px; padding: .3rem .55rem; background: #edf5f0; color: #467561; font-size: .73rem; white-space: nowrap; }
.status-pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.alert { border-radius: 12px; font-size: .82rem; }
.alert-success { background: #edf6f0; border-color: #e0eee4; color: #4a735c; }
.collection-summary { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; }
.collection-number { font-size: 2.2rem; font-weight: 600; letter-spacing: -.05em; color: #233b37; white-space: nowrap; }
.collection-number span { color: #a0ada6; }
.collection-summary .progress { height: 6px; background: #e9f0ec; }
.group-card { border-radius: 12px; background: #fcfdfc; border: 1px solid #e5ebe7; padding: 1rem; height: 100%; }
.group-card h3 { font-size: .8rem; font-weight: 600; }
.group-card li { font-size: .77rem; line-height: 1.8; }
.table-responsive > .table { margin-bottom: 0; }
.section-nav { gap: 1rem; border-bottom: 1px solid #dfe7e2; }
.section-nav .nav-link { color: #7b8e83; border-radius: 0; border: 0; border-bottom: 2px solid transparent; background: none; font-size: .8rem; padding: .65rem 0 .9rem; }
.section-nav .nav-link:hover, .section-nav .nav-link:focus { color: var(--bs-primary); border-bottom-color: var(--bs-primary); }
section[id] { scroll-margin-top: 1rem; }
.student-section[id] { scroll-margin-top: 100px; }
.student-status { top: .5rem; z-index: 1010; box-shadow: 0 4px 18px #21365512; }
.student-section { padding: 1.25rem; }
.student-section .list-group-item { padding: 1rem; }
.student-section .list-group-item:has(select:valid) { border-left: 3px solid #198754; }
.student-section .form-check-label { display: block; padding-bottom: .5rem; overflow-wrap: anywhere; }
.student-section select { min-height: 44px; }
.student-section .positive-choice { white-space: normal; }
.student-section .progress { height: 5px; }
.login-container { max-width: 420px; }
.qr-code { width: 150px; height: 150px; flex-shrink: 0; }
.qr-card { break-inside: avoid; background: #fff; }
.sociogram { display: block; width: 100%; max-width: 1000px; max-height: 72vh; background: #fff; }
.interactive-graph { height: 620px; max-height: 75vh; min-height: 420px; border: 1px solid #e1e9e3; border-radius: 12px; background: radial-gradient(#cfdbd3 .7px, transparent .7px) 0 0 / 18px 18px #fcfdfc; }
.graph-ready .sociogram { display: none; }
.graph-toolbar { display: none; }
.graph-ready .graph-toolbar { display: flex; }
.graph-selection { min-height: 1.5rem; font-size: .78rem; color: #687e71; }
.graph-section:has(#show-positive:not(:checked)) .edge-positive,
.graph-section:has(#show-negative:not(:checked)) .edge-negative,
.graph-section:has(#mutual-only:checked) .edge-single { display: none; }
.matrix-table { font-size: .8rem; text-align: center; }
.matrix-table th, .matrix-table td { min-width: 32px; padding: .4rem; }
.matrix-scroll { max-height: 580px; border: 1px solid #dbe3ef; border-radius: .5rem; }
.matrix-table { border-collapse: separate; border-spacing: 0; }
.matrix-table thead th { position: sticky; top: 0; z-index: 2; }
.matrix-table th:first-child { position: sticky; left: 0; z-index: 1; background: #f0f4fa; }
.matrix-table thead th:first-child { z-index: 3; min-width: 100px; }
.matrix-table .choice-positive { --bs-table-bg: #e7f0ff; color: #124a99; font-weight: 600; }
.matrix-table .choice-negative { --bs-table-bg: #fcebec; color: #a52834; }
@media (min-width: 768px) {
    .rating-row { display: grid; grid-template-columns: 1fr 260px; align-items: center; gap: 1rem; }
    .rating-row .form-label { margin-bottom: 0; }
}
@media (max-width: 575.98px) {
    .surface, .report-section, .student-section { padding: 1rem; }
    .app-navbar { min-height: 68px; }
    .page-heading { flex-direction: column; }
    .breadcrumb { overflow-wrap: anywhere; }
    .section-nav { gap: .8rem; }
    .qr-card { flex-wrap: wrap; }
}
@page { size: A4 landscape; margin: 10mm; }
@page qr { size: A4 portrait; margin: 12mm; }
.qr-sheet { page: qr; }
@media print {
    body { background: #fff; color: #000; }
    .surface, .report-section, .card { border: 0; box-shadow: none; padding: 0; }
    header, footer { display: none !important; }
    main { padding: 0 !important; }
    .qr-code { width: 32mm; height: 32mm; }
    .table-responsive { overflow: visible; }
    .matrix-scroll { max-height: none; border: 0; }
    .matrix-table th { position: static !important; }
    .matrix-table thead th:first-child { min-width: 0; }
    .table > :not(caption) > * > * { padding: 2px; }
    .matrix-table { font-size: 7pt; width: 100%; }
    .matrix-table th, .matrix-table td { min-width: 0; padding: 1px; }
    .graph-section { break-inside: avoid; }
    .sociogram { max-height: 150mm; }
    .graph-ready .sociogram { display: block; }
    .interactive-graph, .graph-toolbar, .graph-selection { display: none !important; }
    .sociogram g[class] { display: inline !important; }
    tr { break-inside: avoid; }
}