/* STARIZ V1 · Plan B V4 (2026-11-06)
   Contrato visual aprobado: titulo en tarjeta, Crear + Acciones o solo Acciones,
   y KPI EN TARJETAS INDIVIDUALES solo en los módulos que ya tienen KPI.
   Ningún color nuevo: utiliza exclusivamente tokens corporativos activos.
   Reutiliza stariz-crud-button, stariz-data-grid y formularios existentes. */

/* 1. Tarjeta de título obligatoria. Revierte el reset transparente de Plan B,
   sin cambiar el color de empresa, iconos ni fuente. */
html body .stariz-planb-page > :is(.stariz-module-header,.page-heading,.document-workflow-header,.approval-config-page__header) {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    min-width: 0;
    min-height: 70px;
    margin: 0 0 12px;
    padding: 13px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg, 12px);
    background: var(--panel);
    color: var(--text);
    box-shadow: none;
    overflow: visible;
}
html body .stariz-planb-page > :is(.stariz-module-header,.page-heading,.document-workflow-header,.approval-config-page__header) > :first-child {
    flex: 1 1 auto;
    min-width: 0;
}
html body .stariz-planb-page .stariz-module-header h1,
html body .stariz-planb-page .page-heading h1 {
    margin: 0;
    color: var(--text);
    font: inherit;
    font-size: var(--text-md, 1rem);
    font-weight: var(--weight-bold, 700);
    line-height: 1.3;
}
html body .stariz-planb-page .stariz-module-header p:not(.eyebrow) {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: var(--text-xs, .78rem);
    line-height: 1.4;
}

/* 2. Una única zona de acciones alineadas a la derecha en la tarjeta del título. */
html body .stariz-planb-page .stariz-operational-title-actions {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 7px;
    margin-left: auto;
}
/* Barra por registro solo si se ha seleccionado exactamente una solicitud. */
.stariz-planb-requests .stariz-operational-row-actions {margin-left:auto;display:flex;align-items:center}
.stariz-planb-requests .employee-requests__table-heading {overflow:visible;flex-wrap:wrap}
.stariz-planb-requests .employee-requests__table-card {overflow:visible}

/* 3. KPI originales en tarjetas INDEPENDIENTES; ningún contenedor global
   pintado detrás de un grupo. No se crean KPI en otros tres módulos. */
html body .stariz-planb-requests .employee-requests__summary,
html body .stariz-planb-account .vacation-account-page__summary,
html body .stariz-planb-timeline .vacation-timeline-page__kpis {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:stretch;
    gap:10px;
    width:100%;
    min-width:0;
    padding:0;
    margin:0 0 12px;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
}
html body .stariz-planb-account .vacation-account-page__summary {grid-template-columns:repeat(4,minmax(0,1fr))}
html body .stariz-planb-requests .employee-requests__summary > article,
html body .stariz-planb-account .vacation-account-page__summary > article,
html body .stariz-planb-timeline .vacation-timeline-page__kpis > article {
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:0;
    min-height:88px;
    padding:13px 15px;
    margin:0;
    border:1px solid var(--line);
    border-radius:var(--radius-lg, 10px);
    background:var(--panel);
    box-shadow:none;
    overflow-wrap:anywhere;
}
html body .stariz-planb-requests .employee-requests__kpi > div {
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:6px 10px;
}
html body .stariz-planb-requests .employee-requests__kpi strong,
html body .stariz-planb-account .vacation-account-page__summary article strong,
html body .stariz-planb-timeline .vacation-timeline-page__kpis article strong {
    color:var(--text);
    font-size:clamp(1.15rem,1.7vw,1.45rem);
    font-weight:var(--weight-bold, 700);
    font-variant-numeric:tabular-nums;
    line-height:1.3;
}
html body .stariz-planb-requests .employee-requests__kpi span,
html body .stariz-planb-account .vacation-account-page__summary article :is(span,small),
html body .stariz-planb-timeline .vacation-timeline-page__kpis article :is(span,small) {
    color:var(--muted);
    font-size:var(--text-xs, .78rem);
    line-height:1.4;
}
/* Las barras indicadoras son funcionales existentes; sólo su color hereda marca. */
html body .stariz-planb-requests .employee-requests__kpi-bar {
    background:var(--primary);
    color:var(--primary);
}
@media (max-width:1020px) {
    html body .stariz-planb-requests .employee-requests__summary,
    html body .stariz-planb-account .vacation-account-page__summary,
    html body .stariz-planb-timeline .vacation-timeline-page__kpis {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:650px) {
    html body .stariz-planb-page > :is(.stariz-module-header,.page-heading,.document-workflow-header,.approval-config-page__header) {flex-direction:column;align-items:stretch;gap:11px}
    html body .stariz-planb-page .stariz-operational-title-actions {justify-content:flex-end;width:100%}
    html body .stariz-planb-requests .employee-requests__summary,
    html body .stariz-planb-account .vacation-account-page__summary,
    html body .stariz-planb-timeline .vacation-timeline-page__kpis {grid-template-columns:minmax(0,1fr)}
}

/* La superficie y las filas pertenecen a stariz-bulk-menu. Aquí solo se
   define el anclaje de los menús operativos dentro del viewport. */
:is(.stariz-planb-page, .stariz-registration-dialog--approval-response) .stariz-operational-actions {
    display: inline-flex;
    min-width: 0;
}
:is(.stariz-planb-page, .stariz-registration-dialog--approval-response) .stariz-operational-actions > .stariz-bulk-menu__trigger::after {
    content: "⌄";
    line-height: 1;
}
:is(.stariz-planb-page, .stariz-registration-dialog--approval-response) .stariz-operational-actions__menu.stariz-bulk-menu__panel {
    position: fixed;
    inset: 0 auto auto 0;
    visibility: hidden;
}
:is(.stariz-planb-page, .stariz-registration-dialog--approval-response) .stariz-operational-actions[open] > .stariz-operational-actions__menu[data-stariz-positioned="true"] {
    visibility: visible;
}
:is(.stariz-planb-page, .stariz-registration-dialog--approval-response) .stariz-operational-actions__menu .stariz-operational-actions__separator {
    display: block;
    height: 1px;
    margin: 5px 2px;
    background: var(--line);
}
.stariz-planb-page .vacation-account-page__crud-heading {display:flex;align-items:center;gap:12px}
.stariz-planb-page .vacation-account-page__crud-heading > .stariz-operational-actions {margin-left:auto}

/* Selector compacto y reutilizable: filtro real por varios trabajadores autorizados. */
.stariz-planb-page .stariz-worker-multi-picker { min-width: 0; display:grid; gap:5px; }
.stariz-planb-page .stariz-worker-multi-picker__label { font-size:var(--text-2xs,.75rem);font-weight:var(--weight-bold,700);color:var(--muted);text-transform:uppercase;letter-spacing:.04em; }
.stariz-planb-page .stariz-worker-multi-picker__details { position:relative;min-width:0; }
.stariz-planb-page .stariz-worker-multi-picker__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    height: var(--control-height);
    padding-block: 0;
    cursor: pointer;
    list-style: none;
}
.stariz-worker-multi-picker__trigger > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.stariz-planb-page .stariz-worker-multi-picker__trigger::after { content:"⌄";color:var(--muted); }
.stariz-planb-page .stariz-worker-multi-picker__trigger::-webkit-details-marker {display:none}
.stariz-planb-page .stariz-worker-multi-picker__panel { position:absolute;left:0;top:calc(100% + 5px);width:min(360px,calc(100vw - 32px));min-width:240px;z-index:1230;padding:10px;border:1px solid var(--line);border-radius:var(--radius-lg,10px);background:var(--panel);box-shadow:0 8px 22px color-mix(in srgb,var(--text) 12%,transparent); }
.stariz-planb-page .stariz-worker-multi-picker__search { display:grid;gap:5px;color:var(--muted);font-size:var(--text-xs,.8rem); }
.stariz-planb-page .stariz-worker-multi-picker__list {display:grid;max-height:230px;overflow-y:auto;overscroll-behavior:contain;margin:7px 0;}
.stariz-planb-page .stariz-worker-multi-picker__option {display:flex;gap:10px;align-items:center;padding:7px 6px;border-bottom:1px solid var(--line);cursor:pointer;}
.stariz-planb-page .stariz-worker-multi-picker__option input {accent-color:var(--primary);min-height:0;flex:none;}
.stariz-planb-page .stariz-worker-multi-picker__option span {min-width:0;display:grid;gap:2px;}
.stariz-planb-page .stariz-worker-multi-picker__option strong {font-size:var(--text-xs,.8rem);font-weight:600;}
.stariz-planb-page .stariz-worker-multi-picker__option small {color:var(--muted);}
.stariz-planb-page .stariz-worker-multi-picker__footer {display:flex;align-items:center;justify-content:flex-end;gap:7px;padding-top:4px;}
.stariz-planb-page .stariz-worker-multi-picker__footer span {margin-right:auto;color:var(--muted);font-size:var(--text-xs,.8rem);}
@media(max-width:700px){.stariz-planb-page .stariz-worker-multi-picker__panel{max-width:calc(100vw - 32px)}}

/* STARIZ V6 — normalización tipográfica y alineación de tarjetas (2026-11-06).
   Alcance intencionalmente estricto: SOLO presentación en las seis vistas Plan B.
   Fuente de verdad: tokens tipográficos y botones existentes de STARIZ.
   No modifica flujos, consultas, permisos, KPI ni controles de selección. */
html body.stariz-app .stariz-planb-page {
    font-family: var(--stariz-font-family);
    font-size: var(--text-md);
    font-weight: var(--weight-regular);
}
/* Tarjeta del título: una cuadrícula de dos zonas alineadas y el mismo ritmo
   visual de los encabezados de módulos existentes. */
html body.stariz-app .stariz-planb-page > :is(.stariz-module-header,.page-heading,.document-workflow-header,.approval-config-page__header) {
    align-items: center;
    min-height: 76px;
    padding: 14px 16px;
}
html body.stariz-app .stariz-planb-page > :is(.stariz-module-header,.page-heading,.document-workflow-header,.approval-config-page__header) > :first-child {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    align-self: center;
    gap: 3px;
    min-width: 0;
    margin: 0;
    padding: 0;
}
html body.stariz-app .stariz-planb-page :is(.stariz-module-header,.page-heading,.document-workflow-header,.approval-config-page__header) h1 {
    display: block;
    margin: 0;
    font-family: var(--stariz-font-family);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    line-height: 1.25;
    letter-spacing: -.01em;
    text-align: left;
}
html body.stariz-app .stariz-planb-page :is(.stariz-module-header,.page-heading,.document-workflow-header,.approval-config-page__header) p:not(.eyebrow) {
    display: block;
    margin: 0;
    font-family: var(--stariz-font-family);
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    line-height: 1.35;
    letter-spacing: normal;
    text-align: left;
}
html body.stariz-app .stariz-planb-page .stariz-operational-title-actions {
    align-self: center;
    align-items: center;
    justify-content: flex-end;
    margin: 0 0 0 auto;
    min-height: 36px;
}
/* Encabezados del grid, barras de filtros, descripciones y etiquetas: solo
   tokens existentes, sin paleta ni decoración adicional. */
html body.stariz-app .stariz-planb-page :is(.employee-requests__table-heading,.approval-grid-heading,.vacation-account-page__crud-heading) :is(h2,strong),
html body.stariz-app .stariz-planb-page :is(.employee-requests__filters-heading,.approval-filter-bar__title) > :is(strong,h2),
html body.stariz-app .stariz-planb-page .stariz-module-section-title {
    font-family: var(--stariz-font-family);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    line-height: 1.3;
}
html body.stariz-app .stariz-planb-page :is(.employee-requests__field,.vacation-account-page__field,.vacation-timeline-page__field,.stariz-worker-multi-picker) > :is(span,label),
html body.stariz-app .stariz-planb-page .stariz-worker-multi-picker__label {
    font-family: var(--stariz-font-family);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    line-height: 1.3;
}
html body.stariz-app .stariz-planb-page .stariz-worker-multi-picker__option strong {
    font-family: var(--stariz-font-family);
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
    line-height: 1.35;
}
html body.stariz-app .stariz-planb-page .stariz-data-grid :is(th,td) {
    font-family: var(--stariz-font-family);
    line-height: 1.35;
}
/* El texto pequeño de KPI sigue la escala oficial, pero cada indicador
   mantiene su propia tarjeta individual y su tamaño de valor preexistente. */
html body.stariz-app .stariz-planb-page :is(.employee-requests__summary,.vacation-account-page__summary,.vacation-timeline-page__kpis) :is(span,small) {
    font-family: var(--stariz-font-family);
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    line-height: 1.35;
}
@media (max-width: 650px) {
    html body.stariz-app .stariz-planb-page > :is(.stariz-module-header,.page-heading,.document-workflow-header,.approval-config-page__header) {align-items:stretch;}
    html body.stariz-app .stariz-planb-page .stariz-operational-title-actions {align-self:flex-end;margin-left:auto;}
}