/* /Components/BottomNav.razor.rz.scp.css */
/* Visibilidad y posición fija de .pyx-bottomnav viven en app.css junto con .pyx-topbar (mismo
   breakpoint, misma familia de reglas de shell) -- aquí sólo el contenido interno, que sí son
   elementos propios (nav/button/span) y por lo tanto alcanzados por el scope de Blazor. */

.pyx-bottomnav-item[b-d80japzzw4] {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 2px 4px;
    background: none;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.pyx-bottomnav-label[b-d80japzzw4] {
    font-family: var(--pyx-label);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
/* /Components/EscalaEstrellas.razor.rz.scp.css */
.pyx-estrellas[b-k7y7d4wjm4] {
    display: flex;
    align-items: flex-end;
    gap: 4px;
}

.pyx-estrella-item[b-k7y7d4wjm4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 2px;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 4px;
    line-height: 1;
}

.pyx-estrella-item:hover:not(:disabled)[b-k7y7d4wjm4] {
    background-color: var(--pyx-canvas-soft);
}

.pyx-estrella-item:disabled[b-k7y7d4wjm4] {
    cursor: default;
    opacity: .6;
}

.pyx-estrella-label[b-k7y7d4wjm4] {
    font-size: 9px;
    font-family: var(--pyx-label);
    color: var(--pyx-ink-muted);
    line-height: 1.5;
}

.pyx-estrella-item--activa .pyx-estrella-label[b-k7y7d4wjm4] {
    color: var(--pyx-star-gold);
    font-weight: 700;
}

.pyx-estrella-na-icono[b-k7y7d4wjm4] {
    font-size: 9px;
    font-weight: 700;
    font-family: var(--pyx-label);
    color: var(--pyx-ink-faint);
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--pyx-border);
    border-radius: 50%;
    box-sizing: border-box;
}

.pyx-estrella-item--na.pyx-estrella-item--activa .pyx-estrella-na-icono[b-k7y7d4wjm4] {
    color: var(--mud-palette-warning);
    border-color: var(--mud-palette-warning);
    background-color: var(--pyx-canvas-soft);
}

.pyx-estrella-item--na.pyx-estrella-item--activa .pyx-estrella-label[b-k7y7d4wjm4] {
    color: var(--mud-palette-warning);
}

/* Variante grande: evaluación de una sola persona, más espacio disponible por fila. */
.pyx-estrellas--grande .pyx-estrella-label[b-k7y7d4wjm4] {
    font-size: 11px;
}

.pyx-estrellas--grande .pyx-estrella-na-icono[b-k7y7d4wjm4] {
    font-size: 12px;
    width: 30px;
    height: 30px;
}

/* Objetivos táctiles mínimos (44px, WCAG 2.5.5) por debajo de 600px -- hoy cada opción mide
   ~24px (compacta, CalificacionMultiple) o ~34px (--grande, captura de una sola persona), los
   dos por debajo del mínimo, para un flujo que en el peor caso son ~500 toques (5 cuestionarios
   de ~100 preguntas). flex-wrap en el contenedor deja que una escala ancha (10 opciones) se
   parta en dos renglones legibles en vez de desbordar. La etiqueta numérica sube a 11px en las
   dos variantes -- a 9px no se lee cómodo en un teléfono. */
@media (max-width: 599px) {
    .pyx-estrellas[b-k7y7d4wjm4] {
        flex-wrap: wrap;
    }

    .pyx-estrella-item[b-k7y7d4wjm4] {
        min-width: 44px;
        min-height: 44px;
        justify-content: center;
    }

    .pyx-estrella-label[b-k7y7d4wjm4] {
        font-size: 11px;
    }

    .pyx-estrella-na-icono[b-k7y7d4wjm4] {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }

    .pyx-estrellas--grande .pyx-estrella-na-icono[b-k7y7d4wjm4] {
        width: 32px;
        height: 32px;
    }
}
/* /Components/EstructuraArbolItem.razor.rz.scp.css */
/* Bug 22578 (sexto retrabajo). El árbol conserva el scroll horizontal para llegar a la
   indentación de organizaciones profundas (app.css, .pyx-tree-body .mud-treeview:
   width:max-content). position:sticky no funciona aquí: MudBlazor interpone varias capas
   (.mud-treeview, .mud-treeview-item-content, .mud-collapse-wrapper/-container) con
   overflow:hidden propio entre la fila y .pyx-tree-body -- que es el ÚNICO contenedor que de
   verdad se desplaza -- y esas mismas capas necesitan ese overflow:hidden para ocultar nodos
   colapsados (ver detalle en app.css). Las acciones se reposicionan en su lugar con JavaScript
   (estructura-dragdrop.js, pyxFijarAccionesFila) mediante transform en cada scroll, que no
   depende de que ningún ancestro coopere con overflow. */
.node-row[b-sqrov7gktt] {
    /* Bug 22578 (causa raíz): la fila es un flex item dentro de .mud-treeview-item-content
       (display:flex). Sin min-width:0 el flex item no se encoge por debajo del ancho de su
       contenido (min-width:auto) y empuja las acciones fuera del área visible. Con min-width:0
       el nombre (.pyx-node-name) se trunca con ellipsis (ver también la cadena completada en
       app.css) y sólo la indentación por profundidad -- no el nombre -- exige scroll. */
    min-width: 0;
}

/* Bug 22578 (retrabajo): siempre visibles -- antes dependían de :hover/:focus-within (opacity 0
   → 1), y en una pantalla táctil no hay hover, así que eran literalmente inalcanzables ahí. El
   translateX que las mantiene dentro del panel lo aplica pyxFijarAccionesFila en JS. */
.node-row-actions[b-sqrov7gktt] {
    flex-shrink: 0;
    padding-left: 24px;
    background: linear-gradient(90deg, transparent 0%, var(--mud-palette-surface) 30%);
    will-change: transform;
}

.node-row-drop-target[b-sqrov7gktt] {
    background-color: var(--mud-palette-primary-hover);
    outline: 2px dashed var(--mud-palette-primary);
    outline-offset: -2px;
    border-radius: 4px;
}
/* /Components/FlujoConfiguracionStepper.razor.rz.scp.css */
.fcs-container[b-h5ns5jooxz] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    padding: 12px 4px;
}

.fcs-paso[b-h5ns5jooxz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 0 8px;
    min-width: 92px;
    text-align: center;
}

.fcs-paso.fcs-deshabilitado[b-h5ns5jooxz] {
    cursor: default;
    opacity: 0.5;
}

.fcs-circulo[b-h5ns5jooxz] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    border: 2px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
    background-color: var(--mud-palette-surface);
}

.fcs-circulo-actual[b-h5ns5jooxz] {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
    background-color: var(--mud-palette-primary-hover);
}

.fcs-circulo-completo[b-h5ns5jooxz] {
    border-color: var(--mud-palette-success);
    background-color: var(--mud-palette-success);
    color: var(--mud-palette-success-text);
}

.fcs-label[b-h5ns5jooxz] {
    white-space: nowrap;
    color: var(--mud-palette-text-secondary);
}

.fcs-linea[b-h5ns5jooxz] {
    flex: 1 0 24px;
    height: 2px;
    min-width: 24px;
    background-color: var(--mud-palette-lines-default);
    margin-bottom: 20px;
}

.fcs-linea-completa[b-h5ns5jooxz] {
    background-color: var(--mud-palette-success);
}
/* /Components/ImportacionValidacionGrid.razor.rz.scp.css */
/* Hoja de corrección de carga masiva. Fase Identidad: adopta el tratamiento de hoja de cálculo
   de "Identidad Pyxoom360" (mudblazor/Pages/Personas.razor) — cabeceras monoespaciadas en
   versalitas, filas densas y el error como tinte suave con filete lateral, en vez de un bloque
   rojo saturado que hace ilegible justo el dato que hay que corregir. */

.ivg-scroll[b-objxqlqii3] {
    overflow-x: auto;
    border: 1px solid var(--pyx-border);
    border-radius: 10px;
    background: var(--mud-palette-surface);
}

/* Bug 22621: mismo tratamiento que la copia de Personas.razor.css (Pages/Catalogos) -- width:100%
   comprimía columnas por debajo de su contenido en diálogos angostos. La tabla crece con su
   contenido y .ivg-scroll la desplaza. */
.ivg-table[b-objxqlqii3] {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    font-size: 11.5px;
}

    .ivg-table th[b-objxqlqii3],
    .ivg-table td[b-objxqlqii3] {
        min-width: 110px;
    }

    .ivg-table th[b-objxqlqii3] {
        text-align: left;
        padding: 7px 10px;
        font-family: var(--pyx-label);
        font-size: 9px;
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--pyx-ink-faint);
        background-color: var(--pyx-canvas-soft);
        border-bottom: 1px solid var(--pyx-border);
        white-space: nowrap;
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .ivg-table td[b-objxqlqii3] {
        padding: 5px 10px;
        border-bottom: 1px solid var(--pyx-divider);
        vertical-align: middle;
    }

    .ivg-table tbody tr:last-child td[b-objxqlqii3] {
        border-bottom: none;
    }

/* El filete izquierdo es lo que identifica la fila a corregir; el fondo se mantiene tenue
   para que el valor capturado siga siendo legible. */
.ivg-fila-error td[b-objxqlqii3] {
    background-color: color-mix(in srgb, var(--pyx-negative) 7%, transparent);
}

    .ivg-fila-error td:first-child[b-objxqlqii3] {
        box-shadow: inset 3px 0 0 var(--pyx-negative);
    }

.ivg-celda-error[b-objxqlqii3] {
    background-color: color-mix(in srgb, var(--pyx-negative) 14%, transparent) !important;
    box-shadow: inset 0 0 0 1.5px var(--pyx-negative);
    border-radius: 4px;
}

.ivg-fila-detalle td[b-objxqlqii3] {
    padding: 0 10px 6px 10px;
    font-size: 10px;
    color: var(--pyx-negative);
    background-color: color-mix(in srgb, var(--pyx-negative) 7%, transparent);
    border-bottom: 1px solid var(--pyx-divider);
}
/* /Components/Wordmark.razor.rz.scp.css */
/* La marca se dimensiona por ancho y se centra en su contenedor. Las proporciones internas van
   en cqw (unidades del propio contenedor), así que basta con cambiar el ancho del bloque para
   escalarlo todo a la vez sin tocar ningún número.

   Las cifras salen de la proporción real de los SVG:
     logotipo  viewBox 432×124  -> relación 3.48
     isotipo   viewBox 104×112  -> relación 0.93

   Con iso, repartidos sobre 100 unidades de ancho:
     iso 21 + hueco 2 + logotipo 59 + hueco 2 + «360°» 16 = 100
   El bloque 360° mide 7.15cqw, que es el 42 % de la altura del logotipo (59 / 3.48 = 16.95) —
   la regla de identidad, sostenida por la propia unidad en vez de por un cálculo en C#. */

.pyx-mark[b-rrr2gpijg1] {
    container-type: inline-size;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-inline: auto;
    white-space: nowrap;

    /* Sin isotipo el logotipo se reparte el ancho que aquél ocupaba. */
    --pyx-mark-logo-w: 76.5cqw;
    --pyx-mark-power: 9.3cqw;
    --pyx-mark-gap: 2.6cqw;
}

.pyx-mark--iso[b-rrr2gpijg1] {
    --pyx-mark-logo-w: 59cqw;
    --pyx-mark-power: 7.15cqw;
    --pyx-mark-gap: 2cqw;

    /* El centro del isotipo tiene que caer sobre el centro de la P, no sobre el centro de la caja
       del logotipo: esa caja incluye el descendente de la «y», que la baja ~17 unidades y dejaba
       el texto visiblemente alto respecto al iso.

       Medido sobre el SVG (viewBox 148 44 432 124): la P ocupa y 47.4–130.9, centro 89.15, o sea
       el 36.41 % de la altura de la caja contando desde arriba.
         alto del logotipo = 59 × 124/432       = 16.935cqw   (relación medida 3.4841)
         centro de la P    = 16.935 × 0.36411   =  6.166cqw
         alto del isotipo  = 21 ÷ 0.96          = 21.875cqw   (relación medida 0.96, no 104/112)
         corrección        = 21.875/2 − 6.166   =  4.77cqw
       El logotipo y el «360°» bajan juntos: el 360 va anclado al borde superior del logotipo. */
    --pyx-mark-drop: 4.77cqw;
}

.pyx-mark-logo[b-rrr2gpijg1],
.pyx-mark-iso[b-rrr2gpijg1] {
    display: block;
    height: auto;
}

.pyx-mark-logo[b-rrr2gpijg1] {
    width: var(--pyx-mark-logo-w);
    margin-inline-end: var(--pyx-mark-gap);
    margin-top: var(--pyx-mark-drop, 0);
}

/* El isotipo es más alto que la caja tipográfica del logotipo, así que se recentra contra él
   en vez de colgar del borde superior. */
.pyx-mark-iso[b-rrr2gpijg1] {
    width: 21cqw;
    align-self: center;
    margin-inline-end: var(--pyx-mark-gap);
}

/* El bloque 360° va arriba, alineado al borde superior del logotipo: es una potencia, no un
   superíndice de la última letra. */
.pyx-mark-power[b-rrr2gpijg1] {
    margin-top: var(--pyx-mark-drop, 0);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: var(--pyx-mark-power);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.01em;
}

/* El grado sí es superíndice, pero dentro del bloque 360. */
.pyx-mark-power sup[b-rrr2gpijg1] {
    font-size: .62em;
    vertical-align: .55em;
    letter-spacing: 0;
    top: 0;
}
/* /Pages/Catalogos/CuestionarioEditor.razor.rz.scp.css */
/* Bug 22592: drag & drop de tarjetas de competencias asignadas. Antes el editor mostraba el icono
   DragIndicator y el texto "Arrastra las tarjetas para reordenar" pero no había ningún manejador
   HTML5 nativo -- solo funcionaban los botones Subir/Bajar. El feedback visual usa clases propias
   (qe-card--*) porque las clases Bootstrap que usaba hoverCls (shadow-lg border-primary, etc.) no
   existen en esta app: sólo se cargan MudBlazor + app.css. */

.qe-card[b-ocv3blpwp1] {
    transition: box-shadow 0.12s ease-in-out, opacity 0.12s ease-in-out;
}

.qe-card[draggable="true"][b-ocv3blpwp1] {
    cursor: grab;
}

.qe-card[draggable="true"]:active[b-ocv3blpwp1] {
    cursor: grabbing;
}

/* La tarjeta que se está arrastrando queda semi-transparente para distinguirla del resto. */
.qe-card--dragging[b-ocv3blpwp1] {
    opacity: 0.45;
}

/* La tarjeta bajo el cursor durante el arrastre marca el punto de inserción. */
.qe-card--drop-target[b-ocv3blpwp1] {
    box-shadow: 0 0 0 2px var(--mud-palette-primary);
    border-color: var(--mud-palette-primary) !important;
}
/* /Pages/Catalogos/Personas.razor.rz.scp.css */
/* Bug 22596: estilos de la grilla EDITABLE de importación de Personas. Las clases ivg-* viven
   originalmente en ImportacionValidacionGrid.razor.css (scoped a ese componente), pero la grilla
   editable se renderiza aquí, en Personas.razor, así que necesita sus propias reglas. Se replican
   las mismas para mantener la apariencia de hoja de cálculo de la carga masiva. */

.ivg-scroll[b-oa0ynulepw] {
    overflow-x: auto;
    /* Bug 22621: sin esto la grilla crecía sin tope vertical -- ahora se pagina (25 filas por
       página, ver FilasPorPaginaErrores en Personas.razor), pero 25 filas siguen siendo altas
       dentro de un diálogo; con scroll vertical acotado el diálogo no empuja sus propios botones
       fuera de la vista. */
    max-height: 480px;
    overflow-y: auto;
    border: 1px solid var(--pyx-border);
    border-radius: 10px;
    background: var(--mud-palette-surface);
}

/* Bug 22621: width:100% obligaba a las 9 columnas a repartirse el ancho del diálogo (antes
   600px), comprimiendo cada input a 40-60px -- de ahí el "Da"/"DC" ilegible. Mismo patrón que
   Organigrama (app.css, .pyx-tree-body .mud-treeview): la tabla crece con su contenido y
   .ivg-scroll (overflow-x:auto) la desplaza en vez de aplastarla. El min-width por columna es el
   piso real, ya que el diálogo de importación también se ensanchó (Personas.razor,
   _importDialogOptions). */
.ivg-table[b-oa0ynulepw] {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    font-size: 11.5px;
}

    .ivg-table th[b-oa0ynulepw],
    .ivg-table td[b-oa0ynulepw] {
        min-width: 130px;
    }

    .ivg-table th:first-child[b-oa0ynulepw],
    .ivg-table td:first-child[b-oa0ynulepw] {
        min-width: 44px;
        width: 44px;
    }

    .ivg-table th[b-oa0ynulepw] {
        text-align: left;
        padding: 7px 10px;
        font-family: var(--pyx-label);
        font-size: 9px;
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--pyx-ink-faint);
        background-color: var(--pyx-canvas-soft);
        border-bottom: 1px solid var(--pyx-border);
        white-space: nowrap;
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .ivg-table td[b-oa0ynulepw] {
        padding: 5px 10px;
        border-bottom: 1px solid var(--pyx-divider);
        vertical-align: middle;
    }

    .ivg-table tbody tr:last-child td[b-oa0ynulepw] {
        border-bottom: none;
    }

/* El filete izquierdo identifica la fila a corregir; el fondo se mantiene tenue para que el
   valor capturado siga siendo legible. */
.ivg-fila-error td[b-oa0ynulepw] {
    background-color: color-mix(in srgb, var(--pyx-negative) 7%, transparent);
}

    .ivg-fila-error td:first-child[b-oa0ynulepw] {
        box-shadow: inset 3px 0 0 var(--pyx-negative);
    }

.ivg-celda-error[b-oa0ynulepw] {
    background-color: color-mix(in srgb, var(--pyx-negative) 14%, transparent) !important;
    box-shadow: inset 0 0 0 1.5px var(--pyx-negative);
    border-radius: 4px;
}

.ivg-fila-detalle td[b-oa0ynulepw] {
    padding: 0 10px 6px 10px;
    font-size: 10px;
    color: var(--pyx-negative);
    background-color: color-mix(in srgb, var(--pyx-negative) 7%, transparent);
    border-bottom: 1px solid var(--pyx-divider);
}

/* Bug 22596/22621: la regla ".ivg-table .mud-input-control { width: 100% }" que vivía aquí NUNCA
   aplicó -- el scope de Blazor no llega a la raíz que dibuja MudBlazor (mismo gotcha documentado
   en CLAUDE.md para MudPaper/MudTable). Movida a wwwroot/css/app.css, la única forma de que
   matchee de verdad. */