/* Tokens de color: valores por defecto, sincronizados con los defaults del
   seeder de Theme_Colors. El bootstrap de la app (ver script.js) sobreescribe
   estas custom properties con los valores reales de GET /api/theme-colors. */
:root {
    --color-brand: #28a745;
    --color-brand-soft: rgba(40, 167, 69, 0.75);
    /* fallback para navegadores sin color-mix() */
    --color-border: #d7dbcf;
    --color-ink: #2b2f28;
    --color-icon-create: #28a745;
    --color-icon-edit: #2f6fed;
    --color-icon-delete: #000000;
    --color-icon-view: #808080;
    --color-icon-password: #ffa500;
    --color-icon-stock: #000000;
    /* #loginForm button se pinta ANTES de autenticarse — GET /theme-colors
       devuelve 401 sin sesión, así que applyThemeColors nunca corre ahí.
       Sin fallback acá, el botón de login queda transparente/invisible. */
    --color-button-bg: #28a745;
    --color-button-text: #ffffff;
    --color-button-hover-bg: #218838;
}

/* --color-brand-soft real (translúcido, sigue a --color-brand si se
   personaliza) en navegadores que soportan color-mix(); el valor de arriba
   queda como fallback estático. */
@supports (color: color-mix(in srgb, red 50%, transparent)) {
    :root {
        --color-brand-soft: color-mix(in srgb, var(--color-brand) 75%, transparent);
    }
}

html {
    font-size: 17px;
    /* base */
}

body {
    font-family: 'Roboto', sans-serif;
    /* Fuente más moderna */
    background-color: var(--color-bg-body);
    margin: 0;
    padding: 1.25rem;
    padding-top: 4rem;
    color: var(--color-ink);
}

/* La única página sin #top-bar fijo: no necesita el padding-top de 4rem
   reservado para él. */
body.login-page {
    padding-top: 1.25rem;
}

.container {
    /*max-width: 90%;*/
    /* Cambia a 800px si deseas más ancho */
    /*margin: auto;*/
    background-color: var(--color-container-bg);
    padding: 1.25rem;
    border-radius: 0.31rem;
    box-shadow: 0 0 0.62rem rgba(0, 0, 0, 0.1);
    overflow-x: auto;
    /* Permite el desplazamiento horizontal */
}

header {
    margin-bottom: 1.25rem;
}

.app-footer {
    text-align: center;
    padding: 1rem 0 0.5rem;
    font-size: 0.75rem;
    color: #666d5e;
}

.app-footer a {
    color: inherit;
    text-decoration: none;
}

.app-footer a:hover {
    text-decoration: underline;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-right: 0.93rem;
}

nav ul li a:hover {
    text-decoration: underline;
}

label {
    display: block;
    margin: 0.62rem 0 0.31rem;
}

/* Encabezado de sección dentro de un formulario denso (ej. "Datos
   personales" / "Acceso" en Crear Usuario): agrupa visualmente sin
   necesidad de reestructurar el formulario en fieldsets. Reutilizable en
   cualquier modal de alta/edición con muchos campos. */
.form-section-title {
    display: block;
    margin: 1.5rem 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 0.06rem solid var(--color-border);
    font-weight: 700;
    font-size: 1.12rem;
    color: var(--color-brand);
}

/* Fila para un label seguido de un botón de ícono (ej. "Cliente:" + alta
   rápida): los pone en la misma línea, centrados verticalmente contra el
   texto del label en vez de que el botón caiga a la fila de abajo. */
.label-with-button {
    display: flex;
    align-items: center;
    gap: 0.31rem;
}

input,
select,
textarea {
    font-family: 'Roboto', sans-serif;
    /* Los controles de formulario no heredan la fuente del body por
       default en el user-agent stylesheet (Chrome los renderiza en Arial,
       los textarea en monospace, si no se especifica acá). */
}

input,
textarea {
    width: 100%;
    padding: 0.5rem;
    border: 0.06rem solid var(--color-border);
    border-radius: 0.25rem;
    resize: vertical;
    box-sizing: border-box;
}

button {
    font-family: 'Roboto', sans-serif;
    background-color: var(--color-button-bg);
    color: var(--color-button-text);
    padding: 0.62rem;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
}

input[type="color"] {
    width: 3rem;
    height: 2rem;
    padding: 0.15rem;
    cursor: pointer;
}

.theme-color-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0;
    border-bottom: 0.06rem solid var(--color-border);
}

.theme-color-row label {
    flex: 1;
    margin: 0;
    font-size: 0.87rem;
}

.theme-color-row .theme-color-hex {
    width: 5rem;
    font-family: monospace;
    font-size: 0.8rem;
    color: #666d5e;
}

button:hover {
    background-color: var(--color-button-hover-bg);
}

.tab-content {
    margin-top: 1.25rem;
}

.hidden {
    display: none;
}

/* Estilos para la tabla */
.table-container table {
    overflow-x: auto;
    width: 100%;
    border-collapse: collapse;
    border-radius: 0.31rem;
    /* Redondeo de esquinas */
    overflow: hidden;
    /* Para que el border-radius se aplique correctamente */
}

.table-container th,
.table-container td {
    padding: 0.75rem;
    text-align: center;
    border-bottom: 0.06rem solid var(--color-border);
    cursor: pointer;

}

.table-container table th {
    background-color: var(--color-brand);
    color: white;
}

.table-container th:hover {
    background-color: color-mix(in srgb, var(--color-brand) 75%, transparent);
}

.table-container table tr:nth-child(odd) {
    background-color: var(--color-table-odd-bg);
}

.table-container table tr:nth-child(even) {
    background-color: var(--color-table-even-bg);
}

.table-container table tr:hover {
    background-color: var(--color-table-hover-bg);
    /* Color de fondo al pasar el ratón */
}

.table-container table td {
    font-size: 0.87rem;
    /* Tamaño de fuente más pequeño */
}


.table-container {
    max-height: 37.5rem;
    /*Ajusta este valor según lo que necesites */
    overflow-y: auto;
    /* Habilita el scroll vertical */
    position: relative;
}

.table-icon {
    /*display: flex;*/
    justify-content: center;
    /* Centrar horizontalmente */
    align-items: center;
    /* Centrar verticalmente */
    height: 100%;
    /* Asegúrate de que la celda tenga altura completa */

}

.table-icon button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    /* aumenta el área clickeable */
    border-radius: 0.5rem;
    /* esquinas redondeadas */
    transition: background-color 0.2s ease;
}

/* Botón de solo ícono fuera de una tabla (ej. el "+" de "Crear Producto"
   junto a un <h1>, o el trash de un ítem de presupuesto): mismo reset visual
   que .table-icon button, pero sin depender de estar dentro de una <td>. */
.icon-button {
    background: none;
    border: none;
    cursor: pointer;
}

/* Sin hover: pisa el "button:hover" genérico (más abajo), que si no le
   pintaría un fondo al pasar el mouse. */
.icon-button:hover {
    background: none;
}

/* Tamaño de los <i> de Font Awesome dentro de botones de ícono. */
.icon-lg {
    font-size: 1.5rem;
}

.icon-sm {
    font-size: 1.12rem;
}

/* Color por tipo de acción (ver Theme_Colors, grupo "Colores font Awesome"). */
.icon-create {
    color: var(--color-icon-create);
}

.icon-edit {
    color: var(--color-icon-edit);
}

.icon-delete {
    color: var(--color-icon-delete);
}

.icon-view {
    color: var(--color-icon-view);
}

.icon-images {
    color: var(--color-icon-images);
}

.icon-password {
    color: var(--color-icon-password);
}

.icon-stock {
    color: var(--color-icon-stock);
}

/* Ícono de cambiar estado de usuario (fa-user/fa-user-slash): su token
   icon_status_toggle se eliminó (ver docs), queda con un gris fijo. */
.icon-muted {
    color: #666d5e;
}

#rolePermTable input[type="checkbox"] {
    width: 1.2rem;
    height: 1.2rem;
    cursor: pointer;
    accent-color: var(--color-brand);
}

#chkEndConsumer {
    accent-color: var(--color-brand);
}

.invoice-table-icon {
    text-align: center !important;
    justify-content: center;
    /* Centrar horizontalmente */
    align-items: center;
    /* Centrar verticalmente */
    height: 100%;
    /* Asegúrate de que la celda tenga altura completa */

}

.item-discount-input {
    width: 4.5rem;
    text-align: right;
}

.item-discount-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Sin invoice.discount se oculta la columna de descuento por ítem, misma
   lógica que ya oculta el descuento general (ver script.js). */
#itemsInvoiceTable.no-item-discount th:nth-child(5),
#itemsInvoiceTable.no-item-discount td:nth-child(5) {
    display: none;
}

.table-container td.quantity-cell {
    display: grid;
    justify-content: center;
    /* centrar horizontal */
    align-items: center;
    /* centrar vertical */
    gap: 0.3rem;
    /* espacio entre elementos */
    flex-wrap: wrap;
    /* permite que se apilen en pantallas chicas */
}

.table-container td.quantity-cell button {
    flex: 0 0 auto;
    /* que los botones no se estiren raro */
}

.table-container td.quantity-cell .quantity {
    min-width: 1.5rem;
    text-align: center;
}

#paginationControls {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1.25rem;
}

#paginationUsersControls {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1.25rem;
}

#paginationItemsControls {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1.25rem;
}

#reportMovsPagination {
    display: none;
    justify-content: center;
    align-items: center;
    margin-top: 1.25rem;
}
#reportMovsPagination.active {
    display: flex;
}

#paginationControls button {
    background-color: var(--color-button-bg);
    color: var(--color-button-text);
    border: none;
    padding: 0.62rem 1.25rem;
    margin: 0 0.62rem;
    border-radius: 0.31rem;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

#paginationControls button:disabled {
    /* Color gris para botones deshabilitados */
    background-color: #E5E7EB;
    color: #9CA3AF;
    cursor: not-allowed;
}

#paginationControls button:hover:not(:disabled) {
    background-color: var(--color-button-hover-bg);
}

#paginationControls #pageInfo {
    font-size: 1rem;
    margin: 0 0.62rem;
    color: var(--color-ink);
    /* Color de texto */
}

#reportMovsPagination button {
    background-color: var(--color-button-bg);
    color: var(--color-button-text);
    border: none;
    padding: 0.62rem 1.25rem;
    margin: 0 0.62rem;
    border-radius: 0.31rem;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

#reportMovsPagination button:disabled {
    /* Color gris para botones deshabilitados */
    background-color: #E5E7EB;
    color: #9CA3AF;
    cursor: not-allowed;
}

#reportMovsPagination button:hover:not(:disabled) {
    background-color: var(--color-button-hover-bg);
}

#reportMovsPagination #reportMovsPageInfo {
    font-size: 1rem;
    margin: 0 0.62rem;
    color: var(--color-ink);
}

/* Estilos del modal */
.modal {
    position: fixed;
    /* Por encima de #top-bar (1100) y #mi-cuenta-opciones (1200): un modal
       nunca debe quedar tapado por la barra superior. Por debajo de
       #loadingOverlay/toast (9999), que sí deben verse sobre un modal abierto. */
    z-index: 1500;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    /* Centra verticalmente */
    justify-content: center;
    /* Centra horizontalmente */
}

.modal-content {
    background-color: white;
    padding: 1.25rem;
    border-radius: 0.31rem;
    width: min(90%, 25rem);
    /* Ancho del contenido del modal: se achica en mobile en vez de desbordar */
    max-height: 90vh;
    /* evita que formularios largos (ej: editar config. de tienda, crear cliente)
       empujen los botones fuera de la pantalla */
    overflow-y: auto;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
}

/* Modal de alta/edición de presupuesto: más ancho que el default (25rem)
   porque además del cliente y la fecha lleva la tabla de ítems agregados. */
#quoteFormModal .modal-content {
    width: min(90%, 60rem);
}

/* Modal de edición de colores de tema: un poco más ancho que el default
   (25rem) para que la fila color+hex+label entre sin apretarse. */
#themeColorsEditModal .modal-content {
    width: min(90%, 32rem);
}

.modal-form-actions {
    padding-top: 0.5rem;
}

.modal-ItemDetail-content {
    background-color: white;
    padding: 1.25rem;
    border-radius: 0.31rem;
    width: min(90%, 70rem);
    /* ocupa 90% en mobile, hasta 50rem en desktop */
    max-height: 90vh;
    /* evita que se salga de la pantalla */
    overflow-y: auto;
    /* Ancho del contenido del modal */
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
}

.modal-ItemStock-content {
    background-color: white;
    padding: 1.25rem;
    border-radius: 0.31rem;
    width: min(90%, 70rem);
    /* ocupa 90% en mobile, hasta 50rem en desktop */
    max-height: 90vh;
    /* evita que se salga de la pantalla */
    overflow-y: auto;
    /* Ancho del contenido del modal */
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
}

.close {
    position: absolute;
    top: 0.62rem;
    right: 1.25rem;
    font-size: 1.5rem;
    cursor: pointer;
}

.search-container {
    position: relative;
    width: 100%;
    /* Ajusta según sea necesario */
}

.search-container input {
    font-family: 'Roboto', sans-serif;
    /* Espacio para el ícono a la izquierda */
    height: 2.5rem;
    /* Altura fija del input */
    box-sizing: border-box;
    /* Asegura que el padding no afecte el tamaño total */
    border: 0.06rem solid var(--color-border);
    /* Borde del input */
    border-radius: 0.25rem;
    /* Bordes redondeados */
    font-size: 0.8rem;
}

.search-container input:focus{
    border-color: var(--color-brand);
    /* Cambia el color del borde al enfocarse */
    outline: none;
    /* Elimina el contorno predeterminado */
}

/* Separación entre el buscador de productos, el select de resultados y la
   tabla de ítems agregados del modal de presupuestos — sin esto quedan
   pegados unos con otros. */
#quoteProducto {
    margin-top: 0.62rem;
}

#quoteForm .table-container {
    margin-top: 0.62rem;
}

.section-info {
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: #666d5e;
}

/* Marca de campo obligatorio junto al label (ej. formularios de cliente). */
.required-mark {
    color: #dc3545;
    margin-left: 0.15rem;
}

.filter-bar {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    margin-bottom: 1.25rem;
}

.filter-bar-wide {
    flex: 2;
}

.filter-bar-narrow {
    flex: 1;
}

@media (max-width: 35rem) {
    .filter-bar {
        flex-direction: column;
    }

    .filter-bar-wide,
    .filter-bar-narrow {
        flex: none;
        width: 100%;
    }
}

.perm-desc-search {
    font-family: 'Roboto', sans-serif;
    height: 2.5rem;
    width: 100%;
    box-sizing: border-box;
    border: 0.06rem solid var(--color-border);
    border-radius: 0.25rem;
    font-size: 0.8rem;
    padding: 0.62rem;
}

.perm-desc-search:focus {
    border-color: var(--color-brand);
    outline: none;
}

/* Contenedor del formulario de inicio de sesión */
.login-wrapper {
    display: flex;
    justify-content: center;
    /* Centrado horizontal */
    align-items: center;
    /* Centrado vertical */
    height: calc(100vh - 5rem);
    /* 100vh - padding top/bottom del body (2.5rem) - alto del .app-footer (2.5rem) */
}

.login-container {
    background-color: white;
    padding: 1.25rem;
    padding-top: 3.75rem;
    border-radius: 0.5rem;
    box-shadow: 0 0.25rem 0.62rem rgba(0, 0, 0, 0.1);
    width: min(90%, 20rem);
    position: relative;
}

.login-avatar {
    position: absolute;
    top: -2.75rem;
    left: 50%;
    transform: translateX(-50%);
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 50%;
    background-color: #E5E7EB;
    border: 0.25rem solid white;
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.login-avatar svg,
.login-avatar img {
    width: 70%;
    height: 70%;
}

/* Título del formulario */
#loginForm h2 {
    text-align: center;
    margin-bottom: 1.25rem;
    font-size: 1.5rem;
    color: var(--color-ink);
}

/* Estilo para etiquetas */
#loginForm label {
    display: block;
    margin-bottom: 0.31rem;
    font-size: 0.87rem;
    color: var(--color-ink);
}

/* Estilos para los inputs */
#loginForm input {
    width: 100%;
    padding: 0.62rem;
    margin-bottom: 0.93rem;
    border: 0.06rem solid var(--color-border);
    border-radius: 0.25rem;
    box-sizing: border-box;
}

/* Botón de envío */
#loginForm button {
    width: 100%;
    padding: 0.62rem;
    background-color: var(--color-button-bg);
    color: var(--color-button-text);
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: 1rem;
}

/* Hover en el botón de envío */
#loginForm button:hover {
    background-color: var(--color-button-hover-bg);
}

/* Media query para pantallas pequeñas */
@media (max-width: 35rem) {
    .login-container {
        padding: 0.93rem;
        padding-top: 3.75rem;
    }

    #loginForm h2 {
        font-size: 1.25rem;
    }
}

select {
    font-family: 'Roboto', sans-serif;
    width: 100%;
    /* Ocupa todo el ancho del contenedor */
    padding: 0.62rem;
    /* Espaciado interno */
    border: 0.06rem solid var(--color-border);
    /* Borde gris claro */
    border-radius: 0.25rem;
    /* Bordes redondeados */
    background-color: white;
    /* Fondo blanco */
    font-size: 0.87rem;
    /* Tamaño de la fuente */
    box-sizing: border-box;
    /* Para que el padding no afecte el tamaño total */
    appearance: none;
    /* Elimina el estilo predeterminado del navegador */
    cursor: pointer;
}

select:focus {
    border-color: var(--color-brand);
    /* Cambia el color del borde al enfocarse */
    outline: none;
    /* Elimina el contorno predeterminado */
}

option {
    padding: 0.62rem;
    /* Espaciado interno de las opciones */
}

/* Contenedor principal de las tabs */
.nav-tabs {
    list-style-type: none;
    padding: 0;
    display: flex;
    /* Cambiar a flex para alinearlos horizontalmente */
    justify-content: flex-start;
    /* Alinear a la izquierda */
}

.nav-tabs li {
    margin-right: 0.31rem;
    /* Espacio entre los tabs */
}

/* Enlace de las tabs principales */
.nav-tabs a {
    color: var(--color-menu-tabs-text);
    text-decoration: none;
    padding: 0.62rem;
    display: block;
    text-align: left;
    /* Alinear el texto a la izquierda */
    border-radius: 0.25rem;
    transition: background-color 0.3s ease;
    background-color: var(--color-menu-tabs-bg);
    box-shadow: 0 0.12rem 0.31rem rgba(0, 0, 0, 0.1);
    margin-bottom: 0.31rem;
    /* Espacio entre los tabs */
}

.nav-tabs a:hover {
    background-color: var(--color-menu-tabs-hover-bg);
    text-decoration: none;
}

/* Estilos para las sub-tabs */
.sub-tabs {
    list-style-type: none;
    padding-left: 0;
    display: none;
    /* Ocultar por defecto */
    background-color: var(--color-menu-subtabs-bg);
    padding: 0.31rem;
    border-radius: 0.25rem;
    box-shadow: 0 0.12rem 0.31rem rgba(0, 0, 0, 0.1);
    position: absolute;
    z-index: 1000;
}

/* Las sub-tabs se muestran solo cuando el <li> principal tiene la clase
   "open", controlada por JS (click/tap en el tab principal o en cualquier
   otro lugar para cerrar). Antes dependía de :hover, que en mobile queda
   "pegado" después de un tap y nunca se libera, dejando el menú abierto. */
.nav-tabs li.open > .sub-tabs {
    display: block;
}

.sub-tabs li {
    margin: 0.31rem 0;
}

/* Enlace de las sub-tabs */
.sub-tabs a {
    text-decoration: none;
    color: var(--color-menu-tabs-text);
    padding: 0.5rem 0.93rem;
    display: block;
}

.sub-tabs a:hover {
    background-color: var(--color-menu-tabs-hover-bg);
    text-decoration: none;

}

/* Botón hamburguesa: solo existe visualmente en mobile (ver media query de
   abajo). En desktop los tabs siempre están expandidos, no hace falta. */
.nav-tabs-toggle {
    display: none;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.62rem;
    margin-bottom: 0.31rem;
    color: white;
    background-color: var(--color-brand);
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: 1rem;
    box-shadow: 0 0.12rem 0.31rem rgba(0, 0, 0, 0.1);
}

/* Media query para pantallas pequeñas */
@media (max-width: 37.5rem) {
    .nav-tabs-toggle {
        display: flex;
    }

    .nav-tabs {
        flex-direction: column;
        /* Hace que los tabs principales se apilen verticalmente */
        /* Colapsado por default: son 9 tabs, ocupan toda la pantalla si
           quedan siempre expandidos. Se abre con el botón hamburguesa
           (ver #navTabsToggle en script.js) y se vuelve a colapsar solo al
           elegir un tab final (uno sin sub-tabs, o un sub-tab). */
        display: none;
    }

    .nav-tabs.mobile-nav-open {
        display: flex;
    }

    .nav-tabs li {
        margin: 0.06rem 0;
        /* Aumenta el margen entre tabs en pantallas pequeñas */
    }
}

#top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2.75rem;
    background-color: var(--color-brand);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.75rem;
    z-index: 1100;
    box-shadow: 0 0.12rem 0.37rem rgba(0, 0, 0, 0.2);
}

#top-bar-shift {
    color: white;
    font-size: 0.85rem;
}

#top-bar-user {
    position: relative;
}

#mi-cuenta-toggle {
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    border: 0.06rem solid rgba(255, 255, 255, 0.5);
    padding: 0.375rem 0.75rem;
    border-radius: 0.31rem;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

#mi-cuenta-toggle i {
    font-size: 1.1rem;
}

#mi-cuenta-toggle:hover {
    background-color: rgba(255, 255, 255, 0.35);
}

#mi-cuenta-opciones {
    position: absolute;
    right: 0;
    top: calc(100% + 0.4rem);
    background-color: var(--color-menu-tabs-bg);
    border: 0.06rem solid var(--color-border);
    border-radius: 0.5rem;
    padding: 0.5rem;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
    min-width: 10rem;
    z-index: 1200;
}

#mi-cuenta-opciones ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#mi-cuenta-opciones li {
    margin-bottom: 0;
}

#mi-cuenta-opciones li button {
    background-color: transparent;
    border: none;
    color: var(--color-menu-tabs-text);
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
    text-decoration: none;
    width: 100%;
    text-align: left;
    padding: 0.375rem 0.5rem;
    border-radius: 0.25rem;
}

#mi-cuenta-opciones li button:hover {
    background-color: var(--color-menu-subtabs-bg);
}

/* Ocultar por defecto */
#loadingOverlay {
    visibility: hidden;
    /* Oculta sin eliminar del flujo del DOM */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.show-overlay {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: all !important;
    /* Reactiva clics solo cuando está visible */
}

/* Animación de carga */
.spinner {
    width: 3.12rem;
    height: 3.12rem;
    border: 0.31rem solid rgba(255, 255, 255, 0.3);
    border-top: 0.31rem solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.show-section {
    display: block;
}

.hide-section {
    display: none;
}

.show-modal {
    display: flex;
}

.hide-modal {
    display: none;
}

.invoice-info-container {
    margin-bottom: 1.25rem;
}

.invoice-info-container table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.87rem;
    text-align: left;
    /* <-- clave para alinear a la izquierda */
}

table.invoice-info-table {
    /* border-collapse: collapse (heredado de .invoice-info-container table)
       hace que el border-radius de la tabla se ignore en la mayoría de los
       navegadores — hay que pasar a separate para que las esquinas redondeen. */
    border-collapse: separate;
    border-spacing: 0;
    border: 0.06rem solid var(--color-border);
    border-radius: 0.31rem;
    overflow: hidden;
}

.invoice-info-container td {
    text-align: left;
    padding: 0.25rem 0.5rem;
    border: none;
    background: transparent;
    color: var(--color-ink);
}

.invoice-info-container th {
    text-align: left;
    padding: 0.25rem 0.5rem;
    border: none;
    background: transparent;
    color: var(--color-ink);
}

#newInvoiceType {
    border: none;
    border-radius: 0;
}

.invoice-info-container select {
    font-family: 'Roboto', sans-serif;
    width: min-content;
    border: 0.06rem solid var(--color-border);
    /* Borde gris claro */
    border-radius: 0.25rem;
    /* Bordes redondeados */
    background-color: white;
    /* Fondo blanco */
    font-size: 0.87rem;
    /* Tamaño de la fuente */
    box-sizing: border-box;
    /* Para que el padding no afecte el tamaño total */
    appearance: none;
    /* Elimina el estilo predeterminado del navegador */
    cursor: pointer;
}

.select-Client-Container h1 {
    margin-top: 1.12rem;
    margin-bottom: 1.12rem;
    font-size: 1.12rem;
}

.select-Client-Container label {
    display: block;
    font-size: 0.87rem;
    margin: 0;
}

.select-Client-Container input[type="checkbox"] {
    width: auto;
}

.select-Client-Container input[type="text"] {
    font-family: 'Roboto', sans-serif;
    height: 2.5rem;
    /* Altura fija del input */
    box-sizing: border-box;
    /* Asegura que el padding no afecte el tamaño total */
    border: 0.06rem solid var(--color-border);
    /* Borde del input */
    border-radius: 0.25rem;
    /* Bordes redondeados */
    font-size: 0.8rem;
    margin: 0.62rem 0 0;
}
.select-Client-Container input[type="text"]:focus{
    border-color: var(--color-brand);
    /* Cambia el color del borde al enfocarse */
    outline: none;
    /* Elimina el contorno predeterminado */
}

.select-Client-Container select {
    font-family: 'Roboto', sans-serif;
    width: 100%;
    /* Ocupa todo el ancho del contenedor */
    padding: 0.62rem;
    /* Espaciado interno */
    border: 0.06rem solid var(--color-border);
    /* Borde gris claro */
    border-radius: 0.25rem;
    /* Bordes redondeados */
    background-color: white;
    /* Fondo blanco */
    font-size: 0.87rem;
    /* Tamaño de la fuente */
    box-sizing: border-box;
    /* Para que el padding no afecte el tamaño total */
    appearance: none;
    /* Elimina el estilo predeterminado del navegador */
    cursor: pointer;
    /* Cambia el cursor a puntero */
    margin: 0.62rem 0 0.31rem;
}
.select-Client-Container select:focus{
    border-color: var(--color-brand);
    /* Cambia el color del borde al enfocarse */
    outline: none;
    /* Elimina el contorno predeterminado */
}

.item-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1rem;
    margin: 2rem 0;
}

.detail-card {
    background-color: var(--color-container-bg);
    border: 0.06rem solid var(--color-border);
    border-radius: 0.62rem;
    padding: 1rem;
    box-shadow: 0 0.12rem 0.31rem rgba(0, 0, 0, 0.05);
}

.detail-card h3 {
    font-size: 1.2rem;
    margin: 0 0 0.5rem;
    color: var(--color-brand);
}

.detail-card p {
    margin: 0;
    font-size: 1rem;
    color: var(--color-ink);
}

.detail-card i {
    margin-right: 0.5rem;
    color: #666d5e;
}

/* CONTENEDOR */
#toast-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
}

/* SHOW TOAST */
.toast {
    display: flex;
    align-items: center;
    gap: 0.62rem;
    min-width: 320px;
    padding: 16px 24px;
    margin-top: 10px;
    border-radius: 10px;
    color: white;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);

    transform: translateY(-80px);
    opacity: 0;
    transition: all 0.4s ease;
}

.toast i {
    font-size: 1.2em;
    flex-shrink: 0;
}

/* ANIMACIÓN ENTRADA */
.toast.show {
    transform: translateY(0);
    opacity: 1;
}

/* ANIMACIÓN SALIDA */
.toast.hide {
    transform: translateY(-80px);
    opacity: 0;
}

/* COLORES: fijos, no personalizables. */
.toast.success {
    background: #e8f5e9;
    color: #1B5E20;
}

.toast.warning {
    background: #fff8e1;
    color: #7A5200;
}

.toast.info {
    background: #e8f4fd;
    color: #0D47A1;
}

.toast.error {
    background: #fdecec;
    color: #7F1D1D;
}

.invoiceLayout {
    display: flex;
    height: 100vh
        /* full height of the viewport. */
    ;
    gap: 1rem;
    /* separación entre columnas */
    box-sizing: border-box;
}

.invoiceLayoutLeft {
    width: 50%;
    display: flex;
    align-items: flex-start;
}

/* Estilos para la tabla */
.invoiceLayoutLeft table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 0.31rem;
    /* Redondeo de esquinas */
    overflow: hidden;
    /* Para que el border-radius se aplique correctamente */
}

.invoiceLayoutLeft th,
.invoiceLayoutLeft td {
    padding: 0.5rem;
    text-align: center;
    /*border-bottom: 0.06rem #d7dbcf;*/
    cursor: pointer;
}

.invoiceLayoutLeft table th {
    font-size: 0.87rem;
    background-color: var(--color-brand);
    color: white;
}

.invoiceLayoutLeft th:hover {
    background-color: color-mix(in srgb, var(--color-brand) 75%, transparent);
}

.invoiceLayoutLeft table tr:nth-child(odd) {
    background-color: var(--color-table-odd-bg);
}

.invoiceLayoutLeft table tr:nth-child(even) {
    background-color: var(--color-table-even-bg);
}

.invoiceLayoutLeft table tr:hover {
    background-color: var(--color-table-hover-bg);
    /* Color de fondo al pasar el ratón */
}

.invoiceLayoutLeft table td {
    font-size: 0.85rem;
    /* Tamaño de fuente más pequeño */
}

.invoiceLayoutLeft td.quantity-cell {
    display: grid;
    justify-content: center;
    /* centrar horizontal */
    align-items: center;
    /* centrar vertical */
    gap: 0.3rem;
    /* espacio entre elementos */
    flex-wrap: wrap;
    /* permite que se apilen en pantallas chicas */
    grid-auto-flow: column;
}

.invoiceLayoutLeft td.quantity-cell button {
    flex: 0 0 auto;
    /* que los botones no se estiren raro */
    background-color: var(--color-brand);
    color: white;
    padding: 0.62rem;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    /* Mínimo ~44px de tap target (guía Apple/Google) — antes quedaba chico
       alrededor del glifo del emoji. */
    min-width: 2.75rem;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.invoiceLayoutLeft td.quantity-cell .quantity {
    width: 3rem;
    min-width: 1.5rem;
    text-align: center;
    padding: 0.31rem;
}

/* Agranda el tap target del botón "eliminar ítem" (usa .icon-button/.icon-lg
   compartidos con el resto de la app, que acá quedaban en ~24px) sin tocar
   esas clases globalmente — acotado a esta tabla puntual. */
.invoiceLayoutLeft .invoice-table-icon .icon-button {
    min-width: 2.75rem;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.invoiceLayoutRight {
    flex: 1;
    /* ocupa el resto del espacio */
    display: flex;
    flex-direction: column;
    /*gap: 1rem;*/
}

.invoiceLayoutTop {
    align-items: flex-start;
    flex-direction: column;
}

.invoiceLayoutTop select {
    font-family:'Roboto', sans-serif;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    width: 100%;
    /* Ocupa todo el ancho del contenedor */
    padding: 0.62rem;
    /* Espaciado interno */
    border: 0.06rem solid var(--color-border);
    /* Borde gris claro */
    border-radius: 0.25rem;
    /* Bordes redondeados */
    background-color: white;
    /* Fondo blanco */
    font-size: 0.87rem;
    /* Tamaño de la fuente */
    box-sizing: border-box;
    /* Para que el padding no afecte el tamaño total */
    appearance: none;
    /* Elimina el estilo predeterminado del navegador */
    cursor: pointer;
}

.invoiceLayoutTop h1 {
    margin-top: 1.12rem;
    margin-bottom: 1.12rem;
    font-size: 1.12rem;
}
.invoiceProductSearchByCategory {
    display: flex;       /* Activa el modo flexbox */
    flex-wrap: wrap;     /* Permite que los elementos pasen a la siguiente línea */
    gap: 0.5rem;           /* Crea espacio entre los cuadros sin pelear con márgenes */
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    justify-content: center;
    border: 0.06rem solid var(--color-border);
    border-radius: 0.31rem;
    padding: 0.3rem;
}
.invoiceDivCategory{
    width: 5rem; 
    height: 5rem; 
    background-color: var(--color-button-bg);
    color: var(--color-button-text);
    border-radius: 0.31rem;
    cursor: pointer;
    padding: 0.3rem;

/* Activar Flexbox */
    display: flex;
    justify-content: center; 
    align-items: center;
    text-align: center; /* Centrar el texto dentro del cuadro */
    box-sizing: border-box; /* Asegura que el padding no agrande el div */
/* Ajuste de texto */
    font-size: 0.87rem;
    overflow-wrap: break-word; /* Estándar moderno */
    word-break: break-word; /* Para navegadores antiguos */
    white-space: normal;       /* Permitir saltos de línea */
    overflow: hidden; /* Evita que el texto se salga de los bordes */
    }
.invoiceDivCategory:hover{
    background-color: var(--color-button-hover-bg);
}
.invoiceDivCategory.active{
    color:var(--color-button-text);
    background-color: var(--color-button-hover-bg);
}



.invoiceLayoutBottom {
    /*flex: 1;*/

    display: flex;       /* Activa el modo flexbox */
    flex-wrap: wrap;     /* Permite que los elementos pasen a la siguiente línea */
    gap: 0.5rem;           /* Crea espacio entre los cuadros sin pelear con márgenes */
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    justify-content: center;
    border: 0.06rem solid var(--color-border);
    border-radius: 0.31rem;
    padding: 0.3rem;

}
#divCreateInvoice{
    height: 5rem;
    width: 100%;
    background-color: var(--color-button-bg);
    color: var(--color-button-text);
    border: none;
    border-radius: 0.31rem;
    cursor: pointer;
    padding: 0.3rem;
    font: inherit;

    display: flex;
    align-items: center;
    justify-content: center;
}
#divCreateInvoice:hover{
    background-color: var(--color-button-hover-bg);
}
.invoiceLayoutBottom .divInvoicePayMethodContainer{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    font-size: 0.87rem;
    border: 0.06rem solid var(--color-border);
    border-radius: 0.31rem;
    padding: 0.3rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    gap: 0.3rem;
}
.invoiceLayoutBottom .divInvoicePayMethodText{
    font-size: 0.87rem;
    width: 50%;
}
.divInvoicePayMethodContainer select{
    font-family: 'Roboto', sans-serif;
    border: 0.06rem solid var(--color-border);
    border-radius: 0.25rem;
    background-color: white;
    font-size: 0.87rem;
    box-sizing: border-box;
    appearance: none;
    cursor: pointer;
    padding: 0.62rem;
}

.invoicePaymentMethodsList {
    /* .invoiceLayoutBottom es flex-wrap: fuerza esta lista a su propia línea
       completa, en vez de acomodarse al lado de otros elementos. */
    flex-basis: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-top: 0.3rem;
}

.payment-method-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.87rem;
    border: 0.06rem solid var(--color-border);
    border-radius: 0.31rem;
    padding: 0.3rem 0.5rem;
}

.payment-method-row-name {
    flex: 1;
}

.payment-method-amount-input {
    width: 6rem;
    text-align: right;
}

.payment-method-remove {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.31rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.invoicePaymentMethodsRemaining {
    /* Misma razón que .invoicePaymentMethodsList: siempre en su propia línea,
       debajo de todas las filas, y centrado dentro de esa línea. */
    flex-basis: 100%;
    text-align: center;
    font-size: 0.87rem;
    font-weight: 600;
    margin-top: 0.3rem;
    margin-bottom: 0.5rem;
}
.itemImagesList {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}
.modal-action-row {
    margin-top: 0.62rem;
}

/* Ancho estándar para los botones de acción de modal (Guardar/Cancelar/
   Salir/Subir), así no saltan de tamaño según el largo del propio texto.
   5rem cubre con margen al más largo del grupo ("Cancelar", ~4.4rem). */
.modal-btn {
    min-width: 5rem;
}
.item-image-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.87rem;
    border: 0.06rem solid var(--color-border);
    border-radius: 0.31rem;
    padding: 0.3rem 0.5rem;
}
.item-image-row-name {
    flex: 1;
}
.item-image-thumbnail {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: cover;
    border-radius: 0.31rem;
    cursor: pointer;
    flex-shrink: 0;
}
.modal-image-lightbox-content {
    background-color: transparent;
    box-shadow: none;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
}
.modal-image-lightbox-content img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 0.31rem;
}
.modal-image-lightbox-content .close {
    color: white;
    text-shadow: 0 0 0.31rem rgba(0, 0, 0, 0.8);
}
.item-image-remove {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.31rem;
}
.invoiceLayoutBottom .divInvoiceDiscountContainer{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    font-size: 0.87rem;
    border: 0.06rem solid var(--color-border);
    border-radius: 0.31rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    gap: 0.3rem;
    padding: 0.3rem;
}
.invoiceLayoutBottom .divInvoiceDiscountText{
    font-size: 0.87rem;
    width: 50%;
}
.divInvoiceDiscountContainer input{
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    padding: 0.5rem;
    border: 0.06rem solid var(--color-border);
    border-radius: 0.25rem;
    box-sizing: border-box;
    resize: vertical;
}
.invoiceDiscountTypeSelect{
    font-size: 0.87rem;
    padding: 0.4rem;
    border: 0.06rem solid var(--color-border);
    border-radius: 0.25rem;
    cursor: pointer;
    width: auto;
}
.discountInputGroup{
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* 📱 Responsive: en pantallas chicas se apilan todas las cajas. El corte se
   subió de 40rem a 50rem: a 768px (tablet en portrait) la tabla de ítems no
   entraba en el 50% de ancho de .invoiceLayoutLeft y quedaba tapada por
   .invoiceLayoutRight — verificado con capturas reales en ese viewport. */
@media (max-width: 50rem) {
    .invoiceLayout {
        flex-direction: column;
    }

    .invoiceLayoutLeft {
        width: 100%;
    }

    .invoiceLayoutRight {
        flex-direction: column;
    }

    .invoiceLayoutTop,
    .invoiceLayoutBottom {
        flex: none;
    }
}
.closingAmountsContainer{
    display: grid;
    grid-template-columns: 1fr auto; /* 2 columnas: 1fr ocupa el espacio disponible, auto se ajusta al contenido*/
    row-gap: 0.3rem;
    column-gap: 1rem;
    align-items: center;
}
.closingAmountsContainer span:nth-child(odd) { /*odd es para los textos descriptivos */
    text-align: left;
}

.closingAmountsContainer span:nth-child(even) { /*even es para los valores */
    text-align: right;
    
}
.closingAmountsContainer span:last-child {/* para el monto total */
    font-size: 1.1rem;
    font-weight: bold;
}

/* ============================================================
   MÓDULO DE REPORTES
   ============================================================ */

.report-header h2 {
    margin: 0 0 1rem;
    color: var(--color-brand);
}

.report-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
    background-color: var(--color-container-bg);
    border: 0.06rem solid var(--color-border);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

.report-filters .filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.report-filters .filter-group label {
    margin: 0;
    font-size: 0.8rem;
    color: #666d5e;
}

.report-filters .filter-group input,
.report-filters .filter-group select {
    width: auto;
    padding: 0.4rem 0.5rem;
    font-size: 0.9rem;
}

#searchItemInput,
#searchQuoteInput,
#searchUserInput,
#searchShiftInput,
#searchSupplierInput,
#searchClientInput,
#searchAllInvoicesInput {
    width: 25rem;
    /* En mobile .report-filters pasa a columna y es más angosto que 25rem;
       sin esto el input desborda el contenedor. */
    max-width: 100%;
}

.report-filters .filter-actions {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
}

.btn-secondary {
    background-color: var(--color-button-secondary-bg);
    color: var(--color-button-secondary-text);
}

.btn-secondary:hover {
    background-color: var(--color-button-secondary-hover-bg);
}

.report-type-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.report-type-btn {
    background-color: var(--color-button-bg);
    color: var(--color-button-text);
    border: 0.06rem solid var(--color-border);
    padding: 0.4rem 0.9rem;
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background-color 0.15s;
}

.report-type-btn:hover {
    background-color: var(--color-button-hover-bg);
}

.report-type-btn.active {
    background-color: var(--color-button-hover-bg);
    color: var(--color-button-text);
}

.report-kpi-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.report-kpi-row .detail-card {
    flex: 1 1 10rem;
    text-align: center;
}

.report-kpi-row .detail-card h3 {
    font-size: 1.3rem;
}

.report-kpi-row .detail-card p {
    font-size: 0.85rem;
    color: #666d5e;
}

.report-chart-wrapper {
    background: white;
    border: 0.06rem solid var(--color-border);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
    max-height: 25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.report-chart-wrapper canvas {
    max-height: 23rem;
}

.report-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: #666d5e;
    font-size: 1rem;
}

.report-warning {
    /* Colores fijos, no personalizables. */
    background: #fff3cd;
    border: 0.06rem solid #f0ad1f;
    border-radius: 0.25rem;
    padding: 0.6rem 1rem;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    color: #856404;
}

.report-cell-warn {
    color: #856404;
    font-weight: 600;
}

.report-cell-danger {
    color: #721c24;
    font-weight: 600;
}

@media (max-width: 600px) {
    .report-filters {
        flex-direction: column;
        /* align-items: flex-end (heredado de la regla base) alinea cada
           filter-group a la derecha en modo columna; en mobile los queremos
           a la izquierda. */
        align-items: flex-start;
    }
    .report-filters .filter-group {
        /* Sin esto, cada filter-group se angosta a su propio contenido
           (shrink-to-fit) y el max-width:100% de #searchItemInput queda sin
           efecto, porque termina resolviendo contra un padre que ya creció
           para contener sus 25rem. */
        width: 100%;
    }
    .report-type-tabs {
        flex-direction: column;
    }
    .report-kpi-row {
        flex-direction: column;
    }
}

/* ============================================================
   MÓDULO DE AUDITORÍA
   ============================================================ */

#auditLogPagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1.25rem;
}

#auditLogPagination button {
    background-color: var(--color-button-bg);
    color: var(--color-button-text);
    border: none;
    padding: 0.62rem 1.25rem;
    margin: 0 0.62rem;
    border-radius: 0.31rem;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

#auditLogPagination button:disabled {
    /* Color gris para botones deshabilitados */
    background-color: #E5E7EB;
    color: #9CA3AF;
    cursor: not-allowed;
}

#auditLogPagination button:hover:not(:disabled) {
    background-color: var(--color-button-hover-bg);
}

#auditLogPagination #auditLogPageInfo {
    font-size: 1rem;
    margin: 0 0.62rem;
    color: var(--color-ink);
}