/* Paleta de CP5Web — ver openspec/specs/visual-theme y openspec/changes/tokens-visuales-y-tabla-cards/design.md.
   Cargar después de bootstrap.min.css: sobreescribe las CSS custom properties que Bootstrap 5.3 expone en
   :root. Solo tema claro por ahora (ver Non-Goals del change) — la estructura queda lista para agregar un
   bloque [data-bs-theme="dark"] el día que se implemente el toggle. */

/* Tipografía del sitio: Inter, alojada localmente (wwwroot/fonts/inter) en vez de vía Google Fonts — este
   es un sistema de uso interno pensado para 10+ años (ver CLAUDE.md), no queremos que el sitio dependa de
   la disponibilidad de un CDN externo ni de que la red corporativa permita la conexión. Es una fuente
   variable: un solo archivo por subset cubre todo el eje de peso (100-900), por eso un @font-face por
   subset alcanza para los pesos 400/500/600/700 usados en la app. */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter/inter-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter/inter-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Escalado proporcional de toda la UI en ventanas de escritorio angostas (p. ej. notebook 1920x1080 con
   escala de Windows al 150% = ~1280px CSS) — ver openspec/changes/desktop-zoom/design.md. Las pantallas
   están pensadas para 1920px de ancho (monitor 1920x1080 al 100%); en vez de scroll horizontal en las
   grillas, se achica todo como con el zoom del navegador, pero según el ancho de la ventana (el zoom del
   navegador se guarda por sitio, no por monitor). Cada escalón apunta a un ancho efectivo de ~1920px
   (ancho / zoom): 1280px al 67% ≈ 1910px. Solo con mouse/touchpad: en una tablet achicaría los objetivos
   táctiles. Debajo de 992px la UI ya está en su layout compacto/celular y no se escala. */
:root {
    --app-zoom: 1;
}

@media (hover: hover) and (pointer: fine) and (min-width: 992px) and (max-width: 1199.98px) {
    :root { --app-zoom: 0.6; }
}

@media (hover: hover) and (pointer: fine) and (min-width: 1200px) and (max-width: 1439.98px) {
    :root { --app-zoom: 0.67; }
}

@media (hover: hover) and (pointer: fine) and (min-width: 1440px) and (max-width: 1679.98px) {
    :root { --app-zoom: 0.8; }
}

@media (hover: hover) and (pointer: fine) and (min-width: 1680px) and (max-width: 1879.98px) {
    :root { --app-zoom: 0.9; }
}

/* zoom también escala vw/vh/dvh (100vw bajo zoom 0.8 ocupa el 80% visible de la ventana): --vw/--vh/--dvh
   son la misma unidad compensada, para lo que tenga que ocupar una porción de la ventana REAL — usar
   calc(95 * var(--vw)) en vez de 95vw. Con --app-zoom: 1 es idéntico a vw/vh/dvh. Del lado JS, la misma
   compensación la hace cp5webZoom (js/zoom.js). */
html {
    zoom: var(--app-zoom);
    --vw: calc(1vw / var(--app-zoom));
    --vh: calc(1vh / var(--app-zoom));
    --dvh: calc(1dvh / var(--app-zoom));
}

/* Bootstrap dimensiona el fondo oscuro de modales/offcanvas con 100vw/100vh, que bajo el zoom cubren solo
   una parte de la ventana (al 67%, los 2/3 superiores izquierdos). Se pasan a las unidades compensadas. Las
   variantes modal-fullscreen-* también usan 100vw, pero hoy no se usan en la app. */
.modal-backdrop,
.offcanvas-backdrop {
    width: calc(100 * var(--vw));
    height: calc(100 * var(--vh));
}

body {
    /* Mismo stack de fallback que trae Bootstrap por default, por si el @font-face no llegó a cargar. */
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Fondo gris claro solo en la ventana principal (Home.razor marca su contenido con .home-page). Se fija con
   :has() sobre body y no pisando --bs-body-bg a propósito: esa variable la usan también inputs, dropdowns y
   celdas sticky, que deben seguir siendo blancas. El resto de las pantallas sigue con fondo blanco. */
body:has(.home-page) {
    background-color: #f9f9fc;
}

/* ABM de Propuestas: body y <main> como columnas flex de al menos el alto de la ventana, para que el ABM
   (.prop-abm, flex: 1) pueda estirarse y dejar su pie de auditoría pegado al borde inferior cuando hay poco
   contenido. Con :has() para no cambiar el layout del resto de las pantallas. --dvh compensa el zoom. */
body:has(.prop-abm) {
    display: flex;
    flex-direction: column;
    min-height: calc(100 * var(--dvh));
}

body:has(.prop-abm) > main {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    /* Sin el py-3 de abajo: el pie queda al ras del borde inferior de la ventana. */
    padding-bottom: 0 !important;
}

/* Tiles de entidades/procesos de la ventana principal: .btn-outline-secondary tiene fondo transparente, que
   sobre el fondo de arriba los dejaría del mismo color. Se les da fondo blanco; hover/active siguen siendo
   los de Bootstrap. El interlineado se achica (el 1.5 de .btn) para que los nombres largos que se parten en
   varios renglones queden más compactos. */
.home-page .entity-tile {
    --bs-btn-bg: #fff;
    --bs-btn-line-height: 1.15;
}

:root {
    --bs-primary: #6d28d9;
    --bs-primary-rgb: 109, 40, 217;
    --bs-primary-text-emphasis: #3b0764;
    --bs-primary-bg-subtle: #ede9fe;
    --bs-primary-border-subtle: #ddd6fe;

    --bs-border-radius-sm: 0.375rem;
    --bs-border-radius: 0.5rem;
    --bs-border-radius-lg: 0.75rem;

    --bs-box-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);

    /* Derivados solo para los estados hover/active de .btn-primary/.btn-outline-primary abajo — Bootstrap
        5.3 fija esos estados en hex literal dentro de cada regla de componente (ver design.md, decisión 1),
       no leen --bs-primary en runtime, así que no alcanza con los overrides de arriba. */
    --cp5-primary-hover: #5b21b6;
    --cp5-primary-active: #4c1d95;

    /* Borde del anillo de foco de .form-control/.form-select — mismo criterio que --cp5-primary-hover de
       arriba: es el equivalente violeta del #86b7fe que Bootstrap fija en hex literal para el azul default
       (un tono claro de la escala, no --bs-primary directo). */
    --cp5-focus-ring-border: #c4b5fd;
}

.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--cp5-primary-hover);
    --bs-btn-hover-border-color: var(--cp5-primary-hover);
    --bs-btn-active-bg: var(--cp5-primary-active);
    --bs-btn-active-border-color: var(--cp5-primary-active);
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-bg: var(--cp5-primary-active);
    --bs-btn-active-border-color: var(--cp5-primary-active);
    --bs-btn-disabled-color: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

/* Anillo de foco de campos de formulario (texto, número, fecha, <select>) — Bootstrap 5.3 lo fija en hex
   literal (border-color:#86b7fe, box-shadow con rgba(13,110,253,...)) en vez de leer --bs-primary, igual que
   .btn-primary más arriba. Cubre .form-control y .form-select — son los únicos controles de formulario que
   usa la app hoy (sin checkboxes/radios/range, ver entity-browser y entity-record-crud). */
.form-control:focus,
.form-select:focus {
    border-color: var(--cp5-focus-ring-border);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/* Tabla de resultados de entity-browser: tarjetas apiladas en mobile en vez de scroll horizontal — ver
   openspec/changes/tokens-visuales-y-tabla-cards/specs/entity-browser (requirement "Pantalla de búsqueda
   responsive") y design.md, decisión 3. */
@media (max-width: 575.98px) {
    .entity-results-table,
    .entity-results-table thead,
    .entity-results-table tbody,
    .entity-results-table tr {
        display: block;
    }

    .entity-results-table thead {
        display: none;
    }

    .entity-results-table tr {
        margin-bottom: 0.75rem;
        border: var(--bs-border-width) solid var(--bs-border-color);
        border-radius: var(--bs-border-radius);
        box-shadow: var(--bs-box-shadow-sm);
        padding: 0.5rem 0.75rem;
    }

    .entity-results-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.75rem;
        padding: 0.375rem 0;
        border: none;
        text-align: right;
    }

    .entity-results-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--bs-secondary-color);
        text-align: left;
        white-space: nowrap;
    }

    .entity-results-table td:empty {
        display: none;
    }

    /* La celda de acciones (el botón de opciones de fila, ver EntitySearch.razor) no lleva data-label, así
       que no tiene sentido el justify-content:space-between pensado para separar label y valor: el botón va
       pegado al borde derecho de la tarjeta como el resto de la fila. */
    .entity-results-table td.grid-actions-cell {
        justify-content: flex-end;
    }

    /* En mobile la tabla se muestra como tarjetas (display:block más arriba) — el ancho explícito en px
       que EntitySearch.razor le pone al <table> (necesario en desktop, ver el bloque de min-width:576px
       más abajo) no tiene sentido acá y rompería el ancho de página; !important porque un estilo inline
       pisa cualquier regla de una media query que no lo lleve. */
    .entity-results-table {
        width: 100% !important;
    }

    /* Grillas de archivos adjuntos (.table-striped, EntityFileAttachments y el buffer de Alta de
       RendicionAbm): el rayado de Bootstrap se pinta en cada <td> (box-shadow inset), no en el <tr>, así
       que con el padding de la tarjeta puesto en el <tr> el gris quedaba a mitad de camino del borde. Acá
       el padding pasa a las celdas y overflow:hidden recorta el gris a las esquinas redondeadas. */
    .entity-results-table.efolder-files-table tr {
        padding: 0;
        overflow: hidden;
    }

    .entity-results-table.efolder-files-table td {
        padding: 0.375rem 0.75rem;
    }

    .entity-results-table.efolder-files-table td:first-child {
        padding-top: 0.625rem;
        /* Nombre en varios renglones: el label queda a la altura del primer renglón (baseline), no
           centrado verticalmente respecto de todo el bloque. */
        align-items: baseline;
    }

    .entity-results-table.efolder-files-table td:last-child {
        padding-bottom: 0.625rem;
    }

    /* Columnas numéricas (Tamaño, importes, etc.): EntityColumn.CellCssClass les pone "pe-3" (padding-right
       !important de Bootstrap) para separarlas de la columna siguiente en desktop. En la tarjeta de mobile
       no hay columna siguiente y ese padding extra las dejaba corridas respecto del resto de los valores —
       se iguala al padding de las demás celdas (también con !important, único modo de pisar la utilidad). */
    .entity-results-table td.pe-3 {
        padding-right: 0 !important;
    }

    .entity-results-table.efolder-files-table td.pe-3 {
        padding-right: 0.75rem !important;
    }
}

/* Panel de filtros de entity-browser: borde recto (sin --bs-border-radius) y un tono más oscuro que
   bg-body-tertiary para diferenciarlo de la grilla de resultados — ver
   openspec/changes/filtros-seccion-compacta/design.md. --bs-secondary-bg es el siguiente tono de la escala
   de grises de Bootstrap después de --bs-tertiary-bg, así que sigue la paleta ya centralizada acá en vez de
   un hex fijo. */
.entity-filters-panel {
    background-color: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0;
}

/* Grilla de resultados: filas uniformes con una línea sutil entre filas (en vez del rayado alternado de
   .table-striped, que se quitó del markup), ordenamiento/redimensionado de columnas — ver
   openspec/changes/mejoras-grilla-resultados. */
.entity-results-table {
    font-size: 0.875rem;
}

/* El <table> tiene la clase utilitaria .align-middle de Bootstrap, pero "vertical-align" no se hereda —
   puesta en el <table> no tiene ningún efecto sobre sus celdas. Sin esto, el default del navegador para
   <th>/<td> es "bottom", así que el texto queda pegado abajo de la celda en vez de centrado (más notorio
   en el header, donde la celda es más alta que una sola línea de texto por el padding del toolbar). */
.entity-results-table th,
.entity-results-table td {
    vertical-align: middle;
}

.entity-results-table tbody tr {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    /* --bs-table-hover-bg: variable que lee .table-hover (clase agregada en el <table>) para resaltar la
       fila bajo el mouse — se sobreescribe acá para usar el violeta de la marca en vez del gris default
       de Bootstrap. */
    --bs-table-hover-bg: var(--bs-primary-bg-subtle);
}

.entity-results-table tbody tr.cursor-pointer {
    cursor: pointer;
}

/* Botón de opciones de fila (despliega "Abrir..." y la navegación a sub-entidades, ver EntitySearch.razor):
   solo visible en la fila bajo el mouse, o mientras su menú está abierto (.show, que Bootstrap le pone al
   toggle) aunque el mouse ya se haya ido al menú. visibility en vez de display para que la fila no cambie
   de alto al aparecer. En pantallas sin hover (celular/tablet) o en modo tarjeta se ve siempre, porque ahí
   no hay forma de "pasar el mouse" por una fila. */
.entity-results-table .grid-row-menu {
    display: flex;
    justify-content: flex-end;
}

/* Celda del botón de opciones: pegada al borde derecho del contenedor con scroll horizontal
   (.overflow-x-auto), igual que .grid-toolbar-cell en el header, para que el botón nunca quede fuera de
   pantalla. Mientras la tabla entra en el contenedor queda en su lugar natural; si las columnas se
   ensanchan más allá del ancho visible, se queda fija a la derecha y el botón se dibuja encima del texto de
   las columnas que pasan por debajo. Fondo transparente (y sin el box-shadow inset con el que Bootstrap
   pinta el hover de cada celda) para que la celda no tape texto de más: solo tapa el propio botón, que ya
   tiene fondo opaco. El resaltado de fila en esa franja lo da el fondo del <tr> (regla de abajo). */
.entity-results-table td.grid-actions-cell {
    position: sticky;
    right: 0;
    z-index: 1;
    background-color: transparent;
    box-shadow: none;
}

/* Con el menú abierto, la celda sube por encima de las celdas sticky de las filas siguientes (cada una es
   su propio stacking context y, al venir después en el DOM, taparían el menú desplegado). */
.entity-results-table td.grid-actions-cell:has(.dropdown-menu.show) {
    z-index: 3;
}

.entity-results-table.table-hover tbody tr:hover {
    background-color: var(--bs-table-hover-bg);
}

/* Borde sutil en reposo; al pasar el mouse (o con el menú abierto) toma el violeta de la marca, igual que
   el resaltado de fila pero un tono más marcado para distinguirse del fondo de la fila bajo el mouse. */
.entity-results-table .grid-row-menu-toggle {
    visibility: hidden;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3125rem 0.5rem;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-body-bg);
    /* Sin transición (pisa la de .btn de Bootstrap): el resaltado aparece en el acto al pasar el mouse. */
    transition: none;
}

.entity-results-table .grid-row-menu-toggle:hover,
.entity-results-table .grid-row-menu-toggle.show {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary-border-subtle);
    box-shadow: 0 0 0 0.15rem rgba(var(--bs-primary-rgb), 0.2);
}

.entity-results-table tbody tr:hover .grid-row-menu-toggle,
.entity-results-table .grid-row-menu-toggle.show {
    visibility: visible;
}

/* Ítems del menú de opciones de fila: ícono (o su espacio vacío) a la izquierda del texto. */
.entity-results-table .grid-row-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.entity-results-table .grid-row-menu-icon-placeholder {
    display: inline-block;
    width: 16px;
    height: 16px;
    flex: none;
}

@media (hover: none), (max-width: 575.98px) {
    .entity-results-table .grid-row-menu-toggle {
        visibility: visible;
    }
}

.entity-results-table thead th {
    background-color: var(--bs-primary-bg-subtle);
}

/* Celda del toolbar "Nuevo"/"Exportar" (última columna del header, ver ToolbarColumnWidthPx en
   EntitySearch.razor): pegada al borde derecho del contenedor con scroll horizontal (.overflow-x-auto),
   para que los botones queden siempre visibles sin importar cuánto se hayan ensanchado las columnas de
   datos — antes, al ensanchar columnas más allá del ancho del contenedor, esta celda (al final de la fila)
   se iba de pantalla junto con el resto de la tabla y había que scrollear para verla. El fondo ya lo pone
   la regla de thead th de arriba; acá solo se agrega la posición para que no se desplace con el resto. */
.grid-toolbar-cell {
    position: sticky;
    right: 0;
    z-index: 2;
}

.entity-results-table th.sortable-column {
    position: relative;
    cursor: pointer;
    user-select: none;
    padding-right: 1.25rem;
}

.entity-results-table .sort-indicator {
    margin-left: 0.35rem;
    font-size: 0.7em;
    color: var(--bs-primary);
}

/* Se marca mientras se arrastra una columna por ENCIMA de esta — según de qué lado está el mouse, indica
   si va a insertarse antes o después de esta columna al soltar (ver EntitySearch.razor,
   UpdateDragOverTarget/GetDragOverClass) — es lo que permite, entre otras cosas, poder dejar una columna
   al final (soltar en la mitad derecha de la última columna). */
.entity-results-table th.drag-over-before {
    box-shadow: inset 3px 0 0 0 var(--bs-primary);
}

.entity-results-table th.drag-over-after {
    box-shadow: inset -3px 0 0 0 var(--bs-primary);
}

.entity-results-table .col-resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 6px;
    cursor: col-resize;
    touch-action: none;
}

.entity-results-table .col-resize-handle:hover {
    background: var(--bs-primary-border-subtle);
}

/* Resaltado mientras se arrastra un archivo sobre la grilla de EFolder para soltarlo — ver
   efolderDragDrop.js. outline en vez de border para no correr el layout (la grilla ya tiene un ancho
   calculado en px, ver TotalTableWidthPx). */
.efolder-drop-zone.efolder-drop-active {
    outline: 2px dashed var(--bs-primary);
    outline-offset: 2px;
    background-color: var(--bs-primary-bg-subtle);
}

/* Ícono de tipo de archivo en la columna "Archivo" de EFolder — 16x16, mismo formato que los íconos de
   tipo de archivo del Explorador de Windows (ver Catalog/FileIcon.cs, paths de Bootstrap Icons), coloreado
   por categoría vía "color" porque el <svg> usa fill="currentColor". */
.file-type-icon {
    margin-right: 0.25rem;
    vertical-align: -0.2em;
    flex-shrink: 0;
}

.file-icon-word { color: #2b579a; }
.file-icon-excel { color: #217346; }
.file-icon-ppt { color: #b7472a; }
.file-icon-pdf { color: #c42b1c; }
.file-icon-image { color: #8764b8; }
.file-icon-zip { color: #b8860b; }
.file-icon-mail { color: #0f6cbd; }
.file-icon-text { color: #6b6b6b; }
.file-icon-generic { color: #8a8a8a; }

/* Contenedor icono + nombre en EntityFileAttachments: flujo inline (no flex) para que el icono vaya pegado
   al comienzo del nombre aunque éste corte en varias líneas. En mobile es el ítem flex "valor" del <td>
   (ver .entity-results-table más arriba): min-width:0 + overflow-wrap para que un nombre largo sin
   espacios corte dentro de la tarjeta en vez de desbordarla. */
.efolder-file-name {
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (min-width: 576px) {
    .entity-results-table {
        table-layout: fixed;
        /* Bootstrap le pone width:100% a .table por default. Bajo table-layout:fixed, un ancho "auto" o
           "100%" no alcanza para que el <colgroup> se respete tal cual: el navegador sigue dejando que el
           contenido de cada celda (sobre todo con white-space:nowrap, más abajo) empuje columnas
           individuales más allá de lo pedido, achicando otras para compensar. Por eso EntitySearch.razor
           le pone al <table> un ancho explícito en px (TotalTableWidthPx, la suma real de sus columnas)
           vía style inline — este selector no fija ningún valor, solo documenta por qué ese inline style
           es necesario y no alcanza con una regla acá. .overflow-x-auto hace scroll horizontal si esa
           suma no entra en el contenedor. */
    }

    /* Grillas de archivos adjuntos (EntityFileAttachments y el buffer de Alta de RendicionAbm), con ancho
       fijo por columna: el Nombre (primera columna) corta en varias líneas dentro de su ancho — incluso
       nombres largos sin espacios — en vez de desbordar sobre la columna siguiente. */
    .entity-results-table.efolder-files-table td:first-child {
        overflow-wrap: anywhere;
    }

    /* Solo en columnas de datos (texto plano) — las columnas de acciones tienen botones, no texto, y
       cortarlas con ellipsis recortaría los propios botones en vez de solo texto largo. */
    .entity-results-table th.sortable-column,
    .entity-results-table td.grid-data-cell {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

}

/* Bootstrap define el color de cada celda de tabla y también .text-muted con !important, por lo que
   un text-danger heredado desde la fila no alcanza a colorear los valores secundarios. La regla queda
   fuera del media query para conservar el estado rojo también en la vista responsive. */
.entity-results-table td.grid-row-disabled,
.entity-results-table td.grid-row-disabled .text-muted,
.entity-results-table td.grid-row-disabled .grid-amount-currency {
    color: var(--bs-danger) !important;
}

/* Columnas compuestas de la grilla de resultados (ver EntityColumn.SecondaryPropertyName/
   CurrencyPropertyName/StatusFlags/DateRange en EntitySearch.razor) — equivalentes sin el prefijo
   "concepto-" de .concepto-importe-moneda/.concepto-flag-badge (RendicionAbm.razor.css), para no depender
   del scoped-css de un componente ajeno a la grilla genérica. */
.grid-amount-currency {
    font-size: 0.85em;
    /* Separación del importe — sin esto quedan pegados, solo el espacio en blanco entre el texto de los
       dos <span> (que a veces el compilador de Razor no conserva como nodo de texto propio). */
    margin-right: 0.3em;
}

.grid-status-badge {
    font-size: 0.8rem;
    padding: 0.3em 0.55em;
    /* El texto de un badge Bootstrap queda visualmente un poco alto dentro de su recuadro a este tamaño —
       2px más abajo (o, lo que es lo mismo, el contorno 2px más arriba) lo centra bien. */
    position: relative;
    top: 2px;
}

/* Gris más clarito para el estado "false"/"sin cantidad" de estos 3 badges en particular — clase propia en
   vez de la utilidad .text-bg-secondary de Bootstrap (que define background-color/color con !important,
   así que un override con más especificidad de selector nunca le hubiera ganado — encontrado en
   verificación manual: el primer intento con .grid-status-badge.text-bg-secondary no tenía ningún efecto
   visual pese a estar en el CSS servido). Letra blanca pedida explícitamente pese al fondo clarito (menos
   contraste que con letra oscura, pero es la combinación pedida). */
.grid-status-badge-off {
    background-color: #dee2e6;
    color: #fff;
}

/* Bootstrap no genera una utilidad "text-bg-orange" (solo tiene las 8 variantes semánticas de tema) —
   necesaria para el flag de PFs previos sin Cobrar en PrefacturarPuntosFacturacion.razor, que debe
   distinguirse visualmente del flag rojo (sin PreFacturar) ya existente en la misma columna. */
.text-bg-orange {
    background-color: #fd7e14;
    color: #fff;
}

/* Flags de PFs previos (sin PreFacturar/sin Cobrar) en la columna "orden" de PrefacturarPuntosFacturacion.razor.
   Separación 1px más angosta que el gap-1 (4px) de Bootstrap, a pedido. */
.grid-pf-flags {
    gap: 3px;
}

/* El texto de estos badges queda 1px alto dentro de su recuadro a este tamaño, a pedido se lo baja. */
.grid-pf-flag-badge {
    position: relative;
    top: 1px;
}

/* Slot por badge dentro de una columna con EntityColumn.StatusFlags/CountBadge. Ya NO tiene un ancho fijo:
   desde la quinta ronda los 3 badges están siempre visibles (nunca ausentes), así que el motivo original de
   un ancho fijo (evitar que la ausencia de un badge corra a los siguientes) dejó de aplicar — un ancho fijo
   más grande que el contenido ("A"/"C"/cantidad) solo agregaba espacio en blanco alrededor de cada badge,
   que se sumaba entre badges adyacentes pese al gap:0 de .grid-cell-flags (encontrado en verificación manual:
   el gap computado entre slots ya daba 0px, pero seguían viéndose separados). Ancho ahora al contenido. */
.grid-flag-slot {
    display: flex;
    justify-content: center;
}

/* Espacio entre los slots de .grid-cell-flags — 2px, pedido explícitamente luego de que sacar el ancho fijo
   de .grid-flag-slot (ver más abajo) dejara los 3 badges completamente pegados entre sí. */
.grid-cell-flags {
    gap: 2px;
}

/* Segundo renglón de una columna con rango de fechas (ver EntityColumn.DateRange) — cada renglón trunca su
   propio contenido con elipsis en vez de dejar que el <td> (grid-data-cell, más arriba) trunque la celda
   entera como si fuera una sola línea. line-height más apretado que el 1.5 heredado del body: con dos
   renglones apilados (código + descripción) ese interlineado default deja un hueco visible entre ambos. */
.grid-cell-line {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}

/* Columna con badges de estado (ver EntityColumn.StatusFlags) — pisa el white-space:nowrap heredado de
   grid-data-cell (más arriba) para que un badge que no entra en el ancho de la columna baje a un renglón
   propio (flex-wrap) en vez de quedar recortado por el overflow:hidden de la celda — los badges SHALL estar
   siempre visibles (ver requirement "Formato de valores en la grilla de resultados"), a diferencia del resto
   del contenido de la grilla, que sí puede truncarse. */
.grid-cell-flags {
    white-space: normal;
}

/* Encabezado de aplicación: fondo oscuro fijo (no sigue el tema claro del resto de la app) — ver
   openspec/changes/header-oscuro-y-login-automatico/specs/app-shell (requirement "Encabezado con fondo
   oscuro") y design.md, decisión 3. Tonos tomados de la sidebar de CP-Portales, no de --bs-primary (ese
   violeta es para botones sobre fondo claro, no tiene contraste suficiente como fondo con texto encima). */
.app-header-dark {
    background: #201530;
    color: #f3f0fa;
}

/* Inter (ver más arriba) tiene un ascent/descent más asimétrico que el stack de fuentes de sistema que
   usaba antes: para texto sin descendentes (como "CP Web"), queda más espacio invisible arriba de las
   letras que abajo, así que aunque el bloque de texto esté perfectamente centrado (con align-items-center)
   respecto al ícono/avatar de al lado, la tinta visible del texto se ve corrida hacia abajo. Se compensa
   con un pequeño desplazamiento hacia arriba — vía transform, no margin/padding, para no afectar el
   centrado del bloque en sí ni la posición de los elementos hermanos. */
.app-header-dark .lh-sm {
    transform: translateY(-2px);
}

/* Bootstrap deja "--bs-modal-color" vacío a propósito para que .modal-content herede el color de texto de
   donde esté declarado en el HTML (normalmente el <body>, oscuro) — pero el modal de whoami está declarado
   dentro de <header class="app-header-dark"> (aunque se posicione centrado en pantalla, sigue siendo
   descendiente en el DOM), así que heredaba el texto claro del header y quedaba invisible sobre el fondo
   blanco del modal. Se fuerza acá al color de texto normal del body, sin importar dónde esté anidado. */
.modal-content {
    color: var(--bs-body-color);
}

.app-header-dark .header-subtext {
    color: #b6a9d1;
    font-size: 0.7rem;
}

.app-header-dark .text-warning {
    color: #f0c36d !important;
}

.app-header-dark .dropdown-menu {
    --bs-dropdown-bg: var(--bs-primary-bg-subtle);
    --bs-dropdown-link-hover-bg: var(--bs-primary-border-subtle);
    --bs-dropdown-link-active-bg: var(--bs-primary);
    --bs-dropdown-header-color: var(--bs-primary-text-emphasis);
}

/* Espacio reservado para el ícono de "idioma activo" en el menú de usuario — mismo ancho haya o no
   checkmark, para que el texto de ambos idiomas quede alineado. */
.menu-item-check {
    display: inline-flex;
    justify-content: center;
    width: 16px;
    color: var(--bs-primary);
}

/* Flechita del menú de usuario un poco más grande que el default de Bootstrap (.3em) — solo en este botón
   puntual, no en dropdowns en general de la app. */
.user-menu-toggle.dropdown-toggle::after {
    border-top-width: 0.45em;
    border-right-width: 0.45em;
    border-left-width: 0.45em;
}

/* En celular el menú de usuario (ícono + nombre + código de recurso) ocupaba demasiado del header — ícono,
   nombre y flechita más chicos solo por debajo de "md". En desktop se mantiene el tamaño de siempre. */
@media (max-width: 767.98px) {
    .user-menu-toggle {
        font-size: 0.8125rem;
        gap: 0.35rem !important;
    }

    .user-menu-toggle > svg {
        width: 20px;
        height: 20px;
    }

    .user-menu-toggle .header-subtext {
        font-size: 0.625rem;
    }

    .user-menu-toggle.dropdown-toggle::after {
        border-top-width: 0.35em;
        border-right-width: 0.35em;
        border-left-width: 0.35em;
    }
}

/* Breadcrumb de sub-entidades (EntitySearch.razor): segmentos en forma de flecha ("chevron"), cada uno con un
   tono distinto de la paleta violeta, del más oscuro (entidad padre) al más claro (pantalla actual). La
   punta de cada segmento se recorta con clip-path y el siguiente se superpone con margen negativo, dejando
   una ranura blanca de 3px con forma de '>' entre ambos. Cada segmento tiene un ancho máximo y trunca con
   "…" (la referencia del registro padre puede ser muy larga); en pantallas angostas, además, los segmentos
   se achican (min-width: 0) antes que desbordar. El texto completo queda en el title de cada <li>. */
.cp5-breadcrumb {
    --cp5-crumb-arrow: 0.75rem;
    display: flex;
    flex-wrap: nowrap;
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.cp5-breadcrumb > li {
    min-width: 0;
    max-width: 18rem;
    padding: 0.375rem calc(var(--cp5-crumb-arrow) + 0.5rem) 0.375rem calc(var(--cp5-crumb-arrow) + 0.625rem);
    margin-left: calc(-1 * var(--cp5-crumb-arrow) + 3px);
    clip-path: polygon(0 0, calc(100% - var(--cp5-crumb-arrow)) 0, 100% 50%, calc(100% - var(--cp5-crumb-arrow)) 100%, 0 100%, var(--cp5-crumb-arrow) 50%);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cp5-breadcrumb > li:first-child {
    margin-left: 0;
    padding-left: 0.75rem;
    border-radius: var(--bs-border-radius-sm) 0 0 var(--bs-border-radius-sm);
    clip-path: polygon(0 0, calc(100% - var(--cp5-crumb-arrow)) 0, 100% 50%, calc(100% - var(--cp5-crumb-arrow)) 100%, 0 100%);
    flex-shrink: 0;
    background-color: var(--cp5-primary-active);
    color: #fff;
}

.cp5-breadcrumb > li:nth-child(2) {
    background-color: #7c3aed;
    color: #fff;
}

.cp5-breadcrumb > li:nth-child(3) {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    font-weight: 600;
}

.cp5-breadcrumb > li > a {
    color: inherit;
    text-decoration: none;
}

.cp5-breadcrumb > li > a:hover,
.cp5-breadcrumb > li > a:focus-visible {
    text-decoration: underline;
}

@media (max-width: 575.98px) {
    .cp5-breadcrumb > li {
        max-width: 10rem;
    }
}

/* Aviso "También podés arrastrar archivos hasta acá" (EntityFileAttachments): solo con mouse/trackpad como
   puntero principal. No hay una API confiable para saber si el dispositivo permite arrastrar archivos
   (los navegadores móviles anuncian soporte de drag and drop igual), así que se usa el tipo de puntero como
   aproximación: en celulares y tablets táctiles se oculta; un iPad con trackpad o una PC sí lo muestran. */
@media (hover: none), (pointer: coarse) {
    .drag-drop-hint {
        display: none;
    }
}