/* Minification failed. Returning unminified contents.
(260,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-100'
(295,27): run-time error CSS1039: Token not allowed after unary operator: '-neutral-200'
(344,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-200'
(366,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-100'
(367,33): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
 */

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

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

.qtip {
    max-width: none !important;
    min-width: 200px;
}

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

.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;
    }

.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;
}

.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;
}

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

div.alert.alert-info.adm-alert-info * {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.42857143 !important;
    color: #31708f !important;
    background-color: #d9edf7 !important;
    padding: 0;
    margin: 0;
}

div.alert.alert-info.adm-alert-info a {
    color: #337ab7 !important;
    text-decoration: none !important;
}

    div.alert.alert-info.adm-alert-info a:hover,
    div.alert.alert-info.adm-alert-info a:focus {
        color: #23527c !important;
        text-decoration: underline !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;
    }