/* ===========================
   AJUSTES SELECT2
=========================== */
.select2-container--default .select2-selection--multiple {
    min-height: 39px !important;
    height: 39px !important;
    padding-top: 2px;
    padding-bottom: 2px;
    display: flex;
    align-items: center;
}

.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
    margin: 0;
    padding: 0;
    line-height: 28px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin-top: 0 !important;
}

/* ===========================
   PEDIDO VACÍO
=========================== */
#contenedorPedido.con-items #pedidoVacio {
    display: none !important;
}

/* ===========================
   DISPLAY POS (TOTAL / VUELTO)
=========================== */
input.form-control.total-display {
    max-width: 320px;
    height: 92px;
    font-size: 3.4rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-align: center;
    border-radius: 8px;
    line-height: 1;
}

/* Placeholder más discreto */
input.form-control.total-display::placeholder {
    font-size: 2rem;
    opacity: 0.4;
}

/* Vuelto deshabilitado */
.total-disabled {
    background: #f5f5f5;
    color: #6c757d;
}

/* Focus tipo POS */
input.form-control.total-display:focus {
    box-shadow: 0 0 0 4px rgba(0, 164, 106, 0.25);
    border-color: #00a46a;
}

/* =========================================================
   BADGES SUNAT - CENTRADOS / TONOS SUAVES Y FRIOS
========================================================= */

#tbllistado .badge-sunat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-width: 108px;
    height: 30px;
    padding: 0 14px;

    border: 1px solid transparent;
    border-radius: 999px;

    font-size: 10.5px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;

    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

/* Puntito */
#tbllistado .badge-sunat::before {
    content: "";
    width: 7px;
    height: 7px;
    min-width: 7px;
    border-radius: 50%;
    background-color: currentColor;
    opacity: 0.9;
}

/* ACEPTADO */
#tbllistado .badge-sunat.sunat-aceptado {
    color: #1f7a52;
    background-color: #e7f5ee;
    border-color: #a9d8bf;
}

/* NO ENVIADO */
#tbllistado .badge-sunat.sunat-pendiente {
    color: #9a6a16;
    background-color: #f8f1df;
    border-color: #dfc58a;
}

/* EN PROCESO */
#tbllistado .badge-sunat.sunat-proceso {
    color: #356ac3;
    background-color: #e9f0fb;
    border-color: #aac2ee;
}

/* ENVIADO */
#tbllistado .badge-sunat.sunat-enviado {
    color: #2b6f8c;
    background-color: #e8f4f8;
    border-color: #add0dd;
}

/* RECHAZADO / EXCEPCION */
#tbllistado .badge-sunat.sunat-rechazado {
    color: #a24a56;
    background-color: #fbecee;
    border-color: #e6bcc3;
}

/* ERROR */
#tbllistado .badge-sunat.sunat-error {
    color: #9a4d78;
    background-color: #f8ecf3;
    border-color: #e1bfd1;
}

/* ANULADO */
#tbllistado .badge-sunat.sunat-anulado {
    color: #5f6b7a;
    background-color: #eef2f6;
    border-color: #c8d1db;
}

/* NO APLICA */
#tbllistado .badge-sunat.sunat-no-aplica {
    color: #607080;
    background-color: #f1f4f7;
    border-color: #ced6df;
}

/* Centrado de toda la columna Estado SUNAT */
#tbllistado tbody td:nth-child(8),
#tbllistado thead th:nth-child(8) {
    text-align: center !important;
    vertical-align: middle !important;
}

/* Centrado vertical de todas las celdas */
#tbllistado tbody td {
    vertical-align: middle !important;
}

/* XML */
.badge-xml {
    font-size: 11px;
    padding: 3px 9px;
    border-radius: 10px;
    background: #eef3ff;
    color: #3b5bfd;
    border: 1px solid rgba(59, 91, 253, 0.25);
    text-decoration: none;
}

.badge-xml:hover {
    background: #e0e8ff;
    color: #1f3af5;
    text-decoration: none;
}

/* CDR */
.badge-cdr {
    font-size: 11px;
    padding: 3px 9px;
    border-radius: 10px;
    background: #e9f7ef;
    color: #1e7e34;
    border: 1px solid rgba(30, 126, 52, 0.25);
    text-decoration: none;
}

.badge-cdr:hover {
    background: #dcf3e6;
    color: #145c2a;
    text-decoration: none;
}

/* ================= MODAL CAJA CHICA ================= */

.modal-caja {
    border-radius: 14px;
    padding: 10px;
}

.modal-caja .modal-body {
    padding: 30px;
}

#montoApertura {
    font-size: 28px;
    height: 65px;
}

.modal-backdrop.show {
    opacity: 0.85;
}

/* =========================================================
   CAJA ACTUAL DEL USUARIO
   ========================================================= */

.caja-sesion-navbar {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    max-width: 340px;
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.caja-sesion-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 14px;
}

.caja-sesion-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.15;
}

.caja-sesion-content small {
    margin-bottom: 2px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.caja-sesion-content strong {
    display: block;
    max-width: 260px;
    overflow: hidden;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.caja-sesion-content strong.caja-inactiva {
    color: #ffe2e2;
}

/* Caja dentro del menú del usuario */

.usuario-caja-dropdown {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    text-align: left !important;
}

.usuario-caja-dropdown .usuario-nombre {
    margin-bottom: 5px;
    overflow: hidden;
    color: #34395e;
    font-size: 13px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.usuario-caja-dropdown .usuario-caja {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #00a46a;
    font-size: 11px;
    font-weight: 600;
}

.usuario-caja-dropdown .usuario-caja span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Adaptación móvil */

@media (max-width: 575.98px) {
    .caja-sesion-navbar {
        max-width: 145px;
        min-height: 36px;
        padding: 4px 8px;
        gap: 7px;
        border-radius: 9px;
    }

    .caja-sesion-icon {
        flex-basis: 26px;
        width: 26px;
        height: 26px;
        font-size: 12px;
    }

    .caja-sesion-content small {
        display: none;
    }

    .caja-sesion-content strong {
        max-width: 95px;
        font-size: 10px;
    }
}

@media (max-width: 390px) {
    .caja-sesion-navbar {
        max-width: 115px;
    }

    .caja-sesion-content strong {
        max-width: 68px;
    }
}

/* =========================================================
   NAVBAR COMPACTA DEL POS
   Reserva su altura real y desaparece mientras hay un modal.
   ========================================================= */
body.pos-navbar-layout .main-navbar {
    height: 52px !important;
    min-height: 52px;
    margin: 6px 8px 0 !important;
    padding: 0 10px !important;
    border-radius: 16px;
    box-shadow: 0 5px 18px rgba(15, 23, 42, .12);
}

body.pos-navbar-layout .main-navbar .nav-link.nav-link-lg {
    height: 46px;
    min-width: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px !important;
}

body.pos-navbar-layout .main-navbar .form-inline {
    min-width: 0;
    flex-wrap: nowrap;
}

body.pos-navbar-layout .main-navbar .navbar-nav {
    flex-wrap: nowrap;
}

body.pos-navbar-layout .main-navbar .navbar-nav.mr-3 {
    margin-right: 7px !important;
}

body.pos-navbar-layout .main-content {
    padding-top: 62px !important;
}

body.pos-navbar-layout.modal-open .main-navbar {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

body.pos-navbar-layout.modal-open .navbar-bg {
    opacity: 0;
}

/* =========================================================
   BOTÓN / MENÚ DE CAJA EN LA BARRA SUPERIOR
   ========================================================= */
.caja-sesion-dropdown {
    position: relative;
    flex: 0 0 auto;
}

button.caja-sesion-navbar {
    border: 1px solid rgba(255, 255, 255, .2);
    outline: 0;
    cursor: pointer;
}

button.caja-sesion-navbar:hover,
button.caja-sesion-navbar:focus,
button.caja-sesion-navbar:active,
.caja-sesion-dropdown.show button.caja-sesion-navbar {
    color: #ffffff;
    border-color: rgba(255, 255, 255, .34);
    background: rgba(255, 255, 255, .2);
    outline: 0;
    box-shadow: none;
}

.caja-sesion-menu {
    min-width: 220px;
    margin-top: 8px;
    padding: 12px;
    border: 0;
    border-radius: 13px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .18);
}

.caja-sesion-menu-label {
    margin-bottom: 8px;
    color: #8a9790;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.caja-sesion-menu-estado {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #2d3a33;
}

.caja-sesion-menu-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #278c46;
    background: #eaf7ee;
}

.caja-sesion-menu-estado strong {
    font-size: 13px;
    font-weight: 800;
}

.caja-sesion-menu-estado strong.caja-inactiva {
    color: #b44949;
}

/* En móvil solo queda el icono; al tocarlo se muestra el detalle. */
@media (max-width: 575.98px) {
    body.pos-navbar-layout .main-navbar {
        left: 5px !important;
        right: 0 !important;
        height: 50px !important;
        min-height: 50px;
        margin: 5px 6px 0 !important;
        padding: 0 5px !important;
        border-radius: 14px;
    }

    body.pos-navbar-layout .main-content {
        padding-top: 60px !important;
    }

    body.pos-navbar-layout .main-navbar .navbar-nav.mr-3 {
        margin-right: 3px !important;
    }

    body.pos-navbar-layout .main-navbar .nav-link.nav-link-lg {
        height: 44px;
        min-width: 38px;
        padding: 0 7px !important;
    }

    .caja-sesion-navbar {
        width: 38px;
        min-width: 38px;
        max-width: 38px;
        height: 38px;
        min-height: 38px;
        justify-content: center;
        gap: 0;
        padding: 0 !important;
        border-radius: 11px;
    }

    .caja-sesion-navbar .caja-sesion-icon {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
        font-size: 13px;
    }

    .caja-sesion-navbar .caja-sesion-content {
        display: none !important;
    }

    .caja-sesion-menu {
        min-width: 210px;
    }

    .sunat-navbar-link {
        min-width: 38px !important;
        height: 44px;
        padding-right: 6px !important;
        padding-left: 6px !important;
    }

    .main-navbar .nav-link-user {
        padding-right: 4px !important;
        padding-left: 4px !important;
    }
}

@media (max-width: 390px) {
    body.pos-navbar-layout .main-navbar .nav-link.nav-link-lg {
        min-width: 35px;
        padding-right: 5px !important;
        padding-left: 5px !important;
    }

    .caja-sesion-navbar {
        width: 36px;
        min-width: 36px;
        max-width: 36px;
    }
}

/* =========================================================
   TIQUEPOS · SISTEMA TIPOGRÁFICO GLOBAL
   ---------------------------------------------------------
   Objetivo:
   - Evitar mezcla visual entre Nunito y la fuente nativa.
   - Unificar inputs, selects, buscadores, tablas y modales.
   - Mantener intactas las fuentes de iconos.
   - No forzar tamaños para respetar responsive/iOS.
========================================================= */

:root {
    --tp-font-ui:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI Variable Text",
        "Segoe UI",
        Roboto,
        "Helvetica Neue",
        Arial,
        sans-serif;
}

/*
 * style.css define Nunito en body.
 * custom.css se usa como capa final para que toda la aplicación
 * comparta una sola tipografía de interfaz.
 */
html,
body {
    font-family: var(--tp-font-ui) !important;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/*
 * Controles nativos.
 * No se fija font-size para conservar los tamaños especiales de
 * cada vista y el 16px móvil que evita zoom automático en iOS.
 */
button,
input,
optgroup,
select,
textarea,
.form-control,
.custom-select,
.input-group-text,
.custom-file-label {
    font-family: var(--tp-font-ui) !important;
    font-style: normal;
    font-variant: normal;
    font-feature-settings: normal;
    letter-spacing: 0;
}

/* Texto ingresado y seleccionado: lectura uniforme. */
input:not([type="button"]):not([type="submit"]):not([type="reset"]),
select,
textarea,
.form-control,
.custom-select {
    font-weight: 400;
}

/* Placeholders: mismo dibujo tipográfico, sin pseudo-negrita. */
input::placeholder,
textarea::placeholder,
.form-control::placeholder {
    font-family: var(--tp-font-ui) !important;
    font-size: inherit;
    font-weight: 400 !important;
    font-style: normal;
    font-variant: normal;
    letter-spacing: 0 !important;
    text-transform: none !important;
    opacity: 1;
}

/* Compatibilidad con motores antiguos. */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    font-family: var(--tp-font-ui) !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    font-family: var(--tp-font-ui) !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* Plugins y componentes que no siempre heredan correctamente del body. */
.select2-container,
.select2-dropdown,
.select2-results,
.select2-search__field,
.selectric,
.selectric-items,
.dataTables_wrapper,
table.dataTable,
.dropdown-menu,
.modal,
.swal-modal,
.swal2-popup,
.tooltip,
.popover {
    font-family: var(--tp-font-ui) !important;
}

/* Select2: texto visual del control en peso normal. */
.select2-container--default
.select2-selection--single
.select2-selection__rendered,
.select2-container--default
.select2-selection--multiple
.select2-selection__rendered,
.select2-results__option,
.selectric .label,
.selectric-items li {
    font-family: var(--tp-font-ui) !important;
    font-weight: 400;
    letter-spacing: 0;
}

/*
 * Las familias de iconos se dejan explícitamente fuera del sistema UI.
 * Estas clases mantienen Font Awesome, Bootstrap Icons, Material Icons,
 * Feather/Ionicons según la librería que las renderiza.
 */
.fas,
.far,
.fab,
.fal,
.fa,
.bi,
.material-icons,
[class^="icon-"],
[class*=" icon-"] {
    font-synthesis: initial;
}



/* =========================================================
   TIQUEPOS · IDENTIDAD VISUAL CORPORATIVA
   Fuente de verdad del color de marca: #00a46a.
   Esta capa se carga al final y evita editar librerías externas.
========================================================= */
:root {
    --tp-brand: #00a46a;
    --tp-brand-rgb: 0, 164, 106;
    --tp-brand-hover: #008d5b;
    --tp-brand-hover-rgb: 0, 141, 91;
    --tp-brand-dark: #00754d;
    --tp-brand-active: #006b46;
    --tp-brand-soft: #ecfdf6;
    --tp-brand-soft-strong: #d7f7e9;
    --tp-brand-border: #adebd2;
    --tp-brand-shadow: rgba(0, 164, 106, .18);
}

.btn-primary,
.btn-success,
.bg-primary,
.bg-success,
.badge-primary,
.badge-success,
.dropdown-item.active,
.dropdown-item:active {
    border-color: var(--tp-brand) !important;
    background-color: var(--tp-brand) !important;
}

.btn-primary,
.btn-success,
.badge-primary,
.badge-success,
.dropdown-item.active,
.dropdown-item:active { color: #fff !important; }

.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus {
    color: #fff !important;
    border-color: var(--tp-brand-hover) !important;
    background-color: var(--tp-brand-hover) !important;
    box-shadow: 0 0 0 .18rem rgba(var(--tp-brand-rgb), .14) !important;
}

.btn-primary:active,
.btn-primary.active,
.btn-success:active,
.btn-success.active,
.show > .btn-primary.dropdown-toggle,
.show > .btn-success.dropdown-toggle {
    color: #fff !important;
    border-color: var(--tp-brand-active) !important;
    background-color: var(--tp-brand-active) !important;
}

.btn-outline-primary,
.btn-outline-success {
    color: var(--tp-brand-dark) !important;
    border-color: var(--tp-brand-border) !important;
    background-color: #fff !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-success:hover,
.btn-outline-success:focus {
    color: #fff !important;
    border-color: var(--tp-brand) !important;
    background-color: var(--tp-brand) !important;
    box-shadow: 0 0 0 .18rem rgba(var(--tp-brand-rgb), .12) !important;
}

.text-primary,
.text-success { color: var(--tp-brand) !important; }

.border-primary,
.border-success { border-color: var(--tp-brand) !important; }

.form-control:focus,
.custom-select:focus,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-selection--single:focus,
.select2-container--default .select2-selection--multiple:focus {
    border-color: var(--tp-brand) !important;
    box-shadow: 0 0 0 .18rem rgba(var(--tp-brand-rgb), .10) !important;
    outline: 0 !important;
}

button:focus-visible,
.btn:focus-visible { outline: none !important; }

.custom-control-input:checked ~ .custom-control-label::before,
.form-check-input:checked,
input[type="checkbox"]:checked,
input[type="radio"]:checked {
    border-color: var(--tp-brand);
    background-color: var(--tp-brand);
    accent-color: var(--tp-brand);
}

.page-item.active .page-link,
.pagination .page-item.active .page-link {
    color: #fff !important;
    border-color: var(--tp-brand) !important;
    background-color: var(--tp-brand) !important;
}

.page-link { color: var(--tp-brand-dark); }
.page-link:hover {
    color: var(--tp-brand-dark);
    border-color: var(--tp-brand-border);
    background: var(--tp-brand-soft);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: #fff !important;
    background-color: var(--tp-brand) !important;
}

.progress-bar { background-color: var(--tp-brand); }

.btn:not(.btn-link) {
    border-radius: 10px;
    font-weight: 400;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
    -webkit-tap-highlight-color: transparent;
}

.btn:not(.btn-link):hover:not(:disabled) { transform: translateY(-1px); }
.btn:not(.btn-link):active:not(:disabled) { transform: translateY(0); }

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected="true"] {
    color: #fff !important;
    background-color: var(--tp-brand) !important;
}

.main-sidebar .sidebar-menu li.active > a,
.main-sidebar .sidebar-menu li ul.dropdown-menu li.active > a,
.usuario-caja-dropdown .usuario-caja { color: var(--tp-brand) !important; }

@media (prefers-reduced-motion: reduce) {
    .btn, .form-control, .custom-select { transition: none !important; }
}


/* Evita que Stisla/SweetAlert recuperen el morado heredado en hover/focus. */
.theme-white .btn-primary:hover,
.theme-white .btn-primary:focus,
.theme-white .btn-primary:active,
.theme-white .btn-primary:focus:active,
.theme-white .btn-outline-primary:hover,
.theme-white .btn-outline-primary:focus,
.theme-white .btn-outline-primary:active,
.theme-white .btn-outline-primary:focus:active {
    color: #fff !important;
    border-color: var(--tp-brand-hover) !important;
    background-color: var(--tp-brand-hover) !important;
}

.swal-button.swal-button--confirm,
.swal2-confirm {
    color: #fff !important;
    border-color: var(--tp-brand) !important;
    background: var(--tp-brand) !important;
    box-shadow: 0 6px 16px rgba(var(--tp-brand-rgb), .16) !important;
}

.swal-button.swal-button--confirm:hover,
.swal2-confirm:hover {
    background: var(--tp-brand-hover) !important;
}