/* ============================================================================
   HATUN UI · hatun-theme.css
   ----------------------------------------------------------------------------
   FUENTE ÚNICA DE VERDAD del tema visual del sistema (Fases 0, 1 y 2 del
   estudio de rediseño, jul-2026). Reemplaza a componentstyles.css.

   Fase 1 aplicada: primario #FF24BD→#EC148C vía --primary-rgb, links #D6127C,
   botones peso 600, inputs 14px/38px/radio 8, foco magenta único, grillas a
   13px con tabular-nums, selección cian (antes amarillo #FAD03C).

   Fase 2 aplicada: toolbar estándar de documento (sección 11), badges de
   estado .hatun-state (sección 12, render con hatun.stateBadge() de
   hatun.configuration.js), sidebar navy refinado (sección 13), hatun-tabs
   pulido con contadores y focus-visible, botones de ícono a 32px, menú de
   perfil sin arcoíris.

   Reglas de gobierno:
   1. Todo color nuevo entra como token en :root o no entra (prohibido el hex
      suelto en vistas o CSS de componentes).
   2. Este archivo se carga AL FINAL del layout: gana la cascada sobre Ynex
      (styleapp.css), Bootstrap, Syncfusion (.e-*) y Kendo (.k-*).
   3. El equivalente para PDF/Excel es HatunReportTheme.cs y para dashboards
      hatun-dashboard.css. Si cambia la marca, actualizar los tres.

   Índice:
     01 · Fuentes (Inter Variable, self-hosted)
     02 · Tokens HATUN UI
     03 · Grillas Syncfusion (.e-grid)
     04 · Grillas y controles Kendo (.k-*)
     05 · Inputs y calendario Syncfusion
     06 · Botones y utilidades Bootstrap
     07 · Tabs HATUN (hatun-tabs / hatun-tabs-vertical)
     08 · Stepper de contraseñas (UxResetPassword / UxChangePassword)
     09 · Piezas HATUN (pin CCO, export Excel, aviso de búsqueda restaurada)
     10 · Misceláneos (modales, tooltips, colores de menú de perfil)
   ============================================================================ */


/* ============================================================================
   01 · FUENTES — Inter Variable self-hosted (licencia OFL, rsms.me/inter)
   Un solo archivo por estilo cubre todos los pesos 100–900.
   Sustituye los @import de Google Fonts que estaban en styleapp.css.
   ============================================================================ */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../assets/fonts/InterVariable.woff2) format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(../assets/fonts/InterVariable-Italic.woff2) format("woff2");
}

/* El sidebar usaba Montserrat (segunda fuente de Google solo para esto).
   Unificado a Inter: una petición menos y tipografía consistente. */
.app-sidebar {
    font-family: "Inter", sans-serif;
}


/* ============================================================================
   02 · TOKENS HATUN UI
   Paleta por roles (ver estudio de rediseño). En Fase 0 solo se declaran;
   las Fases 1–3 los aplican a controles y componentes.

   Escalera magenta — regla de uso:
     --hx-neon    #FF24BD  SOLO marca: logo, acentos grandes. Nunca texto.
     --hx-accent  #EC148C  Botón primario, tab activo, foco (4.2:1).
     --hx-accent-text #D6127C  Links y texto interactivo (5.0:1, pasa AA).
   Verde/cian del logo (#3CF19A, #3CD8FA): SOLO decorativos (1.5:1).
   ============================================================================ */
:root {
    /* Marca */
    --hx-navy: #121D43;
    --hx-neon: #FF24BD;
    --hx-green-brand: #3CF19A;
    --hx-cyan-brand: #3CD8FA;

    /* Acción */
    --hx-accent: #EC148C;
    --hx-accent-text: #D6127C;
    --hx-accent-strong: #BE1074; /* hover/active de botones primarios: paso
                                    claramente más oscuro que el accent */
    --hx-accent-soft: #FCE7F3;
    --hx-accent-ring: rgba(214, 18, 124, .22);

    /* Tinta y neutrales */
    --hx-ink: #1A2440;
    --hx-ink-2: #4C566C;
    --hx-ink-3: #808A9F;
    --hx-line: #E4E7EF;
    --hx-line-soft: #EEF0F5;
    --hx-bg: #F6F7FA;
    --hx-surface: #FFFFFF;
    --hx-surface-2: #FBFBFD;
    --hx-navy-soft: #E9EBF4;

    /* Datos y semánticos (no usar como marca) */
    --hx-cyan: #0A85B8;
    --hx-cyan-soft: #E7F3FA;
    --hx-selection: #C9E6F5; /* fila seleccionada: cian con más cuerpo — el
                                cian-soft se perdía contra las filas alternadas
                                grises de las grillas (feedback 12-jul-2026) */
    --hx-ok: #2F7D46;
    --hx-ok-soft: #E8F3EC;
    --hx-warn: #9A6700;
    --hx-warn-soft: #FBF0DA;
    --hx-bad: #C0392B;
    --hx-bad-soft: #FBEAE7;

    /* Borde de input IMPRIMIBLE (decisión 02-ago-2026): pizarra oscura que sobrevive a
       la cadena captura→Word→imprimir→firmar→escanear (los grises suaves desaparecen).
       Piloto en popups de Caja; candidato a global cuando Eduardo valide capturas reales */
    --hx-input-border: #64748b;

    /* Forma */
    --hx-radius-control: 8px;   /* inputs y botones */
    --hx-radius-card: 12px;     /* cards y modales */
    --hx-radius-pill: 999px;    /* badges y pills */
    --hx-control-h: 34px;       /* alto estándar de control (ajustado de 38 tras
                                   feedback de usuarios: ERP denso, punto medio
                                   entre Fluent 32px y SAP cómodo 36px) */
    --hx-grid-row-h: 36px;      /* alto de fila de grilla */

    /* Elevación */
    --hx-shadow-card: 0 1px 2px rgba(18, 29, 67, .05), 0 8px 24px rgba(18, 29, 67, .06);
    --hx-shadow-pop: 0 4px 12px rgba(18, 29, 67, .10), 0 16px 40px rgba(18, 29, 67, .14);

    /* Foco único para toda la app */
    --hx-focus-ring: 0 0 0 3px var(--hx-accent-ring);
}

/* ----------------------------------------------------------------------------
   FASE 1 · Remapeo global: Ynex y Bootstrap toman la escalera magenta.
   - --primary-rgb gobierna TODO el primario de Ynex (.btn-primary, badges,
     estados activos, --primary01..09 derivados): #FF24BD → #EC148C (4.2:1).
     El neón #FF24BD queda reservado a la marca (logo, sidebar, acentos).
   - Links pasan a #D6127C (5.0:1, pasa WCAG AA) en vez del azul Bootstrap.
   ---------------------------------------------------------------------------- */
:root {
    --primary-rgb: 236, 20, 140;
    --bs-primary: #EC148C;
    --bs-primary-rgb: 236, 20, 140;
    --bs-link-color: #D6127C;
    --bs-link-color-rgb: 214, 18, 124;
    --bs-link-hover-color: #B00F66;
    --bs-link-hover-color-rgb: 176, 15, 102;
}


/* ============================================================================
   03 · GRILLAS SYNCFUSION (.e-grid)
   ============================================================================ */

/* Sobreposición de mensaje de error de datos obligatorios */
.e-tooltip-wrap.e-griderror, .e-control.e-tooltip-wrap.e-popup.e-griderror {
    z-index: 1;
}

/* Fase 1: 13px legibles (antes 12px), números tabulares para que las cifras
   se alineen en columna, filas un punto más respirables (~28px) */
.e-grid .e-rowcell {
    font-size: 13px !important;
    line-height: 20px !important;
    padding: 4px 10px !important;
    font-variant-numeric: tabular-nums;
}

.e-grid .e-headercelldiv {
    font-size: 13px;
    font-weight: 700;
    height: 20px;
    line-height: 20px;
}

.grid-container {
    min-height: 250px; /* Altura mínima */
    height: auto; /* Permite que crezca dinámicamente */
    display: flex;
    flex-direction: column;
}

.custom-grid {
    flex: 1; /* Ocupa todo el espacio disponible del contenedor */
    width: 100%;
    overflow: visible; /* Sin scroll */
}

/* Fase 1: la selección deja el amarillo (semántica de advertencia) y pasa a
   cian suave de datos — comunica "estás aquí" sin alarmar */
.e-grid .e-focused:not(.e-menu-item):not(.e-editedbatchcell) {
    box-shadow: 0 0 0 1px var(--hx-cyan) inset;
}

.e-grid td.e-active {
    background: var(--hx-selection);
}

/* Barra lateral de dato en la fila seleccionada (paridad con Kendo) */
.e-grid tr:has(> td.e-active) > td:first-child {
    box-shadow: inset 3px 0 0 var(--hx-cyan);
}

.e-grid .e-row .e-input-group .e-input.e-field, .e-grid .e-row .e-input-focus .e-input.e-field {
    font-size: 13px;
}

.serial-no-cell {
    background-color: #f5f5f5 !important;
    font-weight: bold !important;
    text-align: center !important;
    color: #333 !important;
}


/* ============================================================================
   04 · GRILLAS Y CONTROLES KENDO (.k-*)
   ============================================================================ */
/* Fase 1: selección cian (antes amarillo #FAD03C) con barra lateral de dato.
   12-jul-2026: sube de cyan-soft a --hx-selection — no se distinguía de las
   filas alternadas grises. */
.k-grid td.k-state-selected, .k-grid th.k-state-selected, .k-grid tr.k-state-selected > td {
    color: var(--hx-ink);
    background-color: var(--hx-selection);
}

.k-grid tr.k-state-selected > td:first-child {
    box-shadow: inset 3px 0 0 var(--hx-cyan);
}

.k-grid td, .k-grid th {
    padding: 3px 8px !important;
}

/* Fase 1: 13px legibles (antes 0.74rem ≈ 11.8px) y números tabulares */
.k-grid {
    line-height: 1.7 !important;
    font-size: 0.8125rem;
}

.k-grid td {
    font-variant-numeric: tabular-nums;
}

.k-grid-header {
    font-weight: 700;
}

/* Aplica a todas las Kendo Grid de la app */
.k-grid td,
.k-grid th {
    white-space: nowrap; /* No salta de línea */
    overflow: hidden; /* Oculta el texto que se pasa */
    text-overflow: ellipsis; /* Muestra "..." al final */
}

.k-grid .k-grid-content-locked .k-state-selected td {
    background-color: var(--hx-selection) !important;
}

/* Fase 1: foco de celda en cian de datos (antes verde success) */
.k-grid .k-detail-row > td:focus, .k-grid .k-grid-pager.k-state-focused, .k-grid .k-grid-pager:focus, .k-grid .k-group-footer > td:focus, .k-grid .k-grouping-row > td:focus, .k-grid .k-master-row > td:focus, .k-grid td.k-state-focused, .k-grid th.k-state-focused, .k-grid th:focus {
    box-shadow: inset 0 0 0 1px var(--hx-cyan) !important;
}

/* TreeList */
.k-textbox {
    height: calc(1.5em + .5rem + 2px) !important;
    font-size: 0.85rem !important
}

input.k-textbox {
    padding: .3rem .5rem !important;
}

.k-input {
    height: calc(1.5em + .5rem) !important;
}

.k-treelist .k-command-cell .k-button {
    min-width: 0px;
    padding: 10px 10px 10px 10px;
}

/* Oculta texto en botones de comando como "Agregar", "Editar", "Eliminar" */
.k-command-cell .k-button.k-button-icontext span.k-icon + span {
    display: none;
}

/* Mejora apariencia de todos los botones del TreeList */
.k-command-cell .k-button.k-button-icontext {
    border-radius: 1rem !important;
    padding: 0.2rem 0.3rem !important;
    font-size: 0.75rem;
    min-width: auto;
}

/* Ajustes por tipo de acción */
.k-grid-add {
    background-color: transparent;
    border: 1px solid #0d6efd;
    color: #0d6efd;
}

.k-grid-edit {
    background-color: transparent;
    border: 1px solid #198754;
    color: #198754;
}

.k-grid-delete {
    background-color: transparent;
    border: 1px solid #dc3545;
    color: #dc3545;
}

.k-button {
    gap: .1rem;
}

.k-combobox {
    font-size: 0.8rem;
}

.k-clear-value {
    width: calc(10px + .2rem);
    height: 1.8rem;
}

.k-numerictextbox {
    font-size: 0.8rem;
}

/* ----------------------------------------------------------------------------
   Paginador Kendo (12-jul-2026): el tema kendo.bootstrap trae azul Bootstrap,
   que no es de la paleta. Página activa = acción (magenta), números = link
   magenta-texto, flechas = tinta neutra. Cubre <a class="k-link"> (páginas
   navegables) y <span class="k-state-selected"> (página actual).
   ---------------------------------------------------------------------------- */
.k-pager-wrap {
    color: var(--hx-ink-2);
    background-color: var(--hx-surface-2);
}

    .k-pager-wrap .k-link,
    .k-pager-wrap .k-pager-nav {
        color: var(--hx-ink-2);
        border-radius: var(--hx-radius-control);
    }

        .k-pager-wrap .k-link:hover,
        .k-pager-wrap .k-link.k-state-hover {
            color: var(--hx-ink);
            background-color: var(--hx-navy-soft);
        }

.k-pager-numbers .k-link {
    color: var(--hx-accent-text);
}

    .k-pager-numbers .k-link:hover,
    .k-pager-numbers .k-link.k-state-hover {
        color: var(--hx-accent-text);
        background-color: var(--hx-accent-soft);
    }

.k-pager-numbers .k-state-selected,
.k-pager-numbers .k-link.k-state-selected {
    color: #fff;
    background-color: var(--hx-accent);
    border-color: var(--hx-accent);
    border-radius: var(--hx-radius-control);
}

.k-pager-wrap .k-link:focus,
.k-pager-numbers .k-link:focus {
    box-shadow: var(--hx-focus-ring);
    outline: none;
}


/* ============================================================================
   05 · INPUTS Y CALENDARIO SYNCFUSION
   ============================================================================ */
/* Fase 1: ítem elegido en magenta suave (antes amarillo) */
.e-dropdownbase .e-list-item.e-active, .e-dropdownbase .e-list-item.e-active.e-hover {
    background-color: var(--hx-accent-soft);
    color: var(--hx-accent-text);
}

.e-dropdownbase .e-list-item {
    font-size: 13px;
}

/* Fase 1: texto de trabajo a 14px (antes 12px) */
input.e-input, textarea.e-input, .e-input-group, .e-input-group.e-control-wrapper, .e-input-group.e-disabled, .e-input-group.e-control-wrapper.e-disabled {
    font-size: 14px;
    font-weight: normal
}

/* Fase 1: control estándar de formulario — 38px de alto (Fitts), radio 8.
   Se excluyen multilínea (crecen solas) y los inputs incrustados en grillas. */
.e-input-group:not(.e-multi-line-input),
.e-input-group.e-control-wrapper:not(.e-multi-line-input) {
    border-radius: var(--hx-radius-control);
}

.e-input-group:not(.e-multi-line-input),
.e-input-group.e-control-wrapper:not(.e-multi-line-input) {
    min-height: var(--hx-control-h);
}

/* Las grillas conservan su densidad: sin alto mínimo en edición en línea */
.e-grid .e-input-group,
.e-grid .e-input-group.e-control-wrapper {
    min-height: unset;
}

/* Foco único de toda la app: borde + anillo magenta (antes azul Bootstrap) */
.e-input-group.e-input-focus:not(.e-error):not(.e-success),
.e-input-group.e-control-wrapper.e-input-focus:not(.e-error):not(.e-success) {
    border-color: var(--hx-accent) !important;
    box-shadow: var(--hx-focus-ring) !important;
}

/* Botón primario Syncfusion (diálogos, pickers): magenta de acción */
.e-btn.e-primary:not(.e-flat), .e-css.e-btn.e-primary:not(.e-flat) {
    background-color: var(--hx-accent);
    border-color: var(--hx-accent);
}

    .e-btn.e-primary:not(.e-flat):hover, .e-css.e-btn.e-primary:not(.e-flat):hover,
    .e-btn.e-primary:not(.e-flat):focus, .e-css.e-btn.e-primary:not(.e-flat):focus {
        background-color: var(--hx-accent-text);
        border-color: var(--hx-accent-text);
    }

/* ----------------------------------------------------------------------------
   Checkboxes y radios (12-jul-2026): el tema ej2 bootstrap5 los pinta con el
   azul #0d6efd hardcodeado (no lee --bs-primary). Marcado = acción magenta.
   Cubre también el checkbox de selección de filas de las grillas Syncfusion
   (usa los mismos .e-frame) y el checkbox Kendo.
   ---------------------------------------------------------------------------- */
.e-checkbox-wrapper .e-frame.e-check,
.e-css.e-checkbox-wrapper .e-frame.e-check {
    background-color: var(--hx-accent);
    border-color: var(--hx-accent);
}

.e-checkbox-wrapper:hover .e-frame.e-check,
.e-css.e-checkbox-wrapper:hover .e-frame.e-check {
    background-color: var(--hx-accent-text);
    border-color: var(--hx-accent-text);
}

/* Indeterminado (select-all parcial en grillas) */
.e-checkbox-wrapper .e-frame.e-stop,
.e-css.e-checkbox-wrapper .e-frame.e-stop {
    background-color: var(--hx-accent);
    border-color: var(--hx-accent);
    color: #fff;
}

/* Marcado + foco/click: el tema trae aquí su selector más específico
   (checkbox:focus + frame.e-check) con azul y anillo azul — se iguala. */
.e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-check,
.e-checkbox-wrapper .e-checkbox:active + .e-frame.e-check,
.e-css.e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-check,
.e-css.e-checkbox-wrapper .e-checkbox:active + .e-frame.e-check {
    background-color: var(--hx-accent);
    border-color: var(--hx-accent-strong);
    box-shadow: var(--hx-focus-ring);
    color: #fff;
}

.e-checkbox-wrapper .e-checkbox:focus + .e-frame,
.e-css.e-checkbox-wrapper .e-checkbox:focus + .e-frame {
    box-shadow: var(--hx-focus-ring);
}

.e-checkbox-wrapper.e-focus .e-frame,
.e-checkbox-wrapper.e-focus .e-frame.e-check,
.e-css.e-checkbox-wrapper.e-focus .e-frame,
.e-css.e-checkbox-wrapper.e-focus .e-frame.e-check {
    outline-color: var(--hx-accent-ring);
}

.e-checkbox-wrapper .e-ripple-element,
.e-css.e-checkbox-wrapper .e-ripple-element {
    background-color: var(--hx-accent-ring);
}

/* Radios Syncfusion (Sí/No de formularios) */
.e-radio:checked + label::before,
.e-radio:checked + .e-label::before {
    border-color: var(--hx-accent);
}

.e-radio:checked + label::after,
.e-radio:checked + .e-label::after {
    background-color: var(--hx-accent);
    border-color: var(--hx-accent);
}

.e-radio:checked:hover + label::before,
.e-radio:checked:focus + label::before {
    border-color: var(--hx-accent-text);
}

.e-radio:focus + label::before {
    box-shadow: var(--hx-focus-ring);
}

/* Checkbox Kendo (selección en grillas Kendo) */
.k-checkbox:checked,
.k-checkbox:indeterminate {
    background-color: var(--hx-accent);
    border-color: var(--hx-accent);
}

.k-checkbox:focus {
    box-shadow: var(--hx-focus-ring);
}

/* Fase 1: día seleccionado en magenta de acción con texto blanco
   (antes amarillo con texto por defecto) */
.e-calendar .e-content td.e-selected span.e-day,
.e-calendar .e-content td.e-today.e-selected:hover span.e-day, .e-calendar .e-content td.e-selected:hover span.e-day, .e-calendar .e-content td.e-selected.e-focused-date span.e-day, .e-bigger.e-small .e-calendar .e-content td.e-today.e-selected:hover span.e-day, .e-bigger.e-small .e-calendar .e-content td.e-selected:hover span.e-day, .e-bigger.e-small .e-calendar .e-content td.e-selected.e-focused-date span.e-day {
    background-color: var(--hx-accent);
    color: #fff;
}

/* Hoy: contorno magenta de acción (antes neón #FF24BD) */
.e-calendar .e-content td.e-today span.e-day, .e-calendar .e-content td.e-focused-date.e-today span.e-day, .e-bigger.e-small .e-calendar .e-content td.e-today span.e-day, .e-bigger.e-small .e-calendar .e-content td.e-focused-date.e-today span.e-day {
    box-shadow: inset 2px 0 var(--hx-accent),inset 0 2px var(--hx-accent),inset -2px 0 var(--hx-accent),inset 0 -2px var(--hx-accent);
    color: var(--hx-accent-text)
}

/* Botón "Hoy": cian de datos legible (antes #3CD8FA, 1.7:1 con texto blanco) */
.e-calendar .e-btn.e-today.e-flat.e-primary, .e-calendar .e-css.e-btn.e-today.e-flat.e-primary {
    background-color: var(--hx-cyan);
    border-color: var(--hx-cyan);
    color: #fff;
}

.e-calendar .e-header .e-title, .e-bigger.e-small .e-calendar .e-header .e-title {
    font-size: 14px;
}

.e-calendar .e-content span.e-day, .e-bigger.e-small .e-calendar .e-content span.e-day {
    font-size: 13px;
}

.e-calendar .e-btn.e-today.e-flat.e-primary:hover, .e-calendar .e-css.e-btn.e-today.e-flat.e-primary:hover {
    background-color: var(--hx-accent);
    border-color: var(--hx-accent);
    color: #fff;
}


/* ============================================================================
   06 · BOTONES Y UTILIDADES BOOTSTRAP
   ============================================================================ */
/* Fase 1: un botón es una orden — peso 600 (antes 300, que "susurraba") */
.btn {
    font-weight: 600 !important;
}

/* ----------------------------------------------------------------------------
   Hover REAL del botón primario (12-jul-2026): Ynex usa rgba(primary, .9) en
   :hover — un 10% de alfa que no se percibe (el GRABAR "se notaba" solo por
   llevar la clase extra btn-darken-hover). Paso de hover explícito y oscuro
   para TODOS los .btn-primary; los !important igualan a los de styleapp.css
   (hatun-theme carga después y gana en cascada).
   ---------------------------------------------------------------------------- */
.btn-primary:hover,
.btn-check:focus + .btn-primary,
.btn-primary:focus {
    background-color: var(--hx-accent-strong) !important;
    border-color: var(--hx-accent-strong) !important;
    color: #fff !important;
}

.btn-check:active + .btn-primary,
.btn-check:checked + .btn-primary,
.btn-primary.active,
.btn-primary:active {
    background-color: var(--hx-accent-strong) !important;
    border-color: var(--hx-accent-strong) !important;
}

/* Foco visible unificado también en botones y links */
.btn:focus-visible {
    box-shadow: var(--hx-focus-ring) !important;
}

a:focus-visible {
    outline: 3px solid var(--hx-accent-ring);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Inputs Bootstrap planos alineados al control estándar (14px, radio 8, foco magenta) */
.form-control:not(.e-control):not([class*="e-"]), .form-select {
    font-size: 14px;
    border-radius: var(--hx-radius-control);
}

    .form-control:not([class*="e-"]):focus, .form-select:focus {
        border-color: var(--hx-accent);
        box-shadow: var(--hx-focus-ring);
    }

/* Fase 2: botones de ícono a 32px (Ley de Fitts; antes 24px, difíciles de
   acertar con mouse e imposibles en tablet de obra). El glifo sigue compacto. */
.btn-icon.btn-sm {
    width: 2rem;
    height: 2rem;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn.btn-sm {
    padding: 0.26rem 0.3rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
}

.nowrap {
    white-space: nowrap !important;
}

/* NAVS MENUS */
.nav {
    --bs-nav-link-padding-x: 0.5rem !important;
    --bs-nav-link-padding-y: 0.25rem !important;
}

.buttons-menu-header {
    width: 15rem;
}


/* ============================================================================
   07 · TABS HATUN estilo navegador: una franja de fondo suave contiene las
   pestañas juntas y delimita la sección; la activa (texto magenta, barra
   superior de marca) emerge en blanco y se funde con el panel de contenido.
   Variables del tema Ynex = modo oscuro ok.
   ============================================================================ */
.hatun-tabs {
    background-color: var(--gray-2, #f0f3f6); /* franja que agrupa y delimita la sección de tabs */
    border: 1px solid var(--default-border, #e1e9e8);
    border-radius: var(--hx-radius-control) var(--hx-radius-control) 0 0;
    padding: 0.5rem 0.5rem 0;
    gap: 2px;
    flex-wrap: wrap;
}

    .hatun-tabs .nav-link {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0.55rem 1.1rem;
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--text-muted, #6e829f);
        background-color: transparent;
        border: 1px solid transparent;
        border-top-width: 3px;
        border-radius: var(--hx-radius-control) var(--hx-radius-control) 0 0;
        margin-bottom: -1px; /* la activa tapa la línea inferior de la franja: efecto carpeta */
        transition: color .15s ease, background-color .15s ease;
    }

        .hatun-tabs .nav-link:hover,
        .hatun-tabs .nav-link:focus {
            color: var(--hx-accent-text);
            background-color: rgba(236, 20, 140, 0.05);
        }

        .hatun-tabs .nav-link:focus-visible {
            box-shadow: var(--hx-focus-ring);
            outline: none;
        }

        .hatun-tabs .nav-link.active {
            color: var(--hx-accent-text);
            background-color: var(--custom-white, #fff);
            border-color: var(--default-border, #e1e9e8);
            border-top: 3px solid var(--hx-accent);
            border-bottom-color: transparent;
        }

        /* Contador en pill dentro del tab: <span class="hatun-tab-count">3</span> */
        .hatun-tabs .nav-link .hatun-tab-count,
        .hatun-tabs-vertical .nav-link .hatun-tab-count {
            font-size: 10.5px;
            font-weight: 700;
            line-height: 1;
            background-color: var(--hx-navy-soft);
            color: var(--hx-ink-2);
            border-radius: var(--hx-radius-pill);
            padding: 3px 7px;
        }

        .hatun-tabs .nav-link.active .hatun-tab-count,
        .hatun-tabs-vertical .nav-link.active .hatun-tab-count {
            background-color: var(--hx-accent-soft);
            color: var(--hx-accent-text);
        }

.hatun-tab-content {
    border: 1px solid var(--default-border, #e1e9e8);
    border-top: 0; /* la separación la dibuja la franja de tabs */
    border-radius: 0 0 var(--hx-radius-control) var(--hx-radius-control);
    background-color: var(--custom-white, #fff);
    padding: 1rem;
}

/* Variante vertical: riel de pestañas a la izquierda, la activa se funde con el panel derecho */
.hatun-tabs-vertical {
    background-color: var(--gray-2, #f0f3f6);
    border: 1px solid var(--default-border, #e1e9e8);
    border-radius: 0.45rem 0 0 0.45rem;
    padding: 0.45rem 0 0.45rem 0.45rem;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

    .hatun-tabs-vertical .nav-link {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        width: 100%;
        padding: 0.55rem 1rem;
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--text-muted, #6e829f);
        background-color: transparent;
        border: 1px solid transparent;
        border-left-width: 3px;
        border-radius: 0.45rem 0 0 0.45rem;
        margin-right: -2px; /* la activa cubre el borde del riel y el del panel */
        transition: color .15s ease, background-color .15s ease;
    }

        .hatun-tabs-vertical .nav-link:hover,
        .hatun-tabs-vertical .nav-link:focus {
            color: var(--hx-accent-text);
            background-color: rgba(236, 20, 140, 0.05);
        }

        .hatun-tabs-vertical .nav-link:focus-visible {
            box-shadow: var(--hx-focus-ring);
            outline: none;
        }

        .hatun-tabs-vertical .nav-link.active {
            color: var(--hx-accent-text);
            background-color: var(--custom-white, #fff);
            border-color: var(--default-border, #e1e9e8);
            border-left: 3px solid var(--hx-accent);
            border-right-color: transparent;
        }

.hatun-tab-content-vertical {
    flex: 1 1 auto;
    min-width: 0; /* evita que grillas con scroll horizontal desborden el layout flex */
    border: 1px solid var(--default-border, #e1e9e8);
    border-radius: 0 0.45rem 0.45rem 0.45rem;
    background-color: var(--custom-white, #fff);
    padding: 1rem;
    position: relative;
    z-index: 1;
}


/* ============================================================================
   08 · STEPPER VERTICAL DE CONTRASEÑAS (UxResetPassword / UxChangePassword)
   Estados por paso: (sin clase) pendiente | .active en curso | .done completado
   ============================================================================ */
.reset-card {
    border: 1px solid var(--default-border);
    border-radius: 0.75rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.reset-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--primary01);
    color: var(--primary-color);
    font-size: 1.35rem;
}

.reset-stepper {
    position: relative;
}

.reset-step {
    position: relative;
    display: flex;
    gap: 1rem;
    padding-bottom: 1.75rem;
}

    .reset-step.reset-step-last {
        padding-bottom: 0.75rem;
    }

    /* línea vertical que conecta los pasos */
    .reset-step:not(.reset-step-last)::before {
        content: "";
        position: absolute;
        left: 1.1rem;
        top: 2.5rem;
        bottom: 0.35rem;
        width: 2px;
        border-radius: 2px;
        background: var(--default-border);
        transition: background .35s ease;
    }

    .reset-step.done:not(.reset-step-last)::before {
        background: var(--primary04);
    }

/* círculo indicador */
.reset-step-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
    border-radius: 50%;
    border: 2px solid var(--input-border);
    background: var(--custom-white);
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    transition: all .3s ease;
}

.reset-step-check {
    display: none;
    font-size: 0.8rem;
}

.reset-step.active .reset-step-circle {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 0 0 5px var(--primary01);
}

.reset-step.done .reset-step-circle {
    border-color: var(--primary-color);
    background: var(--primary01);
    color: var(--primary-color);
}

    .reset-step.done .reset-step-circle .reset-step-number {
        display: none;
    }

    .reset-step.done .reset-step-circle .reset-step-check {
        display: inline;
    }

/* cuerpo del paso */
.reset-step-body {
    flex: 1;
    min-width: 0;
}

.reset-step-head {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 2.25rem;
    align-items: center;
}

.reset-step-title {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-muted);
    transition: color .3s ease;
}

.reset-step.active .reset-step-title,
.reset-step.done .reset-step-title {
    color: var(--default-text-color);
}

.reset-step-summary {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.reset-step-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.9rem;
}

/* link corregir: solo visible en pasos completados */
.reset-step-edit {
    display: none;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--primary-color);
    white-space: nowrap;
    text-decoration: none;
}

.reset-step.done .reset-step-edit {
    display: inline;
}

/* contenido: visible solo en el paso activo */
.reset-step-content {
    display: none;
    padding-top: 0.75rem;
}

.reset-step.active .reset-step-content {
    display: block;
    animation: resetStepIn .35s ease;
}

@keyframes resetStepIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

/* checklist de política de contraseña (se pinta en vivo mientras escribe) */
.reset-pwd-rules {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.reset-pwd-rule {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    padding: 0.2rem 0.55rem;
    border-radius: 50rem;
    background: var(--gray-2, #f2f4f5);
    color: var(--text-muted);
    transition: all .25s ease;
}

    .reset-pwd-rule svg,
    .reset-pwd-rule i {
        font-size: 0.7rem;
        opacity: 0.45;
    }

    .reset-pwd-rule.ok {
        background: rgba(var(--success-rgb), 0.15);
        color: #14a05f;
    }

        .reset-pwd-rule.ok svg,
        .reset-pwd-rule.ok i {
            opacity: 1;
        }

[data-theme-mode=dark] .reset-pwd-rule.ok {
    color: rgb(var(--success-rgb));
}

.reset-pwd-match {
    font-size: 0.78rem;
    margin-top: 0.35rem;
}

    .reset-pwd-match.ok {
        color: #14a05f;
    }

    .reset-pwd-match.fail {
        color: rgb(var(--danger-rgb));
    }

[data-theme-mode=dark] .reset-pwd-match.ok {
    color: rgb(var(--success-rgb));
}


/* ============================================================================
   09 · PIEZAS HATUN
   ============================================================================ */

/* Botón chincheta de CCO predeterminado (hatun.costCenterPin).
   Sin fijar: contorno verde legible. Fijado: relleno con el verde de marca HATUN (#3CF19A). */
.btn-hatun-pin {
    color: #14a05f;
    background-color: transparent;
    border-color: #14a05f;
}

    .btn-hatun-pin:hover,
    .btn-hatun-pin:focus {
        color: #0d0d0d;
        background-color: #3cf19a;
        border-color: #3cf19a;
    }

    .btn-hatun-pin.pinned {
        color: #0d0d0d;
        background-color: #3cf19a;
        border-color: #14a05f;
    }

        .btn-hatun-pin.pinned:hover,
        .btn-hatun-pin.pinned:focus {
            color: #0d0d0d;
            background-color: #2ad483;
            border-color: #14a05f;
        }

/* Aviso de CCO predeterminado aplicado en pantallas de registro (mismo verde que .btn-hatun-pin) */
.hatun-pin-notice {
    color: #14a05f;
}

/* Íconos SVG de acción (pdf.svg, excel-icon.svg, map.svg) en toolbars de
   documento, botones de reporte y dropdowns: UN solo tamaño (20px) para que
   el toolbar se vea parejo — a 16px se perdían dentro del botón de 32px y
   el mapa (26x20 intrínseco) desentonaba con el resto. */
.hatun-btn-ico {
    height: 20px;
    width: auto;
    vertical-align: -5px;
}

.dropdown-item .hatun-btn-ico {
    height: 16px;
    vertical-align: -3px;
}

/* Botón de exportar a Excel (logo oficial SVG en assets/images/excel-icon.svg) en pantallas de búsqueda */
.btn-excel-export {
    color: #1d6f42;
    background-color: transparent;
    border-color: #1d6f42;
}

    .btn-excel-export:hover,
    .btn-excel-export:focus {
        color: #1d6f42;
        background-color: #e8f5ee;
        border-color: #1d6f42;
    }

    .btn-excel-export img {
        height: 20px;
        width: auto;
        display: block;
    }

/* Franja "estás viendo tu última búsqueda" (hatun.searchState.showRestoredNotice) */
.hatun-restored-notice {
    background-color: #f2fdf8;
    border: 1px solid #b7ecd3;
    border-radius: 0.375rem;
    color: #3a3a3a;
}

    .hatun-restored-notice i {
        color: #14a05f;
    }


/* ============================================================================
   10 · MISCELÁNEOS
   ============================================================================ */
.authentication .desktop-logo,
.authentication .desktop-dark {
    height: 4rem;
    line-height: 4rem;
}

div:where(.swal2-container) div:where(.swal2-loader) {
    border-color: #3CD8FA rgba(0,0,0,0) #FF24BD rgba(0,0,0,0) !important
}

#attachmentViewModal .modal-body {
    overflow: hidden;
}
/* evita scroll doble */
#attachmentViewModal .pdfviewer-wrapper {
    height: calc(100vh - 200px);
}

@media (max-width: 992px) {
    #attachmentViewModal .pdfviewer-wrapper {
        height: calc(100vh - 160px);
    }
}

/* Fase 2: íconos del menú de perfil unificados (antes un arcoíris de 7 hex
   arbitrarios fuera de la paleta). Regla: el ícono hereda el tono del texto;
   solo "Salir" conserva color semántico (destructivo). */
.text-profile,
.text-activity,
.text-approval,
.text-expense,
.text-accountability,
.text-password {
    color: var(--hx-ink-3) !important;
}

.text-logout {
    color: var(--hx-bad) !important;
}

.text-action {
    color: #F1C40F !important;
    pointer-events: none;
    filter: none !important;
    opacity: 1 !important;
    font-size: 0.9rem !important;
}
/* yellow brillante - acciones */

.custom-tooltip {
    --bs-tooltip-bg: rgb(var(--primary-rgb));
    --bs-tooltip-color: var(--custom-white);
}


/* ============================================================================
   11 · TOOLBAR ESTÁNDAR DE DOCUMENTO (Fase 2)
   Patrón: <h5 class="card-header"> <div class="card-title">…</div>
           <div class="btn-group"> [Salir·ghost] [utilitarios·ghost]
           [Enviar·secundario] [GRABAR·primario único] </div> </h5>
   Puente transitorio: se re-estilan las clases que las vistas ya usan
   (btn-danger-light, btn-purple, btn-outline-*) SOLO dentro del toolbar,
   hasta que la Fase 3 normalice el markup módulo por módulo.
   ============================================================================ */
.card-header .btn-group .btn {
    display: inline-flex;
    align-items: center;
    font-size: 0.8125rem;
    padding: 0.375rem 0.75rem;
    min-height: 32px;
    border-radius: var(--hx-radius-control) !important; /* btn-group aplana radios; aquí van separados */
}

/* Salir → fantasma con salida en rojo al hover */
.card-header .btn-group .btn-danger-light {
    background-color: transparent;
    border-color: transparent;
    color: var(--hx-ink-2);
}

    .card-header .btn-group .btn-danger-light:hover,
    .card-header .btn-group .btn-danger-light:focus {
        background-color: var(--hx-bad-soft);
        border-color: transparent;
        color: var(--hx-bad);
    }

/* Enviar a aprobación → secundario (borde y superficie; deja de competir en
   morado). !important: Ynex define .btn-purple con !important. */
.card-header .btn-group .btn-purple {
    background-color: var(--hx-surface) !important;
    border-color: var(--hx-line) !important;
    color: var(--hx-ink) !important;
}

    .card-header .btn-group .btn-purple:hover,
    .card-header .btn-group .btn-purple:focus {
        background-color: var(--hx-surface-2) !important;
        border-color: var(--hx-ink-3) !important;
        color: var(--hx-ink) !important;
    }

/* Utilitarios (trazabilidad, PDF, fijar) → fantasma neutro; el rol se revela al hover */
.card-header .btn-group .btn-outline-success {
    background-color: transparent;
    border-color: transparent;
    color: var(--hx-ink-2);
}

    .card-header .btn-group .btn-outline-success:hover,
    .card-header .btn-group .btn-outline-success:focus {
        background-color: var(--hx-navy-soft);
        border-color: transparent;
        color: var(--hx-ink);
    }

.card-header .btn-group .btn-outline-warning {
    background-color: transparent;
    border-color: transparent;
    color: var(--hx-ink-2);
}

    .card-header .btn-group .btn-outline-warning:hover,
    .card-header .btn-group .btn-outline-warning:focus {
        background-color: var(--hx-accent-soft);
        border-color: transparent;
        color: var(--hx-accent-text);
    }


/* ============================================================================
   12 · BADGES DE ESTADO DOCUMENTAL (Fase 2)
   Un solo vocabulario para todos los módulos. Punto + texto (seguro ante
   daltonismo). Render: hatun.stateBadge(nombre) en hatun.configuration.js
   mapea el nombre del contenedor de estado a una de estas 5 familias.
   ============================================================================ */
.hatun-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.4;
    border-radius: var(--hx-radius-pill);
    padding: 2px 10px;
    white-space: nowrap;
    vertical-align: middle;
}

    .hatun-state::before {
        content: "";
        width: 7px;
        height: 7px;
        min-width: 7px;
        border-radius: 50%;
        background-color: currentColor;
    }

.hatun-state--draft {
    background-color: var(--hx-navy-soft);
    color: var(--hx-ink-2);
}

.hatun-state--review {
    background-color: var(--hx-warn-soft);
    color: var(--hx-warn);
}

.hatun-state--ok {
    background-color: var(--hx-ok-soft);
    color: var(--hx-ok);
}

.hatun-state--bad {
    background-color: var(--hx-bad-soft);
    color: var(--hx-bad);
}

.hatun-state--closed {
    background-color: var(--hx-navy);
    color: #fff;
}

    .hatun-state--closed::before {
        background-color: var(--hx-green-brand); /* guiño de marca sobre navy */
    }

/* --- Chip de código de documento (junto al título, antes del badge de
   estado): neutro y monoespaciado, como el mockup del estudio. Sustituye
   al badge rojo bg-danger-transparent con íconos de corchete. --- */
.hatun-doc-code {
    display: inline-block;
    font-family: "Cascadia Code", Consolas, ui-monospace, monospace;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.5;
    background-color: var(--hx-navy-soft);
    color: var(--hx-ink-2);
    border-radius: 6px;
    padding: 2px 9px;
    vertical-align: middle;
    letter-spacing: .01em;
}

/* --- Valor de solo lectura en pantallas View (par del .hatun-field) ---
   El dato es el protagonista: tinta plena y medio peso frente al label
   (12.5px·600·ink-2), que antes compartía tinta y cuerpo con el valor y
   el par se fundía. Dígitos tabulares para que fechas y montos alineen. */
.hatun-field > .hatun-value {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--hx-ink);
    font-variant-numeric: tabular-nums;
    padding: 2px 0;
    overflow-wrap: anywhere;
    min-width: 0;
}

    /* Campo sin dato: se declara con un guion en tinta terciaria en vez de
       dejar la fila muda (el label quedaba flotando sin pareja) */
    .hatun-field > .hatun-value:empty::before {
        content: "—";
        color: var(--hx-ink-3);
        font-weight: 400;
    }

/* Dentro de grillas el badge se compacta para respetar el alto de fila
   y los anchos de columna */
.k-grid .hatun-state,
.e-grid .hatun-state {
    font-size: 11px;
    padding: 1px 8px;
}

/* --- Acciones de fila en grillas (editar / ver / eliminar) ---
   Fantasmas compactos de 28px: neutros en reposo, el rol se revela al hover
   (editar→magenta, ver→tinta, eliminar→rojo). 3 botones caben en columna
   de 90px. Render: parciales _ActionGridOptions*. */
.hatun-grid-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* La celda que contiene las acciones pierde su padding horizontal para que
   los 3 botones quepan completos en columnas de 90px (3×26 + 2×2 + 8 = 90),
   y no aplica ellipsis: al ajuste exacto el redondeo pintaba un punto "…" */
.k-grid td:has(> .hatun-grid-actions),
.e-grid .e-rowcell:has(> .hatun-grid-actions) {
    padding-left: 4px !important;
    padding-right: 4px !important;
    text-overflow: clip !important;
}

.hatun-grid-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    min-width: 26px;
    padding: 0;
    border: 0;
    border-radius: var(--hx-radius-control);
    background-color: transparent;
    color: var(--hx-ink-3);
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .12s ease, color .12s ease;
}

    .hatun-grid-action:focus-visible {
        box-shadow: var(--hx-focus-ring);
        outline: none;
    }

    /* Hover en sólido con ícono blanco: los tintes suaves no se distinguen
       sobre los fondos alternados/hover de las filas de grilla. Selectores
       encadenados para ganarle a los estilos de enlace de Kendo (.k-grid a). */
    .hatun-grid-action.hatun-grid-action--edit:hover,
    .hatun-grid-action.hatun-grid-action--edit:focus {
        background-color: var(--hx-accent);
        color: #fff;
    }

    .hatun-grid-action.hatun-grid-action--view:hover,
    .hatun-grid-action.hatun-grid-action--view:focus {
        background-color: var(--hx-ink-2);
        color: #fff;
    }

    .hatun-grid-action.hatun-grid-action--delete:hover,
    .hatun-grid-action.hatun-grid-action--delete:focus {
        background-color: var(--hx-bad);
        color: #fff;
    }


/* ============================================================================
   13 · SIDEBAR NAVY REFINADO (Fase 2)
   El navy #111c43 de Ynex se queda (es la fuerza de la marca). Refinado:
   categorías en versalitas, íconos alineados a ancho fijo, hover con velo
   claro, ítem activo con el neón de marca (4.9:1 sobre navy — aquí sí pasa).
   ============================================================================ */
[data-menu-styles=dark] .app-sidebar .slide__category .category-name {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(163, 174, 209, 0.62);
}

[data-menu-styles=dark] .app-sidebar .side-menu__item {
    border-radius: var(--hx-radius-control);
    margin-inline: 0.5rem;
    transition: background-color .12s ease, color .12s ease;
}

    [data-menu-styles=dark] .app-sidebar .side-menu__item:hover {
        background-color: rgba(255, 255, 255, 0.06);
        color: #fff;
    }

        [data-menu-styles=dark] .app-sidebar .side-menu__item:hover .side-menu__icon {
            color: #fff;
        }

    [data-menu-styles=dark] .app-sidebar .side-menu__item.active,
    [data-menu-styles=dark] .app-sidebar .slide.has-sub.open > .side-menu__item {
        background-color: rgba(255, 36, 189, 0.10);
        color: #fff;
    }

        [data-menu-styles=dark] .app-sidebar .side-menu__item.active .side-menu__icon,
        [data-menu-styles=dark] .app-sidebar .slide.has-sub.open > .side-menu__item .side-menu__icon {
            color: var(--hx-neon);
        }

[data-menu-styles=dark] .app-sidebar .side-menu__icon {
    width: 1.25em;
    text-align: center;
}


/* ============================================================================
   14 · PATRÓN DE FORMULARIO (Fase 3)
   Labels a la izquierda (decisión del estudio §2.5): columna de ancho fijo
   pegada a su campo, ritmo vertical de 16px, colapso a label-arriba en
   pantallas angostas. Migración por módulo; referencia: Requerimiento.

   Uso:
   <form class="hatun-form">
     <div class="hatun-field hatun-field--full">          ← ocupa las 2 columnas
       <label for="X">CCO</label>
       <div class="hatun-field-control">…campo…botones…</div>
     </div>
     <div class="hatun-field"><label>Título</label> …campo…</div>
     <div class="hatun-field hatun-field--top">…textarea (label arriba-alineado)…</div>
   </form>
   ============================================================================ */
.hatun-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 32px; /* ritmo vertical ajustado 16→12→8 tras feedback: ERP denso */
}

/* Modificador para vistas de lectura: la cabecera gana contorno ("ficha") —
   fondo surface-2, borde y guías por fila — para tener el mismo peso visual
   que las grillas y tabs de la página, en vez de flotar suelta en el blanco.
   Solo en pantallas View; los formularios de edición/búsqueda no lo llevan. */
.hatun-form--view {
    background: var(--hx-surface-2);
    border: 1px solid var(--hx-line-soft);
    border-radius: 10px;
    padding: 4px 18px;
    row-gap: 0; /* el ritmo vertical lo pone el padding de cada fila */
}

    .hatun-form--view .hatun-field {
        border-bottom: 1px solid var(--hx-line-soft);
        padding: 7px 0;
    }

        .hatun-form--view .hatun-field:last-child {
            border-bottom: 0;
        }

/* Alineación de secciones en vistas de lectura: las grillas Syncfusion suelen
   ir como hijas directas del .row (sin .col) y sangran medio gutter a cada
   lado del .container-fluid, dejando la ficha y las secciones en .col más
   angostas y la página descuadrada. Se amplía todo al ancho de la grilla —
   nunca se reduce. Scope: solo containers cuya cabecera es una ficha
   (:has, ya usado en §12), y solo hijos directos para no tocar las filas
   col-md-6/3 anidadas en tabs y modales. */
.container-fluid:has(> .hatun-form--view) > .hatun-form--view,
.container-fluid:has(> .hatun-form--view) > .hatun-dist-panel {
    margin-inline: calc(var(--bs-gutter-x, 1.5rem) * -.5);
}

.container-fluid:has(> .hatun-form--view) > .row > .col-md-12 {
    padding-inline: 0;
}

/* La grilla hija directa del .row recibe el padding de gutter de Bootstrap
   (.row > *) DENTRO de su borde: 12px muertos entre el marco y la tabla */
.container-fluid:has(> .hatun-form--view) > .row > .e-grid,
.container-fluid:has(> .hatun-form--view) > .row > .k-grid {
    padding-inline: 0;
}

/* Bloques no-campo dentro del form (grillas de ítems, tabs) a todo el ancho */
.hatun-form-full {
    grid-column: 1 / -1;
    min-width: 0;
}

.hatun-field {
    display: grid;
    grid-template-columns: var(--hatun-label-w, 132px) minmax(0, 1fr);
    gap: 0 12px;
    align-items: center;
}

    .hatun-field > label {
        font-size: 12.5px;
        font-weight: 600;
        color: var(--hx-ink-2);
        line-height: 1.3;
        margin: 0;
    }

.hatun-field--full {
    grid-column: 1 / -1;
}

/* Para textareas y controles altos: el label se alinea al tope del campo */
.hatun-field--top {
    align-items: start;
}

    .hatun-field--top > label {
        padding-top: 8px;
    }

/* Campo con botones acompañantes (buscar, fijar, desplegar) */
.hatun-field-control {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

    /* El control visible se estira; botones y dropdowns conservan su ancho.
       (No usar :first-child: puede haber inputs ocultos antes del control.) */
    .hatun-field-control > :not(button):not(.dropdown):not(.btn):not([type=hidden]) {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* v6.2: los botones NO se encogen ni parten su texto ("Buscar" caía debajo de la
       lupa cuando el input los estrujaba) — el que cede espacio es el input */
    .hatun-field-control > button,
    .hatun-field-control > .btn {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* v6.1 (fix "la lupa se bajó"): el wrap SOLO existe cuando hay mensaje de error —
       un wrap permanente hacía que el textarea (base 100%) empujara el botón lupa a la
       línea de abajo en TODO el sistema. En estado normal: una línea, botón pegado. */
    .hatun-field-control:has(> label.e-error) { flex-wrap: wrap; }
    /* durante el error, los controles reparten por FACTOR (base 0): la línea nunca se
       excede y el botón se queda arriba junto a su caja */
    .hatun-field-control:has(> label.e-error) > :not(button):not(.dropdown):not(.btn):not([type=hidden]):not(.e-error) {
        flex-basis: 0%;
    }
    /* !important: la regla estructural de arriba suma :not() y le ganaría (lección O5
       v4.4); order 99: el mensaje SIEMPRE al final — sin él, el botón que va después
       del error en el DOM caería a una tercera línea */
    .hatun-field-control > label.e-error { flex: 0 0 100% !important; order: 99; }

/* Mensaje de validación EJ2 — GLOBAL (v6, 03-ago-2026). Antes solo el popup de Caja
   lo tenía arreglado: en el resto del sistema el <label class="e-error"> inyectado
   caía como CELDA del grid del campo (aterrizaba en posiciones absurdas) o como item
   FLEX estrujado en columnas de una palabra. Compacto, rojo, SIEMPRE bajo su control. */
.hatun-form label.e-error,
.hatun-field > label.e-error {
    display: block;
    grid-column: 2 / -1; /* en el grid del campo: bajo el control, nunca en la columna del label */
    min-height: 0;
    margin: 3px 0 0;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--hx-bad);
    line-height: 1.2;
    text-align: left;
}

/* Fila de acciones del formulario (Buscar / Limpiar / exportar) */
.hatun-form-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

/* Colapso responsive: una columna de campos, luego label arriba */
@media (max-width: 991px) {
    .hatun-form {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575px) {
    .hatun-field {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px 0;
    }

        .hatun-field--top > label {
            padding-top: 0;
        }

        /* móvil: el campo es una sola columna — el error ocupa el ancho completo */
        .hatun-field > label.e-error {
            grid-column: 1 / -1;
        }
}

/* Fase 3: btn-secondary (CANCELAR de los modales) deja el cian decorativo de
   Ynex (#3CD8FA, 1.7:1 con texto blanco — solo es color de marca) y pasa al
   secundario neutro del sistema. !important porque Ynex lo define así. */
.btn-secondary {
    background-color: var(--hx-surface) !important;
    border-color: var(--hx-line) !important;
    color: var(--hx-ink) !important;
}

    .btn-secondary:hover,
    .btn-secondary:focus,
    .btn-secondary:active {
        background-color: var(--hx-surface-2) !important;
        border-color: var(--hx-ink-3) !important;
        color: var(--hx-ink) !important;
    }

/* --- Botones definitivos para markup migrado (Fase 3+) --- */
.btn-hatun-ghost {
    background-color: transparent;
    border-color: transparent;
    color: var(--hx-ink-2);
}

    .btn-hatun-ghost:hover,
    .btn-hatun-ghost:focus {
        background-color: var(--hx-navy-soft);
        border-color: transparent;
        color: var(--hx-ink);
    }

.btn-hatun-secondary {
    background-color: var(--hx-surface);
    border: 1px solid var(--hx-line);
    color: var(--hx-ink);
}

    .btn-hatun-secondary:hover,
    .btn-hatun-secondary:focus {
        background-color: var(--hx-surface-2);
        border-color: var(--hx-ink-3);
        color: var(--hx-ink);
    }

/* ============================================================================
   15. AYUDA EN PANTALLA (_UxHelp) — guías con cabecera estándar y contenido
       por pantalla. Pasos numerados, tips y avisos con la paleta del sistema.
   ============================================================================ */
#uxHelpBody {
    font-size: 13.5px;
    color: var(--hx-ink-2);
    counter-reset: helpstep;
    line-height: 1.55;
}

    #uxHelpBody h6 {
        font-size: 11.5px;
        text-transform: uppercase;
        letter-spacing: .07em;
        color: var(--hx-navy, #121D43);
        font-weight: 700;
        margin: 20px 0 10px;
        padding-bottom: 4px;
        border-bottom: 1px solid var(--hx-line, #E4E6EF);
    }

    #uxHelpBody h6:first-child { margin-top: 0; }

    #uxHelpBody kbd {
        background: var(--hx-navy, #121D43);
        color: #fff;
        border-radius: 4px;
        padding: 1px 6px;
        font-size: 11px;
    }

.hatun-help-step {
    position: relative;
    padding: 0 0 14px 38px;
    counter-increment: helpstep;
}

    .hatun-help-step::before {
        content: counter(helpstep);
        position: absolute;
        left: 0;
        top: 0;
        width: 26px;
        height: 26px;
        border-radius: 999px;
        background: #EC148C;
        color: #fff;
        font-weight: 700;
        font-size: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .hatun-help-step > strong { color: var(--hx-navy, #121D43); }

.hatun-help-tip,
.hatun-help-warn {
    border-radius: 8px;
    padding: 10px 12px;
    margin: 10px 0 14px;
    font-size: 12.5px;
}

.hatun-help-tip {
    background: #E7F3FA;
    border-left: 3px solid #0A85B8;
}

.hatun-help-warn {
    background: #FBF0DA;
    border-left: 3px solid #9A6700;
}

/* primera visita: el botón de ayuda pulsa hasta que lo abran */
@keyframes hatunHelpPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(236, 20, 140, .45); }
    50% { box-shadow: 0 0 0 7px rgba(236, 20, 140, 0); }
}

.hatun-help-pulse { animation: hatunHelpPulse 1.6s ease-out infinite; }

/* botón flotante de ayuda: fuera de la barra de acciones (esa es para ACCIONES
   del documento); círculo fijo abajo a la derecha, siempre en el mismo lugar */
.hatun-help-fab {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 1029; /* sobre el contenido, debajo de modales y offcanvas */
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 0;
    background: var(--hx-navy, #121D43);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 6px 18px rgba(18, 29, 67, 0.35);
    cursor: pointer;
    transition: transform .15s ease, background .15s ease;
}

    .hatun-help-fab:hover {
        background: #EC148C;
        transform: scale(1.08);
    }

    .hatun-help-fab:focus-visible {
        outline: 3px solid rgba(236, 20, 140, 0.4);
        outline-offset: 2px;
    }


/* ============================================================================
   16. TOOLTIP HATUN + ICONO DE AYUDA CONTEXTUAL (global)
       Uso en cualquier vista, sin CSS propio:
         <i class="fa-regular fa-circle-info hatun-info" data-bs-toggle="tooltip"
            data-bs-custom-class="hatun-tooltip" data-bs-placement="top"
            title="Texto de ayuda"></i>
       La inicialización es global (hatun.configuration.js).
   ============================================================================ */
.hatun-info {
    color: var(--hx-ink-3);
    margin-left: 5px;
    cursor: help;
    font-size: 12px;
    vertical-align: 1px;
}

    .hatun-info:hover {
        color: var(--hx-accent);
    }

.hatun-tooltip .tooltip-inner {
    background: var(--hx-navy);
    color: #fff;
    font-size: 12.5px;
    line-height: 1.45;
    padding: 8px 12px;
    border-radius: 8px;
    max-width: 270px;
    text-align: left;
    box-shadow: 0 4px 14px rgba(18, 29, 67, .25);
}

.hatun-tooltip.bs-tooltip-top .tooltip-arrow::before { border-top-color: var(--hx-navy); }
.hatun-tooltip.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: var(--hx-navy); }
.hatun-tooltip.bs-tooltip-start .tooltip-arrow::before { border-left-color: var(--hx-navy); }
.hatun-tooltip.bs-tooltip-end .tooltip-arrow::before { border-right-color: var(--hx-navy); }

/* Lista DENTRO de un tooltip hatun (data-bs-html): nombres largos que
   envuelven — viñeta + sangría colgante para ver dónde termina cada ítem.
   Uso: title="<span class='hatun-tooltip-item'>..</span><span ...>..</span>" */
.hatun-tooltip .tooltip-inner .hatun-tooltip-item {
    display: block;
    font-size: 11px;      /* listas: un punto menos que el texto normal del tooltip */
    line-height: 1.35;
    padding-left: 12px;
    text-indent: -12px;
    margin: 3px 0;
}

    .hatun-tooltip .tooltip-inner .hatun-tooltip-item::before {
        content: "\2022\00a0";
        color: var(--hx-sky, #7cc4ff);
    }


/* ============================================================================
   17. TARJETAS KPI PASTEL (global) — resumen de cifras con la misma paleta
       de los stickers del Home (#FFF3A8 amarillo, #FFD6E7 rosa, #CDEBFF
       celeste, #D4F5D9 verde, #FFE3C2 naranja, #EAD9FF lila).
       Uso: <div class="hatun-kpi hatun-kpi--green">
              <div class="hatun-kpi-label">..</div>
              <div class="hatun-kpi-value">..</div>
              <div class="hatun-kpi-sub">..</div>
            </div>
   ============================================================================ */
.hatun-kpi {
    border-radius: 12px;
    padding: 14px 16px;
    height: 100%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}

.hatun-kpi-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--hx-ink-2);
}

.hatun-kpi-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--hx-navy);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

.hatun-kpi-sub {
    font-size: 11.5px;
    color: var(--hx-ink-2);
    line-height: 1.35;
}

.hatun-kpi--yellow { background: #FFF3A8; }
.hatun-kpi--pink { background: #FFD6E7; }
.hatun-kpi--blue { background: #CDEBFF; }
.hatun-kpi--green { background: #D4F5D9; }
.hatun-kpi--orange { background: #FFE3C2; }
.hatun-kpi--purple { background: #EAD9FF; }

/* --- Enlace de documento dentro de grillas (abre la vista en otra pestaña):
   subrayado + acento para que se note clickeable; ícono chico de "salir". --- */
.hatun-doc-link {
    color: var(--hx-accent-text);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

    .hatun-doc-link:hover {
        color: var(--hx-accent);
    }

    .hatun-doc-link .fa-arrow-up-right-from-square {
        font-size: 10px;
        opacity: .7;
    }

/* ============================================================================
   18. VISOR DE TRAZABILIDAD (_UxTraceabilityPopup + RelatedDocumentGraph.js)
       Modal con diagrama Syncfusion (flujo izquierda → derecha), toolbar de
       zoom acotado, panel lateral de detalle y leyenda por tipo de documento.
   ============================================================================ */
.hx-trace-header { gap: 10px; }
.hx-trace-header .modal-title { margin-right: auto; }

.hx-trace-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
}

.hx-trace-toolbar .btn-light {
    border: 1px solid var(--hx-line);
    background: var(--hx-surface);
    color: var(--hx-ink);
    font-weight: 600;
    font-size: 12px;
}

.hx-trace-toolbar .btn-light:hover {
    border-color: var(--hx-accent);
    color: var(--hx-accent-text);
    background: var(--hx-surface);
}

.hx-trace-btn-icon { width: 30px; padding-left: 0; padding-right: 0; }

.hx-trace-zoom-pct {
    font-family: Consolas, monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--hx-ink-2);
    min-width: 44px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* El modal ocupa toda la altura disponible; el cuerpo no scrollea (el
   diagrama tiene su propio desplazamiento) y el panel lateral scrollea solo */
#md-traceability .modal-content { height: 100%; }

#md-traceability .modal-body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.hx-trace-body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.hx-trace-canvas {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: var(--hx-surface-2);
    cursor: grab;
}

.hx-trace-canvas:active { cursor: grabbing; }

.hx-trace-canvas #trace-graph { width: 100%; height: 100%; }

.hx-trace-overview {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 190px;
    height: 120px;
    background: var(--hx-surface);
    border: 1px solid var(--hx-line);
    border-radius: var(--hx-radius-control);
    box-shadow: var(--hx-shadow-card);
    overflow: hidden;
    z-index: 5;
}

.hx-trace-toast {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%) translateY(6px);
    background: var(--hx-navy);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: var(--hx-radius-control);
    padding: 7px 14px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s, transform .18s;
    white-space: nowrap;
    z-index: 6;
}

.hx-trace-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.hx-trace-aside {
    width: 270px;
    flex: none;
    border-left: 1px solid var(--hx-line-soft);
    background: var(--hx-surface);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
}

.hx-trace-empty {
    color: var(--hx-ink-3);
    font-size: 13px;
    margin: auto 0;
    text-align: center;
    padding: 0 8px;
}

.hx-trace-lbl {
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--hx-ink-3);
    font-weight: 600;
}

.hx-trace-val {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--hx-ink);
    margin-top: 1px;
}

.hx-trace-code {
    font-family: Consolas, monospace;
    font-size: 17px;
    font-weight: 650;
    color: var(--hx-ink);
    user-select: all;
}

.hx-trace-field { padding-bottom: 8px; border-bottom: 1px solid var(--hx-line-soft); }
.hx-trace-field-last { border-bottom: 0; }

/* Acciones pegadas a los datos del documento, no al fondo del panel:
   con grafos altos el fondo queda fuera de vista (feedback 19-jul-2026) */
.hx-trace-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.hx-trace-actions .btn-light {
    border: 1px solid var(--hx-line);
    background: var(--hx-surface);
    color: var(--hx-ink);
}

.hx-trace-actions .btn-light:hover {
    border-color: var(--hx-accent);
    color: var(--hx-accent-text);
}

.hx-trace-legend {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    padding: 9px 16px;
    border-top: 1px solid var(--hx-line-soft);
    background: var(--hx-surface);
    font-size: 11.5px;
    color: var(--hx-ink-2);
}

.hx-trace-legend-title { color: var(--hx-ink-3); }

.hx-trace-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
}

.hx-trace-sw {
    width: 11px;
    height: 11px;
    border-radius: 3px;
    border: 1px solid rgba(18, 29, 67, .15);
    display: inline-block;
}

.hx-trace-legend-hint { margin-left: auto; color: var(--hx-ink-3); }

@media (max-width: 820px) {
    .hx-trace-aside { display: none; }
}

/* =====================================================================
   Pestañas de período (módulo Cajas) — metáfora Excel de verdad
   Pestañas delgadas de una línea pegadas al contenido (como las hojas
   de un libro): nombre + punto de estado; fechas y estado completos en
   tooltip. La activa se "funde" con el panel (fondo blanco, acento).
   ===================================================================== */
.hatun-period-tabs {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden; /* nunca scrollbar vertical en la tira de pestañas */
  padding: 4px 2px 0;
  scrollbar-width: thin;
  position: relative;
  z-index: 2;
  margin-bottom: -1px; /* la tira se apoya SOBRE el borde de la hoja */
}
.hatun-period-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  max-width: 220px;
  background: var(--hx-surface-2, #F2F4F9);
  border: 1px solid var(--hx-line);
  border-radius: 8px 8px 0 0;
  padding: 6px 13px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--hx-ink-2, #4A5470);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.hatun-period-tab:hover { background: var(--hx-surface); color: var(--hx-ink); }
.hatun-period-tab:focus-visible { outline: none; box-shadow: var(--hx-focus-ring, 0 0 0 3px rgba(236, 20, 140, .25)); }
.hatun-period-tab .hatun-period-tab-name { overflow: hidden; text-overflow: ellipsis; }
/* La activa: blanca, con techo de acento, fundida con la hoja (su borde
   inferior es blanco y tapa el borde superior de la hoja) */
.hatun-period-tab.active {
  background: var(--hx-surface);
  color: var(--hx-accent-text);
  font-weight: 700;
  border-color: var(--hx-line);
  border-bottom-color: var(--hx-surface);
  box-shadow: inset 0 3px 0 var(--hx-accent);
}
/* Punto de estado del período (familias de hatun-state) */
.hatun-period-tab-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.hatun-period-tab-dot--draft  { background: #8A93A8; }
.hatun-period-tab-dot--review { background: var(--hx-warn); }
.hatun-period-tab-dot--ok     { background: var(--hx-ok); }
.hatun-period-tab-dot--closed { background: var(--hx-navy); }
.hatun-period-tab-dot--bad    { background: var(--hx-bad); }
.hatun-period-tab--add {
  border-style: dashed;
  background: transparent;
  color: var(--hx-accent-text);
  font-weight: 700;
}
.hatun-period-tab--add:hover { background: var(--hx-accent-soft); color: var(--hx-accent-text); }
.hatun-period-content {
  /* El panel es la "hoja": las pestañas se apoyan sobre su borde superior */
  border: 1px solid var(--hx-line);
  border-radius: 0 10px 10px 10px;
  padding: 10px 12px;
  background: var(--hx-surface);
  position: relative;
  z-index: 1;
}
/* La plantilla (styleapp.css) le pone borde + 1rem de padding a TODO .tab-pane:
   dentro de la hoja ese doble marco sobra y roba espacio a los movimientos */
.hatun-period-content > .tab-pane {
  border: 0;
  border-radius: 0;
  padding: 0;
}
/* Cabecera del período dentro de la hoja: aquí vive la señal de DONDE estoy */
.hatun-period-heading { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hatun-period-heading .hatun-period-heading-dates { font-size: 11.5px; color: var(--hx-ink-3, #8A93A8); }
/* =====================================================================
   _UxStateHistory (global): panel lateral con la linea de tiempo de un
   documento — estados, autores y comentarios. La conversacion completa
   vive aqui; los banners de la pantalla solo enlazan a este panel.
   ===================================================================== */
/* Disparador: chip con contador de comentarios */
.hatun-history-toggle { display: inline-flex; align-items: center; gap: 6px; background: var(--hx-accent-soft);
    color: var(--hx-accent-text); border: none; border-radius: var(--hx-radius-pill); padding: 3px 12px;
    font-size: 12px; font-weight: 600; cursor: pointer; transition: filter .15s ease; }
.hatun-history-toggle:hover { filter: brightness(.96); }
/* Panel */
.hatun-history-panel { width: 420px; max-width: 92vw; }
.hatun-history-panel-header { border-bottom: 1px solid var(--hx-line-soft); align-items: flex-start; }
.hatun-history-panel-subtitle { font-size: 12px; color: var(--hx-ink-3, #8A93A8); margin-top: 2px; }
.hatun-history-panel-body { padding: 16px 18px; }
/* Linea de tiempo: riel a la izquierda, punto por evento, tarjeta por entrada */
.hatun-timeline { position: relative; padding-left: 18px; display: flex; flex-direction: column; gap: 10px; }
.hatun-timeline::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px;
    background: var(--hx-line); border-radius: 2px; }
.hatun-timeline-item { position: relative; }
.hatun-timeline-dot { position: absolute; left: -18px; top: 12px; width: 12px; height: 12px; border-radius: 50%;
    border: 2px solid var(--hx-surface); box-shadow: 0 0 0 1px var(--hx-line); }
.hatun-timeline-dot--draft  { background: #8A93A8; }
.hatun-timeline-dot--review { background: var(--hx-warn); }
.hatun-timeline-dot--ok     { background: var(--hx-ok); }
.hatun-timeline-dot--closed { background: var(--hx-navy); }
.hatun-timeline-dot--bad    { background: var(--hx-bad); }
.hatun-timeline-card { background: var(--hx-surface-2, #F6F7FA); border: 1px solid var(--hx-line-soft);
    border-radius: 10px; padding: 10px 13px; }
.hatun-timeline-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hatun-timeline-meta { font-size: 11.5px; color: var(--hx-ink-2, #4A5470); font-weight: 600; }
.hatun-timeline-meta--date { color: var(--hx-ink-3, #8A93A8); font-weight: 400; margin-left: auto; }
/* El comentario es el protagonista: legible, con aire */
.hatun-timeline-note { margin-top: 7px; font-size: 13.5px; line-height: 1.55; color: var(--hx-ink); white-space: pre-wrap; }
/* Enlace discreto dentro de los banners hacia el panel */
.hatun-banner a { color: inherit; font-weight: 700; text-decoration: underline; }

/* =====================================================================
   Paneles pastel del dashboard de Proyecto
   Misma paleta de los stickers del Home (§17): el usuario ya la conoce.
   Se aplican como clase adicional sobre .card.custom-card para que cada
   panel se distinga a primera vista.
   ===================================================================== */
/* v2 (feedback Eduardo): tarjeta BLANCA con el color solo como acento lateral —
   el pastel de fondo entero opacaba los botones y el contenido */
[class*="hatun-panel--"].card.custom-card { background: var(--hx-surface); border: 1px solid var(--hx-line); border-left-width: 4px; }
.card.custom-card.hatun-panel--yellow { border-left-color: #EAB308; }
.card.custom-card.hatun-panel--pink   { border-left-color: var(--hx-accent); }
.card.custom-card.hatun-panel--blue   { border-left-color: var(--hx-cyan); }
.card.custom-card.hatun-panel--green  { border-left-color: var(--hx-ok); }
.card.custom-card.hatun-panel--orange { border-left-color: #D97706; }
.card.custom-card.hatun-panel--purple { border-left-color: #8B5CF6; }

/* =====================================================================
   F6 - Mi Caja: workspace del propietario
   La pantalla se dedica a operar los periodos: identidad compacta,
   saldo protagonista, y banners que cuentan el estado del periodo.
   ===================================================================== */
/* Linea de identidad compacta (CCO, moneda, fechas) bajo la cabecera */
/* O4 v2 — cabecera de la caja MENOS saturada: la meta baja de peso (los valores dejan
   de ser negro-bold: el CCO largo en mayusculas dominaba toda la linea) */
.hatun-cash-meta { display: flex; flex-wrap: wrap; gap: 4px 26px; font-size: 12px; color: var(--hx-ink-3); }
.hatun-cash-meta b { color: var(--hx-ink-2); font-weight: 500; }
/* O4 v2 — Saldo: de pill con fondo a KPI silencioso (separador + monto tabular).
   Un solo elemento con fondo menos en la cabecera; el negativo se marca en el monto */
.hatun-cash-chip { display: inline-flex; align-items: baseline; gap: 7px; background: transparent; color: var(--hx-ink);
    border-left: 1px solid var(--hx-line); border-radius: 0; padding: 1px 0 1px 14px; margin-left: 6px;
    font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hatun-cash-chip-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--hx-ink-3); }
.hatun-cash-chip--neg { color: var(--hx-bad); }
.hatun-cash-chip--neg .hatun-cash-chip-label { color: var(--hx-bad); opacity: .8; }
/* Banner de estado del periodo: compacto (una linea), plegable con la "x" */
.hatun-banner { display: flex; align-items: center; gap: 9px; border-radius: 8px; padding: 6px 11px; font-size: 12px; margin-bottom: 10px; }
.hatun-banner--warn { background: var(--hx-warn-soft); color: var(--hx-warn); }
.hatun-banner--bad { background: var(--hx-bad-soft); color: var(--hx-bad); }
.hatun-banner--ok { background: var(--hx-ok-soft); color: var(--hx-ok); }
.hatun-banner-close { background: transparent; border: none; color: inherit; font-size: 16px; line-height: 1;
    padding: 0 2px; cursor: pointer; opacity: .6; flex-shrink: 0; }
.hatun-banner-close:hover { opacity: 1; }

/* Selector Mi Caja: tarjetas de las cajas del propietario (activa resaltada) */
.hatun-mycash-card { display: flex; align-items: center; justify-content: space-between; gap: 14px;
    background: var(--hx-surface); border: 1px solid var(--hx-line); border-left: 4px solid var(--hx-accent);
    border-radius: var(--hx-radius-card); padding: 12px 16px; margin-bottom: 10px;
    text-decoration: none; color: var(--hx-ink); transition: box-shadow .15s ease, border-color .15s ease; }
.hatun-mycash-card:hover { box-shadow: var(--hx-shadow-card); border-color: var(--hx-accent); color: var(--hx-ink); }
.hatun-mycash-card--inactive { border-left-color: var(--hx-line); opacity: .78; }
.hatun-mycash-card--inactive:hover { border-color: var(--hx-line); }
.hatun-mycash-card-title { font-weight: 600; font-size: 13px; margin-bottom: 3px; }
.hatun-mycash-card-meta { display: flex; flex-wrap: wrap; gap: 2px 20px; font-size: 12px; color: #5A6478; margin-top: 5px; }
.hatun-mycash-card-meta b { color: var(--hx-ink); font-weight: 600; }
.hatun-mycash-card-side { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
/* Historial de cajas cerradas: filas compactas dentro del plegable (siempre saldo 0, sin montos) */
.hatun-mycash-row { display: flex; align-items: center; gap: 14px; padding: 7px 12px; border: 1px solid var(--hx-line-soft);
    border-radius: var(--hx-radius-control); margin-bottom: 6px; text-decoration: none; color: var(--hx-ink); background: var(--hx-surface); }
.hatun-mycash-row:hover { border-color: var(--hx-line); background: var(--hx-bg); color: var(--hx-ink); }
.hatun-mycash-row-name { font-size: 12.5px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hatun-mycash-row-open { font-size: 12px; color: var(--hx-accent-text); font-weight: 600; white-space: nowrap; }

/* ============================================================
   Sección de cálculos de factura (compra/venta) — jul-2026
   Panel de impuestos con switches + panel de totales estilo
   comprobante (incluye Monto redondeo SUNAT).
   ============================================================ */
.hx-calc-panel { background: var(--hx-surface); border: 1px solid var(--hx-line); border-radius: var(--hx-radius-card);
    box-shadow: var(--hx-shadow-card); overflow: hidden; height: 100%; }
.hx-calc-head { display: flex; align-items: center; gap: 8px; padding: 9px 16px; background: var(--hx-line-soft);
    border-bottom: 1px solid var(--hx-line); font-size: 11px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: #55607F; }
.hx-calc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hx-accent); flex: none; }

/* --- panel impuestos --- */
.hx-taxrow { display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 13px 16px; border-bottom: 1px solid var(--hx-line-soft); flex-wrap: wrap; }
.hx-taxrow:last-child { border-bottom: none; }
.hx-taxinfo { display: flex; flex-direction: column; gap: 2px; flex: 1 1 0; min-width: 150px; }
.hx-taxname { font-weight: 600; color: var(--hx-navy); display: flex; align-items: center; gap: 8px; }
.hx-taxdesc { font-size: 12px; color: #7A84A3; }
.hx-taxctrl { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: 0 0 auto; }
.hx-taxcombo { min-width: 205px; }
.hx-taxnote { padding: 8px 16px 12px; font-size: 12px; color: #7A84A3; }
.hx-pct-chip { font-size: 11.5px; font-weight: 700; padding: 1px 9px; border-radius: var(--hx-radius-pill);
    background: var(--hx-navy-soft); color: var(--hx-navy); white-space: nowrap; }
.hx-pct-chip--frozen { background: var(--hx-cyan-soft); color: var(--hx-cyan); }

/* --- panel totales --- */
.hx-calc-totals { border-top: 3px solid var(--hx-accent); display: flex; flex-direction: column; }
.hx-trow { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 7px 16px; border-bottom: 1px dashed var(--hx-line-soft); }
.hx-trow label { margin: 0; color: #55607F; font-size: 13px; }
.hx-tinput { width: 150px; flex: none; }
.hx-tinput .e-input-group input.e-input, .hx-tinput input { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.hx-thint { display: block; font-size: 11px; color: #9AA2BE; font-weight: 400; }
.hx-trow-rounding .e-input-group { border-style: dashed; }
.hx-ttotal { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 11px 16px; background: var(--hx-navy); }
.hx-ttotal-label { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #C9CFE6; }
.hx-ttotal .hx-tinput { width: 180px; }
.hx-ttotal .e-input-group { background: transparent !important; border-color: rgba(255,255,255,.35) !important; box-shadow: none !important; }
.hx-ttotal .e-input-group input.e-input { color: #FFFFFF !important; font-size: 19px; font-weight: 700; }
.hx-tafter { padding: 10px 12px 12px; display: grid; gap: 8px; background: var(--hx-bg); margin-top: auto; }
.hx-tpill { display: flex; align-items: center; justify-content: space-between; gap: 10px;
    border-radius: 10px; padding: 5px 12px; font-size: 13px; }
.hx-tpill label { margin: 0; font-weight: 600; }
.hx-tpill .hx-tinput { width: 140px; }
.hx-tpill .e-input-group { background: transparent; }
.hx-tpill--det { background: var(--hx-cyan-soft); }
.hx-tpill--det label { color: var(--hx-cyan); }
.hx-tpill--ret { background: var(--hx-warn-soft); }
.hx-tpill--ret label { color: var(--hx-warn); }
.hx-tpill--net { background: var(--hx-ok-soft); }
.hx-tpill--net label { color: var(--hx-ok); }

/* --- variante solo lectura (vistas) --- */
.hx-tval { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--hx-ink); font-size: 13.5px; }
.hx-ttotal .hx-tval { color: #FFFFFF; font-size: 19px; font-weight: 700; }
.hx-tpill .hx-tval { font-weight: 700; font-size: 13px; }
.hx-tpill--det .hx-tval { color: var(--hx-cyan); }
.hx-tpill--ret .hx-tval { color: var(--hx-warn); }
.hx-tpill--net .hx-tval { color: var(--hx-ok); }
.hx-yn { font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: var(--hx-radius-pill); letter-spacing: .04em; }
.hx-yn--si { background: var(--hx-ok-soft); color: var(--hx-ok); }
.hx-yn--no { background: var(--hx-line-soft); color: #7A84A3; }

/* --- switch de impuestos: color de marca + rótulo SÍ/NO --- */
.hx-taxrow .e-switch-wrapper .e-switch-inner.e-switch-active,
.hx-taxrow .e-switch-wrapper .e-switch-inner.e-switch-active .e-switch-on,
.hx-taxrow .e-switch-wrapper:hover .e-switch-inner.e-switch-active .e-switch-on,
.hx-taxrow .e-switch-wrapper:not(.e-switch-disabled):hover .e-switch-inner.e-switch-active,
.hx-taxrow .e-switch-wrapper.e-focus .e-switch-inner.e-switch-active {
    background-color: var(--hx-accent) !important; border-color: var(--hx-accent) !important; }
.hx-taxrow .e-switch-wrapper .e-switch-handle.e-switch-active { background-color: #FFFFFF; }
.hx-taxrow .e-switch-wrapper .e-ripple-container { display: none; }
.hx-switch-lbl { font-size: 12px; font-weight: 700; color: #7A84A3; min-width: 22px; letter-spacing: .04em; }
.hx-switch-lbl--on { color: var(--hx-accent-text); }

/* --- barra de fórmula al pie de la sección de cálculos --- */
.hx-calc-formula { padding: 8px 14px; border-radius: 10px; background: var(--hx-line-soft);
    color: #7A84A3; font-size: 12px; text-align: center; }
.hx-calc-formula b { color: var(--hx-accent-text); }

/* ============================================================
   Distribución del gasto por obra (caso 20260727, mockup v2)
   Panel rosado del acento: la imputación por obra es LA decisión
   de la pantalla y se separa visualmente del resto del formulario.
   ============================================================ */
.hatun-dist-panel { border: 1px solid #F3CBE1; border-radius: 10px; padding: 14px 16px; background: #FFF7FB; }
.hatun-dist-title { font-size: 13.5px; font-weight: 700; color: var(--hx-navy); margin-bottom: 2px; }
.hatun-dist-hint { font-size: 12px; color: var(--hx-ink-3); margin-bottom: 10px; }
.hatun-dist-panel .table { --bs-table-bg: transparent; }
.hatun-dist-panel thead th { background: var(--hx-bg); }
.hatun-dist-sum { display: flex; justify-content: flex-end; align-items: center; gap: 18px; padding-top: 8px; font-size: 12.8px; }
.hatun-dist-foot { font-size: 12px; color: var(--hx-ink-3); margin: 8px 0 0; }
/* La obra se ELIGE con la lupa, no se escribe: aspecto de solo lectura
   (clic en el campo también abre el buscador) */
.hatun-dist-panel .dist-cco-name[readonly] { background: var(--hx-bg); color: var(--hx-ink-2); cursor: pointer; }
.hatun-dist-panel .dist-cco-name[readonly]:focus { box-shadow: none; border-color: var(--hx-line); }

/* ============================================================================
   O4 v3 - Cajas: item OBSERVADO por el aprobador — familia ROJA (--hx-bad).
   El rojo se asocia a "hay que corregir" y se nota al instante. SIN fondo ni
   tinte en la fila (se veia raro y peleaba con la seleccion): la señal es el
   TEXTO de la fila en rojo + la bandera roja. Sin tooltip nativo (feo): la
   nota completa vive en el panel "⚑ Observaciones" y en el popup del item.
   SIN columna de texto: la grilla nunca crece horizontalmente.
   ============================================================================ */
/* TODAS las columnas de la fila en rojo (!important: las reglas de la grilla ganan si no).
   Los badges de monto (verde/rojo suave) se apagan en la fila observada: sin fondo y en el
   mismo rojo — una sola voz. Los iconos de accion conservan su color propio. */
.e-grid tr.hatun-row-observed td.e-rowcell { color: var(--hx-bad) !important; }
.e-grid tr.hatun-row-observed .cashbox-amount-badge { background: transparent !important; color: var(--hx-bad) !important; padding-left: 0; padding-right: 0; }
/* Bandera de la columna Acciones: dos estados — solida roja (observado) / tenue */
.hatun-observe-btn i { color: var(--hx-ink-3); opacity: .55; }
.hatun-observe-btn.is-observed i { color: var(--hx-bad); opacity: 1; }
/* Indicador ⚑ para quien NO tiene el boton de observar (dueño, historico) */
.hatun-obs-flag { display: none; color: var(--hx-bad); font-size: 12px; margin-left: 2px; }
.hatun-obs-flag.is-visible { display: inline-block; }
/* "Ver item →" desde el panel: scroll + flash de 2s sobre la fila */
@keyframes hatunObsFlash { 0%, 60% { background-color: var(--hx-bad-soft); } 100% { background-color: transparent; } }
.e-grid tr.hatun-row-flash td.e-rowcell { animation: hatunObsFlash 2s ease-out; }
/* Chip "⚑ Observaciones (N)" en la cabecera del periodo (junto a Comentarios) */
.hatun-obs-toggle { display: inline-flex; align-items: center; gap: 6px; background: var(--hx-bad-soft); color: var(--hx-bad);
    border: 1px solid var(--hx-bad); border-radius: var(--hx-radius-pill); padding: 3px 12px;
    font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.hatun-obs-toggle:hover { filter: brightness(.97); }
/* Panel lateral de observaciones (ancho y titulo aqui, no inline en la vista) */
.hatun-obs-panel.offcanvas { width: 420px; }
.hatun-obs-panel .offcanvas-title { color: var(--hx-bad); font-size: 14px; }
/* Tarjetas del panel: stripe rojo, mismo lenguaje que Comentarios */
.hatun-obs-card { border: 1px solid var(--hx-line); border-left: 3px solid var(--hx-bad); border-radius: 10px;
    padding: 10px 12px; margin-bottom: 10px; background: var(--hx-panel-bg, #fff); }
.hatun-obs-card-item { font-size: 11.5px; color: var(--hx-ink-2); display: flex; gap: 6px 10px; flex-wrap: wrap; align-items: center; }
.hatun-obs-card-item b { color: var(--hx-ink); font-variant-numeric: tabular-nums; }
.hatun-obs-card-note { font-size: 13px; color: var(--hx-ink); margin: 6px 0 5px; overflow-wrap: anywhere; }
.hatun-obs-card-meta { font-size: 11px; color: var(--hx-ink-3); display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: center; }
.hatun-obs-card-goto { font-size: 11.5px; font-weight: 700; color: var(--hx-magenta, #c2185b); cursor: pointer; white-space: nowrap; }
.hatun-obs-card-goto:hover { text-decoration: underline; }
.hatun-obs-badge-mod { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .04em;
    background: var(--hx-ok-soft); color: var(--hx-ok); border-radius: 10px; padding: 2px 8px; }

/* ============================================================================
   Rediseño O4v2 — workspace de la Caja
   1) Cabecera: identidad completa en el card-header (titulo+saldo / CCO+resp
      como sublinea silenciosa); la fila suelta del body se retiro.
   2) Pestaña de periodo de DOS lineas: nombre + (estado corto · fechas) — la
      linea "AGOSTO+2026 · EN REVISION · Desde…" bajo la pestaña era redundante.
   ============================================================================ */
.hatun-cash-head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hatun-cash-head .hatun-cash-meta { margin-top: 1px; }
.hatun-period-tab { align-items: center; }
.hatun-period-tab-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.25; }
.hatun-period-tab-text .hatun-period-tab-name { overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.hatun-period-tab-sub { font-size: 10px; font-weight: 500; color: var(--hx-ink-3); letter-spacing: .02em; white-space: nowrap; }
.hatun-period-tab.active .hatun-period-tab-sub { color: var(--hx-ink-2); }
/* El heading del pane ya solo lleva los chips (Comentarios/Observaciones) */
.hatun-period-heading { min-height: 30px; }

/* O4v2.2 — estado del periodo COMPACTO en la fila de chips (reemplaza al banner de
   fila completa): icono + frase corta, color por familia, detalle en tooltip */
.hatun-period-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
    white-space: nowrap; padding-right: 12px; margin-right: 2px; border-right: 1px solid var(--hx-line); }
.hatun-period-status--warn { color: var(--hx-warn); }
.hatun-period-status--bad { color: var(--hx-bad); }
.hatun-period-status--ok { color: var(--hx-ok); }

/* O4v2.3 — cabecera de UNA linea: CCO y responsable como mini-datos (icono + minimo);
   el detalle completo vive en tooltip y en el modal "Datos de la caja" */
.hatun-cash-mini { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600;
    color: var(--hx-ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hatun-cash-mini i { color: var(--hx-ink-3); font-size: 12px; }
.hatun-cash-mini--link { cursor: pointer; }
.hatun-cash-mini--link:hover { color: var(--hx-magenta, #c2185b); }
.hatun-cash-mini--link:hover i { color: var(--hx-magenta, #c2185b); }

/* O4 v3.2 — observacion en el popup del movimiento: nota COMPACTA y suave — una linea
   que fluye (⚑ + "Observacion de X — nota"); texto largo envuelve sin dominar el popup */
.hatun-obs-note { display: flex; gap: 8px; align-items: baseline;
    background: rgba(179, 38, 30, .04); border-left: 3px solid var(--hx-bad);
    border-radius: 6px; padding: 6px 11px; }
.hatun-obs-note > i { color: var(--hx-bad); font-size: 12px; flex-shrink: 0; position: relative; top: 1px; }
.hatun-obs-note-text { font-size: 12.5px; color: var(--hx-ink-2); min-width: 0; overflow-wrap: anywhere; }
.hatun-obs-note-text b { color: var(--hx-bad); font-weight: 600; }

/* O4v3 — resumen de saldos del periodo como tarjeta: la aritmetica se lee de arriba a
   abajo (inicial + ingresos - egresos) y el SALDO FINAL manda (mas grande, borde superior).
   Signos +/- delante de los montos; numeros tabulares alineados a la derecha. */
.hatun-period-totals { min-width: 250px; background: var(--hx-bg); border: 1px solid var(--hx-line);
    border-radius: 10px; padding: 10px 14px 8px; }
.hatun-ptotal-row { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 3px 0; }
.hatun-ptotal-row span { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--hx-ink-3); }
.hatun-ptotal-row b { font-size: 13px; font-weight: 600; color: var(--hx-ink); font-variant-numeric: tabular-nums; }
.hatun-ptotal-row b.is-in { color: var(--hx-ok); }
.hatun-ptotal-row b.is-out { color: var(--hx-bad); }
.hatun-ptotal-row b.is-neg { color: var(--hx-bad); }
.hatun-ptotal-final { border-top: 1px solid var(--hx-line); margin-top: 4px; padding-top: 7px; }
.hatun-ptotal-final b { font-size: 16px; font-weight: 700; }

/* Montos Ingreso/Egreso de la grilla de movimientos: SOLO texto en color, sin fondo
   (feedback de Eduardo — los badges con fondo verde/rojo suave se retiraron) */
.cashbox-amount-badge { background: transparent !important; padding: 0 !important;
    font-size: inherit !important; font-weight: 600; }

/* Cabecera de la Caja — ritmo uniforme: una fila flex centrada con gap fijo; chips y
   botones a la MISMA altura (22px), sin margenes sueltos que descuadren la linea */
.hatun-cash-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.hatun-cash-title .hatun-doc-code,
.hatun-cash-title .hatun-state { display: inline-flex; align-items: center; height: 22px; margin: 0; }
/* "Datos" de la caja: boton pequeño VISIBLE (borde + etiqueta), quieto hasta el hover */
.hatun-cash-data-btn { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px;
    background: #fff; border: 1px solid var(--hx-line); border-radius: var(--hx-radius-pill);
    color: var(--hx-ink-2); font-size: 11.5px; font-weight: 600; line-height: 1; cursor: pointer; }
.hatun-cash-data-btn i { font-size: 11px; color: var(--hx-ink-3); }
.hatun-cash-data-btn:hover { color: var(--hx-magenta, #c2185b); border-color: var(--hx-magenta, #c2185b); }
.hatun-cash-data-btn:hover i { color: var(--hx-magenta, #c2185b); }
/* El saldo se centra con la fila (el interior mantiene su propia linea base) */
.hatun-cash-title .hatun-cash-chip { margin-left: 2px; }
.hatun-cash-title .hatun-cash-mini { height: 22px; }

/* Punto "EN VIVO" del periodo ABIERTO: verde claro de marca (#3CF19A, decorativo)
   con latido suave — "aqui se trabaja", como el indicador live de otros sistemas */
.hatun-period-tab-dot--live { background: #3CF19A; animation: hatunLiveDot 1.8s ease-out infinite; }
@keyframes hatunLiveDot {
    0%   { box-shadow: 0 0 0 0 rgba(60, 241, 154, .55); }
    70%  { box-shadow: 0 0 0 5px rgba(60, 241, 154, 0); }
    100% { box-shadow: 0 0 0 0 rgba(60, 241, 154, 0); }
}
@media (prefers-reduced-motion: reduce) { .hatun-period-tab-dot--live { animation: none; } }

/* Hoja del periodo con VOLUMEN: el contenido scrollea por dentro (max-height, no height:
   sin espacio muerto en periodos cortos) y el encabezado de columnas queda fijo; las
   pestañas, acciones y la tarjeta de saldos permanecen a la vista */
.hatun-movs-grid .e-content { max-height: 55vh; overflow-y: auto !important; }
/* Busqueda rapida del periodo (aparece con mas de 8 movimientos) */
.hatun-mov-search { width: 220px; height: 31px; font-size: 12.5px; }
/* Conteo de movimientos junto a los chips del periodo */
.hatun-period-movcount { font-size: 11.5px; color: var(--hx-ink-3); white-space: nowrap;
    padding-left: 12px; border-left: 1px solid var(--hx-line); }

/* O7 v4.1 — barra de acciones del período: DOS filas intencionales (antes la fila única
   con justify-between envolvía por ancho y los botones caían a la izquierda como
   accidente). Búsqueda a la IZQUIERDA, acciones a la DERECHA, la PRIMARIA al extremo. */
.hatun-period-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.hatun-period-toolbar-sp { flex: 1 1 auto; }

/* Busqueda del periodo: "x" de limpiar (aparece solo con texto, limpia de un clic) */
.hatun-mov-search-wrap { position: relative; display: inline-block; }
.hatun-mov-search-wrap .hatun-mov-search { padding-right: 26px; }
.hatun-mov-search-clear { display: none; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    width: 20px; height: 20px; line-height: 1; border: none; background: transparent; border-radius: 50%;
    color: var(--hx-ink-3); font-size: 15px; cursor: pointer; padding: 0; }
.hatun-mov-search-wrap.has-text .hatun-mov-search-clear { display: inline-flex; align-items: center; justify-content: center; }
.hatun-mov-search-clear:hover { background: var(--hx-bg); color: var(--hx-bad); }

/* ============================================================================
   O5 — Popup Movimiento de Caja: secciones con nombre, Total como cifra y
   Fondo (Recibo). Mockup aprobado 01-ago-2026 (caso 20260801_Mejora_cajas_periodos)
   ============================================================================ */
/* Cabecera de seccion del formulario: tick magenta (eco del titulo del modal) + etiqueta
   + linea. v2 (feedback 02-ago): mas contraste — debe notarse en capturas para manuales */
.hatun-mov-sec { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase; color: var(--hx-ink-2); margin: 12px 0 8px; }
.hatun-mov-sec::before { content: ""; width: 3px; height: 12px; border-radius: 2px;
    background: var(--primary-color, #c2185b); flex: 0 0 auto; }
.hatun-mov-sec::after { content: ""; flex: 1; height: 1px; background: var(--hx-line); }
#frmCashBoxMovement .hatun-mov-sec:first-of-type { margin-top: 2px; }

/* Total como CIFRA (no un input gris): rojo egreso / verde ingreso; numeros tabulares */
.hatun-mov-total { display: flex; align-items: baseline; gap: 10px; justify-content: flex-end; width: 100%; }
.hatun-mov-total-lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--hx-ink-3); white-space: nowrap; }
.hatun-mov-total-amt { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums;
    color: var(--hx-ink-2); line-height: 1.1; }
.hatun-mov-total-amt.is-egreso { color: var(--hx-bad); }
.hatun-mov-total-amt.is-ingreso { color: var(--hx-ok); }

/* Combo Fondo (Recibo): opciones con codigo-titulo, fecha de abono y usado/total a la
   derecha (verde con capacidad, ROJO agotado con ⚠ — se advierte, no se bloquea) */
.hatun-fund-hint { font-size: 11px; color: var(--hx-ink-3); margin-top: 3px; }
.hatun-fund-opt { display: flex; align-items: center; justify-content: space-between;
    gap: 12px; width: 100%; min-width: 0; }
.hatun-fund-opt-main { display: flex; flex-direction: column; line-height: 1.25; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; }
.hatun-fund-opt-main small { color: var(--hx-ink-3); font-size: 10.5px; }
.hatun-fund-opt-use { font-size: 11px; font-weight: 600; color: var(--hx-ok);
    white-space: nowrap; font-variant-numeric: tabular-nums; }
.hatun-fund-opt.is-exhausted .hatun-fund-opt-main { color: var(--hx-bad); }
.hatun-fund-opt.is-exhausted .hatun-fund-opt-use { color: var(--hx-bad); }
/* Las opciones del combo necesitan alto libre (dos lineas por item) */
.hatun-fund-combo .e-list-item { height: auto; line-height: 1.3; padding-top: 6px; padding-bottom: 6px; }

/* O5 — Recibo interno, seccion "Uso del fondo": barra de consumo + tabla de movimientos */
.hatun-fund-usage { border: 1px solid var(--hx-line); border-radius: 10px; padding: 12px 14px; background: var(--hx-bg); }
.hatun-fund-usage-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hatun-fund-usage-title { font-size: 10px; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--hx-ink-3); }
.hatun-fund-usage-pill { font-size: 12px; font-weight: 600; color: var(--hx-ok); font-variant-numeric: tabular-nums; }
.hatun-fund-usage-pill.is-exceeded { color: var(--hx-bad); }
.hatun-fund-usage-bar { height: 6px; border-radius: 3px; background: var(--hx-line); overflow: hidden; margin: 8px 0 4px; }
.hatun-fund-usage-bar > span { display: block; height: 100%; border-radius: 3px; background: var(--hx-ok); }
.hatun-fund-usage-bar > span.is-exceeded { background: var(--hx-bad); }
.hatun-fund-usage-free { font-size: 11px; color: var(--hx-ink-3); }
.hatun-fund-usage table { width: 100%; margin-top: 8px; border-collapse: collapse; }
.hatun-fund-usage th { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--hx-ink-3); text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--hx-line); }
.hatun-fund-usage th.is-amount { text-align: right; }
.hatun-fund-usage td { font-size: 12px; color: var(--hx-ink-2); padding: 5px 8px;
    border-bottom: 1px solid var(--hx-line); vertical-align: top; }
.hatun-fund-usage tr:last-child td { border-bottom: none; }
.hatun-fund-usage td.is-amount { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hatun-fund-usage-empty { font-size: 12px; color: var(--hx-ink-3); margin-top: 6px; }
/* v5.4 — Uso del fondo partido: FRANJA compacta de una linea en el formulario (sintesis
   siempre a la vista: barra + usado/total + sin asociar + salto a la pestaña); la tabla
   completa vive en la pestaña "Uso del fondo (N)" — con volumen no aplasta el formulario */
.hatun-fund-strip { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    border: 1px solid var(--hx-line); border-radius: 10px; background: var(--hx-bg);
    padding: 8px 14px; }
.hatun-fund-strip-bar { flex: 1 1 160px; min-width: 120px; height: 6px; border-radius: 3px;
    background: var(--hx-line); overflow: hidden; }
.hatun-fund-strip-bar > span { display: block; height: 100%; border-radius: 3px; background: var(--hx-ok); }
.hatun-fund-strip-bar > span.is-exceeded { background: var(--hx-bad); }
.hatun-fund-strip-link { border: none; background: transparent; color: var(--hx-magenta, #c2185b);
    font-size: 11.5px; font-weight: 600; cursor: pointer; padding: 0; white-space: nowrap; }
.hatun-fund-strip-link:hover { text-decoration: underline; }
.hatun-fund-strip-link i { font-size: 10px; }

/* ============================================================================
   O7 — "Mis fondos" en el workspace de la caja: CHIP en la CABECERA (junto al
   SALDO — dato de la CAJA, no del período) + panel offcanvas con una tarjeta
   por fondo y drill de SUS egresos (muchos registros => scroll interno)
   ============================================================================ */
/* v4 (feedback "está feo"): grupo ÚNICO de métricas de la caja — Saldo y Fondos con la
   MISMA anatomía (label chico + número tabular), filete separador, contenedor tranquilo,
   pegado a la derecha de la cabecera. Fondos clickeable (chevron = hay detalle). */
.hatun-cash-metrics { display: inline-flex; align-items: center; gap: 14px; margin-left: auto;
    background: var(--hx-bg); border: 1px solid var(--hx-line); border-radius: 10px;
    padding: 0 14px; height: 30px; }
.hatun-cash-metric { display: inline-flex; align-items: baseline; gap: 7px;
    border: none; background: transparent; padding: 0; }
.hatun-cash-metric-label { font-size: 9.5px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--hx-ink-3); }
.hatun-cash-metric-value { font-size: 13.5px; font-weight: 700; color: var(--hx-ink);
    font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1; }
.hatun-cash-metric-value i { font-size: 11px; }
.hatun-cash-metric.is-neg .hatun-cash-metric-value { color: var(--hx-bad); }
.hatun-cash-metric--btn { cursor: pointer; }
.hatun-cash-metric--btn .hatun-cash-metric-value { color: var(--hx-ok); }
.hatun-cash-metric--btn.is-neg .hatun-cash-metric-value { color: var(--hx-bad); }
.hatun-cash-metric--btn:hover .hatun-cash-metric-value { text-decoration: underline; }
.hatun-cash-metric-go { font-size: 9px !important; color: var(--hx-ink-3); margin-left: 2px; }
.hatun-cash-metrics-sep { width: 1px; height: 16px; background: var(--hx-line); align-self: center; }

/* v3 — MODAL "estado de cuenta" (el offcanvas v2 se retiró): tarjetas-FILTRO por fondo
   (TODOS mezcla con columna Fondo), toolbar con búsqueda + export, pills de la grilla */
.hatun-fundm-sub { font-size: 10.5px; font-weight: 600; color: var(--hx-ink-3); margin-left: 8px; }
.hatun-fundm-cards { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.hatun-fundm-card { border: 1.5px solid var(--hx-line); border-radius: 10px; background: #fff;
    padding: 8px 12px; min-width: 200px; max-width: 270px; text-align: left; cursor: pointer; }
.hatun-fundm-card:hover { border-color: var(--hx-ink-3); }
.hatun-fundm-card.is-selected { border-color: var(--primary-color, #c2185b);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12); }
.hatun-fundm-card--all { display: inline-flex; align-items: center; justify-content: center;
    min-width: 92px; font-size: 12px; font-weight: 800; color: var(--hx-ink-2); }
.hatun-fundm-card-t { display: block; font-size: 11.5px; font-weight: 700; color: var(--hx-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hatun-fundm-card-bar { display: block; height: 5px; border-radius: 3px; background: var(--hx-line);
    overflow: hidden; margin: 6px 0 5px; }
.hatun-fundm-card-bar > span { display: block; height: 100%; background: var(--hx-ok); border-radius: 3px; }
.hatun-fundm-card-bar > span.is-exceeded { background: var(--hx-bad); }
.hatun-fundm-card-n { display: flex; justify-content: space-between; gap: 10px; font-size: 10.5px;
    color: var(--hx-ink-3); font-variant-numeric: tabular-nums; }
.hatun-fundm-card-n b { color: var(--hx-ok); font-size: 11.5px; white-space: nowrap; }
.hatun-fundm-card.is-exceeded .hatun-fundm-card-n b { color: var(--hx-bad); }
.hatun-fundm-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.hatun-fundm-sp { flex: 1; }
.hatun-fundm-per { background: #eef1f5; border-radius: var(--hx-radius-pill); padding: 1px 8px;
    font-size: 10px; font-weight: 700; color: var(--hx-ink-2); white-space: nowrap; }
.hatun-fundm-per--fondo { background: var(--hx-ok-soft); color: var(--hx-ok); }
.hatun-fundm-note { font-size: 11px; color: var(--hx-ink-3); margin-top: 8px; }
.hatun-fundm-note b { color: var(--hx-ink-2); }
/* La grilla del modal (kendo) compacta — este modal no lleva hatun-cajaop-form */
#fundsModal .k-grid td { padding: 4px 8px; font-size: 12px; }
#fundsModal .k-grid th { padding: 5px 8px; font-size: 11px; }

/* O6 — Reporte "Fondos por obra": celda de USO con semaforo + mini barra + %.
   Familias: ok=con saldo (verde) · warn=por agotarse (ambar) · full=agotado (gris,
   se completo sin drama) · exceeded=excedido (rojo — se señala, no se bloquea) */
.hatun-fundrep-cell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hatun-fundrep-state { font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
    border-radius: var(--hx-radius-pill); padding: 2px 8px; white-space: nowrap; }
.hatun-fundrep-state.is-ok { background: var(--hx-ok-soft); color: var(--hx-ok); }
.hatun-fundrep-state.is-warn { background: var(--hx-warn-soft); color: var(--hx-warn); }
.hatun-fundrep-state.is-full { background: var(--hx-line); color: var(--hx-ink-2); }
.hatun-fundrep-state.is-exceeded { background: var(--hx-bad-soft); color: var(--hx-bad); }
.hatun-fundrep-bar { flex: 1 1 40px; min-width: 34px; height: 5px; border-radius: 3px;
    background: var(--hx-line); overflow: hidden; }
.hatun-fundrep-bar > span { display: block; height: 100%; border-radius: 3px; background: var(--hx-ok); }
.hatun-fundrep-bar > span.is-exceeded { background: var(--hx-bad); }
.hatun-fundrep-pct { font-size: 11px; font-weight: 600; color: var(--hx-ink-3);
    font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Nota de grilla vacia del componente estandar de vinculaciones (unica mejora global
   aprobada — reemplaza la grilla vacia con cabeceras por una linea discreta). La nota NO
   se estira: el !important es NECESARIO — la regla estructural de .hatun-field-control
   (`> :not(button):not(.dropdown):not(.btn):not([type=hidden]) { flex:1 1 auto }`) suma
   la especificidad de sus :not() y le gana a cualquier selector de clase simple (causa
   del "+" varado a la derecha en la v2) */
.hatun-related-empty { font-size: 12px; color: var(--hx-ink-3); padding: 6px 2px; }
.hatun-field-control > .hatun-related-empty { flex: 0 0 auto !important; }

/* "+" de Documentos relacionados (global, aprobado 02-ago-2026): boton SOLIDO estilo
   mockup — mas visible que el outline chico; mismo dropdown y comportamiento.
   v3 (feedback 02-ago "ni siquiera puede entender un usuario"): con la grilla VACIA el
   boton muestra su VERBO — pildora "+ Vincular documento" pegada a la nota, a la
   izquierda; con filas vuelve al "+" compacto de siempre junto a la grilla */
.hatun-related-add { display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border: none; border-radius: 8px; padding: 0;
    background: var(--primary-color, #c2185b); color: #fff;
    font-size: 13px; line-height: 1; cursor: pointer; flex: 0 0 auto; }
.hatun-related-add:hover { filter: brightness(.9); color: #fff; }
.hatun-related-add:focus-visible { outline: 2px solid var(--hx-line); outline-offset: 2px; }
.hatun-related-add .hatun-related-add-label { display: none; }
.hatun-related-isempty .hatun-related-add { width: auto; height: 26px; gap: 6px;
    padding: 0 12px 0 10px; border-radius: var(--hx-radius-pill); font-size: 12px; font-weight: 600; }
.hatun-related-isempty .hatun-related-add .hatun-related-add-label { display: inline; }

/* ============================================================================
   O5 v3 — DENSIDAD COMPACTA de los popups de Caja (feedback 02-ago-2026):
   el modal no debe scrollear. Acotado a .hatun-cajaop-form.modal (los DOS popups);
   la pantalla del detalle comparte la clase pero NO es .modal y no se toca.
   Jerarquia tipografica: label = nombre del campo (chico, gris); contenido = el
   dato (mas oscuro). Inputs bajan de ~40px a ~31px.
   ============================================================================ */
/* Labels de CAMPO: chicos, grises, centrados contra el input de 31px (multilinea incluida)
   y ALINEADOS A LA DERECHA, pegados a su campo (v5, feedback 02-ago: el hueco entre label
   e input dispersaba la fila — el aire muerto se muda a la izquierda, donde se lee como
   separacion de columnas). OJO: el validador EJ2 inyecta <label class="e-error"> — excluido */
.hatun-cajaop-form.modal label:not(.e-error) { display: flex; align-items: center;
    justify-content: flex-end; text-align: right; min-height: 31px; margin: 0;
    padding-right: 2px; font-size: 11.5px; font-weight: 600; color: var(--hx-ink-3); line-height: 1.25; }
/* Mensaje de validacion: compacto bajo el campo, rojo, sin romper la fila */
.hatun-cajaop-form.modal label.e-error { display: block; min-height: 0; margin: 3px 0 0;
    font-size: 10.5px; font-weight: 600; color: var(--hx-bad); line-height: 1.2; }
/* La mini-tabla Monto+comision no centra la celda vecina cuando el error crece una */
.hatun-cajaop-form.modal form td { vertical-align: top; }
/* Inputs planos (N° sustento, proveedor, RUC, textarea): mas bajos y con el dato oscuro */
.hatun-cajaop-form.modal .form-control { padding: 5px 10px; font-size: 12.5px;
    min-height: 31px; color: var(--hx-ink); }
.hatun-cajaop-form.modal textarea.form-control { min-height: 0; line-height: 1.35; }
/* Widgets Syncfusion (fecha, combos, numericos): misma altura y tipografia que los planos.
   Pisa la homologacion a 14px de componentstyles (selector mas especifico) */
.hatun-cajaop-form.modal input.e-input,
.hatun-cajaop-form.modal textarea.e-input,
.hatun-cajaop-form.modal .e-input-group,
.hatun-cajaop-form.modal .e-input-group.e-control-wrapper { font-size: 12.5px; }
.hatun-cajaop-form.modal .e-input-group .e-input { padding: 5px 10px; color: var(--hx-ink); }
.hatun-cajaop-form.modal .e-input-group .e-input-group-icon { font-size: 12px; min-height: 0; }
/* Valores del modo Ver: el DATO mas oscuro que su label (pisa el text-muted utilitario) */
.hatun-cajaop-form.modal .text-readonly.text-muted { color: var(--hx-ink-2) !important; }
/* Ritmo vertical del modal: menos aire muerto en cuerpo, pie y pestañas */
.hatun-cajaop-form.modal .modal-body { padding: 12px 18px 8px; }
.hatun-cajaop-form.modal .modal-footer { padding: 8px 12px; }
.hatun-cajaop-form.modal .modal-footer .btn { padding: 6px 16px; font-size: 12.5px; }
.hatun-cajaop-form.modal .card-header { padding: 10px 16px; }
.hatun-cajaop-form.modal .hatun-tab-content { padding: 8px 10px; }
/* Adjuntos como CUARTA seccion del modal (v5): el titulo lo da la seccion, el label
   interno del partial sobra — se oculta y el campo pasa a bloque de ancho completo */
.hatun-cajaop-form.modal #sectionUploadAttachment .hatun-field { display: block; }
.hatun-cajaop-form.modal #sectionUploadAttachment label { display: none; }

/* Bloque de Adjuntos (kendo upload + grilla) compactado SOLO dentro del modal */
.hatun-cajaop-form.modal .k-upload .k-dropzone { padding: 3px 8px; }
.hatun-cajaop-form.modal .k-upload .k-upload-button { padding: 4px 12px; font-size: 12px; }
.hatun-cajaop-form.modal .k-dropzone .k-dropzone-hint { font-size: 12px; }
.hatun-cajaop-form.modal .k-grid td { padding: 4px 8px; font-size: 12px; }
.hatun-cajaop-form.modal .k-grid th { padding: 5px 8px; font-size: 11.5px; }

/* O5 v4/v5.1 — BORDE IMPRIMIBLE reutilizable (.hatun-print-inputs): pizarra 1.5px radio 6,
   foco con anillo magenta (solo pantalla), deshabilitado mismo borde + fondo gris, error
   (.e-error) en rojo con la misma caja. SOLO el trazo — no toca densidad ni labels.
   Paso 1 (02-ago-2026): aplicado a los 2 popups y los 7 modales del módulo Caja.
   Paso 2 PENDIENTE (caso aparte): llevarlo a todo el sistema cuando Eduardo valide
   sus capturas impresas. */
.hatun-print-inputs .form-control:not(.e-error) {
    border: 1.5px solid var(--hx-input-border); border-radius: 6px; }
.hatun-print-inputs .form-control:focus {
    border-color: rgb(var(--primary-rgb));
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .15); outline: 0; }
.hatun-print-inputs .form-control:disabled,
.hatun-print-inputs .form-control[readonly] {
    background: #f3f4f6; border-color: var(--hx-input-border); }
.hatun-print-inputs .e-input-group:not(.e-input-focus):not(.e-error),
.hatun-print-inputs .e-input-group.e-control-wrapper:not(.e-input-focus):not(.e-error) {
    border: 1.5px solid var(--hx-input-border); border-radius: 6px; }
.hatun-print-inputs .e-input-group.e-input-focus:not(.e-error),
.hatun-print-inputs .e-input-group.e-control-wrapper.e-input-focus:not(.e-error) {
    border: 1.5px solid rgb(var(--primary-rgb)); border-radius: 6px;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .15); }
/* v4.1 — UNA sola caja por widget: el borde vive SOLO en el wrapper. El tema bootstrap5
   de EJ2 le pone caja propia al input interno y al icono (estilo input-group BS5): con el
   borde del wrapper encima salian bordes dobles y cajas separadas — se apagan aqui */
.hatun-print-inputs .e-input-group,
.hatun-print-inputs .e-input-group.e-control-wrapper { background: #fff; overflow: hidden; }
.hatun-print-inputs .e-input-group .e-input {
    border: 0 !important; box-shadow: none !important; background: transparent; border-radius: 6px 0 0 6px; }
.hatun-print-inputs .e-input-group .e-input-group-icon {
    border: 0 !important; box-shadow: none !important; margin: 0; border-radius: 0;
    border-left: 1px solid var(--hx-line) !important; background: transparent; }
.hatun-print-inputs .e-input-group.e-disabled { border-color: var(--hx-input-border); background: #f3f4f6; }
.hatun-print-inputs .e-input-group.e-disabled .e-input { background: transparent !important; }
/* Estado de ERROR de validacion: misma caja unica (geometria identica), en rojo — el tema
   bootstrap5 le ponia su propio pill con glow y desentonaba */
.hatun-print-inputs .form-control.e-error { border: 1.5px solid var(--hx-bad); border-radius: 6px; }
.hatun-print-inputs .e-input-group.e-error,
.hatun-print-inputs .e-input-group.e-control-wrapper.e-error {
    border: 1.5px solid var(--hx-bad); border-radius: 6px; box-shadow: none; }

/* ============================================================
   §18 — PANEL DEL PROYECTO (hub, O11 02-ago-2026)
   Vista TTProject/UxProjectView reorganizada por INTENCIÓN
   (patrón Object Page de SAP Fiori): identidad compacta + barra
   de anclas fija + zonas Por decidir / Configurar y operar /
   Avance / Ficha plegada. Incluye la migración del <style>
   inline "Fase D2 v4" que vivía en la vista (regla: CSS nunca
   en la vista).
   ============================================================ */

/* --- Identidad compacta --- */
.hatun-hub-head { margin-bottom: 10px; }
/* v5.1: el TÍTULO de la pantalla ("Proyecto") es el más grande; el nombre viene en
   MAYÚSCULAS de la data (a igual px se ve más grande) → 13px/600 lo pone un escalón abajo */
.hatun-hub-name {
    font-size: 13px; font-weight: 600; color: var(--hx-ink);
    letter-spacing: 0; line-height: 1.4; text-wrap: balance; }
.hatun-hub-meta {
    display: flex; flex-wrap: wrap; gap: 2px 18px; margin-top: 4px;
    color: var(--hx-ink-3); font-size: 12.5px; }
.hatun-hub-meta b { color: var(--hx-ink-2); font-weight: 600; }
/* EDITAR con subtítulo: el Edit es SOLO datos, aquí se configura */
.hatun-hub-editbtn { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.15; }
.hatun-hub-editbtn small { font-weight: 400; font-size: 10px; opacity: .85; }

/* --- Barra de anclas fija (el "dónde estoy" permanente) --- */
/* v6 ("último examen de diseñador"): barra de VIDRIO ESMERILADO — el contenido pasa
   difuminado por debajo al quedar pegada (materialidad, no franja de color); el activo
   es un INDICADOR MAGENTA SUAVE que se DESLIZA entre secciones (posicionado por JS,
   transición solo con .ready para no saltar al cargar); al quedar pegada (.is-stuck)
   crece la sombra y aparece el borde. El offset sticky lo calcula el JS contra la
   .app-header REAL (adiós al hueco por donde se veía pasar el texto). */
/* v6.1 (revisión final, "en reposo no se leen como botones"): DOS estados con
   propósito — en REPOSO es un control segmentado visible (riel índigo suave +
   iconos = afordancia inmediata); PEGADA se vuelve vidrio esmerilado con sombra
   (la materialidad solo paga cuando hay contenido pasando por debajo) */
.hatun-hub-anchors {
    position: sticky; top: var(--hx-hub-sticky-top, 64px); z-index: 1010;
    display: flex; gap: 2px; flex-wrap: wrap; align-items: center;
    background: var(--hx-navy-soft);
    -webkit-backdrop-filter: blur(10px) saturate(1.5);
    backdrop-filter: blur(10px) saturate(1.5);
    border: 1px solid transparent; border-radius: 12px;
    padding: 5px 6px; margin-bottom: 14px;
    transition: background .25s ease, box-shadow .25s ease, border-color .25s ease; }
.hatun-hub-anchors.is-stuck {
    background: rgba(255, 255, 255, .82);
    border-color: var(--hx-line);
    box-shadow: 0 12px 28px -18px rgba(18, 29, 67, .5); }
@supports not (backdrop-filter: blur(1px)) {
    .hatun-hub-anchors.is-stuck { background: #fff; }
}
/* el indicador vive DETRÁS del texto y se mueve con transform (barato de animar) */
.hatun-hub-ind {
    position: absolute; top: 5px; bottom: 5px; left: 0; width: 0;
    border-radius: 8px; background: var(--hx-accent-soft);
    box-shadow: inset 0 0 0 1px rgba(190, 16, 116, .14); }
.hatun-hub-anchors.ready .hatun-hub-ind {
    transition: transform .35s cubic-bezier(.4, 0, .2, 1), width .35s cubic-bezier(.4, 0, .2, 1); }
.hatun-hub-anchor {
    position: relative; z-index: 1;
    border: 0; background: transparent; cursor: pointer;
    padding: 6px 14px; border-radius: 8px; font-size: 12.5px; font-weight: 600;
    color: var(--hx-ink-2); transition: color .2s ease; }
.hatun-hub-anchor:hover { color: var(--hx-ink); }
.hatun-hub-anchor.on { color: var(--hx-accent-strong); }
.hatun-hub-anchor:focus-visible { outline: 2px solid var(--hx-accent); outline-offset: 2px; }
.hatun-hub-anchor i { font-size: 11px; margin-right: 6px; opacity: .7; }
.hatun-hub-anchor.on i { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .hatun-hub-anchors.ready .hatun-hub-ind { transition: none; }
}
.hatun-hub-anchor-cnt {
    display: inline-block; min-width: 17px; text-align: center; margin-left: 6px;
    background: var(--hx-bad); color: #fff; border-radius: 999px;
    font-size: 10.5px; font-weight: 700; padding: 1px 5px; vertical-align: 1px; }

/* --- Zonas: BANDAS con fondo gris suave (v2, "no se nota dónde inicia y
   finaliza cada sección") — la zona es un contenedor visible; las tarjetas
   blancas viven DENTRO. Mismo patrón panel-gris de los filtros (§7 criterios). --- */
.hatun-hub-zone {
    background: var(--hx-surface-2); border: 1px solid var(--hx-line-soft);
    border-radius: 14px; padding: 12px 14px 14px; margin-bottom: 18px;
    scroll-margin-top: calc(var(--hx-hub-sticky-top, 66px) + 54px); }
.hatun-hub-zone-h { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; }
/* tick magenta de marca: mismo lenguaje del título de página */
.hatun-hub-zone-h h6 {
    margin: 0; font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase;
    color: var(--hx-ink-2); font-weight: 700;
    border-left: 3px solid var(--hx-accent); padding-left: 9px; line-height: 1.4; }
.hatun-hub-zone-h span { flex: 1; height: 1px; background: var(--hx-line); }

/* --- ① Por decidir --- */
.hatun-hub-decide { border-left: 4px solid var(--hx-bad) !important; }
.hatun-hub-ok {
    display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
    color: var(--hx-ok); background: var(--hx-ok-soft); border-radius: 8px; padding: 9px 13px; margin-bottom: 8px; }
.hatun-hub-minirow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.hatun-hub-minilink {
    display: inline-flex; gap: 6px; align-items: center; cursor: pointer;
    background: var(--hx-surface-2); border: 1px solid var(--hx-line); border-radius: 8px;
    padding: 6px 12px; font-size: 12px; color: var(--hx-ink-2); }
.hatun-hub-minilink:hover { border-color: var(--hx-ink-3); }

/* --- Chips de filtro (no previstos y consumo) --- */
.hatun-hub-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.hatun-hub-chip {
    border-radius: 999px; border: 1px solid var(--hx-line); background: #fff;
    color: var(--hx-ink-2); font-size: 11.5px; font-weight: 600; padding: 4px 12px; cursor: pointer; }
.hatun-hub-chip:hover { border-color: var(--hx-ink-3); }
/* v5: misma familia ligera que las anclas — magenta suave de marca */
.hatun-hub-chip.on {
    background: var(--hx-accent-soft); border-color: var(--hx-accent-soft);
    color: var(--hx-accent-strong); }
.hatun-hub-search {
    margin-left: auto; min-width: 190px; border: 1.5px solid var(--hx-input-border, #64748b);
    border-radius: 6px; padding: 4px 10px; font-size: 12px; color: var(--hx-ink); background: #fff; }
.hatun-hub-search:focus { outline: 0; border-color: rgb(var(--primary-rgb));
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .15); }
.hatun-hub-vertodas {
    display: block; width: 100%; margin-top: 8px; cursor: pointer;
    background: var(--hx-surface-2); border: 1px dashed var(--hx-line); border-radius: 8px;
    color: var(--hx-ink-2); font-size: 12px; font-weight: 600; padding: 7px 14px; text-align: center; }
.hatun-hub-vertodas:hover { border-color: var(--hx-ink-3); }

/* --- ② Configurar y operar: launchpad de tarjetas uniformes --- */
.hatun-hub-launch { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 10px; }
.hatun-hub-launch > .card { height: 100%; }
.hatun-hub-whytext { font-size: 11px; color: var(--hx-ink-3); margin: 2px 0 8px; }
.hatun-hub-cajasum { min-height: 34px; }
.hatun-hub-cajakv { display: flex; gap: 22px; flex-wrap: wrap; }
.hatun-hub-cajakv b {
    display: block; font-size: 10.5px; letter-spacing: .06em; color: var(--hx-ink-3); font-weight: 600; }
.hatun-hub-cajakv span {
    font-weight: 700; color: var(--hx-ink); font-size: 15px; font-variant-numeric: tabular-nums; }

/* --- ④ Ficha plegada --- */
.hatun-hub-fichafold { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hatun-hub-fichaprev {
    margin-top: 10px; background: var(--hx-surface-2); border: 1px solid var(--hx-line-soft);
    border-radius: 10px; padding: 2px 14px; }
.hatun-hub-fichaprev-row {
    display: grid; grid-template-columns: 130px 1fr; gap: 14px; align-items: baseline;
    padding: 7px 0; border-bottom: 1px solid var(--hx-line-soft); font-size: 12.5px; }
.hatun-hub-fichaprev-row:last-child { border-bottom: 0; }
.hatun-hub-fichaprev-row span { color: var(--hx-ink-3); }
.hatun-hub-fichaprev-row b { color: var(--hx-ink); font-weight: 600; }
#btnFichaToggle #fichaToggleIcon { transition: transform .2s ease; }
#btnFichaToggle[aria-expanded="true"] #fichaToggleIcon { transform: rotate(180deg); }

/* --- Migración del <style> inline "Fase D2 v4" de UxProjectView --- */
#dashKpis .card {
    border-left: 4px solid #EC148C;
    border-radius: 12px;
    border-top: 1px solid #E7E4EC; border-right: 1px solid #E7E4EC; border-bottom: 1px solid #E7E4EC;
    box-shadow: 0 1px 3px rgba(18, 29, 67, .06);
    transition: box-shadow .15s ease, transform .15s ease; }
#dashKpis .card[role="button"]:hover { box-shadow: 0 6px 18px rgba(18, 29, 67, .14); transform: translateY(-2px); }
#dashKpis .fs-4 { font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: #121D43; }
#hubConsumoCard, #seccionAdicionales,
.hatun-hub-launch > .card {
    border: 1px solid #E7E4EC !important;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(18, 29, 67, .06); }
#hubConsumoCard .card-body > .d-flex:first-child,
#seccionAdicionales .card-body > h6,
.hatun-hub-launch > .card .card-body > h6:first-child,
.hatun-hub-launch > .card .card-body > .d-flex:first-child {
    padding-bottom: 8px; margin-bottom: 6px;
    border-bottom: 2px solid #F4F2F7; }
.dash-row-item { border-bottom: 1px dashed #ECEAF1; }
.dash-row-item:last-child { border-bottom: none; }
.dash-bar-label { flex: 0 0 250px; min-width: 0; line-height: 1.25; }
.dash-bar-amounts { font-variant-numeric: tabular-nums; white-space: nowrap; color: #7B8098; }
.dash-cat-action {
    font-size: 11px; padding: 2px 8px; border-radius: 6px;
    display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }

/* --- §18 v7: launchpad con IDENTIDAD — el color del dominio vive en el CHIP de
   icono (paleta pastel §17 = stickers del Home, texto navy como los KPI: cero
   colores nuevos); personas como fichas con avatar de iniciales; el monto de
   Aportes como héroe; hover que invita (mismo lenguaje de los KPIs) --- */
.hatun-hub-ico {
    width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; color: var(--hx-navy); }
.hatun-hub-ico--yellow { background: #FFF3A8; }
.hatun-hub-ico--pink   { background: #FFD6E7; }
.hatun-hub-ico--blue   { background: #CDEBFF; }
.hatun-hub-ico--green  { background: #D4F5D9; }
.hatun-hub-ico--orange { background: #FFE3C2; }
.hatun-hub-ico--purple { background: #EAD9FF; }

.hatun-hub-launch > .card { transition: box-shadow .18s ease, transform .18s ease; }
.hatun-hub-launch > .card:hover {
    box-shadow: 0 8px 22px -14px rgba(18, 29, 67, .35); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
    .hatun-hub-launch > .card, .hatun-hub-launch > .card:hover { transition: none; transform: none; }
}

/* personas: avatar de iniciales (tono estable por nombre, mismos 6 pasteles) */
.hatun-hub-person {
    display: flex; align-items: center; gap: 9px; padding: 5px 0;
    border-bottom: 1px dashed var(--hx-line-soft); font-size: 12.5px; }
.hatun-hub-person:last-child { border-bottom: 0; }
.hatun-hub-person b { display: block; color: var(--hx-ink); font-weight: 600; line-height: 1.25; }
.hatun-hub-person small { color: var(--hx-ink-3); font-size: 11px; letter-spacing: .02em; }
.hatun-hub-avatar {
    width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10.5px; font-weight: 700; letter-spacing: .02em; color: var(--hx-navy); }
.hatun-hub-avatar--0 { background: #EAD9FF; }
.hatun-hub-avatar--1 { background: #FFF3A8; }
.hatun-hub-avatar--2 { background: #CDEBFF; }
.hatun-hub-avatar--3 { background: #D4F5D9; }
.hatun-hub-avatar--4 { background: #FFE3C2; }
.hatun-hub-avatar--5 { background: #FFD6E7; }

/* aportes y gastos previos: el MONTO es el héroe de la tarjeta */
.hatun-hub-money-row {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    padding: 6px 0; border-bottom: 1px dashed var(--hx-line-soft); }
.hatun-hub-money-row:last-child { border-bottom: 0; }
.hatun-hub-money-row .lbl {
    font-size: 10.5px; letter-spacing: .06em; color: var(--hx-ink-3); font-weight: 600; text-transform: uppercase; }
.hatun-hub-money-row .val {
    font-size: 16px; font-weight: 700; color: var(--hx-ink); font-variant-numeric: tabular-nums; }

/* FIX (verificación adversarial v7): entre dos !important gana la especificidad —
   el marco neutro con #seccionAdicionales (ID, 1-0-0) aplastaba el borde ROJO de
   .hatun-hub-decide (clase, 0-1-0) y la banda de "Por decidir" nunca se pintaba.
   Esta regla (1-1-0) gana el duelo y la restaura. */
#seccionAdicionales.hatun-hub-decide { border-left: 4px solid var(--hx-bad) !important; }

/* --- §18 v8: consumo del catálogo COMPACTO — una línea por insumo (la fila de
   dos líneas gastaba media pantalla en decir "OBRA PRINCIPAL" 135 veces).
   Semáforo de 3 niveles: cyan en uso / naranja POR AGOTARSE (>=90%) / rojo
   excedido o sin presupuesto. Las filas en 0% se APAGAN: lo vivo resalta. --- */
.hatun-consumo-row {
    display: grid; grid-template-columns: minmax(140px, 1fr) 220px 80px 150px;
    gap: 8px; align-items: center; padding: 2px 0;
    border-bottom: 1px dashed var(--hx-line-soft); font-size: 12px; }
.hatun-consumo-row .nm {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-weight: 600; color: var(--hx-ink); }
.hatun-consumo-row .nm .cat {
    font-weight: 500; color: var(--hx-ink-3); font-size: 9px; letter-spacing: .03em;
    background: var(--hx-surface-2); border: 1px solid var(--hx-line-soft);
    border-radius: 99px; padding: 0 6px; margin-left: 6px; vertical-align: 1px; }
.hatun-consumo-row .track {
    height: 5px; border-radius: 99px; background: var(--hx-line-soft); overflow: hidden; }
.hatun-consumo-row .track i { display: block; height: 100%; border-radius: 99px; }
.hatun-consumo-row .track .f-ok   { background: var(--hx-cyan); }
.hatun-consumo-row .track .f-warn { background: var(--hx-warn); }
.hatun-consumo-row .track .f-bad  { background: var(--hx-bad); }
.hatun-consumo-row .pct {
    text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hatun-consumo-row .pct.p-warn { color: var(--hx-warn); }
.hatun-consumo-row .pct.p-bad  { color: var(--hx-bad); }
.hatun-consumo-nb {
    background: var(--hx-bad-soft); color: var(--hx-bad); border-radius: 99px;
    font-size: 10px; font-weight: 700; padding: 2px 8px; letter-spacing: .02em; }
.hatun-consumo-row .amt {
    text-align: right; font-size: 11px; color: var(--hx-ink-3);
    white-space: nowrap; font-variant-numeric: tabular-nums; }
/* cero consumo: fila apagada — se lee, pero no compite con lo que importa */
.hatun-consumo-row.is-zero .nm  { color: var(--hx-ink-3); font-weight: 500; }
.hatun-consumo-row.is-zero .pct { color: var(--hx-ink-3); font-weight: 500; }
.hatun-consumo-row.is-zero .track { opacity: .55; }
@media (max-width: 768px) {
    .hatun-consumo-row { grid-template-columns: minmax(0, 1fr) 84px 140px; }
    .hatun-consumo-row .track { display: none; }
}

/* --- O15: popup selector de proyecto/obra (compartido en todo el sistema) —
   el NOMBRE completo se LEE: la celda envuelve en varias líneas en vez de
   truncarse con "…" (los usuarios finales no conocen el resize de columnas) --- */
#grid-costcenter td {
    white-space: normal;
    line-height: 1.3;
    vertical-align: middle;
}

/* --- O18: PANEL DE CAPTURA inline (la fila "agregar" sobre una grilla) —
   REUTILIZABLE. El patrón campos-sueltos + botón "+" mudo confundía en
   capacitación: ahora es una banda gris con título con tick, botón con VERBO
   y micro-texto que enseña el flujo; el margen la despega de la grilla. --- */
.hatun-capture-panel {
    background: var(--hx-surface-2);
    border: 1px solid var(--hx-line-soft);
    border-radius: 10px;
    padding: 10px 14px 12px;
}
.hatun-capture-panel label {
    font-size: 11.5px; font-weight: 600; color: var(--hx-ink-2); margin-bottom: 2px;
}
.hatun-capture-title {
    font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--hx-ink-2); margin-bottom: 8px;
    border-left: 3px solid var(--hx-accent); padding-left: 8px; line-height: 1.3;
}
.hatun-capture-hint { font-size: 11px; color: var(--hx-ink-3); margin-top: 8px; }

/* --- O19 v2: FRANJA DE ESTADO del documento — segmentos de DOS PISOS (etiqueta
   arriba, valor abajo) con separadores hairline; la obra es el segmento elástico
   con elipsis y las acciones quedan ancladas a la derecha. Antes: collar de
   chips en línea que el nombre largo de la obra partía en dos filas. --- */
/* v3: fondo BLANCO (el gris enturbiaba los chips) y todas las píldoras de la
   franja hablan el mismo idioma hatun-state (Estado, Pago, Det/Ret y Obra) */
.hatun-docstatus {
    display: flex; align-items: stretch; gap: 14px; flex-wrap: wrap;
    background: var(--hx-surface); border: 1px solid var(--hx-line);
    border-radius: 10px; padding: 8px 14px;
    box-shadow: 0 1px 3px rgba(18, 29, 67, .06);
}
.hatun-docstatus-seg {
    display: flex; flex-direction: column; gap: 3px; justify-content: center; min-width: 0;
}
.hatun-docstatus-seg--grow { flex: 1 1 220px; }
.hatun-docstatus-lbl {
    font-size: 10px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--hx-ink-3);
}
.hatun-docstatus-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.hatun-docstatus-sep { width: 1px; background: var(--hx-line); margin: 3px 0; }
.hatun-docstatus-cco {
    display: inline-block; max-width: 100%; align-self: flex-start;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hatun-docstatus-actions { margin-left: auto; align-self: center; flex: 0 0 auto; }
@media (max-width: 767px) {
    .hatun-docstatus-sep { display: none; }
    .hatun-docstatus-actions { margin-left: 0; }
}

/* --- O19 v5: franja de estado DEFINITIVA (criterio SAP Object Page) — DOS filas
   intencionales: (1) estado documental (única píldora) + obra en texto quieto +
   acciones ancladas; (2) facet financiero: palabra de estado + BARRA DE PROGRESO
   del pago + montos + indicadores de punto (det/ret) discretos. Se acabó la sopa
   de cápsulas del mismo peso. --- */
.hatun-docstatus.hatun-docstatus--v5 { flex-direction: column; gap: 0; padding: 0; }
.hatun-docstatus-row {
    display: flex; align-items: center; gap: 12px; padding: 8px 14px; min-width: 0; width: 100%;
}
.hatun-docstatus-row + .hatun-docstatus-row {
    border-top: 1px solid var(--hx-line-soft);
    background: var(--hx-surface-2); border-radius: 0 0 10px 10px;
}
/* obra: TEXTO quieto (no píldora) — icono coloreado por origen, elipsis, tooltip estándar */
.hatun-docstatus-obra {
    flex: 1 1 120px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 12.5px; font-weight: 600; color: var(--hx-ink-2); cursor: pointer;
}
.hatun-docstatus-obra i { margin-right: 6px; }
.hatun-docstatus-obra.is-doc i { color: var(--hx-ok); }
.hatun-docstatus-obra.is-manual i { color: var(--hx-ink-3); }
.hatun-docstatus-obra.is-none { color: var(--hx-warn); }
.hatun-docstatus-obra.is-none i { color: var(--hx-warn); }
/* facet financiero */
.hatun-doclbl {
    font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--hx-ink-3); flex: 0 0 auto;
}
.hatun-payword { font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.hatun-payword--bad { color: var(--hx-bad); }
.hatun-payword--warn { color: var(--hx-warn); }
.hatun-payword--ok { color: var(--hx-ok); }
.hatun-payprog {
    flex: 0 1 160px; min-width: 70px; height: 6px; border-radius: 99px;
    background: var(--hx-line-soft); overflow: hidden;
}
.hatun-payprog i { display: block; height: 100%; border-radius: 99px; }
.hatun-payprog .f-bad { background: var(--hx-bad); }
.hatun-payprog .f-warn { background: var(--hx-warn); }
.hatun-payprog .f-ok { background: var(--hx-ok); }
.hatun-payamounts {
    font-size: 12px; color: var(--hx-ink-2); white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.hatun-payamounts b { color: var(--hx-ink); }
/* indicadores de punto: discretos, sin fondo — el color del punto cuenta la historia */
.hatun-payind {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 600; color: var(--hx-ink-2); white-space: nowrap;
}
.hatun-payind::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.hatun-payind--ok::before { background: var(--hx-ok); }
.hatun-payind--warn::before { background: var(--hx-warn); }
.hatun-payind--ok { color: var(--hx-ok); }
.hatun-payind--warn { color: var(--hx-warn); }
@media (max-width: 767px) {
    .hatun-docstatus-row { flex-wrap: wrap; }
    .hatun-payprog { flex-basis: 100%; }
}

/* --- Utilidad --hug: un valor de solo lectura que NO se estira dentro de
   .hatun-field-control — el botón acompañante (ojito, lupa) queda PEGADO al
   texto en vez de exiliado al borde derecho. !important: la regla estructural
   del contenedor suma :not() y ganaría (lección O5 v4.4). --- */
.hatun-field-control > .hatun-value--hug {
    flex: 0 1 auto !important;
}

/* --- v5.2 venta: obra SIN acción de clic (la vista de solo lectura) — sin cursor
   de mano para no prometer una interacción que no existe --- */
.hatun-docstatus-obra.is-static {
    cursor: default;
}

/* ============================================================================
   22. TIRA DE KPIs "estilo banco" (ESTÁNDAR del sistema para resúmenes de
       cifras — decisión Eduardo 03-ago-2026 tras comparar 4 alternativas):
       UNA sola pieza dividida por filetes que se lee de un barrido, como el
       resumen de cuenta de una app bancaria. El primer segmento es el HÉROE
       (degradé magenta muy suave + número mayor); el color se dosifica en
       PUNTOS junto a la etiqueta; el segmento --alert (lo que debe incomodar)
       va con fondo rojizo y número en --hx-bad. Los textos JAMÁS se amputan:
       la sublínea envuelve. Uso:
         <div class="hatun-kpistrip">
           <div class="hatun-kpistrip-seg hatun-kpistrip-seg--hero">
             <div class="hatun-kpistrip-lbl">
               <span class="hatun-kpistrip-dot hatun-kpistrip-dot--accent"></span> Etiqueta</div>
             <div class="hatun-kpistrip-val">S/ 0.00</div>
             <div class="hatun-kpistrip-sub">detalle</div>
           </div>
           <div class="hatun-kpistrip-seg">…</div>
         </div>
   ============================================================================ */
.hatun-kpistrip {
    display: flex;
    background: var(--hx-surface);
    border: 1px solid var(--hx-line-soft);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(20, 27, 77, .05);
    overflow: hidden;
}

.hatun-kpistrip + .hatun-kpistrip { margin-top: 10px; }

.hatun-kpistrip-seg {
    flex: 1 1 0;
    min-width: 0;
    padding: 13px 18px;
    border-left: 1px solid var(--hx-line-soft);
}

.hatun-kpistrip-seg:first-child { border-left: none; }

.hatun-kpistrip-lbl {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--hx-ink-3);
}

.hatun-kpistrip-val {
    font-size: 20px;
    font-weight: 800;
    color: var(--hx-navy);
    font-variant-numeric: tabular-nums;
    margin-top: 1px;
    line-height: 1.2;
}

.hatun-kpistrip-sub {
    font-size: 11px;
    color: var(--hx-ink-2);
    line-height: 1.3;
    /* La sublínea ENVUELVE, jamás se amputa con "…" */
}

/* Punto de color: la dosis exacta de identidad junto a la etiqueta */
.hatun-kpistrip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.hatun-kpistrip-dot--accent { background: var(--hx-accent); }
.hatun-kpistrip-dot--amber { background: #E8C400; }
.hatun-kpistrip-dot--sky { background: #57B4F0; }
.hatun-kpistrip-dot--violet { background: #B18AF5; }
.hatun-kpistrip-dot--ok { background: var(--hx-ok); }
.hatun-kpistrip-dot--bad { background: var(--hx-bad); }

/* Héroe: el número que manda — más ancho, más grande, degradé magenta suave */
.hatun-kpistrip-seg--hero {
    flex-grow: 1.25;
    background: linear-gradient(135deg, var(--hx-accent-soft) 0%, var(--hx-surface) 78%);
}

.hatun-kpistrip-seg--hero .hatun-kpistrip-val { font-size: 24px; }

/* Alerta: el segmento que debe incomodar */
.hatun-kpistrip-seg--alert { background: #FFF9F9; }
.hatun-kpistrip-seg--alert .hatun-kpistrip-val { color: var(--hx-bad); }

/* Responsive: <992px la tira se parte — héroe a fila completa, resto en pares */
@media (max-width: 992px) {
    .hatun-kpistrip { flex-wrap: wrap; }
    .hatun-kpistrip-seg {
        flex: 1 1 50%;
        border-left: none;
        border-top: 1px solid var(--hx-line-soft);
    }
    .hatun-kpistrip-seg--hero { flex-basis: 100%; border-top: none; }
    .hatun-kpistrip-seg:nth-child(odd):not(.hatun-kpistrip-seg--hero) { border-left: 1px solid var(--hx-line-soft); }
}

@media (max-width: 576px) {
    .hatun-kpistrip-seg { flex-basis: 100%; border-left: none !important; }
}