:root,
.theme-blue {
    --elemental-primary: #0c412f;
    --elemental-tierra: #233d31;
    --elemental-agua: #49686b;
    --elemental-fuego: #b65c2c;
    --elemental-aire: #b28750;
    --elemental-arena: #ded2c0;
    --elemental-crema: #eee9df;

    --primary: var(--elemental-primary);
    --primary-rgb: 12, 65, 47;
    --primary-darker: #082f22;
    --primary-light: rgba(12, 65, 47, .14);
    --primary-dk: #082f22;
    --primary-darker-rgb: 8, 47, 34;

    --secondary: var(--elemental-agua);
    --secondary-rgb: 73, 104, 107;
    --secondary-darker: #385255;
    --secondary-light: rgba(73, 104, 107, .14);

    --bs-primary: var(--elemental-primary);
    --bs-primary-rgb: 12, 65, 47;
    --bs-secondary: var(--elemental-agua);
    --bs-secondary-rgb: 73, 104, 107;
    --bs-primary-border-subtle: var(--elemental-arena);
    --bs-secondary-border-subtle: #aebbbc;
}

/* Módulo de talleres · identidad Elemental */
.elemental-page-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem; margin-bottom:1.75rem; }
.elemental-page-heading h1 { margin:.2rem 0; color:#0c412f; font-family:Georgia,serif; font-size:clamp(2rem,4vw,3rem); }
.elemental-page-heading p { margin:0; color:#66746f; }
.elemental-eyebrow { color:#b56831; font-size:.72rem; font-weight:700; letter-spacing:.17em; text-transform:uppercase; }
.elemental-panel { padding:1.35rem; background:#fffdf8; border:1px solid rgba(12,65,47,.1); border-radius:1.25rem; box-shadow:0 15px 38px rgba(12,65,47,.06); }
.elemental-form .form-label { color:#334b43; font-weight:600; }
.elemental-progress,.elemental-dashboard-progress { background:#e7ded0; }
.elemental-progress { height:6px; }
.elemental-progress .progress-bar,.elemental-dashboard-progress .progress-bar { background:#0c412f; }
.elemental-status { padding:.5rem .65rem; }
.elemental-status.is-programmed { color:#0c412f; background:#dce8e1; }
.elemental-status.is-running { color:#174f5a; background:#dcecef; }
.elemental-status.is-finished { color:#745d45; background:#ece3d7; }
.elemental-kpi { color:#f8f1e5; background:linear-gradient(135deg,#0c412f,#1d5a45); border-radius:1.35rem; box-shadow:0 18px 38px rgba(12,65,47,.2); }
.workshop-progress-card { height:100%; padding:1.2rem; border:1px solid rgba(12,65,47,.12); border-radius:1rem; background:#fff; }
.workshops-dashboard-section { padding:.15rem 0; }
.workshop-dashboard-icon { display:grid; width:2.85rem; height:2.85rem; flex:0 0 2.85rem; place-items:center; border-radius:50%; background:color-mix(in srgb,var(--element-color) 10%,white); }
.workshop-dashboard-icon img { width:1.5rem; height:1.5rem; object-fit:contain; }
.workshop-students-kpi { color:#fff8ee; background:linear-gradient(135deg,#986d42,#b28750); border-radius:1.35rem; box-shadow:0 18px 38px rgba(152,109,66,.2); }
.elemental-dashboard-progress { height:10px; border-radius:999px; }
.elemental-empty { text-align:center; color:#6c7b75; }
.elemental-empty i { display:block; color:#b68b57; font-size:4rem; margin-bottom:1rem; }
.elemental-qr { width:min(280px,75vw); border:1px solid rgba(12,65,47,.12); border-radius:1rem; }

@media (max-width:767.98px) { .elemental-page-heading { align-items:stretch; flex-direction:column; } .elemental-page-heading>.btn { width:100%; } .elemental-panel { padding:.85rem; } }

.btn-primary {
    --bs-btn-bg: #0c412f;
    --bs-btn-border-color: #0c412f;
    --bs-btn-hover-bg: #233d31;
    --bs-btn-hover-border-color: #233d31;
    --bs-btn-active-bg: #082f22;
    --bs-btn-active-border-color: #082f22;
}

.btn-secondary {
    --bs-btn-bg: #49686b;
    --bs-btn-border-color: #49686b;
    --bs-btn-hover-bg: #385255;
    --bs-btn-hover-border-color: #385255;
    --bs-btn-active-bg: #2f4648;
    --bs-btn-active-border-color: #2f4648;
}
h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    display: block;
    margin-top: .35rem;
    color: #a52828;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.35;
}

.validation-summary-errors {
    margin-bottom: 1rem;
    padding: .8rem 1rem;
    border: 1px solid rgba(165, 40, 40, .2);
    border-radius: .7rem;
    color: #842029;
    background: #f8d7da;
    font-size: .82rem;
}

.validation-summary-errors ul {
    margin: 0;
    padding-left: 1.2rem;
}

.access-pill {
    display: inline-flex;
    align-items: center;
    padding: .34rem .65rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.access-pill.is-enabled {
    border-color: rgba(12, 65, 47, .16);
    color: #0c412f;
    background: #dce8e1;
}

.access-pill.is-disabled {
    border-color: rgba(108, 117, 125, .18);
    color: #59626a;
    background: #e9ecef;
}

.user-pos-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
}

.user-pos-option {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: .65rem;
    padding: .75rem;
    border: 1px solid rgba(12, 65, 47, .14);
    border-radius: .7rem;
    background: #fff;
    cursor: pointer;
}

.user-pos-option:has(input:checked) {
    border-color: #0c412f;
    background: rgba(12, 65, 47, .055);
}

.user-pos-option input {
    margin-top: .18rem;
    accent-color: #0c412f;
}

.user-pos-option span,
.user-pos-option strong,
.user-pos-option small {
    display: block;
    min-width: 0;
}

.user-pos-option strong {
    color: #334b43;
    font-size: .82rem;
}

.user-pos-option small {
    margin-top: .15rem;
    overflow: hidden;
    color: #6c757d;
    font-size: .72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .user-pos-grid { grid-template-columns: 1fr; }
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* Identidad visual compartida para estados de carga. */
.elemental-loading {
    min-height: 9rem;
    text-align: center;
}

.elemental-loading-icon {
    display: block;
    position: relative;
    width: clamp(4.75rem, 12vw, 7.5rem);
    aspect-ratio: 623.96 / 850.57;
    overflow: hidden;
}

.elemental-loading-source {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: .14;
    filter: saturate(.65) contrast(.85);
}

.elemental-loading-text {
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .015em;
}

.elemental-loading-reveal::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #2f765d 0%, #0c412f 58%, #082f23 100%);
    -webkit-mask: url("img/logo/masa-elemental-icono-verde.svg") center / contain no-repeat;
    mask: url("img/logo/masa-elemental-icono-verde.svg") center / contain no-repeat;
    animation: elemental-loading-vertical 2.45s cubic-bezier(.22, .75, .24, 1) infinite;
    will-change: clip-path, opacity, filter;
}

@keyframes elemental-loading-vertical {
    0% {
        clip-path: inset(100% 0 0 0);
        opacity: .25;
        filter: contrast(.82);
    }
    46%, 72% {
        clip-path: inset(0 0 0 0);
        opacity: 1;
        filter: contrast(1.18) drop-shadow(0 .28rem .42rem rgba(12, 65, 47, .17));
    }
    100% {
        clip-path: inset(0 0 0 0);
        opacity: .22;
        filter: contrast(.9);
    }
}

@media (prefers-reduced-motion: reduce) {
    .elemental-loading-reveal::after {
        animation: none;
        opacity: 1;
        filter: none;
        clip-path: inset(0);
    }
}

/* Clasificaciones elementales compartidas entre formularios y listados. */
.element-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.element-choice-wrap {
    position: relative;
    min-width: 0;
}

.element-choice-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.element-choice {
    position: relative;
    display: flex;
    min-height: 9.5rem;
    height: 100%;
    padding: 1.15rem 1rem;
    border: 1px solid rgba(33, 37, 41, .16);
    border-radius: .8rem;
    background: #fff;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    text-align: center;
    transition: border-color .22s ease, background-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

.element-choice:hover {
    border-color: color-mix(in srgb, var(--element-color) 58%, white);
    background: color-mix(in srgb, var(--element-color) 3.5%, white);
    transform: translateY(-1px);
}

.element-choice-input:checked + .element-choice {
    border-color: var(--element-color);
    background: color-mix(in srgb, var(--element-color) 7%, white);
    box-shadow: 0 0 0 1px var(--element-color), 0 .55rem 1.1rem color-mix(in srgb, var(--element-color) 12%, transparent);
}

.element-choice-input:focus-visible + .element-choice {
    outline: .2rem solid color-mix(in srgb, var(--element-color) 28%, transparent);
    outline-offset: .15rem;
}

.element-choice-check {
    position: absolute;
    top: .75rem;
    right: .75rem;
    width: .95rem;
    height: .95rem;
    border: 2px solid color-mix(in srgb, var(--element-color) 48%, white);
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 0 0 .18rem #fff;
}

.element-choice-input:checked + .element-choice .element-choice-check {
    border-color: var(--element-color);
    background: var(--element-color);
}

.element-choice-icon {
    width: 2.55rem;
    height: 2.55rem;
    margin-bottom: .15rem;
    object-fit: contain;
}

.element-choice strong {
    color: var(--element-color);
    font-size: .98rem;
}

.element-choice small {
    max-width: 15rem;
    color: var(--bs-secondary-color, #6c757d);
    font-size: .72rem;
    line-height: 1.35;
}

.element-pill {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    max-width: 100%;
    padding: .32rem .65rem;
    border: 1px solid color-mix(in srgb, var(--element-color) 22%, transparent);
    border-radius: 999px;
    color: var(--element-color);
    background: color-mix(in srgb, var(--element-color) 10%, white);
    font-size: .76rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.element-pill img {
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
    object-fit: contain;
}

@media (min-width: 1200px) {
    .element-choice-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .element-choice-grid {
        grid-template-columns: 1fr;
    }

    .element-choice {
        min-height: 8.25rem;
    }
}


/* Acciones compactas de las listas */
.list-action-group {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.list-action-btn {
    --list-action-primary-rgb: var(--bs-primary-rgb, 12, 65, 47);
    position: relative;
    display: inline-grid;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 2.25rem;
    place-items: center;
    padding: 0;
    overflow: hidden;
    color: var(--bs-primary);
    background-color: transparent;
    background-position: center;
    border: 0;
    border-radius: 50%;
    box-shadow: none;
    cursor: pointer;
    transition: background .5s, box-shadow .18s ease, color .18s ease, transform .12s ease;
}

.list-action-btn i {
    position: relative;
    z-index: 1;
    color: inherit;
    font-size: 1.15rem;
    line-height: 1;
}

.list-action-btn:hover:not(:disabled) {
    color: var(--bs-primary);
    background-color: rgba(var(--list-action-primary-rgb), .045);
    background-image: radial-gradient(circle, transparent 1%, rgba(var(--list-action-primary-rgb), .045) 1%);
    background-position: center;
    background-size: 15000%;
    box-shadow: 0 .2rem .65rem rgba(73, 80, 87, .22);
}

.list-action-btn:active:not(:disabled) {
    color: var(--bs-primary);
    background-color: rgba(var(--list-action-primary-rgb), .18);
    background-size: 100%;
    box-shadow: 0 .1rem .35rem rgba(73, 80, 87, .16);
    transform: scale(.94);
    transition: background 0s, box-shadow .08s ease, transform .08s ease;
}

.list-action-btn:focus-visible {
    outline: 2px solid rgba(var(--list-action-primary-rgb), .38);
    outline-offset: 2px;
}

.list-action-btn:disabled {
    color: rgba(var(--list-action-primary-rgb), .35);
    background: transparent;
    box-shadow: none;
    cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
    .list-action-btn {
        transition: none;
    }
}