/* ============================================================================
   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;

    /* 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 {
    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;
    }

/* 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;
        }
}

/* 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); }


/* ============================================================================
   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 */
.hatun-cash-meta { display: flex; flex-wrap: wrap; gap: 4px 26px; font-size: 12px; color: #5A6478; }
.hatun-cash-meta b { color: var(--hx-ink); font-weight: 600; }
/* Saldo actual: chip con fondo en la cabecera, junto al estado y el lapiz.
   El simbolo de la moneda va pegado al monto (sin texto "Moneda" suelto) */
.hatun-cash-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--hx-navy-soft); color: var(--hx-navy);
    border-radius: var(--hx-radius-pill); padding: 3px 12px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hatun-cash-chip-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; opacity: .65; }
.hatun-cash-chip--neg { background: var(--hx-bad-soft); color: var(--hx-bad); }
/* 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); }