/* /Layout/AiHelpAssistant.razor.rz.scp.css */
.ai-wrap[b-70dyx3a8jt] { position: relative; display: flex; align-items: center; }
.ai-btn[b-70dyx3a8jt] {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border: none; background: transparent; border-radius: 50%;
    color: var(--color-accent); cursor: pointer;
    transition: background 150ms, color 150ms;
}
.ai-btn:hover[b-70dyx3a8jt] { background: var(--color-bg); }
.ai-btn[aria-expanded="true"][b-70dyx3a8jt] { background: var(--color-bg); color: var(--color-primary); }
.ai-btn .material-symbols-outlined[b-70dyx3a8jt] { font-size: 22px; }

.ai-scrim[b-70dyx3a8jt] { position: fixed; inset: 0; z-index: 1; background: transparent; }
.ai-panel[b-70dyx3a8jt] {
    position: absolute; right: 0; top: calc(100% + 8px);
    width: 420px; max-width: calc(100vw - 24px);
    height: min(560px, calc(var(--app-100vh, 100vh) - 90px));
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.12);
    z-index: 2; overflow: hidden;
    display: flex; flex-direction: column;
    animation: ai-in-b-70dyx3a8jt 150ms ease-out;
}
@keyframes ai-in-b-70dyx3a8jt { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

.ai-panel__header[b-70dyx3a8jt] { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 6px; }
.ai-panel__title[b-70dyx3a8jt] { display: flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .9rem; min-width: 0; }
.ai-panel__title .material-symbols-outlined[b-70dyx3a8jt] { font-size: 19px; color: var(--color-accent); }
.ai-panel__actions[b-70dyx3a8jt] { display: flex; align-items: center; gap: .3rem; }
.ai-panel__link[b-70dyx3a8jt] {
    border: none; background: transparent; color: var(--color-primary);
    font-family: inherit; font-size: .75rem; font-weight: 600;
    cursor: pointer; padding: 2px 6px; border-radius: 6px;
}
.ai-panel__link:hover:not(:disabled)[b-70dyx3a8jt] { background: var(--color-bg); }
.ai-panel__close[b-70dyx3a8jt] {
    border: none; background: transparent; color: var(--color-text-secondary);
    cursor: pointer; display: flex; padding: 2px; border-radius: 6px;
}
.ai-panel__close:hover[b-70dyx3a8jt] { background: var(--color-bg); }
.ai-panel__close .material-symbols-outlined[b-70dyx3a8jt] { font-size: 19px; }
.ai-panel__hint[b-70dyx3a8jt] { margin: 0; padding: 0 14px 8px; font-size: .74rem; color: var(--color-text-secondary); }
.ai-panel__quota[b-70dyx3a8jt] { margin: 0; padding: 0 14px 10px; font-size: .7rem; color: var(--color-text-secondary); }

.ai-messages[b-70dyx3a8jt] {
    flex: 1; overflow-y: auto; padding: 8px 14px;
    display: flex; flex-direction: column; gap: 8px;
    border-top: 1px solid var(--color-border);
}
.ai-suggestions[b-70dyx3a8jt] { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ai-chip[b-70dyx3a8jt] {
    border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text);
    font-family: inherit; font-size: .78rem; padding: 5px 10px; border-radius: 20px; cursor: pointer;
}
.ai-chip:hover[b-70dyx3a8jt] { border-color: var(--color-primary); color: var(--color-primary); }

.ai-msg[b-70dyx3a8jt] {
    max-width: 88%; padding: 8px 11px; border-radius: 12px;
    font-size: .84rem; line-height: 1.45; overflow-wrap: anywhere;
}
.ai-msg--user[b-70dyx3a8jt] {
    align-self: flex-end; background: var(--color-primary); color: #fff;
    border-bottom-right-radius: 4px; white-space: pre-wrap;
}
.ai-msg--assistant[b-70dyx3a8jt] {
    align-self: flex-start; background: var(--color-bg); color: var(--color-text);
    border-bottom-left-radius: 4px;
}
.ai-msg--typing[b-70dyx3a8jt] { display: flex; align-items: center; gap: .35rem; color: var(--color-text-secondary); }
.ai-msg--typing .material-symbols-outlined[b-70dyx3a8jt] { font-size: 16px; }
.ai-msg[b-70dyx3a8jt]  p { margin: 0 0 .4rem; }
.ai-msg[b-70dyx3a8jt]  p:last-child { margin-bottom: 0; }
.ai-msg[b-70dyx3a8jt]  ol, .ai-msg[b-70dyx3a8jt]  ul { margin: .2rem 0 .4rem; padding-left: 1.2rem; }
.ai-msg[b-70dyx3a8jt]  a { color: var(--color-primary); font-weight: 600; }
.ai-error[b-70dyx3a8jt] { margin: 0; font-size: .8rem; }

.ai-input[b-70dyx3a8jt] {
    display: flex; align-items: flex-end; gap: 6px;
    padding: 8px 10px 8px 14px; border-top: 1px solid var(--color-border);
}
.ai-input textarea[b-70dyx3a8jt] {
    flex: 1; min-width: 0; resize: none; font-family: inherit; font-size: .85rem;
    border: 1px solid var(--color-border); border-radius: 8px; padding: 7px 9px;
    background: var(--color-surface); color: var(--color-text);
}
.ai-input textarea:focus[b-70dyx3a8jt] { outline: none; border-color: var(--color-primary); }
.ai-send[b-70dyx3a8jt] {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border: none; border-radius: 8px;
    background: var(--color-primary); color: #fff; cursor: pointer;
}
.ai-send:disabled[b-70dyx3a8jt] { opacity: .45; cursor: default; }
.ai-send .material-symbols-outlined[b-70dyx3a8jt] { font-size: 20px; }

/* En móvil y tablet vertical el panel ocupa casi toda la pantalla: anclado a este
   botón (a su derecha van ayuda, campana y perfil) un panel de 420 px se salía por la
   izquierda hasta los 767 px. Su alto termina sobre la barra inferior, que se pinta
   encima de la topbar y tapaba la caja de la pregunta. */
@media (max-width: 767.98px) {
    .ai-panel[b-70dyx3a8jt] {
        position: fixed; top: calc(var(--topbar-height) + 8px); left: 8px; right: 8px;
        width: auto; max-width: none;
        height: calc(var(--app-100vh, 100vh) - var(--topbar-height) - var(--bottomnav-height)
                     - env(safe-area-inset-bottom, 0px) - 16px);
    }
    .ai-msg[b-70dyx3a8jt] { max-width: 92%; }
    /* 16 px como mínimo: con menos, iOS amplía la página al enfocar la caja. */
    .ai-input textarea[b-70dyx3a8jt] { font-size: 16px; }
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* ── Layout responsive del portal RRHH (patrón CRM) ─────────────────────────
   Sidebar en desktop (≥992px), navegación inferior en móvil, topbar fija. */

.layout[b-fki0z2rnep] {
    display: flex;
    height: 100vh;
    height: var(--app-100vh);
    overflow: hidden;
    /* Con viewport-fit=cover (index.html) la página llega hasta los bordes del iPhone:
       en horizontal la muesca taparía el menú y el contenido sin este margen. En
       vertical los dos valen 0. */
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

/* ── Sidebar (desktop) ──────────────────────────────────────────────────── */
.sidebar[b-fki0z2rnep] {
    display: none;
    flex-direction: column;
    width: var(--sidebar-width);
    height: 100vh;
    height: var(--app-100vh);
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    transition: width 300ms ease;
    overflow: hidden;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 30;
}
.sidebar--collapsed[b-fki0z2rnep] { width: var(--sidebar-collapsed); }

.sidebar__header[b-fki0z2rnep] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--topbar-height);
    padding: 0 12px;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
    position: relative;
}

.sidebar__logo-img[b-fki0z2rnep] {
    flex: 0 0 auto;
    max-width: calc(100% - 56px);   /* deja hueco al toggle absoluto a la derecha */
    height: 40px;
    width: auto;
    object-fit: contain;
    object-position: center center;
    border-radius: 6px;
    display: block;
}
@media (min-width: 1440px) { .sidebar__logo-img[b-fki0z2rnep] { height: 46px; } }

.sidebar__logo-img--small[b-fki0z2rnep] {
    flex: none;
    height: 34px;
    width: 44px;
    object-position: center center;
}

.sidebar__toggle[b-fki0z2rnep] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 6px;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 200ms, color 200ms;
    flex-shrink: 0;
}
.sidebar__toggle:hover[b-fki0z2rnep] {
    background: var(--color-primary-light);
    color: var(--color-primary);
}
.sidebar__toggle-icon[b-fki0z2rnep] {
    transition: transform 300ms ease;
    font-size: 20px;
}
.sidebar__toggle-icon--rotated[b-fki0z2rnep] { transform: rotate(180deg); }

.sidebar__menu[b-fki0z2rnep] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.5rem;
}

.sidebar__footer[b-fki0z2rnep] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    border-top: 1px solid var(--color-border);
    flex-shrink: 0;
}
.sidebar__version[b-fki0z2rnep] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    background: var(--color-bg);
    padding: 2px 10px;
    border-radius: 8px;
    white-space: nowrap;
}
.sidebar__info-icon[b-fki0z2rnep] {
    font-size: 18px;
    color: var(--color-text-secondary);
}

/* ── Área principal + topbar ────────────────────────────────────────────── */
.layout__main[b-fki0z2rnep] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.topbar[b-fki0z2rnep] {
    display: flex;
    align-items: center;
    gap: 12px;
    height: var(--topbar-height);
    padding: 0 16px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
    z-index: 40;
}
.topbar__title[b-fki0z2rnep] {
    font-weight: 700; color: var(--color-primary);
    min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar__spacer[b-fki0z2rnep] { flex: 1; }

.topbar__menu-btn[b-fki0z2rnep] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: var(--color-bg);
    border-radius: 8px;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 200ms, color 200ms;
}
.topbar__menu-btn:hover[b-fki0z2rnep] {
    background: var(--color-border);
    color: var(--color-text);
}

@keyframes dropdown-in-b-fki0z2rnep {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Menú de perfil ─────────────────────────────────────────────────────── */
.topbar__profile[b-fki0z2rnep] { position: relative; cursor: pointer; flex-shrink: 0; }

.topbar__avatar[b-fki0z2rnep] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    transition: box-shadow 200ms;
    overflow: hidden;
}
.topbar__avatar:hover[b-fki0z2rnep] { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }
.topbar__avatar-icon[b-fki0z2rnep] { font-size: 20px; color: var(--color-text-secondary); }
.topbar__status-dot[b-fki0z2rnep] {
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 10px;
    background: var(--color-success);
    border: 2px solid var(--color-surface);
    border-radius: 50%;
}

.profile-dropdown[b-fki0z2rnep] {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    width: 260px;
    max-width: calc(100vw - 24px);
    background: var(--color-surface);
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
    border: 1px solid var(--color-border);
    z-index: 50;
    overflow: hidden;
    animation: dropdown-in-b-fki0z2rnep 150ms ease-out;
}
.profile-dropdown__header[b-fki0z2rnep] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    border-bottom: 1px solid var(--color-border);
}
.profile-dropdown__avatar[b-fki0z2rnep] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.profile-dropdown__avatar .material-symbols-outlined[b-fki0z2rnep] {
    font-size: 22px;
    color: var(--color-text-secondary);
}
.profile-dropdown__info[b-fki0z2rnep] { min-width: 0; }
.profile-dropdown__name[b-fki0z2rnep] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.profile-dropdown__email[b-fki0z2rnep] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin: 2px 0 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.profile-dropdown__role[b-fki0z2rnep] {
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    margin: 4px 0 0 0;
}
.profile-dropdown__role strong[b-fki0z2rnep] { color: var(--color-text); }
.profile-dropdown__company[b-fki0z2rnep] {
    font-size: 0.7rem;
    color: var(--color-primary);
    margin: 3px 0 0 0;
    font-weight: 500;
}

.profile-dropdown__companies[b-fki0z2rnep] {
    padding: 8px 14px;
    border-bottom: 1px solid var(--color-border);
}
.profile-dropdown__section-title[b-fki0z2rnep] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    margin: 0 0 6px 0;
}
.profile-dropdown__company-item[b-fki0z2rnep] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 150ms;
}
.profile-dropdown__company-item:hover[b-fki0z2rnep] { background: var(--color-bg); }
.profile-dropdown__company-item--active[b-fki0z2rnep] { background: var(--color-primary-light); }
.profile-dropdown__company-item--active .material-symbols-outlined[b-fki0z2rnep] { color: var(--color-primary); }
.profile-dropdown__company-name[b-fki0z2rnep] {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-text);
    display: block;
}
.profile-dropdown__company-role[b-fki0z2rnep] {
    font-size: 0.65rem;
    color: var(--color-text-secondary);
    display: block;
}

.profile-dropdown__menu[b-fki0z2rnep] {
    list-style: none;
    margin: 0;
    padding: 8px;
}
.profile-dropdown__item[b-fki0z2rnep] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 150ms, color 150ms;
}
.profile-dropdown__item:hover[b-fki0z2rnep] {
    background: var(--color-bg);
    color: var(--color-text);
}
.profile-dropdown__item .material-symbols-outlined[b-fki0z2rnep] { font-size: 18px; }
/* «Cerrar sesión» va tras el bloque «Este dispositivo»: una línea los separa. */
.profile-dropdown__item--sep[b-fki0z2rnep] { margin-top: 4px; border-top: 1px solid var(--color-border); border-radius: 0 0 8px 8px; }

/* Scrim invisible para cerrar dropdowns al hacer click fuera.
   z-index 35: por encima del contenido y del sidebar (30) pero por DEBAJO de la
   topbar (40). Los dropdowns viven dentro del contexto de apilamiento de la
   topbar, así que quedan por encima del scrim y siguen siendo clicables; un
   click en el resto de la app cae en el scrim y cierra los menús. */
.dropdown-scrim[b-fki0z2rnep] {
    position: fixed;
    inset: 0;
    z-index: 35;
    background: transparent;
}

/* ── Contenido ──────────────────────────────────────────────────────────── */
.layout__content[b-fki0z2rnep] {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-content);
    /* La barra inferior crece con la zona segura del iPhone: el contenido también. */
    padding-bottom: calc(var(--bottomnav-height) + env(safe-area-inset-bottom, 0px) + var(--space-content));
    container-type: inline-size;
    container-name: content;
}

/* ── Navegación inferior (móvil/tablet) ─────────────────────────────────── */
.bottomnav[b-fki0z2rnep] {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    /* La zona segura se SUMA al alto: con border-box, restarla de los 56 px
       aplastaba iconos y etiquetas en los iPhone con barra de inicio. */
    height: calc(var(--bottomnav-height) + env(safe-area-inset-bottom, 0px));
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    z-index: 40;
    overflow-x: hidden;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bottomnav__item[b-fki0z2rnep] {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    text-decoration: none;
    cursor: pointer;
    transition: color 200ms;
    padding: 4px 0;
    font-family: inherit;
}
.bottomnav__item:hover[b-fki0z2rnep] { color: var(--color-primary); text-decoration: none; }
.bottomnav__item--active[b-fki0z2rnep] { color: var(--color-primary); }
.bottomnav__item--active .material-symbols-outlined[b-fki0z2rnep] {
    font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;
}
.bottomnav__item .material-symbols-outlined[b-fki0z2rnep] { font-size: 22px; }
.bottomnav__label[b-fki0z2rnep] {
    font-size: 10px; font-weight: 500; line-height: 1.15;
    /* Cinco huecos en 358 px dan ~70 px por etiqueta: si una no cabe, puntos suspensivos
       en vez de invadir la de al lado. */
    max-width: 100%; padding: 0 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bottomnav__item--active .bottomnav__label[b-fki0z2rnep] { font-weight: 600; }

/* ── Menú móvil (offcanvas) ─────────────────────────────────────────────── */
.mobile-overlay[b-fki0z2rnep] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 80;
    animation: fade-in-b-fki0z2rnep 200ms ease;
}
@keyframes fade-in-b-fki0z2rnep { from { opacity: 0; } to { opacity: 1; } }

.mobile-menu[b-fki0z2rnep] {
    position: fixed;
    top: 0; left: 0;
    width: min(85vw, 320px);
    height: 100%;
    height: var(--app-100vh, 100%);
    background: var(--color-surface);
    z-index: 90;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    animation: slide-in-left-b-fki0z2rnep 250ms ease-out;
}
@keyframes slide-in-left-b-fki0z2rnep {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}

.mobile-menu__header[b-fki0z2rnep] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}
.mobile-menu__logo-img[b-fki0z2rnep] {
    flex: 0 1 auto;
    min-width: 0;
    max-width: calc(100% - 44px);   /* el botón de cerrar siempre a la vista */
    height: 38px;
    width: auto;
    object-fit: contain;
    object-position: left center;
    border-radius: 6px;
    margin-right: 8px;
}
.mobile-menu__close[b-fki0z2rnep] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: 8px;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 200ms, transform 200ms;
    flex-shrink: 0;
}
.mobile-menu__close:hover[b-fki0z2rnep] {
    background: var(--color-bg);
    transform: rotate(90deg);
}

.mobile-menu__user[b-fki0z2rnep] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}
.mobile-menu__user-avatar[b-fki0z2rnep] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--color-border);
}
.mobile-menu__user-avatar .material-symbols-outlined[b-fki0z2rnep] {
    font-size: 22px;
    color: var(--color-text-secondary);
}
.mobile-menu__user-info[b-fki0z2rnep] { min-width: 0; }
.mobile-menu__user-name[b-fki0z2rnep] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
    overflow-wrap: anywhere;
}
.mobile-menu__user-email[b-fki0z2rnep] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin: 2px 0 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mobile-menu__user-company[b-fki0z2rnep] {
    font-size: 0.7rem;
    color: var(--color-primary);
    margin: 3px 0 0 0;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.mobile-menu__companies[b-fki0z2rnep] {
    padding: 8px 20px 12px;
    border-bottom: 1px solid var(--color-border);
}
.mobile-menu__section-title[b-fki0z2rnep] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    margin: 0 0 6px 0;
}
.mobile-menu__company-item[b-fki0z2rnep] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--color-text);
    transition: background 150ms;
    font-family: inherit;
}
.mobile-menu__company-item:hover[b-fki0z2rnep] { background: var(--color-bg); }
.mobile-menu__company-item--active[b-fki0z2rnep] {
    background: var(--color-primary-light);
    font-weight: 600;
}
.mobile-menu__company-item--active .material-symbols-outlined[b-fki0z2rnep] { color: var(--color-primary); }
.mobile-menu__company-role[b-fki0z2rnep] {
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    margin-left: auto;
}

.mobile-menu__nav[b-fki0z2rnep] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 8px 12px;
}
.mobile-menu__footer[b-fki0z2rnep] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    border-top: 1px solid var(--color-border);
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    flex-shrink: 0;
}
.mobile-menu__logout[b-fki0z2rnep] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    background: transparent;
    color: var(--color-danger);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 8px;
    font-family: inherit;
    transition: background 150ms;
}
.mobile-menu__logout:hover[b-fki0z2rnep] { background: rgba(204, 51, 51, 0.08); }
.mobile-menu__logout .material-symbols-outlined[b-fki0z2rnep] { font-size: 18px; }
.mobile-menu__version[b-fki0z2rnep] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

/* ── Splash de carga ────────────────────────────────────────────────────── */
.app-splash[b-fki0z2rnep] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    height: var(--app-100vh);
}
.app-splash__logo[b-fki0z2rnep] { height: 56px; border-radius: 8px; }
.app-splash__spinner[b-fki0z2rnep] {
    width: 32px; height: 32px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-fki0z2rnep 0.8s linear infinite;
}
@keyframes spin-b-fki0z2rnep { to { transform: rotate(360deg); } }

/* ── Breakpoints ────────────────────────────────────────────────────────── */
@media (min-width: 992px) {
    .sidebar[b-fki0z2rnep] { display: flex; }
    .topbar__menu-btn[b-fki0z2rnep] { display: none; }
    .bottomnav[b-fki0z2rnep] { display: none; }
    .mobile-menu[b-fki0z2rnep], .mobile-overlay[b-fki0z2rnep] { display: none !important; }
    .layout__content[b-fki0z2rnep] { padding-bottom: var(--space-content); }
}

/* Tablet horizontal / desktop pequeño: auto-colapsa el sidebar. */
@media (min-width: 992px) and (max-width: 1279.98px) {
    .sidebar[b-fki0z2rnep] { width: var(--sidebar-collapsed); }
    .sidebar__header[b-fki0z2rnep] { padding: 0 8px; }
    .sidebar__logo-img[b-fki0z2rnep] { flex: none; height: 34px; width: 44px; }
    .sidebar__toggle[b-fki0z2rnep], .sidebar__version[b-fki0z2rnep] { display: none; }
}

@media (min-width: 1440px) {
    .sidebar:not(.sidebar--collapsed)[b-fki0z2rnep] { width: var(--sidebar-width-xl); }
}

@media (max-width: 991.98px) {
    .topbar[b-fki0z2rnep] { position: sticky; top: 0; }
}

/* En móvil estrecho el título de la topbar cede espacio a los iconos. */
@media (max-width: 400px) {
    .topbar__title[b-fki0z2rnep] { display: none; }
}

/* Móvil: menos hueco entre iconos de la topbar (menú + IA + ayuda + campana + perfil
   caben así hasta en 320 px) y sin margen lateral sobrante. */
@media (max-width: 575.98px) {
    .topbar[b-fki0z2rnep] { gap: 4px; padding: 0 12px; }
}
/* /Layout/NavMenu.razor.rz.scp.css */
/* ── Grupos de menú (réplica del CRM) ─────────────────────────────────────── */
.menu-group[b-ppc6b1k77p] {
    padding: 8px 8px 0;
}

.menu-group__label[b-ppc6b1k77p] {
    display: block;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    opacity: 0.6;
    padding: 4px 12px 6px;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.menu-separator[b-ppc6b1k77p] {
    border: none;
    border-top: 1px dashed var(--color-border);
    margin: 4px 16px;
}

/* ── Skeleton de carga ────────────────────────────────────────────────────── */
.menu-skeleton[b-ppc6b1k77p] {
    padding: 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.menu-skeleton__item[b-ppc6b1k77p] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
}
.menu-skeleton__icon[b-ppc6b1k77p] {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background: var(--color-border);
    opacity: 0.5;
    animation: skeleton-pulse-b-ppc6b1k77p 1.2s ease-in-out infinite;
}
.menu-skeleton__label[b-ppc6b1k77p] {
    height: 14px;
    width: 100px;
    border-radius: 4px;
    background: var(--color-border);
    opacity: 0.4;
    animation: skeleton-pulse-b-ppc6b1k77p 1.2s ease-in-out infinite;
    animation-delay: 0.1s;
}
@keyframes skeleton-pulse-b-ppc6b1k77p {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

/* ── Auto-colapsado en tablet horizontal / desktop pequeño (992–1279.98 px) ── */
@media (min-width: 992px) and (max-width: 1279.98px) {
    .menu-group[b-ppc6b1k77p] {
        padding: 4px 6px 0;
    }
    .menu-group__label[b-ppc6b1k77p],
    .menu-skeleton__label[b-ppc6b1k77p] {
        display: none;
    }
    .menu-separator[b-ppc6b1k77p] {
        margin: 4px 8px;
    }
}
/* /Layout/NavMenuItem.razor.rz.scp.css */
/* ── Ítem de menú (réplica del CRM) ─────────────────────────────────────── */
.menu-item[b-c18axzn1wj] {
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 12px;
    border-radius: 8px;
    color: var(--color-text-secondary);
    text-decoration: none;
    cursor: pointer;
    transition: background 150ms, color 150ms;
    position: relative;
}
.menu-item:hover[b-c18axzn1wj] {
    background: var(--color-bg);
    color: var(--color-text);
    text-decoration: none;
}

/* NavLink añade la clase `active` a la ruta actual. */
.menu-item.active[b-c18axzn1wj],
.menu-item.active:hover[b-c18axzn1wj] {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.menu-item__icon[b-c18axzn1wj] {
    font-size: 20px;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.menu-item.active .menu-item__icon[b-c18axzn1wj] {
    color: var(--color-primary);
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}

.menu-item__label[b-c18axzn1wj] {
    min-width: 0;   /* sin él la elipsis no actúa en un hijo flex y el texto se corta */
    margin-left: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Colapsado (prop Collapsed=true desde MainLayout) ─────────────────────── */
.menu-item--collapsed[b-c18axzn1wj] {
    justify-content: center;
    padding: 0 10px;
}
.menu-item--collapsed .menu-item__label[b-c18axzn1wj] {
    display: none;
}

/* ── Auto-colapsado en tablet horizontal / desktop pequeño (992–1279.98 px) ── */
@media (min-width: 992px) and (max-width: 1279.98px) {
    .menu-item[b-c18axzn1wj] {
        justify-content: center;
        padding: 0 10px;
    }
    .menu-item__label[b-c18axzn1wj] {
        display: none;
    }
}

/* ── Menú móvil (offcanvas, <992 px): la etiqueta larga se parte en dos líneas
   en vez de quedarse en puntos suspensivos: en el móvil no hay tooltip que la
   complete. ── */
@media (max-width: 991.98px) {
    .menu-item[b-c18axzn1wj] {
        height: auto;
        min-height: 40px;
        padding-top: 6px;
        padding-bottom: 6px;
    }
    .menu-item__label[b-c18axzn1wj] {
        white-space: normal;
        overflow-wrap: anywhere;
        line-height: 1.25;
    }
}
/* /Pages/Analytics/AiReportPanel.razor.rz.scp.css */
/* Panel «Informe con IA» y «Mis informes» de /indicadores. Nada de esto se imprime
   (.no-print en el marcado): lo que se lleva al comité es el PDF.
   El acento de IA es un degradado sutil del azul corporativo al cobre del acento, sin
   colores nuevos: la paleta Saphir manda también aquí. */

/* ── Panel ───────────────────────────────────────────────────────────────── */

.ai[b-71xo2xldz3] {
    position: relative;
    margin-bottom: 1rem;
    padding: 1.1rem 1.2rem 1.15rem;
    border-radius: 16px;
    border: 1px solid transparent;
    background:
        linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
        linear-gradient(120deg, rgba(45, 90, 142, .55), rgba(201, 147, 90, .55)) border-box;
    box-shadow: 0 14px 34px -24px rgba(45, 90, 142, .55);
    overflow: hidden;
}

/* Halo de fondo: da el «esto es otra cosa» sin quitar legibilidad. */
.ai[b-71xo2xldz3]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(60% 120% at 0% 0%, rgba(45, 90, 142, .07), transparent 60%),
        radial-gradient(50% 110% at 100% 0%, rgba(201, 147, 90, .10), transparent 60%);
}

.ai > *[b-71xo2xldz3] { position: relative; min-width: 0; }

.ai__head[b-71xo2xldz3] {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    margin-bottom: .9rem;
}

.ai__badge[b-71xo2xldz3] {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    color: #fff;
    font-size: 1.35rem !important;
    box-shadow: 0 6px 16px -8px rgba(45, 90, 142, .8);
}

.ai__titles[b-71xo2xldz3] { flex: 1 1 auto; min-width: 0; }
.ai__title[b-71xo2xldz3] { font-size: 1.1rem; font-weight: 700; margin: 0; }
.ai__subtitle[b-71xo2xldz3] { margin: .15rem 0 0; font-size: .82rem; color: var(--color-text-secondary); line-height: 1.4; }

.ai__quota[b-71xo2xldz3] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .74rem;
    font-weight: 700;
    padding: .25rem .6rem .25rem .45rem;
    border-radius: 20px;
    background: #fbf4ec;
    color: #9a6a35;
    border: 1px solid rgba(201, 147, 90, .45);
    white-space: nowrap;
}

.ai__quota .material-symbols-outlined[b-71xo2xldz3] { font-size: 1rem; }

/* ── Encargo ─────────────────────────────────────────────────────────────── */

.ai__label[b-71xo2xldz3] {
    display: block;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-secondary);
    font-weight: 600;
    margin-bottom: .3rem;
}

.ai__prompt[b-71xo2xldz3] {
    resize: vertical;
    min-height: 96px;
    line-height: 1.45;
    background: rgba(255, 255, 255, .9);
}

.ai__prompt-foot[b-71xo2xldz3] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .5rem;
}

.ai__examples[b-71xo2xldz3] { display: flex; flex-wrap: wrap; gap: .4rem; }

.ai__example[b-71xo2xldz3] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .76rem;
    font-weight: 600;
    padding: .25rem .65rem .25rem .45rem;
    border-radius: 20px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.ai__example .material-symbols-outlined[b-71xo2xldz3] { font-size: 1rem; color: var(--color-primary); }

.ai__example:hover:not(:disabled)[b-71xo2xldz3] {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
    transform: translateY(-1px);
}

.ai__example:disabled[b-71xo2xldz3] { opacity: .6; cursor: default; }

.ai__counter[b-71xo2xldz3] {
    flex: 0 0 auto;
    font-size: .72rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
    padding-top: .3rem;
}

.ai__counter.is-near[b-71xo2xldz3] { color: var(--color-warning); font-weight: 700; }

.ai__options[b-71xo2xldz3] {
    display: grid;
    grid-template-columns: minmax(180px, 260px) minmax(130px, 170px) minmax(0, 1fr) auto;
    align-items: end;
    gap: .8rem 1.2rem;
    margin-top: .9rem;
}

.ai__field[b-71xo2xldz3] { margin: 0; }

.ai__field label[b-71xo2xldz3] {
    display: block;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-secondary);
    font-weight: 600;
    margin-bottom: .25rem;
}

.ai__check[b-71xo2xldz3] {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .85rem;
    cursor: pointer;
    padding-bottom: .2rem;
}

.ai__check input[b-71xo2xldz3] { margin-top: .25rem; flex: 0 0 auto; }
.ai__check > span[b-71xo2xldz3] { display: flex; flex-direction: column; }

.ai__submit[b-71xo2xldz3] { display: flex; gap: .5rem; justify-content: flex-end; }

.ai__go[b-71xo2xldz3] {
    background: linear-gradient(120deg, var(--color-primary), #3d6fa6 60%, #8a7a6a) !important;
    border-color: transparent !important;
    box-shadow: 0 8px 20px -12px rgba(45, 90, 142, .9);
}

.ai__go:hover:not(:disabled)[b-71xo2xldz3] { filter: brightness(1.08); }

.ai__msg[b-71xo2xldz3] { margin: .8rem 0 0; }

/* ── Seguimiento ─────────────────────────────────────────────────────────── */

.ai__ask[b-71xo2xldz3] {
    display: flex;
    gap: .4rem;
    margin: 0 0 1rem;
    font-size: .86rem;
    color: var(--color-text);
    line-height: 1.45;
    padding: .55rem .75rem;
    border-radius: 10px;
    background: var(--color-bg);
    white-space: pre-line;
    max-height: 7.5rem;
    overflow: auto;
    overflow-wrap: anywhere;
}

.ai__ask .material-symbols-outlined[b-71xo2xldz3] { color: var(--color-accent); font-size: 1.15rem; flex: 0 0 auto; }

.stepper[b-71xo2xldz3] {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    counter-reset: step;
}

.stepper__step[b-71xo2xldz3] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    text-align: center;
}

/* Línea entre pasos: de la mitad de este al centro del siguiente. */
.stepper__step:not(:last-child)[b-71xo2xldz3]::after {
    content: "";
    position: absolute;
    top: 17px;
    left: calc(50% + 20px);
    right: calc(-50% + 20px);
    height: 2px;
    border-radius: 2px;
    background: var(--color-border);
    transition: background .3s ease;
}

.stepper__step.is-done:not(:last-child)[b-71xo2xldz3]::after {
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}

.stepper__dot[b-71xo2xldz3] {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    transition: all .25s ease;
}

.stepper__dot .material-symbols-outlined[b-71xo2xldz3] { font-size: 1.15rem; }

.stepper__label[b-71xo2xldz3] { font-size: .74rem; font-weight: 600; color: var(--color-text-secondary); overflow-wrap: anywhere; hyphens: auto; }

.is-done .stepper__dot[b-71xo2xldz3] {
    border-color: transparent;
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    color: #fff;
}

.is-done .stepper__label[b-71xo2xldz3] { color: var(--color-text); }

.is-active .stepper__dot[b-71xo2xldz3] {
    border-color: var(--color-primary);
    color: var(--color-primary);
    box-shadow: 0 0 0 5px rgba(45, 90, 142, .14);
    animation: pulse-b-71xo2xldz3 1.6s ease-in-out infinite;
}

.is-active .stepper__label[b-71xo2xldz3] { color: var(--color-primary); }

.is-failed .stepper__dot[b-71xo2xldz3] { border-color: var(--color-danger); background: var(--color-danger); color: #fff; }
.is-failed .stepper__label[b-71xo2xldz3] { color: var(--color-danger); }

.spin-slow[b-71xo2xldz3] { animation: spin 2.4s linear infinite; }

@keyframes pulse-b-71xo2xldz3 {
    50% { box-shadow: 0 0 0 9px rgba(45, 90, 142, .05); }
}

.ai__hint[b-71xo2xldz3] { margin: .9rem 0 0; font-size: .8rem; color: var(--color-text-secondary); text-align: center; }

/* ── Plan ────────────────────────────────────────────────────────────────── */

.plan[b-71xo2xldz3] {
    margin-top: 1rem;
    padding: .95rem 1rem;
    border-radius: 14px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    animation: rise-b-71xo2xldz3 .4s ease both;
}

.plan--edit[b-71xo2xldz3] { border-style: dashed; border-color: var(--color-primary); }

.plan__eyebrow[b-71xo2xldz3] {
    margin: 0;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    color: var(--color-primary);
}

.plan__title[b-71xo2xldz3] { font-size: 1.15rem; font-weight: 700; margin: .1rem 0 .5rem; overflow-wrap: anywhere; }

.plan__meta[b-71xo2xldz3] { margin: 0; display: flex; flex-wrap: wrap; gap: .35rem; }

.meta-chip[b-71xo2xldz3] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .74rem;
    padding: .2rem .55rem;
    border-radius: 20px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text);
}

.meta-chip .material-symbols-outlined[b-71xo2xldz3] { font-size: .95rem; color: var(--color-primary); }

.plan__sections[b-71xo2xldz3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
    gap: .7rem;
    margin-top: .9rem;
}

.plan__section[b-71xo2xldz3] {
    padding: .65rem .75rem;
    border-radius: 12px;
    background: var(--color-bg);
}

.plan__section--edit[b-71xo2xldz3] { display: flex; flex-direction: column; gap: .5rem; background: var(--color-primary-light); }

.plan__section-title[b-71xo2xldz3] {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .86rem;
    font-weight: 700;
    margin: 0 0 .45rem;
}

.plan__num[b-71xo2xldz3] {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    font-size: .7rem;
    background: var(--color-primary);
    color: #fff;
    flex: 0 0 auto;
}

.plan__section-row[b-71xo2xldz3] { display: flex; gap: .4rem; align-items: center; }
.plan__heading-input[b-71xo2xldz3] { font-weight: 700; font-size: .86rem; flex: 1 1 auto; min-width: 0; }
.plan__add[b-71xo2xldz3] { font-size: .8rem; }

.plan__add-section[b-71xo2xldz3] {
    align-self: center;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: .2rem;
}

.chips[b-71xo2xldz3] { display: flex; flex-wrap: wrap; gap: .35rem; }

.chip[b-71xo2xldz3] {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    font-size: .76rem;
    padding: .2rem .6rem;
    border-radius: 20px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    line-height: 1.3;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.chip--removable[b-71xo2xldz3] { padding-right: .2rem; }

.chip__x[b-71xo2xldz3] {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 0;
}

.chip__x .material-symbols-outlined[b-71xo2xldz3] { font-size: .9rem; }
.chip__x:hover[b-71xo2xldz3] { background: rgba(204, 51, 51, .12); color: var(--color-danger); }

.plan__na[b-71xo2xldz3] {
    display: flex;
    gap: .5rem;
    margin-top: .8rem;
    padding: .55rem .75rem;
    border-radius: 8px;
    border-left: 3px solid var(--color-warning);
    background: rgba(224, 155, 48, .08);
    font-size: .8rem;
    line-height: 1.4;
}

.plan__na .material-symbols-outlined[b-71xo2xldz3] { color: var(--color-warning); font-size: 1.1rem; flex: 0 0 auto; }

.edit-grid[b-71xo2xldz3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
    gap: .7rem 1rem;
    margin-top: .6rem;
}

.edit-grid__wide[b-71xo2xldz3] { grid-column: 1 / -1; }
.edit-grid .field[b-71xo2xldz3] { margin: 0; }

.edit-grid label[b-71xo2xldz3] {
    display: block;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-secondary);
    font-weight: 600;
    margin-bottom: .25rem;
}

.ai__actions[b-71xo2xldz3] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: 1rem;
}

.ai__new[b-71xo2xldz3] { margin-left: auto; display: inline-flex; align-items: center; gap: .15rem; }

.ai__disclaimer[b-71xo2xldz3] {
    display: flex;
    gap: .4rem;
    margin: .8rem 0 0;
    font-size: .76rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.ai__disclaimer .material-symbols-outlined[b-71xo2xldz3] { font-size: 1.05rem; color: var(--color-accent); flex: 0 0 auto; }

.btn-link[b-71xo2xldz3] {
    background: none;
    border: 0;
    padding: 0 .25rem;
    color: var(--color-primary);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
}

.btn-link:hover:not(:disabled)[b-71xo2xldz3] { text-decoration: underline; }
.btn-link:disabled[b-71xo2xldz3] { opacity: .6; cursor: progress; }
.btn-link .material-symbols-outlined[b-71xo2xldz3] { font-size: 1.05rem; }

/* ── Mis informes ────────────────────────────────────────────────────────── */

.mine[b-71xo2xldz3] {
    margin-bottom: 1.25rem;
    padding: .9rem 1.1rem;
    border-radius: 14px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
}

.mine__head[b-71xo2xldz3] { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; margin-bottom: .5rem; }
.mine__head .ai__notice[b-71xo2xldz3] { margin-left: auto; }

.mine__title[b-71xo2xldz3] {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .95rem;
    font-weight: 700;
    margin: 0;
}

.mine__title .material-symbols-outlined[b-71xo2xldz3] { font-size: 1.15rem; color: var(--color-primary); }

.count-pill[b-71xo2xldz3] {
    font-size: .72rem;
    font-weight: 700;
    padding: .1rem .5rem;
    border-radius: 20px;
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.mine__empty[b-71xo2xldz3] { margin: .25rem 0; font-size: .84rem; }

.mine__list[b-71xo2xldz3] { list-style: none; margin: 0; padding: 0; }

.mine__row[b-71xo2xldz3] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .75rem;
    padding: .45rem .35rem;
    border-top: 1px solid var(--color-border);
    border-radius: 8px;
}

.mine__row:first-child[b-71xo2xldz3] { border-top: 0; }
.mine__row.is-current[b-71xo2xldz3] { background: var(--color-primary-light); }

.mine__main[b-71xo2xldz3] {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
    background: none;
    border: 0;
    padding: 0;
    text-align: left;
    cursor: pointer;
    color: inherit;
}

.mine__main:hover .mine__name[b-71xo2xldz3] { color: var(--color-primary); }

.mine__icon[b-71xo2xldz3] {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--color-bg);
    color: var(--color-primary);
    font-size: 1.1rem !important;
    flex: 0 0 auto;
}

.mine__text[b-71xo2xldz3] { display: flex; flex-direction: column; min-width: 0; }

.mine__name[b-71xo2xldz3] {
    font-size: .86rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mine__meta[b-71xo2xldz3] { font-size: .74rem; color: var(--color-text-secondary); }

.status[b-71xo2xldz3] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .7rem;
    font-weight: 700;
    padding: .15rem .55rem;
    border-radius: 20px;
    white-space: nowrap;
}

.status .material-symbols-outlined[b-71xo2xldz3] { font-size: .85rem; }
.status--ok[b-71xo2xldz3] { background: rgba(46, 158, 90, .14); color: var(--color-success); }
.status--error[b-71xo2xldz3] { background: rgba(204, 51, 51, .12); color: var(--color-danger); }
.status--busy[b-71xo2xldz3] { background: var(--color-primary-light); color: var(--color-primary); }

.mine__actions[b-71xo2xldz3] { display: inline-flex; align-items: center; gap: .2rem; }

.mine__confirm[b-71xo2xldz3] {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    font-weight: 600;
}

.mine__btn[b-71xo2xldz3] { padding: .2rem .6rem !important; font-size: .78rem !important; min-height: 0 !important; }

.mine__err[b-71xo2xldz3] { margin-top: .5rem; }

@keyframes rise-b-71xo2xldz3 { from { opacity: 0; transform: translateY(6px); } }

@media (prefers-reduced-motion: reduce) {
    .plan[b-71xo2xldz3], .is-active .stepper__dot[b-71xo2xldz3], .spin-slow[b-71xo2xldz3] { animation: none; }
}

/* ── Móvil: todo en una columna ──────────────────────────────────────────── */

@media (max-width: 860px) {
    .ai__options[b-71xo2xldz3] { grid-template-columns: 1fr; align-items: stretch; }
    .ai__submit[b-71xo2xldz3] { justify-content: stretch; }
    .ai__submit > *[b-71xo2xldz3] { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 768px) {
    .ai[b-71xo2xldz3] { padding: .95rem .9rem 1rem; }
    .ai__head[b-71xo2xldz3] { flex-wrap: wrap; }
    .ai__titles[b-71xo2xldz3] { flex: 1 1 calc(100% - 42px - .85rem); }
    .ai__quota[b-71xo2xldz3] { order: 3; margin-left: calc(42px + .85rem); }
    .ai__prompt-foot[b-71xo2xldz3] { flex-direction: column-reverse; align-items: stretch; }
    .ai__counter[b-71xo2xldz3] { align-self: flex-end; padding-top: 0; }
    .stepper__label[b-71xo2xldz3] { font-size: .64rem; }
    .stepper__dot[b-71xo2xldz3] { width: 30px; height: 30px; }
    .stepper__step:not(:last-child)[b-71xo2xldz3]::after { top: 14px; left: calc(50% + 17px); right: calc(-50% + 17px); }
    .plan__sections[b-71xo2xldz3] { grid-template-columns: 1fr; }
    .ai__actions > *[b-71xo2xldz3] { flex: 1 1 100%; justify-content: center; }
    .ai__new[b-71xo2xldz3] { margin-left: 0; }
    .mine__row[b-71xo2xldz3] { grid-template-columns: minmax(0, 1fr) auto; }
    .mine__row .status[b-71xo2xldz3] { grid-column: 1; justify-self: start; margin-left: calc(32px + .6rem); }
    .mine__actions[b-71xo2xldz3] { grid-row: 1 / span 2; grid-column: 2; }
    .mine[b-71xo2xldz3] { padding: .8rem .8rem; }
    .plan[b-71xo2xldz3] { padding: .85rem .75rem; }
}

/* iPhone (≈ 358 px de contenido): cinco pasos de ~60 px; la etiqueta se parte en vez
   de empujar la rejilla, y el aviso de IA de «Mis informes» baja a su propia fila. */
@media (max-width: 575.98px) {
    .stepper__label[b-71xo2xldz3] { font-size: .6rem; }
    .mine__head .ai__notice[b-71xo2xldz3] { margin-left: 0; flex: 1 1 100%; }
    .mine__meta[b-71xo2xldz3] { overflow-wrap: anywhere; }
}

/* Casilla del aviso de IA, junto al botón de descarga. */
.ai__notice[b-71xo2xldz3] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    margin-right: .5rem;
}
/* /Pages/Analytics/Kpis.razor.rz.scp.css */
/* Cuadro de indicadores. Tres zonas: los INFORMES PREPARADOS y los CONTROLES (que no
   se imprimen) y el INFORME (que es el documento). Lo que se lleva al comité es el
   informe, no la pantalla con la que se armó. Los gráficos tienen sus estilos en
   components.css (bloque «Visualización de datos»). */

.section-title[b-vas6vy9wvr] {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: var(--color-text);
}

.section-title .material-symbols-outlined[b-vas6vy9wvr] {
    font-size: 1.15rem;
    color: var(--color-primary);
}

.section-title--toggle[b-vas6vy9wvr] {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.chevron[b-vas6vy9wvr] { transition: transform .2s ease; color: var(--color-text-secondary) !important; }
.chevron.is-open[b-vas6vy9wvr] { transform: rotate(180deg); }

.count-pill[b-vas6vy9wvr] {
    font-size: .72rem;
    font-weight: 700;
    padding: .1rem .5rem;
    border-radius: 20px;
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.btn-link[b-vas6vy9wvr] {
    background: none;
    border: 0;
    padding: 0 .25rem;
    color: var(--color-primary);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
}

.btn-link:hover[b-vas6vy9wvr] { text-decoration: underline; }

/* ── Informes preparados ─────────────────────────────────────────────────── */

.presets[b-vas6vy9wvr] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
    gap: .75rem;
    margin-bottom: 1rem;
}

.preset[b-vas6vy9wvr] {
    position: relative;
    display: flex;
    align-items: center;
    gap: .75rem;
    text-align: left;
    padding: .8rem .9rem;
    border-radius: 14px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.preset:hover:not(:disabled)[b-vas6vy9wvr] {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -12px rgba(45, 90, 142, .45);
    border-color: var(--viz-s3);
}

.preset.is-active[b-vas6vy9wvr] {
    border-color: var(--color-primary);
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-surface) 70%);
    box-shadow: 0 0 0 3px rgba(45, 90, 142, .12);
}

.preset:disabled[b-vas6vy9wvr] { opacity: .6; cursor: progress; }

.preset__icon[b-vas6vy9wvr] {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--viz-1), var(--color-primary-dark));
    color: #fff;
    font-size: 1.3rem !important;
}

.preset__text[b-vas6vy9wvr] { display: flex; flex-direction: column; min-width: 0; }
.preset__name[b-vas6vy9wvr] { font-weight: 700; font-size: .9rem; color: var(--color-text); }
.preset__desc[b-vas6vy9wvr] {
    font-size: .74rem;
    color: var(--color-text-secondary);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.preset__count[b-vas6vy9wvr] {
    position: absolute;
    top: .5rem;
    right: .6rem;
    font-size: .68rem;
    font-weight: 700;
    color: var(--color-text-secondary);
}

/* ── Configuración ───────────────────────────────────────────────────────── */

.setup[b-vas6vy9wvr] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 1rem 1.1rem;
    margin-bottom: 1.5rem;
}

.setup__filters[b-vas6vy9wvr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
    gap: .75rem 1rem;
    margin-bottom: 1rem;
}

.setup__filters .field[b-vas6vy9wvr] { margin: 0; }

.setup__filters label[b-vas6vy9wvr] {
    display: block;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-secondary);
    font-weight: 600;
    margin-bottom: .25rem;
}

/* Interruptor (ETT dentro o fuera de la plantilla). */
.switch[b-vas6vy9wvr] {
    display: inline-flex !important;
    align-items: center;
    gap: .55rem;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: .85rem !important;
    color: var(--color-text) !important;
    cursor: pointer;
    margin: .35rem 0 0 !important;
}

.switch input[b-vas6vy9wvr] { position: absolute; opacity: 0; pointer-events: none; }

.switch__track[b-vas6vy9wvr] {
    position: relative;
    width: 38px;
    height: 22px;
    border-radius: 11px;
    background: #d5d9e3;
    transition: background .2s ease;
    flex: 0 0 auto;
}

.switch__thumb[b-vas6vy9wvr] {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: transform .2s var(--viz-ease);
}

.switch input:checked + .switch__track[b-vas6vy9wvr] { background: var(--color-primary); }
.switch input:checked + .switch__track .switch__thumb[b-vas6vy9wvr] { transform: translateX(16px); }
.switch input:focus-visible + .switch__track[b-vas6vy9wvr] { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.setup__head[b-vas6vy9wvr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    border-top: 1px solid var(--color-border);
    padding-top: .85rem;
}

.setup__actions[b-vas6vy9wvr] { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Selector de indicadores: los grupos son los del catálogo del backend. */
.picker[b-vas6vy9wvr] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
    gap: .85rem 1.2rem;
    margin-top: .8rem;
}

.picker__group-head[b-vas6vy9wvr] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: .2rem;
    margin-bottom: .35rem;
}

.picker__group-title[b-vas6vy9wvr] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
    color: var(--color-text-secondary);
}

.picker__group-title .material-symbols-outlined[b-vas6vy9wvr] { font-size: 1rem; color: var(--color-primary); }

.picker__item[b-vas6vy9wvr] {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .15rem 0;
    font-size: .85rem;
    cursor: pointer;
}

.picker__item:hover .picker__label[b-vas6vy9wvr] { color: var(--color-primary); }

.picker__label[b-vas6vy9wvr] { line-height: 1.25; }

.tag[b-vas6vy9wvr] {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .1rem .4rem;
    border-radius: 20px;
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.tag--a3[b-vas6vy9wvr], .tag--slow[b-vas6vy9wvr] { border-color: var(--color-accent); color: #9a6a35; background: #fbf4ec; }

/* ── Carga ───────────────────────────────────────────────────────────────── */

.skeleton[b-vas6vy9wvr] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.skeleton__tile[b-vas6vy9wvr], .skeleton__card[b-vas6vy9wvr] {
    border-radius: 16px;
    background: linear-gradient(90deg, #eef0f5 25%, #f6f7fa 50%, #eef0f5 75%);
    background-size: 200% 100%;
    animation: shimmer-b-vas6vy9wvr 1.3s linear infinite;
}

.skeleton__tile[b-vas6vy9wvr] { height: 120px; }
.skeleton__card[b-vas6vy9wvr] { height: 300px; grid-column: span 2; }

@keyframes shimmer-b-vas6vy9wvr { to { background-position: -200% 0; } }

/* ── Informe ─────────────────────────────────────────────────────────────── */

.report[b-vas6vy9wvr] { transition: opacity .2s ease; }
.report.is-loading[b-vas6vy9wvr] { opacity: .55; pointer-events: none; }

.report__head[b-vas6vy9wvr] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1rem;
    border-radius: 16px;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(201, 147, 90, .12), transparent 55%),
        linear-gradient(135deg, var(--color-primary-light), var(--color-surface) 65%);
    border: 1px solid var(--color-border);
}

.report__eyebrow[b-vas6vy9wvr] {
    margin: 0;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    color: var(--color-primary);
}

.report__title[b-vas6vy9wvr] { font-size: 1.45rem; font-weight: 700; margin: .1rem 0 .5rem; }

.report__meta[b-vas6vy9wvr] { margin: 0; display: flex; flex-wrap: wrap; gap: .35rem; }

.meta-chip[b-vas6vy9wvr] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .74rem;
    padding: .2rem .55rem;
    border-radius: 20px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text);
}

.meta-chip .material-symbols-outlined[b-vas6vy9wvr] { font-size: .95rem; color: var(--color-primary); }
.meta-chip--quiet[b-vas6vy9wvr] { color: var(--color-text-secondary); background: transparent; }

.report__logo[b-vas6vy9wvr] { height: 40px; width: auto; border-radius: 6px; }

.report__unavailable[b-vas6vy9wvr] {
    font-size: .8rem;
    color: var(--color-text-secondary);
    background: var(--color-bg);
    border-left: 3px solid var(--color-warning);
    padding: .5rem .75rem;
    border-radius: 6px;
}

/* Cifras clave: número grande, variación y tendencia. */
.heroes[b-vas6vy9wvr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: .85rem;
    margin-bottom: 1.25rem;
}

.hero[b-vas6vy9wvr] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .9rem 1rem .4rem;
    border-radius: 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: 0 1px 2px rgba(26, 29, 43, .04), 0 8px 24px -16px rgba(45, 90, 142, .35);
    overflow: hidden;
    animation: rise-b-vas6vy9wvr .5s var(--viz-ease) both;
}

.hero:nth-child(2)[b-vas6vy9wvr] { animation-delay: .05s; }
.hero:nth-child(3)[b-vas6vy9wvr] { animation-delay: .1s; }
.hero:nth-child(4)[b-vas6vy9wvr] { animation-delay: .15s; }

.hero__label[b-vas6vy9wvr] { font-size: .76rem; font-weight: 600; color: var(--color-text-secondary); }
.hero__figure[b-vas6vy9wvr] { display: flex; align-items: baseline; gap: .35rem; }
.hero__value[b-vas6vy9wvr] { font-size: 2.1rem; font-weight: 700; line-height: 1.05; letter-spacing: -.01em; color: var(--color-text); }
.hero__unit[b-vas6vy9wvr] { font-size: .8rem; color: var(--color-text-secondary); }
.hero[b-vas6vy9wvr]  .viz-spark { margin: .2rem -1rem 0; width: calc(100% + 2rem); height: 44px; }

/* La variación va en NEUTRO a propósito: más altas es bueno y más bajas médicas no,
   y el portal no sabe de qué signo es cada indicador. Pintarla de verde o rojo sería
   opinar por el lector. */
.delta[b-vas6vy9wvr] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    font-size: .74rem;
    font-weight: 700;
    padding: .12rem .5rem .12rem .35rem;
    border-radius: 20px;
    background: var(--viz-s0);
    color: var(--color-text);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.delta .material-symbols-outlined[b-vas6vy9wvr] { font-size: 1rem; color: var(--color-text-secondary); }
.delta__base[b-vas6vy9wvr] { font-weight: 400; color: var(--color-text-secondary); margin-left: .25rem; }

.report__group[b-vas6vy9wvr] {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: .95rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 1.6rem 0 .7rem;
}

.report__group-icon[b-vas6vy9wvr] {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-size: 1.1rem !important;
}

.report__group-count[b-vas6vy9wvr] {
    font-size: .7rem;
    font-weight: 700;
    color: var(--color-text-secondary);
    padding: .05rem .45rem;
    border-radius: 20px;
    border: 1px solid var(--color-border);
}

.report__foot[b-vas6vy9wvr] {
    margin-top: 1.5rem;
    padding-top: .5rem;
    border-top: 1px solid var(--color-border);
    font-size: .72rem;
    color: var(--color-text-secondary);
}

.cards[b-vas6vy9wvr] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
    gap: 1rem;
}

.card[b-vas6vy9wvr] {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 1rem 1.1rem 1rem;
    break-inside: avoid;
    box-shadow: 0 1px 2px rgba(26, 29, 43, .04);
    transition: box-shadow .2s ease, transform .2s ease;
    animation: rise-b-vas6vy9wvr .5s var(--viz-ease) both;
    /* Elemento de rejilla: sin esto, un gráfico o una tabla anchos estiran la pista
       por encima del ancho de la pantalla en vez de quedarse dentro de la tarjeta. */
    min-width: 0;
}

.card:hover[b-vas6vy9wvr] { box-shadow: 0 14px 32px -18px rgba(45, 90, 142, .45); }

.card--wide[b-vas6vy9wvr] { grid-column: span 2; }

.card__head[b-vas6vy9wvr] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
}

.card__titles[b-vas6vy9wvr] { min-width: 0; }
.card__title[b-vas6vy9wvr] { font-size: .95rem; font-weight: 700; margin: 0; overflow-wrap: anywhere; }

.card__desc[b-vas6vy9wvr] {
    margin: .15rem 0 .6rem;
    font-size: .76rem;
    color: var(--color-text-secondary);
    line-height: 1.35;
}

/* El número es la respuesta; el gráfico es el porqué. */
.card__figure[b-vas6vy9wvr] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .7rem;
}

.card__value[b-vas6vy9wvr] {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.01em;
}

.card__unit[b-vas6vy9wvr] { font-size: .8rem; color: var(--color-text-secondary); }
.card__figure .delta[b-vas6vy9wvr] { margin-left: auto; align-self: center; }

.card__note[b-vas6vy9wvr] {
    display: flex;
    gap: .35rem;
    margin: .7rem 0 0;
    font-size: .74rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.card__note .material-symbols-outlined[b-vas6vy9wvr] { font-size: 1rem; color: var(--viz-axis); flex: 0 0 auto; }

.card__toggle[b-vas6vy9wvr] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-top: auto;
    padding-top: .6rem;
    align-self: flex-start;
}

.card__toggle .material-symbols-outlined[b-vas6vy9wvr] { font-size: 1.05rem; }

.split[b-vas6vy9wvr] {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .7rem;
    font-size: .74rem;
}

.split__title[b-vas6vy9wvr] {
    width: 100%;
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-text-secondary);
    font-weight: 700;
}

.split__item[b-vas6vy9wvr] {
    display: inline-flex;
    gap: .35rem;
    padding: .15rem .55rem;
    border-radius: 20px;
    background: var(--viz-s0);
    max-width: 100%;
}

.split__label[b-vas6vy9wvr] { color: var(--color-text-secondary); }
.split__value[b-vas6vy9wvr] { font-weight: 700; font-variant-numeric: tabular-nums; }

.table[b-vas6vy9wvr] { font-size: .8rem; margin-top: .5rem; }

@keyframes rise-b-vas6vy9wvr { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
    .hero[b-vas6vy9wvr], .card[b-vas6vy9wvr], .preset[b-vas6vy9wvr], .skeleton__tile[b-vas6vy9wvr], .skeleton__card[b-vas6vy9wvr] { animation: none; transition: none; }
}

/* ── Impresión ───────────────────────────────────────────────────────────── */

@media print {
    .report__head[b-vas6vy9wvr] { background: none; border: 0; border-bottom: 2px solid #000; border-radius: 0; padding: 0 0 .5rem; }
    .meta-chip[b-vas6vy9wvr] { border: 0; padding: 0 .4rem 0 0; }
    .hero[b-vas6vy9wvr], .card[b-vas6vy9wvr] { animation: none; box-shadow: none; border-color: #999; }

    /* Una tarjeta no se parte entre dos hojas: media gráfica en la página siguiente
       no es un informe, es un error de maquetación. */
    .heroes[b-vas6vy9wvr] { grid-template-columns: repeat(4, 1fr); }
    .cards[b-vas6vy9wvr] { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
    .card[b-vas6vy9wvr] { break-inside: avoid; page-break-inside: avoid; }
    .card--wide[b-vas6vy9wvr] { grid-column: span 2; }
    .card__value[b-vas6vy9wvr] { font-size: 1.5rem; }
    .report__group[b-vas6vy9wvr] { break-after: avoid; }
}

/* Con el menú lateral abierto la rejilla puede quedarse en UNA pista bastante por encima
   de 860 px; ahí «span 2» crearía una segunda columna implícita fuera de la pantalla.
   Por debajo de 1200 px como mucho caben dos, así que ocupar todas equivale a ocupar dos. */
@media screen and (max-width: 1199.98px) {
    .card--wide[b-vas6vy9wvr] { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
    .cards[b-vas6vy9wvr] { grid-template-columns: 1fr; }
    .card--wide[b-vas6vy9wvr] { grid-column: auto; }
    .skeleton[b-vas6vy9wvr] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .report__head[b-vas6vy9wvr] { flex-direction: column-reverse; align-items: flex-start; }
    .heroes[b-vas6vy9wvr] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero__value[b-vas6vy9wvr] { font-size: 1.6rem; }
    .hero__figure[b-vas6vy9wvr] { flex-wrap: wrap; }
}

@media (max-width: 575.98px) {
    .setup[b-vas6vy9wvr] { padding: .85rem .8rem; }
    .report__head[b-vas6vy9wvr] { padding: .9rem .85rem; }
    .report__title[b-vas6vy9wvr] { font-size: 1.2rem; }
    .card[b-vas6vy9wvr] { padding: .85rem .8rem; }
    .hero[b-vas6vy9wvr] { padding: .75rem .75rem .35rem; }
    .hero[b-vas6vy9wvr]  .viz-spark { margin: .2rem -.75rem 0; width: calc(100% + 1.5rem); }
    .hero__value[b-vas6vy9wvr] { font-size: 1.35rem; }
    .delta[b-vas6vy9wvr] { white-space: normal; }
    .skeleton[b-vas6vy9wvr] { grid-template-columns: minmax(0, 1fr); }
    .skeleton__card[b-vas6vy9wvr] { grid-column: auto; }
}
/* /Pages/Calendar/WorkCalendar.razor.rz.scp.css */
/* Calendario laboral. La hoja imita la que se cuelga del tablón (y la que sale en PDF):
   doce rejillas, leyenda con sus colores, cuadro resumen y notas al pie. Los colores de
   los días NO están aquí — los define RRHH en la leyenda y llegan como estilo en línea. */

.cal-picker[b-x0b6pmblhp] {
    min-width: 15rem;
}

/* ── La hoja ── */
.cal-sheet[b-x0b6pmblhp] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1.25rem;
}

.cal-title[b-x0b6pmblhp] {
    text-align: center;
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 1.25rem;
    color: var(--color-text);
}

/* Tres meses por fila en escritorio; en tablet dos y en móvil uno. Un calendario de
   doce columnas en un móvil no se lee: se prefiere hacer scroll vertical. */
.cal-months[b-x0b6pmblhp] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem 1.5rem;
}

.cal-month__name[b-x0b6pmblhp] {
    background: #4A1574;
    color: #fff;
    font-weight: 700;
    font-size: .82rem;
    text-align: center;
    padding: .18rem 0;
}

.cal-grid[b-x0b6pmblhp] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.cal-grid th[b-x0b6pmblhp] {
    font-size: .74rem;
    font-weight: 700;
    text-align: center;
    padding: .2rem 0;
    color: var(--color-text);
}

.cal-grid__wknd[b-x0b6pmblhp] { color: #FF0000; }

.cal-cell[b-x0b6pmblhp] {
    text-align: center;
    font-size: .74rem;
    padding: .22rem 0;
    line-height: 1.15;
    user-select: none;
}

.cal-cell--empty[b-x0b6pmblhp] { background: transparent !important; }

/* El aspa del «festivo que, de mutuo acuerdo, se trabajará». Se dibuja con un degradado
   para no necesitar ni una imagen ni un pseudo-elemento posicionado. */
.cal-cell--diag[b-x0b6pmblhp],
.cal-swatch--diag[b-x0b6pmblhp] {
    background-image: linear-gradient(
        to top right,
        transparent calc(50% - .6px), #FF0000 calc(50% - .6px),
        #FF0000 calc(50% + .6px), transparent calc(50% + .6px)) !important;
    box-shadow: inset 0 0 0 1px #FF0000;
}

.cal-cell--edit[b-x0b6pmblhp] { cursor: pointer; }
.cal-cell--edit:hover[b-x0b6pmblhp] { outline: 2px solid var(--color-primary); outline-offset: -2px; }

.cal-month__total[b-x0b6pmblhp] {
    display: flex;
    justify-content: flex-end;
    gap: 1.1rem;
    font-size: .78rem;
    color: #CC3333;
    padding: .3rem .2rem 0 0;
}

/* ── Leyenda + cuadro resumen, en la misma banda ── */
.cal-band[b-x0b6pmblhp] {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 1.5rem;
    margin-top: 1.75rem;
}

.cal-legend__row[b-x0b6pmblhp] {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .78rem;
    margin-bottom: .4rem;
    line-height: 1.35;
}

.cal-swatch[b-x0b6pmblhp] {
    flex: 0 0 auto;
    width: 2.6rem;
    height: 1.05rem;
    border: 1px solid var(--color-text);
    display: inline-block;
}

/* En la leyenda la muestra acompaña a todo el párrafo, no solo a su primera línea. */
.cal-swatch--lg[b-x0b6pmblhp] { align-self: stretch; height: auto; min-height: 1.05rem; }

.cal-summary[b-x0b6pmblhp] {
    width: 100%;
    border-collapse: collapse;
    font-size: .78rem;
    align-self: start;
}

.cal-summary td[b-x0b6pmblhp] {
    border: 1px solid var(--color-text);
    padding: .25rem .45rem;
}

.cal-summary__strong[b-x0b6pmblhp] { font-weight: 700; text-align: right; }
.cal-summary__value[b-x0b6pmblhp] { text-align: right; width: 4.5rem; }

/* ── Notas al pie ── */
.cal-notes[b-x0b6pmblhp] {
    margin-top: 1.5rem;
    font-size: .78rem;
    line-height: 1.45;
}

.cal-notes p[b-x0b6pmblhp] { margin: 0 0 .55rem; overflow-wrap: anywhere; }
.cal-notes__lead[b-x0b6pmblhp] { text-decoration: underline; }

.cal-foot[b-x0b6pmblhp] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.25rem;
    padding-top: .6rem;
    border-top: 1px solid var(--color-border);
    font-size: .76rem;
    color: var(--color-text-secondary);
    flex-wrap: wrap;
}

/* ── Barra de publicación (solo RRHH) ── */
.cal-admin[b-x0b6pmblhp] {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.cal-admin__spacer[b-x0b6pmblhp] { flex: 1 1 auto; }

.cal-state[b-x0b6pmblhp] {
    font-size: .8rem;
    color: var(--color-warning);
    font-weight: 600;
}

.cal-state--on[b-x0b6pmblhp] { color: var(--color-success); }

/* ── Paleta de pintado ── */
.cal-toolbar[b-x0b6pmblhp] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: .8rem 1rem;
    margin-bottom: 1rem;
}

.cal-toolbar__label[b-x0b6pmblhp] {
    font-size: .8rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-right: .3rem;
}

.cal-brushes[b-x0b6pmblhp] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
}

.cal-brush[b-x0b6pmblhp] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: .25rem .7rem .25rem .35rem;
    font-size: .78rem;
    cursor: pointer;
    max-width: min(18rem, 100%);
    min-width: 0;
}

.cal-brush > span:last-child[b-x0b6pmblhp] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cal-brush--on[b-x0b6pmblhp] {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(45, 90, 142, .2);
    font-weight: 600;
}

.cal-brush-opts[b-x0b6pmblhp] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .6rem;
}

.cal-hint[b-x0b6pmblhp] { margin: .5rem 0 0; }

/* ── Cuadros a rellenar ── */
.cal-editor[b-x0b6pmblhp] { margin-top: 1rem; }

.cal-panel[b-x0b6pmblhp] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    margin-bottom: .6rem;
}

.cal-panel > summary[b-x0b6pmblhp] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem 1rem;
    cursor: pointer;
    font-weight: 600;
    list-style: none;
}

.cal-panel > summary[b-x0b6pmblhp]::-webkit-details-marker { display: none; }
.cal-panel__body[b-x0b6pmblhp] { padding: 0 1rem 1rem; }

.cal-row[b-x0b6pmblhp] {
    display: flex;
    gap: .8rem;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: .6rem;
}

.cal-row > .field[b-x0b6pmblhp] { flex: 1 1 12rem; }
.cal-row--summary > input:first-child[b-x0b6pmblhp] { flex: 1 1 16rem; }

.cal-mini[b-x0b6pmblhp] { max-width: 7rem; }
.cal-auto[b-x0b6pmblhp] { max-width: min(15rem, 100%); }

/* La cifra calculada ocupa el hueco del input que ya no se puede teclear, para que la
   fila no se descoloque al pasar de "a mano" a "calculada". */
.cal-auto-value[b-x0b6pmblhp] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 7rem;
    padding: .35rem .6rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}
.cal-center[b-x0b6pmblhp] { text-align: center; }
.cal-import-list[b-x0b6pmblhp] { max-height: 22rem; overflow-y: auto; }
.btn-sm[b-x0b6pmblhp] { font-size: .8rem; padding: .3rem .6rem; }

.cal-help-list[b-x0b6pmblhp] { margin: 0 0 .8rem; padding-left: 1.1rem; }
.cal-help-list li[b-x0b6pmblhp] { margin-bottom: .25rem; }
.cal-color[b-x0b6pmblhp] { width: 3rem; height: 2rem; padding: 0; border: 1px solid var(--color-border); }

.cal-edit-table td[b-x0b6pmblhp] { vertical-align: middle; }
.cal-edit-table textarea[b-x0b6pmblhp] { min-width: 14rem; }

.cal-note-edit[b-x0b6pmblhp] {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: .7rem;
    margin-bottom: .6rem;
}

/* ── Responsivo ── */
@media (max-width: 991.98px) {
    .cal-months[b-x0b6pmblhp] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cal-band[b-x0b6pmblhp] { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 575.98px) {
    .cal-months[b-x0b6pmblhp] { grid-template-columns: minmax(0, 1fr); }
    .cal-sheet[b-x0b6pmblhp] { padding: .8rem; }
    .cal-picker[b-x0b6pmblhp] { min-width: 0; width: 100%; }
    /* Un mes por fila: la rejilla tiene todo el ancho y el día se toca con el dedo. */
    .cal-cell[b-x0b6pmblhp] { font-size: .82rem; padding: .35rem 0; }
    .cal-toolbar[b-x0b6pmblhp] { padding: .7rem .75rem; }
    .cal-brush-opts > .form-control[b-x0b6pmblhp] { max-width: 100%; width: 100%; }
    .cal-row--summary > .form-control[b-x0b6pmblhp] { flex: 1 1 100%; max-width: 100%; }
    .cal-row--summary > .cal-mini[b-x0b6pmblhp] { flex: 1 1 6rem; }
    .cal-row > .form-control[b-x0b6pmblhp] { min-width: 0; }
    .cal-panel__body[b-x0b6pmblhp] { padding: 0 .75rem .75rem; }
    /* Las tablas de edición se deslizan (necesitan todas sus columnas para editar);
       se estrechan para que deslizar sea lo mínimo. */
    .cal-edit-table textarea[b-x0b6pmblhp] { min-width: 10rem; }
    .cal-edit-table .cal-mini[b-x0b6pmblhp] { max-width: 4.75rem; }
}

/* Origen de la importación de festivos: fichero o a3innuva. */
.cal-source[b-x0b6pmblhp] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: .8rem;
}
.cal-source__opt[b-x0b6pmblhp] {
    flex: 1 1 10rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .45rem .8rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-text);
    font-weight: 600;
    cursor: pointer;
}
.cal-source__opt--on[b-x0b6pmblhp] {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: #fff;
}
.cal-row > .field.cal-a3-year[b-x0b6pmblhp] { flex: 0 1 6rem; }
/* /Pages/Payroll/PayrollList.razor.rz.scp.css */
/* Resumen económico del recibo: bruto · deducciones · líquido · IRPF */
.pay-summary[b-3dsho4t2xa] {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    margin-bottom: 8px;
}

.pay-tile[b-3dsho4t2xa] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 12px;
}

.pay-tile--net[b-3dsho4t2xa] {
    border-color: var(--color-success);
    background: color-mix(in srgb, var(--color-success) 8%, var(--color-surface));
}

.pay-tile__label[b-3dsho4t2xa] {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.pay-tile__value[b-3dsho4t2xa] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text);
}

/* Importes alineados a la derecha en las tablas de conceptos */
.num[b-3dsho4t2xa] {
    text-align: right;
    white-space: nowrap;
}

.pay-neg[b-3dsho4t2xa] { color: var(--color-danger); }
.pay-pos[b-3dsho4t2xa] { color: var(--color-success); }

/* Aviso del muro de datos (Superadmin: importes enmascarados) */
.pay-note[b-3dsho4t2xa] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

/* Indicador de importe enmascarado en la fila */
.pay-masked[b-3dsho4t2xa] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
}

/* Aviso de que el recibo oficial es el del correo. */
.pay-legal[b-3dsho4t2xa] {
    display: flex;
    gap: 0.45rem;
    align-items: flex-start;
    max-width: 70ch;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    margin: 0.4rem 0 0;
}

.pay-legal .material-symbols-outlined[b-3dsho4t2xa] {
    font-size: 17px;
    color: var(--color-primary);
    flex-shrink: 0;
}

/* Nota al pie del líquido: es la única cifra del recibo que sale de una resta. */
.rcp-note[b-3dsho4t2xa] {
    display: flex;
    align-items: flex-start;
    gap: 0.3rem;
    margin-top: 0.2rem;
    font-size: 0.72rem;
    color: var(--color-text-secondary);
}

.rcp-note .material-symbols-outlined[b-3dsho4t2xa] {
    font-size: 14px;
    flex-shrink: 0;
}

/* ── Recibo de salarios ─────────────────────────────────────────────────────
   El detalle deja de ser un resumen y pasa a tener la estructura del recibo
   oficial (encabezamiento · devengos · deducciones · líquido · bases), así que
   el panel necesita ancho de hoja. En móvil el modal ya es pantalla completa. */
.crm-modal-panel.pay-receipt[b-3dsho4t2xa] {
    width: min(96vw, 1040px);
}

.rcp[b-3dsho4t2xa] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-size: 0.9rem;
}

/* Encabezamiento: empresa a la izquierda, trabajador a la derecha. */
.rcp-head[b-3dsho4t2xa] {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.rcp-party[b-3dsho4t2xa] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.75rem 0.9rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.rcp-party strong[b-3dsho4t2xa] {
    font-size: 1rem;
    color: var(--color-text);
}

.rcp-party__tag[b-3dsho4t2xa] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-primary);
}

/* Rejilla de datos etiqueta/valor (encuadre laboral, bases, días). */
.rcp-facts[b-3dsho4t2xa] {
    display: grid;
    gap: 0.5rem 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
    margin: 0;
}

.rcp-facts > div[b-3dsho4t2xa] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.rcp-facts dt[b-3dsho4t2xa] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-secondary);
    font-weight: 600;
}

.rcp-facts dd[b-3dsho4t2xa] {
    margin: 0;
    color: var(--color-text);
    overflow-wrap: anywhere;
}

.rcp-facts--num dd[b-3dsho4t2xa] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* Periodo de liquidación y devengo. */
.rcp-period[b-3dsho4t2xa] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.1rem;
    padding: 0.6rem 0.9rem;
    background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface));
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 0.85rem;
}

.rcp-h[b-3dsho4t2xa] {
    margin: 0.5rem 0 0;
    padding-bottom: 0.3rem;
    border-bottom: 2px solid var(--color-primary);
    font-size: 0.95rem;
    font-weight: 700;
}

.rcp-sub[b-3dsho4t2xa] {
    margin: 0.4rem 0 0.2rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.rcp-table[b-3dsho4t2xa] { font-size: 0.85rem; }
.rcp-table td[b-3dsho4t2xa], .rcp-table th[b-3dsho4t2xa] { padding: 0.4rem 0.55rem; }
.rcp-table .num[b-3dsho4t2xa] { font-variant-numeric: tabular-nums; }

/* Código del concepto en a3: útil para cruzar con RRHH, secundario en la hoja. */
.rcp-code[b-3dsho4t2xa] {
    font-size: 0.7rem;
    color: var(--color-text-secondary);
}

.rcp-dim[b-3dsho4t2xa] { color: var(--color-text-secondary); }

/* Fila de subtítulo dentro de la tabla (percepciones salariales / no salariales). */
.rcp-group td[b-3dsho4t2xa] {
    background: var(--color-bg);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-secondary);
}

.rcp-total td[b-3dsho4t2xa] { border-top: 2px solid var(--color-border); }

/* Cierre del recibo: A, B y líquido. */
.rcp-bottom[b-3dsho4t2xa] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.8rem 0.9rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 12px;
}

.rcp-bottom__row[b-3dsho4t2xa] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-variant-numeric: tabular-nums;
}

.rcp-bottom__row--net[b-3dsho4t2xa] {
    padding-top: 0.4rem;
    border-top: 2px solid var(--color-border);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-success);
}

.rcp-details[b-3dsho4t2xa] {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
}

.rcp-details summary[b-3dsho4t2xa] {
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.rcp-foot[b-3dsho4t2xa] {
    margin: 0;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

/* Selector de empleado (RRHH): buscador encima del desplegable */
.pay-picker[b-3dsho4t2xa] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: min(340px, 100%);
}

.pay-picker__search[b-3dsho4t2xa] {
    position: relative;
}

.pay-picker__search .material-symbols-outlined[b-3dsho4t2xa] {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: var(--color-text-secondary);
    pointer-events: none;
}

.pay-picker__search input[b-3dsho4t2xa] {
    padding-left: 36px;
}

/* ── Móvil (iPhone 13 Pro: 390 px) ──────────────────────────────────────────
   El selector de RRHH ocupa toda la fila: .page-header__actions no encoge y, con
   el body en overflow-x: hidden, lo que sobrara se cortaba. El recibo conserva
   todas sus columnas (son importes: ocultar una descuadraría el «Total devengado»,
   que va en colspan), así que su tabla se desliza; se aprieta el relleno y la
   columna del concepto guarda un ancho mínimo para que se lea en vez de partirse
   palabra a palabra. */
@media (max-width: 575.98px) {
    .pay-actions[b-3dsho4t2xa] {
        flex: 1 1 100%;
        flex-shrink: 1;
        min-width: 0;
    }

    .pay-picker[b-3dsho4t2xa] {
        width: 100%;
    }

    .rcp-table td[b-3dsho4t2xa], .rcp-table th[b-3dsho4t2xa] {
        padding: 0.35rem 0.4rem;
    }

    .rcp-table td:first-child[b-3dsho4t2xa] {
        min-width: 9rem;
    }

    .rcp-party[b-3dsho4t2xa],
    .rcp-period[b-3dsho4t2xa] {
        overflow-wrap: anywhere;
    }
}
/* /Pages/Portal/Modelo145.razor.rz.scp.css */
/* «Mi modelo 145». El formulario reproduce el orden y el agrupamiento del impreso
   oficial, así que la pantalla se estructura en secciones numeradas igual que el papel:
   quien tenga el modelo delante encuentra cada casilla donde espera. */

.m145-section[b-tfi13p61wm] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 16px;
}

.m145-section__title[b-tfi13p61wm] {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border);
}

/* ── Situación familiar: tres opciones excluyentes con su texto legal ────────
   Van como radios grandes y con el texto completo del impreso, no como un
   desplegable: elegir mal la situación familiar cambia la retención de todo el
   año, y el matiz está en la letra pequeña. */
.m145-choice[b-tfi13p61wm] {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 12px 14px;
    margin: 4px 0 14px;
}

.m145-choice legend[b-tfi13p61wm] {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    padding: 0 6px;
    width: auto;
}

.m145-radio[b-tfi13p61wm] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 8px 6px;
    border-radius: 8px;
    cursor: pointer;
    line-height: 1.4;
}

.m145-radio:hover[b-tfi13p61wm] { background: var(--color-bg); }
.m145-radio input[b-tfi13p61wm] { margin-top: 3px; flex: 0 0 auto; }
.m145-radio small[b-tfi13p61wm] { display: block; color: var(--color-text-secondary); margin-top: 2px; }

/* ── Bloques de casillas sueltas ─────────────────────────────────────────── */
.m145-checks[b-tfi13p61wm] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 6px 0 14px;
}

.m145-checks__label[b-tfi13p61wm] {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.m145-checks label[b-tfi13p61wm] {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    line-height: 1.4;
    cursor: pointer;
}

.m145-checks label input[b-tfi13p61wm] { margin-top: 3px; flex: 0 0 auto; }

/* ── Tablas de hijos y ascendientes ──────────────────────────────────────── */
.m145-table th[b-tfi13p61wm] {
    font-size: 0.76rem;
    line-height: 1.25;
    vertical-align: bottom;
    white-space: normal;
}

.m145-table th small[b-tfi13p61wm] {
    display: block;
    font-weight: 400;
    color: var(--color-text-secondary);
}

.m145-table td[b-tfi13p61wm] { vertical-align: middle; }
.m145-table td.center[b-tfi13p61wm] { text-align: center; }
.m145-table td.center input[b-tfi13p61wm] { transform: scale(1.25); cursor: pointer; }
.m145-table input[type="number"][b-tfi13p61wm] { min-width: 88px; }

/* ── Acciones ────────────────────────────────────────────────────────────── */
.m145-actions[b-tfi13p61wm] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 4px 0 24px;
}

/* ── Comunicación ya presentada ──────────────────────────────────────────── */
.m145-done[b-tfi13p61wm] {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-success);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
}

.m145-done > .material-symbols-outlined[b-tfi13p61wm] {
    font-size: 2.2rem;
    color: var(--color-success);
    flex: 0 0 auto;
}

.m145-done h3[b-tfi13p61wm] { margin: 0 0 6px; font-size: 1.05rem; }
.m145-done p[b-tfi13p61wm] { margin: 0 0 10px; line-height: 1.5; }

.m145-done__actions[b-tfi13p61wm] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
}

/* Enlace de texto dentro del modal para cambiar de forma de firmar. */
.link-button[b-tfi13p61wm] {
    background: none;
    border: 0;
    padding: 4px 0;
    color: var(--color-primary);
    font: inherit;
    font-size: 0.85rem;
    text-decoration: underline;
    cursor: pointer;
}

.link-button:hover[b-tfi13p61wm] { color: var(--color-accent); }

/* En móvil las tablas del impreso no caben: el contenedor .table-scroll ya
   permite el desplazamiento horizontal, pero conviene que las casillas sigan
   siendo cómodas de pulsar con el dedo. */
@media (max-width: 768px) {
    .m145-section[b-tfi13p61wm] { padding: 14px; }
    .m145-table td.center input[b-tfi13p61wm] { transform: scale(1.4); }
}

/* Badges del histórico. Cada pantalla del portal define los suyos junto a su tabla
   (no hay una definición común en components.css), así que esta hace lo mismo con
   los mismos colores de la paleta. */
.badge[b-tfi13p61wm] {
    display: inline-block;
    padding: .1rem .5rem;
    border-radius: 20px;
    font-size: .7rem;
    font-weight: 700;
}

.badge--ok[b-tfi13p61wm] { background: rgba(46, 158, 90, .15); color: var(--color-success); }
.badge--warn[b-tfi13p61wm] { background: rgba(224, 155, 48, .18); color: var(--color-warning); }
.badge--muted[b-tfi13p61wm] { background: rgba(107, 113, 134, .15); color: var(--color-text-secondary); }

/* Recuadro de firma del modal. Ninguna regla global lo dimensionaba: se quedaba en
   los 300 × 150 px por defecto del <canvas> y sin touch-action, así que en el móvil
   el dedo desplazaba la página en vez de firmar. signature.js toma el tamaño PINTADO
   al adjuntarlo, de modo que el ancho al 100 % no descuadra las coordenadas. */
.sign-canvas[b-tfi13p61wm] {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 180px;
    border: 1px dashed var(--color-border);
    border-radius: 8px;
    background: #fff;
    touch-action: none;
    cursor: crosshair;
}

/* Móvil estrecho: la tarjeta de «ya presentada» y su icono no deben comerse el
   texto. */
@media (max-width: 575.98px) {
    .m145-done[b-tfi13p61wm] { padding: 14px; gap: 10px; }
    .m145-done > .material-symbols-outlined[b-tfi13p61wm] { font-size: 1.8rem; }
    .m145-choice[b-tfi13p61wm] { padding: 10px; }
}
/* /Pages/Public/SignMaterial.razor.rz.scp.css */
/* Tarjeta de firma pública (móvil), centrada sobre el degradado del LoginLayout. */
.sign-card[b-yvlqhdk6wu] {
    width: min(440px, 100%);
    background: var(--color-surface);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sign-card__logo[b-yvlqhdk6wu] {
    height: 34px;
    align-self: center;
    /* El logo blanco no se ve sobre fondo claro: se tiñe al azul de marca. */
    filter: brightness(0) saturate(100%) invert(28%) sepia(30%) saturate(1200%) hue-rotate(175deg);
    margin-bottom: 4px;
}

.sign-card h2[b-yvlqhdk6wu] {
    margin: 0;
    font-size: 1.2rem;
    color: var(--color-text);
}

.sign-card__muted[b-yvlqhdk6wu] {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

.sign-card__items[b-yvlqhdk6wu] {
    margin: 0;
    padding-left: 18px;
    color: var(--color-text);
    font-size: 0.95rem;
}

/* Detalle del artículo: nº de serie en material, talla en EPIs. */
.sign-card__detail[b-yvlqhdk6wu] {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.sign-card__ok[b-yvlqhdk6wu] {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 0;
}

.sign-card__ok .material-symbols-outlined[b-yvlqhdk6wu] {
    font-size: 56px;
    color: var(--color-success);
}

.sign-card__submit[b-yvlqhdk6wu] {
    margin-top: 4px;
    justify-content: center;
}

.sign-canvas[b-yvlqhdk6wu] {
    width: 100%;
    height: 180px;
    border: 1px dashed var(--color-border);
    border-radius: 8px;
    background: #fff;
    touch-action: none;
    cursor: crosshair;
}

/* Descripciones y nº de serie largos (sin espacios) no deben ensanchar la tarjeta:
   en el móvil el body corta lo que sobra en vez de desplazarlo. */
.sign-card__items[b-yvlqhdk6wu],
.sign-card__muted[b-yvlqhdk6wu],
.sign-card h2[b-yvlqhdk6wu] {
    overflow-wrap: anywhere;
}

.sign-card__logo[b-yvlqhdk6wu] { max-width: 100%; }

/* Móvil: el LoginLayout ya deja 1.5rem a cada lado; menos relleno en la tarjeta
   da más anchura al recuadro de firma. El tamaño del lienzo lo toma signature.js
   del tamaño PINTADO al adjuntarlo, así que esta regla (que ya rige antes de ese
   momento) no descuadra las coordenadas del trazo. */
@media (max-width: 575.98px) {
    .sign-card[b-yvlqhdk6wu] { padding: 18px 16px; }
}
/* /Shared/TimeClockCalendar.razor.rz.scp.css */
.tcc[b-3w3c8x15ns] { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06); padding: 1rem; }

.tcc__head[b-3w3c8x15ns] { display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    flex-wrap: wrap; margin-bottom: .9rem; }
.tcc__nav[b-3w3c8x15ns] { display: flex; align-items: center; gap: .4rem; }
.tcc__month[b-3w3c8x15ns] { text-transform: capitalize; min-width: 150px; text-align: center; font-size: 1.05rem; }
.tcc__totals[b-3w3c8x15ns] { display: flex; gap: .4rem; flex-wrap: wrap; }
.tcc__chip[b-3w3c8x15ns] { font-size: .8rem; padding: .2rem .6rem; border-radius: 20px; background: var(--color-bg);
    color: var(--color-text-secondary); }
.tcc__chip strong[b-3w3c8x15ns] { color: var(--color-text); }
.tcc__chip--bad[b-3w3c8x15ns] { background: rgba(204,51,51,.1); color: var(--color-danger); }
.tcc__chip--bad strong[b-3w3c8x15ns] { color: var(--color-danger); }

.tcc__grid[b-3w3c8x15ns] { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.tcc__wd[b-3w3c8x15ns] { text-align: center; font-size: .72rem; font-weight: 700; color: var(--color-text-secondary);
    text-transform: uppercase; letter-spacing: .05em; padding-bottom: .2rem; }

.tcc__cell[b-3w3c8x15ns] { position: relative; min-height: 74px; border: 1px solid var(--color-border); border-radius: 8px;
    background: var(--color-surface); padding: .35rem .4rem; display: flex; flex-direction: column;
    align-items: flex-start; gap: .15rem; text-align: left; cursor: pointer; font: inherit; color: inherit;
    border-left-width: 4px; border-left-color: transparent; }
.tcc__cell:hover[b-3w3c8x15ns] { background: #FAFBFF; }
.tcc__cell--blank[b-3w3c8x15ns] { border: none; background: transparent; cursor: default; }
.tcc__cell--weekend[b-3w3c8x15ns] { background: var(--color-bg); }
.tcc__cell--today .tcc__num[b-3w3c8x15ns] { background: var(--color-primary); color: #fff; border-radius: 20px; padding: 0 .4rem; }
.tcc__cell--selected[b-3w3c8x15ns] { outline: 2px solid var(--color-primary); outline-offset: -1px; }
.tcc__cell--ok[b-3w3c8x15ns] { border-left-color: var(--color-success); }
.tcc__cell--live[b-3w3c8x15ns] { border-left-color: var(--color-primary); }
.tcc__cell--bad[b-3w3c8x15ns] { border-left-color: var(--color-danger); background: rgba(204,51,51,.05); }

.tcc__num[b-3w3c8x15ns] { font-size: .8rem; font-weight: 700; }
.tcc__hours[b-3w3c8x15ns] { font-size: .78rem; color: var(--color-text); }
.tcc__flag[b-3w3c8x15ns] { font-size: .66rem; font-weight: 700; color: var(--color-danger); text-transform: uppercase; }
.tcc__flag--live[b-3w3c8x15ns] { color: var(--color-primary); }

.tcc__legend[b-3w3c8x15ns] { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .75rem; color: var(--color-text-secondary);
    margin-top: .7rem; }
.tcc__dot[b-3w3c8x15ns] { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; }
.tcc__dot--ok[b-3w3c8x15ns] { background: var(--color-success); }
.tcc__dot--live[b-3w3c8x15ns] { background: var(--color-primary); }
.tcc__dot--bad[b-3w3c8x15ns] { background: var(--color-danger); }

.tcc__detail[b-3w3c8x15ns] { margin-top: 1rem; border-top: 1px solid var(--color-border); padding-top: .8rem; }
.tcc__detail-head[b-3w3c8x15ns] { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.tcc__detail-head strong[b-3w3c8x15ns] { text-transform: capitalize; }
.tcc__warn[b-3w3c8x15ns] { display: flex; gap: .4rem; align-items: flex-start; color: var(--color-danger); font-size: .85rem;
    background: rgba(204,51,51,.07); border-radius: 8px; padding: .5rem .6rem; }
.tcc__warn .material-symbols-outlined[b-3w3c8x15ns] { font-size: 18px; }
.tcc__entries[b-3w3c8x15ns] { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .35rem; }
.tcc__entries li[b-3w3c8x15ns] { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; font-size: .9rem; }
.tcc__in[b-3w3c8x15ns] { color: var(--color-success); font-size: 18px; }
.tcc__out[b-3w3c8x15ns] { color: var(--color-warning); font-size: 18px; }
.tcc__src[b-3w3c8x15ns] { margin-left: auto; font-size: .7rem; font-weight: 700; padding: .05rem .5rem; border-radius: 20px;
    background: var(--color-bg); color: var(--color-text-secondary); }
.tcc__src--crm[b-3w3c8x15ns] { background: rgba(201,147,90,.16); color: var(--color-accent); }
.tcc__src--manual[b-3w3c8x15ns] { background: rgba(224,155,48,.16); color: var(--color-warning); }
.tcc__src--presencecontrol[b-3w3c8x15ns] { background: rgba(45,90,142,.12); color: var(--color-primary); }
.tcc__src--bc[b-3w3c8x15ns] { background: rgba(107,113,134,.15); color: var(--color-text-secondary); }

@media (max-width: 576px) {
    .tcc[b-3w3c8x15ns] { padding: .75rem; }
    /* 7 columnas en ~330 px dejan celdas de ~44 px: menos hueco y relleno, y lo que
       no quepa se parte dentro de la celda en vez de invadir la de al lado. */
    .tcc__grid[b-3w3c8x15ns] { gap: 3px; }
    .tcc__cell[b-3w3c8x15ns] { min-height: 54px; padding: .2rem; min-width: 0; overflow: hidden; border-left-width: 3px; }
    .tcc__hours[b-3w3c8x15ns] { font-size: .62rem; line-height: 1.15; overflow-wrap: anywhere; }
    /* «INCIDENCIA» no cabe en una celda de móvil: el estado ya lo dicen el borde y el
       fondo de color (leyenda debajo) y el detalle del día al pulsarla. */
    .tcc__flag[b-3w3c8x15ns] { display: none; }
    .tcc__nav[b-3w3c8x15ns] { flex: 1 1 auto; justify-content: space-between; }
    .tcc__month[b-3w3c8x15ns] { min-width: 0; }
}