/* Minification failed. Returning unminified contents.
(224,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-100'
(225,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-800'
(226,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(234,21): run-time error CSS1039: Token not allowed after unary operator: '-neutral-100'
(246,39): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(257,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(273,32): run-time error CSS1039: Token not allowed after unary operator: '-neutral-100'
(274,21): run-time error CSS1039: Token not allowed after unary operator: '-neutral-800'
(281,41): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(285,36): run-time error CSS1039: Token not allowed after unary operator: '-neutral-200'
(290,36): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(291,45): run-time error CSS1039: Token not allowed after unary operator: '-resolution-blue-500'
(303,28): run-time error CSS1039: Token not allowed after unary operator: '-paris-m-500'
(304,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-100'
(310,21): run-time error CSS1039: Token not allowed after unary operator: '-paris-m-500'
(384,32): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(446,17): run-time error CSS1039: Token not allowed after unary operator: '-fire-engine-red-500'
(464,22): run-time error CSS1039: Token not allowed after unary operator: '-summer-sky-500'
(516,32): run-time error CSS1039: Token not allowed after unary operator: '-neutral-200'
(539,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-600'
(545,17): run-time error CSS1039: Token not allowed after unary operator: '-green-500'
(557,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-100'
(592,27): run-time error CSS1039: Token not allowed after unary operator: '-neutral-200'
(641,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-200'
(663,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-100'
(664,33): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(750,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-400'
(752,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-100'
(753,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-700'
(763,32): run-time error CSS1039: Token not allowed after unary operator: '-neutral-200'
(767,33): run-time error CSS1039: Token not allowed after unary operator: '-resolution-blue-500'
(777,28): run-time error CSS1039: Token not allowed after unary operator: '-fire-engine-red-500'
(778,24): run-time error CSS1039: Token not allowed after unary operator: '-fire-engine-red-500'
(779,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-100'
(830,28): run-time error CSS1039: Token not allowed after unary operator: '-resolution-blue-500'
(831,24): run-time error CSS1039: Token not allowed after unary operator: '-resolution-blue-500'
(832,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-100'
(909,17): run-time error CSS1039: Token not allowed after unary operator: '-resolution-blue-500'
(914,32): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(918,33): run-time error CSS1039: Token not allowed after unary operator: '-resolution-blue-500'
(928,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-600'
(962,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(963,33): run-time error CSS1039: Token not allowed after unary operator: '-resolution-blue-500'
(965,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-200'
(966,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-800'
(972,17): run-time error CSS1039: Token not allowed after unary operator: '-resolution-blue-500'
(982,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-600'
(992,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-600'
(1000,21): run-time error CSS1039: Token not allowed after unary operator: '-neutral-800'
(1032,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(1040,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-200'
(1049,33): run-time error CSS1039: Token not allowed after unary operator: '-resolution-blue-500'
(1060,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-600'
(1125,23): run-time error CSS1039: Token not allowed after unary operator: '-text-300-font-family'
(1126,21): run-time error CSS1039: Token not allowed after unary operator: '-text-300-font-size'
(1127,23): run-time error CSS1039: Token not allowed after unary operator: '-text-300-line-height'
(1131,28): run-time error CSS1039: Token not allowed after unary operator: '-state-info-bg'
(1132,17): run-time error CSS1039: Token not allowed after unary operator: '-state-info-text'
(1133,24): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(1134,29): run-time error CSS1039: Token not allowed after unary operator: '-state-info-accent'
(1138,28): run-time error CSS1039: Token not allowed after unary operator: '-state-success-bg'
(1139,17): run-time error CSS1039: Token not allowed after unary operator: '-state-success-text'
(1140,24): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(1141,29): run-time error CSS1039: Token not allowed after unary operator: '-state-success-accent'
(1145,28): run-time error CSS1039: Token not allowed after unary operator: '-state-warning-bg'
(1146,17): run-time error CSS1039: Token not allowed after unary operator: '-state-warning-text'
(1147,24): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(1148,29): run-time error CSS1039: Token not allowed after unary operator: '-state-warning-accent'
(1152,28): run-time error CSS1039: Token not allowed after unary operator: '-state-danger-bg'
(1153,17): run-time error CSS1039: Token not allowed after unary operator: '-state-danger-text'
(1154,24): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(1155,29): run-time error CSS1039: Token not allowed after unary operator: '-state-danger-accent'
(1170,17): run-time error CSS1039: Token not allowed after unary operator: '-state-info-link'
(1179,17): run-time error CSS1039: Token not allowed after unary operator: '-state-info-link-hover'
(1185,17): run-time error CSS1039: Token not allowed after unary operator: '-state-success-link'
(1192,17): run-time error CSS1039: Token not allowed after unary operator: '-state-success-link-hover'
(1198,17): run-time error CSS1039: Token not allowed after unary operator: '-state-warning-link'
(1208,17): run-time error CSS1039: Token not allowed after unary operator: '-state-warning-link-hover'
(1214,17): run-time error CSS1039: Token not allowed after unary operator: '-state-danger-link'
(1221,17): run-time error CSS1039: Token not allowed after unary operator: '-state-danger-link-hover'
(1235,23): run-time error CSS1039: Token not allowed after unary operator: '-text-300-font-family'
(1236,21): run-time error CSS1039: Token not allowed after unary operator: '-text-300-font-size'
(1237,23): run-time error CSS1039: Token not allowed after unary operator: '-text-300-line-height'
(1238,17): run-time error CSS1039: Token not allowed after unary operator: '-state-info-text'
(1239,28): run-time error CSS1039: Token not allowed after unary operator: '-state-info-bg'
(1245,17): run-time error CSS1039: Token not allowed after unary operator: '-state-info-link'
(1254,21): run-time error CSS1039: Token not allowed after unary operator: '-state-info-link-hover'
(1377,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1378,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1379,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1380,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1381,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1382,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1387,29): run-time error CSS1039: Token not allowed after unary operator: '-atn-line'
(1388,30): run-time error CSS1039: Token not allowed after unary operator: '-atn-shell'
(1388,56): run-time error CSS1039: Token not allowed after unary operator: '-atn-line'
(1389,31): run-time error CSS1039: Token not allowed after unary operator: '-atn-screen'
(1390,43): run-time error CSS1039: Token not allowed after unary operator: '-atn-eye'
(1391,28): run-time error CSS1039: Token not allowed after unary operator: '-atn-orb'
(1440,44): run-time error CSS1039: Token not allowed after unary operator: '-atn-orb'
(1440,73): run-time error CSS1039: Token not allowed after unary operator: '-atn-orb-off'
(1440,106): run-time error CSS1039: Token not allowed after unary operator: '-atn-orb-off'
(1440,140): run-time error CSS1039: Token not allowed after unary operator: '-atn-orb'
(1448,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1449,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1450,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1451,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1454,29): run-time error CSS1039: Token not allowed after unary operator: '-atp-body'
(1455,28): run-time error CSS1039: Token not allowed after unary operator: '-atp-eye'
(1457,27): run-time error CSS1039: Token not allowed after unary operator: '-atp-px'
(1497,44): run-time error CSS1039: Token not allowed after unary operator: '-atp-px'
(1497,72): run-time error CSS1039: Token not allowed after unary operator: '-atp-px-off'
(1497,104): run-time error CSS1039: Token not allowed after unary operator: '-atp-px-off'
(1497,137): run-time error CSS1039: Token not allowed after unary operator: '-atp-px'
(1505,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-600'
 */

html {
    position: relative; /* to support footer */
    min-height: 100%; /* to support footer */
}

body {
    color: darkslategray;
}

label {
    color: darkslategray;
}

.panel {
    padding: 15px;
}

.panel-default {
    box-shadow: 2px 2px 5px lightgrey;
}

.panel-heading {
    color: gray !important;
    font-size: large;
    background-color: white !important;
    border: 0;
}

.btn-primary:hover {
    background-color: white;
    color: #337ab7
}

.btn-success:hover {
    background-color: white;
    color: #5cb85c
}

.btn-warning:hover {
    background-color: white;
    color: #f0ad4e
}

.btn-danger:hover {
    background-color: white;
    color: #d9534f;
}

.figure {
    position: relative;
    max-width: 100%;
}

    .figure img.image-hover {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        object-fit: contain;
        opacity: 0;
        transition: opacity .2s;
    }

    .figure:hover img.image-hover {
        opacity: 1;
    }


.core-margin-b-none {
    margin-bottom: 0px;
}

.core-flex-center {
    display: flex;
    align-items: center;
    vertical-align: baseline;
}

.core-width-min-100p {
    min-width: 100%;
}

@media (max-width: 991px) {
    .core-form-group-label-fix div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        vertical-align: baseline;
    }

    .core-form-group-label-fix input[type="checkbox"] {
        display: inline-block;
    }
}

@media (max-width: 545px) {
    .core-form-group-label-fix div {
        display: block;
        font-size: 12px;
        text-align: center;
    }

    .core-form-group-label-fix input[type="checkbox"] {
        display: inline-block;
    }
}

/*Bootsrap Inputs Styles*/
.col-lg-3 {
    padding-bottom: 15px;
}

.col-md-4 {
    padding-bottom: 15px;
}

.col-sm-6 {
    padding-bottom: 15px;
}

.col-md-6 {
    padding-bottom: 10px;
}

.col-md-12 {
    padding-bottom: 10px;
}

/* So buttons in toolbars are shown with spacing when taking two lines */

.btn {
    margin-bottom: 10px;
}

/* Botones del pie de los modales alineados: el margin-bottom de .btn (el de aquí arriba) Bootstrap
   solo lo cancela desde el segundo boton (.modal-footer .btn + .btn), y con vertical-align:middle el
   primero (Cancelar) quedaba 5px mas arriba que el resto. Aplica a todos los modales. */
.modal-footer .btn {
    margin-bottom: 0;
}

/* DataTables Styles */

.dataTables_wrapper {
    padding: 5px;
}

.dataTables_wrapper th {
    border-bottom: none !important;
}

.table {
    border-color: #ccc !important;
}

.grid_view_table {
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

    .grid_view_table th {
        border-left: 1px solid rgba(0, 0, 0, 0.1);
        border-right: 1px solid rgba(0, 0, 0, 0.1);
        border-top: none !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    }

    .grid_view_table td {
        border: none !important;
    }

.dataTables_length select {
    border-radius: 4px;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    padding: 6px 12px;
    color: #555;
    font-weight: normal;
    outline: none;
}

    .dataTables_length select:focus {
        border-color: #66afe9;
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
    }

.dataTables_filter input {
    border-radius: 2px;
    border: 1px solid #ccc;
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.2);
    background-color: #fafafa;
    padding: 6px 12px;
    color: #555;
    font-weight: normal;
    outline: none;
    margin: 4px;
    margin-bottom: 10px;
    height: 40px;
}

    .dataTables_filter input:focus {
        border-color: #f87c1d;
    }

/*
    Tema visual de los popups de hover (Tippy.js), que reemplazaron a qTip2.

    Se aplica con la prop theme: 'adm' de Tippy, es decir data-theme="adm" en el globo, y lo
    monta AdmHover (typescripts/HoverPopups.ts) en todos los popups de la aplicacion. Vive en
    Layout.css porque es la unica hoja que cargan los cuatro layouts, incluido
    _PublicBoardLayout, que no trae el Design System.

    Los colores se toman de los tokens --neutral-*, que DarkMode.css invierte hacia la paleta
    oscura: por eso el tema no necesita reglas propias para el modo oscuro. El valor de respaldo
    de cada var() es el color claro, para el layout publico que no define los tokens.
*/
.tippy-box[data-theme~='adm'] {
    min-width: 200px;
    background-color: var(--neutral-100, #FFFFFF);
    color: var(--neutral-800, #0B0E2C);
    border: 1px solid var(--neutral-300, #E9EAF3);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(11, 14, 44, 0.18);
    font-size: 13px;
}

    /* La flecha hereda el color del globo: Tippy la dibuja con border-color: currentColor. */
    .tippy-box[data-theme~='adm'] > .tippy-arrow {
        color: var(--neutral-100, #FFFFFF);
    }

    .tippy-box[data-theme~='adm'] .tippy-content {
        padding: 8px 10px;
    }

    /* Encabezado del popup, equivalente al content.title de qTip2. */
    .tippy-box[data-theme~='adm'] .adm-tip__title {
        font-weight: 600;
        padding-bottom: 6px;
        margin-bottom: 6px;
        border-bottom: 1px solid var(--neutral-300, #E9EAF3);
    }

/*
    Selector de vista del popup de montos de los estados financieros (Views/Shared/AccountHover.cshtml):
    documentos uno por uno o sumarizados por relacionado. Margen en cero para que los dos botones
    no hereden el margin-bottom global de .btn ni se desalineen.
*/
.adm-amount-popup__toggle {
    display: inline-flex;
    margin-bottom: 8px;
    border: 1px solid var(--neutral-300, #E9EAF3);
    border-radius: 6px;
    overflow: hidden;
}

    /* Una cuenta de ventas puede tener cientos de relacionados: la tabla se desplaza dentro del popup en
       lugar de salirse de la pantalla. */
    .adm-amount-popup__body {
        max-height: 60vh;
        overflow-y: auto;
    }

    .adm-amount-popup__mode {
        margin: 0;
        padding: 3px 10px;
        border: 0;
        background-color: var(--neutral-100, #FFFFFF);
        color: var(--neutral-800, #0B0E2C);
        font-size: 12px;
        line-height: 18px;
        cursor: pointer;
    }

        .adm-amount-popup__mode + .adm-amount-popup__mode {
            border-left: 1px solid var(--neutral-300, #E9EAF3);
        }

        .adm-amount-popup__mode:hover {
            background-color: var(--neutral-200, #F7F9FC);
        }

        /* El subrayado marca la vista activa también en modo oscuro, donde el fondo casi no contrasta. */
        .adm-amount-popup__mode.is-active {
            background-color: var(--neutral-300, #E9EAF3);
            box-shadow: inset 0 -2px 0 var(--resolution-blue-500, #28368D);
            font-weight: 600;
        }

/*
    Variante para los tooltips simples (los que salen del atributo title): globo oscuro, angosto
    y centrado, igual que el tooltip del Design System (.adm-tooltip), en lugar de la tarjeta
    clara que usan los popups con datos.
*/
.tippy-box[data-theme~='adm-tip--simple'] {
    min-width: 0;
    max-width: 280px;
    background-color: var(--paris-m-500, #262262);
    color: var(--neutral-100, #FFFFFF);
    border: 0;
    text-align: center;
}

    .tippy-box[data-theme~='adm-tip--simple'] > .tippy-arrow {
        color: var(--paris-m-500, #262262);
    }

/*
    Foto de una persona (usuario / empleado) dentro de un listado.

    El alto y el ancho son fijos y el "object-fit: cover" recorta la imagen en lugar de
    deformarla, para que todas las filas del listado midan lo mismo sin importar la
    proporcion original de la foto que subio cada usuario.

    No aplicar estilos "width" o "max-width" en linea sobre el <img>: sobreescriben la
    medida de la clase y vuelven a producir fotos de distinta altura.
*/
.avatar {
    height: 50px;
    width: 50px;
    flex-shrink: 0;
    border-radius: 10%;
    object-fit: cover;
}

/*
    Variante reducida de .avatar para columnas secundarias de los listados
    (por ejemplo "Asignado a"), donde la foto se muestra mas pequena.
*/
.avatar-small {
    height: 30px;
    width: 30px;
    flex-shrink: 0;
    border-radius: 10%;
    object-fit: cover;
}

.avatar-circle {
    height: 30px;
    width: 30px;
    border-radius: 100px;
    object-fit: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 14px;
    max-height: 30px;
    max-width: 30px;
}

/*
    Celda de listado que muestra la foto del usuario a la izquierda y su nombre a la derecha,
    en una sola columna. Solo maquetacion: los colores salen del avatar y del enlace, que ya
    estan resueltos para modo claro y oscuro.
*/
.adm-table__user-name-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

/*
    Panel de Tareas Pendientes del tablero. Cada tarea es una fila: boton de completar,
    descripcion (con sus enlaces relacionados debajo), fecha de vencimiento y avatar del
    responsable. Los colores salen de tokens del design system, asi que el panel se ve
    igual de bien en modo claro y en modo oscuro.
*/
.adm-task-panel__list {
    display: flex;
    flex-direction: column;
}

.adm-task-panel__item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 0;
    border-top: 1px solid var(--neutral-300);
}

/* El display: flex taparía el atributo hidden de las tareas creadas por el usuario para otros. */
.adm-task-panel__item[hidden] {
    display: none;
}

/*
    Parte superior del panel: botones a la derecha y, en su propia fila debajo, el check "Incluir creadas por mí"
    (el panel es angosto y en la misma fila empujaría uno de los botones a otra línea).
*/
.adm-task-panel__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    column-gap: 4px;
}

.adm-task-panel__filter {
    order: 1;
    flex-basis: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-weight: normal;
    cursor: pointer;
}

.adm-task-panel__filter input {
    margin: 0;
}

.adm-task-panel__item:first-child {
    border-top: none;
}

.adm-task-panel__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Enlaces al documento, oportunidad, relacionado, etc. asociados a la tarea. */
.adm-task-panel__links {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 12px;
}

.adm-task-panel__due {
    flex-shrink: 0;
    white-space: nowrap;
    align-self: center;
}

/* Vencida: se resalta con el rojo del design system, no con un rojo fijo. */
.adm-task-panel__due-overdue {
    color: var(--fire-engine-red-500);
}

.adm-task-panel__assignee {
    flex-shrink: 0;
    align-self: center;
}

.adm-task-panel__empty {
    padding: 24px 0;
    text-align: center;
}

/*
    Avatar de iniciales para las filas que arma el JS al guardar una tarea: ahi no se calcula el
    color por nombre que usa el Razor, asi que se usa el azul del design system.
*/
.avatar-circle-fallback {
    background: var(--summer-sky-500);
}

/*
    Pie del modal de creacion de tareas. Bootstrap lo alinea con text-align:right y deja los botones como
    inline-block, asi que se alineaban por la linea base y quedaban desfasados. Se pasa a flex.
*/
#quickTaskModal .modal-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

/* El clearfix de .modal-footer se volveria un item de flex y correria los botones. */
#quickTaskModal .modal-footer:before,
#quickTaskModal .modal-footer:after {
    display: none;
}

/*
    Causa del desfase: mas arriba en este archivo hay un ".btn { margin-bottom: 10px }" global, y
    bootstrap lo cancela solo en ".modal-footer .btn + .btn". Con vertical-align:middle se centra la
    caja de margen, asi que el primer boton (Cancelar, que si tenia los 10px) quedaba 5px mas arriba
    que el segundo. Los altos siempre fueron iguales; lo que sobraba era el margen.
*/
#quickTaskModal .modal-footer .btn {
    margin: 0;
}

/*
    Fila de "Asignado a" + "Fecha Expiracion". Los parciales que pintan esos campos traen su propio
    wrapper col-lg-3/col-md-4/col-sm-6, pensado para un formulario a lo ancho de la pagina: dentro del
    modal cada campo ocupaba una cuarta parte y quedaba mucho espacio en blanco. Con flex los dos se
    reparten la fila completa, y en pantallas angostas se apilan por el flex-wrap.
*/
#quickTaskModal .quick-task-row {
    display: flex;
    flex-wrap: wrap;
}

/* width/float en auto para que manden las reglas de flex y no las de las clases col-*. */
#quickTaskModal .quick-task-row > div {
    flex: 1 1 220px;
    width: auto;
    float: none;
}

/* La seccion avanzada usa los mismos controles compartidos y se separa visualmente sin colores fijos. */
#quickTaskAdvancedOptions {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--neutral-200);
}

#quickTaskAdvancedOptions #quickTaskNotes {
    height: 100px;
}

#btnToggleQuickTaskAdvancedOptions {
    margin-top: 10px;
    padding-left: 0;
}

/* Boton de completar: icono sin fondo, del tamano de la fila. */
.adm-task-panel__complete {
    flex-shrink: 0;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--neutral-600);
    align-self: center;
}

.adm-task-panel__complete:hover,
.adm-task-panel__complete:focus {
    color: var(--green-500);
    outline: none;
}

.avatar-circle-large {
    height: 70px;
    width: 70px;
    border-radius: 100px;
    object-fit: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--neutral-100);
    font-size: 14px;
    max-height: 70px;
    max-width: 70px;
}

.adm__dialog-grid-item-info-container{
    display:flex;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
}

.small-letter-avatar {
    height: 22px;
    width: 22px;
    line-height: 22px;
    font-size: large;
    color: white;
    border-radius: 6px;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
}

.main-body-content {
    height: 100%;
    flex-grow: 1;
}

.main-wrapper {
    padding: 32px;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background-color:var(--neutral-200);
}

.ai-assistant-bar__transition {
    transition: all 350ms;
}

/* overflow:hidden para que el panel de AtIna nunca se desborde por debajo de la barra:
   si creciera, el cuadro de escribir mensajes quedaria fuera de la pantalla y sin forma
   de alcanzarlo, porque html/body tienen overflow:hidden y la pagina no scrollea. */
#aiassistantbar {
    max-width: 0;
    top: 16px;
    height: 100%;
    max-height: 100svh;
    overflow: hidden;
}

    #aiassistantbar.open {
        max-width: 496px;
        width: 100%;
    }

/* min-height:0 en toda la cadena flex (panel > panel-body > ai_chat > tabla de mensajes).
   Sin esto cada contenedor se niega a encogerse por debajo del alto de su contenido
   (min-height:auto), asi que al acumularse mensajes el panel crece y empuja el cuadro
   de escribir fuera de la pantalla. La unica zona que debe scrollear es la lista de
   mensajes; el resto (encabezado, preguntas, cuadro de escribir) siempre visible. */
 .ai_chat {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* height:0 + flex-grow deja el alto de la tabla definido por el flexbox (y no por su
   contenido, como hacia height:fit-content), que es lo que permite que el tbody
   resuelva su height:100% y sea el que scrollea.

   display:block: aunque el elemento es un <table>, sus filas y celdas se insertan por JS
   siempre con display block/inline-block, asi que aqui no hay layout de tabla real. Como
   bloque, el alto que le da el flexbox es definitivo y el height:100% del tbody se resuelve
   siempre; como tabla, el alto especificado es solo un minimo y la resolucion del porcentaje
   queda a merced de cada navegador (asi se perdia el scroll y el panel crecia sin limite).

   overflow-y:auto (antes scroll): quien scrollea es el tbody; en el propio elemento un
   scrollbar siempre visible era solo un carril muerto que no respondia. */
.ai_chat-messages {
    display: block;
    background-color: var(--neutral-200);
    flex-grow: 1;
    overflow-y: auto;
    height: 0;
    min-height: 0;
}

.ai_panel-body {
    padding: 0px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0;
}

.ai_panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    padding: 16px;
    background-color: var(--neutral-100);
    border-left: 1px solid var(--neutral-300);
    flex-grow: 1;
    max-width: 700px;
    width: 100%
}

/* Cuando la pantalla es muy baja no alcanza el alto para todo el panel. El orden en que se
   sacrifica el espacio es: primero la lista de mensajes (que ya scrollea), y despues estas dos
   zonas decorativas, que se recortan. El cuadro de escribir mensajes nunca se sacrifica: es lo
   que el usuario necesita para seguir conversando y, si se sale del panel, no hay forma de
   alcanzarlo porque la pagina no scrollea. */
    .ai_panel > .panel-header,
    .ai_panel #question_container {
        min-height: 0;
        overflow: hidden;
    }

/* "Hola, soy AtIna": al enviar el primer mensaje se pliega con una animación para dejarle el espacio a la
   conversación (AIAssistant.collapseGreeting agrega .ai_panel--conversation) */
.atina-greeting {
    font-weight: bold;
    color: dimgray;
    text-align: center;
    padding: 6px;
    max-height: 60px;
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.35s ease;
}

    .ai_panel--conversation .atina-greeting {
        max-height: 0;
        opacity: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

@media (prefers-reduced-motion: reduce) {
    .atina-greeting {
        transition: none;
    }
}

.ai_page-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: calc(100svh - 200px);
}

.ai_input-chat-message::placeholder {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Cuadro para escribir la pregunta del panel de AtIna: texto, micrófono (feature toggle AtinaVoice) y Enviar */
.atina-chat-input {
    display: grid;
    grid-template-columns: auto 70px;
    gap: 10px;
}

.atina-chat-input--voice {
    grid-template-columns: auto 48px 70px;
}

/* En el celular, con el micrófono, al cuadro de la pregunta le queda poco ancho: el texto de ayuda ("Te escucho…
   suelta para enviar") pasa a dos líneas en vez de cortarse, porque ahí es la señal de que AtIna está escuchando. */
@media (max-width: 480px) {
    .atina-chat-input--voice .ai_input-chat-message::placeholder {
        white-space: normal;
    }
}

/* Botón de micrófono del panel de AtIna (AIAssistant.initVoiceInput): se mantiene presionado mientras se habla.
   touch-action, user-select y -webkit-touch-callout evitan que mantenerlo presionado con el dedo desplace la
   pantalla, seleccione texto o abra la lupa / el menú de copiar de iOS. */
.atina-voice-btn {
    height: 70px;
    width: 48px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--neutral-400);
    border-radius: 4px;
    background-color: var(--neutral-100);
    color: var(--neutral-700);
    cursor: pointer;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

    .atina-voice-btn:hover {
        background-color: var(--neutral-200);
    }

    .atina-voice-btn:focus-visible {
        outline: 2px solid var(--resolution-blue-500);
        outline-offset: 2px;
    }

    .atina-voice-btn:disabled {
        cursor: wait;
    }

.atina-voice-btn--recording,
.atina-voice-btn--recording:hover {
    background-color: var(--fire-engine-red-500);
    border-color: var(--fire-engine-red-500);
    color: var(--neutral-100);
    animation: atina-voice-pulse 1.2s ease-in-out infinite;
}

.atina-voice-btn__spinner {
    display: none;
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: atina-voice-spin 0.8s linear infinite;
}

.atina-voice-btn--transcribing .atina-voice-btn__icon {
    display: none;
}

.atina-voice-btn--transcribing .atina-voice-btn__spinner {
    display: block;
}

@keyframes atina-voice-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(207, 33, 39, 0.45);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(207, 33, 39, 0);
    }
}

@keyframes atina-voice-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Con el botón de conversación por voz en tiempo real (feature toggle AtinaRealtimeVoice) hay una columna más */
.atina-chat-input--realtime {
    grid-template-columns: auto 48px 48px 70px;
}

/* Botón de conversación por voz en tiempo real (AIAssistant.initRealtimeVoice). Usa la base de .atina-voice-btn; un
   clic empieza la conversación y otro la termina. Activa: azul con un pulso; mientras AtIna habla, las barras se mueven. */
.atina-realtime-btn {
    touch-action: manipulation;
}

.atina-realtime-btn--active,
.atina-realtime-btn--active:hover {
    background-color: var(--resolution-blue-500);
    border-color: var(--resolution-blue-500);
    color: var(--neutral-100);
    animation: atina-realtime-pulse 1.6s ease-in-out infinite;
}

.atina-realtime-btn--connecting .atina-voice-btn__icon {
    display: none;
}

.atina-realtime-btn--connecting .atina-voice-btn__spinner {
    display: block;
}

.atina-realtime-btn__bar {
    transform-box: fill-box;
    transform-origin: center;
}

.atina-realtime-btn--speaking .atina-realtime-btn__bar {
    animation: atina-realtime-bars 0.9s ease-in-out infinite;
}

    .atina-realtime-btn--speaking .atina-realtime-btn__bar:nth-child(2) {
        animation-delay: -0.6s;
    }

    .atina-realtime-btn--speaking .atina-realtime-btn__bar:nth-child(3) {
        animation-delay: -0.3s;
    }

    .atina-realtime-btn--speaking .atina-realtime-btn__bar:nth-child(4) {
        animation-delay: -0.45s;
    }

@keyframes atina-realtime-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(21, 102, 144, 0.45);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(21, 102, 144, 0);
    }
}

@keyframes atina-realtime-bars {
    0%, 100% {
        transform: scaleY(1);
    }

    50% {
        transform: scaleY(0.4);
    }
}

@media (prefers-reduced-motion: reduce) {
    .atina-voice-btn--recording,
    .atina-voice-btn__spinner,
    .atina-speech-btn--speaking,
    .atina-realtime-btn--active,
    .atina-realtime-btn--speaking .atina-realtime-btn__bar {
        animation: none;
    }
}

/* Altavoz del panel de AtIna (AIAssistant.initSpeechToggle): silencia o activa las respuestas en voz alta. Tachado
   cuando está silenciada; con un pulso mientras AtIna habla. Va en la línea de "Nueva Conversación". */
.atina-speech-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-right: 6px;
    padding: 0;
    vertical-align: middle;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--resolution-blue-500);
    cursor: pointer;
}

    .atina-speech-btn:hover {
        background-color: var(--neutral-300);
    }

    .atina-speech-btn:focus-visible {
        outline: 2px solid var(--resolution-blue-500);
        outline-offset: 1px;
    }

.atina-speech-btn__off,
.atina-speech-btn--muted .atina-speech-btn__on {
    display: none;
}

.atina-speech-btn--muted {
    color: var(--neutral-600);
}

    .atina-speech-btn--muted .atina-speech-btn__off {
        display: inline;
    }

.atina-speech-btn--speaking {
    animation: atina-speech-pulse 1.2s ease-in-out infinite;
}

/* Modal de la voz de AtIna (AIAssistant.initSpeechSettings) */
.atina-speech-settings__note {
    margin: 12px 0 0 0;
}

@keyframes atina-speech-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(40, 54, 141, 0.35);
    }

    50% {
        box-shadow: 0 0 0 5px rgba(40, 54, 141, 0);
    }
}

/* Aviso "Preguntando sobre <reporte>" del panel de AtIna (AIAssistant.renderReportContext).
   Los filtros se cortan en dos lineas: el detalle completo esta en el tooltip. */
.atina-report-context {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    margin-bottom: 10px;
    border: 1px solid var(--neutral-300);
    border-left: 3px solid var(--resolution-blue-500);
    border-radius: 6px;
    background-color: var(--neutral-200);
    color: var(--neutral-800);
    font-size: 12px;
    flex-shrink: 0;
}

.atina-report-context__icon {
    color: var(--resolution-blue-500);
    margin-top: 2px;
}

.atina-report-context__text {
    flex-grow: 1;
    min-width: 0;
}

.atina-report-context__filters {
    color: var(--neutral-600);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.atina-report-context__close {
    border: none;
    background: transparent;
    color: var(--neutral-600);
    font-size: 18px;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
}

    .atina-report-context__close:hover {
        color: var(--neutral-800);
    }

/* Formato de las respuestas de AtIna que vienen en markdown (AIAssistant.render_response_html): las listas y
   tablas se arman sin saltos de linea alrededor, porque la burbuja usa white-space: pre-wrap. */
.receivedMessageBox ul,
.receivedMessageBox ol {
    margin: 4px 0;
    padding-left: 20px;
    white-space: normal;
}

/* Celda de cada mensaje (AIAssistant.insertReceivedChatMessageInTable: inline-block con min-width 100%): sin un
   maximo crecia con una tabla ancha y todo el chat scrolleaba de lado, dejando el texto y el grafico corridos. */
#ai_assistant_table_chat_body > tr > td {
    max-width: 100%;
}

/* display: block + overflow-x: la tabla que no cabe (p. ej. una lista con correos) scrollea de lado dentro de si
   misma, sin ensanchar la burbuja. */
.receivedMessageBox table {
    border-collapse: collapse;
    margin: 6px 0;
    white-space: normal;
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

/* word-break: normal anula el break-word de la lista de mensajes: un monto no se parte a la mitad. */
.receivedMessageBox th,
.receivedMessageBox td {
    border: 1px solid var(--neutral-300);
    padding: 3px 6px;
    vertical-align: top;
    word-break: normal;
    overflow-wrap: break-word;
}

.receivedMessageBox th {
    background-color: var(--neutral-200);
}

.receivedMessageBox code {
    white-space: pre-wrap;
}

/* Tarjeta de una accion de AtIna que espera la confirmacion del usuario (AIAssistant.insert_pending_action_card) */
.atina-pending-action {
    border-left: 3px solid var(--resolution-blue-500);
    white-space: normal;
}

.atina-pending-action__title {
    font-weight: 600;
}

.atina-pending-action__function {
    font-family: monospace;
    font-size: 12px;
    color: var(--neutral-600);
    margin-bottom: 6px;
}

.atina-pending-action__arguments {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 10px;
    margin: 0 0 10px 0;
}

.atina-pending-action__arguments dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* Los dos botones en la misma fila y a la misma altura: sin el margin-bottom global de .btn */
.atina-pending-action__buttons {
    display: flex;
    gap: 8px;
}

.atina-pending-action__buttons .btn {
    margin: 0;
}

/* Ya se respondio (o el usuario siguio con otra cosa): la accion dejo de estar pendiente */
.atina-pending-action--answered {
    opacity: 0.6;
}

.adm-footer {
    width: 100%;
    background-color: #f5f5f5;
    padding: 4rem 0;
}

@media (max-width: 759px) {
    #aiassistantbar.open {
        max-width: 0;
    }
}

.account-circle {
    display: inline-block;
    text-align: center;
    color: white;
    border-radius: 2px;
    min-width: 25px;
    min-height: 20px;
    margin-right: 20px;
}

table tr#waiting_message_row > td {
    white-space: nowrap !important;
}

/* === BOOTSTRAP ALERT OVERRIDES → Design System ===
   Layout.css carga después de Bootstrap, así que no se necesita !important.
   Los valores de dark mode se flippean automáticamente vía las variables
   --state-*-* redefinidas en DarkMode.css. */
.alert {
    border-radius: 0.8rem;
    padding: 1.2rem 1.6rem;
    border-left-width: 4px;
    font-family: var(--text-300-font-family);
    font-size: var(--text-300-font-size);
    line-height: var(--text-300-line-height);
}

.alert-info {
    background-color: var(--state-info-bg);
    color: var(--state-info-text);
    border-color: var(--neutral-300);
    border-left-color: var(--state-info-accent);
}

.alert-success {
    background-color: var(--state-success-bg);
    color: var(--state-success-text);
    border-color: var(--neutral-300);
    border-left-color: var(--state-success-accent);
}

.alert-warning {
    background-color: var(--state-warning-bg);
    color: var(--state-warning-text);
    border-color: var(--neutral-300);
    border-left-color: var(--state-warning-accent);
}

.alert-danger {
    background-color: var(--state-danger-bg);
    color: var(--state-danger-text);
    border-color: var(--neutral-300);
    border-left-color: var(--state-danger-accent);
}

/* Enlace dentro de cualquier alert: subrayado compartido + color oscuro con contraste AA.
   El acento se reserva para el hover como señal visual (el estado hover no requiere WCAG AA estático). */
.alert-info a, .alert-info .alert-link,
.alert-success a, .alert-success .alert-link,
.alert-warning a, .alert-warning .alert-link,
.alert-danger a, .alert-danger .alert-link {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.alert-info a,
.alert-info .alert-link {
    color: var(--state-info-link);
}

.alert-info a:hover,
.alert-info a:focus,
.alert-info .alert-link:hover,
.alert-info .alert-link:focus {
    /* --state-info-accent da ~2.12:1 sobre --state-info-bg (#e6f6fb), ilegible; se usa un
       tono azul dedicado más oscuro (--state-info-link-hover) que sí alcanza >=3:1. */
    color: var(--state-info-link-hover);
    text-decoration-thickness: 1px;
}

.alert-success a,
.alert-success .alert-link {
    color: var(--state-success-link);
}

.alert-success a:hover,
.alert-success a:focus,
.alert-success .alert-link:hover,
.alert-success .alert-link:focus {
    color: var(--state-success-link-hover);
    text-decoration-thickness: 1px;
}

.alert-warning a,
.alert-warning .alert-link {
    color: var(--state-warning-link);
}

.alert-warning a:hover,
.alert-warning a:focus,
.alert-warning .alert-link:hover,
.alert-warning .alert-link:focus {
    /* A diferencia de los demás alerts, warning no usa el accent (tangerine-yellow-600) en
       hover: sobre --state-warning-bg (#fff9e6) el contraste cae a ~1.5:1, ilegible. Se usa
       un tono ámbar dedicado más oscuro que el de reposo (--state-warning-link-hover). */
    color: var(--state-warning-link-hover);
    text-decoration-thickness: 1px;
}

.alert-danger a,
.alert-danger .alert-link {
    color: var(--state-danger-link);
}

.alert-danger a:hover,
.alert-danger a:focus,
.alert-danger .alert-link:hover,
.alert-danger .alert-link:focus {
    color: var(--state-danger-link-hover);
    text-decoration-thickness: 1px;
}

@media (max-width: 767px) {
    .table-responsive > .table > tbody > tr > td {
        white-space: pre-wrap !important;
        overflow-wrap: anywhere;
    }
}

/* El HTML que renderiza esta clase puede venir de la BD con estilos inline propios,
   por eso se usan !important para normalizarlo al design system en ambos temas. */
div.alert.alert-info.adm-alert-info * {
    font-family: var(--text-300-font-family) !important;
    font-size: var(--text-300-font-size) !important;
    line-height: var(--text-300-line-height) !important;
    color: var(--state-info-text) !important;
    background-color: var(--state-info-bg) !important;
    padding: 0;
    margin: 0;
}

div.alert.alert-info.adm-alert-info a {
    color: var(--state-info-link) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}

    div.alert.alert-info.adm-alert-info a:hover,
    div.alert.alert-info.adm-alert-info a:focus {
        /* --summer-sky-400 da ~2.12:1 sobre --state-info-bg, ilegible; mismo tono
           dedicado que .alert-info a:hover en modo claro. */
        color: var(--state-info-link-hover) !important;
        text-decoration: underline !important;
        text-decoration-thickness: 1px !important;
    }

    div.alert.alert-info.adm-alert-info a:-webkit-any-link:focus-visible {
        outline-offset: 1px !important;
    }

    div.alert.alert-info.adm-alert-info a:active,
    div.alert.alert-info.adm-alert-info a:hover {
        outline: 0 !important;
    }

.accountclass-icon {
    display: inline-block;
    text-align: center;
    color: white;
    border-radius: 2px;
    min-width: 25px;
    min-height: 20px;
    margin: 5px;
}

/* Avatar de letra por tipo de articulo en el autocompletar de items (similar a .accountclass-icon).
   Letra blanca sobre color solido: legible tanto en modo claro como oscuro. */
.item-type-icon {
    display: inline-block;
    text-align: center;
    color: white;
    border-radius: 2px;
    min-width: 25px;
    min-height: 20px;
    margin: 5px;
    font-weight: 600;
}

    /* Articulo (A / I segun idioma) */
    .item-type-icon.item-type-item {
        background-color: #1565c0;
    }

    /* Servicio (S) */
    .item-type-icon.item-type-service {
        background-color: #2e7d32;
    }

    /* Kit (K) */
    .item-type-icon.item-type-kit {
        background-color: #7b1fa2;
    }

/*
    Tableros kanban: el contenedor de columnas (#list_container) usa
    white-space: nowrap para mantener las columnas en linea con scroll
    horizontal a nivel de tablero. Ese nowrap NO debe heredarse dentro de las
    tarjetas, porque provoca que textos largos (referencia, etiquetas,
    descripcion) se salgan de la tarjeta y activen scroll horizontal dentro de
    cada columna. Aqui reseteamos el comportamiento para que todo el contenido
    de la tarjeta se ajuste y parta palabras largas cuando sea necesario.
*/
#list_container .list-group-item {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    overflow: hidden;
}

    #list_container .list-group-item a {
        white-space: normal;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    /* Las etiquetas de Bootstrap son inline con white-space: nowrap por
       defecto; las convertimos en bloque acotado al ancho de la tarjeta para
       que su texto se ajuste en varias lineas en lugar de desbordar. */
    #list_container .list-group-item .label {
        display: inline-block;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: break-word;
        word-break: break-word;
        vertical-align: top;
    }

/*
    Reportes de resumen agrupados (por ejemplo ServiceRequests/SummaryEmployee y
    ServiceRequests/SummaryAssignedTo, agrupados por departamento). El renglon de
    encabezado del grupo lleva su propio fondo; se necesita !important porque el
    zebra de .table-striped tiene mayor especificidad.
*/
.summary_group_row > td {
    background-color: #ececec !important;
    font-weight: bold;
}

/* Sangria de los renglones de detalle que cuelgan de cada encabezado de grupo. */
.summary_group_detail_cell {
    padding-left: 3rem !important;
}

/* =============================================================
   ATINA · imagen de marca (guía "AtIna · paquete para desarrollo")
   .atina-ui-icon: ícono de interfaz (16 a 24 px) de los botones de IA y del menú (Images/Icons/atina.svg).
   Hereda el color del texto; la esfera es azul salvo sobre los botones azules, donde desaparecería
   (la guía pide la esfera blanca sobre el azul de botones).
   .atn: avatar animado del panel de AtIna (_AtinaAvatar.cshtml). El estado se cambia con la clase
   atn--<estado> desde AIAssistant.setAvatarState. Modo oscuro en DarkMode.css.
   ============================================================= */
.atina-ui-icon {
    flex-shrink: 0;
    vertical-align: -0.2em;
}

.btn-info .atina-ui-icon__orb,
.btn-primary .atina-ui-icon__orb,
.btn-success .atina-ui-icon__orb,
.adm__dashboard-assistant-btn .atina-ui-icon__orb {
    fill: currentColor;
}

.atn {
    --atn-shell: #FFFFFF;
    --atn-line: #1E1F24;
    --atn-screen: #1E1F24;
    --atn-eye: #FFFFFF;
    --atn-orb: #27A4DD;
    --atn-orb-off: #A3A8B3;
    flex-shrink: 0;
    overflow: visible;
}

.atn .atn-line { fill: var(--atn-line); }
.atn .atn-shell { fill: var(--atn-shell); stroke: var(--atn-line); }
.atn .atn-screen { fill: var(--atn-screen); }
.atn .atn-eye, .atn .atn-bar { fill: var(--atn-eye); }
.atn .atn-orb { fill: var(--atn-orb); }

.atn .atn-head { transform-box: view-box; transform-origin: 32px 56px; transition: transform .3s ease; }
.atn .atn-eyes { transition: transform .25s ease; }
.atn .atn-eye { transform-box: fill-box; transform-origin: 50% 50%; transition: transform .15s ease; }
.atn .atn-orb { transform-box: fill-box; transform-origin: 50% 50%; }
.atn .atn-bar { opacity: 0; transition: opacity .15s ease; }

.atn--listening .atn-head { transform: rotate(4deg); }
.atn--listening .atn-eyes { transform: translate(2px, 0px); }
.atn--thinking .atn-eye { transform: scaleY(0); }
.atn--thinking .atn-bar { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .atn * { animation: none !important; transition: none !important; }
    .atn--thinking .atn-bar { transform: translate(9px, 0px); }
}

@keyframes atn-idle-blink { 0% { transform: scaleY(1) } 46% { transform: scaleY(1) } 48% { transform: scaleY(.1) } 50% { transform: scaleY(1) } 100% { transform: scaleY(1) } }
.atn--idle .atn-eye { animation: atn-idle-blink 4s ease-in-out infinite both; }
@keyframes atn-idle-look { 0% { transform: translate(0px, 0px) } 55% { transform: translate(0px, 0px) } 62% { transform: translate(2.5px, 0px) } 85% { transform: translate(2.5px, 0px) } 92% { transform: translate(0px, 0px) } 100% { transform: translate(0px, 0px) } }
.atn--idle .atn-eyes { animation: atn-idle-look 4s ease-in-out infinite both; }
@keyframes atn-idle-bob { 0% { transform: translate(0px, 0px) } 50% { transform: translate(0px, -1px) } 100% { transform: translate(0px, 0px) } }
.atn--idle .atn-orb { animation: atn-idle-bob 4s ease-in-out infinite both; }

@keyframes atn-hello-tilt { 0% { transform: rotate(0deg) } 25% { transform: rotate(-6deg) } 55% { transform: rotate(5deg) } 80% { transform: rotate(0deg) } 100% { transform: rotate(0deg) } }
.atn--hello .atn-head { animation: atn-hello-tilt 1.2s ease-in-out 1 both; }
@keyframes atn-hello-happy { 0% { transform: scaleY(1) } 15% { transform: scaleY(.35) } 75% { transform: scaleY(.35) } 100% { transform: scaleY(1) } }
.atn--hello .atn-eye { animation: atn-hello-happy 1.2s ease-in-out 1 both; }
@keyframes atn-hello-hop { 0% { transform: translate(0px, 0px) scale(1, 1) } 30% { transform: translate(0px, -5px) scale(1, 1) } 50% { transform: translate(0px, 0px) scale(1.15, .85) } 65% { transform: translate(0px, -2px) scale(1, 1) } 80% { transform: translate(0px, 0px) scale(1, 1) } 100% { transform: translate(0px, 0px) scale(1, 1) } }
.atn--hello .atn-orb { animation: atn-hello-hop 1.2s ease-in-out 1 both; }

@keyframes atn-listening-pulse { 0% { transform: scale(1) } 25% { transform: scale(.8) } 50% { transform: scale(1) } 75% { transform: scale(.85) } 100% { transform: scale(1) } }
.atn--listening .atn-orb { animation: atn-listening-pulse 1.2s ease-in-out infinite both; }

@keyframes atn-thinking-scan { 0% { transform: translate(0px, 0px) } 50% { transform: translate(18px, 0px) } 100% { transform: translate(0px, 0px) } }
.atn--thinking .atn-bar { animation: atn-thinking-scan 2.4s ease-in-out infinite both; }
@keyframes atn-thinking-spin { 0% { transform: rotate(0deg) } 25% { transform: rotate(90deg) } 50% { transform: rotate(180deg) } 75% { transform: rotate(270deg) } 100% { transform: rotate(360deg) } }
.atn--thinking .atn-orb { animation: atn-thinking-spin 4.8s ease-in-out infinite both; }

@keyframes atn-success-pop { 0% { transform: translate(0px, 0px) scale(1, 1) } 25% { transform: translate(0px, -8px) scale(1, 1); animation-timing-function: cubic-bezier(.55, 0, 1, .45) } 45% { transform: translate(0px, 0px) scale(1.25, 1.25) } 60% { transform: translate(0px, 0px) scale(.95, .95) } 75% { transform: translate(0px, 0px) scale(1, 1) } 100% { transform: translate(0px, 0px) scale(1, 1) } }
.atn--success .atn-orb { animation: atn-success-pop 1.4s ease-out 1 both; }
@keyframes atn-success-happy { 0% { transform: scaleY(1) } 40% { transform: scaleY(.35) } 85% { transform: scaleY(.35) } 100% { transform: scaleY(1) } }
.atn--success .atn-eye { animation: atn-success-happy 1.4s ease-in-out 1 both; }
@keyframes atn-success-thud { 0% { transform: scale(1, 1) } 40% { transform: scale(1, 1) } 48% { transform: scale(1.03, .96) } 58% { transform: scale(.99, 1.01) } 68% { transform: scale(1, 1) } 100% { transform: scale(1, 1) } }
.atn--success .atn-head { animation: atn-success-thud 1.4s ease-in-out 1 both; }

@keyframes atn-error-shake { 0% { transform: translate(0px, 0px) } 10% { transform: translate(-2px, 0px) } 20% { transform: translate(2px, 0px) } 30% { transform: translate(-2px, 0px) } 40% { transform: translate(2px, 0px) } 50% { transform: translate(-2px, 0px) } 60% { transform: translate(0px, 0px) } 100% { transform: translate(0px, 0px) } }
.atn--error .atn-eyes { animation: atn-error-shake 1.2s ease-in-out 1 both; }
@keyframes atn-error-dim { 0% { fill: var(--atn-orb) } 10% { fill: var(--atn-orb-off) } 70% { fill: var(--atn-orb-off) } 100% { fill: var(--atn-orb) } }
.atn--error .atn-orb { animation: atn-error-dim 1.2s ease-in-out 1 both; }

/* Versión A de la guía ("la pieza", appSetting AtinaAvatar=Pieza). El svg lleva .atn .atp: comparte con el robot las
   clases de estado atn--<estado> y la regla de prefers-reduced-motion, pero sus partes usan atp-* para que las
   animaciones de una versión no toquen a la otra. Los ojos se pintan con --atp-eye, el color del fondo, para leerse
   como huecos (modo oscuro en DarkMode.css). */
.atp {
    --atp-body: #1E1F24;
    --atp-eye: #FFFFFF;
    --atp-px: #27A4DD;
    --atp-px-off: #A3A8B3;
}

.atp .atp-body { fill: var(--atp-body); transform-box: fill-box; transform-origin: 50% 100%; }
.atp .atp-eye { fill: var(--atp-eye); transform-box: fill-box; transform-origin: 50% 50%; }
.atp .atp-eyes { transition: transform .25s ease; }
.atp .atp-px { fill: var(--atp-px); transform-box: fill-box; transform-origin: 50% 100%; transition: transform .3s ease; }

.atp.atn--listening .atp-eyes { transform: translate(0px, -1.5px); }

@media (prefers-reduced-motion: reduce) {
    .atp.atn--thinking .atp-px { transform: translate(-24px, -16px); }
    .atp.atn--thinking .atp-eyes { transform: translate(-3px, -2px); }
}

@keyframes atp-idle-blink { 0% { transform: scaleY(1) } 46% { transform: scaleY(1) } 48% { transform: scaleY(.1) } 50% { transform: scaleY(1) } 100% { transform: scaleY(1) } }
.atp.atn--idle .atp-eye { animation: atp-idle-blink 4s ease-in-out infinite both; }
@keyframes atp-idle-look { 0% { transform: translate(0px, 0px) } 55% { transform: translate(0px, 0px) } 62% { transform: translate(2.5px, 0px) } 85% { transform: translate(2.5px, 0px) } 92% { transform: translate(0px, 0px) } 100% { transform: translate(0px, 0px) } }
.atp.atn--idle .atp-eyes { animation: atp-idle-look 4s ease-in-out infinite both; }

@keyframes atp-listening-meter { 0% { transform: scale(1, 1) } 20% { transform: scale(1, .55) } 40% { transform: scale(1, .9) } 60% { transform: scale(1, .6) } 80% { transform: scale(1, .95) } 100% { transform: scale(1, 1) } }
.atp.atn--listening .atp-px { animation: atp-listening-meter 1.2s ease-in-out infinite both; }

@keyframes atp-thinking-lift { 0% { transform: translate(0px, 0px) } 100% { transform: translate(0px, -16px) } }
@keyframes atp-thinking-scan { 0%, 8.33% { transform: translate(0px, -16px) } 16.67%, 25% { transform: translate(-12px, -16px) } 33.33%, 41.67% { transform: translate(-24px, -16px) } 50%, 58.33% { transform: translate(-36px, -16px) } 66.67%, 75% { transform: translate(-24px, -16px) } 83.33%, 91.67% { transform: translate(-12px, -16px) } 100% { transform: translate(0px, -16px) } }
@keyframes atp-thinking-elift { 0% { transform: translate(0px, 0px) } 100% { transform: translate(0px, -2px) } }
@keyframes atp-thinking-follow { 0%, 8.33% { transform: translate(0px, -2px) } 16.67%, 25% { transform: translate(-1.5px, -2px) } 33.33%, 41.67% { transform: translate(-3px, -2px) } 50%, 58.33% { transform: translate(-4px, -2px) } 66.67%, 75% { transform: translate(-3px, -2px) } 83.33%, 91.67% { transform: translate(-1.5px, -2px) } 100% { transform: translate(0px, -2px) } }
.atp.atn--thinking .atp-px { animation: atp-thinking-lift .35s ease-out forwards, atp-thinking-scan 3.6s ease-in-out .35s infinite; }
.atp.atn--thinking .atp-eyes { animation: atp-thinking-elift .35s ease-out forwards, atp-thinking-follow 3.6s ease-in-out .35s infinite; }

@keyframes atp-hello-hop { 0% { transform: translate(0px, 0px) scale(1, 1) } 15% { transform: translate(0px, -9px) scale(1, 1) } 30% { transform: translate(0px, 0px) scale(1.15, .85) } 42% { transform: translate(0px, -5px) scale(1, 1) } 54% { transform: translate(0px, 0px) scale(1.08, .92) } 64% { transform: translate(0px, 0px) scale(1, 1) } 100% { transform: translate(0px, 0px) scale(1, 1) } }
.atp.atn--hello .atp-px { animation: atp-hello-hop 1.4s ease-in-out 1 both; }
@keyframes atp-hello-happy { 0% { transform: scaleY(1) } 15% { transform: scaleY(.35) } 75% { transform: scaleY(.35) } 100% { transform: scaleY(1) } }
.atp.atn--hello .atp-eye { animation: atp-hello-happy 1.4s ease-in-out 1 both; }

@keyframes atp-success-land { 0% { transform: translate(0px, -16px) scale(1, 1) } 22% { transform: translate(0px, -26px) scale(1, 1); animation-timing-function: cubic-bezier(.55, 0, 1, .45) } 42% { transform: translate(0px, 0px) scale(1, 1) } 48% { transform: translate(0px, 0px) scale(1.25, .7) } 58% { transform: translate(0px, 0px) scale(.92, 1.08) } 66% { transform: translate(0px, 0px) scale(1, 1) } 100% { transform: translate(0px, 0px) scale(1, 1) } }
.atp.atn--success .atp-px { animation: atp-success-land 1.4s ease-out 1 both; }
@keyframes atp-success-settle { 0% { transform: translate(0px, -2px) } 30% { transform: translate(0px, 0px) } 100% { transform: translate(0px, 0px) } }
.atp.atn--success .atp-eyes { animation: atp-success-settle 1.4s ease-out 1 both; }
@keyframes atp-success-happy { 0% { transform: scaleY(1) } 40% { transform: scaleY(1) } 48% { transform: scaleY(.3) } 85% { transform: scaleY(.3) } 100% { transform: scaleY(1) } }
.atp.atn--success .atp-eye { animation: atp-success-happy 1.4s ease-in-out 1 both; }
@keyframes atp-success-thud { 0% { transform: scale(1, 1) } 46% { transform: scale(1, 1) } 50% { transform: scale(1.03, .96) } 58% { transform: scale(.99, 1.01) } 66% { transform: scale(1, 1) } 100% { transform: scale(1, 1) } }
.atp.atn--success .atp-body { animation: atp-success-thud 1.4s ease-in-out 1 both; }

@keyframes atp-error-shake { 0% { transform: translate(0px, 0px) } 10% { transform: translate(-2px, 0px) } 20% { transform: translate(2px, 0px) } 30% { transform: translate(-2px, 0px) } 40% { transform: translate(2px, 0px) } 50% { transform: translate(-2px, 0px) } 60% { transform: translate(0px, 0px) } 100% { transform: translate(0px, 0px) } }
.atp.atn--error .atp-eyes { animation: atp-error-shake 1.2s ease-in-out 1 both; }
@keyframes atp-error-dim { 0% { fill: var(--atp-px) } 10% { fill: var(--atp-px-off) } 70% { fill: var(--atp-px-off) } 100% { fill: var(--atp-px) } }
.atp.atn--error .atp-px { animation: atp-error-dim 1.2s ease-in-out 1 both; }

/* Fila "AtIna está pensando…" del chat (AIAssistant.insertWaitingMessageInTable) */
.atina-thinking {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--neutral-600);
    font-style: italic;
}