:root {
    --chc-bg: #eef3f2;
    --chc-surface: #ffffff;
    --chc-surface-muted: #edf5f3;
    --chc-surface-strong: #d8e7e4;
    --chc-text: #0f1c20;
    --chc-muted: #4c5c63;
    --chc-border: #d3e0dd;
    --chc-border-strong: #bcd0cc;
    --chc-teal: #008f8c;
    --chc-teal-dark: #006f6f;
    --chc-green: #04712b;
    --chc-green-soft: #b8f2c5;
    --chc-amber: #d99a00;
    --chc-red: #c2382b;

    /* Alias de marca para utilidades que lo referencian (p. ej. foco del topbar). */
    --chc-primary: #006f6f;

    /* Riel lateral del admin: superficie diferenciada del área de contenido para
       dar profundidad sin recargar (patrón de paneles del registro product). */
    --chc-sidebar: #f7fbfa;
    --chc-ring: rgba(0, 143, 140, 0.32);

    /* Escala de sombras unificada. Antes había sombras inline dispersas y un
       token --chc-shadow sin definir (los paneles de dropdown quedaban sin sombra). */
    --chc-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --chc-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 8px 22px rgba(8, 47, 47, 0.07);
    --chc-shadow-lg: 0 24px 60px rgba(8, 47, 47, 0.14);
}

/* Marca CHC sobre el tema Radzen Material: re-skin SOLO por variables --rz-*,
   sin tocar el layout interno de los controles compuestos (DropDown/DatePicker). */
:root {
    --rz-text-font-family: "Plus Jakarta Sans", "Segoe UI", Roboto, Arial, sans-serif;
    --rz-text-color: #111827;

    --rz-primary: #006f6f;
    --rz-primary-light: #008f8c;
    --rz-primary-lighter: rgba(0, 143, 140, 0.12);
    --rz-primary-dark: #005a5a;
    --rz-primary-darker: #004a4a;

    --rz-success: #04712b;
    --rz-warning: #d99a00;
    --rz-danger: #c2382b;

    --rz-border-radius: 0.85rem;

    --rz-input-height: 2.85rem;
    --rz-input-font-size: 0.95rem;
    --rz-input-background-color: #edf5f3;
    --rz-input-value-color: #111827;
    --rz-input-border: 1px solid rgba(207, 221, 218, 0.9);
    --rz-input-border-block-end: 1px solid rgba(207, 221, 218, 0.9);
    --rz-input-border-radius: var(--rz-border-radius);

    --rz-input-hover-border: 1px solid rgba(0, 143, 140, 0.5);
    --rz-input-hover-border-block-end: 1px solid rgba(0, 143, 140, 0.5);

    --rz-input-focus-background-color: #ffffff;
    --rz-input-focus-border: 1px solid #006f6f;
    --rz-input-focus-border-block-end: 1px solid #006f6f;
    --rz-input-focus-outline: none;
    --rz-input-focus-shadow: 0 0 0 3px rgba(0, 143, 140, 0.14);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
    background: var(--chc-bg);
    color: var(--chc-text);
    font-family: "Plus Jakarta Sans", "Segoe UI", Roboto, Arial, sans-serif;
    letter-spacing: 0;
}

body {
    margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin-top: 0;
    letter-spacing: 0;
}

/* El tema Radzen Material colorea los encabezados base; restauramos la herencia
   para que los títulos tomen el color de su contenedor (blanco en el hero,
   oscuro sobre fondos claros) como define el diseño con utilidades de Tailwind. */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: inherit;
}

h1:focus {
    outline: none;
}

/* Nota: no redefinir `color` aquí. Tailwind v4 mantiene sus utilidades en
   @layer utilities; una regla `a { color: ... }` SIN capa las venceria y haria
   que `text-white`/`text-chc-primary` no apliquen en enlaces (botones del
   navbar quedaban con texto oscuro ilegible). El color por defecto de los
   enlaces ya lo cubre el preflight de Tailwind (`a { color: inherit }`). */
a {
    text-decoration: none;
}

a:hover,
a:focus {
    text-decoration: none;
}

.hero-cta-primary {
    color: var(--chc-teal-dark) !important;
}

.hero-cta-primary:hover,
.hero-cta-primary:focus-visible {
    color: var(--chc-teal-dark) !important;
}

.material-symbols-outlined {
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.status-badge {
    display: inline-flex;
    min-height: 2rem;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(188, 201, 202, 0.8);
    border-radius: 999px;
    background: #ffffff;
    color: var(--chc-muted);
    font-size: 0.75rem;
    font-weight: 800;
    padding: 0.3rem 0.72rem;
    white-space: nowrap;
}

.status-badge.info {
    border-color: rgba(0, 143, 140, 0.20);
    background: rgba(0, 143, 140, 0.12);
    color: var(--chc-teal-dark);
}

.status-badge.muted {
    border-color: rgba(86, 99, 107, 0.18);
    background: rgba(86, 99, 107, 0.08);
    color: var(--chc-muted);
}

.status-badge.online {
    border-color: rgba(4, 113, 43, 0.18);
    background: rgba(4, 113, 43, 0.10);
    color: var(--chc-green);
}

.status-badge.warning,
.status-badge.waiting {
    border-color: rgba(217, 154, 0, 0.28);
    background: rgba(217, 154, 0, 0.14);
    color: #6b4b00;
}

.status-badge.danger {
    border-color: rgba(194, 56, 43, 0.18);
    background: rgba(194, 56, 43, 0.10);
    color: var(--chc-red);
}

.form-alert {
    border: 1px solid rgba(194, 56, 43, 0.22);
    border-radius: 1rem;
    background: #fff4f2;
    color: var(--chc-red);
    font-size: 0.9rem;
    font-weight: 700;
    padding: 0.85rem 1rem;
}

.form-error-summary {
    border: 1px solid var(--chc-border);
    border-radius: 0.9rem;
    background: #f8fbfa;
    color: var(--chc-text);
    overflow: hidden;
}

.form-error-summary__header {
    align-items: center;
    display: flex;
    gap: 0.9rem;
    padding: 1rem;
}

.form-error-summary__icon {
    align-items: center;
    background: rgba(194, 56, 43, 0.10);
    border-radius: 50%;
    color: var(--chc-red);
    display: inline-flex;
    flex: 0 0 2.75rem;
    height: 2.75rem;
    justify-content: center;
}

.form-error-summary__icon .rz-icon {
    font-size: 1.45rem;
}

.form-error-summary__intro {
    min-width: 0;
}

.form-error-summary__title {
    display: block;
    font-family: "Hanken Grotesk", "Plus Jakarta Sans", "Segoe UI", sans-serif;
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.3;
}

.form-error-summary__intro p {
    color: var(--chc-muted);
    font-size: 0.84rem;
    font-weight: 650;
    line-height: 1.5;
    margin: 0.2rem 0 0;
}

.form-error-summary__count {
    align-items: center;
    background: var(--chc-red);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.82rem;
    font-weight: 800;
    justify-content: center;
    margin-inline-start: auto;
    min-height: 1.9rem;
    min-width: 1.9rem;
    padding: 0.2rem 0.55rem;
}

.form-error-summary__groups {
    border-top: 1px solid var(--chc-border);
}

.form-error-group + .form-error-group {
    border-top: 1px solid var(--chc-border);
}

.form-error-group__header {
    align-items: center;
    background: var(--chc-surface-soft);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 0.7rem 1rem;
}

.form-error-group__header div {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.65rem;
}

.form-error-group__header div > span {
    color: var(--chc-primary);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.form-error-group__header strong {
    font-size: 0.88rem;
    font-weight: 800;
}

.form-error-group__header > span {
    color: var(--chc-muted);
    flex: 0 0 auto;
    font-size: 0.75rem;
    font-weight: 750;
}

.form-error-group__list li + li {
    border-top: 1px solid rgba(207, 221, 218, 0.72);
}

.form-error-item {
    align-items: center;
    background: transparent;
    color: var(--chc-text);
    display: flex;
    gap: 0.75rem;
    min-height: 3.75rem;
    padding: 0.72rem 1rem;
    text-align: left;
    transition: background-color 160ms ease, color 160ms ease;
    width: 100%;
}

.form-error-item:hover {
    background: #fff;
}

.form-error-item:focus-visible {
    background: #fff;
    outline: 3px solid rgba(0, 111, 111, 0.28);
    outline-offset: -3px;
}

.form-error-item__marker {
    align-items: center;
    background: rgba(194, 56, 43, 0.09);
    border-radius: 50%;
    color: var(--chc-red);
    display: inline-flex;
    flex: 0 0 1.65rem;
    height: 1.65rem;
    justify-content: center;
}

.form-error-item__marker .rz-icon {
    font-size: 1rem;
}

.form-error-item__copy {
    display: grid;
    flex: 1 1 auto;
    gap: 0.15rem;
    min-width: 0;
}

.form-error-item__copy strong {
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1.35;
}

.form-error-item__copy span {
    color: var(--chc-muted);
    font-size: 0.79rem;
    font-weight: 650;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.form-error-item__arrow {
    color: var(--chc-primary);
    flex: 0 0 auto;
    font-size: 1.15rem;
}

@media (max-width: 639px) {
    .form-error-summary__header {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .form-error-summary__intro {
        flex: 1 1 calc(100% - 4rem);
    }

    .form-error-summary__count {
        margin-inline-start: 3.65rem;
    }

    .form-error-group__header {
        align-items: flex-start;
    }

    .form-error-group__header div {
        display: grid;
        gap: 0.1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .form-error-item {
        transition: none;
    }
}

.chc-field-error {
    align-items: flex-start;
    color: var(--chc-red);
    display: flex;
    font-size: 0.82rem;
    font-weight: 750;
    gap: 0.35rem;
    line-height: 1.45;
}

.chc-field-error .rz-icon {
    flex: 0 0 auto;
    font-size: 1rem;
    margin-top: 0.08rem;
}

.chc-field-error-state .rz-textbox,
.chc-field-error-state .rz-datepicker,
.chc-field-error-state .rz-dropdown,
.chc-field-error-state .rz-textarea {
    border-color: var(--chc-red) !important;
    outline: 2px solid rgba(194, 56, 43, 0.14);
    outline-offset: 1px;
}

.admin-shell {
    --admin-sidebar-width: 260px;
    min-height: 100vh;
    background: var(--chc-bg);
    color: var(--chc-text);
}

/* Riel lateral: superficie propia, levemente distinta del contenido, para dar
   profundidad al panel sin recargarlo. */
.admin-sidebar {
    background: var(--chc-sidebar);
}

/* En escritorio la barra lateral es una columna flex de alto completo, para que el
   bloque de cuenta/cerrar sesión (margin-top:auto) quede anclado al fondo y el menú
   ocupe el espacio intermedio. En móvil se mantiene como bloque apilado. */
@media (min-width: 1024px) {
    .admin-shell {
        display: grid;
        grid-template-columns: var(--admin-sidebar-width) minmax(0, 1fr);
        transition: grid-template-columns 180ms ease;
    }

    .admin-shell--collapsed {
        --admin-sidebar-width: 84px;
    }

    .admin-sidebar {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }
}

.admin-shell main {
    min-width: 0;
}

.admin-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    border-bottom: 1px solid var(--chc-border);
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 1px 0 rgba(8, 47, 47, 0.04), 0 8px 24px -18px rgba(8, 47, 47, 0.5);
    backdrop-filter: blur(20px) saturate(140%);
}

.admin-topbar-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 64px;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1rem;
}

.admin-topbar-context {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.8rem;
}

.admin-sidebar-toggle,
.admin-mobile-search-button {
    display: inline-flex;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--chc-border);
    border-radius: 0.8rem;
    background: #ffffff;
    color: var(--chc-muted);
    cursor: pointer;
    transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.admin-sidebar-toggle {
    display: none;
}

.admin-sidebar-toggle:hover,
.admin-mobile-search-button:hover {
    border-color: var(--chc-teal);
    color: var(--chc-teal-dark);
    transform: translateY(-1px);
}

.admin-topbar-search {
    display: none;
    min-width: 0;
    width: 100%;
    justify-self: center;
}

.admin-topbar-search-form {
    display: flex;
    min-height: 2.75rem;
    width: 100%;
    align-items: center;
    gap: 0.55rem;
    border: 1px solid var(--chc-border);
    border-radius: 0.85rem;
    background: #ffffff;
    box-shadow: var(--chc-shadow-sm);
    color: var(--chc-text);
    padding: 0 0.85rem;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.admin-topbar-search-input {
    min-width: 0;
    flex: 1 1 auto;
    border: 0;
    background: transparent;
    color: var(--chc-text);
    font-size: 0.92rem;
    font-weight: 800;
    outline: none;
    padding: 0.55rem 0;
}

.admin-topbar-search-input::placeholder {
    color: var(--chc-muted);
    font-weight: 800;
}

.admin-topbar-user {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
    justify-self: end;
}

.admin-current-user {
    display: flex;
    min-width: 0;
    max-width: 18rem;
    align-items: center;
    gap: 0.7rem;
    border: 1px solid rgba(0, 111, 111, 0.14);
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--chc-shadow-sm);
    padding: 0.45rem 0.7rem 0.45rem 0.5rem;
}

.admin-current-avatar {
    display: inline-flex;
    width: 2.3rem;
    height: 2.3rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--chc-teal-dark);
    color: #ffffff;
    font-size: 0.76rem;
    font-weight: 900;
}

.admin-current-user-text {
    min-width: 0;
}

.admin-current-user-text strong,
.admin-current-user-text small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-current-user-text strong {
    color: var(--chc-text);
    font-size: 0.82rem;
    font-weight: 900;
    line-height: 1.25;
}

.admin-current-user-text small {
    color: var(--chc-muted);
    font-size: 0.72rem;
    font-weight: 750;
    line-height: 1.25;
}

.admin-content {
    width: min(100%, 1480px);
    margin: 0 auto;
    padding: 1.35rem 1rem 5rem;
}

.admin-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 0.2rem 0 0.35rem;
}

.admin-page-header h1 {
    margin-bottom: 0;
    font-family: "Hanken Grotesk", "Segoe UI", sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 900;
    line-height: 1.02;
}

.admin-page-header p,
.admin-data-header p {
    max-width: 62rem;
    margin: 0.65rem 0 0;
    color: var(--chc-muted);
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.7;
}

.admin-eyebrow {
    display: block;
    margin-bottom: 0.45rem;
    color: var(--chc-teal-dark);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.admin-page-meta,
.admin-page-actions,
.admin-data-actions,
.admin-empty-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
}

.admin-page-meta {
    margin-top: 0.85rem;
    color: var(--chc-muted);
    font-size: 0.84rem;
    font-weight: 800;
}

.admin-data-surface {
    border: 1px solid var(--chc-border);
    border-radius: 1rem;
    background: var(--chc-surface);
    box-shadow: var(--chc-shadow);
    overflow: hidden;
}

.admin-data-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--chc-border);
    padding: 1.15rem 1.2rem;
}

.admin-data-header h2 {
    margin: 0;
    font-family: "Hanken Grotesk", "Segoe UI", sans-serif;
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1.1;
}

.admin-toolbar {
    display: grid;
    gap: 0.85rem;
    padding: 1rem 1.2rem;
    border-bottom: 1px solid var(--chc-border);
    background: #fbfcfd;
}

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

.admin-metric-card {
    display: grid;
    min-height: 138px;
    gap: 0.35rem;
    border: 1px solid var(--chc-border);
    border-radius: 1rem;
    background: var(--chc-surface);
    box-shadow: var(--chc-shadow);
    padding: 1.1rem;
}

.admin-metric-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.admin-metric-icon {
    display: inline-flex;
    width: 2.7rem;
    height: 2.7rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    background: rgba(0, 143, 140, 0.12);
    color: var(--chc-teal-dark);
}

.admin-metric-icon.tone-green {
    background: rgba(4, 113, 43, 0.10);
    color: var(--chc-green);
}

.admin-metric-icon.tone-amber {
    background: rgba(217, 154, 0, 0.13);
    color: #6b4b00;
}

.admin-metric-icon.tone-red {
    background: rgba(194, 56, 43, 0.10);
    color: var(--chc-red);
}

.admin-metric-icon.tone-gray {
    background: rgba(86, 99, 107, 0.10);
    color: var(--chc-muted);
}

.admin-metric-label {
    color: var(--chc-muted);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.admin-metric-card strong {
    font-family: "Hanken Grotesk", "Segoe UI", sans-serif;
    font-size: 2.05rem;
    font-weight: 900;
    line-height: 1;
}

.admin-metric-card small,
.admin-metric-delta {
    color: var(--chc-muted);
    font-size: 0.8rem;
    font-weight: 800;
}

.admin-metric-skeleton {
    display: block;
    border-radius: 0.5rem;
    background: linear-gradient(90deg, var(--chc-surface-strong) 25%, var(--chc-surface-muted) 37%, var(--chc-surface-strong) 63%);
    background-size: 400% 100%;
    animation: admin-skeleton-shimmer 1.4s ease infinite;
}

.admin-metric-skeleton-value {
    width: 58%;
    height: 2.05rem;
    margin-top: 0.35rem;
}

.admin-metric-skeleton-help {
    width: 76%;
    height: 0.8rem;
    margin-top: 0.55rem;
}

@keyframes admin-skeleton-shimmer {
    0% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

.admin-progress {
    height: 0.28rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--chc-surface-strong);
}

.admin-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--chc-teal-dark);
}

.tone-green .admin-progress span,
.admin-metric-card.tone-green .admin-progress span {
    background: var(--chc-green);
}

.tone-amber .admin-progress span,
.admin-metric-card.tone-amber .admin-progress span {
    background: var(--chc-amber);
}

.tone-red .admin-progress span,
.admin-metric-card.tone-red .admin-progress span {
    background: var(--chc-red);
}

.admin-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    border: 1px solid rgba(194, 56, 43, 0.22);
    border-radius: 0.85rem;
    background: #fff4f2;
    color: var(--chc-red);
    font-size: 0.9rem;
    font-weight: 800;
    padding: 0.9rem 1rem;
}

.admin-alert.tone-success {
    border-color: rgba(4, 113, 43, 0.20);
    background: rgba(4, 113, 43, 0.08);
    color: var(--chc-green);
}

.admin-alert.tone-info {
    border-color: rgba(0, 143, 140, 0.22);
    background: rgba(0, 143, 140, 0.08);
    color: var(--chc-teal-dark);
}

.admin-alert.tone-warning {
    border-color: rgba(217, 154, 0, 0.25);
    background: rgba(217, 154, 0, 0.10);
    color: #6b4b00;
}

.admin-empty-state {
    display: grid;
    min-height: 18rem;
    place-items: center;
    gap: 0.7rem;
    padding: 2rem;
    text-align: center;
}

.admin-empty-state > span {
    display: inline-flex;
    width: 3.75rem;
    height: 3.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(0, 143, 140, 0.12);
    color: var(--chc-teal-dark);
    font-size: 1.65rem;
}

.admin-empty-state h2 {
    margin: 0;
    font-family: "Hanken Grotesk", "Segoe UI", sans-serif;
    font-size: 1.45rem;
    font-weight: 900;
}

.admin-empty-state p {
    max-width: 36rem;
    margin: 0;
    color: var(--chc-muted);
    font-weight: 700;
    line-height: 1.6;
}

.admin-sticky-actionbar {
    position: sticky;
    bottom: 0.75rem;
    z-index: 20;
    display: grid;
    gap: 0.75rem;
    border: 1px solid var(--chc-border);
    border-radius: 0.8rem;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.14);
    padding: 0.7rem;
    backdrop-filter: blur(14px);
}

.admin-dossier-layout {
    display: grid;
    gap: 1.5rem;
}

.admin-dossier-layout > aside,
.admin-dossier-layout > div {
    min-width: 0;
}

.admin-dossier-layout > aside {
    width: 100%;
}

.admin-dossier-layout > aside > section {
    max-width: 100%;
    overflow: hidden;
}

.admin-dossier-aside {
    display: grid;
    gap: 1rem;
}

.admin-dossier-sidecard {
    border: 1px solid var(--chc-border);
    border-radius: 0.9rem;
    background: var(--chc-surface);
    box-shadow: var(--chc-shadow);
    padding: 1rem;
}

.admin-sidecard-heading,
.admin-sidecard-access {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.admin-sidecard-heading .status-badge {
    flex-shrink: 0;
}

.admin-sidecard-list {
    display: grid;
    gap: 0;
    margin: 0.8rem 0 0;
    font-size: 0.88rem;
}

.admin-sidecard-list > div {
    min-width: 0;
    border-top: 1px solid var(--chc-border);
    padding: 0.75rem 0;
}

.admin-sidecard-list > div:last-child {
    padding-bottom: 0;
}

.admin-sidecard-list dt {
    color: var(--chc-teal-dark);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.admin-sidecard-list dd {
    margin: 0.15rem 0 0;
    color: var(--chc-text);
    font-weight: 800;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.admin-sidecard-list small {
    display: block;
    margin-top: 0.1rem;
    color: var(--chc-muted);
    font-weight: 700;
    line-height: 1.45;
}

.admin-sidecard-access {
    align-items: center;
    border-top: 1px solid var(--chc-border);
    margin-top: 0.95rem;
    padding-top: 0.95rem;
}

.admin-sidecard-access strong {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.95rem;
    line-height: 1.25;
}

.admin-generated-link {
    display: grid;
    gap: 0.2rem;
    margin-top: 0.8rem;
    border: 1px solid rgba(0, 111, 111, 0.18);
    border-radius: 0.75rem;
    background: rgba(0, 143, 140, 0.08);
    color: var(--chc-muted);
    padding: 0.75rem;
}

.admin-generated-link span {
    color: var(--chc-teal-dark);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.admin-generated-link strong {
    overflow-wrap: anywhere;
    font-size: 0.82rem;
    line-height: 1.45;
}

.admin-action-summary {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(8.75rem, 1fr));
    margin: 0.85rem 0;
    border: 1px solid rgba(0, 111, 111, 0.14);
    border-radius: 0.8rem;
    background: var(--chc-surface-muted);
    padding: 0.85rem;
}

.admin-action-summary div {
    display: grid;
    min-width: 0;
    gap: 0.15rem;
}

.admin-action-summary span {
    color: var(--chc-muted);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.admin-action-summary strong {
    color: var(--chc-text);
    font-size: 0.95rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.admin-dossier-dialog {
    display: grid;
    min-height: 100%;
    gap: 1rem;
}

.admin-dossier-dialog-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.admin-dossier-dialog-header h3 {
    margin: 0.15rem 0 0;
    color: var(--chc-text);
    font-size: 1.25rem;
    line-height: 1.15;
}

/* Tarjeta de requisito documental: columna flex con el pie (archivo + acciones)
   anclado abajo, para que todas las tarjetas se vean uniformes. */
.admin-document-card {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    height: 100%;
    border: 1px solid var(--chc-border);
    border-radius: 1rem;
    background: var(--chc-surface);
    box-shadow: var(--chc-shadow);
    padding: 1.1rem;
}

.admin-document-card.compact {
    padding: 1rem;
}

/* Cuadrícula que se adapta al ancho sin breakpoints y mantiene TODAS las
   tarjetas del mismo alto: grid-auto-rows: 1fr iguala las filas y la tarjeta
   llena su celda con height: 100%. */
.admin-document-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-auto-rows: 1fr;
}

.admin-document-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

/* Ícono por tipo de archivo (imagen / PDF / doc): ancla visual para escanear. */
.admin-file-icon {
    display: inline-flex;
    width: 2.6rem;
    height: 2.6rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    background: rgba(0, 143, 140, 0.10);
    color: var(--chc-teal-dark);
}

.admin-document-title {
    margin: 0;
    font-family: "Hanken Grotesk", "Segoe UI", sans-serif;
    font-size: 1.02rem;
    font-weight: 900;
    line-height: 1.25;
    /* Dos líneas fijas: el título ocupa el mismo alto en todas las tarjetas. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    min-height: 2.55em;
    overflow: hidden;
}

.admin-document-req {
    align-self: flex-start;
}

/* Pie anclado abajo: alinea archivo y acciones entre todas las tarjetas. */
.admin-document-foot {
    display: grid;
    gap: 0.7rem;
    margin-top: auto;
    padding-top: 0.85rem;
    border-top: 1px solid var(--chc-border);
}

.admin-document-fileline {
    min-width: 0;
}

.admin-document-fileline strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
    font-weight: 800;
}

.admin-document-fileline span {
    display: block;
    margin-top: 0.1rem;
    color: var(--chc-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.admin-document-empty {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    color: var(--chc-muted);
    font-size: 0.86rem;
    font-weight: 800;
}

.admin-document-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.admin-document-actions > .rz-button {
    flex: 1 1 auto;
}

.admin-review-textarea {
    min-height: 4.45rem;
    resize: vertical;
}

.admin-document-visible,
.admin-sticky-visible {
    display: inline-flex;
    min-height: 2.85rem;
    align-items: center;
    gap: 0.55rem;
    border: 1px solid var(--chc-border);
    border-radius: 0.75rem;
    background: #ffffff;
    color: var(--chc-muted);
    font-size: 0.82rem;
    font-weight: 900;
    line-height: 1.25;
    padding: 0.65rem 0.8rem;
    white-space: nowrap;
}

.admin-document-save {
    align-self: end;
    white-space: nowrap;
}

.admin-sticky-actions-compact {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 210px auto;
    align-items: end;
    gap: 0.7rem;
}

.admin-quick-observation {
    min-height: 2.85rem;
    max-height: 4.75rem;
    resize: vertical;
}

.admin-sticky-visible {
    width: 100%;
    background: var(--chc-surface-muted);
}

.admin-sticky-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.admin-history-list {
    display: grid;
    max-width: 860px;
    gap: 0.8rem;
}

.admin-history-row {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 0.85rem;
    border: 1px solid var(--chc-border);
    border-radius: 0.85rem;
    background: #fbfcfd;
    padding: 0.85rem;
}

.admin-history-marker {
    display: inline-flex;
    width: 2.4rem;
    height: 2.4rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.7rem;
    background: rgba(0, 143, 140, 0.12);
    color: var(--chc-teal-dark);
}

.admin-history-row time {
    color: var(--chc-muted);
    font-size: 0.82rem;
    font-weight: 900;
}

.admin-document-loading {
    display: grid;
    min-height: 420px;
    place-items: center;
    gap: 0.7rem;
    color: var(--chc-muted);
    font-weight: 900;
    text-align: center;
}

.admin-document-loading .rz-icon {
    color: var(--chc-teal-dark);
    font-size: 2rem;
}

.admin-document-image {
    display: block;
    max-width: 100%;
    max-height: calc(100dvh - 12rem);
    margin: 0 auto;
    border-radius: 0.75rem;
    object-fit: contain;
}

.admin-document-frame {
    width: 100%;
    height: min(720px, calc(100dvh - 12rem));
    min-height: 420px;
    border: 1px solid var(--chc-border);
    border-radius: 0.75rem;
    background: #ffffff;
}

@media (min-width: 1280px) {
    .admin-dossier-layout {
        grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
    }

    .admin-dossier-layout > aside {
        max-width: 280px;
    }
}

@media (max-width: 1180px) {
    .admin-sticky-actions-compact {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .admin-sticky-buttons {
        justify-content: flex-start;
    }

    .admin-document-visible,
    .admin-sticky-visible {
        width: 100%;
        white-space: normal;
    }
}

.admin-segmented {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    border-bottom: 1px solid var(--chc-border);
    background: #fbfcfd;
    padding: 0.45rem 0.65rem 0;
}

.admin-segmented button {
    min-height: 2.85rem;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--chc-muted);
    cursor: pointer;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 900;
    padding: 0 0.9rem;
}

.admin-segmented button.active {
    border-bottom-color: var(--chc-teal-dark);
    color: var(--chc-teal-dark);
}

.admin-quick-list {
    display: grid;
    gap: 0.85rem;
}

.admin-quick-row {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--chc-border);
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    padding: 0.75rem 0.6rem;
    margin-inline: -0.6rem;
    border-radius: 0.6rem;
    text-align: left;
    transition: background 140ms ease, color 140ms ease;
}

.admin-quick-row:hover {
    background: rgba(0, 143, 140, 0.07);
    color: var(--chc-teal-dark);
}

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

.admin-quick-row > span:first-child {
    display: inline-flex;
    width: 2.4rem;
    height: 2.4rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.65rem;
    background: rgba(0, 143, 140, 0.12);
    color: var(--chc-teal-dark);
}

.admin-link-button {
    display: inline-flex;
    min-height: 2.85rem;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border: 1px solid var(--chc-teal-dark);
    border-radius: 0.85rem;
    background: var(--chc-teal-dark);
    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 900;
    padding: 0 0.9rem;
    text-decoration: none;
    box-shadow: 0 10px 22px -14px rgba(0, 111, 111, 0.9);
    transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.admin-link-button:hover {
    background: var(--chc-teal);
    border-color: var(--chc-teal);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 14px 26px -14px rgba(0, 111, 111, 0.85);
}

.admin-link-button.secondary:hover {
    background: var(--chc-surface-muted);
    border-color: var(--chc-teal);
    color: var(--chc-teal-dark);
}

.admin-link-button.secondary {
    background: #ffffff;
    color: var(--chc-teal-dark);
}

@media (min-width: 768px) {
    .admin-topbar-inner {
        grid-template-columns: minmax(180px, 0.75fr) minmax(260px, 640px) minmax(170px, 0.75fr);
    }

    .admin-topbar-search {
        display: block;
    }

    .admin-mobile-search-button {
        display: none;
    }
}

@media (min-width: 1024px) {
    .admin-topbar-inner {
        padding-right: 1.5rem;
        padding-left: 1.5rem;
    }

    .admin-sidebar-toggle {
        display: inline-flex;
    }

    .admin-content {
        padding: 1.5rem 1.5rem 5rem;
    }
}

@media (max-width: 640px) {
    .admin-current-user {
        max-width: 12rem;
    }

    .admin-current-user-text small {
        display: none;
    }
}

@media (max-width: 460px) {
    .admin-topbar-inner {
        gap: 0.65rem;
    }

    .admin-current-user {
        padding: 0.3rem;
    }

    .admin-current-user-text {
        display: none;
    }
}

@media (max-width: 760px) {
    .admin-topbar-inner {
        min-height: 58px;
        gap: 0.7rem;
        padding: 0.7rem 0.85rem;
    }

    .admin-topbar-context {
        gap: 0.55rem;
    }

    .admin-page-header,
    .admin-data-header {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-page-actions,
    .admin-data-actions,
    .admin-empty-actions {
        width: 100%;
        align-items: stretch;
        justify-content: stretch;
    }

    .admin-page-actions > *,
    .admin-data-actions > *,
    .admin-empty-actions > * {
        flex: 1 1 100%;
        min-width: 0;
    }

    .admin-page-actions .rz-button,
    .admin-data-actions .rz-button,
    .admin-empty-actions .rz-button,
    .admin-page-actions .admin-link-button,
    .admin-data-actions .admin-link-button,
    .admin-empty-actions .admin-link-button {
        width: 100%;
    }

    .admin-data-header {
        padding: 1rem;
    }

    .admin-toolbar {
        padding: 0.85rem 1rem;
    }

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

    .admin-content {
        padding: 1rem 0.85rem 6.5rem;
    }

    .admin-sticky-actionbar {
        right: 0.75rem;
        bottom: 0.75rem;
        left: 0.75rem;
        padding: 0.65rem;
    }

    .admin-document-card {
        padding: 1rem;
    }

    .admin-dossier-sidecard {
        padding: 0.9rem;
    }

    .rz-dialog-wrapper {
        align-items: stretch;
        justify-content: center;
        padding: max(0.5rem, env(safe-area-inset-top, 0px)) max(0.5rem, env(safe-area-inset-right, 0px)) max(0.5rem, env(safe-area-inset-bottom, 0px)) max(0.5rem, env(safe-area-inset-left, 0px));
    }

    .rz-dialog-wrapper .rz-dialog {
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(100dvh - 1rem) !important;
        border-radius: 0.9rem !important;
    }

    .rz-dialog-titlebar {
        padding: 0.85rem 1rem !important;
    }

    .rz-dialog-content {
        max-height: calc(100dvh - 1rem) !important;
    }

    .admin-dialog-content {
        max-height: calc(100dvh - 1rem);
        padding: 0.85rem;
        gap: 0.85rem;
    }

    .admin-dialog-body {
        max-height: calc(100dvh - 11.5rem);
        padding-right: 0;
    }

    .admin-dialog-footer {
        align-items: stretch;
        margin: 0 -0.85rem -0.85rem;
        padding: 0.7rem calc(0.85rem + env(safe-area-inset-right, 0px)) calc(0.7rem + env(safe-area-inset-bottom, 0px)) calc(0.85rem + env(safe-area-inset-left, 0px));
    }

    .admin-dialog-footer .rz-button,
    .admin-dialog-footer .admin-link-button {
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
    }

    .admin-data-surface .rz-data-grid,
    .admin-data-surface .rz-datatable {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .admin-data-surface .rz-grid-table {
        min-width: 720px;
    }

    .admin-requirement-row,
    .admin-component-row,
    .admin-score-row {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .admin-evaluation-header,
    .admin-evaluation-phase-heading {
        flex-direction: column;
    }

    .admin-preview-body {
        min-height: 420px;
        padding: 0.75rem;
    }
}

.validation-message,
.rz-message {
    color: var(--chc-red);
    font-size: 0.82rem;
    font-weight: 700;
}

.chc-field,
.field-group {
    display: grid;
    gap: 0.5rem;
}

.chc-field-label {
    color: var(--chc-text);
    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1.35;
}

.chc-field-required {
    color: var(--chc-red);
    margin-left: 0.25rem;
}

.chc-field-help {
    color: var(--chc-muted);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.45;
}

.chc-form-section {
    display: grid;
    gap: 1.25rem;
}

.chc-form-section-header h2 {
    font-family: "Hanken Grotesk", "Plus Jakarta Sans", "Segoe UI", sans-serif;
    font-size: clamp(1.45rem, 2vw, 1.9rem);
    font-weight: 800;
    line-height: 1.15;
    margin: 0;
}

.chc-form-section-header p {
    color: var(--chc-muted);
    line-height: 1.7;
    margin: 0.5rem 0 0;
}

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

.chc-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.chc-form-actions-stretch > * {
    flex: 1 1 180px;
}

/* Los controles Radzen llenan el ancho de su campo; el resto del estilo
   (alto, borde, radio, foco) proviene del tema Material + variables --rz-*. */
.chc-field .rz-textbox,
.chc-field .rz-password,
.chc-field .rz-datepicker,
.chc-field .rz-spinner,
.chc-field .rz-dropdown,
.chc-field .rz-textarea,
.field-group .rz-textbox,
.field-group .rz-password,
.field-group .rz-datepicker,
.field-group .rz-spinner,
.field-group .rz-dropdown,
.field-group .rz-textarea {
    width: 100%;
}

.rz-dropdown-panel {
    border: 1px solid var(--chc-border) !important;
    border-radius: 0.85rem !important;
    box-shadow: var(--chc-shadow) !important;
    overflow: hidden;
}

.rz-dropdown-item.rz-state-highlight {
    background: rgba(0, 124, 121, 0.12) !important;
    color: var(--chc-teal-dark) !important;
}

.rz-chkbox-box {
    border-color: var(--chc-border) !important;
    border-radius: 0.35rem !important;
}

.rz-chkbox-box.rz-state-active {
    background: var(--chc-teal-dark) !important;
    border-color: var(--chc-teal-dark) !important;
}

.chc-check-option {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    color: var(--chc-muted);
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.45;
}

.chc-check-option small {
    display: block;
    color: var(--chc-muted);
    font-size: 0.78rem;
    font-weight: 700;
    margin-top: 0.15rem;
}

.chc-file-upload {
    display: grid;
    gap: 0.45rem;
}

.chc-file-upload-button {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 0.85rem;
    background: var(--chc-teal-dark);
    color: #ffffff;
    cursor: pointer;
    font-size: 0.92rem;
    font-weight: 800;
    padding: 0.75rem 1rem;
    text-decoration: none;
    transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.chc-file-upload-button:hover {
    background: var(--chc-teal);
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(0, 89, 88, 0.18);
}

.chc-file-upload-button.secondary {
    border: 1px solid var(--chc-border);
    background: #ffffff;
    color: var(--chc-text);
}

.chc-file-upload-button.secondary:hover {
    border-color: var(--chc-teal);
    color: var(--chc-teal-dark);
}

.chc-file-upload-button[aria-disabled="True"],
.chc-file-upload-button[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.55;
    pointer-events: none;
}

.chc-file-upload small {
    color: var(--chc-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.rz-button {
    max-width: 100%;
    min-width: 0;
    border-radius: 0.85rem !important;
    font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.rz-button .rz-button-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rz-button.rz-primary {
    background-color: var(--chc-teal-dark) !important;
}

.rz-button.rz-primary:hover {
    background-color: var(--chc-teal) !important;
}

.rz-button.rz-warning,
.rz-button.rz-button-warning {
    background-color: var(--chc-amber) !important;
    color: #ffffff !important;
}

.rz-button.rz-warning:hover,
.rz-button.rz-button-warning:hover {
    background-color: #b97f00 !important;
}

.rz-button.rz-danger,
.rz-button.rz-button-danger {
    background-color: var(--chc-red) !important;
    color: #ffffff !important;
}

.rz-button.rz-danger:hover,
.rz-button.rz-button-danger:hover {
    background-color: #a52c22 !important;
}

.rz-button.rz-light,
.rz-button.rz-button-light {
    border: 1px solid var(--chc-border) !important;
    background-color: #ffffff !important;
    color: var(--chc-text) !important;
}

.rz-dialog-mask {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1080 !important;
    background-color: rgba(15, 23, 42, 0.36) !important;
}

.rz-dialog-wrapper {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1090 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    isolation: isolate;
    overflow: auto !important;
    overscroll-behavior: contain;
    padding: max(0.75rem, env(safe-area-inset-top, 0px)) max(0.75rem, env(safe-area-inset-right, 0px)) max(0.75rem, env(safe-area-inset-bottom, 0px)) max(0.75rem, env(safe-area-inset-left, 0px));
    pointer-events: auto;
}

.rz-dialog-wrapper .rz-dialog-mask {
    z-index: 0 !important;
}

.rz-dialog-wrapper .rz-dialog {
    position: relative !important;
    width: auto;
    z-index: 2 !important;
    background-color: #ffffff !important;
    max-width: min(100%, calc(100vw - 1.5rem)) !important;
    max-height: calc(100dvh - 1.5rem) !important;
    margin: auto !important;
    border: 1px solid var(--chc-border) !important;
    border-radius: 1.1rem !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18) !important;
    overflow: hidden !important;
}

.rz-dialog-titlebar {
    border-bottom: 1px solid var(--chc-border) !important;
    color: var(--chc-text) !important;
    font-family: "Hanken Grotesk", "Plus Jakarta Sans", "Segoe UI", sans-serif !important;
    font-weight: 800 !important;
}

.rz-dialog-title {
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal !important;
}

.rz-dialog-content {
    overflow: hidden !important;
    padding: 0 !important;
}

.admin-dialog-content {
    display: flex;
    max-height: calc(94dvh - 3.8rem);
    min-width: 0;
    min-height: 0;
    width: 100%;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
}

.admin-dialog-form {
    display: flex;
    min-height: 0;
    flex-direction: column;
    gap: 1rem;
}

.admin-dialog-body {
    min-height: 0;
    max-height: min(64dvh, 680px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 0.25rem;
}

.admin-dialog-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    margin: 0 -1rem -1rem;
    border-top: 1px solid var(--chc-border);
    background: #ffffff;
    padding: 0.75rem 1rem;
}

.admin-dialog-footer.justify-between {
    justify-content: space-between;
}

.admin-dialog-tabs {
    display: flex;
    gap: 0.35rem;
    overflow-x: auto;
    border: 1px solid var(--chc-border);
    border-radius: 0.85rem;
    background: var(--chc-surface-muted);
    padding: 0.35rem;
    /* Las pestañas pueden desplazarse en pantallas muy angostas, pero el scrollbar
       no debe dibujarse (ruido visual aunque las pestañas quepan). */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.admin-dialog-tabs::-webkit-scrollbar {
    display: none;
}

.admin-dialog-tabs button {
    display: inline-flex;
    min-height: 2.45rem;
    min-width: max-content;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid transparent;
    border-radius: 0.7rem;
    background: transparent;
    color: var(--chc-muted);
    cursor: pointer;
    font-size: 0.84rem;
    font-weight: 900;
    padding: 0 0.75rem;
}

.admin-dialog-tabs button.active {
    border-color: rgba(0, 111, 111, 0.16);
    background: #ffffff;
    color: var(--chc-teal-dark);
}

.admin-dossier-tabs {
    align-self: center;
    /* Sin scroll: las pestañas se centran (H y V) y, si el ancho no alcanza,
       envuelven en vez de generar barra de desplazamiento. */
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    overflow: visible;
    width: auto;
    max-width: 100%;
    margin-bottom: 1.35rem;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.admin-dossier-tabs button {
    min-height: 2.2rem;
    border-radius: 999px;
    padding: 0 0.85rem;
}

.admin-dialog-tabs button strong {
    color: inherit;
    font-size: 0.78rem;
}

.admin-action-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
}

.admin-action-summary > div {
    min-width: 0;
    border: 1px solid var(--chc-border);
    border-radius: 0.75rem;
    background: #ffffff;
    padding: 0.8rem;
}

.admin-action-summary span {
    display: block;
    color: var(--chc-muted);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.admin-action-summary strong {
    display: block;
    margin-top: 0.25rem;
    overflow-wrap: anywhere;
    color: var(--chc-text);
    font-size: 0.95rem;
    font-weight: 900;
    line-height: 1.35;
}

.admin-dossier-dialog {
    gap: 0.8rem;
}

.admin-dossier-dialog-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    border: 1px solid var(--chc-border);
    border-radius: 0.9rem;
    background: #ffffff;
    padding: 0.9rem;
}

.admin-dashboard-grid .status-badge {
    max-width: 9.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-dashboard-grid .rz-cell-data {
    min-width: 0;
}

.admin-confirm-summary {
    display: grid;
    grid-template-columns: 2.65rem minmax(0, 1fr);
    gap: 0.85rem;
    border: 1px solid rgba(217, 154, 0, 0.25);
    border-radius: 0.85rem;
    background: rgba(217, 154, 0, 0.10);
    color: #6b4b00;
    padding: 0.9rem;
}

.admin-confirm-summary.tone-danger {
    border-color: rgba(194, 56, 43, 0.20);
    background: rgba(194, 56, 43, 0.08);
    color: var(--chc-red);
}

.admin-confirm-summary.tone-success {
    border-color: rgba(4, 113, 43, 0.20);
    background: rgba(4, 113, 43, 0.08);
    color: var(--chc-green);
}

.admin-confirm-summary.tone-info {
    border-color: rgba(0, 143, 140, 0.22);
    background: rgba(0, 143, 140, 0.08);
    color: var(--chc-teal-dark);
}

.admin-confirm-icon {
    display: inline-flex;
    width: 2.45rem;
    height: 2.45rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.7rem;
    background: #ffffff;
}

.admin-confirm-summary p {
    margin: 0;
    color: var(--chc-text);
    font-size: 0.95rem;
    font-weight: 900;
    line-height: 1.45;
}

.admin-confirm-summary small {
    display: block;
    margin-top: 0.25rem;
    color: currentColor;
    font-weight: 800;
    line-height: 1.45;
}

.admin-quick-actions,
.admin-component-list {
    display: grid;
    gap: 0.65rem;
    border: 1px solid var(--chc-border);
    border-radius: 0.75rem;
    background: var(--chc-surface-muted);
    padding: 0.85rem;
}

.admin-role-list {
    display: grid;
    max-height: 210px;
    gap: 0.65rem;
    overflow-y: auto;
    padding-right: 0.2rem;
}

.admin-requirements-list {
    display: grid;
    gap: 0.55rem;
}

.admin-requirement-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 128px 128px 82px;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid var(--chc-border);
    border-radius: 0.75rem;
    background: #ffffff;
    padding: 0.75rem;
}

.admin-phase-list {
    display: grid;
    gap: 0.75rem;
}

.admin-phase-card {
    border: 1px solid var(--chc-border);
    border-radius: 0.85rem;
    background: #ffffff;
    overflow: hidden;
}

.admin-phase-card summary {
    display: flex;
    min-height: 3rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    list-style: none;
    background: var(--chc-surface-muted);
    padding: 0.75rem 0.9rem;
}

.admin-phase-card summary::-webkit-details-marker {
    display: none;
}

.admin-phase-card summary strong,
.admin-evaluation-phase-heading h4 {
    display: block;
    margin: 0;
    font-family: "Hanken Grotesk", "Segoe UI", sans-serif;
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1.15;
}

.admin-phase-card summary small,
.admin-evaluation-phase-heading small,
.admin-score-row small {
    display: block;
    margin-top: 0.15rem;
    color: var(--chc-muted);
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.35;
}

.admin-phase-card-body {
    display: grid;
    gap: 0.85rem;
    padding: 0.85rem;
}

.admin-component-row {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr) 160px 90px 82px auto;
    align-items: end;
    gap: 0.55rem;
}

.admin-evaluation-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
}

.admin-evaluation-phase {
    display: grid;
    gap: 0.9rem;
}

.admin-evaluation-phase-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
    border: 1px solid var(--chc-border);
    border-radius: 0.85rem;
    background: #ffffff;
    padding: 0.85rem;
}

.admin-evaluation-components {
    display: grid;
    gap: 0.75rem;
}

.admin-evaluation-component {
    display: grid;
    gap: 0.65rem;
    border: 1px solid var(--chc-border);
    border-radius: 0.75rem;
    background: #ffffff;
    padding: 0.8rem;
}

.admin-score-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px;
    align-items: center;
    gap: 0.85rem;
}

.admin-preview-dialog {
    gap: 0;
}

.admin-preview-body {
    display: grid;
    min-height: min(560px, calc(100dvh - 15rem));
    max-height: calc(94dvh - 8rem);
    place-items: center;
    overflow: auto;
    padding: 1rem;
}

.admin-preview-body .admin-document-image {
    max-height: calc(94dvh - 10rem);
}

.admin-preview-body .admin-document-frame {
    height: calc(94dvh - 10rem);
}

@media (max-width: 760px) {
    .admin-dialog-content {
        max-height: calc(100dvh - 1rem);
        padding: 0.85rem;
        gap: 0.85rem;
    }

    .admin-dialog-body {
        max-height: calc(100dvh - 11.5rem);
        padding-right: 0;
    }

    .admin-dialog-footer {
        align-items: stretch;
        margin: 0 -0.85rem -0.85rem;
        padding: 0.7rem calc(0.85rem + env(safe-area-inset-right, 0px)) calc(0.7rem + env(safe-area-inset-bottom, 0px)) calc(0.85rem + env(safe-area-inset-left, 0px));
    }

    .admin-dialog-footer .rz-button,
    .admin-dialog-footer .admin-link-button {
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
    }

    .admin-requirement-row,
    .admin-component-row,
    .admin-score-row,
    .admin-action-summary {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .admin-evaluation-header,
    .admin-evaluation-phase-heading,
    .admin-dossier-dialog-header {
        flex-direction: column;
        grid-template-columns: 1fr;
    }

    .admin-preview-body {
        min-height: 420px;
        padding: 0.75rem;
    }
}

.rz-datatable,
.rz-grid-table {
    color: var(--chc-text) !important;
    font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif !important;
}

/* Mobile-safe Radzen admin dialogs.
   The title/footer stay in the modal shell; the body is the only vertical scroller. */
.rz-dialog-wrapper {
    align-items: center;
    justify-content: center;
    overflow: hidden !important;
}

.rz-dialog-wrapper .rz-dialog {
    display: flex !important;
    max-height: calc(100dvh - 1.5rem) !important;
    min-height: 0;
    flex-direction: column;
    overflow: hidden !important;
}

.rz-dialog-titlebar {
    flex: 0 0 auto;
}

.rz-dialog-content {
    display: flex !important;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden !important;
    padding: 0 !important;
}

.admin-dialog-content,
.admin-dialog-form {
    min-height: 0;
    max-height: none;
    flex: 1 1 auto;
    overflow: hidden;
}

.admin-dialog-body {
    min-height: 0;
    max-height: none;
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.admin-dialog-footer {
    flex: 0 0 auto;
}

.admin-dossier-dialog {
    min-height: 0;
}

.admin-dossier-actions {
    gap: 0.65rem;
}

.admin-dossier-action-group {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: 0.55rem;
}

@media (max-width: 760px) {
    .rz-dialog-wrapper {
        align-items: stretch;
        justify-content: center;
        padding: max(0.5rem, env(safe-area-inset-top, 0px)) max(0.5rem, env(safe-area-inset-right, 0px)) max(0.5rem, env(safe-area-inset-bottom, 0px)) max(0.5rem, env(safe-area-inset-left, 0px));
    }

    .rz-dialog-wrapper .rz-dialog {
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(100dvh - 1rem) !important;
        margin: 0 auto !important;
        border-radius: 0.9rem !important;
    }

    .rz-dialog-titlebar {
        padding: 0.8rem 1rem !important;
    }

    .admin-dialog-content {
        padding: 0.8rem;
        gap: 0.75rem;
    }

    .admin-dialog-body {
        padding-right: 0;
    }

    .admin-dialog-footer {
        align-items: stretch;
        margin: 0 -0.8rem -0.8rem;
        padding: 0.65rem calc(0.8rem + env(safe-area-inset-right, 0px)) calc(0.65rem + env(safe-area-inset-bottom, 0px)) calc(0.8rem + env(safe-area-inset-left, 0px));
    }

    .admin-dialog-footer .rz-button,
    .admin-dialog-footer .admin-link-button {
        min-width: 0;
    }

    .admin-dossier-dialog-header {
        gap: 0.75rem;
        padding: 0.8rem;
    }

    .admin-dossier-tabs {
        padding: 0.25rem;
    }

    .admin-dossier-tabs button {
        flex: 1 0 max-content;
        min-height: 2.5rem;
        padding: 0.55rem 0.7rem;
        white-space: nowrap;
    }

    .admin-dossier-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .admin-dossier-action-group {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-dossier-action-group .rz-button {
        width: 100%;
    }

    .admin-dossier-action-group:first-child .rz-button:first-child {
        grid-column: 1 / -1;
    }

    .admin-preview-body {
        min-height: 0;
        max-height: none;
    }
}

@media (max-width: 420px) {
    .admin-dossier-action-group {
        grid-template-columns: 1fr;
    }

    .admin-dossier-action-group:first-child .rz-button:first-child {
        grid-column: auto;
    }
}

/* Hard mobile lock for the dense dossier dialog.
   Without an explicit dialog height, Radzen can shrink the active tab body to zero. */
@media (max-width: 760px) {
    .rz-dialog-wrapper .rz-dialog:has(.admin-dossier-dialog) {
        height: calc(100dvh - 1rem) !important;
        max-height: calc(100dvh - 1rem) !important;
    }

    .rz-dialog-wrapper .rz-dialog:has(.admin-dossier-dialog) .rz-dialog-content {
        height: 100%;
        min-height: 0;
    }

    .admin-dialog-content.admin-dossier-dialog {
        display: flex !important;
        height: 100%;
        min-height: 0;
        flex-direction: column;
        overflow: hidden;
    }

    .admin-dossier-dialog > .admin-dossier-dialog-header,
    .admin-dossier-dialog > .admin-dialog-tabs,
    .admin-dossier-dialog > .admin-dialog-footer {
        flex: 0 0 auto;
    }

    .admin-dossier-dialog > .admin-dialog-body {
        display: block;
        min-height: 12rem;
        max-height: none !important;
        flex: 1 1 0;
        overflow-x: hidden;
        overflow-y: auto !important;
        padding-bottom: 0.85rem;
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
    }

    .admin-dossier-dialog > .admin-dialog-footer {
        position: static;
    }
}

.rz-datatable-thead th,
.rz-grid-table thead th {
    background: var(--chc-surface-muted) !important;
    color: var(--chc-muted) !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase;
}

.rz-datatable,
.rz-grid-table,
.rz-data-grid {
    border-radius: 1rem !important;
    overflow: hidden;
    font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif !important;
}

.rz-grid-table thead th {
    background: #f8fafb !important;
    color: var(--chc-muted) !important;
    font-size: 0.76rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.035em !important;
    text-transform: uppercase;
}

.rz-grid-table td {
    color: var(--chc-text) !important;
    vertical-align: middle !important;
}

/* Hover de fila: realimentación de estado al recorrer el listado (no existía). */
.rz-grid-table tbody tr:hover > td,
.rz-datatable-data tr:hover > td {
    background: rgba(0, 143, 140, 0.05) !important;
}

.applicant-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.applicant-cell > span {
    display: inline-flex;
    width: 2.35rem;
    height: 2.35rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(0, 143, 140, 0.14);
    color: var(--chc-teal-dark);
    font-size: 0.78rem;
    font-weight: 900;
}

.applicant-cell strong,
.applicant-cell small {
    display: block;
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.applicant-cell small {
    color: var(--chc-muted);
}

#blazor-error-ui {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1000;
    display: none;
    max-width: min(480px, calc(100vw - 2rem));
    border: 1px solid rgba(194, 56, 43, 0.24);
    border-radius: 1rem;
    background: #fff4f2;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
    color: var(--chc-red);
    padding: 0.85rem 1rem;
}

#blazor-error-ui .reload,
#blazor-error-ui .dismiss {
    margin-left: 0.75rem;
    color: var(--chc-red);
    cursor: pointer;
}

/* Foco visible consistente en los componentes a medida (WCAG 2.1 AA). Radzen ya
   gestiona el foco de sus propios controles; esto cubre enlaces y botones que el
   diseño construye con clases utilitarias y no tenían indicador de teclado. */
.admin-link-button:focus-visible,
.admin-quick-row:focus-visible,
.admin-sidebar-toggle:focus-visible,
.admin-mobile-search-button:focus-visible,
.admin-logout:focus-visible,
.admin-document-visible:focus-visible,
.admin-sticky-visible:focus-visible,
.chc-file-upload-button:focus-visible,
.hero-cta-primary:focus-visible,
.admin-segmented button:focus-visible,
.admin-dialog-tabs button:focus-visible,
.admin-phase-card summary:focus-visible {
    outline: 2px solid var(--chc-teal-dark);
    outline-offset: 2px;
}

.admin-segmented button:focus-visible,
.admin-dialog-tabs button:focus-visible {
    outline-offset: -2px;
    border-radius: 0.4rem;
}

/* La barra de búsqueda del topbar es un <input> real; resaltamos el contenedor
   cuando recibe foco por teclado. */
.admin-topbar form:focus-within {
    border-color: var(--chc-primary);
    box-shadow: 0 0 0 3px rgba(0, 143, 140, 0.12), var(--chc-shadow-sm);
}

/* Landing pública — hero fotográfico. La foto va en un <img> real (alt, carga
   prioritaria, src desde el contenido editable) y la marca se aplica con una
   capa de degradado teal→verde encima, garantizando contraste AA del texto
   blanco sobre cualquier foto. */
.hero-veil {
    background:
        linear-gradient(96deg, rgba(0, 74, 76, 0.95) 0%, rgba(0, 79, 80, 0.86) 42%, rgba(0, 94, 96, 0.55) 72%, rgba(0, 94, 96, 0.28) 100%),
        linear-gradient(0deg, rgba(2, 26, 26, 0.55) 0%, rgba(2, 26, 26, 0) 40%);
}

.cta-veil {
    background:
        linear-gradient(100deg, rgba(0, 74, 76, 0.96) 0%, rgba(4, 59, 28, 0.86) 55%, rgba(0, 74, 76, 0.74) 100%);
}

/* Panel lateral de autenticación (AuthShell) sobre foto: capa teal→verde densa
   para sostener contraste AA del texto blanco. */
.auth-veil {
    background:
        linear-gradient(165deg, rgba(0, 74, 76, 0.95) 0%, rgba(4, 59, 28, 0.90) 100%);
}

.hero-content h1,
.hero-content p {
    text-shadow: 0 1px 16px rgba(3, 28, 28, 0.32);
}

/* En pantallas angostas la foto del hero compite con el texto; reforzamos la
   capa para sostener el contraste del titular. */
@media (max-width: 640px) {
    .hero-veil {
        background:
            linear-gradient(180deg, rgba(0, 74, 76, 0.78) 0%, rgba(0, 79, 80, 0.92) 100%);
    }
}

/* Entrada escalonada del hero. El contenido es visible por defecto; solo anima
   si el usuario no pidió menos movimiento. Reutiliza el keyframe reveal-rise. */
@media (prefers-reduced-motion: no-preference) {
    .stagger-children > * {
        animation: reveal-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    .stagger-children > *:nth-child(2) { animation-delay: 0.08s; }
    .stagger-children > *:nth-child(3) { animation-delay: 0.16s; }
    .stagger-children > *:nth-child(4) { animation-delay: 0.24s; }
    .stagger-children > *:nth-child(5) { animation-delay: 0.32s; }
}

/* Reveal al hacer scroll en la landing pública. CSS puro (scroll-driven
   animations), sin JS: el contenido es visible por defecto y solo se anima
   cuando el navegador soporta animation-timeline y el usuario no pidió menos
   movimiento. Así nunca se queda una sección en blanco. */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .reveal-on-scroll {
            animation: reveal-rise linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 22%;
        }
    }
}

@keyframes reveal-rise {
    from {
        opacity: 0;
        transform: translateY(1.5rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Entrada única para tarjetas centradas (auth). El contenido es visible por
   defecto; solo se anima si el usuario no pidió menos movimiento. */
@media (prefers-reduced-motion: no-preference) {
    .reveal-on-load {
        animation: reveal-rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
    }
}

/* Movimiento reducido no es opcional: anula transiciones y animaciones para
   quienes lo solicitan, dejando los cambios de estado instantáneos. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}