:root {
    --bg: #f6f8f8;
    --surface: #ffffff;
    --surface-soft: #f9fbfb;
    --text: #182424;
    --muted: #62706f;
    --border: #dce5e4;
    --accent: #0e7b64;
    --accent-strong: #08745e;
    --accent-soft: #e8f6f2;
    --center: #0e7b64;
    --center-soft: #e8f6f2;
    --program: #2563eb;
    --program-soft: #eaf1ff;
    --intervention: #a55a05;
    --intervention-soft: #fff4dd;
    --people: #7c3aed;
    --people-soft: #f1ebff;
    --groups: #cf2424;
    --groups-soft: #fff0f0;
    --config: #475569;
    --config-soft: #eef2f7;
    --danger: #b42318;
    --warning: #9b671a;
    --shadow: 0 14px 36px rgba(24, 36, 36, 0.08);
    --radius: 8px;
    --control: 44px;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text);
    background: var(--bg);
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

.is-hidden {
    display: none !important;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

html {
    min-height: 100%;
}

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

body.modal-open {
    overflow: hidden;
}

a {
    color: inherit;
}

button,
input,
select,
textarea {
    font: inherit;
}

svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.app-shell {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    min-height: 100vh;
}

body.nav-collapsed .app-shell {
    grid-template-columns: minmax(0, 1fr);
}

body.nav-collapsed .side-nav {
    display: none;
}

.side-nav {
    position: sticky;
    top: 0;
    height: 100vh;
    min-width: 0;
    padding: 18px;
    background: var(--surface);
    border-right: 1px solid var(--border);
}

.side-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 20px;
}

.side-nav-header .brand {
    flex: 1;
    margin-bottom: 0;
}

.nav-collapse-button {
    flex: 0 0 auto;
}

.nav-restore-button {
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 60;
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    min-height: 38px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    background: var(--surface);
    box-shadow: var(--shadow);
    cursor: pointer;
}

body.nav-collapsed .nav-restore-button {
    display: inline-flex;
}

.brand,
.login-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    text-decoration: none;
}

.brand > div,
.login-brand > div {
    min-width: 0;
}

.brand {
    min-height: 52px;
}

.brand strong,
.login-brand strong {
    display: block;
    font-size: 16px;
    line-height: 1.2;
}

.brand small,
.login-brand small {
    display: block;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
}

.brand-mark {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius);
    background: var(--text);
    color: var(--surface);
    font-weight: 800;
    font-size: 13px;
}

.nav-links {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    border-radius: var(--radius);
    color: var(--muted);
    font-size: 14px;
    text-decoration: none;
}

.nav-link:hover,
.nav-link.is-active {
    background: var(--accent-soft);
    color: var(--accent-strong);
}

.context-tree {
    display: grid;
    gap: 5px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.context-tree-heading {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    border-left: 4px solid var(--center);
    border-radius: var(--radius);
    background: var(--center-soft);
}

summary.context-tree-heading {
    position: relative;
    padding-left: 34px;
    cursor: pointer;
    list-style: none;
}

summary.context-tree-heading::-webkit-details-marker {
    display: none;
}

summary.context-tree-heading::before,
.tree-node summary::before,
.program-mini-card summary::before,
.context-disclosure > summary::before {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.16s ease;
}

summary.context-tree-heading::before {
    position: absolute;
    top: 50%;
    left: 14px;
    color: var(--center);
    transform: translateY(-50%) rotate(-45deg);
}

details[open] > summary.context-tree-heading::before {
    transform: translateY(-50%) rotate(45deg);
}

.tree-node[open] > summary::before,
.program-mini-card[open] > summary::before,
.context-disclosure[open] > summary::before {
    transform: rotate(45deg);
}

.context-tree-heading span {
    color: var(--center);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.context-tree-heading strong {
    font-size: 14px;
    line-height: 1.25;
}

.tree-node {
    min-width: 0;
}

.tree-node summary,
.tree-link {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 34px;
    padding: 0 10px;
    border-radius: var(--radius);
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.tree-node summary {
    cursor: pointer;
    list-style: none;
}

.tree-node summary::-webkit-details-marker {
    display: none;
}

.tree-node summary span:last-child,
.tree-link span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tree-node summary:hover,
.tree-link:hover,
.tree-link.is-active {
    background: var(--surface-soft);
    color: var(--text);
}

.tree-link.small {
    min-height: 30px;
    padding-left: 22px;
    font-size: 12px;
}

.tree-branch {
    display: grid;
    gap: 3px;
    margin-left: 12px;
    padding-left: 9px;
    border-left: 1px solid var(--border);
}

.center-tree-branch {
    margin-top: 6px;
}

.intervention-node-mini {
    margin-top: 3px;
}

.tree-dot {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--muted);
}

.tree-dot.entity-center { background: var(--center); }
.tree-dot.entity-program { background: var(--program); }
.tree-dot.entity-intervention { background: var(--intervention); }
.tree-dot.entity-people { background: var(--people); }
.tree-dot.entity-groups { background: var(--groups); }
.tree-dot.entity-config { background: var(--config); }

.workspace {
    min-width: 0;
    padding: 24px;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.topbar h1 {
    margin: 4px 0 0;
    font-size: 28px;
    line-height: 1.15;
    font-weight: 800;
}

.context-label,
.metric-label {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.topbar-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.button,
.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--control);
    border: 1px solid transparent;
    border-radius: var(--radius);
    padding: 0 14px;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.button.primary {
    color: #ffffff;
    background: var(--accent);
}

.button.primary:hover {
    background: var(--accent-strong);
}

.button.secondary,
.icon-button {
    color: var(--text);
    background: var(--surface);
    border-color: var(--border);
}

.button.secondary {
    min-height: 36px;
    padding: 0 11px;
    font-size: 13px;
}

.button.secondary:hover,
.icon-button:hover {
    border-color: #b6c7c4;
    background: var(--surface-soft);
}

.button.danger {
    color: var(--danger);
    background: #fff1f0;
    border-color: #ffd0cc;
}

.button.danger:hover {
    background: #ffe4e1;
    border-color: #ffb8b0;
}

.button.full {
    width: 100%;
}

.icon-button {
    width: var(--control);
    padding: 0;
}

.notice {
    margin-bottom: 16px;
    border-radius: var(--radius);
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 700;
}

.notice.success {
    color: var(--accent-strong);
    background: var(--accent-soft);
    border: 1px solid #bfe5dc;
}

.notice.danger {
    color: var(--danger);
    background: #fff1f0;
    border: 1px solid #ffd0cc;
}

.notice.warning {
    color: var(--warning);
    background: #fff8e6;
    border: 1px solid #f7df9c;
}

.onboarding-card {
    border-color: #bfe5dc;
    background: #f8fffd;
}

.onboarding-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 16px;
    border-bottom: 1px solid #d4eee7;
}

.onboarding-card-header h2 {
    margin: 3px 0 0;
    font-size: 20px;
    line-height: 1.2;
}

.onboarding-card-header p {
    max-width: 760px;
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 14px;
}

.onboarding-progress {
    display: grid;
    min-width: 106px;
    border: 1px solid #bfe5dc;
    border-radius: var(--radius);
    background: var(--surface);
    padding: 10px 12px;
    text-align: center;
}

.onboarding-progress strong {
    color: var(--accent-strong);
    font-size: 22px;
    line-height: 1;
}

.onboarding-progress span {
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.onboarding-step-list {
    display: grid;
    gap: 10px;
    padding: 14px 16px 16px;
}

.onboarding-step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 12px;
}

.onboarding-step-marker {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: var(--warning);
    box-shadow: 0 0 0 4px #fff4dd;
}

.onboarding-step.is-complete .onboarding-step-marker {
    background: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
}

.onboarding-step strong,
.onboarding-step small {
    display: block;
}

.onboarding-step strong {
    font-size: 14px;
}

.onboarding-step small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 13px;
}

.deletion-block-notice {
    display: grid;
    gap: 10px;
    color: #8a4b0f;
    background: #fff7ed;
    border: 1px solid #fed7aa;
}

.deletion-block-notice p {
    margin: 3px 0 0;
    color: #7c2d12;
    font-weight: 750;
}

.deletion-block-notice details {
    border-top: 1px solid #fed7aa;
    padding-top: 10px;
}

.deletion-block-notice summary {
    width: fit-content;
    cursor: pointer;
    color: #7c2d12;
    font-weight: 900;
}

.deletion-connection-list {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}

.deletion-connection-list article {
    border: 1px solid #fed7aa;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.72);
    padding: 10px;
}

.deletion-connection-list h3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 8px;
    font-size: 13px;
}

.deletion-connection-list h3 span {
    border-radius: 999px;
    background: #ffedd5;
    padding: 2px 8px;
}

.deletion-connection-list ul {
    display: grid;
    gap: 7px;
    margin: 0;
    padding-left: 18px;
}

.deletion-connection-list li {
    display: grid;
    gap: 2px;
}

.deletion-connection-list a {
    color: #0f766e;
    font-weight: 900;
}

.deletion-connection-list small {
    color: #7c2d12;
    font-weight: 700;
}

.context-strip,
.metric-grid,
.detail-grid {
    display: grid;
    gap: 14px;
}

.context-strip {
    grid-template-columns: 1.4fr 1fr;
    margin-bottom: 14px;
}

.context-strip > div,
.metric,
.panel,
.login-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.context-strip > div {
    padding: 16px;
}

.context-strip strong,
.context-strip small,
.metric strong,
.metric small {
    display: block;
}

.context-strip strong {
    margin-top: 6px;
    font-size: 18px;
}

.context-strip small,
.metric small {
    color: var(--muted);
    font-size: 13px;
}

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

.metric strong {
    font-size: 32px;
    line-height: 1;
}

.metric-grid.center-entity-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.program-active-intervention-metric strong {
    overflow-wrap: anywhere;
    font-size: 19px;
    line-height: 1.15;
}

.people-scope-tree-panel {
    overflow-x: auto;
    padding: 10px 14px 14px;
}

.people-scope-tree-table {
    position: relative;
    min-width: 650px;
}

.people-scope-tree-header,
.people-scope-tree-row {
    display: grid;
    grid-template-columns: 38px minmax(140px, 1fr) 60px 68px 94px 112px 68px 34px;
    align-items: center;
    column-gap: 4px;
}

.people-scope-tree-header {
    min-height: 28px;
    padding: 0 4px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.people-scope-tree-header > span:nth-child(n + 3) {
    text-align: center;
}

.people-scope-tree-node {
    min-width: 0;
}

details.people-scope-tree-node > summary {
    cursor: pointer;
    list-style: none;
}

details.people-scope-tree-node > summary::-webkit-details-marker {
    display: none;
}

.people-scope-tree-row {
    min-height: 36px;
    padding: 4px;
    border-radius: 7px;
    color: var(--text);
    transition: background 0.14s ease;
}

.people-scope-tree-row:hover {
    background: var(--surface-soft);
}

.people-scope-tree-node[data-level="center"] > .people-scope-tree-row {
    background: color-mix(in srgb, var(--center) 5%, var(--surface));
}

.people-scope-tree-cell {
    min-width: 0;
}

.people-scope-tree-color {
    padding-left: calc(var(--tree-depth) * 8px);
}

.people-scope-tree-color .tree-dot {
    width: 9px;
    height: 9px;
    margin: 0;
}

.people-scope-tree-name {
    overflow: hidden;
    padding-left: calc(var(--tree-depth) * 8px);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.people-scope-tree-number {
    color: var(--muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    font-weight: 750;
    text-align: center;
}

.people-scope-tree-number.is-total {
    color: var(--text);
    font-weight: 900;
}

.people-scope-tree-toggle-cell {
    display: grid;
    place-items: center;
}

.people-scope-tree-toggle {
    display: block;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(45deg) translate(-1px, -1px);
    transition: transform 0.16s ease;
}

details.people-scope-tree-node:not([open]) > summary .people-scope-tree-toggle {
    transform: rotate(-45deg);
}

.people-scope-tree-children {
    display: grid;
}

.panel {
    margin-bottom: 14px;
    overflow: hidden;
}

.panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    border-bottom: 1px solid var(--border);
}

.panel-heading h2 {
    margin: 0;
    line-height: 1.25;
}

.panel-heading p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 14px;
}

.responsive-table {
    width: 100%;
    overflow-x: auto;
}

table {
    width: 100%;
    min-width: 720px;
}

th,
td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
    font-size: 14px;
}

th {
    font-weight: 800;
    text-transform: uppercase;
}

td small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
}

tr:last-child td {
    border-bottom: 0;
}

.row-edit {
    position: relative;
    display: inline-block;
}

.row-edit summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}

.row-edit summary::-webkit-details-marker {
    display: none;
}

.row-edit summary:hover {
    border-color: #b6c7c4;
    background: var(--surface-soft);
}

.row-edit[open] {
    display: block;
}

.role-chip {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    color: var(--accent-strong);
    background: var(--accent-soft);
    font-size: 12px;
    font-weight: 800;
}

.role-chip.muted {
    color: var(--muted);
    background: #eef3f2;
}

.role-chip.success {
    color: #047857;
    background: #dcfce7;
}

.role-chip.warning {
    color: #713f12;
    background: #fef08a;
}

.role-chip.danger {
    color: #b91c1c;
    background: #fee2e2;
}

.role-chip.dark {
    color: #fff;
    background: #111827;
}

.entity-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    width: fit-content;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.entity-kicker.entity-center {
    color: var(--center);
    background: var(--center-soft);
}

.entity-kicker.entity-program {
    color: var(--program);
    background: var(--program-soft);
}

.entity-kicker.entity-intervention {
    color: var(--intervention);
    background: var(--intervention-soft);
}

.entity-band {
    position: relative;
}

.entity-band::before,
.center-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--center);
}

.entity-program-band::before {
    background: var(--program);
}

.entity-intervention-band::before {
    background: var(--intervention);
}

.home-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 20px 20px 24px;
}

.home-hero h2 {
    margin: 4px 0 6px;
    font-size: 28px;
    line-height: 1.12;
}

.home-hero p {
    margin: 0;
    color: var(--muted);
    font-weight: 700;
}

.center-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.center-card {
    position: relative;
    display: grid;
    gap: 14px;
    min-width: 0;
    overflow: hidden;
    padding: 18px 18px 18px 22px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.center-card.is-active {
    border-color: #bfe5dc;
    box-shadow: 0 16px 42px rgba(15, 138, 112, 0.13);
}

.center-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.center-card-header h2,
.center-card-header p {
    margin: 0;
}

.center-card-header h2 {
    margin-top: 8px;
    font-size: 22px;
    line-height: 1.16;
}

.center-card-header p {
    margin-top: 4px;
    color: var(--muted);
    font-weight: 750;
}

.center-card-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.center-card-stats div {
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-soft);
}

.center-card-stats dt {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.center-card-stats dd {
    margin: 5px 0 0;
    font-size: 20px;
    font-weight: 900;
}

.center-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.center-card-actions form {
    display: contents;
}

.center-program-strip {
    display: grid;
    gap: 8px;
}

.program-mini-card {
    border: 1px solid #cfe0ff;
    border-radius: var(--radius);
    background: var(--program-soft);
    overflow: hidden;
}

.program-mini-card summary {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 10px;
    cursor: pointer;
    list-style: none;
}

.program-mini-card summary::-webkit-details-marker {
    display: none;
}

.program-mini-card summary span:not(.tree-dot) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 900;
}

.program-mini-card summary small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.program-mini-card > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    border-top: 1px solid #cfe0ff;
    background: var(--surface);
}

.program-mini-card a {
    min-height: 30px;
    padding: 6px 9px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    background: var(--surface-soft);
    font-size: 12px;
    font-weight: 850;
    text-decoration: none;
}

.empty-home-panel {
    grid-column: 1 / -1;
    padding: 20px;
}

.empty-cell,
.empty-text {
    color: var(--muted);
}

.workspace-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 20px 18px 24px;
}

.workspace-hero h2,
.workspace-hero p {
    margin: 0;
}

.workspace-hero h2 {
    margin-top: 8px;
    line-height: 1.12;
}

.workspace-hero p {
    margin-top: 5px;
    color: var(--muted);
}

.workspace-hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.workspace-section-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.entity-summary-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 14px;
}

.entity-summary-list h3 {
    margin: 0 0 8px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.summary-full {
    grid-column: 1 / -1;
}

.attendance-rule-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 12px;
}

.attendance-rule-summary > div {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--intervention);
    border-radius: var(--radius);
    background: var(--surface-soft);
}

.attendance-rule-summary span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.attendance-rule-summary strong {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 14px;
}

.summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    min-height: 54px;
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--center);
    border-radius: var(--radius);
    background: var(--surface-soft);
    color: var(--text);
    text-decoration: none;
    max-width: 100%;
}

button.summary-row,
button.preview-slot {
    width: 100%;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.summary-action-row {
    align-items: stretch;
}

.summary-row-main {
    display: grid;
    align-content: center;
    /*
     * `DEC-54` fija el objetivo tactil minimo en 44 px, y esta fila media 42:
     * `.summary-row` lleva `min-height: 54px`, pero el boton interior de una
     * `summary-action-row` no heredaba ninguna. Es `H-085`, medido en navegador con
     * `getBoundingClientRect()` y no leido de esta hoja.
     */
    min-height: 44px;
    min-width: min(100%, 260px);
    flex: 1 1 260px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.summary-row-main:hover strong {
    color: var(--accent-strong);
}

.summary-row.editable-row:hover,
.preview-slot.editable-chip:hover {
    border-color: #b6c7c4;
    background: var(--surface);
}

.summary-row.is-program {
    border-left-color: var(--program);
    background: var(--program-soft);
}

.summary-row.is-intervention {
    border-left-color: var(--intervention);
    background: var(--intervention-soft);
}

.summary-row strong,
.summary-row span {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
}

.summary-row strong {
    font-size: 14px;
}

.summary-row span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
}

.summary-row-actions {
    display: flex;
    flex: 1 1 180px;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
}

.summary-row-actions a {
    min-height: 30px;
    padding: 6px 9px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    font-size: 12px;
    font-weight: 850;
    text-decoration: none;
}

.compact-weekly-view {
    padding: 0;
}

.weekly-scroll {
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 8px;
}

.weekly-scroll .weekly-read-view {
    min-width: 860px;
}

.section-title-row,
.context-disclosure > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.section-title-row .button.secondary,
.panel-heading .button.secondary,
.workspace-hero-actions .button.secondary,
.topbar-actions .button.secondary,
.context-disclosure > summary .button.secondary {
    min-height: 32px;
    padding: 0 10px;
    font-size: 12px;
}

.context-disclosure {
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
}

.context-disclosure > summary {
    min-height: 48px;
    padding: 10px 12px;
    cursor: pointer;
    list-style: none;
    min-width: 0;
    flex-wrap: wrap;
}

.context-disclosure > summary::-webkit-details-marker {
    display: none;
}

.context-disclosure > summary span:first-child {
    min-width: 0;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.context-disclosure > summary small {
    margin-left: auto;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.context-disclosure > summary .button {
    flex: 0 0 auto;
    min-height: 30px;
    padding: 0 9px;
    font-size: 12px;
}

.context-disclosure[open] > summary {
    border-bottom: 1px solid var(--border);
}

.context-disclosure > .weekly-scroll,
.context-disclosure > .summary-row,
.context-disclosure > .empty-text {
    margin: 10px 12px;
}

.context-disclosure > .summary-row {
    width: calc(100% - 24px);
}

.facility-config-disclosure {
    margin: 10px 12px;
}

.facility-specific-config {
    display: grid;
    gap: 12px;
    padding: 12px;
    background: var(--surface-soft);
}

.facility-specific-config .context-disclosure {
    background: var(--surface);
}

.modal-delete-form {
    display: flex;
    justify-content: flex-start;
    padding: 0 16px 16px;
    background: var(--surface-soft);
}

.search-form {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: min(100%, 460px);
}

.pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 14px 16px;
    color: var(--muted);
    font-size: 14px;
}

.pager a {
    color: var(--accent-strong);
    font-weight: 800;
    text-decoration: none;
}

.pager-disabled {
    color: #a1adab;
}

.form-layout {
    display: grid;
    gap: 14px;
}

.form-panel {
    margin-bottom: 0;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 16px;
}

.form-grid.compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.company-assignment-tree {
    display: grid;
    gap: 14px;
    padding: 16px;
}

.company-assignment-tree-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: linear-gradient(180deg, #ffffff 0%, var(--surface-soft) 100%);
}

.company-assignment-tree-header div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.company-assignment-tree-header strong {
    font-size: 15px;
}

.company-assignment-tree-header span:not(.role-chip) {
    color: var(--muted);
    font-size: 13px;
    font-weight: 750;
    line-height: 1.35;
}

.company-scope-list {
    display: grid;
    gap: 10px;
}

.company-scope-node {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
}

.company-scope-node > summary {
    list-style: none;
}

.company-scope-node > summary::-webkit-details-marker {
    display: none;
}

.company-scope-node > summary label,
.company-scope-leaf {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 12px;
    cursor: pointer;
}

.company-scope-node > summary label {
    background: var(--surface-soft);
}

.company-scope-program > summary label {
    background: #fbfdff;
}

.company-scope-node input,
.company-scope-leaf input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
}

.company-scope-node span,
.company-scope-leaf span {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.company-scope-node strong,
.company-scope-leaf strong {
    overflow: hidden;
    color: var(--text);
    font-size: 14px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.company-scope-node small,
.company-scope-leaf small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
}

.company-scope-children {
    display: grid;
    gap: 8px;
    padding: 10px 12px 12px 28px;
    border-top: 1px solid var(--border);
}

.company-scope-program {
    border-style: dashed;
}

.company-scope-leaves {
    padding: 8px 10px 10px 22px;
}

.company-scope-leaf {
    min-height: 46px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.form-subsection {
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-soft);
}

.form-subsection h3,
.form-subsection p {
    margin: 0;
}

.form-subsection h3 {
    font-size: 14px;
}

.form-subsection p {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.attendance-rule-form {
    gap: 12px;
    padding: 14px;
}

.rule-modal-section {
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.rule-modal-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.rule-modal-heading h3,
.rule-modal-heading p {
    margin: 0;
}

.rule-modal-heading h3 {
    font-size: 15px;
    line-height: 1.2;
}

.rule-modal-heading p {
    margin-top: 3px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.rule-modal-grid {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.rule-main-grid {
    grid-template-columns: minmax(220px, 1.4fr) repeat(2, minmax(130px, 0.7fr)) minmax(220px, 1fr);
    align-items: end;
}

.rule-group-opening-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}

.recovery-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rule-subsection {
    display: grid;
    grid-column: span 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-soft);
}

/* Operational alert inbox and detail */
.alert-filter-toolbar .filter-toolbar-layout {
    gap: 1rem;
}

.alert-filter-toolbar .filter-select-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr)) auto;
    gap: .75rem;
    align-items: end;
    width: 100%;
}

.alert-card-main {
    display: flex;
    flex: 1 1 420px;
    min-width: 0;
    flex-direction: column;
    gap: .22rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.alert-card-main:hover strong,
.alert-card-main:focus-visible strong {
    color: var(--color-primary, #195b50);
    text-decoration: underline;
}

.alert-detail-modal {
    display: grid;
    gap: 1rem;
}

.alert-detail-summary {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
}

.alert-detail-summary.severity-notice {
    border-left-color: #d5a33d;
    background: linear-gradient(135deg, #fff 0%, #fffbef 100%);
}

.alert-detail-summary h3,
.alert-detail-summary p {
    margin: .2rem 0 0;
}

.alert-detail-badges,
.alert-audit-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.alert-detail-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    margin: 0;
}

.alert-detail-facts div,
.alert-audit-grid div {
    display: grid;
    gap: .15rem;
    padding: .7rem;
    border: 1px solid var(--border-color, #dce3e1);
    border-radius: .7rem;
    background: var(--surface-muted, #f6f8f7);
}

.alert-detail-facts dt,
.alert-audit-grid span {
    color: var(--text-muted, #66736f);
    font-size: .78rem;
}

.alert-detail-facts dd {
    margin: 0;
    font-weight: 650;
}

.alert-audit-grid div {
    min-width: 150px;
}

.alert-audit-grid strong {
    font-size: 1.3rem;
}

.alert-execute-form {
    display: grid;
    gap: .75rem;
    margin-top: 1rem;
}

.attendance-report-row.is-alert-subject {
    outline: 2px solid var(--color-primary, #195b50);
    outline-offset: -2px;
    background: color-mix(in srgb, var(--color-primary, #195b50) 8%, white);
}

@media (max-width: 760px) {
    .alert-filter-toolbar .filter-select-row,
    .alert-detail-facts {
        grid-template-columns: 1fr;
    }

    .alert-detail-summary {
        flex-direction: column;
    }
}

[data-alert-dependent].is-disabled {
    opacity: .55;
}

.rule-toggle-grid,
.pairing-card-grid {
    display: grid;
    gap: 10px;
    min-width: 0;
}

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

.pairing-card-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.rule-option,
.pairing-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    min-height: 54px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-soft);
    color: var(--text);
    font-weight: 800;
}

.rule-option.compact {
    align-items: center;
    min-height: 38px;
    padding: 8px 10px;
    white-space: nowrap;
}

.rule-option input[type="checkbox"],
.pairing-card input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--accent);
}

.rule-option span,
.pairing-card span {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.rule-option strong,
.pairing-card strong {
    overflow-wrap: anywhere;
    font-size: 13px;
    line-height: 1.2;
}

.rule-option small,
.pairing-card small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
}

.pairing-card:has(input:checked),
.rule-option:has(input:checked) {
    border-color: #bfe5dc;
    background: var(--accent-soft);
}

.pairing-card:has(input:checked) strong,
.rule-option:has(input:checked) strong {
    color: var(--accent-strong);
}

.attendance-rule-actions {
    padding-top: 4px;
}

.form-disclosure > summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    justify-content: start;
    cursor: pointer;
    list-style: none;
}

.form-disclosure > summary > div {
    min-width: 0;
}

.form-disclosure > summary h2,
.form-disclosure > summary p {
    text-align: left;
}

.form-disclosure > summary::-webkit-details-marker {
    display: none;
}

.form-disclosure > summary::before {
    content: "";
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(-45deg);
    transition: transform 0.16s ease;
}

.form-disclosure[open] > summary::before {
    transform: rotate(45deg);
}

.small-button {
    min-height: 34px;
    padding: 7px 10px;
    font-size: 12px;
}

.assignment-builder,
.availability-builder {
    display: grid;
    gap: 12px;
    padding: 14px 16px 16px;
}

.assignment-builder-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.assignment-builder-heading strong {
    font-size: 13px;
    text-transform: uppercase;
    color: var(--muted);
}

.assignment-builder-heading > div {
    display: grid;
    gap: 3px;
}

.assignment-builder-heading > div > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
}

.assignment-rows,
.availability-rows {
    display: grid;
    gap: 10px;
}

.assignment-row,
.availability-row {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-soft);
}

.availability-row {
    display: grid;
    gap: 12px;
    padding: 12px;
}

.availability-config-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1.2fr) minmax(200px, 1fr) minmax(140px, 0.55fr) minmax(160px, 0.7fr);
    gap: 12px;
}

.field.availability-technical-field {
    display: none;
}

.priority-field input {
    font-size: 18px;
    font-weight: 900;
    text-align: center;
}

.availability-rule-hint {
    margin: -2px 0 0;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--intervention);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--muted);
    font-size: 13px;
    font-weight: 750;
}

.availability-weekly-picker {
    display: grid;
    grid-template-columns: repeat(7, minmax(128px, 1fr));
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.availability-day {
    display: grid;
    align-content: start;
    gap: 8px;
    min-height: 118px;
    min-width: 128px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.availability-day > strong {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.availability-slot-choice {
    display: grid;
    gap: 2px;
    width: 100%;
    min-height: 38px;
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent-soft);
    border-radius: var(--radius);
    background: var(--surface-soft);
    color: var(--text);
    cursor: pointer;
    text-align: left;
}

.availability-slot-choice span {
    font-size: 12px;
    font-weight: 800;
}

.availability-slot-choice:hover {
    border-color: var(--accent);
}

.availability-slot-choice.is-selected {
    border-color: var(--accent);
    border-left-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent-strong);
}

.availability-slot-choice.is-selected.is-preferred {
    border-color: #f7d76c;
    border-left-color: #f59e0b;
    background: #fffbeb;
    color: #9a5b00;
}

.availability-slot-choice.is-selected.is-unavailable {
    border-color: #f1a3a3;
    border-left-color: #dc2626;
    background: #fff1f2;
    color: #991b1b;
}

.availability-hidden-fields {
    display: none;
}

.form-hint,
.padded-error {
    padding: 0 2px;
}

.form-hint {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.field {
    display: grid;
    gap: 7px;
}

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

.field span {
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    min-height: var(--control);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    color: var(--text);
    background: var(--surface);
    outline: 0;
}

.field textarea {
    min-height: 96px;
    resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.search-box:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(15, 138, 112, 0.12);
}

.error {
    color: var(--danger);
    font-size: 12px;
    font-weight: 700;
}

.check-line {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
}

.form-actions {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 0 0;
    background: linear-gradient(to top, var(--bg) 72%, rgba(246, 248, 248, 0));
}

.detail-grid {
    grid-template-columns: 1fr 1fr;
}

.data-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin: 0;
}

.data-list-wide {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.data-list div {
    padding: 16px;
    border-bottom: 1px solid var(--border);
}

.data-list dt {
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.data-list dd {
    margin: 0;
    font-size: 14px;
}

.stack-list {
    display: grid;
}

.stack-row {
    display: grid;
    gap: 4px;
    padding: 16px;
    border-bottom: 1px solid var(--border);
}

.stack-row:last-child {
    border-bottom: 0;
}

.stack-row strong {
    font-size: 14px;
}

.stack-row span {
    color: var(--muted);
    font-size: 13px;
}

.org-metrics .metric {
    min-height: 108px;
}

.org-node,
.org-section,
.org-subsection,
.facility-config {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.program-node,
.intervention-node {
    background: var(--surface-soft);
}

.org-summary,
.facility-config > summary,
.slot-chip > summary,
.inline-create > summary {
    cursor: pointer;
    list-style: none;
}

details:not([open]) > :not(summary) {
    display: none !important;
}

.org-summary::-webkit-details-marker,
.facility-config > summary::-webkit-details-marker,
.slot-chip > summary::-webkit-details-marker,
.inline-create > summary::-webkit-details-marker {
    display: none;
}

.program-node > .org-summary,
.intervention-node > .org-summary {
    grid-template-columns: minmax(72px, max-content) minmax(0, 1fr) minmax(120px, auto);
}

.program-node > .org-summary .org-meta,
.intervention-node > .org-summary .org-meta {
    grid-column: 2;
    grid-row: 2;
}

.program-node > .org-summary .org-counts,
.intervention-node > .org-summary .org-counts {
    grid-column: 3;
    grid-row: 1 / span 2;
}

.row-edit:not([open]) > .row-edit-form,
.slot-chip:not([open]) > .row-edit-form,
.compact-edit:not([open]) > .row-edit-form,
.inline-create:not([open]) > form,
.facility-config:not([open]) > .facility-config-body {
    display: none;
}

.slot-chip .row-edit-form,
.compact-edit .row-edit-form,
.facility-config .row-edit-form {
    min-width: 0;
    width: 100%;
}

.org-section-heading-actions .modal-launcher {
    min-height: 34px;
    padding: 0 10px;
    font-size: 12px;
}

.org-section-heading-actions .modal-launcher svg {
    width: 15px;
    height: 15px;
}

.compact-row strong,
.facility-config strong {
    display: block;
    font-size: 14px;
}

.compact-row small,
.facility-config small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
}

.inline-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    align-items: end;
    padding: 12px 14px;
    border-top: 1px solid var(--border);
    background: var(--surface-soft);
}

.inline-form input,
.inline-form select {
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 10px;
    background: var(--surface);
    color: var(--text);
    outline: 0;
    font-size: 13px;
    font-weight: 650;
}

.inline-form input:focus,
.inline-form select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(15, 138, 112, 0.12);
}

.inline-form .button {
    min-height: 40px;
}

.bulk-slot-form,
.bulk-holiday-form {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
}

.bulk-slot-form .field-wide,
.bulk-holiday-form .field-wide {
    grid-column: 1 / -1;
}

.weekday-picker,
.weekly-preview,
.calendar-picker {
    min-width: 0;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.weekday-picker legend {
    padding: 0 6px;
    color: var(--text);
    font-size: 13px;
    font-weight: 900;
}

.weekday-picker > div {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
}

.weekday-picker label {
    display: grid;
    gap: 5px;
    min-width: 0;
    cursor: pointer;
}

.weekday-picker input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.weekday-picker label > span {
    display: grid;
    place-items: center;
    min-height: 38px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 14px;
    font-weight: 900;
}

.weekday-picker input:checked + span {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent-strong);
}

.weekday-picker small {
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preview-header,
.calendar-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.preview-header strong,
.calendar-toolbar strong {
    font-size: 14px;
}

.preview-header span {
    color: var(--accent-strong);
    font-size: 12px;
    font-weight: 900;
}

.weekly-preview-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(82px, 1fr));
    gap: 8px;
}

.weekly-read-view {
    display: grid;
    grid-template-columns: repeat(7, minmax(104px, 1fr));
    gap: 8px;
    padding: 12px 14px;
}

.weekly-day {
    display: grid;
    align-content: start;
    gap: 6px;
    min-height: 112px;
    min-width: 0;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-soft);
}

.weekly-day strong {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.preview-slot,
.preview-empty {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 7px;
    border-radius: var(--radius);
    font-size: 12px;
    font-weight: 850;
}

.preview-slot {
    background: var(--accent-soft);
    color: var(--accent-strong);
    min-height: 44px;
}

.preview-empty {
    background: #eef3f2;
    color: var(--muted);
}

.calendar-weekdays,
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.calendar-weekdays {
    margin-bottom: 6px;
}

.calendar-weekdays span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-align: center;
}

.calendar-day,
.calendar-spacer {
    min-height: 38px;
}

.calendar-day {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-soft);
    color: var(--text);
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
}

.calendar-day:hover {
    border-color: #b6c7c4;
    background: var(--surface);
}

.calendar-day.is-selected {
    border-color: var(--accent);
    background: var(--accent);
    color: #ffffff;
}

.calendar-day.is-today:not(.is-selected) {
    border-color: var(--accent);
    color: var(--accent-strong);
}

.selected-days {
    margin-top: 10px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.slot-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 14px;
}

.slot-grid.is-weekly-read {
    display: block;
    padding: 0;
}

.facility-config {
    margin: 12px 14px;
    overflow: hidden;
}

.facility-config > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 58px;
    padding: 10px 12px;
}

.facility-config[open] > summary {
    border-bottom: 1px solid var(--border);
}

.facility-config-section > .inline-form {
    margin-top: 12px;
}

.panel > .modal-launch-row {
    border-top: 0;
    background: transparent;
}

.modal-launcher svg {
    width: 17px;
    height: 17px;
}

.modal-shell {
    width: min(940px, calc(100vw - 28px));
    max-height: min(86vh, 860px);
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--text);
    overflow: hidden;
}

.modal-shell::backdrop {
    background: rgba(24, 36, 36, 0.42);
}

.modal-card {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: min(86vh, 860px);
    max-height: inherit;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 24px 60px rgba(24, 36, 36, 0.24);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}

.modal-header h2 {
    margin: 0;
    font-size: 18px;
    line-height: 1.25;
}

.modal-body {
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--surface-soft);
}

.modal-body .form-grid,
.modal-body .row-edit-form {
    width: 100%;
    min-width: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: var(--surface-soft);
    box-shadow: none;
}

.modal-body .modal-form {
    display: grid;
}

.modal-body .modal-form > .form-button-field {
    position: sticky;
    bottom: 0;
    z-index: 2;
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 0 0;
    background: linear-gradient(to top, var(--surface-soft) 76%, rgba(249, 251, 251, 0));
}

.modal-body .modal-form > .form-button-field.has-danger-action {
    justify-content: space-between;
}

.modal-body .modal-form > .form-button-field > span {
    display: none;
}

.metric-grid.group-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.group-list {
    display: grid;
    gap: 12px;
    padding: 16px;
}

.group-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
}

.group-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, auto);
    gap: 12px;
    align-items: center;
    min-height: 64px;
    padding: 13px 16px;
    cursor: pointer;
    list-style: none;
}

.group-summary::-webkit-details-marker {
    display: none;
}

.group-summary strong {
    display: block;
    font-size: 16px;
}

.group-summary small,
.group-summary-stats {
    color: var(--muted);
    font-size: 13px;
    font-weight: 750;
}

.group-card[open] > .group-summary {
    border-bottom: 1px solid var(--border);
}

.group-operational-filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(190px, 260px) auto;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    background: var(--surface-soft);
}

.group-operational-results {
    overflow: hidden;
}

.group-filter-button.is-active {
    border-color: var(--accent);
    color: #ffffff;
    background: var(--accent);
}

.group-filter-button.is-active > span {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.2);
}

.group-trainer-filter.is-active select {
    border-color: var(--accent);
    color: var(--accent-strong);
    background: var(--accent-soft);
}

.group-trainer-filter.is-active .group-trainer-select > svg {
    stroke: var(--accent-strong);
}

.group-operational-table table {
    min-width: 1040px;
}

.group-operational-table th {
    vertical-align: middle;
}

.group-operational-table th small,
.group-operational-table td small {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
}

.attendance-group-launcher {
    display: grid;
    gap: 2px;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.attendance-group-launcher strong {
    color: var(--accent-strong);
    text-decoration: underline;
    text-decoration-color: rgba(15, 138, 112, 0.32);
    text-underline-offset: 3px;
}

.attendance-group-launcher:hover strong,
.attendance-group-launcher:focus-visible strong {
    text-decoration-color: currentColor;
}

.attendance-group-launcher:focus-visible {
    border-radius: 5px;
    outline: 3px solid rgba(15, 138, 112, 0.18);
    outline-offset: 3px;
}

.group-operational-table td {
    vertical-align: middle;
}

.group-change-notice {
    margin-top: 7px;
}

.group-change-notice > summary {
    width: fit-content;
    color: #9a5b00;
    cursor: pointer;
    font-size: 12px;
    font-weight: 850;
}

.group-change-notice > div {
    display: grid;
    gap: 6px;
    min-width: 250px;
    margin-top: 7px;
    padding: 9px 10px;
    border: 1px solid #f1c36d;
    border-radius: var(--radius);
    background: #fff9e8;
}

.group-change-notice p {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    color: var(--text);
    font-size: 12px;
}

.group-change-direction {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--muted);
}

.group-change-item.is-outgoing .group-change-direction {
    background: var(--danger);
}

.group-change-item.is-incoming .group-change-direction {
    background: var(--success, #0f9f78);
}

.group-change-item.is-outgoing strong {
    color: var(--danger);
}

.group-change-item.is-incoming strong {
    color: var(--accent-strong);
}

.group-change-date {
    color: var(--muted);
    white-space: nowrap;
}

.status-line {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    color: var(--muted);
    font-size: 13px;
    font-weight: 850;
}

.status-line > span {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--muted);
}

.status-line.success {
    color: #047857;
}

.status-line.success > span {
    background: #10b981;
}

.status-line.danger {
    color: #b91c1c;
}

.status-line.danger > span {
    background: #ef4444;
}

.status-line.warning {
    color: #b45309;
}

.status-line.warning > span {
    background: #f59e0b;
}

.status-line.neutral > span {
    background: #94a3b8;
}

.attendance-ops-metrics span,
.attendance-report-person span,
.attendance-report-person small,
.attendance-expanded-header span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.attendance-trainer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 10px;
    padding: 14px;
}

.attendance-trainer-card {
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
}

.attendance-trainer-card > summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    list-style: none;
    padding: 12px;
}

.attendance-trainer-card > summary::-webkit-details-marker {
    display: none;
}

.attendance-trainer-card > summary div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.attendance-trainer-card > summary strong {
    color: var(--ink);
    line-height: 1.2;
}

.attendance-trainer-card > summary span:not(.attendance-count-pill) {
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
}

.attendance-count-pill {
    display: inline-flex;
    min-width: 32px;
    min-height: 30px;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-soft);
    color: var(--ink);
    font-weight: 900;
    white-space: nowrap;
}

.attendance-copy-box {
    display: grid;
    gap: 10px;
    padding: 12px;
    border-top: 1px solid var(--border);
    background: var(--surface-soft);
}

.attendance-copy-box textarea {
    width: 100%;
    min-height: 108px;
    resize: vertical;
    font-size: 13px;
}

.attendance-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 14px 14px;
    background: #f8fafc;
}

.attendance-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
}

.attendance-alert {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--border);
    border-left: 5px solid #f59e0b;
    border-radius: var(--radius);
    background: #fff7ed;
}

.attendance-alert.is-danger {
    border-left-color: #ef4444;
    background: #fff1f2;
}

.attendance-alert strong {
    color: var(--ink);
    line-height: 1.25;
}

.attendance-alert span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 750;
}

.attendance-dot-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
    min-width: 0;
}

.attendance-dot {
    position: relative;
    display: inline-block;
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 3px;
    background: #e2e8f0;
}

.attendance-dot.is-future {
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.3);
}

.attendance-dot.is-future-boundary {
    margin-right: 9px;
}

.attendance-dot.is-future-boundary::after {
    position: absolute;
    top: -5px;
    right: -7px;
    height: 18px;
    border-right: 2px dashed #2563eb;
    content: "";
}

.attendance-dot.is-session-realizada,
.attendance-dot.is-session-sustitucion,
.attendance-dot.is-attendance-asistencia {
    border-color: #34d399;
    background: #22c55e;
}

.attendance-dot.is-session-no-realizada-entrenador {
    border-color: #fdba74;
    background: #f97316;
}

.attendance-dot.is-session-no-realizada-programa {
    border-color: #93c5fd;
    background: #60a5fa;
}

.attendance-dot.is-session-suspendida-usuarios,
.attendance-dot.is-attendance-falta-no-comunicada {
    border-color: #fca5a5;
    background: #ef4444;
}

.attendance-dot.is-session-sustitucion {
    border-color: #a78bfa;
    background: #8b5cf6;
}

.attendance-dot.is-attendance-falta {
    border-color: #fde68a;
    background: #facc15;
}

.attendance-dot.is-session-pendiente,
.attendance-dot.is-attendance-sin-registro {
    border-color: #cbd5e1;
    background: #f1f5f9;
}

.attendance-dot.is-session-planificada,
.attendance-dot.is-attendance-no-aplica {
    border-color: #cbd5e1;
    background: #cbd5e1;
}

.attendance-dot.is-attendance-repesca-prevista {
    border-color: #38bdf8;
    background: #e0f2fe;
}

.attendance-dot.is-attendance-not-eligible,
.attendance-dot.is-attendance-not-eligible.is-future {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.attendance-group-expanded {
    display: grid;
    gap: 12px;
    padding: 14px;
    background: var(--surface);
}

.attendance-expanded-header.is-compact {
    display: block;
}

.attendance-expanded-header.is-compact .attendance-session-totals {
    justify-content: flex-start;
}

.attendance-report-scroll {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.attendance-report-row {
    display: grid;
    grid-template-columns: 230px max-content;
    width: max-content;
    min-width: 100%;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.attendance-report-row:last-child {
    border-bottom: 0;
}

.attendance-report-row.is-session-row {
    background: #f8fafc;
}

.attendance-report-person {
    display: grid;
    align-content: center;
    gap: 4px;
    padding: 12px;
    border-right: 1px solid var(--border);
}

.attendance-report-person strong {
    line-height: 1.25;
}

.attendance-report-months {
    display: grid;
    grid-template-columns: var(--attendance-month-columns);
    gap: 18px;
    align-items: center;
    width: max-content;
    min-width: 720px;
    padding: 12px;
}

.attendance-report-months > div {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.attendance-report-months > div > span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.attendance-row-actions {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 98px;
}

.attendance-row-action {
    min-width: 0;
}

.attendance-row-action.is-record {
    order: 0;
}

.attendance-row-action.is-modify {
    order: 1;
}

.attendance-row-action.is-substitute {
    order: 2;
}

.attendance-row-action > summary {
    width: fit-content;
    cursor: pointer;
    list-style: none;
}

.attendance-row-action > summary::-webkit-details-marker {
    display: none;
}

.attendance-row-action[open] > summary {
    margin-bottom: 10px;
}

.attendance-row-action > summary.attendance-action-icon {
    display: inline-flex;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 20px;
    line-height: 1;
}

.attendance-action-icon > span[aria-hidden="true"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.attendance-row-action[open] {
    flex: 1 0 100%;
}

.attendance-row-action form {
    display: grid;
    gap: 10px;
    min-width: 420px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-soft);
}

.attendance-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(160px, 1fr));
    gap: 10px;
}

.attendance-action-grid label {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.attendance-action-grid input,
.attendance-action-grid select {
    width: 100%;
}

.attendance-person-list {
    display: grid;
    gap: 8px;
}

.attendance-person-row {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(150px, 180px) minmax(120px, 1fr);
    gap: 8px;
    align-items: center;
}

.attendance-person-row strong {
    font-size: 13px;
}

.group-modal-shell {
    width: min(1160px, calc(100vw - 28px));
}

.group-modal-stack {
    display: grid;
    gap: 14px;
    padding: 14px;
}

.modal-section {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.modal-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 14px;
    border-bottom: 1px solid var(--border);
}

.modal-section-heading h3,
.modal-section-heading p {
    margin: 0;
}

.modal-section-heading h3 {
    font-size: 16px;
}

.modal-section-heading p {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.schedule-section-summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.modal-section > .modal-form,
.modal-section > .group-user-tools,
.modal-section > .assignment-date-table {
    margin: 0;
}

.group-data-summary {
    display: grid;
    grid-template-columns: repeat(6, minmax(90px, auto));
    gap: 8px 24px;
    padding: 10px 14px 12px;
    background: var(--surface);
}

.group-data-summary div {
    min-width: 0;
    padding: 2px 0;
}

.group-data-summary span,
.group-data-summary strong {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}

.group-data-summary span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.group-data-summary strong {
    margin-top: 1px;
    font-size: 13px;
}

.group-data-notes {
    grid-column: 1 / -1;
}

.group-data-editor {
    border-top: 1px solid var(--border);
    background: var(--surface-soft);
}

.group-data-editor[hidden],
.add-user-form[hidden] {
    display: none;
}

.group-weekly-planner {
    position: relative;
    padding: 12px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-soft);
}

.schedule-card {
    position: relative;
    margin-top: 8px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
}

.schedule-card.is-future {
    border-left-color: var(--program);
    background: #f8fbff;
}

.schedule-card.is-past,
.schedule-card.is-inactive {
    border-left-color: #94a3b8;
    background: #f8fafc;
}

.schedule-card > summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 2px;
    padding: 9px 10px;
    cursor: pointer;
    list-style: none;
}

.schedule-card > summary::-webkit-details-marker {
    display: none;
}

.schedule-card > summary > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.schedule-card-time {
    overflow: hidden;
    font-weight: 850;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.schedule-card > summary small {
    display: -webkit-box;
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
    line-height: 1.25;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.schedule-card-facility {
    color: var(--text) !important;
}

.schedule-card.is-current > summary > .schedule-status-chip {
    display: none;
}

.schedule-status-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 24px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.schedule-status-chip.is-current {
    background: var(--accent-soft);
    color: var(--accent-strong);
}

.schedule-status-chip.is-future {
    background: var(--program-soft);
    color: var(--program);
}

.schedule-status-chip.is-past,
.schedule-status-chip.is-inactive {
    background: #eef2f7;
    color: #475569;
}

.group-weekly-planner .schedule-card[open] {
    overflow: hidden;
    z-index: 5;
}

.group-weekly-planner .weekly-day:has(.schedule-card[open]) {
    grid-column: span 4;
}

.group-weekly-planner .schedule-card[open] .schedule-editor {
    position: static;
    width: 100%;
    max-width: none;
    margin-top: 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 0;
    box-shadow: none;
}

.schedule-editor {
    padding: 10px;
    border-top: 1px solid var(--border);
    background: var(--surface-soft);
}

.schedule-editor.form-grid.compact {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.schedule-editor .field,
.schedule-editor .field input,
.schedule-editor .field select,
.schedule-editor .field textarea {
    min-width: 0;
}

.group-slot-create {
    border-top: 0;
}

.schedule-timeline-block,
.schedule-history-disclosure {
    border-top: 1px solid var(--border);
    background: var(--surface-soft);
}

.schedule-timeline-block > header,
.schedule-history-disclosure > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
}

.schedule-timeline-block h4,
.schedule-timeline-block p {
    margin: 0;
}

.schedule-timeline-block h4 {
    font-size: 14px;
}

.schedule-timeline-block p {
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
}

.schedule-timeline-list {
    display: grid;
    gap: 8px;
    padding: 0 14px 14px;
}

.schedule-timeline-list .schedule-card {
    margin-top: 0;
}

.schedule-history-disclosure > summary {
    cursor: pointer;
    list-style: none;
}

.schedule-history-disclosure > summary::-webkit-details-marker {
    display: none;
}

.schedule-history-disclosure > summary span {
    font-weight: 900;
}

.schedule-history-disclosure > summary strong {
    color: var(--muted);
    font-size: 12px;
}

.group-modal-actions {
    display: flex;
    justify-content: flex-end;
    padding: 12px 14px;
    background: var(--surface-soft);
}

.empty-mini {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
}

.add-user-form {
    display: grid;
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-soft);
}

.add-user-fields[hidden] {
    display: none;
}

.assignment-date-table table {
    min-width: 920px;
}

.assignment-state-badge {
    display: inline-flex;
    width: max-content;
    margin-top: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 850;
    line-height: 1.2;
}

.assignment-state-badge.current {
    color: var(--accent-strong);
    background: var(--accent-soft);
}

.assignment-state-badge.future {
    color: #1d4ed8;
    background: #dbeafe;
}

.assignment-state-badge.leaving {
    color: #9a3412;
    background: #ffedd5;
}

.assignment-state-badge.is-past {
    color: #475569;
    background: #eef2f7;
}

.group-user-history-disclosure,
.group-attendance-disclosure {
    border-top: 1px solid var(--border);
    background: var(--surface-soft);
}

.group-user-history-disclosure > summary,
.group-attendance-disclosure > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 14px;
    cursor: pointer;
    list-style: none;
}

.group-user-history-disclosure > summary::-webkit-details-marker,
.group-attendance-disclosure > summary::-webkit-details-marker {
    display: none;
}

.group-user-history-disclosure > summary > span,
.group-attendance-disclosure > summary > span {
    font-weight: 900;
}

.group-user-history-disclosure > summary > strong,
.group-attendance-disclosure > summary > strong {
    color: var(--muted);
    font-size: 12px;
}

.group-disclosure-count,
.group-disclosure-action {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.group-user-history-table {
    border-top: 1px solid var(--border);
    background: var(--surface);
}

.group-user-history-table table {
    min-width: 920px;
}

.group-attendance-report-body {
    min-width: 0;
    padding: 14px;
    border-top: 1px solid var(--border);
    background: var(--surface);
}

.group-attendance-report-body > .empty-text {
    margin: 0;
}

.group-attendance-report-body > .attendance-group-expanded {
    padding: 0;
}

.attendance-membership-badge {
    display: inline-flex;
    margin-left: 6px;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    line-height: 1.2;
    vertical-align: middle;
}

.attendance-membership-badge.is-current {
    color: var(--accent-strong);
    background: var(--accent-soft);
}

.attendance-membership-badge.is-historical {
    color: #475569;
    background: #e2e8f0;
}

.attendance-membership-badge.is-occasional {
    color: #92400e;
    background: #fef3c7;
}

.attendance-report-row.is-membership-historical {
    background: #fbfcfd;
}

.attendance-report-row.is-membership-occasional {
    background: #fffcf5;
}

.assignment-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 178px;
}

@media (max-width: 720px) {
    .group-user-history-disclosure > summary,
    .group-attendance-disclosure > summary {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .group-disclosure-count,
    .group-disclosure-action {
        align-self: flex-start;
    }
}

.assignment-actions > .button,
.assignment-action-form .button {
    min-height: 30px;
    padding: 0 9px;
    font-size: 12px;
}

.assignment-actions > .assignment-icon-button {
    width: 34px;
    min-height: 34px;
    padding: 0;
    font-size: 17px;
    line-height: 1;
}

.assignment-icon-button span[aria-hidden="true"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.assignment-actions > .button.is-active {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent-strong);
}

.assignment-action-panels {
    width: 100%;
    min-width: 0;
}

.assignment-action-detail-row[hidden] {
    display: none;
}

.assignment-action-detail-row > td,
.assignment-action-detail-row:hover > td {
    padding: 0 12px 12px;
    background: var(--surface);
}

.assignment-action-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    align-items: end;
    width: 100%;
    margin-top: 0;
    padding: 12px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius);
    background: var(--surface-soft);
}

.assignment-action-form[hidden] {
    display: none;
}

.assignment-action-form .field {
    gap: 4px;
}

.assignment-action-form .field-wide {
    grid-column: auto;
}

.assignment-action-form .field input,
.assignment-action-form .field select {
    min-height: 34px;
    padding: 6px 8px;
    font-size: 13px;
}

.login-screen {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        linear-gradient(135deg, rgba(15, 138, 112, 0.08), rgba(255, 255, 255, 0) 34%),
        var(--bg);
}

.login-panel {
    width: min(100%, 420px);
    padding: 24px;
}

.password-panel {
    max-width: 560px;
}

.reset-panel {
    margin-top: 14px;
}

.form-button-field {
    justify-content: end;
}

.padded-form {
    padding: 16px;
}

.login-brand {
    margin-bottom: 24px;
}

.login-panel h1 {
    margin: 0;
    font-size: 30px;
    line-height: 1.1;
}

.login-panel p {
    margin: 10px 0 22px;
    color: var(--muted);
}

.form-stack {
    display: grid;
    gap: 14px;
}

.button.compact {
    padding: 8px 12px;
}

.coordination-filters {
    align-items: end;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(220px, 1fr) minmax(180px, 260px) auto;
    margin-bottom: 14px;
    padding: 14px;
}

.coordination-card-accent {
    background: linear-gradient(90deg, #fff8e9 0, #ffffff 34%, #f7fbff 100%);
    border-left: 5px solid #a55a05;
}

.coordination-filters label {
    display: grid;
    gap: 6px;
}

.coordination-calendar-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px 24px;
    min-width: 0;
    width: 100%;
}

.coordination-calendar-heading > h2 {
    flex: 0 0 auto;
}

.coordination-calendar-filters {
    display: block;
    flex: 1 1 0;
    margin: 0;
    margin-left: auto;
    min-width: 0;
    padding: 0;
    background: transparent;
}

.coordination-calendar-filters .filter-inline-groups {
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.coordination-calendar-filters .filter-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.coordination-calendar-filters .filter-group-label {
    flex: 0 0 auto;
}

.coordination-overview-metrics {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    margin-bottom: 0;
}

.coordination-overview-metrics .metric {
    min-height: 96px;
}

.coordination-metric-group {
    align-content: stretch;
    gap: 10px;
    padding: 12px 14px;
}

.coordination-metric-group > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.coordination-metric-group > header h3 {
    margin: 0;
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 900;
}

.coordination-metric-group > header a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 0 8px;
    color: var(--accent-strong);
    font-size: 0.8rem;
    font-weight: 900;
    text-decoration: none;
}

.coordination-metric-group > header a:hover {
    text-decoration: underline;
}

.coordination-metric-values {
    display: grid;
    grid-template-columns: repeat(var(--coordination-metric-count), minmax(0, 1fr));
    align-items: end;
    min-width: 0;
}

.coordination-metric-value {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 0 9px;
    border-left: 1px solid var(--border);
}

.coordination-metric-value:first-child {
    padding-left: 0;
    border-left: 0;
}

.coordination-metric-value:last-child {
    padding-right: 0;
}

.coordination-metric-group .coordination-metric-value strong {
    margin: 0;
    color: var(--ink);
    font-size: clamp(1.35rem, 1.7vw, 1.8rem);
    line-height: 1;
}

.coordination-metric-value span {
    overflow-wrap: anywhere;
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1.15;
}

.coordination-shell {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr);
}

.coordination-main {
    min-width: 0;
    overflow: hidden;
}

.coordination-board {
    background: #eef3f2;
    display: grid;
    gap: 14px;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 14px;
    width: 100%;
}

.coordination-board.is-compact-view {
    gap: 8px;
    overflow-x: auto;
    padding: 8px;
}

.coordination-board.is-week-compact {
    grid-template-columns: repeat(var(--coordination-column-count), minmax(128px, 1fr));
}

.coordination-board.is-wide-compact {
    grid-template-columns: repeat(var(--coordination-column-count), minmax(300px, 1fr));
}

.coordination-board.is-wide-compact {
    gap: 12px;
    padding: 12px;
}

.coordination-day {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 8px 22px rgba(19, 37, 35, 0.08);
    container-name: coordination-day;
    container-type: inline-size;
    min-width: 0;
    overflow: hidden;
}

.coordination-board.is-compact-view .coordination-day {
    border-radius: 7px;
}

.coordination-day > header {
    align-items: center;
    background: #0f766e;
    border-bottom: 1px solid var(--line);
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    padding: 12px;
}

.coordination-board.is-compact-view .coordination-day > header {
    min-height: 34px;
    padding: 7px 8px;
}

.coordination-board.is-compact-view .coordination-day > header strong,
.coordination-board.is-compact-view .coordination-day > header span {
    font-size: 12px;
}

.coordination-board.is-wide-compact .coordination-day > header {
    min-height: 40px;
    padding: 9px 12px;
}

.coordination-board.is-wide-compact .coordination-day > header strong,
.coordination-board.is-wide-compact .coordination-day > header span {
    font-size: 15px;
}

.coordination-day > header span,
.coordination-cell-top span,
.coordination-opportunity span {
    color: inherit;
    font-weight: 700;
}

.coordination-time-row {
    background: #f7faf9;
    border-bottom: 1px solid #d8e5e1;
    padding: 10px;
}

.coordination-board.is-compact-view .coordination-time-row {
    padding: 5px;
}

.coordination-time-row:last-child {
    border-bottom: 0;
}

.coordination-time-label {
    align-items: center;
    background: #e5efec;
    border-radius: 7px;
    color: #123531;
    display: flex;
    font-weight: 800;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 6px 8px;
}

.coordination-board.is-compact-view .coordination-time-label {
    margin-bottom: 5px;
    padding: 4px 5px;
}

.coordination-board.is-compact-view .coordination-time-label span {
    font-size: 11px;
}

.coordination-board.is-wide-compact .coordination-time-row {
    padding: 8px;
}

.coordination-board.is-wide-compact .coordination-time-label {
    margin-bottom: 8px;
    padding: 6px 8px;
}

.coordination-board.is-wide-compact .coordination-time-label span {
    font-size: 14px;
}

.coordination-cell-grid {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
}

.coordination-cell-grid.is-empty-row {
    align-items: flex-start;
    justify-content: center;
}

.coordination-board.is-compact-view .coordination-cell-grid {
    gap: 5px;
}

.coordination-cell {
    background: var(--facility-surface, #ffffff);
    border: 1px solid var(--facility-border, var(--line));
    border-radius: 8px;
    display: grid;
    gap: 10px;
    min-height: 150px;
    min-width: 0;
    padding: 10px;
    box-shadow: inset 3px 0 0 var(--facility-accent, transparent);
}

.coordination-board.is-compact-view .coordination-cell {
    gap: 5px;
    min-height: 72px;
    padding: 5px;
}

.coordination-board.is-wide-compact .coordination-cell {
    gap: 8px;
    min-height: 108px;
    padding: 8px;
}

.coordination-cell.is-opportunity {
    background: var(--facility-surface, #eaf8ee);
    border-color: var(--facility-border, #67bd80);
}

.coordination-cell.is-occupied {
    background: var(--facility-surface, #eaf2ff);
    border-color: var(--facility-border, #8eb7ef);
    flex: 1 1 180px;
}

.coordination-cell.is-empty-facility {
    align-content: start;
    flex: 0 0 clamp(88px, 8vw, 108px);
    gap: 4px;
    min-height: 0;
    padding: 6px;
    background: color-mix(in srgb, var(--facility-surface, #f5f7f6) 28%, #ffffff);
    border-color: color-mix(in srgb, var(--facility-border, #cbd8d4) 42%, #e8eeec);
    box-shadow: inset 2px 0 0 color-mix(in srgb, var(--facility-accent, #8ca19a) 48%, transparent);
}

/*
 * Facility packing is driven by the width of each day, not by the viewport.
 * Wide enough days keep active and empty facilities on one line; genuinely
 * narrow days may wrap before the attendance card becomes unreadable.
 */
@container coordination-day (min-width: 205px) {
    .coordination-cell-grid.has-active-groups {
        align-items: stretch;
        flex-wrap: nowrap;
    }

    .coordination-cell-grid.has-active-groups .coordination-cell.is-occupied {
        flex: 1 1 0;
        min-width: 0;
    }

    .coordination-cell-grid.has-active-groups .coordination-cell.is-empty-facility {
        align-self: flex-start;
    }
}

.coordination-cell.is-empty-facility.is-opportunity,
.coordination-cell.is-empty-facility.is-free {
    background: color-mix(in srgb, var(--facility-surface, #f5f7f6) 28%, #ffffff);
    border-color: color-mix(in srgb, var(--facility-border, #cbd8d4) 42%, #e8eeec);
}

.coordination-cell.is-disabled {
    background: var(--facility-surface, #f5f6f6);
    color: var(--muted);
    opacity: 0.72;
}

.coordination-cell.is-empty-facility .coordination-cell-top {
    display: grid;
    justify-items: center;
    gap: 2px;
    text-align: center;
}

.coordination-cell.is-empty-facility .coordination-cell-top strong,
.coordination-cell.is-empty-facility .coordination-cell-top span {
    overflow-wrap: anywhere;
    text-align: center;
    white-space: normal;
}

.coordination-cell.is-empty-facility .coordination-cell-top span {
    margin-left: 0;
}

.coordination-cell.is-empty-facility .coordination-operational-row {
    display: grid;
    justify-items: center;
    gap: 4px;
}

.coordination-cell.is-empty-facility .coordination-counters {
    display: grid;
    flex: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
    width: 100%;
}

.coordination-cell.is-empty-facility .coordination-counters span {
    justify-content: center;
    gap: 3px;
    min-width: 0;
    padding: 1px 3px;
    border-color: transparent;
    background: rgba(255, 255, 255, 0.56);
}

.coordination-cell.is-empty-facility .coordination-empty-slots {
    justify-content: center;
    gap: 3px;
    margin-left: 0;
}

.coordination-board.is-compact-view .coordination-cell.is-empty-facility {
    flex-basis: 84px;
    min-height: 0;
    padding: 4px;
}

.coordination-board.is-wide-compact .coordination-cell.is-empty-facility {
    flex-basis: 104px;
    min-height: 0;
    padding: 6px;
}

@container coordination-day (min-width: 205px) and (max-width: 279px) {
    .coordination-cell-grid.has-active-groups .coordination-cell.is-empty-facility {
        flex: 0 0 72px;
        min-width: 72px;
        padding: 4px;
    }

    .coordination-cell-grid.has-active-groups .coordination-cell.is-empty-facility .coordination-counters span {
        gap: 1px;
        padding: 1px;
        font-size: 9px;
    }
}

.coordination-time-row.is-empty-row {
    background: #fafcfb;
    contain: layout style paint;
    content-visibility: auto;
    contain-intrinsic-size: auto 150px;
}

.coordination-cell-top {
    align-items: start;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-between;
}

.coordination-board.is-compact-view .coordination-cell-top {
    gap: 2px 8px;
}

.coordination-board.is-compact-view .coordination-cell-top strong,
.coordination-board.is-compact-view .coordination-cell-top span {
    font-size: 10px;
    line-height: 1.15;
}

.coordination-cell-top strong {
    color: var(--facility-ink, var(--ink));
    font-weight: 700;
}

.coordination-cell-top span {
    margin-left: auto;
    color: var(--muted);
    font-weight: var(--ds-weight-regular, 400);
    text-align: right;
    white-space: nowrap;
}

.coordination-board.is-wide-compact .coordination-cell-top {
    gap: 8px;
}

.coordination-board.is-wide-compact .coordination-cell-top strong,
.coordination-board.is-wide-compact .coordination-cell-top span {
    font-size: 13px;
    line-height: 1.2;
}

.coordination-slots {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
    min-width: 0;
}

.coordination-slots:empty {
    display: none;
}

.coordination-slots .coordination-slot-card {
    flex: 1 0 100%;
    min-width: 0;
    width: 100%;
    max-width: none;
}

.coordination-board.is-compact-view .coordination-slots {
    gap: 4px;
}

.coordination-board.is-wide-compact .coordination-slots {
    gap: 7px;
}

.coordination-slot-card {
    min-height: 82px;
}

.coordination-board.is-compact-view .coordination-slot-card {
    min-height: 28px;
    padding: 4px;
}

.coordination-board.is-wide-compact .coordination-slot-card {
    min-height: 48px;
    padding: 7px;
}

.coordination-empty-slot {
    background: rgba(255, 255, 255, 0.72);
    border: 2px dashed var(--facility-accent, #8db7a0);
    border-radius: 50%;
    color: #146c43;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font: inherit;
    box-sizing: border-box;
    width: 26px;
    min-width: 26px;
    height: 26px;
    min-height: 26px;
    padding: 0;
}

.coordination-empty-slot:hover {
    background: #f4fff8;
    border-color: #21945a;
    box-shadow: 0 8px 18px rgba(20, 108, 67, 0.12);
}

.coordination-empty-slot-plus {
    display: block;
    position: relative;
    width: 10px;
    height: 10px;
    color: transparent;
    font-size: 0;
}

.coordination-empty-slot-plus::before,
.coordination-empty-slot-plus::after {
    position: absolute;
    top: 50%;
    left: 50%;
    content: "";
    background: var(--facility-ink, #2f7a55);
    border-radius: 999px;
    transform: translate(-50%, -50%);
}

.coordination-empty-slot-plus::before {
    width: 10px;
    height: 2px;
}

.coordination-empty-slot-plus::after {
    width: 2px;
    height: 10px;
}

.coordination-board.is-compact-view .coordination-group-card span {
    display: none;
}

.coordination-board.is-wide-compact .coordination-group-card span {
    display: block;
    font-size: 12px;
    line-height: 1.2;
}

.coordination-board.is-compact-view .coordination-group-card strong,
.coordination-board.is-compact-view .coordination-group-card small {
    font-size: 10px;
    line-height: 1.15;
}

.coordination-board.is-wide-compact .coordination-group-card strong,
.coordination-board.is-wide-compact .coordination-group-card small {
    font-size: 13px;
    line-height: 1.2;
}

.coordination-attendance-card {
    container-name: coordination-attendance;
    container-type: inline-size;
    display: grid;
    grid-template-areas:
        "head"
        "timeline";
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    max-width: none;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.82);
    cursor: pointer;
}

.coordination-attendance-card:focus-visible {
    outline: 2px solid var(--facility-accent, var(--accent));
    outline-offset: 2px;
}

.coordination-attendance-head {
    grid-area: head;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 3px 10px;
    min-width: 0;
}

.coordination-attendance-title-line {
    display: flex;
    align-items: baseline;
    flex: 1 1 150px;
    flex-wrap: wrap;
    gap: 4px 7px;
    min-width: 0;
    width: 100%;
}

.coordination-attendance-group-link {
    color: var(--ink);
    font-size: clamp(15px, 1.4vw, 26px);
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
}

.coordination-attendance-group-link:hover {
    color: var(--accent);
    text-decoration: underline;
}

.coordination-attendance-title-line > span,
.coordination-attendance-trainer {
    color: var(--muted);
    font-weight: var(--ds-weight-regular, 400);
}

.coordination-attendance-title-line > span {
    font-size: 12px;
}

.coordination-attendance-trainer {
    flex: 0 1 auto;
    margin-left: auto;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.35;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@container coordination-attendance (max-width: 300px) {
    .coordination-attendance-trainer {
        flex: 1 0 100%;
        margin-left: 0;
        text-align: left;
        white-space: normal;
    }
}

.coordination-attendance-open,
.coordination-attendance-body {
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.coordination-attendance-open {
    color: var(--ink);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

.coordination-attendance-body {
    grid-area: timeline;
    display: block;
    width: 100%;
}

.coordination-attendance-open:hover,
.coordination-attendance-body:hover .coordination-month-label {
    color: var(--accent);
}

.coordination-month-board {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    justify-content: center;
    min-width: 0;
    width: 100%;
    max-width: none;
    overflow: hidden;
}

.coordination-month-board.is-pending {
    align-items: center;
    min-height: 22px;
}

.coordination-month-block {
    display: grid;
    flex: 0 0 auto;
    gap: 3px;
    padding-right: 7px;
    border-right: 1px solid var(--line);
}

.coordination-month-block:last-child {
    padding-right: 0;
    border-right: 0;
}

.coordination-month-label {
    color: var(--muted);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
}

.coordination-month-rows {
    display: grid;
    gap: 2px;
}

.coordination-month-dot-row {
    display: flex;
    gap: 2px;
    min-width: 25px;
    min-height: 7px;
}

.coordination-month-dot-row .attendance-dot {
    width: 7px;
    height: 7px;
    border-radius: 2px;
}

.coordination-attendance-empty {
    color: var(--muted);
    font-weight: 800;
}

.coordination-board.is-compact-view .coordination-attendance-card {
    min-height: 86px;
    padding: 6px;
}

.coordination-board.is-compact-view .coordination-attendance-title-line > span,
.coordination-board.is-compact-view .coordination-attendance-open,
.coordination-board.is-compact-view .coordination-attendance-trainer {
    font-size: 10px;
}

.coordination-board.is-compact-view .coordination-month-board {
    gap: 5px;
}

.coordination-board.is-compact-view .coordination-month-block {
    gap: 2px;
    padding-right: 5px;
}

.coordination-board.is-compact-view .coordination-month-dot-row .attendance-dot {
    width: 6px;
    height: 6px;
}

.coordination-board.is-compact-view .coordination-month-dot-row {
    min-width: 22px;
}

.coordination-counters {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
}

.coordination-operational-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 8px;
    min-width: 0;
}

.coordination-operational-row .coordination-counters {
    flex: 1 1 auto;
}

.coordination-empty-slots {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
    margin-left: auto;
}

.coordination-board.is-compact-view .coordination-counters {
    gap: 3px;
}

.coordination-counters span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    font-size: 12px;
    font-weight: var(--ds-weight-regular, 400);
    padding: 4px 8px;
}

.coordination-counters b,
.coordination-counters strong {
    font: inherit;
}

.coordination-counters b {
    color: var(--muted);
    font-weight: 600;
}

.coordination-counters strong {
    color: var(--ink);
    font-weight: 600;
}

.coordination-board.is-compact-view .coordination-empty-slot {
    width: 18px;
    min-width: 18px;
    height: 18px;
    min-height: 18px;
}

.coordination-board.is-compact-view .coordination-empty-slot-plus {
    width: 7px;
    height: 7px;
}

.coordination-board.is-compact-view .coordination-empty-slot-plus::before {
    width: 7px;
    height: 1px;
}

.coordination-board.is-compact-view .coordination-empty-slot-plus::after {
    width: 1px;
    height: 7px;
}

.coordination-board.is-wide-compact .coordination-empty-slot {
    width: 24px;
    min-width: 24px;
    height: 24px;
    min-height: 24px;
}

.facility-color-field {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.facility-color-field legend {
    margin-bottom: 7px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
}

.facility-color-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    gap: 8px;
}

.facility-color-option {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 5px;
    min-width: 0;
    padding: 7px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    cursor: pointer;
}

.facility-color-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.facility-color-option:has(input:checked) {
    border-color: var(--swatch-accent, var(--accent));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--swatch-accent, var(--accent)) 24%, transparent);
}

.facility-color-swatch {
    display: block;
    border: 1px solid var(--swatch-border);
    background: var(--swatch-surface);
    box-shadow: inset 4px 0 0 var(--swatch-accent);
}

.facility-color-swatch {
    width: 100%;
    height: 28px;
    border-radius: 6px;
}

.facility-color-option small {
    overflow: hidden;
    max-width: 100%;
    color: var(--muted);
    font-size: 10px;
    font-weight: var(--ds-weight-regular, 400);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.coordination-board.is-compact-view .coordination-counters span {
    font-size: 9px;
    padding: 2px 4px;
}

.coordination-board.is-wide-compact .coordination-counters {
    gap: 5px;
}

.coordination-board.is-wide-compact .coordination-counters span {
    font-size: 12px;
    padding: 3px 7px;
}

.coordination-sidebar {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr);
    grid-column: 1 / -1;
    min-width: 0;
}

.coordination-opportunity-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 8px;
    padding: 14px;
}

.coordination-opportunity {
    background: #f8fbfb;
    border: 1px solid var(--line);
    border-left: 4px solid var(--accent);
    border-radius: 8px;
    display: grid;
    gap: 6px;
    padding: 10px;
}

.coordination-opportunity div {
    display: grid;
    gap: 3px;
}

.coordination-modal-shell .modal-card {
    max-width: min(1180px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    overflow: hidden;
}

.coordination-create-layout {
    display: grid;
    grid-auto-rows: max-content;
    gap: 14px;
    max-height: calc(100dvh - 132px);
    overflow: auto;
    overflow-x: hidden;
    padding-bottom: 0;
}

.coordination-create-layout .modal-section {
    min-width: 0;
}

.coordination-slot-summary {
    background: linear-gradient(90deg, #fff8e9, #ffffff);
    border-left: 5px solid var(--intervention);
}

.coordination-candidate-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    gap: 14px;
    padding: 14px;
}

.coordination-participant-picker,
.coordination-selected-picker {
    display: grid;
    align-content: start;
    gap: 12px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-soft);
}

.coordination-selected-picker h4,
.coordination-selected-picker p {
    margin: 0;
}

.coordination-selected-picker > div:first-child {
    display: grid;
    gap: 4px;
}

.coordination-selected-picker > div:first-child p {
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
}

.coordination-candidate-toolbar {
    display: grid;
    gap: 10px;
}

.filter-chip span {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--surface-soft);
    color: var(--text);
    font-size: 11px;
}

.filter-chip:hover,
.filter-chip.is-active {
    border-color: #63b7a6;
    background: #eaf9f5;
    color: #116153;
}

.coordination-candidate-selection {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 38px;
}

.coordination-candidate-selection > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
}

.coordination-participant-list {
    display: grid;
    align-content: start;
    gap: 8px;
    min-height: 170px;
    max-height: min(370px, 42dvh);
    overflow: auto;
    padding-right: 18px;
    scrollbar-gutter: stable;
}

.coordination-participant-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
    box-sizing: border-box;
    width: 100%;
}

.coordination-participant-option:hover,
.coordination-participant-option.is-selected {
    border-color: #63b7a6;
    background: #eefaf7;
}

.coordination-participant-option > input {
    margin-top: 3px;
}

.coordination-participant-content,
.coordination-participant-header,
.coordination-participant-meta {
    min-width: 0;
}

.coordination-participant-content {
    display: grid;
    gap: 6px;
}

.coordination-participant-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.coordination-participant-header a {
    color: var(--text);
    font-weight: 900;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.coordination-participant-header a:hover {
    color: var(--primary);
    text-decoration: underline;
}

.coordination-participant-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 10px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
}

.coordination-companion {
    color: #7b4c00;
}

.coordination-minimum-warning {
    display: grid;
    gap: 8px;
    margin: 0;
}

.coordination-minimum-warning[hidden] {
    display: none;
}

.coordination-minimum-warning [hidden] {
    display: none;
}

.coordination-minimum-warning p {
    margin: 0;
}

.coordination-minimum-warning label {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 12px;
    font-weight: 800;
}

.form-grid.compact.coordination-new-group-fields {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.coordination-data-trainers {
    display: grid;
    grid-template-columns: minmax(190px, 0.7fr) minmax(260px, 1.3fr);
    grid-column: 1 / -1;
    gap: 12px;
    align-items: start;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-soft);
}

.coordination-data-trainers > div:first-child {
    display: grid;
    gap: 4px;
    align-self: center;
}

.coordination-data-trainers small,
.coordination-selected-picker > div:first-child p {
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
}

.coordination-data-trainers [data-coordination-trainer-fields] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
}

.coordination-data-trainers .empty-mini {
    margin: 0;
}

.coordination-selected-list {
    display: grid;
    align-content: start;
    gap: 8px;
    max-height: min(370px, 42dvh);
    overflow-y: auto;
    padding-right: 4px;
}

.coordination-selected-option {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 9px;
    border: 1px solid #8bd0c2;
    border-radius: var(--radius);
    background: #eefaf7;
}

.coordination-selected-option > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.coordination-selected-option a {
    color: var(--text);
    font-weight: 900;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.coordination-selected-option a:hover {
    color: var(--primary);
    text-decoration: underline;
}

.coordination-selected-option small {
    color: var(--muted);
    font-weight: 750;
}

.group-delete-zone {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 14px;
    padding: 12px;
    border: 1px solid #f0b8b3;
    border-radius: var(--radius);
    background: #fff8f7;
}

.group-delete-zone[hidden] {
    display: none;
}

.group-delete-zone > div {
    display: grid;
    gap: 3px;
}

.group-delete-zone strong {
    color: var(--danger);
}

.group-delete-zone small {
    color: var(--muted);
    font-weight: 700;
}

.coordination-data-trainers .danger-text,
.coordination-participant-list .danger-text {
    color: var(--danger);
}

.coordination-trainer-option:hover,
.coordination-trainer-option.is-selected {
    border-color: #7cc7b8;
    background: #edfbf7;
}

.coordination-create-layout .group-modal-actions {
    position: sticky;
    bottom: 0;
    margin: 0 -14px -14px;
    padding: 12px 14px;
    background: var(--surface);
    border-top: 1px solid var(--border);
}

.coordination-attendance-modal {
    width: min(1180px, calc(100vw - 24px));
}

.coordination-attendance-modal .modal-card {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 24px);
    overflow: hidden;
}

.coordination-attendance-modal-body {
    max-height: calc(100dvh - 112px);
    overflow: auto;
    padding: 14px;
}

.coordination-attendance-report {
    padding: 0;
}

@media (max-width: 1100px) {
    .form-grid.compact.coordination-new-group-fields {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .coordination-candidate-layout {
        grid-template-columns: minmax(0, 1fr) minmax(240px, 290px);
    }
}

@media (max-width: 720px) {
    .form-grid.compact.coordination-new-group-fields {
        grid-template-columns: 1fr;
    }

    .coordination-candidate-layout {
        grid-template-columns: 1fr;
        padding: 10px;
    }

    .coordination-data-trainers {
        grid-template-columns: 1fr;
    }

    .coordination-candidate-selection {
        align-items: stretch;
        flex-direction: column;
    }

    .coordination-participant-list {
        max-height: 320px;
    }

    .group-delete-zone {
        align-items: stretch;
        flex-direction: column;
    }

    .coordination-modal-shell .modal-card {
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
    }

    .coordination-create-layout .group-modal-actions {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 8px;
    }

    .coordination-create-layout .group-modal-actions .button {
        min-width: 0;
        padding-inline: 10px;
        white-space: normal;
    }
}

.trainer-hero {
    border-left-color: var(--program);
}

.trainer-attendance-filters {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 170px 170px auto;
    gap: 12px;
    align-items: end;
    padding: 14px;
}

.trainer-filter-disclosure {
    overflow: hidden;
}

.trainer-filter-disclosure > summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    list-style: none;
    min-height: 62px;
    padding: 12px 14px;
}

.trainer-filter-disclosure > summary::before {
    border-bottom: 2px solid currentColor;
    border-right: 2px solid currentColor;
    content: "";
    flex: 0 0 auto;
    height: 8px;
    transform: rotate(-45deg);
    transition: transform 0.16s ease;
    width: 8px;
}

.trainer-filter-disclosure[open] > summary::before {
    transform: rotate(45deg);
}

.trainer-filter-disclosure > summary::-webkit-details-marker {
    display: none;
}

.trainer-filter-disclosure > summary div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.trainer-filter-disclosure > summary strong {
    font-size: 15px;
}

.trainer-filter-disclosure > summary span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.trainer-filter-disclosure > summary div span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trainer-filter-disclosure[open] > summary {
    border-bottom: 1px solid var(--border);
}

.trainer-attendance-filters label {
    display: grid;
    gap: 6px;
}

.trainer-attendance-filters label span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.trainer-attendance-filters input,
.trainer-attendance-filters select {
    width: 100%;
}

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

.trainer-session-section {
    overflow: hidden;
}

.trainer-session-list {
    display: grid;
    gap: 12px;
    padding: 14px;
}

.trainer-session-card {
    border: 1px solid var(--border);
    border-left: 5px solid var(--muted);
    border-radius: 8px;
    background: var(--surface);
    overflow: hidden;
}

.trainer-session-card.is-recordable {
    border-left-color: var(--success);
}

.trainer-session-card.is-future {
    border-left-color: var(--program);
}

.trainer-session-card.is-recorded {
    border-left-color: var(--intervention);
}

.trainer-session-card-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    background: var(--surface-soft);
    border-bottom: 1px solid var(--border);
}

.trainer-session-card-head strong {
    display: block;
    margin-top: 4px;
    font-size: 20px;
}

.trainer-session-context {
    color: var(--muted);
    display: block;
    font-size: 12px;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.trainer-session-group {
    color: var(--text);
}

.trainer-session-date {
    color: var(--muted);
    font-weight: 800;
    text-transform: uppercase;
}

.trainer-session-date small {
    display: inline-flex;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--success-soft);
    color: var(--success);
}

.trainer-session-time {
    display: block;
    color: var(--text);
    font-size: 20px;
    font-weight: 900;
    line-height: 1.2;
    margin-top: 4px;
}

.trainer-session-status {
    align-self: center;
    white-space: nowrap;
}

.trainer-session-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 12px 14px;
    color: var(--muted);
    font-weight: 700;
}

.trainer-session-meta span {
    min-width: 0;
}

.trainer-session-meta strong {
    color: var(--text);
}

.trainer-group-meta {
    overflow-wrap: anywhere;
}

.trainer-session-action {
    border-top: 1px solid var(--border);
}

.trainer-session-action > summary {
    margin: 12px 14px;
    width: fit-content;
}

.trainer-session-action form {
    display: grid;
    gap: 12px;
    padding: 0 14px 14px;
}

.trainer-action-grid {
    grid-template-columns: minmax(180px, 280px) minmax(260px, 1fr);
}

.trainer-attendance-list {
    display: grid;
    gap: 8px;
}

.attendance-extra-participants {
    margin-top: 10px;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    background: var(--surface-soft);
}

.attendance-extra-participants > summary {
    display: inline-flex;
    margin: 10px;
    list-style: none;
    cursor: pointer;
}

.attendance-extra-participants > summary::-webkit-details-marker {
    display: none;
}

.attendance-extra-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 8px;
    max-height: 280px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 10px 10px;
    scrollbar-gutter: stable;
}

.attendance-extra-flow {
    display: grid;
    grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.15fr);
    gap: 12px;
    padding: 0 10px 10px;
}

.attendance-extra-step {
    display: grid;
    align-content: start;
    gap: 10px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.attendance-extra-step > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.attendance-extra-step h4 {
    margin: 0;
}

.attendance-extra-results,
.attendance-extra-selected {
    display: grid;
    gap: 8px;
    min-height: 0;
}

.attendance-extra-results {
    max-height: 260px;
    overflow-y: auto;
    padding-right: 2px;
    scrollbar-gutter: stable;
}

.attendance-extra-result {
    display: grid;
    gap: 3px;
    width: 100%;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-soft);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.attendance-extra-result:hover {
    border-color: #7cc7b8;
    background: #edfbf7;
}

.attendance-extra-result strong,
.attendance-extra-result small {
    overflow-wrap: anywhere;
}

.attendance-extra-card {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.attendance-extra-card label {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    align-items: start;
}

.attendance-extra-card label span {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.attendance-extra-card strong,
.attendance-extra-card small {
    overflow-wrap: anywhere;
}

.attendance-extra-card select,
.attendance-extra-card input[type="text"] {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px;
}

.trainer-attendance-row {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) minmax(150px, 190px) minmax(160px, 1fr);
    gap: 8px;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
}

.trainer-attendance-row select,
.trainer-attendance-row input {
    width: 100%;
}

.trainer-save-button {
    justify-self: end;
}

.padded-empty {
    padding: 16px;
}

.two-column-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.72fr);
    gap: 16px;
    align-items: start;
}

.account-layout {
    margin-bottom: 16px;
}

.participant-layout {
    margin-bottom: 16px;
}

.participant-group-list,
.participant-availability-list {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}

.participant-group-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--groups);
    border-radius: var(--radius);
    background: var(--surface);
}

.participant-group-card > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.participant-group-card > div:first-child {
    display: grid;
    gap: 2px;
}

.participant-group-card strong {
    font-size: 20px;
}

.participant-group-card span,
.participant-group-card small {
    color: var(--muted);
    font-weight: 800;
}

.people-availability-calendar-list {
    display: grid;
    gap: 14px;
    padding: 14px;
}

.people-availability-calendar {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
}

.people-availability-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-soft);
}

.people-availability-calendar-header > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.people-availability-calendar-header strong,
.people-availability-calendar-header span {
    overflow-wrap: anywhere;
}

.people-availability-calendar-header > div > span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.people-weekly-availability {
    padding: 10px;
}

.people-week-slot.is-preferred {
    border-color: #f7d76c;
    border-left-color: #f59e0b;
    background: #fffbeb;
}

.people-availability-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 5px;
}

.people-availability-meta span {
    min-width: 0;
    max-width: 100%;
    justify-self: start;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
    color: var(--muted);
    padding: 3px 6px;
    font-size: 10px;
    font-weight: 900;
    white-space: nowrap;
}

.people-availability-facility {
    overflow: hidden;
    text-overflow: ellipsis;
}

.people-availability-priority {
    justify-self: end;
}

.people-availability-pairing {
    grid-column: 1 / -1;
}

.people-availability-notes {
    color: var(--muted);
    font-weight: 800;
}

.people-availability-empty {
    margin: 0;
    padding: 8px;
    border: 1px dashed var(--border);
    border-radius: calc(var(--radius) - 2px);
    background: var(--surface);
}

.participant-availability-board-form {
    margin: 14px;
}

.participant-availability-board {
    background: var(--surface);
}

.participant-availability-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-soft);
}

.participant-availability-toolbar .trainer-availability-legend {
    border-bottom: 0;
    padding: 12px;
}

.participant-availability-toolbar .button {
    margin-right: 12px;
}

.participant-availability-slot-card.is-empty {
    border-left-color: var(--border);
    background: var(--surface-soft);
}

.slot-signal {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.slot-signal.is-free {
    border-color: #8dd9b2;
    background: #ecfdf5;
    color: #047857;
}

.slot-signal.is-new {
    border-color: #93c5fd;
    background: #eff6ff;
    color: #1d4ed8;
}

.slot-signal.is-muted {
    background: #f1f5f9;
    color: var(--muted);
}

.participant-slot-controls .field-wide {
    grid-column: 1 / -1;
}

.participant-weekly-availability {
    display: grid;
    grid-template-columns: repeat(7, minmax(190px, 1fr));
    gap: 10px;
    max-width: 100%;
    overflow-x: auto;
    padding: 12px;
    background: #eef5f4;
}

/*
 * Con el detalle al lado, la columna necesita mas ancho.
 *
 * Sin esto los controles se llevaban todo y el detalle quedaba en 11 px: los nombres de las
 * instalaciones median cero y solo asomaba la etiqueta. Medido, no supuesto. Solo se ensancha
 * cuando hay detalle -lo marca la variable que pone la vista-, asi que las otras pantallas
 * que usan este calendario no cambian.
 */
.participant-weekly-availability.has-slot-offers {
    /*
     * Cada columna ocupa **lo que necesita su contenido**, no una parte igual del ancho.
     * Con `1fr` las tres se repartian todo el espacio y el selector quedaba con un hueco
     * blanco a la derecha del texto; con `max-content` se ajusta al nombre de instalacion
     * mas largo y se acaba ahi. `start` evita que el sobrante se reparta.
     */
    grid-template-columns: repeat(auto-fit, minmax(0, max-content));
    justify-content: start;
    /* Si el contenido no cabe, se desplaza aqui dentro y no en la pagina (`RNT-12`). */
    overflow-x: auto;
}

.participant-weekly-availability.has-slot-offers .participant-week-slot {
    grid-template-columns: max-content max-content;
}

/* El detalle no baja de lo que necesita para leerse; los controles ceden. */


.participant-week-slot-grid select {
    min-width: 0;
    /* Al ancho de su opcion mas larga, sin hueco sobrante detras del texto. */
    width: auto;
}


.participant-weekday-column {
    display: grid;
    align-content: start;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-soft);
    overflow: hidden;
}

.participant-weekday-column > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 42px;
    padding: 9px 10px;
    border-bottom: 1px solid var(--border);
    background: #f8fbfa;
}

.participant-weekday-column h3 {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}

.participant-weekday-column small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
}

.participant-weekday-slots {
    display: grid;
    /*
     * Todas las tarjetas de la columna, a la misma altura. Sin esto, una franja con una sola
     * instalacion quedaba 10 px mas baja que su vecina con dos -96 frente a 106, medido- y
     * los horarios dejaban de coincidir con los de la columna de al lado.
     *
     * Va acompanado del `min-height` del detalle, que iguala tambien ENTRE columnas. Medido
     * el 2026-08-12: con todas las franjas del mismo tamano cada uno de los dos basta por su
     * cuenta, asi que no se puede decir cual actua; se conservan los dos porque cubren casos
     * distintos y quitar uno solo se notaria el dia que las franjas dejaran de coincidir.
     */
    grid-auto-rows: 1fr;
    align-content: start;
    gap: 8px;
    padding: 8px;
}

.participant-week-slot {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 9px;
    border: 1px solid var(--border);
    border-left: 4px solid #cbd5e1;
    border-radius: var(--radius);
    background: #f8fafc;
}

.participant-week-slot.is-available {
    border-color: #8dd9b2;
    border-left-color: var(--accent);
    background: #e8f8f1;
}

.participant-week-slot.is-unavailable {
    color: var(--muted);
}

.participant-week-slot-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.participant-week-slot-head strong {
    color: var(--text);
    font-size: 13px;
    font-weight: 900;
}

.participant-week-slot-head span {
    border-radius: 999px;
    background: rgba(15, 138, 112, 0.1);
    color: var(--accent-strong);
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 900;
}

.participant-week-slot-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 46px;
    gap: 5px;
    align-items: center;
}

.participant-week-slot-grid label {
    display: block;
    min-width: 0;
}

.participant-week-slot-grid label > span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.participant-week-slot-grid select,
.participant-week-slot-grid input {
    width: 100%;
    min-height: 32px;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) - 2px);
    padding: 5px 6px;
    background: var(--surface);
    font: inherit;
    font-size: 11px;
    font-weight: 800;
}

.participant-priority-cell input {
    border-color: #f7d76c;
    background: #fff7dd;
    color: #8a4b0f;
    text-align: center;
    font-weight: 900;
}

.participant-priority-cell input:disabled {
    border-color: var(--border);
    background: #edf2f1;
    color: var(--muted);
}

.participant-week-slot-signals {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.participant-week-slot-signals span {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    border-radius: 999px;
    background: var(--surface);
    color: var(--accent-strong);
    padding: 2px 7px;
    font-size: 10px;
    font-weight: 900;
}

.seat-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}

.seat-status-grid.compact {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.seat-status-bucket .seat-status-grid {
    padding: 12px;
    border-top: 1px solid var(--border);
}

.seat-status-card {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--border);
    border-left: 5px solid var(--muted);
    border-radius: var(--radius);
    background: var(--surface);
}

.seat-status-card.is-success {
    border-left-color: var(--success);
    background: #f4fbf7;
}

.seat-status-card.is-warning {
    border-left-color: var(--warning);
    background: #fff9e8;
}

.seat-status-card.is-danger {
    border-left-color: var(--danger);
    background: #fff5f5;
}

.seat-status-card.is-muted {
    border-left-color: var(--muted);
}

.seat-status-card header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.seat-status-card strong {
    color: var(--text);
}

.seat-status-card small,
.seat-status-card p {
    color: var(--muted);
}

.seat-status-card .status-pill {
    white-space: nowrap;
}

.inline-disclosure {
    margin-top: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
}

.inline-disclosure summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    font-weight: 900;
}

.inline-disclosure summary span {
    min-width: 0;
    overflow: hidden;
    color: var(--muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.participant-request-sections {
    display: grid;
}

.participant-request-section {
    border-bottom: 1px solid var(--border);
}

.participant-request-section:last-child {
    border-bottom: 0;
}

.participant-request-section > summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    cursor: pointer;
    list-style: none;
}

.participant-request-section > summary::-webkit-details-marker {
    display: none;
}

.participant-request-section[open] > summary {
    background: #f4faf8;
    border-bottom: 1px solid var(--border);
}

.participant-request-section-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    min-height: 34px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #e4f4ef;
    color: var(--accent-strong);
    font-size: 14px;
    font-weight: 900;
}

.participant-request-section-badge.is-status {
    min-width: 88px;
}

.participant-request-section-badge.warning {
    background: #fff2c9;
    color: #8a5400;
}

.participant-request-section-badge.success {
    background: #ddf6e9;
    color: #087443;
}

.participant-request-section-badge.danger {
    background: #fde7e7;
    color: #b42318;
}

.participant-request-section-badge.muted {
    background: #eef2f2;
    color: var(--muted);
}

.participant-request-section-title {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.participant-request-section-title strong {
    color: var(--text);
    font-size: 16px;
}

.participant-request-section-title small {
    color: var(--muted);
}

.participant-request-section-chevron {
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(45deg);
    transition: transform 160ms ease;
}

.participant-request-section[open] .participant-request-section-chevron {
    transform: rotate(225deg);
}

.participant-request-section-content {
    display: grid;
    gap: 12px;
    padding: 16px 18px;
}

.participant-request-row {
    align-items: flex-start;
    gap: 12px;
}

.participant-request-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.participant-request-main > div:first-child {
    display: grid;
    gap: 3px;
}

.participant-request-comments {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.participant-request-comments > div {
    padding: 10px 12px;
    border-left: 3px solid var(--border-strong);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: #f7f9f9;
}

.participant-request-comments > div.is-resolution {
    border-left-color: var(--accent);
    background: #eef9f5;
}

.participant-request-comments span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.participant-request-comments p {
    margin: 4px 0 0;
    white-space: pre-wrap;
}

.participant-request-card-list {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.participant-request-disclosure {
    margin-top: 0;
}

.participant-request-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--warning);
    border-radius: var(--radius);
    background: var(--surface);
}

.participant-request-card > div:first-child {
    display: grid;
    gap: 2px;
}

.participant-request-card span,
.participant-request-card small {
    color: var(--muted);
    font-weight: 800;
}

.participant-makeup-options {
    display: grid;
    gap: 8px;
    max-height: 260px;
    overflow: auto;
}

.participant-makeup-option {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--success);
    border-radius: var(--radius);
    background: #f8fcfa;
    color: var(--text);
    cursor: pointer;
    text-align: left;
}

.participant-makeup-option:hover,
.participant-makeup-option:has(input:checked) {
    border-color: var(--success);
    background: #eaf8f2;
}

.participant-makeup-option input {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--accent);
}

.participant-makeup-option > span {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.participant-makeup-request-form {
    display: grid;
    gap: 12px;
}

.participant-makeup-confirmation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #f7f9f9;
}

.participant-makeup-confirmation > div {
    display: grid;
    gap: 2px;
}

.participant-makeup-confirmation > div > span {
    font-size: 11px;
    text-transform: uppercase;
}

.participant-requests-tab-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.participant-tab-request-badge {
    padding: 3px 7px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1.2;
}

.participant-tab-request-badge.warning {
    background: #fff2c9;
    color: #8a5400;
}

.participant-tab-request-badge.success {
    background: #ddf6e9;
    color: #087443;
}

.participant-tab-request-badge.danger {
    background: #fde7e7;
    color: #b42318;
}

.trainer-makeup-count {
    display: inline-flex;
    width: fit-content;
    padding: 3px 7px;
    border-radius: 999px;
    background: #fff2c9;
    color: #8a5400;
    font-size: 11px;
    font-weight: 900;
}

.metric.is-warning-metric {
    border-color: #f3cf72;
    background: #fffaf0;
}

.trainer-session-makeup-details {
    display: grid;
    gap: 5px;
    padding: 9px 14px;
    border-top: 1px solid #f3e4bd;
    border-bottom: 1px solid #f3e4bd;
    background: #fffaf0;
    color: #8a5400;
    font-size: 12px;
}

.trainer-session-makeup-details span {
    overflow-wrap: anywhere;
}

.notice-inline.is-danger {
    background: #fde7e7;
    color: #b42318;
}

.coordination-request-strip {
    min-width: 0;
    overflow: hidden;
}

.coordination-request-strip-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
}

.coordination-request-strip-heading > div {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 5px 10px;
}

.coordination-request-strip-heading h2 {
    margin: 0;
    font-size: 1rem;
}

.coordination-request-strip-heading span {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 700;
}

.coordination-request-rail {
    display: flex;
    align-items: stretch;
    gap: 10px;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 12px 14px 14px;
    scroll-padding-inline: 14px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}

.coordination-request-rail:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -3px;
}

.coordination-request-rail-item {
    display: flex;
    flex: 0 0 clamp(350px, 29vw, 460px);
    min-width: 0;
    scroll-snap-align: start;
}

.coordination-request-rail-item .coordination-request-card {
    align-content: start;
    width: 100%;
}

.coordination-request-card {
    display: grid;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--warning);
    border-radius: var(--radius);
    background: #fffaf0;
}

.coordination-request-card.is-full {
    gap: 8px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 12px 14px;
    background: var(--surface);
}

.coordination-request-card.is-request-approved {
    border-left-color: var(--accent);
    background: #f8fcfa;
}

.coordination-request-card.is-request-rejected {
    border-left-color: var(--danger);
    background: #fff7f6;
}

.coordination-request-card.is-request-cancelled {
    border-left-color: var(--config);
    background: #f8fafc;
}

.request-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.request-card-head > div:first-child {
    display: grid;
    gap: 2px;
}

.request-person-link {
    width: fit-content;
    color: var(--text);
    font-weight: 900;
    line-height: 1.25;
    text-decoration: none;
}

.request-person-link:hover {
    color: var(--accent-strong);
    text-decoration: underline;
}

.coordination-request-card.is-compact .request-card-badges {
    display: grid;
    justify-items: end;
    align-content: start;
    gap: 4px;
    margin-left: auto;
}

.coordination-request-card.is-full .request-card-head > div:first-child > strong {
    font-size: 1rem;
    line-height: 1.25;
}

.coordination-request-card.is-full .request-card-head > div:first-child > span {
    font-size: 0.82rem;
}

.request-card-badges,
.request-card-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.coordination-request-card span,
.coordination-request-card small,
.coordination-request-card p {
    margin: 0;
    color: var(--muted);
    font-weight: 800;
}

.request-card-compact-operational {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 10px;
    min-width: 0;
    padding-top: 9px;
    border-top: 1px solid var(--border);
}

.coordination-request-card.is-compact .request-route-comparison {
    gap: 8px;
}

.coordination-request-card.is-compact .request-route-leg {
    gap: 4px;
}

.coordination-request-card.is-compact .request-route-values {
    gap: 1px;
}

.coordination-request-card.is-compact .request-route-values > strong {
    font-size: 0.78rem;
}

.coordination-request-card.is-compact .request-route-values > span {
    font-size: 0.68rem;
    font-weight: 650;
}

.request-card-compact-action {
    display: flex;
    align-items: center;
    padding-left: 10px;
    border-left: 1px solid var(--border);
}

.request-card-compact-action .button {
    white-space: nowrap;
}

.coordination-request-card.is-full .request-card-route {
    padding: 8px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    font-size: 0.95rem;
}

.request-card-inline-notes {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 14px;
    margin-top: 2px;
}

.request-card-inline-notes small {
    font-size: 0.72rem;
    font-weight: 650;
}

.request-card-inline-notes b {
    color: var(--text);
}

.request-card-operational {
    display: grid;
    grid-template-areas: "route lifecycle links";
    grid-template-columns: minmax(300px, 360px) minmax(250px, 290px) minmax(140px, max-content);
    align-items: stretch;
    justify-content: start;
    gap: 12px;
    min-width: 0;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.request-card-operational.has-resolution-actions {
    grid-template-areas: "route lifecycle links resolver";
    grid-template-columns:
        minmax(300px, 360px)
        minmax(250px, 290px)
        minmax(140px, max-content)
        minmax(360px, 1fr);
    justify-content: stretch;
}

.request-card-operational > .request-route-comparison {
    grid-area: route;
}

.request-card-operational > .request-resolution-flow {
    grid-area: lifecycle;
}

.request-card-operational > .request-card-action-column {
    grid-area: links;
}

.request-card-operational > .request-card-resolution-column {
    grid-area: resolver;
}

.request-route-comparison,
.request-resolution-flow {
    display: grid;
    align-items: center;
    min-width: 0;
}

.request-route-comparison {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 14px;
}

.request-route-leg {
    display: grid;
    align-content: start;
    gap: 7px;
    min-width: 0;
    padding: 2px 0;
}

.request-block-label,
.request-resolution-point > span {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.request-route-values {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.request-route-values > strong,
.request-route-values > span {
    overflow-wrap: anywhere;
    color: var(--text);
    font-size: 0.76rem;
    font-weight: 750;
    line-height: 1.3;
}

.request-route-values > strong {
    font-size: 0.86rem;
    font-weight: 900;
}

.request-flow-arrow {
    display: inline-grid;
    width: 18px;
    height: 24px;
    place-items: center;
    color: var(--accent-strong) !important;
    font-size: 1.1rem;
    font-weight: 900;
    line-height: 1;
}

.request-resolution-flow {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 8px;
    padding: 2px 0 2px 16px;
    border-left: 1px solid var(--border);
}

.request-resolution-point {
    display: grid;
    align-content: center;
    gap: 3px;
    min-width: 0;
}

.request-resolution-point strong,
.request-resolution-point small {
    overflow-wrap: anywhere;
}

.request-resolution-point strong {
    color: var(--text);
    font-size: 0.8rem;
    line-height: 1.3;
}

.request-resolution-point small {
    font-size: 0.7rem;
    line-height: 1.3;
}

.request-resolution-point.is-pending strong {
    color: #a15c00;
}

.request-card-action-column {
    align-content: center;
    align-items: stretch;
    flex-direction: column;
    justify-content: center;
    padding-left: 12px;
    border-left: 1px solid var(--border);
}

.request-card-action-column .button {
    width: 100%;
    white-space: nowrap;
}

.request-card-resolution-column {
    display: grid;
    align-content: center;
    gap: 7px;
    min-width: 0;
    padding-left: 12px;
    border-left: 1px solid var(--border);
}

.request-card-resolution-title {
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 900;
}

.request-resolution-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 6px;
    min-width: 0;
}

.request-resolution-date {
    grid-area: date;
}

.request-resolution-notes {
    grid-area: notes;
}

.request-resolution-notice {
    grid-area: notice;
}

.request-resolution-submit {
    grid-area: submit;
}

.request-resolution-form .field span {
    font-size: 0.66rem;
}

.request-resolution-form input {
    min-width: 0;
    min-height: 36px;
    padding: 6px 8px;
    font-size: 0.76rem;
}

.request-resolution-form small {
    font-size: 0.7rem;
    line-height: 1.25;
}

.request-resolution-form.is-group-change {
    grid-template-areas: "date notes submit";
    grid-template-columns: minmax(118px, 0.8fr) minmax(96px, 1fr) auto;
}

.request-resolution-form.is-makeup {
    grid-template-areas:
        "notice notice"
        "notes submit";
}

.request-resolution-form.is-rejection {
    grid-template-areas: "notes submit";
    padding-top: 7px;
    border-top: 1px solid var(--border);
}

.request-card-note {
    padding: 6px 0 6px 10px;
    border-left: 3px solid var(--border);
    font-size: 0.84rem;
}

.request-card-note.is-resolution {
    border-left-color: var(--accent);
}

.request-type-pill,
.request-status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 900;
    white-space: nowrap;
}

.request-type-pill {
    color: #1d4ed8;
    background: var(--program-soft);
}

.request-status-pill.is-request-pending {
    color: #a15c00;
    background: var(--intervention-soft);
}

.request-status-pill.is-request-approved {
    color: var(--accent-strong);
    background: var(--accent-soft);
}

.request-status-pill.is-request-rejected {
    color: var(--danger);
    background: #ffe5e2;
}

.request-status-pill.is-request-cancelled {
    color: var(--config);
    background: var(--config-soft);
}

.coordination-request-card.is-full .request-card-links {
    padding-top: 2px;
}

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

.request-inbox-metrics .metric {
    min-height: 78px;
    padding: 12px 14px;
}

.request-inbox-metrics .metric strong {
    margin: 5px 0 0;
    font-size: 1.75rem;
}

.request-inbox-metrics .metric.is-request-pending {
    border-color: #f3cf72;
    background: #fffaf0;
}

.request-inbox-filters {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.request-filter-button.is-active {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

.request-filter-button.is-active > span {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.request-inbox-results {
    display: grid;
    gap: 10px;
}

.request-inbox-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 4px 0 0;
    color: var(--muted);
    font-weight: 900;
}

.button.is-disabled {
    opacity: 0.45;
    pointer-events: none;
}

.compact-field {
    gap: 4px;
}

.compact-field input,
.compact-field select {
    min-height: 36px;
    padding: 8px 10px;
    font-size: 0.9rem;
}

.compact-stack {
    margin-top: 12px;
}

.row-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.notice-inline {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    margin-top: 4px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #fff4cf;
    color: #8a5400;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.2;
}

.inline-action-details {
    position: relative;
}

.inline-action-details > summary {
    list-style: none;
}

.inline-action-details > summary::-webkit-details-marker {
    display: none;
}

.inline-action-details form {
    position: absolute;
    right: 0;
    z-index: 20;
    display: grid;
    width: min(320px, 82vw);
    gap: 8px;
    margin-top: 8px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.inline-action-details input {
    width: 100%;
}

.trainer-group-list,
.trainer-availability-list {
    display: grid;
    gap: 12px;
}

.trainer-group-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-soft);
    overflow: hidden;
}

.trainer-group-card-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    border-left: 4px solid var(--groups);
    background: var(--surface);
}

.trainer-group-card h3 {
    margin: 4px 0;
    font-size: 22px;
}

.trainer-group-card h3 small {
    color: var(--muted);
    font-size: 16px;
}

.trainer-group-card p {
    margin: 0;
    color: var(--muted);
    font-weight: 700;
}

.trainer-work-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    margin-bottom: 14px;
}

.trainer-tab-button {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--muted);
    font: inherit;
    cursor: pointer;
}

.trainer-tab-button.is-active {
    border-color: var(--accent);
    background: #e7f7f2;
    color: var(--accent-strong);
}

.trainer-tab-panel {
    display: grid;
    gap: 14px;
}

.participant-tab-panel {
    display: grid;
    gap: 14px;
}

.participant-absence-details {
    width: min(420px, 100%);
}

.participant-absence-panel {
    width: 100%;
    margin-top: 8px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

.participant-absence-panel form {
    position: static;
    display: grid;
    width: 100%;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
}

.participant-absence-panel .button {
    justify-self: end;
}

.participant-calendar-row .row-actions {
    align-items: flex-start;
}

.trainer-work-group-card {
    background: var(--surface);
}

.trainer-group-inline-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.trainer-group-inline-meta strong,
.trainer-group-inline-meta span:not(.role-chip) {
    color: var(--muted);
    font-size: 14px;
}

.trainer-participant-table-wrap {
    padding: 16px;
    overflow-x: auto;
}

.trainer-participant-table {
    width: 100%;
    min-width: 820px;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.trainer-participant-table th,
.trainer-participant-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
}

.trainer-participant-table th {
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}

.trainer-participant-table td {
    background: var(--surface);
}

.trainer-participant-table tr:last-child td {
    border-bottom: 0;
}

.trainer-participant-table td:nth-child(3) {
    display: flex;
    align-items: center;
    gap: 8px;
}

.button.whatsapp {
    color: #037f44;
    border-color: #8ee0b7;
    background: #effdf5;
}

.button.whatsapp:hover {
    background: #dcfce7;
}

.participant-extra-info {
    margin-top: 8px;
    border-top: 1px solid var(--border);
    padding-top: 12px;
}

.participant-extra-info h3 {
    margin: 0 0 10px;
}

.trainer-availability-list .stack-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius);
    background: var(--surface-soft);
}

.trainer-modal-shell .modal-card {
    width: min(1180px, calc(100vw - 28px));
}

.trainer-modal-shell.is-report-modal {
    width: min(960px, calc(100vw - 18px));
    max-height: calc(100dvh - 18px);
}

.trainer-modal-shell.is-report-modal .modal-card {
    width: 100%;
    max-height: calc(100dvh - 18px);
    overflow: hidden;
}

.trainer-modal-shell.is-report-modal .modal-header {
    position: sticky;
    top: 0;
    z-index: 4;
    background: var(--surface);
}

.trainer-modal-shell.is-report-modal .modal-body {
    background: var(--surface);
    max-height: calc(100dvh - 96px);
    overflow: auto;
    padding: 0;
}

.trainer-weekly-availability {
    background: var(--surface);
}

.trainer-availability-week-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(150px, 1fr));
    gap: 10px;
    max-width: 100%;
    padding: 12px;
    overflow-x: auto;
}

.trainer-availability-day {
    display: grid;
    align-content: start;
    gap: 8px;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-soft);
}

.trainer-availability-day h4 {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.trainer-availability-slot-form {
    display: grid;
    gap: 7px;
    padding: 9px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius);
    background: var(--surface);
}

.trainer-availability-slot-form strong {
    font-size: 13px;
}

.trainer-availability-slot-form select {
    width: 100%;
    min-height: 34px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 6px 8px;
    background: var(--surface);
}

.trainer-availability-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}

.availability-pill {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
}

.trainer-availability-slot-form.is-available,
.trainer-availability-row.is-available,
.participant-availability-slot-card.is-available,
.participant-availability-chip.is-available,
.availability-pill.is-available {
    border-color: #8dd9b2;
    background: #ecfdf5;
    color: #047857;
}

.trainer-availability-slot-form.is-preferred,
.trainer-availability-row.is-preferred,
.participant-availability-slot-card.is-preferred,
.participant-availability-chip.is-preferred,
.availability-pill.is-preferred {
    border-color: #f7d76c;
    background: #fffbeb;
    color: #92400e;
}

.trainer-availability-slot-form.is-unavailable,
.trainer-availability-row.is-unavailable,
.participant-availability-slot-card.is-unavailable,
.participant-availability-chip.is-unavailable,
.availability-pill.is-unavailable {
    border-color: #cbd5e1;
    background: #f1f5f9;
    color: #475569;
}

.trainer-availability-slot-form.is-empty {
    border-left-color: var(--border);
}

.availability-pill.is-empty {
    background: var(--surface);
    color: var(--muted);
}

.inline-filter {
    display: grid;
    gap: 4px;
    min-width: min(420px, 100%);
}

.inline-filter span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.inline-filter select {
    min-height: 38px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 10px;
    background: var(--surface);
}

.trainer-calendar-controls {
    display: flex;
    align-items: end;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.trainer-week-nav {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.trainer-week-nav strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 900;
}

.button.is-disabled,
.button:disabled {
    opacity: 0.52;
    cursor: not-allowed;
    pointer-events: none;
}

.segmented-control {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-soft);
}

.segmented-control button {
    min-height: 44px;
    border: 0;
    border-radius: calc(var(--radius) - 2px);
    background: transparent;
    color: var(--muted);
    padding: 0 10px;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.segmented-control button.is-active {
    background: var(--surface);
    color: var(--accent-strong);
    box-shadow: 0 1px 5px rgba(15, 23, 42, 0.08);
}

.trainer-calendar-context {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    padding: 14px 16px 0;
}

.trainer-calendar-context span {
    color: var(--accent-strong);
    white-space: nowrap;
}

.trainer-calendar-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(180px, 1fr));
    gap: 10px;
    padding: 14px 16px 16px;
    overflow-x: auto;
}

.trainer-calendar-day {
    display: grid;
    align-content: start;
    gap: 8px;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-soft);
    overflow: hidden;
}

.trainer-calendar-day header {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 10px;
    background: #0f766e;
    color: #fff;
    font-weight: 900;
}

.trainer-calendar-day header strong {
    display: grid;
    gap: 1px;
}

.trainer-calendar-day header strong span {
    color: #d1fae5;
    font-size: 11px;
}

.trainer-calendar-day header small {
    color: #d1fae5;
    font-weight: 900;
}

.trainer-calendar-slot {
    display: grid;
    gap: 6px;
    margin: 0 8px 8px;
    padding: 9px;
    border: 1px solid var(--border);
    border-left: 4px solid #94a3b8;
    border-radius: var(--radius);
    background: var(--surface);
}

.trainer-calendar-slot:first-of-type {
    margin-top: 8px;
}

.trainer-calendar-slot.is-own {
    border-left-color: var(--accent);
    background: #e7f7f2;
}

.trainer-calendar-slot.is-other {
    border-left-color: #94a3b8;
    opacity: 0.86;
}

.trainer-calendar-slot.facility-color-1 {
    border-left-color: #0e7b64;
}

.trainer-calendar-slot.facility-color-2 {
    border-left-color: #2563eb;
}

.trainer-calendar-slot.facility-color-3 {
    border-left-color: #a55a05;
}

.trainer-calendar-slot.facility-color-4 {
    border-left-color: #7c3aed;
}

.trainer-calendar-slot.facility-color-5 {
    border-left-color: #db2777;
}

.trainer-calendar-slot.facility-color-6 {
    border-left-color: #475569;
}

.trainer-calendar-slot div {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.trainer-calendar-slot span,
.trainer-calendar-slot small {
    color: var(--muted);
    font-weight: 800;
}

.trainer-report-table-wrap {
    overflow-x: auto;
    padding: 16px;
}

.trainer-report-table {
    width: 100%;
    min-width: 980px;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.trainer-report-table th,
.trainer-report-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
}

.trainer-report-table th {
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}

.trainer-report-table tr:last-child td {
    border-bottom: 0;
}

.report-status-pill {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 5px 9px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.report-status-pill.is-completed {
    border-color: #8dd9b2;
    background: #ecfdf5;
    color: #047857;
}

.report-status-pill.is-not-completed {
    border-color: #fecaca;
    background: #fff1f2;
    color: #b91c1c;
}

.report-status-pill.is-suspended {
    border-color: #fed7aa;
    background: #fff7ed;
    color: #c2410c;
}

.report-status-pill.is-substitution {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.trainer-report-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.trainer-report-edit-form {
    display: grid;
    gap: 12px;
    padding: 12px;
    background: var(--surface);
}

.report-edit-summary {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.report-edit-summary > div {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-soft);
}

.report-edit-summary span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.report-edit-summary strong {
    overflow-wrap: anywhere;
}

.report-edit-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.report-status-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.report-attendance-list {
    display: grid;
    gap: 10px;
}

.report-attendance-card {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-soft);
}

.report-attendance-card header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.report-attendance-card header div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.report-attendance-card header span:not(.availability-pill) {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.report-attendance-card header strong {
    overflow-wrap: anywhere;
    line-height: 1.25;
}

.report-attendance-controls {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.report-attendance-controls .field select,
.report-attendance-controls .field textarea {
    min-height: 42px;
}

.modal-actions {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: flex;
    justify-content: flex-end;
    padding: 12px 0 0;
    background: linear-gradient(to top, var(--surface) 78%, rgba(255, 255, 255, 0));
}

.modal-actions .button {
    width: 100%;
}

@media (min-width: 720px) {
    .report-edit-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .report-edit-grid {
        grid-template-columns: minmax(220px, 0.45fr) minmax(0, 1fr);
    }

    .report-attendance-controls {
        grid-template-columns: minmax(180px, 0.42fr) minmax(0, 1fr);
    }

    .modal-actions .button {
        width: auto;
    }
}

@media (max-width: 980px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .side-nav {
        position: static;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        max-width: 100vw;
        height: auto;
        padding: 12px;
        overflow: hidden;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .brand {
        margin-bottom: 0;
    }

    .nav-links {
        display: flex;
        max-width: 100%;
        overflow-x: auto;
    }

    .nav-link {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .workspace {
        padding: 16px;
    }

    .metric-grid,
    .context-strip,
    .detail-grid,
    .org-columns,
    .intervention-grid,
    .group-detail-grid,
    .assignment-columns,
    .group-data-summary,
    .center-card-grid,
    .workspace-section-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .two-column-layout,
    .participant-request-layout,
    .trainer-availability-layout {
        grid-template-columns: 1fr;
    }

    .trainer-group-card-header {
        display: grid;
    }

    .trainer-calendar-week {
        grid-template-columns: repeat(7, minmax(160px, 1fr));
    }

    .trainer-availability-week-grid {
        grid-template-columns: repeat(7, minmax(140px, 1fr));
    }

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

    .report-edit-grid {
        grid-template-columns: 1fr;
    }

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

    .data-list-wide {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .bulk-slot-form,
    .bulk-holiday-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .weekly-preview-grid,
    .weekly-read-view {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .coordination-shell,
    .coordination-filters,
    .request-inbox-filters {
        grid-template-columns: 1fr;
    }

    .coordination-board.is-week-compact {
        grid-template-columns: repeat(var(--coordination-column-count), minmax(118px, 1fr));
    }

    .coordination-board.is-wide-compact {
        grid-template-columns: repeat(var(--coordination-column-count), minmax(280px, 1fr));
    }

    .coordination-cell-grid.has-active-groups .coordination-cell.is-empty-facility {
        flex: 0 0 80px;
        min-width: 80px;
        padding: 4px;
    }

    .coordination-board.is-wide-compact .coordination-cell.is-empty-facility .coordination-counters span {
        gap: 2px;
        padding: 1px 2px;
        font-size: 10px;
    }

    .coordination-board.is-wide-compact .coordination-cell-grid.has-active-groups .coordination-slot-card {
        padding: 4px;
    }

    .coordination-sidebar {
        grid-template-columns: 1fr;
    }
}

/*
 * Responsive data patterns
 * - Operational tables become cards on narrow screens.
 * - Temporal attendance matrices keep only their timeline scrollable.
 */
@media (max-width: 720px) {
    .responsive-card-table {
        overflow: visible;
    }

    .responsive-card-table table,
    .responsive-card-table tbody {
        display: block;
        width: 100%;
        min-width: 0;
    }

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

    .responsive-card-table tr:not(.assignment-action-detail-row) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 14px;
        width: 100%;
        margin-bottom: 10px;
        padding: 14px;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: var(--surface);
    }

    .responsive-card-table tr.is-empty-row {
        display: block;
    }

    .responsive-card-table td {
        display: grid;
        min-width: 0;
        gap: 3px;
        padding: 0;
        border: 0;
        overflow-wrap: anywhere;
    }

    .responsive-card-table td[data-label]::before {
        color: var(--muted);
        content: attr(data-label);
        font-size: 10px;
        font-weight: 900;
        letter-spacing: .03em;
        text-transform: uppercase;
    }

    .responsive-card-table td[data-card-wide] {
        grid-column: 1 / -1;
    }

    .responsive-card-table td[data-card-secondary] {
        display: none;
    }

    .responsive-card-table .assignment-action-detail-row[hidden] {
        display: none;
    }

    .responsive-card-table .assignment-action-detail-row:not([hidden]) {
        display: block;
        margin: -4px 0 10px;
    }

    .responsive-card-table .assignment-action-detail-row > td {
        display: block;
    }

    .responsive-card-table .assignment-actions {
        flex-wrap: wrap;
    }

    .session-responsive-table tr:not(.assignment-action-detail-row) {
        gap: 12px 14px;
        padding: 14px;
    }

    .session-responsive-table td[data-label="Fecha"],
    .session-responsive-table td[data-label="Hora"] {
        align-content: start;
    }

    .session-responsive-table td[data-label="Fecha"] strong {
        font-size: 16px;
    }

    .session-responsive-table .attendance-group-launcher {
        width: 100%;
        padding: 9px 10px;
        border: 1px solid rgba(15, 138, 112, 0.2);
        border-radius: 9px;
        background: var(--accent-soft);
    }

    .session-responsive-table .attendance-row-actions {
        width: 100%;
    }

    .session-responsive-table .attendance-row-action[open] {
        width: 100%;
    }

    .session-responsive-table .attendance-row-action form {
        width: 100%;
        min-width: 0;
    }

    .session-responsive-table .attendance-action-grid,
    .session-responsive-table .attendance-person-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .session-responsive-table .attendance-person-row {
        padding: 10px;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: var(--surface);
    }

    .session-responsive-table .attendance-row-action > summary.attendance-action-icon {
        width: 46px;
        min-width: 46px;
        min-height: 46px;
    }

    .group-responsive-table tr:not(.assignment-action-detail-row) {
        gap: 12px 14px;
        padding: 14px;
    }

    .group-responsive-table .group-name-launcher {
        width: 100%;
        padding: 9px 10px;
        border: 1px solid rgba(15, 138, 112, 0.2);
        border-radius: 9px;
        background: var(--accent-soft);
        text-align: left;
    }

    .group-responsive-table td[data-label="Grupo"] > small {
        padding: 0 10px;
    }

    .group-responsive-table .group-change-notice,
    .group-responsive-table .group-change-notice > summary {
        max-width: 100%;
    }

    .group-responsive-table .group-change-notice > div {
        width: 100%;
        min-width: 0;
    }

    .attendance-report-scroll {
        overflow: visible;
        border: 0;
        border-radius: 0;
    }

    .attendance-report-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        min-width: 0;
        margin-bottom: 10px;
        overflow: hidden;
        border: 1px solid var(--border);
        border-radius: var(--radius);
    }

    .attendance-report-row:last-child {
        border-bottom: 1px solid var(--border);
    }

    .attendance-report-person {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .attendance-report-months {
        display: flex;
        width: 100%;
        min-width: 0;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: inline proximity;
        -webkit-overflow-scrolling: touch;
    }

    .attendance-report-months > div {
        flex: 0 0 116px;
        min-width: 116px;
        scroll-snap-align: start;
    }

    .attendance-group-expanded,
    .coordination-attendance-report,
    .group-attendance-report-body {
        min-width: 0;
        max-width: 100%;
    }
}

@media (max-width: 680px) {
    .participant-request-section > summary {
        gap: 10px;
        padding: 14px;
    }

    .participant-request-section-badge.is-status {
        min-width: 72px;
        font-size: 12px;
    }

    .participant-request-section-content {
        padding: 12px;
    }

    .participant-request-main,
    .participant-request-comments {
        display: grid;
        grid-template-columns: 1fr;
    }

    .participant-calendar-row .row-actions,
    .participant-absence-details {
        width: 100%;
    }
}

@media (max-width: 680px) {
    .coordination-calendar-heading {
        align-items: stretch;
    }

    .coordination-calendar-filters {
        flex: 1 0 100%;
        margin-left: 0;
        width: 100%;
    }

    .coordination-calendar-filters .filter-group {
        display: grid;
    }

    .side-nav {
        align-items: stretch;
        flex-direction: column;
        max-height: 52vh;
        overflow-y: auto;
    }

    .nav-links {
        display: grid;
        max-width: none;
        overflow-x: visible;
    }

    .topbar,
    .panel-heading,
    .search-form {
        align-items: stretch;
        flex-direction: column;
    }

    .topbar-actions {
        width: 100%;
    }

    .topbar-actions .button {
        flex: 1;
    }

    .topbar h1 {
        font-size: 24px;
    }

    .metric-grid.center-entity-metric-grid {
        grid-template-columns: 1fr;
    }

    .people-scope-tree-panel {
        padding: 8px 10px 12px;
    }

    .metric-grid,
    .context-strip,
    .detail-grid,
    .org-columns,
    .intervention-grid,
    .group-detail-grid,
    .assignment-columns,
    .group-data-summary,
    .center-card-grid,
    .workspace-section-grid,
    .entity-summary-list,
    .attendance-rule-summary,
    .form-grid,
    .form-grid.compact,
    .check-grid,
    .compact-check-grid,
    .rule-main-grid,
    .rule-group-opening-grid,
    .recovery-grid,
    .rule-toggle-grid,
    .pairing-card-grid,
    .availability-config-grid,
    .data-list,
    .data-list-wide,
    .trainer-attendance-filters,
    .trainer-metric-grid,
    .trainer-action-grid,
    .trainer-session-meta,
    .trainer-attendance-row,
    .request-meta-strip,
    .request-search-row {
        grid-template-columns: 1fr;
    }

    .request-inbox-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .request-inbox-metrics .metric {
        min-height: 70px;
    }

    .request-card-head {
        display: grid;
    }

    .coordination-request-rail-item {
        flex-basis: min(88vw, 360px);
    }

    .coordination-request-card.is-compact .request-card-badges {
        justify-self: end;
    }

    .coordination-request-card.is-compact .request-card-compact-operational {
        gap: 6px;
    }

    .coordination-request-card.is-compact .request-card-compact-action {
        padding-left: 6px;
    }

    .coordination-request-card.is-compact .request-card-compact-action .button {
        padding-inline: 8px;
    }

    .request-card-operational {
        grid-template-columns: minmax(0, 1fr);
    }

    .coordination-request-card.is-full .request-card-head > div:first-child > strong {
        overflow-wrap: anywhere;
        text-wrap: balance;
    }

    .request-route-comparison {
        grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr);
        align-items: start;
        gap: 6px;
    }

    .request-route-values > strong,
    .request-route-values > span {
        font-size: 0.7rem;
        line-height: 1.25;
    }

    .request-route-values > strong {
        font-size: 0.78rem;
    }

    .request-resolution-flow {
        grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr);
        gap: 6px;
    }

    .request-resolution-point strong {
        font-size: 0.72rem;
    }

    .request-resolution-point small {
        font-size: 0.66rem;
    }

    .request-flow-arrow {
        align-self: center;
        justify-self: center;
        width: 16px;
        transform: none;
    }

    .request-route-comparison > .request-flow-arrow {
        align-self: center;
    }

    .request-inbox-filter-actions,
    .request-card-links,
    .request-inbox-pagination {
        align-items: stretch;
        flex-direction: column;
    }

    .request-inbox-filter-actions .button,
    .request-card-links .button,
    .request-inbox-pagination .button {
        width: 100%;
    }

    .seat-status-grid,
    .seat-status-grid.compact {
        grid-template-columns: 1fr;
    }

    .seat-status-card header {
        align-items: flex-start;
        flex-direction: column;
    }

    .trainer-work-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .trainer-tab-button {
        min-height: 42px;
        padding: 8px 10px;
    }

    .trainer-calendar-controls {
        justify-content: stretch;
    }

    .trainer-week-nav,
    .trainer-calendar-controls .inline-filter,
    .trainer-calendar-controls .segmented-control {
        width: 100%;
    }

    .trainer-week-nav .button {
        flex: 1 1 0;
    }

    .trainer-week-nav strong {
        flex: 1 0 100%;
        text-align: center;
    }

    .trainer-calendar-controls .segmented-control button {
        flex: 1 1 0;
    }

    .trainer-calendar-week,
    .trainer-availability-week-grid {
        grid-template-columns: 1fr;
    }

    .participant-saved-availability,
    .participant-availability-board-form {
        margin: 10px;
    }

    .participant-availability-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .participant-availability-toolbar .trainer-availability-legend {
        padding-bottom: 0;
    }

    .participant-availability-toolbar .button {
        width: calc(100% - 24px);
        margin: 0 12px 12px;
    }

    .participant-weekly-availability {
        grid-template-columns: 1fr;
        overflow-x: visible;
        padding: 10px;
    }

    .participant-week-slot-grid {
        grid-template-columns: minmax(0, 1fr) 50px;
    }

    .attendance-extra-flow {
        grid-template-columns: 1fr;
    }

    .report-edit-summary {
        grid-template-columns: 1fr;
    }

    .trainer-report-table,
    .trainer-participant-table {
        min-width: 760px;
    }

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

    .panel-heading .button,
    .search-form .button,
    .form-actions .button {
        width: 100%;
    }

    .form-actions {
        flex-direction: column-reverse;
    }

    .home-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .workspace-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .workspace-hero-actions .button {
        flex: 1;
    }

    .home-hero .button,
    .center-card-actions .button,
    .center-card-actions button {
        width: 100%;
    }

    .center-card-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .responsive-table {
        border-top: 1px solid var(--border);
    }

    .program-node > .org-summary,
    .intervention-node > .org-summary {
        grid-template-columns: 1fr;
    }

    .org-meta,
    .org-counts,
    .program-node > .org-summary .org-meta,
    .program-node > .org-summary .org-counts,
    .intervention-node > .org-summary .org-meta,
    .intervention-node > .org-summary .org-counts {
        grid-column: auto;
        grid-row: auto;
        max-width: none;
        text-align: left;
    }

    .compact-row,
    .facility-config > summary {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .compact-edit summary,
    .row-edit summary {
        width: 100%;
    }

    .inline-form {
        grid-template-columns: 1fr;
    }

    .bulk-slot-form,
    .bulk-holiday-form {
        grid-template-columns: 1fr;
    }

    .weekday-picker > div {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .weekly-preview-grid,
    .weekly-read-view {
        grid-template-columns: 1fr;
    }

    .group-weekly-planner .weekly-day:has(.schedule-card[open]) {
        grid-column: auto;
    }

    .schedule-card > summary {
        grid-template-columns: minmax(0, 1fr);
    }

    .schedule-card > summary .schedule-status-chip {
        justify-self: start;
    }

    .context-mini-form .button,
    .inline-form .button {
        width: 100%;
    }

    .group-operational-filters,
    .group-user-tools,
    .assignment-action-form {
        grid-template-columns: 1fr;
    }

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

    .group-filter-actions .button {
        flex: 1;
    }

    .group-list {
        padding: 12px;
    }

    .group-summary {
        grid-template-columns: 1fr;
    }

    .modal-shell {
        width: calc(100vw - 16px);
        max-height: calc(100vh - 16px);
    }

    .modal-header {
        padding: 12px;
    }

    .modal-body {
        max-height: calc(100vh - 82px);
    }

    .modal-launch-row .button {
        width: 100%;
    }

    .trainer-session-list {
        gap: 10px;
        padding: 10px;
    }

    .trainer-filter-disclosure > summary {
        align-items: stretch;
        flex-direction: column;
        gap: 6px;
    }

    .trainer-filter-disclosure > summary > span {
        font-size: 12px;
    }

    .trainer-session-card-head {
        align-items: start;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 10px 12px;
    }

    .trainer-session-card-head strong.trainer-session-group {
        font-size: 24px;
        line-height: 1.05;
        margin: 0 0 3px;
    }

    .trainer-session-context {
        font-size: 10px;
        margin-bottom: 5px;
        white-space: normal;
    }

    .trainer-session-date {
        display: block;
        font-size: 12px;
        line-height: 1.2;
    }

    .trainer-session-date small {
        margin-left: 4px;
        padding: 1px 6px;
    }

    .trainer-session-time {
        font-size: 17px;
        margin-top: 2px;
    }

    .trainer-session-status {
        align-self: flex-start;
    }

    .trainer-session-meta {
        gap: 6px;
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 9px 12px;
    }

    .trainer-group-meta,
    .trainer-facility-meta {
        display: none;
    }

    .trainer-trainer-meta,
    .trainer-users-meta {
        font-size: 13px;
        line-height: 1.25;
    }

    .trainer-users-meta {
        justify-self: end;
        white-space: nowrap;
    }

    .trainer-session-action > summary,
    .trainer-save-button {
        width: 100%;
    }
}

/* Intervention command center */
.intervention-command-center {
    display: grid;
    gap: 16px;
}

.intervention-command-center > .panel,
.intervention-command-grid > .panel {
    margin-bottom: 0;
}

.intervention-hero {
    align-items: flex-start;
    border-left: 4px solid var(--intervention);
    box-shadow: 0 16px 42px rgba(24, 36, 36, 0.07);
}

.intervention-hero-main {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.intervention-status-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.intervention-status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 9px;
    border: 1px solid #a7ded0;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
}

.intervention-hero p {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.intervention-hero p span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.intervention-hero p span:not(:last-child)::after {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: #9aa8a6;
}

.intervention-hero-actions {
    align-self: center;
}

.intervention-hero-actions .button.primary {
    min-height: 40px;
    padding: 0 14px;
    box-shadow: 0 8px 18px rgba(15, 138, 112, 0.16);
}

.intervention-kpi-strip {
    display: grid;
    grid-template-columns: repeat(7, minmax(118px, 1fr));
    gap: 10px;
}

.intervention-kpi {
    display: grid;
    align-content: center;
    gap: 5px;
    min-width: 0;
    min-height: 86px;
    padding: 13px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 10px 26px rgba(24, 36, 36, 0.045);
}

.intervention-kpi span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.intervention-kpi strong {
    overflow-wrap: anywhere;
    font-size: 24px;
    line-height: 1.05;
}

.intervention-kpi:first-child strong,
.intervention-kpi:nth-child(5) strong,
.intervention-kpi:nth-child(7) strong {
    font-size: 18px;
    line-height: 1.2;
}

.intervention-kpi small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
}

.intervention-kpi-emphasis {
    border-color: #a7ded0;
    background: linear-gradient(180deg, #ffffff 0%, var(--accent-soft) 100%);
}

.intervention-command-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.intervention-command-grid .panel-heading {
    padding: 18px 18px 14px;
}

.intervention-command-grid .panel-heading h2 {
    font-size: 18px;
}

.intervention-command-grid .panel-heading p {
    max-width: 680px;
}

.intervention-configuration {
    display: grid;
    gap: 14px;
}

.intervention-configuration-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 2px 2px;
}

.intervention-configuration-heading h2 {
    margin: 0;
    font-size: 22px;
    line-height: 1.2;
}

.intervention-configuration-heading p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 14px;
}

.intervention-config-components {
    display: grid;
    gap: 12px;
}

.intervention-config-component {
    box-shadow: 0 8px 20px rgba(24, 36, 36, 0.035);
}

.intervention-config-component > summary {
    min-height: 58px;
    padding: 13px 16px;
}

.intervention-config-component > summary span:first-child {
    color: var(--text);
    font-size: 13px;
}

.intervention-config-component[open] > summary {
    background: var(--surface-soft);
}

.intervention-configuration .attendance-rule-summary {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.intervention-configuration .attendance-rule-summary > div {
    gap: 6px;
    padding: 13px 14px;
    border: 0;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: var(--surface);
}

.intervention-configuration .attendance-rule-summary span {
    color: var(--muted);
    letter-spacing: 0.02em;
}

.intervention-configuration .attendance-rule-summary strong {
    font-size: 14px;
    line-height: 1.3;
}

.intervention-calendar-section {
    margin: 0;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(24, 36, 36, 0.05);
}

.intervention-calendar-heading {
    position: relative;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.intervention-calendar-heading .event-calendar-month-nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.event-calendar {
    --calendar-completed: #22c55e;
    --calendar-substitution: #8b5cf6;
    --calendar-not-completed-trainer: #f97316;
    --calendar-not-completed-program: #60a5fa;
    --calendar-suspended-users: #ef4444;
    --calendar-pending: #cbd5e1;
    --calendar-planned: #94a3b8;
    --calendar-milestone: #0e7b64;
    --calendar-holiday: #a55a05;
    display: grid;
    gap: 13px;
    min-width: 0;
    padding: 16px 18px 18px;
}

.event-calendar-toolbar,
.event-calendar-month-nav,
.event-calendar-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
}

.event-calendar-toolbar {
    flex: 1 1 auto;
    justify-content: flex-end;
}

.event-calendar-month-nav strong {
    min-width: 145px;
    text-align: center;
    font-size: 16px;
}

.event-calendar-month-nav .icon-button.is-disabled {
    opacity: 0.35;
    pointer-events: none;
}

.event-calendar-anchor {
    margin-left: 4px;
}

.event-calendar-view-switch button {
    min-width: 96px;
}

.event-calendar-legend {
    gap: 6px 13px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 450;
    line-height: 1.2;
}

.event-calendar-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.event-calendar-legend i {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--calendar-completed);
    opacity: 0.78;
}

.event-calendar-legend i.is-completed {
    background: var(--calendar-completed);
}

.event-calendar-legend i.is-substitution {
    background: var(--calendar-substitution);
}

.event-calendar-legend i.is-not-completed-trainer {
    background: var(--calendar-not-completed-trainer);
}

.event-calendar-legend i.is-not-completed-program {
    background: var(--calendar-not-completed-program);
}

.event-calendar-legend i.is-suspended-users {
    background: var(--calendar-suspended-users);
}

.event-calendar-legend i.is-pending {
    background: var(--calendar-pending);
}

.event-calendar-legend i.is-planned {
    background: var(--calendar-planned);
}

.event-calendar-legend i.is-milestone {
    background: var(--calendar-milestone);
}

.event-calendar-legend i.is-holiday {
    background: var(--calendar-holiday);
}

.event-calendar-holiday-create {
    margin-left: auto;
    font-size: 12px;
}

.event-calendar-month-scroll {
    min-width: 0;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.event-calendar-weekdays,
.event-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(96px, 1fr));
    min-width: 760px;
}

.event-calendar-weekdays {
    border-bottom: 1px solid var(--border);
    background: var(--surface-soft);
}

.event-calendar-weekdays span {
    padding: 9px 8px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.035em;
    text-align: center;
    text-transform: uppercase;
}

.event-calendar-weekdays b {
    font: inherit;
}

.event-calendar-weekday-short {
    display: none;
}

.event-calendar-day {
    min-width: 0;
    min-height: 112px;
    padding: 7px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.event-calendar-day:nth-child(7n) {
    border-right: 0;
}

.event-calendar-day.is-spacer,
.event-calendar-day.is-outside-period {
    background: #f7f9f8;
}

.event-calendar-day.is-outside-period {
    color: #a5afad;
}

.event-calendar-day.is-today {
    box-shadow: inset 0 0 0 2px var(--accent);
}

.event-calendar-day.is-actionable {
    cursor: pointer;
    transition: background-color 140ms ease, box-shadow 140ms ease;
}

.event-calendar-day.is-actionable:hover {
    background: color-mix(in srgb, var(--accent-soft) 48%, var(--surface));
}

.event-calendar-day.is-actionable:focus-visible {
    position: relative;
    z-index: 1;
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.event-calendar-day header {
    display: flex;
    justify-content: flex-end;
    min-height: 25px;
}

.event-calendar-date,
.event-calendar-date-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 25px;
    height: 25px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 12px;
    font-weight: 900;
}

.event-calendar-day-events {
    display: grid;
    gap: 4px;
}

.event-calendar-event {
    display: flex;
    align-items: center;
    min-width: 0;
    width: 100%;
    margin: 0;
    padding: 5px 7px;
    border: 0;
    border-left: 3px solid #cbd5e1;
    border-radius: 5px;
    background: #f8fafc;
    color: #40514d;
    font: inherit;
    text-align: left;
}

button.event-calendar-event {
    cursor: pointer;
}

button.event-calendar-event:hover,
button.event-calendar-event:focus-visible {
    filter: brightness(0.97);
    outline: 2px solid rgba(15, 138, 112, 0.24);
    outline-offset: 1px;
}

.event-calendar-event.is-holiday {
    border-left-color: var(--calendar-holiday);
    background: #fff2e8;
    color: #86420f;
}

.event-calendar-event.is-completed {
    border-left-color: var(--calendar-completed);
    background: #ecfdf3;
    color: #166534;
}

.event-calendar-event.is-substitution {
    border-left-color: var(--calendar-substitution);
    background: #f3efff;
    color: #5b21b6;
}

.event-calendar-event.is-not-completed-trainer {
    border-left-color: var(--calendar-not-completed-trainer);
    background: #fff7ed;
    color: #9a3412;
}

.event-calendar-event.is-not-completed-program {
    border-left-color: var(--calendar-not-completed-program);
    background: #eff6ff;
    color: #1d4ed8;
}

.event-calendar-event.is-suspended-users {
    border-left-color: var(--calendar-suspended-users);
    background: #fef2f2;
    color: #991b1b;
}

.event-calendar-event.is-pending {
    border-left-color: var(--calendar-pending);
    background: #f8fafc;
    color: #475569;
}

.event-calendar-event.is-planned {
    border-left-color: var(--calendar-planned);
    background: #f1f5f9;
    color: #334155;
}

.event-calendar-event.is-milestone {
    border-left-color: var(--calendar-milestone);
    background: var(--accent-soft);
    color: var(--accent-strong);
}

.event-calendar-event.is-muted {
    border-left-color: #aab4b1;
    background: #f2f4f3;
    color: #737f7c;
    opacity: 0.76;
}

.event-calendar-event-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.event-calendar-event-copy strong,
.event-calendar-event-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-calendar-event-copy strong {
    font-size: 10px;
    line-height: 1.25;
}

.event-calendar-event-copy small {
    color: inherit;
    font-size: 9px;
    opacity: 0.76;
}

.event-calendar-more {
    padding-left: 7px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 850;
}

.event-calendar-agenda-list {
    display: grid;
    gap: 10px;
    max-height: 560px;
    overflow-y: auto;
    padding-right: 4px;
}

.event-calendar-agenda-day {
    display: grid;
    grid-template-columns: minmax(150px, 190px) minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.event-calendar-agenda-day > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 13px;
    background: var(--surface-soft);
}

.event-calendar-agenda-day > header strong {
    font-size: 13px;
    line-height: 1.35;
}

.event-calendar-agenda-day > header span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
}

.event-calendar-agenda-day.is-today {
    border-color: #91d3c3;
}

.event-calendar-agenda-events {
    display: grid;
}

.event-calendar-event.is-agenda {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    min-height: 52px;
    padding: 9px 12px;
    border-radius: 0;
    border-bottom: 1px solid rgba(85, 104, 100, 0.1);
}

.event-calendar-event.is-agenda:last-child {
    border-bottom: 0;
}

.event-calendar-event.is-agenda .event-calendar-event-copy strong {
    font-size: 13px;
}

.event-calendar-event-status {
    align-self: center;
    padding: 4px 7px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    white-space: nowrap;
    opacity: 0.78;
}

.event-calendar-empty {
    padding: 28px 12px;
    text-align: center;
}

.calendar-day-modal,
.calendar-holiday-editor,
.session-entity-modal {
    display: grid;
    gap: 14px;
    padding: 14px;
}

.calendar-day-modal-summary,
.session-entity-summary,
.calendar-day-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.calendar-day-modal-summary,
.session-entity-summary {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-soft);
}

.calendar-day-modal-summary h3,
.session-entity-summary h3,
.calendar-holiday-editor h3,
.calendar-day-section h4,
.calendar-day-section p,
.calendar-holiday-editor p,
.session-entity-summary p {
    margin: 0;
}

.calendar-day-modal-summary h3,
.session-entity-summary h3,
.calendar-holiday-editor h3 {
    margin-top: 3px;
    font-size: 20px;
}

.session-entity-summary p,
.calendar-holiday-editor p {
    margin-top: 4px;
    color: var(--muted);
}

.calendar-day-status {
    flex: 0 0 auto;
    padding: 5px 9px;
    border-radius: 999px;
    background: #edf1f0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
}

.calendar-day-status.is-holiday,
.calendar-day-status.is-warning {
    background: #fff2e8;
    color: #9a4a11;
}

.calendar-day-status.is-success {
    background: #ecfdf3;
    color: #166534;
}

.calendar-day-milestones {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.calendar-day-milestones span {
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-size: 11px;
    font-weight: 850;
}

.calendar-day-section {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.calendar-day-section-heading p {
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
}

.calendar-day-event-list,
.calendar-day-session-list {
    display: grid;
    gap: 8px;
}

.calendar-day-event-list article {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 11px;
    border-radius: 9px;
    background: var(--surface-soft);
}

.calendar-day-event-list article div {
    display: grid;
    gap: 2px;
}

.calendar-day-event-list small {
    color: var(--muted);
}

.calendar-event-dot {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    background: #a55a05;
}

.calendar-event-dot.is-muted {
    background: #aab4b1;
}

.calendar-day-session-card {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-left: 3px solid #94a3b8;
    border-radius: 9px;
}

.calendar-day-session-card.is-completed { border-left-color: #22c55e; }
.calendar-day-session-card.is-substitution { border-left-color: #8b5cf6; }
.calendar-day-session-card.is-not-completed-trainer { border-left-color: #f97316; }
.calendar-day-session-card.is-not-completed-program { border-left-color: #60a5fa; }
.calendar-day-session-card.is-suspended-users { border-left-color: #ef4444; }
.calendar-day-session-card.is-pending { border-left-color: #cbd5e1; }

.calendar-day-session-time,
.calendar-day-session-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.calendar-day-session-time strong {
    font-size: 15px;
}

.calendar-day-session-time small,
.calendar-day-session-copy span,
.calendar-day-session-copy small {
    color: var(--muted);
    font-size: 11px;
}

.calendar-day-session-copy span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-day-group-launcher {
    justify-self: start;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-weight: 900;
    text-align: left;
    cursor: pointer;
}

.calendar-day-group-launcher:hover,
.calendar-day-group-launcher:focus-visible {
    color: var(--accent-strong);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.calendar-day-session-actions {
    display: flex;
    gap: 7px;
}

.calendar-day-empty {
    padding: 22px 8px;
    text-align: center;
}

.calendar-holiday-editor > header {
    padding: 4px 2px;
}

.calendar-holiday-editor .modal-form,
.calendar-holiday-editor .modal-delete-form {
    margin: 0;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.calendar-holiday-editor .modal-delete-form {
    display: flex;
    justify-content: flex-end;
    padding: 12px 16px;
}

.session-entity-modal .session-responsive-table {
    margin: 0;
}

@media (max-width: 720px) {
    .calendar-day-modal,
    .calendar-holiday-editor,
    .session-entity-modal {
        padding: 8px;
    }

    .calendar-day-modal-summary,
    .session-entity-summary,
    .calendar-day-section-heading {
        flex-direction: column;
    }

    .calendar-day-session-card {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 9px;
        padding: 10px;
    }

    .calendar-day-session-actions {
        grid-column: 1 / -1;
        justify-content: stretch;
    }

    .calendar-day-session-actions .button,
    .calendar-day-section-heading .button {
        justify-content: center;
        width: 100%;
    }

    .calendar-day-section,
    .calendar-day-modal-summary,
    .session-entity-summary {
        padding: 12px;
    }

    .calendar-day-status {
        align-self: flex-start;
    }

    .calendar-holiday-editor .modal-form,
    .calendar-holiday-editor .modal-delete-form {
        padding: 12px;
    }
}

.operation-entity-row {
    align-items: center;
    flex-wrap: nowrap;
    gap: 12px;
    min-height: 58px;
    background: var(--surface);
}

.operation-entity-row .operation-row-main,
.operation-entity-row .operation-row-meta {
    margin-top: 0;
    min-width: 0;
}

.operation-entity-row .operation-row-main {
    display: grid;
    flex: 1 1 auto;
    gap: 3px;
}

.operation-entity-row .operation-row-main strong {
    font-size: 14px;
    line-height: 1.25;
}

.operation-entity-row .operation-row-main span {
    margin-top: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
}

.operation-entity-row .operation-row-meta {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
}

.operation-entity-row .operation-pill,
.operation-entity-row .operation-status,
.operation-entity-row .operation-role {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    margin-top: 0;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.operation-entity-row .operation-pill {
    border: 1px solid #fed7aa;
    background: var(--intervention-soft);
    color: #9a5b05;
}

.operation-entity-row .operation-status {
    border: 1px solid #a7ded0;
    background: var(--accent-soft);
    color: var(--accent-strong);
}

.operation-entity-row .operation-role {
    border: 1px solid var(--border);
    background: var(--surface-soft);
    color: var(--muted);
}

@media (max-width: 1380px) {
    .intervention-kpi-strip {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1180px) {
    .intervention-command-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .intervention-kpi-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .onboarding-card-header {
        display: grid;
    }

    .onboarding-progress {
        width: 100%;
        text-align: left;
    }

    .onboarding-step {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .onboarding-step .button,
    .onboarding-step .role-chip {
        grid-column: 1 / -1;
        justify-self: stretch;
    }

    .intervention-hero {
        align-items: stretch;
    }

    .intervention-hero-actions {
        width: 100%;
        justify-content: stretch;
    }

    .intervention-hero-actions .button.primary {
        flex: 1 1 140px;
        justify-content: center;
    }

    .intervention-kpi-strip {
        grid-template-columns: 1fr;
    }

    .intervention-configuration-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .intervention-configuration-heading .button {
        justify-content: center;
        width: 100%;
    }

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

    .intervention-calendar-heading .event-calendar-month-nav {
        position: static;
        transform: none;
    }

    .event-calendar {
        gap: 10px;
        padding: 12px 8px 14px;
    }

    .event-calendar-toolbar,
    .event-calendar-month-nav,
    .event-calendar-view-switch {
        width: 100%;
    }

    .event-calendar-month-nav {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .event-calendar-month-nav strong {
        min-width: 0;
    }

    .event-calendar-anchor {
        grid-column: 1 / -1;
        justify-content: center;
        margin-left: 0;
    }

    .event-calendar-view-switch button {
        flex: 1 1 50%;
        min-width: 0;
    }

    .event-calendar-legend {
        gap: 7px 10px;
    }

    .event-calendar-holiday-create {
        justify-content: center;
        width: 100%;
        margin-top: 3px;
        margin-left: 0;
    }

    .event-calendar-weekdays,
    .event-calendar-grid {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        min-width: 0;
    }

    .event-calendar-weekdays span {
        padding: 7px 2px;
    }

    .event-calendar-weekday-full {
        display: none;
    }

    .event-calendar-weekday-short {
        display: inline;
    }

    .event-calendar-day {
        min-height: 62px;
        padding: 4px;
    }

    .event-calendar-day header {
        min-height: 20px;
    }

    .event-calendar-date {
        width: 20px;
        height: 20px;
        font-size: 10px;
    }

    .event-calendar-day-events {
        gap: 3px;
    }

    .event-calendar-event.is-month {
        min-height: 5px;
        height: 5px;
        padding: 0;
        border: 0;
        border-radius: 3px;
        background: #94a3b8;
    }

    .event-calendar-event.is-month.is-completed { background: var(--calendar-completed); }
    .event-calendar-event.is-month.is-substitution { background: var(--calendar-substitution); }
    .event-calendar-event.is-month.is-not-completed-trainer { background: var(--calendar-not-completed-trainer); }
    .event-calendar-event.is-month.is-not-completed-program { background: var(--calendar-not-completed-program); }
    .event-calendar-event.is-month.is-suspended-users { background: var(--calendar-suspended-users); }
    .event-calendar-event.is-month.is-pending { background: var(--calendar-pending); }
    .event-calendar-event.is-month.is-planned { background: var(--calendar-planned); }
    .event-calendar-event.is-month.is-milestone { background: var(--calendar-milestone); }
    .event-calendar-event.is-month.is-holiday { background: var(--calendar-holiday); }
    .event-calendar-event.is-month.is-muted { background: #aab4b1; }

    .event-calendar-event.is-month .event-calendar-event-copy {
        display: none;
    }

    .event-calendar-more {
        padding-left: 1px;
        font-size: 8px;
    }

    .event-calendar-agenda-day {
        grid-template-columns: 1fr;
    }

    .event-calendar-agenda-day > header {
        align-items: center;
    }

    .operation-entity-row {
        align-items: stretch;
        flex-direction: column;
    }

    .operation-entity-row .operation-row-meta {
        justify-content: flex-start;
    }
}

.import-form label {
    display: grid;
    gap: 7px;
}

.import-template-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.import-template-actions .button {
    white-space: nowrap;
}

.import-template-actions small {
    flex-basis: 100%;
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
    text-align: right;
}

.import-form small,
.muted-text {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.import-status {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    color: var(--muted);
    background: #eef3f2;
    font-size: 12px;
    font-weight: 850;
    text-transform: capitalize;
}

.import-status.is-valid,
.import-status.is-imported {
    color: var(--accent-strong);
    background: var(--accent-soft);
}

.import-status.is-warning,
.import-status.is-previewed,
.import-status.is-processing {
    color: var(--warning);
    background: #fff4d6;
}

.import-status.is-error,
.import-status.is-failed {
    color: var(--danger);
    background: #fff1f0;
}

.import-status.is-skipped {
    color: var(--muted);
    background: #eef3f2;
}

.import-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--border);
}

.import-metrics article {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-soft);
}

.import-metrics strong {
    font-size: 24px;
    line-height: 1;
}

.import-metrics span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.import-confirm-form {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(220px, 300px) auto;
    align-items: end;
    gap: 14px;
    padding: 16px;
}

.import-confirm-form h3 {
    margin: 0 0 4px;
    font-size: 16px;
}

.import-confirm-form p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.import-confirm-form label {
    display: grid;
    gap: 7px;
    font-weight: 800;
}

.import-confirm-form small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.import-confirm-form.is-processing {
    background: #fffdf5;
}

.import-processing-message {
    margin-top: 8px !important;
    color: var(--warning) !important;
}

.import-row-messages {
    margin: 0;
    padding-left: 18px;
    font-size: 12px;
    font-weight: 750;
}

.import-row-messages + .import-row-messages {
    margin-top: 6px;
}

.import-row-messages.is-error {
    color: var(--danger);
}

.import-row-messages.is-warning {
    color: var(--warning);
}

.import-row-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.import-row-discard-form {
    margin: 0;
}

.import-row-action-button {
    min-height: 32px;
    padding: 0 10px;
    font-size: 12px;
    white-space: nowrap;
}

.import-row-action-button.is-open {
    color: var(--surface);
    background: var(--accent);
    border-color: var(--accent);
}

.import-editor-row[hidden] {
    display: none;
}

.import-editor-cell {
    padding: 0 16px 16px !important;
    background: #fbfdfd;
}

.import-row-editor-panel {
    display: grid;
    gap: 12px;
    margin-top: 10px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.import-row-editor-panel strong {
    display: block;
    font-size: 15px;
}

.import-row-editor-panel p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.import-row-editor-form {
    display: grid;
    grid-template-columns: repeat(6, minmax(120px, 1fr));
    align-items: end;
    gap: 10px;
}

.import-row-editor-form label {
    display: grid;
    gap: 5px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
}

.import-row-editor-form .button {
    min-height: var(--control);
    justify-content: center;
}

.import-preview-table td {
    vertical-align: top;
}

.import-preview-table th:last-child {
    width: 176px;
}

.import-preview-table tr:not(.import-editor-row) > td:last-child {
    width: 176px;
}

@media (max-width: 980px) {
    .import-metrics,
    .import-confirm-form {
        grid-template-columns: 1fr;
    }

    .import-row-editor-form {
        grid-template-columns: repeat(2, minmax(160px, 1fr));
    }

    .import-preview-table th:last-child,
    .import-preview-table tr:not(.import-editor-row) > td:last-child {
        width: 176px;
    }
}

/* Responsive request card composition */
@media (max-width: 1400px) {
    .request-card-operational,
    .request-card-operational.has-resolution-actions {
        grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr);
        justify-content: stretch;
    }

    .request-card-operational {
        grid-template-areas:
            "route links"
            "lifecycle links";
    }

    .request-card-operational.has-resolution-actions {
        grid-template-areas:
            "route links"
            "lifecycle resolver";
    }

    .request-card-operational > * {
        min-width: 0;
    }

    .request-resolution-flow {
        padding: 10px 0 0;
        border-top: 1px solid var(--border);
        border-left: 0;
    }

    .request-card-action-column {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
        align-content: center;
        gap: 6px;
    }

    .request-card-action-column .button {
        width: 100%;
        min-width: 0;
        padding-inline: 8px;
        white-space: normal;
    }

    .request-card-resolution-column {
        align-content: start;
        padding-top: 10px;
        border-top: 1px solid var(--border);
    }
}

@media (max-width: 760px) {
    .request-card-operational,
    .request-card-operational.has-resolution-actions {
        grid-template-columns: minmax(0, 1fr);
    }

    .request-card-operational {
        grid-template-areas:
            "route"
            "lifecycle"
            "links";
    }

    .request-card-operational.has-resolution-actions {
        grid-template-areas:
            "route"
            "lifecycle"
            "links"
            "resolver";
    }

    .request-card-action-column,
    .request-card-resolution-column {
        padding: 10px 0 0;
        border-top: 1px solid var(--border);
        border-left: 0;
    }
}

@media (max-width: 520px) {
    .request-resolution-form.is-group-change {
        grid-template-areas:
            "date submit"
            "notes notes";
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

@media (max-width: 420px) {
    .request-card-action-column {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* Reusable manual WhatsApp handoff. */
.whatsapp-modal-shell .modal-card {
    max-width: 680px;
}

.whatsapp-modal-header p,
.whatsapp-modal-shell .modal-header p {
    margin: 0.25rem 0 0;
    color: var(--text-muted, #64748b);
}

.whatsapp-modal-body {
    display: grid;
    gap: 1rem;
}

.whatsapp-person-results {
    display: grid;
    gap: 0.5rem;
    max-height: 220px;
    overflow-y: auto;
}

.whatsapp-person-option,
.whatsapp-selected-person {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--border, #dbe3ea);
    border-radius: 0.75rem;
    background: #fff;
    color: inherit;
    text-align: left;
}

.whatsapp-person-option {
    cursor: pointer;
}

.whatsapp-person-option:hover,
.whatsapp-person-option:focus-visible {
    border-color: #15803d;
    background: #f0fdf4;
}

.whatsapp-person-option span,
.whatsapp-selected-person span {
    color: var(--text-muted, #64748b);
    font-size: 0.85rem;
}

.whatsapp-actions {
    justify-content: flex-end;
}

@media (max-width: 640px) {
    .whatsapp-person-option,
    .whatsapp-selected-person {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.2rem;
    }

    .whatsapp-actions .button {
        width: 100%;
    }
}

/* Ficha de llamada -------------------------------------------------------- */
/* El operador pasa semanas aqui y el publico es de edad avanzada: ningun
   objetivo por debajo de 44 px y ningun texto por debajo de 12 px. */

.call-sheet-context .call-sheet-hint {
    color: var(--text-muted, #475569);
    font-size: 0.875rem;
    margin: 0 0 0.75rem;
    max-width: 70ch;
}

/* Alert inbox: the whole card is clickable without looking like a generic button. */
.alert-operation-list .alert-row {
    display: grid;
    /*
     * UNA columna. Antes eran dos -cuerpo | meta- y el estado quedaba en una columna
     * lateral. Ahora la primera linea lleva gravedad, nombre y, a la derecha, estado y
     * lectura; el resto va debajo. Ocupa menos alto y se lee de un vistazo.
     */
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-left: 4px solid #d5a33d;
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 2px 8px rgba(24, 36, 36, .04);
}

.alert-operation-list .alert-row.severity-grave {
    border-left-color: #dc4545;
}

.alert-card-main.button.secondary {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 14px 16px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text);
    box-shadow: none;
    white-space: normal;
}

.alert-card-main.button.secondary > span:last-child {
    display: grid;
    width: 100%;
    gap: 3px;
    text-align: left;
}

.alert-card-main strong {
    font-size: 15px;
    line-height: 1.25;
}

.alert-card-main small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
}

.alert-card-main.button.secondary:hover,
.alert-card-main.button.secondary:focus-visible {
    background: color-mix(in srgb, var(--accent-soft) 55%, white);
    transform: none;
}

.alert-operation-list .operation-row-meta {
    align-content: center;
    justify-content: flex-end;
    min-width: 215px;
    padding: 12px 14px;
    border-left: 1px solid var(--border);
    background: var(--surface-soft);
}

.alert-read-toggle-form {
    margin: 0;
}

.alert-read-toggle.button {
    min-height: 34px;
    padding: 6px 10px;
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
    background: var(--surface);
    color: var(--accent-strong);
    font-size: 11px;
}

/* Participant portal: compact secondary navigation shared by requests and agenda. */
.participant-subtab-shell {
    display: grid;
    min-width: 0;
    gap: 14px;
}

.participant-agenda-shell {
    grid-column: 1 / -1;
}

.participant-subtabs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-soft);
}

.participant-subtab-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    gap: 8px;
    padding: 9px 15px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-weight: 900;
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.participant-subtab-button:hover,
.participant-subtab-button:focus-visible {
    color: var(--accent-strong);
    background: color-mix(in srgb, var(--surface) 82%, var(--accent-soft));
}

.participant-subtab-button.is-active {
    border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
    background: var(--surface);
    color: var(--accent-strong);
    box-shadow: 0 5px 14px rgba(15, 93, 79, 0.09);
}

.participant-subtab-button > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #e2f2ed;
    color: var(--accent-strong);
    font-size: 11px;
    line-height: 1;
}

.participant-subtab-button > span.is-notice {
    background: #fff0c2;
    color: #8a5400;
}

.participant-subtab-panel[hidden] {
    display: none !important;
}

.participant-request-sections {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
}

.participant-request-section.participant-subtab-panel {
    border: 0;
}

.participant-request-section.participant-subtab-panel > summary {
    display: none;
}

.participant-request-section.participant-subtab-panel > .participant-request-section-content {
    padding: 18px;
}

/* Participant seat status: dense, readable and usable from phone to desktop. */
.participant-seat-status-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr));
}

.participant-seat-status-card {
    align-content: start;
    gap: 18px;
    min-height: 0;
    padding: 20px;
    border-left-width: 1px;
    box-shadow: 0 10px 28px rgba(24, 47, 43, 0.07);
}

.participant-seat-status-card.is-success {
    border-top: 4px solid var(--success);
}

.participant-seat-status-card.is-warning {
    border-top: 4px solid var(--warning);
}

.participant-seat-status-card.is-danger {
    border-top: 4px solid var(--danger);
}

.participant-seat-status-card.is-muted {
    border-top: 4px solid var(--muted);
}

.participant-seat-status-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.participant-seat-status-header > div {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.participant-seat-status-program {
    color: var(--accent-strong);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.participant-seat-status-header h3 {
    margin: 0;
    color: var(--text);
    font-size: clamp(18px, 2vw, 22px);
    line-height: 1.2;
}

.participant-seat-status-pill {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 30px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #eef2f2;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.participant-seat-status-pill.is-success {
    background: #dff5e9;
    color: #087443;
}

.participant-seat-status-pill.is-warning {
    background: #fff0c2;
    color: #8a5400;
}

.participant-seat-status-pill.is-danger {
    background: #fde5e5;
    color: #b42318;
}

.participant-seat-status-overview {
    display: grid;
    gap: 10px;
    padding: 16px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 70%, var(--accent-soft));
}

.participant-seat-status-score {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 2px 16px;
}

.participant-seat-status-score > span,
.participant-seat-status-score > small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.participant-seat-status-score > strong {
    grid-row: 1 / span 2;
    grid-column: 2;
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1;
}

.participant-seat-status-progress {
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--border) 72%, white);
}

.participant-seat-status-progress > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--accent);
}

.participant-seat-status-card.is-warning .participant-seat-status-progress > span {
    background: var(--warning);
}

.participant-seat-status-card.is-danger .participant-seat-status-progress > span {
    background: var(--danger);
}

.participant-seat-status-card.is-success .participant-seat-status-progress > span {
    background: var(--success);
}

.participant-seat-status-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.participant-seat-status-metrics > div {
    display: grid;
    gap: 5px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

.participant-seat-status-metrics dt {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

.participant-seat-status-metrics dd {
    margin: 0;
    color: var(--text);
    font-size: 17px;
    font-weight: 900;
}

.participant-seat-status-message {
    margin: 0;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    line-height: 1.5;
}

@media (max-width: 640px) {
    .participant-subtabs {
        display: grid;
        grid-template-columns: 1fr;
        padding: 5px;
    }

    .participant-subtab-button {
        width: 100%;
        justify-content: space-between;
        text-align: left;
    }

    .participant-seat-status-card {
        gap: 14px;
        padding: 15px;
    }

    .participant-seat-status-header {
        flex-direction: column;
        gap: 10px;
    }

    .participant-seat-status-metrics {
        grid-template-columns: 1fr;
    }

    .participant-seat-status-metrics > div {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }
}

/* Alert detail: clear hierarchy and denser management controls. */
.entity-modal-shell[data-entity-modal-kind="alert"] {
    width: min(1120px, calc(100vw - 28px));
}

.alert-detail-modal {
    gap: 14px;
    padding: 18px;
}

.alert-detail-summary {
    padding: 18px;
    border: 1px solid var(--border);
    border-left: 4px solid #dc4545;
    border-radius: 12px;
    background: linear-gradient(135deg, #fff 0%, #fff8f7 100%);
}

.alert-detail-summary h3 {
    font-size: 22px;
}

.alert-detail-badges {
    justify-content: flex-end;
}

.alert-detail-modal > .panel {
    overflow: hidden;
    border-radius: 12px;
    box-shadow: none;
}

.alert-detail-modal > .panel > .panel-heading {
    padding: 15px 18px;
    background: var(--surface);
}

.alert-read-action {
    display: flex;
    justify-content: flex-end;
    margin: -4px 0 0;
}

.alert-detail-facts {
    gap: 10px;
    padding: 0 18px 18px;
}

.alert-detail-facts div {
    padding: 12px 14px;
    background: #f7faf9;
}

.alert-detail-modal .form-grid.compact {
    display: grid;
    grid-template-columns: minmax(180px, .55fr) minmax(320px, 1fr) auto;
    align-items: end;
    gap: 14px;
    padding: 18px;
}

.alert-detail-modal .form-grid.compact textarea {
    min-height: 58px;
}

/* Session actions: one focused form per modal, never a table inside a modal. */
.entity-modal-shell[data-entity-modal-kind="session-action"] {
    width: min(860px, calc(100vw - 28px));
}

.entity-modal-shell[data-entity-modal-kind="session-action"] .modal-card {
    height: auto;
    max-height: min(92vh, 900px);
}

.session-action-modal {
    display: grid;
    gap: 14px;
    padding: 16px;
}

.session-action-summary {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: linear-gradient(135deg, var(--surface) 0%, var(--surface-soft) 100%);
}

.session-action-date {
    display: grid;
    gap: 3px;
    padding-right: 18px;
    border-right: 1px solid var(--border);
}

.session-action-date span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 750;
}

.session-action-date strong {
    font-size: 18px;
}

.session-action-context h3,
.session-action-context p {
    margin: 3px 0 0;
}

.session-action-context h3 {
    font-size: 20px;
}

.session-action-context p {
    color: var(--muted);
}

.session-action-panel,
.session-action-form {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.session-action-panel {
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.session-action-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.session-action-fields-modify {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.session-action-fields label,
.session-participant-row label {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.session-action-fields label > span {
    font-weight: 800;
}

.session-action-fields input,
.session-action-fields select,
.session-action-fields textarea,
.session-participant-row input,
.session-participant-row select {
    width: 100%;
}

.session-action-explanation {
    padding: 14px 16px;
    border-left: 4px solid var(--accent);
    border-radius: 9px;
    background: var(--accent-soft);
}

.session-action-explanation p {
    margin: 4px 0 0;
}

.session-participant-section {
    display: grid;
    gap: 10px;
}

.session-participant-section h4,
.session-participant-section p {
    margin: 0;
}

.session-participant-section p {
    color: var(--muted);
    font-size: 12px;
}

.session-participant-list {
    display: grid;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.session-participant-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(170px, .7fr) minmax(170px, .8fr);
    gap: 12px;
    align-items: center;
    padding: 11px 12px;
    background: var(--surface);
}

.session-participant-row + .session-participant-row {
    border-top: 1px solid var(--border);
}

.session-participant-name {
    display: grid;
    gap: 2px;
}

.session-participant-name small {
    color: #a35410;
    font-size: 11px;
    font-weight: 750;
}

.session-action-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.session-action-footer p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

.attendance-row-actions > .attendance-action-icon.button {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    padding: 0;
    font-size: 18px;
}

@media (max-width: 760px) {
    .alert-operation-list .alert-row {
        grid-template-columns: 1fr;
    }

    /*
     * En movil la cabecera se parte: gravedad y estado arriba, y el nombre en su
     * propia linea a todo el ancho. Sin esto, los tres bloques peleaban por 375 px y
     * el nombre se partia en cinco lineas -medido el 2026-08-10-.
     */
    .alert-operation-list .alert-row-head {
        flex-wrap: wrap;
    }

    .alert-operation-list .alert-row-subject {
        order: 3;
        flex: 1 1 100%;
    }

    .alert-operation-list .operation-row-meta {
        justify-content: flex-start;
        min-width: 0;
        padding: 10px 14px;
        border-top: 1px solid var(--border);
        border-left: 0;
    }

    .alert-detail-modal {
        padding: 10px;
    }

    .alert-detail-modal .form-grid.compact,
    .session-action-summary,
    .session-action-fields,
    .session-action-fields-modify,
    .session-participant-row {
        grid-template-columns: 1fr;
    }

    .session-action-modal {
        padding: 8px;
    }

    .session-action-summary,
    .session-action-panel {
        padding: 13px;
    }

    .session-action-date {
        padding: 0 0 10px;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .session-action-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .session-action-footer .button {
        justify-content: center;
        width: 100%;
    }
}

.call-follow-up-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 1rem;
}

.call-attempt-now {
    color: var(--text-muted, #475569);
    font-size: 0.875rem;
}

.call-attempt-history {
    margin-top: 1rem;
}

.whatsapp-confirmation-preview > summary {
    cursor: pointer;
    display: inline-flex;
    list-style: none;
    margin-bottom: 1rem;
    min-height: 44px;
}

.whatsapp-confirmation-preview > summary::-webkit-details-marker {
    display: none;
}

.whatsapp-confirmation-preview textarea {
    min-height: 24rem;
    resize: vertical;
    white-space: pre-wrap;
}

.scope-branch {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}

.scope-branch-line {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    margin: 0;
    min-height: 44px;
}

.call-sheet-members {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.call-sheet-member {
    background: var(--surface-subtle, #f8fafc);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 12px;
    padding: 1rem;
}

.call-sheet-member-head {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    min-height: 44px;
}

.call-sheet-member-head h3 {
    font-size: 1rem;
    margin: 0;
}

.call-sheet-member-extra {
    margin-top: 0.75rem;
}

.call-sheet-member-extra > summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-size: 0.9375rem;
    min-height: 44px;
}

.call-sheet-apply-to {
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin: 0 0 1rem;
    padding: 0.5rem 1rem 0.75rem;
}

.call-sheet-apply-to > legend {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 0 0.35rem;
    text-transform: uppercase;
}

.call-sheet-checkbox {
    align-items: center;
    display: flex;
    font-size: 0.9375rem;
    gap: 0.5rem;
    min-height: 44px;
}

/* `min-height` va aquí porque `.field input` impone `min-height: var(--control)`
   —44px— y gana a cualquier `height`: sin esto la casilla de la unidad familiar,
   que sí vive dentro de un `.field`, salía de 24 x 44. El objetivo táctil lo
   pone la etiqueta. */
.call-sheet-checkbox input[type="checkbox"] {
    height: 24px;
    min-height: 24px;
    width: 24px;
}

.call-sheet-duplicate {
    display: block;
    font-size: 0.875rem;
    padding: 0.15rem 0;
}

.call-sheet-toggle .call-sheet-checkbox {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.25rem;
}

@media (max-width: 640px) {
    .call-follow-up-grid {
        grid-template-columns: 1fr;
    }

    .rule-subsection {
        grid-column: auto;
        grid-template-columns: 1fr;
    }

    .call-sheet-member-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.5rem;
    }

    .call-sheet-apply-to {
        flex-direction: column;
        gap: 0;
    }
}

/* Identificadores como piezas independientes, al modo de los destinatarios de un
   correo. No esta acotado a `.call-sheet` porque el mismo componente va a usarse
   en el alta y en la edicion de personas.

   Dos cosas que no son cosmeticas:

   - `.token-input` tiene que ganar a `.field input`, que impone `width: 100%` y
     lo echaria a su propia linea rompiendo la caja. Gana por especificidad: dos
     clases contra una clase y un elemento.
   - El objetivo tactil es el boton de quitar, con sus 44px. Una «x» pequena es
     exactamente el defecto D6, que ya se pago dos veces en esta pantalla. */

.token-field > label {
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
}

.token-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: var(--control);
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.token-box:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Las piezas ocupan sus propias lineas y la caja de escritura queda debajo: con
   piezas de 44px, mezclarlas en la misma linea reordena el cursor cada vez que
   se anade una. Sin piezas, la lista desaparece y no deja hueco. */
.token-list {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.token-list:empty {
    display: none;
}

/* Con `.token-field` delante a proposito: `.field span` es una clase mas un
   elemento, asi que gana a `.token-chip` a secas y dejaba el codigo en 13px.
   Un identificador que el operador tiene que leer y verificar 200 veces merece
   mas que el minimo. */
.token-field .token-chip {
    gap: 2px;
    min-height: var(--control);
    padding: 0 0 0 12px;
    font-size: 0.9375rem;
}

.token-field .token-chip [data-token-label] {
    font-size: inherit;
    font-weight: 700;
}

.token-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--control);
    min-height: var(--control);
    padding: 0;
    border: 0;
    border-radius: 999px;
    color: inherit;
    background: transparent;
    cursor: pointer;
}

.token-remove svg {
    width: 16px;
    height: 16px;
}

/* Explicito y no heredado del navegador: al quitarle el borde al boton se
   quedaba sin ningun indicador de foco, y quitar una pieza solo con teclado era
   ir a ciegas. Criterio 2.4.7. */
.token-remove:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.token-remove:hover {
    background: rgba(15, 138, 112, 0.12);
}

/* Sugerencias del selector de personas. Comparte la caja y las piezas con el
   campo de identificadores; lo propio es la lista de resultados. */

.person-picker {
    position: relative;
}

.person-picker-results {
    position: absolute;
    z-index: 30;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 17rem;
    margin: 4px 0 0;
    padding: 4px;
    overflow-y: auto;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.person-picker-option {
    display: block;
    width: 100%;
    min-height: var(--control);
    padding: 8px 10px;
    text-align: left;
    border: 0;
    border-radius: 6px;
    color: var(--text);
    background: transparent;
    cursor: pointer;
}

.person-picker-option:hover,
.person-picker-option:focus-visible {
    background: var(--accent-soft);
    outline: 0;
}

.person-picker-empty {
    padding: 8px 10px;
    color: var(--muted);
    font-size: 0.8125rem;
}

/* Los 44px son la talla minima para un **dedo**. Con raton sobran, y una pieza
   de 44px de alto junto a un codigo de seis caracteres se ve desproporcionada.
   El minimo AA para puntero fino es 24px, asi que 32 va sobrado.

   El razonamiento que fallo aqui la primera vez: el comentario de los minimos
   tactiles de la ficha dice «el publico es mayor», pero el publico mayor no usa
   la ficha de llamada. La usa el operador, en un ordenador. */
@media (hover: hover) and (pointer: fine) {
    .token-field .token-chip {
        min-height: 32px;
        padding-left: 10px;
    }

    .token-remove {
        min-width: 32px;
        min-height: 32px;
    }

    .token-remove svg {
        width: 14px;
        height: 14px;
    }

    .token-box {
        gap: 5px;
        padding: 4px 6px;
    }
}

.token-field .token-input {
    flex: 1 1 10rem;
    width: auto;
    min-width: 0;
    padding: 0 4px;
    border: 0;
    background: transparent;
}

.token-field .token-input:focus {
    outline: 0;
}

/* Minimos tactiles y de texto de la ficha de llamada.
   Acotado a `.call-sheet` a proposito: el tablero semanal es compartido con el
   portal del participante y la edicion de personas, que quedan fuera de
   alcance. Aqui el operador encadena 200 llamadas y el publico es mayor. */

.call-sheet select,
.call-sheet textarea,
.call-sheet input:not([type="hidden"]):not([type="checkbox"]) {
    font-size: 1rem;
    min-height: 44px;
}

/* El objetivo tactil de una casilla es su etiqueta `.call-sheet-checkbox`, que
   ya mide 44px de alto. Aqui hubo una regla que ponia los 44px en el control y,
   al tener la misma especificidad que `.call-sheet-checkbox input`, ganaba por
   ir despues y dejaba una casilla enorme. No reintroducirla. */

.call-sheet small,
.call-sheet .form-hint,
.call-sheet option,
.call-sheet legend,
.call-sheet .participant-week-slot span:not(.sr-only) {
    font-size: 0.8125rem;
}

.call-sheet .participant-week-slot-head strong {
    font-size: 1rem;
}


/*
 * Fila de alerta compacta.
 *
 * Primera linea: gravedad con su color, el nombre, y a la derecha el estado y el
 * control de lectura. El resto de la informacion debajo. Asi la cabecera dice de un
 * vistazo de quien es y como esta, y ocupa una sola linea.
 */
/*
 * Cabecera de la fila de alerta.
 *
 * Se cualifica con `.alert-operation-list` porque hay reglas de esa lista con dos
 * clases que ganan a un selector simple: sin cualificar, `display: flex` no se
 * aplicaba y la pildora y el icono se apilaban, dejando la cabecera en 70 px.
 */
.alert-operation-list .alert-row-head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    /* La fila tiene `padding: 0`, asi que el relleno lo pone cada bloque. */
    padding: 6px 16px 0;
}

.alert-operation-list .alert-row-head > * {
    margin: 0;
}

.alert-operation-list .alert-row-head .status-line {
    flex: 0 0 auto;
}

.alert-operation-list .alert-row-subject {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.alert-operation-list .alert-row-head-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex: 0 0 auto;
}

/*
 * Sin marco ni fondo: ocupa el minimo visual. Conserva 44 x 44 px de area de
 * pulsacion -RNT-14, y PM-001 lo midio en verde- pero con margen vertical negativo,
 * para que esos 44 px no inflen el alto de la fila. Minimo visual y minimo tactil no
 * son lo mismo, y aqui se cumplen los dos.
 */
.alert-operation-list .alert-read-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin: -10px 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font-size: 1.05rem;
    line-height: 1;
    border-radius: var(--radius-sm, 6px);
    color: inherit;
}

.alert-operation-list .alert-read-toggle-icon:hover,
.alert-operation-list .alert-read-toggle-icon:focus-visible {
    background: var(--surface-muted, rgba(0, 0, 0, .06));
}

/* El cuerpo ya no repite el nombre, asi que no necesita el relleno superior entero. */
.alert-operation-list .alert-row .alert-card-main.button.secondary {
    width: 100%;
    min-height: 0;
    padding: 2px 16px 12px;
    text-align: left;
}


/* Fechas adicionales del formulario: ocultas hasta que se pulsa el mas. */
.eval-session-extra-date[hidden] {
    display: none;
}

/* Declarar jornada: desplegable dentro del panel de huecos. */
.eval-session-declare > summary {
    display: inline-flex;
    cursor: pointer;
    list-style: none;
}

.eval-session-declare > summary::-webkit-details-marker {
    display: none;
}

.eval-session-declare-hint {
    margin: 12px 0 0;
    font-size: .85rem;
    color: var(--text-muted, #555);
}

.eval-session-edit > summary {
    display: inline-flex;
    margin-top: 8px;
    cursor: pointer;
    list-style: none;
}

.eval-session-edit > summary::-webkit-details-marker {
    display: none;
}

.eval-session-locked {
    display: block;
    margin-top: 6px;
    color: var(--text-muted, #666);
}


/*
 * Tablero de huecos de evaluacion. UN solo formato para todas las pantallas.
 *
 * Una fila por dia, las horas en cabecera, y dentro de cada hora una casilla por plaza
 * ofertada. Antes habia dos maneras de pintar lo mismo -una matriz en la pantalla de
 * jornadas y una lista de chips junto al formulario- y eso se paga cada vez que cambia
 * el aforo. RNT-01.
 *
 * Contraste: la version anterior era verde claro sobre verde claro y el responsable no
 * la veia. Ahora la plaza libre tiene borde y la ocupada va rellena, asi que se
 * distinguen por forma y no solo por color. RNT-16.
 */
.eval-board-scroll {
    overflow-x: auto;
    max-width: 100%;
    padding-bottom: 4px;
}

.eval-board {
    display: table;
    width: auto;
    min-width: 0;
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 2px;
}

.eval-board thead {
    display: table-header-group;
}

.eval-board tbody {
    display: table-row-group;
}

.eval-board tr {
    display: table-row;
}

.eval-board th,
.eval-board td {
    display: table-cell;
    padding: 2px;
    border-bottom: 0;
    text-align: center;
    vertical-align: middle;
}

.eval-board-corner,
.eval-board-day {
    position: sticky;
    left: 0;
    z-index: 1;
    padding: 3px 8px 3px 0;
    text-align: left;
    background: var(--surface, #fff);
    white-space: nowrap;
}

.eval-board-time {
    font-size: .68rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    color: var(--text-muted, #4b5563);
    text-transform: none;
}

.eval-board-weekday {
    text-transform: capitalize;
    font-weight: 700;
    font-size: .82rem;
}

.eval-board-date {
    margin-left: 4px;
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted, #6b7280);
}

.eval-board-cell {
    display: table-cell;
    white-space: nowrap;
}

/* Una casilla por plaza: se distinguen por forma, no solo por color. */
.eval-seat {
    display: inline-block;
    width: 11px;
    height: 18px;
    margin: 0 1px;
    border-radius: 3px;
    vertical-align: middle;
}

.eval-seat-free {
    border: 1.5px solid #15803d;
    background: #f0fdf4;
}

.eval-seat-taken {
    border: 1.5px solid #14532d;
    background: #14532d;
}

.eval-board-cell-closed {
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 3px,
        rgba(0, 0, 0, .09) 3px,
        rgba(0, 0, 0, .09) 6px
    );
    border-radius: 3px;
}

.eval-seat-closed-sample {
    border: 1px dashed var(--border, #9ca3af);
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 3px,
        rgba(0, 0, 0, .12) 3px,
        rgba(0, 0, 0, .12) 6px
    );
}

/*
 * Una sola fila mientras quepa, y al saltar de linea todo empieza en el mismo borde.
 *
 * El hueco entre grupos es holgado -18 px- y el de entre lineas corto, para que se lea
 * como una fila y no como una lista. No hay puntos separadores: al envolver, el punto se
 * quedaba al principio de la linea y desplazaba el texto de cada grupo un poco mas a la
 * derecha que el anterior.
 */
.eval-board-legend {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    column-gap: 18px;
    row-gap: 6px;
    max-width: none;
    margin: 10px 0 0;
    font-size: .82rem;
    color: var(--text-muted, #4b5563);
}

.eval-board-title {
    margin: 0 0 6px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--text-muted, #4b5563);
}

.eval-board-compact .eval-seat {
    height: 15px;
}


/*
 * Las plazas del tablero son controles.
 *
 * La ocupada es un enlace que abre a su persona; la libre, un boton que elige el hueco
 * -o un enlace a dar cita, cuando no hay formulario al lado-. Se reinician los estilos
 * heredados de boton y de enlace para que las tres formas se vean igual: lo que dice
 * que hacen es su `aria-label`, no su etiqueta HTML.
 */
.eval-seat {
    padding: 0;
    font: inherit;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.eval-seat:hover {
    outline: 2px solid var(--accent, #1d4ed8);
    outline-offset: 1px;
}

.eval-seat:focus-visible {
    outline: 2px solid var(--accent, #1d4ed8);
    outline-offset: 2px;
}

/* El hueco elegido, tambien escrito debajo: el contorno no es el unico aviso. RNT-16. */
.eval-seat.is-picked {
    outline: 2px solid var(--accent, #1d4ed8);
    outline-offset: 2px;
}

.eval-board-chosen {
    margin: 6px 0 0;
    font-size: .85rem;
    font-weight: 600;
    color: var(--accent, #1d4ed8);
}

.eval-board-chosen:empty {
    display: none;
}

/*
 * Con el dedo, 44 x 44 px por plaza -RNT-14-. Son controles de verdad, no adornos, y
 * 11 px no se aciertan con el pulgar. El tablero se ensancha mucho, pero ya vive en un
 * contenedor con scroll propio y la columna de dia se queda fija, asi que se navega:
 * lo que NO se puede hacer es ofrecer un objetivo que se falla.
 *
 * Con raton sobran, y ahi la densidad importa mas: se pueden ver treinta horas de una vez.
 *
 * Se pide ademas `hover: none`, no solo `pointer: coarse`: un portatil con pantalla
 * tactil cumple lo segundo aunque se maneje con raton, y ahi el diseno de dedo no aporta
 * nada -deja ver un tercio de las horas-. `hover: none` es lo que distingue un
 * dispositivo **sin** raton. Ver `DEC-123`.
 */
@media (hover: none) and (pointer: coarse) {
    .eval-seat {
        width: 44px;
        height: 44px;
    }

    .eval-board-compact .eval-seat {
        height: 44px;
    }
}

/*
 * El tablero, separado del borde y con las horas separadas entre si.
 *
 * El panel no tiene relleno propio: lo pone cada bloque que vive dentro, y los vecinos
 * -la cabecera y la rejilla del formulario- usan 16 px. El tablero hace lo mismo, en vez
 * de tocar `.panel` y mover de sitio media aplicacion.
 *
 * Y cada hora se cierra con una linea: sin ella, las dos plazas de las 09:15 y las dos
 * de las 09:30 se leen como cuatro casillas seguidas y no se sabe cual va con cual.
 */
.eval-board-block {
    padding: 16px;
}

/*
 * Junto a un formulario solo se quita el relleno de abajo: ya lo pone la rejilla que
 * sigue. Los 16 px laterales son los que alinean el tablero con el titulo del panel y
 * con el primer campo del formulario, medido a 1440 y a 375.
 */
.eval-board-block-compact {
    padding: 16px 16px 0;
}

.eval-board-time,
.eval-board-cell,
.eval-board-corner,
.eval-board-day {
    border-right: 1px solid var(--border, #d8dee9);
}

.eval-board-time,
.eval-board-cell {
    padding-right: 4px;
    padding-left: 4px;
}

/* La ultima hora no necesita cerrarse: no hay nada que separar de ella. */
.eval-board-time:last-child,
.eval-board-cell:last-child {
    border-right: 0;
}

/*
 * En estrecho los vecinos aprietan -la rejilla del formulario baja a 12 px- y el bloque
 * los sigue, o el tablero queda cuatro pixeles mas adentro que los campos que hay debajo.
 */
@media (max-width: 720px) {
    .eval-board-block {
        padding: 12px;
    }

    .eval-board-block-compact {
        padding: 12px 12px 0;
    }
}

/*
 * Cada muestra de la leyenda, pegada a su texto.
 *
 * La leyenda es flexible y reparte en varias lineas. Con las casillas y las palabras
 * sueltas, la de «ocupada» acababa al final de la linea anterior, separada de la palabra
 * que la nombra: se leia como si perteneciera a la anterior.
 */
.eval-board-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/*
 * Sin punto separador: el hueco entre grupos ya los separa, y al saltar de linea el punto
 * se quedaba al principio, descolocando el texto de ese grupo respecto al de arriba.
 */

/*
 * Grupos propuestos sobre el calendario: se leen como simulacion, no como realidad.
 *
 * Tres marcas a la vez -la palabra «Propuesta», la trama diagonal y el contorno
 * discontinuo- porque el error caro aqui no es no verlos: es creer que existen y
 * prometer una plaza que nadie ha creado. Un color no basta (`RNT-16`).
 */
.coordination-group-card.is-proposed {
    border: 1px dashed var(--accent, #1d4ed8);
    border-radius: var(--radius-sm, 6px);
    background-color: transparent;
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 4px,
        rgba(29, 78, 216, .07) 4px,
        rgba(29, 78, 216, .07) 8px
    );
}

.coordination-group-card.is-proposed > summary {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 4px 6px;
    cursor: pointer;
    list-style: none;
    font-size: .78rem;
}

.coordination-group-card.is-proposed > summary::-webkit-details-marker {
    display: none;
}

.coordination-proposed-badge {
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--accent, #1d4ed8);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.coordination-proposed-kind {
    color: var(--text-muted, #4b5563);
    font-size: .72rem;
}

.coordination-proposed-people {
    margin: 0;
    padding: 4px 8px 8px 8px;
    list-style: none;
    font-size: .76rem;
}

.coordination-proposed-people li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 0;
}

/* La preferencia es el dato que dice si el reparto es bueno: se lee sin abrir nada. */
.coordination-proposed-priority {
    flex: 0 0 auto;
    color: var(--accent, #1d4ed8);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* El resumen de la simulacion, separado del calendario que describe. */
.coordination-proposal-summary {
    padding: 12px 16px 0;
}

/*
 * El semaforo de una franja: se puede ofrecer o no.
 *
 * Sustituye a los contadores `P1 P2 P3`, que decian cuanta gente queria una franja pero no
 * lo unico que hay que decidir al telefono: si sirve de algo ofrecerla.
 *
 * Color Y palabra, siempre. Un color no puede ser el unico portador (`RNT-16`), y aqui
 * menos: el rojo se elige igual -avisa, no bloquea (`DEC-20`)-, asi que hay que poder leer
 * por que esta en rojo. Los tres tonos pasan de 4.5 a 1 sobre su fondo.
 */
.slot-state {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap;
}

/* Amarillo: falta UNA persona. Es la franja que hay que colocar en la llamada. */
.slot-state.is-activates {
    border-color: #a16207;
    background: #fef9c3;
    color: #713f12;
}

.slot-state.is-viable {
    border-color: #15803d;
    background: #dcfce7;
    color: #14532d;
}

.slot-state.is-no-room {
    border-color: #b91c1c;
    background: #fee2e2;
    color: #7f1d1d;
}

/* Neutro a proposito: hay hueco, pero todavia no arranca. No es un problema. */
.slot-state.is-short {
    border-color: var(--border, #cbd5e1);
    background: var(--surface-muted, #f1f5f9);
    color: var(--text-muted, #475569);
}

/*
 * La tabla de la ficha de llamada, al lado de la disponibilidad.
 *
 * Ordenada por horario, que es como se pregunta por telefono -«¿le va bien por la
 * manana?»-, y no por interes: buscar una hora concreta en una lista ordenada por otra
 * cosa es imposible mientras hablas.
 */
.slot-viability-panel {
    padding: 16px;
}

.slot-viability-scroll {
    max-height: 420px;
    overflow-y: auto;
    max-width: 100%;
}

.slot-viability-table {
    display: table;
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
    font-size: .8rem;
}

.slot-viability-table th,
.slot-viability-table td {
    display: table-cell;
    padding: 4px 8px 4px 0;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-soft, #eef2f7);
}

.slot-viability-table thead th {
    position: sticky;
    top: 0;
    background: var(--surface, #fff);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted, #64748b);
}

.slot-viability-time {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Las que activan grupo se ven antes de leer: es el dato que se busca. */
.slot-viability-table tr.is-activates-row {
    background: rgba(254, 249, 195, .45);
}

.slot-viability-summary {
    margin: 0 0 10px;
    font-size: .85rem;
    color: var(--text-muted, #475569);
}

@media (max-width: 720px) {
    .slot-viability-panel {
        padding: 12px;
    }

    .slot-viability-scroll {
        max-height: 300px;
    }
}

/*
 * Que se puede ofrecer en una franja, AL LADO de sus controles.
 *
 * Al lado y no encima, y no es cosmetico: una tarjeta con dos instalaciones era mas alta que
 * una con una sola, y eso descuadraba todas las filas de la columna. Puesto al lado, la
 * altura la marcan los controles -que son iguales en todas- y los horarios quedan alineados.
 *
 * La columna se ensancha lo que haga falta: hay espacio de sobra a la derecha.
 */
.participant-week-slot {
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    grid-template-areas:
        "head head"
        "controls offer";
    align-items: start;
}

.participant-week-slot-head {
    grid-area: head;
}

.slot-offer-detail {
    grid-area: offer;
    margin: 0;
    padding: 0 0 0 10px;
    border-top: 0;
    border-left: 1px dashed var(--border, #dbe3ea);
    list-style: none;
    font-size: .74rem;
    /*
     * Todas las tarjetas reservan el alto de la franja con MAS instalaciones. Sin esto, una
     * franja con una sola instalacion queda mas baja que su vecina con dos y la columna se
     * descuadra: 96, 106 y 133 px medidos con una, dos y tres. El numero lo pone la vista,
     * que es quien sabe cuantas instalaciones hay.
     */
    /*
     * El alto de una linea lo marca su etiqueta -19.5 de linea mas 2+2 de relleno, 27
     * px medidos-, no el texto. Esto iguala tambien ENTRE columnas, que `1fr` no
     * alcanza: cada columna es un grid propio.
     */
    min-height: calc(var(--slot-offer-lines, 1) * 27px);
}

.participant-week-slot-grid {
    grid-area: controls;
}

/* Sin detalle -otras pantallas usan el mismo calendario- los controles ocupan el ancho. */
.participant-week-slot:not(:has(.slot-offer-detail)) {
    grid-template-areas:
        "head head"
        "controls controls";
}

.slot-offer-detail li {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    white-space: nowrap;
}

.slot-offer-facility {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text-muted, #475569);
}

/*
 * El numero de interesados, coloreado por estado. Sustituye a la etiqueta.
 *
 * Gris: todavia no reune el minimo. Amarillo: falta una persona, y quien entre lo abre.
 * Verde: ya se abriria. Rojo: ya hay tanta gente como cabe, quien entre sobra.
 *
 * El color no va solo: el `title` de cada numero lo explica en palabras, y el numero en si
 * ya es informacion (`RNT-16`).
 */
.slot-offer-group {
    flex: 0 0 auto;
    min-width: 22px;
    padding: 1px 6px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    text-align: center;
}

.slot-offer-group.is-faltan {
    border-color: var(--border, #cbd5e1);
    background: var(--surface-muted, #f1f5f9);
    color: var(--text-muted, #475569);
}

.slot-offer-group.is-activa {
    border-color: #a16207;
    background: #fef9c3;
    color: #713f12;
}

.slot-offer-group.is-viable {
    border-color: #15803d;
    background: #dcfce7;
    color: #14532d;
}

.slot-offer-group.is-lleno {
    border-color: #b91c1c;
    background: #fee2e2;
    color: #7f1d1d;
}


/*
 * La cabecera de la columna, en una sola linea: ni el nombre de la combinacion ni el
 * recuento de horarios se parten. «MIERCOLES Y VIERNES» y «5 horarios» se partian los dos y
 * dejaban esa columna descuadrada respecto a las otras.
 */
.participant-weekday-column > header {
    flex-wrap: nowrap;
}

.participant-weekday-column > header h3,
.participant-weekday-column > header small {
    white-space: nowrap;
}

.slot-offer-groups {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.slot-offer-separator {
    color: var(--text-muted, #64748b);
    font-weight: 700;
}

/*
 * El nombre de la combinacion, en una sola linea.
 *
 * «MIERCOLES Y VIERNES» se partia en dos y descuadraba los horarios de esa columna respecto
 * a las demas. La columna se ensancha lo que haga falta: hay espacio de sobra.
 */
.participant-weekday-column > header h3 {
    white-space: nowrap;
}

/*
 * El impacto de esta persona en el reparto, en las mismas columnas del asignador.
 *
 * Verde lo que mejora, rojo lo que empeora, y el numero del cambio al lado: sin la cifra, el
 * color obliga a comparar las dos filas a ojo. Y el color nunca va solo (`RNT-16`).
 */
/*
 * La tabla, con su marco y su aire. Estaba pegada al borde del contenedor y sin borde
 * propio: se leia como texto suelto en vez de como un bloque de datos.
 */
.slot-impact {
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid var(--border, #dbe3ea);
    border-radius: var(--radius-sm, 8px);
    background: var(--surface-muted, #fafcfd);
}

.slot-impact-table {
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
    font-size: .8rem;
}

.slot-impact-table th,
.slot-impact-table td {
    padding: 5px 8px 5px 0;
    text-align: left;
    border-bottom: 1px solid var(--border-soft, #eef2f7);
    font-variant-numeric: tabular-nums;
}

.slot-impact-table thead th {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted, #64748b);
}

.slot-impact-table tbody th {
    font-weight: 600;
    color: var(--text, #1f2937);
}

.slot-impact-table td.is-better {
    color: #14532d;
    background: #dcfce7;
    font-weight: 700;
}

.slot-impact-table td.is-worse {
    color: #7f1d1d;
    background: #fee2e2;
    font-weight: 700;
}

.slot-impact-table td small {
    margin-left: 4px;
    font-size: .72rem;
    opacity: .85;
}

.slot-impact-verdict {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.slot-impact-verdict.is-mejora {
    border-color: #15803d;
    background: #dcfce7;
    color: #14532d;
}

.slot-impact-verdict.is-empeora {
    border-color: #b91c1c;
    background: #fee2e2;
    color: #7f1d1d;
}

.slot-impact-verdict.is-igual {
    border-color: var(--border, #cbd5e1);
    background: var(--surface-muted, #f1f5f9);
    color: var(--text-muted, #475569);
}

/* «No entra» es el aviso mas importante de la tabla: se lee antes que los numeros. */
.slot-impact-verdict.is-no_entra {
    border-color: #a16207;
    background: #fef9c3;
    color: #713f12;
}

.slot-impact-note {
    margin: 8px 0 0;
    font-size: .82rem;
    color: var(--text-muted, #475569);
}

/*
 * En estrecho, los controles encima del detalle en vez de al lado.
 *
 * Lado a lado necesita unos 310 px por columna; por debajo de eso el selector se queda sin
 * sitio y el nombre de la instalacion se parte. Apilado se lee, y la altura sigue siendo la
 * misma en todas las tarjetas de la columna.
 */
@media (max-width: 900px) {
    .participant-weekly-availability.has-slot-offers {
        grid-template-columns: minmax(0, 1fr);
        overflow-x: visible;
    }

    .participant-weekly-availability.has-slot-offers .participant-week-slot {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "head"
            "controls"
            "offer";
    }

    .slot-offer-detail {
        padding: 6px 0 0;
        border-left: 0;
        border-top: 1px dashed var(--border, #dbe3ea);
        min-height: 0;
    }
}

/*
 * Cierre de la intervencion (`T-049` bloque A).
 *
 * Todo lo demas reutiliza piezas que ya existen -`x-panel`, `details.inline-disclosure` y
 * `.rule-option`, que ya da los 54 px de objetivo tactil-, asi que aqui solo va lo que no
 * tenia clase: el rastro de quien cerro y las dos listas de la confirmacion. Sin anchos
 * fijos: el panel ya se adapta a 390 px.
 */
.intervention-closure-body {
    display: grid;
    gap: 10px;
    padding-top: 8px;
}

.intervention-closure-body form {
    display: grid;
    gap: 10px;
    justify-items: start;
}

.intervention-closure-list {
    display: grid;
    gap: 4px;
    margin: 0;
    padding-left: 18px;
}

.intervention-closure-trace {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin: 0;
}

.intervention-closure-trace div {
    display: grid;
    gap: 2px;
}

.intervention-closure-trace dt {
    color: var(--text-muted, #64748b);
    font-size: 0.85rem;
}

.intervention-closure-trace dd {
    margin: 0;
    font-weight: 700;
}

.intervention-closure-history {
    display: grid;
    gap: 8px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border, #d9e2e7);
}

.intervention-closure-history h3,
.intervention-closure-history ol {
    margin: 0;
}

.intervention-closure-history ol {
    display: grid;
    gap: 8px;
    padding: 0;
    list-style: none;
}

.intervention-closure-history li {
    display: grid;
    grid-template-columns: minmax(90px, auto) minmax(130px, auto) 1fr;
    gap: 6px 16px;
    align-items: baseline;
}

@media (max-width: 640px) {
    .intervention-closure-history li {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}

/*
 * Modal de persona compartido y ficha de llamada como accion de pantalla (`T-050`).
 *
 * Casi todo reutiliza piezas ya verificadas -`modal-section`, `stack-list`,
 * `details.inline-disclosure`, `table-link`-, asi que aqui solo va lo que no tenia clase.
 * Sin anchos fijos: el modal ya se adapta a 390 px.
 */
.call-attempt-scope,
.call-attempt-follow-up {
    color: var(--text-muted, #64748b);
    font-size: 0.9rem;
}

.call-attempt-follow-up {
    font-weight: 700;
}

.capture-interest-record {
    display: grid;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid var(--border, #e2e8f0);
}

.capture-interest-record:first-child {
    border-top: 0;
}

.capture-interest-head {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    align-items: flex-start;
    justify-content: space-between;
}

.capture-interest-head > div:first-child {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.capture-interest-head span {
    color: var(--text-muted, #64748b);
    font-size: 0.9rem;
}

.capture-interest-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Las acciones se envuelven en vez de desbordar: en movil caen a una columna. */
.capture-interest-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
}

.capture-interest-actions > details {
    flex: 1 1 100%;
}

.capture-call-sheet-options {
    display: grid;
    gap: 8px;
    padding-top: 8px;
}

.capture-call-sheet-options a {
    display: grid;
    gap: 2px;
    min-height: 44px;
    align-content: center;
}