/* ==========================================================
   FacturacionAgs Pro — app.css
   Plantilla visual SB Admin 2 / Bootstrap 4 (misma apariencia que Transportes Lares)
   ========================================================== */

/* ══════════════════════════════════════════════════════════
   1. AUTH — páginas de login y registro
   ══════════════════════════════════════════════════════════ */

.bg-login-image {
    background: linear-gradient(135deg, #4e73df 0%, #224abe 100%);
    min-height: 400px;
    position: relative;
    overflow: hidden;
}
.bg-login-image::before {
    content: '\f570';   /* fa-file-invoice-dollar */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 9rem;
    color: rgba(255,255,255,0.85);
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
}

.bg-register-image {
    background: linear-gradient(135deg, #1cc88a 0%, #13855c 100%);
    min-height: 350px;
    position: relative;
    overflow: hidden;
}
.bg-register-image::before {
    content: '\f234';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 8rem;
    color: rgba(255,255,255,0.85);
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
}


/* ══════════════════════════════════════════════════════════
   2. AVATARES
   ══════════════════════════════════════════════════════════ */

.avatar-circle {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center; justify-content: center;
    font-weight: 800; font-size: 0.72rem;
    flex-shrink: 0;
    font-family: 'Nunito', sans-serif;
}

.avatar-circle-xl {
    width: 80px; height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center; justify-content: center;
    font-weight: 900; font-size: 1.6rem;
    font-family: 'Nunito', sans-serif;
}

.sidebar-footer-user {
    border-top: 1px solid rgba(255,255,255,0.15);
    margin-top: auto;
}

.sidebar-user-avatar {
    width: 32px; height: 32px;
    background: rgba(255,255,255,0.25);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.68rem; font-weight: 800;
    color: #fff; flex-shrink: 0;
}

.topbar-user-avatar {
    width: 32px; height: 32px;
    background: linear-gradient(135deg, #4e73df, #224abe);
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.7rem; font-weight: 800;
    color: #fff; font-family: 'Nunito', sans-serif;
}


/* ══════════════════════════════════════════════════════════
   3. SIDEBAR
   ══════════════════════════════════════════════════════════ */

.sidebar {
    display: flex;
    flex-direction: column;
}


/* ══════════════════════════════════════════════════════════
   4. BREADCRUMB
   ══════════════════════════════════════════════════════════ */

.breadcrumb {
    background-color: transparent;
    padding: 0; margin-bottom: 0;
    font-size: 0.85rem;
}

/* ══════════════════════════════════════════════════════════
   6. BADGES Y BOTONES EXTRA
   ══════════════════════════════════════════════════════════ */

.badge + .badge { margin-left: 3px; }

/* Badge Crítica — animación pulsante */
.badge-danger.prio-pulse {
    animation: badgePulse 1.6s infinite;
}
@keyframes badgePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(231,74,59,0.5); }
    50%       { box-shadow: 0 0 0 5px rgba(231,74,59,0); }
}

/* Botón extra pequeño */
.btn-xs {
    padding: 0.18rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1.4;
    border-radius: 0.3rem;
}


/* ══════════════════════════════════════════════════════════
   7. TABLAS
   ══════════════════════════════════════════════════════════ */

.table-sm th, .table-sm td { font-size: 0.82rem; }
.table td a.font-weight-bold:hover { text-decoration: underline; }

/* Número de serie — fuente monoespaciada */
.text-monospace {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace !important;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
}

/* ══════════════════════════════════════════════════════════
   8. MODALES
   ══════════════════════════════════════════════════════════ */

/* Colores de cabecera */
.modal-header.bg-primary { background-color: #4e73df !important; }
.modal-header.bg-success { background-color: #1cc88a !important; }
.modal-header.bg-info    { background-color: #36b9cc !important; }
.modal-header.bg-warning { background-color: #f6c23e !important; }
.modal-header.bg-danger  { background-color: #e74a3b !important; }

.modal-header .close.text-white { opacity: 0.8; }
.modal-header .close.text-white:hover { opacity: 1; }

.modal-footer.bg-light {
    background-color: #f8f9fc !important;
    border-top: 1px solid #e3e6f0;
}

/* Animación de entrada */
.modal.fade .modal-dialog {
    transform: translateY(-16px) scale(0.98);
    transition: transform 0.2s ease-out;
}
.modal.show .modal-dialog {
    transform: translateY(0) scale(1);
}

/* Validación */
.modal .is-invalid { border-color: #e74a3b; }
.modal .invalid-feedback {
    display: none; color: #e74a3b;
    font-size: 0.8rem; margin-top: 0.25rem;
}
.modal .is-invalid ~ .invalid-feedback { display: block; }

/* Alertas en modal */
.alert.alert-sm { padding: 0.5rem 0.75rem; font-size: 0.82rem; }

/* Spinner */
.spinner-border-sm { width: 0.9rem; height: 0.9rem; border-width: 0.15em; }

/* Nota interna */
.bg-warning-soft {
    background-color: #fff9e6;
    border-bottom: 1px solid #fcefc7;
}

/* Border left nota interna */
.border-left-warning { border-left: 4px solid #f6c23e !important; }

/* ══════════════════════════════════════════════════════════
   12. FOOTER
   ══════════════════════════════════════════════════════════ */

.sticky-footer { padding: 1rem 0; }


/* ══════════════════════════════════════════════════════════
   15. LOGO — Imágenes del logo en distintos contextos
   ══════════════════════════════════════════════════════════ */

/* Sidebar: logo con fondo transparente sobre sidebar oscuro */
.sidebar-logo-img {
    max-width: 158px;
    max-height: 58px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    padding: 4px 0;
}

/* Login / Registro: logo sobre fondo blanco — sin filtro */
.login-logo-img {
    max-width: 180px;
    max-height: 72px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* Reportes impresos: logo en encabezado de página */
.print-logo-img {
    max-height: 36pt;
    max-width: 160pt;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin-bottom: 4pt;
}

/* ══════════════════════════════════════════════════════════
   17. DATATABLES — Integración con SB Admin 2 / Bootstrap 4
   ══════════════════════════════════════════════════════════ */

/* ── Íconos de ordenamiento: solo uno, sin interferencia de FA ── */
table.dataTable thead th,
table.dataTable thead td {
    padding-right: 30px !important;
    position: relative;
}

table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after,
table.dataTable thead .sorting_asc_disabled::after,
table.dataTable thead .sorting_desc_disabled::after {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.65rem;
    opacity: 0.4;
}

table.dataTable thead .sorting::after      { content: "\f0dc"; }   /* fa-sort */
table.dataTable thead .sorting_asc::after  { content: "\f0de"; opacity: 0.9; color: #4e73df; } /* fa-sort-up */
table.dataTable thead .sorting_desc::after { content: "\f0dd"; opacity: 0.9; color: #4e73df; } /* fa-sort-down */

/* Ocultar el ::before que genera el doble ícono */
table.dataTable thead .sorting::before,
table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_desc::before,
table.dataTable thead .sorting_asc_disabled::before,
table.dataTable thead .sorting_desc_disabled::before {
    display: none !important;
    content: none !important;
}

/* ── Barra superior ── */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    margin-bottom: 0.75rem;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    font-size: 0.83rem;
    font-weight: 600;
    color: #6e707e;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Select de cantidad */
.dataTables_wrapper .dataTables_length select {
    display: inline-block !important;
    width: auto !important;
    height: 30px !important;
    padding: 0.2rem 1.8rem 0.2rem 0.5rem !important;
    font-size: 0.82rem !important;
    border: 1px solid #d1d3e2 !important;
    border-radius: 0.3rem !important;
    background-color: #fff !important;
    -webkit-appearance: auto !important;
    appearance: auto !important;
    box-shadow: none !important;
    /* quitar cualquier override del hd-dropdown */
    background-image: none !important;
}

/* Input de búsqueda */
.dataTables_wrapper .dataTables_filter input {
    display: inline-block !important;
    width: 200px !important;
    height: 30px !important;
    padding: 0.2rem 0.5rem !important;
    font-size: 0.82rem !important;
    border: 1px solid #d1d3e2 !important;
    border-radius: 0.3rem !important;
    background-color: #fff !important;
    box-shadow: none !important;
    outline: none;
    /* No usar hd-dropdown ni Semantic */
    -webkit-appearance: auto !important;
    appearance: auto !important;
    transition: border-color 0.15s;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: #bac8f3 !important;
    box-shadow: 0 0 0 0.15rem rgba(78,115,223,0.25) !important;
}

/* ── Info ── */
.dataTables_wrapper .dataTables_info {
    font-size: 0.8rem;
    color: #858796;
    padding-top: 0.5rem;
}

/* ── Paginación ── */
.dataTables_wrapper .dataTables_paginate {
    padding-top: 0.4rem;
}

/* Quitar el borde del grupo Bootstrap que genera el doble borde */
.dataTables_wrapper .dataTables_paginate .pagination {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

/* Cada botón: usar Bootstrap .page-link pero sin el borde del grupo */
.dataTables_wrapper .dataTables_paginate .page-item .page-link {
    padding: 4px 10px;
    font-size: 0.82rem;
    line-height: 1.5;
    border: 1px solid #d1d3e2 !important;
    border-radius: 0.3rem !important;
    color: #4e73df;
    background-color: #fff;
    cursor: pointer;
    text-decoration: none;
    box-shadow: none !important;
    outline: none;
    transition: background 0.1s, border-color 0.1s, color 0.1s;
}

.dataTables_wrapper .dataTables_paginate .page-item .page-link:hover {
    background-color: #eaecf4;
    border-color: #bac8f3 !important;
    color: #224abe;
}

.dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
    background-color: #4e73df;
    border-color: #4e73df !important;
    color: #fff;
    font-weight: 700;
}

.dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link {
    background-color: #f8f9fc;
    border-color: #e3e6f0 !important;
    color: #b7b9cc;
    cursor: default;
    pointer-events: none;
}

/* ══════════════════════════════════════════════════════════
   LOGO — recuadro blanco en el sidebar azul
   ══════════════════════════════════════════════════════════ */
.sidebar .sidebar-brand.sidebar-brand-logo {
    height: auto;
    padding: 0.85rem 0.75rem;
}
.sidebar-logo-wrap {
    display: inline-block;
    background: #fff;
    border-radius: 0.5rem;
    padding: 4px 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.sidebar-brand-logo .sidebar-logo-img {
    max-width: 150px;
    max-height: 72px;
    padding: 0;
}
/* Sidebar contraído (botón de flecha o pantallas chicas) */
.sidebar.toggled .sidebar-logo-wrap { padding: 3px 4px; }
.sidebar.toggled .sidebar-brand-logo .sidebar-logo-img { max-width: 64px; max-height: 40px; }
@media (max-width: 767.98px) {
    .sidebar .sidebar-logo-wrap { padding: 3px 4px; }
    .sidebar .sidebar-brand-logo .sidebar-logo-img { max-width: 64px; max-height: 40px; }
}

/* Login: logo más grande sobre fondo blanco */
.login-logo-img {
    max-width: 260px;
    max-height: 156px;
}

/* ══════════════════════════════════════════════════════════
   VISOR DE PDF (modal)
   ══════════════════════════════════════════════════════════ */
.visor-pdf-frame {
    display: block;
    width: 100%;
    height: 80vh;
    border: 0;
}
@media (max-width: 576px) {
    .visor-pdf-frame { height: 70vh; }
}
.visor-img-caja {
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    background: #343a40;
}
.visor-img-caja img { max-width: 100%; max-height: 100%; object-fit: contain; }
@media (max-width: 576px) {
    .visor-img-caja { height: 70vh; }
}

/* Lista con búsqueda (.select-buscable): el <select> original queda oculto debajo y sigue mandando el valor */
.sb-wrap { position: relative; }
.sb-wrap.sb-en-linea { display: inline-block; min-width: 220px; }
.sb-wrap .sb-nativo { position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; opacity: 0; pointer-events: none; }
.sb-boton { text-align: left; background-color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 1.75rem; cursor: pointer;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
            background-repeat: no-repeat; background-position: right .6rem center; background-size: 11px 11px; }
.sb-boton:disabled { background-color: #eaecf4; cursor: not-allowed; }
.sb-menu { width: 100%; min-width: 220px; max-width: 420px; padding: 0; z-index: 1060; }
.sb-lista { max-height: 260px; overflow-y: auto; }
.sb-lista .dropdown-item { white-space: normal; font-size: .85rem; padding: .35rem .75rem; }
.sb-lista .dropdown-item.sb-activo { background-color: #4e73df; color: #fff; }
.sb-lista .sb-vacio { font-size: .8rem; color: #858796; padding: .5rem .75rem; }


/* ══════════════════════════════════════════════════════════
   MULTIEMPRESA — empresa activa en la barra superior
   ══════════════════════════════════════════════════════════ */
.topbar-empresa {
    display: inline-flex; align-items: center;
    max-width: 280px;
    padding: .3rem .75rem;
    border: 1px solid #d1d3e2; border-radius: 2rem;
    background: #f8f9fc;
    color: #4e73df; font-weight: 700; font-size: .82rem;
}
.topbar-empresa-nombre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 576px) { .topbar-empresa { max-width: 150px; } }
.dropdown-empresas { min-width: 300px; max-height: 70vh; overflow-y: auto; }
.dropdown-empresas .dropdown-item { white-space: normal; padding-top: .5rem; padding-bottom: .5rem; }
.dropdown-empresas .dropdown-item.active { background-color: #eaecf4; color: #3a3b45; }
.dropdown-empresas .dropdown-item.active .text-gray-500 { color: #6e707e !important; }

.empresa-mini {
    width: 32px; height: 32px; border-radius: .4rem; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #4e73df, #224abe); color: #fff;
    font-weight: 800; font-size: .7rem;
}
.empresa-mini-lg { width: 44px; height: 44px; font-size: .9rem; }
.empresa-logo-mini { max-width: 44px; max-height: 32px; object-fit: contain; }
.empresa-logo-prev { max-width: 100%; max-height: 120px; object-fit: contain; }
.elegir-empresa { border-left: 4px solid transparent; }
.elegir-empresa:hover { border-left-color: #4e73df; }

/* Formularios: aviso de error visible también fuera de modales */
.invalid-feedback.d-block { font-size: .8rem; }
.custom-file-label::after { content: "Elegir"; }

/* Historial de cambios */
.historial .list-group-item { padding: .6rem 1rem; }
.historial ul li { list-style: disc; }

/* Opciones de catálogo que no aplican (se ocultan) */
option.ff-oculta { display: none; }

/* Campo fijado por una regla del SAT (no se puede cambiar, pero sí se envía) */
.ff-bloqueado { pointer-events: none; background-color: #eaecf4 !important; }

/* Panel izquierdo angosto (cerrado, o pantallas chicas): solo el avatar del usuario y títulos que no se desborden */
.sidebar.toggled .sidebar-footer-user .small { display: none; }
.sidebar.toggled .sidebar-footer-user > div { justify-content: center; }
.sidebar.toggled .sidebar-footer-user .sidebar-user-avatar { margin-right: 0 !important; }
.sidebar.toggled .sidebar-heading { font-size: .58rem; padding: 0 .25rem; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 767.98px) {
    .sidebar .sidebar-footer-user .small { display: none; }
    .sidebar .sidebar-footer-user > div { justify-content: center; }
    .sidebar .sidebar-footer-user .sidebar-user-avatar { margin-right: 0 !important; }
    .sidebar .sidebar-heading { font-size: .58rem; padding: 0 .25rem; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ══════════════════════════════════════════════════════════
   INVENTARIO
   ══════════════════════════════════════════════════════════ */
.serie-chip { font-size: .78rem; font-weight: 600; margin: 0 .2rem .25rem 0; padding: .3rem .45rem; }
a.serie-chip:hover { background-color: #eaecf4; text-decoration: none; }
.serie-opcion { margin-right: .9rem; margin-bottom: .25rem; }
.tabla-partidas td { vertical-align: top; }
.tabla-partidas tr.inv-series td { background: #f8f9fc; }
.tabla-partidas .inv-cant[readonly] { background-color: #eaecf4; }
.inv-series-lista { max-height: 180px; overflow-y: auto; }
.tipo-producto .custom-switch .custom-control-label { font-size: .95rem; }

/* Títulos con folio o serie: el monoespaciado conserva el tamaño del título y la etiqueta de estatus no crece */
h1 .text-monospace, .h3 .text-monospace { font-size: inherit !important; letter-spacing: 0; }
h1 .badge, .h3 .badge { font-size: .5em; vertical-align: middle; }

/* Buscador de productos con sugerencias (captura de inventario) */
.inv-buscador { position: relative; }
.inv-sugerencias { width: 100%; max-height: 360px; overflow-y: auto; padding: 0; margin-top: 2px; }
.inv-sugerencias .inv-sug-item { white-space: normal; padding: .5rem .9rem; border-bottom: 1px solid #f1f2f7; }
.inv-sugerencias .inv-sug-item.active, .inv-sugerencias .inv-sug-item:active { background-color: #eaecf4; color: #3a3b45; }
.inv-sugerencias mark { background-color: #fff3bf; }

/* Configuración → Correo: conversación con el servidor SMTP */
.smtp-registro {
    max-height: 340px; overflow: auto; padding: .75rem 1rem;
    font-size: .72rem; line-height: 1.45; white-space: pre-wrap; word-break: break-all;
    background: #2e2f3a; color: #d1d3e2; border-radius: 0;
}