/**
 * Tarjetas compuestas: cuadro semanal, calendario, rejillas de citas y vistas relacionadas.
 * Requiere cards.css (ui-card-base, profile, aviso).
 */

:root,
[data-theme="light"] {
    --ui-cuadro-granate-suave: color-mix(in srgb, var(--color-granate-active, #9a2d2d) 85%, #ffffff 15%);
}

.ui-cuadro-semanal__barra-superior {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0 0 0.5rem;
}

.panel-main .card.ui-cuadro-semanal {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    & :is(.card-body, .ui-cuadro-semanal__inner) { background: transparent !important; }
    & .ui-card-profile__detalle { color: var(--color-text-muted, #5c4a3d); }
    & :is(.ui-card-profile__detalle.fw-bold, .ui-card-profile__nombre) { color: var(--color-text-default, #2d2d2d); }
}

/* Horario: curso/docente llevan .text-body (Bootstrap !important); forzar contraste en oscuro. */
[data-theme="dark"] .panel-main .card.ui-cuadro-semanal .ui-card-profile__detalle {
    color: var(--color-text-muted, rgba(240, 235, 224, 0.72));
}

[data-theme="dark"] .panel-main .card.ui-cuadro-semanal :is(
    .ui-card-profile__detalle.fw-bold,
    .ui-card-profile__detalle.text-body,
    .ui-card-profile__nombre
) {
    color: var(--color-blanco, #f0ebe0) !important;
}

/* Calendario reserva: "Sesión: N min" y chips granate ilegibles en oscuro. */
[data-theme="dark"] .ui-cuadro-semanal .ui-cuadro-semanal__tarjeta-dia-bloque-reserva {
    color: var(--color-blanco, #f0ebe0);
    background-color: rgba(var(--color-granate-rgb, 122, 37, 37), 0.42);
    border-color: color-mix(in srgb, var(--color-dorado, #e0b070) 55%, transparent);
}

[data-theme="dark"] .ui-cuadro-semanal .ui-cuadro-semanal__tarjeta-dia-bloque-reserva:is(:hover, :focus-visible) {
    background-color: rgba(var(--color-granate-rgb, 122, 37, 37), 0.58);
    border-color: var(--color-dorado, #e0b070);
}

[data-theme="dark"] .ui-cuadro-semanal .ui-cuadro-semanal__tarjeta-dia-sesion,
[data-theme="dark"] .ui-cuadro-semanal .ui-cuadro-semanal__tarjeta-dia-bloque-reserva .ui-cuadro-semanal__tarjeta-dia-sesion,
[data-theme="dark"] .ui-cuadro-semanal .ui-cuadro-semanal__tarjeta-dia-bloque-reserva .ui-cuadro-semanal__tarjeta-dia-rango,
[data-theme="dark"] .ui-cuadro-semanal .ui-cuadro-semanal__tarjeta-dia-rango-btn:is(:hover, :focus-visible) .ui-cuadro-semanal__tarjeta-dia-rango {
    color: var(--color-blanco, #f0ebe0);
}

.ui-cuadro-semanal__tabla { border-collapse: separate; border-spacing: 8px; width: 100%; }
.ui-cuadro-semanal .ui-card-base.ui-cuadro-semanal__tarjeta-celda { --card-h: auto; --card-w: 100%; }

.ui-cuadro-semanal__th {
    background: var(--ui-cuadro-granate-suave);
    border: none;
    border-radius: 14px;
    color: var(--color-blanco, #fff);
    font-size: 0.78rem;
    font-weight: 700;
    min-width: 7rem;
    padding: 10px 8px;
    text-align: center;
    vertical-align: middle;
}

.ui-cuadro-semanal__th--hora { max-width: 9rem; min-width: 6.5rem; }
.ui-cuadro-semanal__td { border: none; min-width: 7rem; padding: 2px; vertical-align: middle; }
.ui-cuadro-semanal__celda--vacia { min-height: 5.5rem; }
.ui-cuadro-semanal__texto--compacto { font-size: 0.72rem; }

.ui-cuadro-semanal__celda-campo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 4rem;
    min-height: 2.65rem;
    padding: 0.42rem 0.55rem;
    border: 1px solid var(--ui-card-border, rgba(92, 74, 61, 0.13));
    border-radius: 14px;
    background-color: var(--ui-card-surface-fallback, rgba(253, 250, 242, 0.94));
    font-size: 0.8125rem;
    line-height: 1.25;
    text-align: center;
    color: var(--color-text-muted, #5c4a3d);
    box-sizing: border-box;
}

input.ui-cuadro-semanal__celda-campo {
    display: block;
    min-width: 4.75rem;
    padding: 0.42rem 0.6rem;
    font-weight: 500;
    color: var(--color-text-default, #2d2d2d);
    box-shadow: none;
    -moz-appearance: textfield;
    appearance: textfield;
}

input.ui-cuadro-semanal__celda-campo::-webkit-outer-spin-button,
input.ui-cuadro-semanal__celda-campo::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input.ui-cuadro-semanal__celda-campo:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--color-granate, #661414) 38%, var(--ui-card-border, rgba(92, 74, 61, 0.13)));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-granate, #661414) 14%, transparent);
}

input.ui-cuadro-semanal__celda-campo:disabled {
    opacity: 0.78;
    cursor: not-allowed;
}

input.ui-cuadro-semanal__celda-campo::placeholder {
    color: var(--color-text-muted, #5c4a3d);
    opacity: 0.65;
}

/**
 * Matriz cuadro semanal: inputs editables (borde punteado) vs celdas con span (calculadas).
 * Activar solo en el contenedor: ui-cuadro-semanal--matriz-editable
 */
.ui-cuadro-semanal--matriz-editable input.ui-cuadro-semanal__celda-campo:not(:disabled) {
    cursor: text;
    caret-color: var(--color-granate, #661414);
    background-color: var(--color-blanco, #fff);
    border-style: dashed;
    border-width: 1.5px;
    border-color: color-mix(in srgb, var(--color-granate, #661414) 32%, var(--ui-card-border, rgba(92, 74, 61, 0.13)));
}

.ui-cuadro-semanal--matriz-editable input.ui-cuadro-semanal__celda-campo:not(:disabled):hover {
    border-color: color-mix(in srgb, var(--color-granate, #661414) 48%, var(--ui-card-border, rgba(92, 74, 61, 0.13)));
    background-color: color-mix(in srgb, var(--color-blanco, #fff) 88%, var(--color-crema, #f7f3e8));
}

.ui-cuadro-semanal--matriz-editable input.ui-cuadro-semanal__celda-campo:not(:disabled):focus {
    border-style: solid;
    background-color: var(--color-blanco, #fff);
}

.ui-cuadro-semanal--matriz-editable input.ui-cuadro-semanal__celda-campo:not(:disabled)::placeholder {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    opacity: 0.55;
}

.ui-cuadro-semanal--matriz-editable input.ui-cuadro-semanal__celda-campo:disabled {
    border-style: solid;
}

.ui-cuadro-semanal--matriz-editable .ui-cuadro-semanal__celda-campo:has(> span):not(.ui-cuadro-semanal__celda-campo--alumno) {
    cursor: default;
    background-color: color-mix(in srgb, var(--ui-card-surface-fallback, rgba(253, 250, 242, 0.94)) 72%, var(--color-text-muted, #5c4a3d) 28%);
    border-color: color-mix(in srgb, var(--ui-card-border, rgba(92, 74, 61, 0.13)) 88%, transparent);
    color: var(--color-text-muted, #5c4a3d);
}

[data-theme="dark"] .ui-cuadro-semanal--matriz-editable input.ui-cuadro-semanal__celda-campo:not(:disabled) {
    background-color: color-mix(in srgb, var(--bs-body-bg, #1a1a1a) 92%, var(--color-blanco, #fff));
}

[data-theme="dark"] .ui-cuadro-semanal--matriz-editable .ui-cuadro-semanal__celda-campo:has(> span):not(.ui-cuadro-semanal__celda-campo--alumno) {
    background-color: color-mix(in srgb, var(--bs-body-bg, #1a1a1a) 88%, var(--color-text-muted, #5c4a3d) 12%);
}

.ui-cuadro-semanal__celda-campo--alumno {
    justify-content: flex-start;
    min-width: var(--ui-cuadro-col-etiqueta, 12.5rem);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--color-text-default, #2d2d2d);
}

.ui-cuadro-semanal--tabla-desplazable tr.table-secondary .ui-cuadro-semanal__celda-campo--alumno {
    text-transform: none;
    font-weight: 400;
}

.ui-cuadro-semanal__celda-campo:not(.ui-cuadro-semanal__celda-campo--alumno) > span {
    width: 100%;
    text-align: center;
}

.ui-cuadro-semanal--tabla-desplazable {
    --ui-cuadro-col-etiqueta: 12.5rem;
    margin-top: 0.25rem;
    overflow: visible;
    max-width: 100%;
}

.ui-cuadro-semanal--tabla-desplazable .ui-cuadro-semanal__inner { overflow: visible; }

.ui-cuadro-semanal--tabla-desplazable .datatable-panel {
    padding: 0;
    margin: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

.ui-cuadro-semanal--tabla-desplazable .ui-cuadro-semanal__tabla {
    width: max-content;
    min-width: 100%;
    table-layout: auto;
}

.ui-cuadro-semanal--tabla-desplazable .ui-cuadro-semanal__th--multilinea {
    white-space: normal;
    overflow-wrap: anywhere;
}

/**
 * Tabla con cabeceras pill granate al ancho de su colspan + cuerpo datatable con rejilla.
 * Reutilizable: reportes libretas, cuadros de notas por bimestre, etc.
 */
.ui-cuadro-semanal--cabecera-pill-rejilla {
    --ui-cuadro-cabecera-pill-col-etiqueta: 18%;
    width: 100%;
    max-width: 100%;
}

.ui-cuadro-semanal--cabecera-pill-rejilla .ui-cuadro-semanal__inner,
.ui-cuadro-semanal--cabecera-pill-rejilla .datatable-panel {
    width: 100%;
    max-width: 100%;
}

.ui-cuadro-semanal--cabecera-pill-rejilla .datatable-panel__table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    min-width: 100%;
    table-layout: fixed;
}

.ui-cuadro-semanal--cabecera-pill-rejilla .datatable-panel__table thead .ui-cuadro-semanal__th {
    min-width: 0;
    width: auto;
    max-width: none;
    padding: 3px 2px;
    font-size: inherit;
    line-height: 1;
    border: none !important;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-weight: inherit;
    vertical-align: middle;
}

.ui-cuadro-semanal--cabecera-pill-rejilla .datatable-panel__table thead .ui-cuadro-semanal__th-pill {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    background: var(--ui-cuadro-granate-suave);
    color: var(--color-blanco, #fff);
    font-weight: 700;
    border-radius: 9px;
}

.ui-cuadro-semanal--cabecera-pill-rejilla .datatable-panel__table thead .ui-cuadro-semanal__th-pill--etiqueta {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3.85rem;
    padding: 10px 8px;
    font-size: 0.78rem;
    line-height: 1.25;
    white-space: normal;
}

.ui-cuadro-semanal--cabecera-pill-rejilla .datatable-panel__table thead .ui-cuadro-semanal__th--hora {
    width: var(--ui-cuadro-cabecera-pill-col-etiqueta);
    min-width: 10rem;
    max-width: none;
    padding: 3px;
    vertical-align: middle;
    position: relative;
}

.ui-cuadro-semanal--cabecera-pill-rejilla .datatable-panel__table thead .ui-cuadro-semanal__th--hora .ui-cuadro-semanal__th-pill--etiqueta {
    position: absolute;
    inset: 4px 3px;
    width: auto;
    min-height: 0;
    height: auto;
}

.ui-cuadro-semanal--cabecera-pill-rejilla .datatable-panel__table thead .ui-cuadro-semanal__th-pill--grupo {
    padding: 9px 10px;
    font-size: 0.8rem;
    line-height: 1.2;
    white-space: normal;
}

.ui-cuadro-semanal--cabecera-pill-rejilla .datatable-panel__table thead .ui-cuadro-semanal__th-pill--subcolumna {
    padding: 7px 4px;
    font-size: 0.75rem;
    line-height: 1.15;
    white-space: nowrap;
}

.ui-cuadro-semanal--cabecera-pill-rejilla .datatable-panel__table thead .ui-cuadro-semanal__th-pill--detalle {
    padding: 5px 2px;
    font-size: 0.65rem;
    line-height: 1.1;
}

.ui-cuadro-semanal--cabecera-pill-rejilla .datatable-panel__table thead tr:last-child .ui-cuadro-semanal__th {
    padding-bottom: 5px;
    vertical-align: top;
}

.ui-cuadro-semanal--cabecera-pill-rejilla .datatable-panel__table tbody td {
    min-width: 0;
    padding: 0.32rem 0.18rem;
    font-size: 0.75rem;
    line-height: 1.25;
}

.ui-cuadro-semanal--cabecera-pill-rejilla .datatable-panel__table tbody td:first-child {
    width: var(--ui-cuadro-cabecera-pill-col-etiqueta);
    min-width: 10rem;
    max-width: none;
    padding-inline: 0.5rem;
    white-space: normal;
    text-align: left !important;
    text-transform: uppercase;
    font-size: 0.72rem;
}

.ui-cuadro-semanal--cabecera-pill-rejilla .datatable-panel__table tbody td:not(:first-child) {
    width: auto;
    min-width: 0;
    max-width: none;
    padding-inline: 0.12rem;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
}

.ui-cuadro-semanal--cabecera-pill-rejilla .datatable-panel__table tbody td.datatable-panel__cell--conclusion {
    white-space: normal;
    text-align: center;
    font-size: 0.68rem;
    line-height: 1.2;
    padding-inline: 0.28rem;
    overflow-wrap: anywhere;
    vertical-align: middle;
}

/**
 * Reportes anchos (libretas areas/competencia) dentro de drawer:
 * table-layout:fixed + width:100% aplastaba celdas (~9px). Scroll horizontal real.
 */
.ui-cuadro-semanal--tabla-desplazable.ui-cuadro-semanal--cabecera-pill-rejilla .datatable-panel__table {
    table-layout: auto;
    width: max-content;
    min-width: 100%;
}

.ui-cuadro-semanal--tabla-desplazable.ui-cuadro-semanal--cabecera-pill-rejilla .datatable-panel__table thead .ui-cuadro-semanal__th--hora .ui-cuadro-semanal__th-pill--etiqueta {
    position: static;
    inset: auto;
    width: 100%;
    min-height: 3.25rem;
    height: auto;
}

.ui-cuadro-semanal--tabla-desplazable.ui-cuadro-semanal--cabecera-pill-rejilla .datatable-panel__table thead .ui-cuadro-semanal__th--hora,
.ui-cuadro-semanal--tabla-desplazable.ui-cuadro-semanal--cabecera-pill-rejilla .datatable-panel__table tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 14rem;
    width: 14rem;
    max-width: 16rem;
    background: var(--color-blanco, #fff);
    box-shadow: 4px 0 8px -4px rgba(0, 0, 0, 0.12);
}

.ui-cuadro-semanal--tabla-desplazable.ui-cuadro-semanal--cabecera-pill-rejilla .datatable-panel__table thead .ui-cuadro-semanal__th--hora {
    z-index: 3;
    background: var(--color-blanco, #fff);
    vertical-align: middle;
}

.ui-cuadro-semanal--tabla-desplazable.ui-cuadro-semanal--cabecera-pill-rejilla .datatable-panel__table tbody td:not(:first-child) {
    min-width: 2.5rem;
    padding-inline: 0.35rem;
}

.ui-cuadro-semanal--tabla-desplazable.ui-cuadro-semanal--cabecera-pill-rejilla .datatable-panel__table thead .ui-cuadro-semanal__th-pill--subcolumna {
    min-width: 5rem;
}

.ui-cuadro-semanal--tabla-desplazable.ui-cuadro-semanal--cabecera-pill-rejilla .datatable-panel__table thead .ui-cuadro-semanal__th-pill--detalle {
    min-width: 3.25rem;
}

.ui-cuadro-semanal--tabla-desplazable.ui-cuadro-semanal--cabecera-pill-rejilla .datatable-panel__table tbody td.datatable-panel__cell--conclusion {
    min-width: 11rem;
    max-width: 16rem;
    padding-inline: 0.45rem;
}

.ui-cuadro-semanal--tabla-desplazable.ui-cuadro-semanal--cabecera-pill-rejilla .datatable-panel__table thead .ui-cuadro-semanal__th-pill--grupo {
    overflow-wrap: anywhere;
}

/**
 * Cabeceras de 4–5 filas (competencia / conclusión): pills más bajas para no comer el viewport.
 */
.ui-cuadro-semanal--cabecera-multinivel.ui-cuadro-semanal--cabecera-pill-rejilla .datatable-panel__table thead .ui-cuadro-semanal__th {
    padding: 2px 1px;
}

.ui-cuadro-semanal--cabecera-multinivel.ui-cuadro-semanal--cabecera-pill-rejilla .datatable-panel__table thead .ui-cuadro-semanal__th-pill--grupo {
    padding: 5px 7px;
    font-size: 0.7rem;
    line-height: 1.15;
}

.ui-cuadro-semanal--cabecera-multinivel.ui-cuadro-semanal--cabecera-pill-rejilla .datatable-panel__table thead .ui-cuadro-semanal__th-pill--etiqueta {
    min-height: 0;
    padding: 8px 6px;
    font-size: 0.72rem;
}

.ui-cuadro-semanal--cabecera-multinivel.ui-cuadro-semanal--cabecera-pill-rejilla .datatable-panel__table thead .ui-cuadro-semanal__th-pill--subcolumna {
    padding: 5px 3px;
    font-size: 0.68rem;
}

.ui-cuadro-semanal--cabecera-multinivel.ui-cuadro-semanal--cabecera-pill-rejilla .datatable-panel__table thead .ui-cuadro-semanal__th-pill--detalle {
    padding: 4px 2px;
    font-size: 0.62rem;
}

.ui-cuadro-semanal--rejilla-uniforme.ui-cuadro-semanal {
    --ui-cuadro-semanal-columnas: 5;
    --ui-cuadro-semanal-tarjeta-alto: 5.5rem;

    & .ui-cuadro-semanal__tabla { table-layout: fixed; }

    & .ui-cuadro-semanal__tabla :is(th, td) {
        width: calc(100% / var(--ui-cuadro-semanal-columnas));
        max-width: calc(100% / var(--ui-cuadro-semanal-columnas));
        min-width: 0;
        box-sizing: border-box;
    }

    & .ui-cuadro-semanal__td { vertical-align: top; overflow: hidden; }
    & .ui-cuadro-semanal__th { min-width: 0; white-space: normal; overflow-wrap: anywhere; }

    & .ui-card-base.ui-cuadro-semanal__tarjeta-celda.ui-card-profile {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        --card-h: auto;
        box-sizing: border-box;
        min-height: var(--ui-cuadro-semanal-tarjeta-alto);
        height: var(--ui-cuadro-semanal-tarjeta-alto);
        max-height: var(--ui-cuadro-semanal-tarjeta-alto);
        padding: 6px 7px 7px;
        gap: 3px;
        justify-content: center;
        overflow-x: hidden;
        overflow-y: auto;
    }

    & :is(.ui-card-profile__detalle, .ui-card-profile__nombre) {
        font-size: 0.72rem;
        line-height: 1.2;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    & .ui-card-profile__detalle.fw-bold { font-size: 0.76rem; }
}

.ui-card-perfil-horizontal {
    --card-w: 100%;
    --card-h: auto;
    --card-r: 18px;
    padding: var(--space-4, 1rem);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-8, 2rem);
}

.ui-card-perfil-horizontal__texto { text-align: center; }

:is(.ui-card-perfil-horizontal__avatar, .ui-card-perfil-horizontal__avatar-fallback) {
    width: 5.25rem;
    height: 5.25rem;
    min-width: 5.25rem;
    border-radius: 999px;
    object-fit: cover;
    border: 2px solid var(--color-granate-active, #9a2d2d);
}

.ui-card-perfil-horizontal__avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text-muted, #5c4a3d);
    background: color-mix(in srgb, var(--color-granate-active, #9a2d2d) 12%, transparent);
}

[data-theme="dark"] .ui-card-perfil-horizontal__avatar-fallback {
    color: var(--color-blanco, #f0ebe0);
    background: rgba(var(--color-granate-rgb, 122, 37, 37), 0.45);
    border-color: var(--color-dorado, #e0b070);
}

.ui-card-perfil-horizontal__etiqueta {
    margin: 0 0 0.2rem;
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-text-muted, #5c4a3d);
}

.ui-card-perfil-horizontal__nombre {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-text-default, #2d2d2d);
    text-transform: uppercase;
}

.ui-card-perfil-horizontal__correo { margin: 0.15rem 0 0; font-size: 0.875rem; line-height: 1.35; }
.ui-card-perfil-horizontal__correo a { text-decoration: underline; text-underline-offset: 2px; }

/* Ficha organigrama: Rol: / Descripcion: mismo tipografia (texto plano). */
.organigrama-ficha-cabecera {
    padding-bottom: var(--space-2, 0.5rem);
    border-bottom: 1px solid color-mix(in srgb, var(--color-granate, #661414) 16%, transparent);
}
.organigrama-ficha-meta {
    font-family: var(--font-base), ui-sans-serif, system-ui, sans-serif;
    font-size: var(--text-sm, 0.875rem);
    font-weight: 400;
    line-height: 1.45;
    color: var(--color-text-default, #2d2d2d);
    overflow-wrap: anywhere;
    word-break: break-word;
}
.organigrama-ficha-meta--con-conteo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    flex-wrap: wrap;
}
.organigrama-ficha-meta__linea {
    margin: 0;
    min-width: 0;
    flex: 1 1 auto;
}
.organigrama-ficha-meta__etiqueta {
    color: var(--color-granate, #661414);
    margin-right: 0.35rem;
}
.organigrama-ficha-meta__conteo {
    flex: 0 0 auto;
    color: var(--color-text-muted, #6c757d);
    white-space: nowrap;
}
.organigrama-ficha-meta__texto--vacia {
    color: var(--color-text-muted, #6c757d);
    font-style: italic;
}
[data-theme="dark"] .organigrama-ficha-cabecera {
    border-bottom-color: color-mix(in srgb, var(--color-blanco, #f0ebe0) 18%, transparent);
}
[data-theme="dark"] .organigrama-ficha-meta {
    color: var(--color-blanco, #f0ebe0);
}
[data-theme="dark"] .organigrama-ficha-meta__etiqueta {
    color: var(--color-dorado, #e0b070);
}
[data-theme="dark"] .organigrama-ficha-meta__texto--vacia {
    color: color-mix(in srgb, var(--color-blanco, #f0ebe0) 65%, transparent);
}

/* Ficha personal en drawer organigrama de roles (foto + nombre + cargo + sede + pill). */
.organigrama-personal-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3, 0.75rem);
}
.ui-card-perfil-horizontal--organigrama {
    --card-r: 16px;
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 0.55rem;
    /* Padding simetrico: el pill va a la derecha, sin empujar la foto hacia abajo. */
    padding: 0.7rem 2.35rem 0.7rem 1.15rem;
    border: 1px solid color-mix(in srgb, var(--color-text-muted, #6c757d) 22%, transparent);
    background: var(--color-blanco, #fff);
    box-shadow: none;
}
.ui-card-perfil-horizontal--organigrama .ui-card-profile__avatar-wrap {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    margin: 0 0 0 0.35rem;
    padding: 0;
    line-height: 0;
    align-self: center;
}
.ui-card-perfil-horizontal--organigrama :is(.ui-card-profile__avatar-img, .ui-card-profile__avatar-fallback) {
    width: 4.75rem;
    height: 4.75rem;
    min-width: 4.75rem;
    margin: 0;
}
.ui-card-perfil-horizontal--organigrama .ui-card-profile__avatar-fallback {
    font-size: 0.95rem;
    font-weight: 700;
}
.ui-card-perfil-horizontal--organigrama .ui-card-perfil-horizontal__texto {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    align-self: center;
}
.ui-card-perfil-horizontal--organigrama .ui-card-perfil-horizontal__nombre {
    font-size: 0.8125rem;
    line-height: 1.15;
}
.ui-card-perfil-horizontal--organigrama .ui-card-perfil-horizontal__linea {
    width: 100%;
    max-width: 9rem;
    height: 1px;
    margin: 0.3rem auto 0.35rem;
    background: color-mix(in srgb, var(--color-text-muted, #6c757d) 35%, transparent);
}
.ui-card-perfil-horizontal--organigrama .ui-card-perfil-horizontal__cargo {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: var(--color-granate, #661414);
}
.ui-card-perfil-horizontal--organigrama .ui-card-perfil-horizontal__sede {
    margin: 0.15rem 0 0;
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--color-text-default, #2d2d2d);
}
.ui-card-perfil-horizontal--organigrama .ui-card-perfil-horizontal__accion {
    position: absolute;
    right: 0.55rem;
    bottom: 0.45rem;
    top: auto;
    transform: none;
    --btn-accion-pill-h: 1.625rem;
    --btn-accion-pill-px: 0.45rem;
    --btn-accion-pill-min-w: 1.625rem;
}
.ui-card-perfil-horizontal--organigrama .ui-card-perfil-horizontal__accion svg {
    width: 0.85rem;
    height: 0.85rem;
}
[data-theme="dark"] .ui-card-perfil-horizontal--organigrama {
    background: color-mix(in srgb, var(--color-blanco, #f0ebe0) 8%, transparent);
    border-color: color-mix(in srgb, var(--color-blanco, #f0ebe0) 22%, transparent);
}
[data-theme="dark"] .ui-card-perfil-horizontal--organigrama .ui-card-perfil-horizontal__cargo {
    color: var(--color-dorado, #e0b070);
}
[data-theme="dark"] .ui-card-perfil-horizontal--organigrama .ui-card-perfil-horizontal__linea {
    background: color-mix(in srgb, var(--color-blanco, #f0ebe0) 28%, transparent);
}
@media (max-width: 991.98px) {
    .organigrama-personal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 575.98px) {
    .organigrama-personal-grid {
        grid-template-columns: 1fr;
    }
    .ui-card-perfil-horizontal--organigrama {
        flex-wrap: wrap;
        justify-content: center;
        padding: 0.7rem 0.7rem 0.7rem 0.55rem;
        padding-right: 2.35rem;
    }
}

/* Calendario mes (citas): rejilla 7 columnas y tarjetas dia */
.ui-cuadro-semanal--calendario-mes.ui-cuadro-semanal--rejilla-uniforme.ui-cuadro-semanal {
    --ui-cuadro-semanal-columnas: 7;
    --ui-cuadro-semanal-tarjeta-alto: 8.5rem;
}

.ui-cuadro-semanal--calendario-mes {
    & .ui-card-base.ui-cuadro-semanal__tarjeta-celda.ui-cuadro-semanal__tarjeta-dia {
        position: relative;
        justify-content: flex-start;
        align-items: stretch;
        text-align: center;
        padding: 1.45rem 6px 6px;
        gap: 0.3rem;
    }

    & .ui-card-base.ui-cuadro-semanal__tarjeta-celda.ui-cuadro-semanal__tarjeta-dia:has(.ui-cuadro-semanal__tarjeta-dia-horarios) {
        border: 2px solid var(--color-dorado, #d99a56);
        box-shadow: 0 0 0 3px rgba(var(--color-dorado-rgb, 217, 154, 86), 0.18);
    }

    & .ui-cuadro-semanal__tarjeta-dia-numero {
        position: absolute;
        top: 6px;
        left: 8px;
        font-size: 0.8rem;
        font-weight: 700;
        line-height: 1;
        color: var(--color-text-default, #2d2d2d);
    }

    & .ui-cuadro-semanal__tarjeta-dia-acciones {
        position: absolute;
        top: 4px;
        right: 6px;
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
    }

    & .ui-cuadro-semanal__tarjeta-dia-badge {
        min-width: 1.2rem;
        height: 1.2rem;
        padding: 0 0.3rem;
        border-radius: 999px;
        font-size: 0.62rem;
        font-weight: 700;
        line-height: 1.2rem;
        color: var(--color-blanco, #fff);
        background: var(--color-granate-active, #9a2d2d);
    }

    & .ui-cuadro-semanal__tarjeta-dia-badge--interactivo {
        border: none;
        cursor: help;
        min-width: 1.35rem;
        height: 1.35rem;
        padding: 0 0.35rem;
        font-size: 0.7rem;
        line-height: 1.35rem;

        &:is(:hover, :focus-visible) {
            background: var(--color-granate-deep, #7a1919);
        }

        &:focus-visible {
            outline: 2px solid var(--color-dorado, #d99a56);
            outline-offset: 2px;
        }
    }

    & .ui-cuadro-semanal__tarjeta-dia-horarios {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.2rem;
        min-height: 0;
        width: 100%;
        padding: 0 0.15rem;
        overflow: hidden;
    }

    & .ui-cuadro-semanal__tarjeta-dia-horarios--multiple {
        justify-content: flex-start;
        max-height: 4.6rem;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: y proximity;
    }

    & .ui-cuadro-semanal__tarjeta-dia-horarios--multiple::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }

    & .ui-cuadro-semanal__tarjeta-dia-bloque-reserva {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.1rem;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0.35rem 0.55rem;
        border: 2px solid color-mix(in srgb, var(--color-granate, #661414) 34%, var(--color-crema, #f7f3e8));
        border-radius: var(--radius-md, 0.5rem);
        background-color: rgba(var(--color-granate-rgb, 102, 20, 20), 0.12);
        color: var(--color-granate-deep, #7a1919);
        text-align: center;
        cursor: pointer;
        font: inherit;
        box-shadow: none;

        @supports (background: color-mix(in srgb, red 12%, white)) {
            background-color: color-mix(in srgb, var(--color-granate-active, #9a2d2d) 12%, var(--ui-card-surface-fallback, #fff));
        }

        & .ui-cuadro-semanal__tarjeta-dia-rango {
            font-size: 0.76rem;
            line-height: 1.3;
            font-weight: 600;
        }

        & .ui-cuadro-semanal__tarjeta-dia-sesion {
            font-size: 0.7rem;
            line-height: 1.28;
        }

        &:is(:hover, :focus-visible) {
            background-color: color-mix(in srgb, var(--color-granate-active, #9a2d2d) 18%, var(--ui-card-surface-fallback, #fff));
            border-color: var(--color-granate-active, #9a2d2d);
        }

        &:focus-visible {
            outline: 2px solid var(--color-dorado, #d99a56);
            outline-offset: 2px;
        }
    }

    & .ui-cuadro-semanal__tarjeta-dia-bloque-reserva--agrupado {
        gap: 0;
        padding: 0.22rem 0.35rem;
        border-radius: var(--radius-md, 0.5rem);
        cursor: default;

        &:is(:hover, :focus-visible) {
            background-color: color-mix(in srgb, var(--color-granate-active, #9a2d2d) 12%, var(--ui-card-surface-fallback, #fff));
            border-color: color-mix(in srgb, var(--color-granate, #661414) 34%, var(--color-crema, #f7f3e8));
        }

        & .ui-cuadro-semanal__tarjeta-dia-rango {
            font-size: 0.72rem;
            line-height: 1.28;
        }
    }

    & .ui-cuadro-semanal__tarjeta-dia-rango-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.08rem;
        width: 100%;
        margin: 0;
        padding: 0.2rem 0.15rem;
        border: none;
        border-radius: 0;
        background: transparent;
        color: inherit;
        text-align: center;
        cursor: pointer;
        font: inherit;

        & + & {
            border-top: 1px solid color-mix(in srgb, var(--color-granate-active, #9a2d2d) 22%, transparent);
        }

        &:is(:hover, :focus-visible) {
            background-color: color-mix(in srgb, var(--color-granate-active, #9a2d2d) 14%, transparent);

            & .ui-cuadro-semanal__tarjeta-dia-rango {
                color: var(--color-granate-deep, #7a1919);
            }
        }

        &:focus-visible {
            outline: 2px solid var(--color-dorado, #d99a56);
            outline-offset: 1px;
            border-radius: 0.2rem;
        }
    }

    & .ui-cuadro-semanal__tarjeta-dia-sesion {
        font-size: var(--text-xs, 0.6875rem);
        line-height: 1.25;
        font-weight: 500;
        color: var(--color-granate-active, #9a2d2d);
    }

    & :is(.ui-cuadro-semanal__tarjeta-dia-rango, .ui-cuadro-semanal__tarjeta-dia-vacio) {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.72rem;
        line-height: 1.25;
        text-align: center;
    }

    & .ui-cuadro-semanal__tarjeta-dia-rango {
        font-size: 0.68rem;
        font-weight: 600;
        color: var(--color-text-default, #2d2d2d);
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    & .ui-cuadro-semanal__tarjeta-dia-horarios > .ui-cuadro-semanal__tarjeta-dia-rango {
        gap: 0.25rem;
        max-width: 100%;
        padding: 0.18rem 0.5rem;
        border: 1px solid var(--color-granate, #661414);
        border-radius: 999px;
        background-color: rgba(var(--color-granate-rgb, 102, 20, 20), 0.12);
        color: var(--color-granate-deep, #5c1212);
        font-weight: 700;
        overflow-wrap: normal;
        word-break: normal;

        @supports (background: color-mix(in srgb, red 18%, white)) {
            background-color: color-mix(in srgb, var(--btn-accion-pill-rojo-bg, var(--color-granate-active, #9a2d2d)) 18%, var(--color-crema, #f7f3e8));
        }

        &::before {
            content: "\f017";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            font-size: 0.72em;
            line-height: 1;
            flex-shrink: 0;
        }
    }

    /* Calendario panel: personal e institucional usan granate por defecto (--evento-tint puede sobreescribir) */
    & .ui-cuadro-semanal__tarjeta-dia-horarios > .ui-cuadro-semanal__tarjeta-dia-rango--personal {
        border-color: var(--evento-tint, var(--color-granate, #661414));
        background-color: color-mix(in srgb, var(--evento-tint, var(--color-granate, #661414)) 14%, var(--color-crema, #f7f3e8));
        color: var(--evento-tint, var(--color-granate, #661414));

        &::before {
            content: "\f007";
        }
    }

    & .ui-cuadro-semanal__tarjeta-dia-horarios > .js-calendario-chip {
        cursor: pointer;
    }

    & .ui-cuadro-semanal__tarjeta-dia-horarios > .js-calendario-chip:not(.ui-cuadro-semanal__tarjeta-dia-rango--personal) {
        border-color: var(--evento-tint, var(--color-granate, #661414));
        color: var(--evento-tint, var(--color-granate-deep, #5c1212));
        background-color: color-mix(in srgb, var(--evento-tint, var(--color-granate-active, #9a2d2d)) 18%, var(--color-crema, #f7f3e8));
    }

    & .ui-cuadro-semanal__tarjeta-dia-horarios--multiple > .ui-cuadro-semanal__tarjeta-dia-rango {
        padding: 0.12rem 0.42rem;
        font-size: 0.66rem;
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    & .ui-cuadro-semanal__tarjeta-dia-vacio {
        flex: 1 1 auto;
        width: 100%;
        min-height: 0;
        color: var(--color-text-muted, #5c4a3d);
    }

    /* Contadores del mes (colegio vs personal), sin listar títulos en la celda */
    & .ui-cuadro-semanal__tarjeta-dia-contadores {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        flex: 1 1 auto;
        min-height: 0;
        padding: 0.15rem 0;
    }

    & .ui-cuadro-semanal__tarjeta-dia-contador {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.05rem;
        min-width: 2.75rem;
        min-height: 2.1rem;
        padding: 0.2rem 0.4rem;
        border-radius: 0.65rem;
        border: 1px solid transparent;
        font-size: 0.75rem;
        font-weight: 700;
        line-height: 1;
        cursor: pointer;
    }

    & .ui-cuadro-semanal__tarjeta-dia-contador-num {
        font-size: 0.8rem;
        font-weight: 700;
    }

    & .ui-cuadro-semanal__tarjeta-dia-contador-lbl {
        font-size: 0.55rem;
        font-weight: 600;
        letter-spacing: 0.01em;
        text-transform: none;
        opacity: 0.9;
    }

    & .ui-cuadro-semanal__tarjeta-dia-contador--colegio {
        border-color: var(--color-granate, #661414);
        color: var(--color-granate-deep, #5c1212);
        background-color: color-mix(in srgb, var(--color-granate-active, #9a2d2d) 14%, var(--color-blanco, #fff));
    }

    & .ui-cuadro-semanal__tarjeta-dia-contador--personal {
        border-color: var(--color-text-default, #1f1e1e);
        color: var(--color-text-default, #1f1e1e);
        background-color: color-mix(in srgb, var(--color-text-muted, #5c4a3d) 16%, var(--color-blanco, #fff));
    }

    & .ui-cuadro-semanal__tarjeta-dia-contador:focus-visible {
        outline: var(--focus-ring-width, 2px) solid var(--color-dorado, #d4a84b);
        outline-offset: 2px;
    }

    & .ui-cuadro-semanal__tarjeta-dia--con-eventos {
        cursor: default;
    }

    & .ui-cuadro-semanal__tarjeta-dia-punto {
        position: absolute;
        top: 0.45rem;
        right: 0.5rem;
        width: 0.55rem;
        height: 0.55rem;
        border-radius: 50%;
        background: var(--color-dorado, #d99a56);
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-dorado, #d99a56) 28%, transparent);
    }

    & .ui-cuadro-semanal__tarjeta-dia-raya {
        display: block;
        width: 62%;
        height: 0.2rem;
        margin: 0.15rem auto 0.1rem;
        border-radius: 999px;
        background: var(--color-dorado, #d99a56);
    }

    & .ui-cuadro-semanal__tarjeta-dia--hoy {
        background: var(--color-granate-active, #9a2d2d) !important;
        border-color: var(--color-granate-active, #9a2d2d) !important;
        color: var(--color-blanco, #fff);
    }

    & .ui-cuadro-semanal__tarjeta-dia--hoy .ui-cuadro-semanal__tarjeta-dia-numero {
        color: var(--color-blanco, #fff);
    }

    & .ui-cuadro-semanal__tarjeta-dia--hoy .ui-cuadro-semanal__tarjeta-dia-contador--colegio {
        color: var(--color-granate-deep, #5c1212);
        background-color: color-mix(in srgb, var(--color-granate-active, #9a2d2d) 14%, var(--color-blanco, #fff));
        border-color: var(--color-granate, #661414);
    }

    & .ui-cuadro-semanal__tarjeta-dia--hoy .ui-cuadro-semanal__tarjeta-dia-contador--personal {
        color: var(--color-text-default, #1f1e1e);
        background-color: color-mix(in srgb, var(--color-text-muted, #5c4a3d) 16%, var(--color-blanco, #fff));
        border-color: var(--color-text-default, #1f1e1e);
    }

    & .ui-cuadro-semanal__tarjeta-dia--resaltado:not(.ui-cuadro-semanal__tarjeta-dia--hoy) {
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-dorado, #d99a56) 75%, transparent);
        border-color: var(--color-dorado, #d99a56);
    }

    & .ui-cuadro-semanal__tarjeta-dia-pie {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.35rem;
        margin-top: auto;
        padding-top: 0.15rem;
    }

    & .ui-cuadro-semanal__celda-hueco { min-height: var(--ui-cuadro-semanal-tarjeta-alto); }

    & .ui-cuadro-semanal__tarjeta-dia--fin-de-semana .ui-cuadro-semanal__tarjeta-dia-vacio { opacity: 0.85; }
}

/* Panel Calendario / eventos: ver calendario-eventos.css (.calendario-panel-*, --calendario-panel) */

/* Calendario mes en pantallas estrechas: desplazamiento horizontal en vez de comprimir 7 columnas */
@media (max-width: 991.98px) {
    .ui-cuadro-semanal--calendario-mes.ui-cuadro-semanal--rejilla-uniforme.ui-cuadro-semanal .ui-cuadro-semanal__tabla {
        width: max-content;
        min-width: 100%;
        table-layout: auto;
    }

    .ui-cuadro-semanal--calendario-mes.ui-cuadro-semanal--rejilla-uniforme.ui-cuadro-semanal .ui-cuadro-semanal__tabla :is(th, td) {
        width: auto;
        max-width: none;
        min-width: 6.5rem;
    }

    .ui-cuadro-semanal--calendario-mes .ui-cuadro-semanal__th {
        white-space: nowrap;
    }
}

@supports not (background: color-mix(in srgb, red 50%, blue 50%)) {
    :root,
    [data-theme="light"] { --ui-cuadro-granate-suave: #ac5050; }
    .ui-card-base--borde-granate { border-color: rgba(var(--color-granate-rgb, 102, 20, 20), 0.28); }
    .ui-card-perfil-horizontal__avatar-fallback { background: rgba(var(--color-granate-rgb, 102, 20, 20), 0.12); }
}

/* Rejilla citas académicas pendientes: ui-card-profile compacta */
#reservasCitasAcademicasGrid > .ui-card-profile-col {
    display: flex;
}

#reservasCitasAcademicasGrid .ui-card-profile {
    --card-r: 14px;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    padding: 8px 6px 10px;
    gap: 4px;
}

#reservasCitasAcademicasGrid .ui-cuadro-semanal__barra-superior {
    margin-bottom: 0.15rem;
}

#reservasCitasAcademicasGrid :is(.ui-card-profile__avatar-img, .ui-card-profile__avatar-fallback) {
    width: 5.25rem;
    height: 5.25rem;
}

#reservasCitasAcademicasGrid .ui-card-profile__avatar-fallback {
    font-size: 0.95rem;
}

#reservasCitasAcademicasGrid .ui-card-profile__nombre {
    font-size: 0.78rem;
    line-height: 1.15;
}

#reservasCitasAcademicasGrid .ui-card-profile__detalle {
    font-size: 0.72rem;
    line-height: 1.2;
}

#reservasCitasAcademicasGrid .ui-card-profile__bloque-nombre {
    min-height: 0;
}

#reservasCitasAcademicasGrid .ui-card-profile__bloque-nombre .ui-card-profile__nombre,
#reservasCitasAcademicasGrid .ui-card-profile__bloque-detalles-cita .ui-card-profile__detalle {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

#reservasCitasAcademicasGrid .ui-card-profile > .ui-card-profile__detalle.text-primary {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

#reservasCitasAcademicasGrid .ui-card-profile__bloque-detalles-cita {
    min-height: 0;
}

#reservasCitasAcademicasGrid .ui-card-profile__bloque-detalles-cita .ui-card-profile__detalle {
    font-size: 0.8rem;
    line-height: 1.25;
}

#reservasCitasAcademicasGrid [data-reserva-pie] {
    min-height: 0;
    padding-top: 0.35rem !important;
}

#reservasCitasAcademicasGrid [data-reserva-pie] .ui-card-profile__acciones {
    min-width: calc(2 * 2rem + 0.5rem);
    gap: 6px;
}

#reservasCitasAcademicasGrid [data-reserva-pie] .ui-card-profile__acciones:empty {
    display: none;
    min-width: 0;
}

/* Realizar venta — campos integrados al fondo del panel (crema), no blanco */
.realizar-venta-form .form-floating,
.realizar-venta-form .floating-field-icon,
.realizar-venta-form .form-combobox-floating .form-floating {
    --floating-bg: var(--panel-main-bg, var(--color-crema, #f7f3e8));
    --panel-floating-disabled-bg: var(--panel-main-bg, var(--color-crema, #f7f3e8));
}

.realizar-venta-form .selector {
    --floating-bg: var(--panel-main-bg, var(--color-crema, #f7f3e8));
    --panel-selector-combobox-bg: var(--panel-main-bg, var(--color-crema, #f7f3e8));
    --panel-selector-etiqueta-flotante-bg: var(--panel-main-bg, var(--color-crema, #f7f3e8));
    --panel-selector-panel-bg: var(--panel-main-bg, var(--color-crema, #f7f3e8));
}

.realizar-venta-form .selector__panel,
.realizar-venta-form .selector__busqueda {
    background-color: var(--panel-main-bg, var(--color-crema, #f7f3e8));
}

.realizar-venta-form .selector__opcion {
    background-color: transparent;
}

.realizar-venta-form .selector__busqueda:-webkit-autofill,
.realizar-venta-form .selector__busqueda:autofill {
    box-shadow: 0 0 0 1000px var(--panel-main-bg, var(--color-crema, #f7f3e8)) inset;
}

@supports (appearance: base-select) {
    .realizar-venta-form .form-combobox-floating .form-floating > select.form-select::picker(select) {
        background-color: var(--panel-main-bg, var(--color-crema, #f7f3e8));
    }

    .realizar-venta-form .form-combobox-floating .form-floating > select.form-select option {
        background-color: transparent;
    }
}

.realizar-venta-form .realizar-venta-pasos {
    --realizar-venta-paso-r: 16px;
    --tren-pasos-progreso: 0%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: min(38rem, calc(100dvh - 14rem));
    min-height: 30rem;
}

.realizar-venta-form .realizar-venta-pasos__detalle {
    --card-w: 100%;
    --card-h: auto;
    --card-r: var(--realizar-venta-paso-r);
    --floating-bg: var(--panel-main-bg, var(--color-crema, #f7f3e8));
    --panel-floating-disabled-bg: var(--panel-main-bg, var(--color-crema, #f7f3e8));
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    border-color: color-mix(in srgb, var(--color-granate, #661414) 30%, var(--color-crema, #f7f3e8));
    background-color: var(--panel-main-bg, var(--color-crema, #f7f3e8));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.realizar-venta-form .realizar-venta-form__pie-fijo {
    position: relative;
    flex: 0 0 auto;
    flex-shrink: 0;
    margin-top: 0;
    padding-top: 0.5rem;
    padding-bottom: 3.15rem;
}

.realizar-venta-form .realizar-venta-paso-panel {
    display: none;
}

.realizar-venta-form .realizar-venta-paso-panel[hidden] {
    display: none !important;
}

.realizar-venta-form .realizar-venta-paso-panel.show {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 100%;
}

.realizar-venta-form .realizar-venta-paso-panel--entrando .realizar-venta-paso-panel__encabezado,
.realizar-venta-form .realizar-venta-paso-panel--entrando .realizar-venta-paso__cuerpo {
    animation: realizar-venta-panel-entrada 0.38s var(--panel-ease, ease) both;
}

.realizar-venta-form .realizar-venta-paso-panel--entrando .realizar-venta-paso__cuerpo {
    animation-delay: 0.04s;
}

@keyframes realizar-venta-panel-entrada {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.realizar-venta-form .realizar-venta-paso-panel__encabezado {
    flex-shrink: 0;
    padding: 0.65rem 0.9rem 0.55rem;
    border-bottom: 1px solid rgba(var(--color-granate-rgb, 102, 20, 20), 0.12);
    background: var(--panel-main-bg, var(--color-crema, #f7f3e8));
}

.realizar-venta-form .realizar-venta-paso-panel__kicker {
    margin: 0 0 0.2rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(var(--color-granate-rgb, 102, 20, 20), 0.62);
}

.realizar-venta-form .realizar-venta-paso-panel__titulo {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-granate, #661414);
}

.realizar-venta-form .realizar-venta-paso__cuerpo {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
    padding: 0.75rem 0.9rem;
}

.realizar-venta-form #panel-cobro.show .realizar-venta-paso__cuerpo {
    justify-content: flex-start;
}

/* Paso 3: card alto completo (tabla + captura), sin recorte en contenedor fijo */
.realizar-venta-form .realizar-venta-pasos--cobro-activo {
    height: auto;
    min-height: 30rem;
}

.realizar-venta-form .realizar-venta-pasos--cobro-activo .realizar-venta-pasos__detalle {
    flex: 0 1 auto;
    min-height: auto;
    overflow-y: visible;
}

.realizar-venta-form .realizar-venta-pasos--cobro-activo .realizar-venta-paso-panel.show {
    flex: 0 1 auto;
    min-height: auto;
}

.realizar-venta-form .realizar-venta-pasos--cobro-activo #panel-cobro.show .realizar-venta-paso__cuerpo {
    flex: 0 1 auto;
    min-height: auto;
}

@media (max-width: 767.98px) {
    .realizar-venta-form .realizar-venta-paso-panel__titulo {
        font-size: 0.95rem;
    }
}

.realizar-venta-form .realizar-venta-aviso__icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border: 1px solid rgba(26, 26, 26, 0.28);
    border-radius: 50%;
    color: rgba(26, 26, 26, 0.75);
    font-size: 1rem;
    line-height: 1;
}

[data-theme="dark"] .realizar-venta-form .realizar-venta-aviso__icono {
    border-color: rgba(240, 235, 224, 0.28);
    color: rgba(240, 235, 224, 0.75);
}

.realizar-venta-form #alertaPasosVenta {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin-bottom: 0;
    padding: 0.65rem 0.75rem;
    overflow: visible;
}

.realizar-venta-form .realizar-venta-form__pie-acciones {
    position: absolute;
    right: 0;
    bottom: 0.25rem;
    left: 0;
    margin: 0;
    display: flex;
    justify-content: flex-end;
}

.realizar-venta-form #btnSiguientePasoVenta {
    --btn-burbuja-w: 13.5rem;
    min-width: 13.5rem;
    white-space: nowrap;
}

.realizar-venta-form #btnSiguientePasoVenta:hover,
.realizar-venta-form #btnSiguientePasoVenta:focus,
.realizar-venta-form #btnSiguientePasoVenta:active,
.realizar-venta-form #btnSiguientePasoVenta:focus-visible {
    background-color: #7a1919;
    border-color: #7a1919;
    color: #ffffff;
    box-shadow: none;
}

.realizar-venta-form .realizar-venta-cobro__badge-seleccion {
    padding: 0 0.85rem;
    border: 1px solid rgba(92, 74, 61, 0.3);
    font-size: 0.85rem;
    font-weight: 500;
    background: var(--panel-main-bg, var(--color-crema, #f7f3e8));
    color: var(--color-text-default);
}

.realizar-venta-form #tablaCobroVenta .editor-filas-tiempo-celda-solo-lectura {
    pointer-events: none;
    cursor: default;
}

.realizar-venta-form #tablaCobroVenta .editor-filas-tiempo-celda-solo-lectura .form-control[readonly] {
    cursor: default;
    opacity: 1;
}

.realizar-venta-form #tablaCobroVenta {
    table-layout: fixed;
    width: 100%;
}

.realizar-venta-form #tablaCobroVenta th:nth-child(1),
.realizar-venta-form #tablaCobroVenta td:nth-child(1) {
    width: 2.75rem;
}

.realizar-venta-form #tablaCobroVenta th:nth-child(2),
.realizar-venta-form #tablaCobroVenta td:nth-child(2) {
    width: 38%;
}

.realizar-venta-form #tablaCobroVenta th:nth-child(3),
.realizar-venta-form #tablaCobroVenta td:nth-child(3) {
    width: 12.5rem;
}

.realizar-venta-form #tablaCobroVenta th:nth-child(4),
.realizar-venta-form #tablaCobroVenta td:nth-child(4) {
    width: 8.25rem;
    padding-inline: 0.55rem;
}

.realizar-venta-form #tablaCobroVenta th:nth-child(5),
.realizar-venta-form #tablaCobroVenta td:nth-child(5) {
    width: 7.25rem;
    white-space: nowrap;
    padding-inline: 0.35rem;
}

.realizar-venta-form #tablaCobroVenta .datatable-panel__acciones {
    width: 5.25rem;
    padding-inline: 0.35rem;
}

.realizar-venta-form #tablaCobroVenta .cobro-celda-saldo .cobro-monto-ed,
.realizar-venta-form #tablaCobroVenta .cobro-celda-saldo .cobro-monto-saldo {
    max-width: 7.25rem;
    min-width: 5.25rem;
}

.realizar-venta-form #tablaCobroVenta .cobro-celda-saldo .form-control {
    padding-inline: 0.45rem;
}

.realizar-venta-form #tablaCobroVenta .realizar-venta-cobro-vence {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-default);
    white-space: nowrap;
}

.realizar-venta-form #tablaCobroVenta .realizar-venta-cobro-detalle {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
    margin: 0;
}

.realizar-venta-form #tablaCobroVenta .realizar-venta-cobro-detalle__fila {
    display: grid;
    grid-template-columns: minmax(4.75rem, auto) 1fr;
    align-items: baseline;
    column-gap: 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.3;
}

.realizar-venta-form #tablaCobroVenta .realizar-venta-cobro-detalle dt {
    margin: 0;
    color: var(--texto-secundario, #6c757d);
    font-weight: 500;
}

.realizar-venta-form #tablaCobroVenta .realizar-venta-cobro-detalle dd {
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.realizar-venta-form .file-input-floating-card-field,
.realizar-venta-form .file-input-floating-card {
    --floating-bg: transparent;
}

.realizar-venta-form .file-input-floating-card {
    background: transparent;
    overflow: visible;
}

.realizar-venta-form .file-input-floating-card__native::file-selector-button,
.realizar-venta-form .file-input-floating-card__native::-webkit-file-upload-button {
    background: transparent;
}

.realizar-venta-form #alertaPasosVenta .ui-card-aviso-panel__texto li {
    margin-bottom: 0.15rem;
}

/* Plantilla informe (drawer) — tren de pasos centrado, círculos completos */
.form-drawer .plantilla-informe-pasos {
    --plantilla-informe-paso-r: 12px;
    --plantilla-informe-tren-circulo: 2.5rem;
    --tren-pasos-progreso: 0%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 0 0 auto;
    min-height: auto;
    padding-bottom: 0.5rem;
}

.form-drawer .plantilla-informe-pasos__tren {
    overflow: visible;
    padding: 0.35rem 0.5rem 0;
}

.form-drawer .plantilla-informe-pasos__tren .tren-pasos__pista {
    top: calc(0.35rem + (var(--plantilla-informe-tren-circulo) / 2));
    left: 10%;
    right: 10%;
    transform: translateY(-50%);
    height: 3px;
}

.form-drawer .plantilla-informe-pasos__tren .tren-pasos__lista {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: clamp(1.25rem, 6vw, 3.5rem);
    width: 100%;
    margin: 0 auto;
    padding: 0 0.25rem 0.35rem;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.form-drawer .plantilla-informe-pasos__tren .tren-pasos__item {
    flex: 0 0 auto;
    min-width: 4.75rem;
    max-width: 7.5rem;
}

.form-drawer .tren-pasos--plantilla-informe .tren-pasos__btn {
    width: auto;
    min-width: 4.75rem;
    max-width: 7.5rem;
    margin-inline: auto;
    align-items: center;
}

.form-drawer .tren-pasos--plantilla-informe .tren-pasos__titulo {
    display: block;
    width: 100%;
    max-width: 7.5rem;
    text-align: center;
    word-break: break-word;
    hyphens: auto;
}

.form-drawer .tren-pasos--plantilla-informe .tren-pasos__indicador {
    box-sizing: border-box;
    width: var(--plantilla-informe-tren-circulo);
    height: var(--plantilla-informe-tren-circulo);
    min-width: var(--plantilla-informe-tren-circulo);
    min-height: var(--plantilla-informe-tren-circulo);
    aspect-ratio: 1;
    border-radius: 50%;
    padding: 0;
    line-height: 1;
    overflow: visible;
    background-color: var(--panel-drawer-bg, var(--bs-body-bg, #fff));
    border: 2px solid color-mix(in srgb, var(--color-granate, #661414) 34%, var(--panel-drawer-bg, #fff));
    color: var(--color-text-default, #2d2d2d);
    box-shadow: 0 0 0 3px var(--panel-drawer-bg, var(--bs-body-bg, #fff));
}

.form-drawer .tren-pasos--plantilla-informe .tren-pasos__check {
    display: none !important;
}

.form-drawer .tren-pasos--plantilla-informe .tren-pasos__btn--completada .tren-pasos__numero {
    display: flex !important;
}

.form-drawer .tren-pasos--plantilla-informe .tren-pasos__numero {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    line-height: 1;
}

.form-drawer .tren-pasos--plantilla-informe .tren-pasos__btn--activa .tren-pasos__indicador {
    transform: none;
    background-color: var(--color-granate, #661414);
    border-color: var(--color-granate, #661414);
    color: #fff;
    box-shadow:
        0 0 0 3px var(--panel-drawer-bg, var(--bs-body-bg, #fff)),
        0 0.15rem 0.5rem rgba(var(--color-granate-rgb, 102, 20, 20), 0.2);
}

.form-drawer .tren-pasos--plantilla-informe .tren-pasos__btn--completada .tren-pasos__indicador {
    background-color: var(--color-granate, #661414);
    border-color: var(--color-granate, #661414);
    color: #fff;
}

.form-drawer .tren-pasos--plantilla-informe .tren-pasos__btn--activa .tren-pasos__titulo,
.form-drawer .tren-pasos--plantilla-informe .tren-pasos__btn--completada:not(.tren-pasos__btn--activa) .tren-pasos__titulo {
    color: var(--color-granate-active, #9a2d2d);
}

.form-drawer .tren-pasos--plantilla-informe .tren-pasos__btn:disabled {
    opacity: 0.55;
}

.form-drawer .plantilla-informe-pasos__detalle {
    --card-w: 100%;
    --card-r: var(--plantilla-informe-paso-r);
    --floating-bg: var(--panel-main-bg, var(--color-crema, #f7f3e8));
    --panel-floating-disabled-bg: var(--panel-main-bg, var(--color-crema, #f7f3e8));
    display: block;
    flex: 0 0 auto;
    min-height: auto;
    overflow: visible;
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 0;
}

.form-drawer .plantilla-informe-campo {
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}

.form-drawer .plantilla-informe-campos .plantilla-informe-campo + .plantilla-informe-campo {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid color-mix(in srgb, var(--color-granate, #661414) 18%, var(--color-crema, #f7f3e8));
}

.form-drawer .plantilla-informe-campo .form-floating {
    --floating-bg: var(--panel-main-bg, var(--color-crema, #f7f3e8));
    --panel-floating-disabled-bg: var(--panel-main-bg, var(--color-crema, #f7f3e8));
}

.form-drawer .plantilla-informe-seccion > .row > .col-auto.plantilla-informe-fila__accion,
.form-drawer .plantilla-informe-campo > .row > .col-auto.plantilla-informe-fila__accion {
    align-self: center;
    flex-shrink: 0;
}

.form-drawer .plantilla-informe-fila__accion .btn-accion-pill {
    flex-shrink: 0;
}

.form-drawer .plantilla-informe-campos-vacio.ui-card-aviso-panel {
    --card-r: 8px;
    border-radius: 8px;
    padding: 0.45rem 0.75rem;
    min-height: 0;
    text-align: center;
}

.form-drawer .plantilla-informe-campos-vacio .ui-card-aviso-panel__texto {
    font-size: 0.8125rem;
    line-height: 1.35;
}

.form-drawer .plantilla-editor-tabla .plantilla-celda-editor {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 8.5rem;
}

.form-drawer .plantilla-editor-tabla .editor-filas-tiempo-celda-break .btn-accion-pill {
    flex-shrink: 0;
}

.form-drawer .plantilla-informe-seccion__pie {
    scroll-margin-bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px));
    flex-shrink: 0;
}

#drawerPlantillaInformeCita .form-drawer .plantilla-informe-pasos {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}

.form-drawer .plantilla-informe-seccion-tab .plantilla-informe-seccion-cuerpo {
    overflow: visible;
    min-height: 0;
}

.panel-drawer .plantilla-informe-campo .selector__panel:not([data-selector-panel-fijo]),
.panel-drawer .plantilla-campo-autocompletado-wrap .selector__panel:not([data-selector-panel-fijo]),
.panel-drawer #bloquePlantillaCompartidos .selector__panel:not([data-selector-panel-fijo]) {
    width: min(100%, 26.25rem);
    max-width: 26.25rem;
    right: auto;
}

.form-drawer .plantilla-editor-tabla .datatable-panel,
.form-drawer .plantilla-editor-tabla .table-responsive {
    overflow-y: visible;
}

.form-drawer .plantilla-informe-paso-panel {
    display: none;
}

.form-drawer .plantilla-informe-paso-panel[hidden] {
    display: none !important;
}

.form-drawer .plantilla-informe-paso-panel.show {
    display: block;
}

.form-drawer .plantilla-informe-paso-panel__cuerpo {
    padding: 0.85rem 0.9rem 1rem;
}

.form-drawer .plantilla-informe-pasos .form-floating {
    --floating-bg: var(--panel-main-bg, var(--color-crema, #f7f3e8));
    --panel-floating-disabled-bg: var(--panel-main-bg, var(--color-crema, #f7f3e8));
}

.form-drawer .plantilla-informe-paso-nav {
    border-color: color-mix(in srgb, var(--color-granate, #661414) 18%, var(--color-crema, #f7f3e8)) !important;
}

@media print {
    .ui-cuadro-semanal__th { background: #eee !important; color: #000 !important; }

    .ui-cuadro-semanal--rejilla-uniforme.ui-cuadro-semanal .ui-card-base.ui-cuadro-semanal__tarjeta-celda.ui-card-profile {
        height: auto;
        max-height: none;
        min-height: 5rem;
        overflow: visible;
    }
}