/* Minification failed. Returning unminified contents.
(118,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-700'
(123,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-600'
(133,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(142,28): run-time error CSS1039: Token not allowed after unary operator: '-resolution-blue-500'
(161,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-400'
(163,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-100'
(191,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-400'
(193,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-100'
(211,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-300'
(230,24): run-time error CSS1039: Token not allowed after unary operator: '-resolution-blue-500'
(261,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-600'
(268,32): run-time error CSS1039: Token not allowed after unary operator: '-neutral-400'
(273,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-600'
(280,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-700'
(284,17): run-time error CSS1039: Token not allowed after unary operator: '-resolution-blue-500'
 */
body {
    padding-bottom: 20px;
}  

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

.ui-autocomplete {
		max-height: 300px;
		overflow-y: auto;
		/* prevent horizontal scrollbar */
		overflow-x: hidden;
	}

/* Ticket 00022124 — Scroll horizontal en el desplegable del autocomplete en móvil (≤767px):
   overflow-x:auto permite que la tabla interna (~700px por los anchos fijos del _renderItem
   de Grid.ts) scrollee horizontalmente. El posicionamiento left/right lo maneja
   attatchAutocompleteListToInput en LayoutScript.ts: alinea con el input y corrige el desborde
   derecho — no se necesita override de left aquí.
   .adm-navbar-autocomplete (buscador global) queda excluido: no usa tabla y no necesita scroll. */
@media (max-width: 767px) {
    .ui-autocomplete:not(.adm-navbar-autocomplete) {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* La img tiene width:100% inline (Grid.ts _renderItem); sin un tamaño fijo en la td,
       el browser la aplasta a 0x0 en móvil. Se fija a thumbnail pequeño. */
    .ui-autocomplete table.table img {
        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
        height: auto !important;
    }
}

.app-icon-label-left {
    font-size: 24px;
}

.app-icon-label-left ~ span {
    font-size: 18px;
}

/* Dialogo de Sugerir Imagenes (Views/Shared/_SuggestImagesDialog.cshtml: Items, Services y el editor de
   imagen compartido). Solo usa tokens del design system, que DarkMode.css redefine, asi sirve igual en modo
   oscuro. Los <p> van scopeados a dialog.adm-dialog para ganarle al reset `.adm-dialog p { margin: 0 !important }`. */
dialog.adm-dialog.adm-images-dialog {
    max-width: 880px;
    padding: 2.4rem;
}

.adm-images-dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.adm-images-dialog__close.adm__btn {
    width: 44px;
    flex-shrink: 0;
}

.adm-images-dialog__search {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.adm-images-dialog__search .form-control {
    height: 4.4rem;
    min-width: 100%;
}

.adm-images-dialog__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.adm-images-dialog__actions .adm__btn {
    width: auto;
    flex: 1 1 220px;
}

.adm-images-dialog__actions .adm__btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Barra indeterminada mientras se genera la imagen con IA: un segmento que recorre la pista en bucle. */
.adm-images-dialog__progress {
    margin-top: 16px;
}

.adm-images-dialog__progress[hidden] {
    display: none;
}

.adm-images-dialog__progress-text {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    color: var(--neutral-700);
    font-size: 13px;
}

.adm-images-dialog__progress-elapsed {
    color: var(--neutral-600);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.adm-images-dialog__progress-track {
    position: relative;
    height: 6px;
    overflow: hidden;
    border-radius: 3px;
    background-color: var(--neutral-300);
}

.adm-images-dialog__progress-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 35%;
    border-radius: 3px;
    background-color: var(--resolution-blue-500);
    animation: adm-images-dialog-progress 1.4s ease-in-out infinite;
}

@keyframes adm-images-dialog-progress {
    0% { left: -35%; }
    100% { left: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .adm-images-dialog__progress-bar {
        animation-duration: 4s;
    }
}

.adm-images-dialog__preview {
    margin-top: 16px;
    padding: 16px;
    text-align: center;
    border: 1px solid var(--neutral-400);
    border-radius: 8px;
    background-color: var(--neutral-100);
}

.adm-images-dialog__preview img {
    max-width: 100%;
    max-height: 300px;
    border-radius: 8px;
}

.adm-images-dialog__preview-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
}

.adm-images-dialog__preview-actions .adm__btn {
    width: auto;
}

.adm-images-dialog__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
    max-height: 45vh;
    overflow-y: auto;
    margin-top: 16px;
    padding: 12px;
    border: 1px solid var(--neutral-400);
    border-radius: 8px;
    background-color: var(--neutral-100);
}

.adm-images-dialog__grid[hidden] {
    display: none;
}

/* Cada miniatura es un boton: mientras carga muestra un bloque gris del mismo tamanio (aspect-ratio de las
   miniaturas "tiny" de Pexels, 280x200) para que la rejilla no salte. */
.adm-images-dialog__tile {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 7 / 5;
    padding: 0;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 8px;
    background-color: var(--neutral-300);
    cursor: pointer;
    transition: border-color 150ms ease, transform 150ms ease;
}

.adm-images-dialog__tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 200ms ease;
}

.adm-images-dialog__tile.is-loaded img {
    opacity: 1;
}

.adm-images-dialog__tile:hover,
.adm-images-dialog__tile:focus-visible {
    border-color: var(--resolution-blue-500);
    transform: translateY(-2px);
    outline: none;
}

/* Credito al fotografo sobre la foto: lo exigen las condiciones de uso de Pexels. Va sobre un degradado
   oscuro fijo (no un token) porque se lee sobre la foto, en claro y en oscuro por igual. */
.adm-images-dialog__credit {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 12px 6px 4px;
    color: #FFFFFF;
    font-size: 11px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
    opacity: 0;
    transition: opacity 150ms ease;
}

.adm-images-dialog__tile:hover .adm-images-dialog__credit,
.adm-images-dialog__tile:focus-visible .adm-images-dialog__credit {
    opacity: 1;
}

dialog.adm-dialog .adm-images-dialog__empty {
    margin-top: 16px !important;
    color: var(--neutral-600);
    text-align: center;
}

.adm-images-dialog__notes {
    margin-top: 20px;
    padding-top: 12px;
    border-top: 1px solid var(--neutral-400);
}

dialog.adm-dialog .adm-images-dialog__notes p {
    margin-top: 6px !important;
    color: var(--neutral-600);
    font-size: 12px;
    line-height: 1.5;
}

.adm-images-dialog__ref {
    font-weight: 600;
    color: var(--neutral-700);
}

.adm-images-dialog__attribution a {
    color: var(--resolution-blue-500);
}

/* Aire entre la foto y el nombre en los desplegables de los autocompletar con foto
   (Vendedor/SalesRepID, Usuario, Empleado, Contacto, Mecanico, Tecnico, Choferes,
   Analista de compras, Equipos, Activos fijos, Articulos, los campos de correo, y las
   celdas de Grid.ts). Todos arman un <table class='table'> con la foto en una celda y el
   nombre en la siguiente, y con el relleno de 8px que Bootstrap le da a las celdas el
   nombre queda pegado a la foto.

   El relleno va en la celda que sigue y no como margen de la imagen: la celda de la foto
   trae max-width en linea (50px), asi que un margen en la imagen no separa nada.

   El selector nombra .ui-autocomplete ademas de la tabla para ganarle en especificidad a
   `.table > tbody > tr > td` de Bootstrap sin recurrir a !important. Solo son rellenos,
   por lo que no necesita variante de dark mode.

   El :not() excluye las filas que usan las clases compartidas de AdmPhotoAutocomplete.css
   (existen en master/pre-release, no en release): esas ya traen su propia separacion, asi
   que al mezclar esta rama hacia arriba no se suman los dos espacios. */
.ui-autocomplete table.table:not(.adm-photo-autocomplete__item) > tbody > tr > td + td {
    padding-left: 16px;
    vertical-align: middle;
}
/* Iconos (C/P/E) a la izquierda en los desplegables de los autocompletar de relacionados
   (Relacionado, Proveedor o empleado, y las celdas de relacionado de Grid.ts).

   Los iconos iban en la segunda celda, detras del nombre, asi que cada fila los dibujaba
   en una posicion horizontal distinta segun lo que midiera el nombre: un GUID los empujaba
   mucho mas a la derecha que un nombre corto. Ahora van en una primera celda de ancho
   fijo, de modo que los nombres arrancan en la misma x en todas las filas.

   El ancho reserva sitio para los tres iconos a la vez, porque un mismo relacionado puede
   ser cliente, proveedor y empleado. Los iconos se pegan al borde derecho de esa celda
   (text-align: right) para que en las filas con un solo icono, que son la mayoria, no
   quede un hueco enorme entre el icono y el nombre: el hueco es siempre el mismo, tenga
   la fila uno o tres iconos.

   El selector nombra .ui-autocomplete y la tabla ademas de la celda para ganarle en
   especificidad al `.table > tbody > tr > td` de Bootstrap sin recurrir a !important.
   No necesita variante de modo oscuro: los colores los siguen dando las clases .label
   de Bootstrap. */
.ui-autocomplete table.table.adm-relationship-autocomplete__item > tbody > tr > td.adm-relationship-autocomplete__item-badges {
    width: 84px;
    min-width: 84px;
    white-space: nowrap;
    text-align: right;
    padding-right: 0;
    vertical-align: middle;
}

/* El nombre queda alineado a la izquierda y absorbe el ancho que sobra. Al quitar el
   width fijo que la celda del nombre tenia antes, el nombre quedaba centrado dentro de la
   celda, asi que se fija la alineacion explicitamente en vez de depender de la heredada.

   El padding-left pisa los 16px que la regla generica de `td + td` de mas arriba le da a
   la segunda celda de estos desplegables: aqui la celda anterior no es una foto, es el
   grupo de iconos, y con 16px el nombre quedaba demasiado separado. */
.ui-autocomplete table.table.adm-relationship-autocomplete__item > tbody > tr > td.adm-relationship-autocomplete__item-name {
    width: auto;
    text-align: left;
    padding-left: 8px;
    vertical-align: middle;
}

/* Ticket 00022391: marca de "opcion no disponible" en los combos de los grids (Grid.ts).

   Cuando una linea guardada apunta a un registro que no vino en la lista de opciones,
   createSelectCell inyecta esa opcion para que el valor NO se pierda al guardar, y le pone
   esta clase al <select> para que el usuario note que no proviene del catalogo cargado.
   Pasa cuando un filtro deja fuera el registro guardado (por subsidiaria o ubicacion), en
   los combos en cascada, o si el registro fue borrado.

   Solo cambia el borde y el color del texto: el fondo lo maneja .form-control y no se
   toca para no romper el modo oscuro (ver DarkMode.css). */
.form-control.adm-grid-select--missing-option {
    border-color: #c29d0b;
    color: #8a6d00;
}

    .form-control.adm-grid-select--missing-option:focus {
        border-color: #c29d0b;
    }