:root {
    --var-color-2: #050C9C;
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.form-check-input[type="radio"] {
    border: 2px solid #6c757d;
}

.form-check-input[type="radio"]:checked {
    border-color: #1B84FF;
    background-color: #1B84FF;
}

html {
  position: relative;
  min-height: 100%;
}

body {
    margin-bottom: 60px;
}

.poppins-regular {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.jersey-15-regular {
    font-family: "Jersey 15", sans-serif;
    font-weight: 400;
    font-style: normal;
}

#logo-factura-image,
#contenedorLogoCuentaFactura {
    border-radius: .475rem;
    display: inline-block;
    background-color: #2162D1;
    width: 100px;
    height: 100px;
}

.logo-emision-factura > h1,
.logoCuentaFactura > h1 {
    color: #ffffff;
    font-size: 30px;
    margin: 0;
}

.logo-emision-factura,
.logoCuentaFactura {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.federada-cont .cuenta-federada {
    position: relative;
    height: auto;
    align-self: start;
}


#imgusuario {
    width: 50px;
    height: 50px;
    background: #2162D1;
    border-radius: .475rem;
}

.elegirCuenta-inicial {
    font-size: 20px;
    font-weight: bold;
    color: #ffffff;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pointer {
    cursor:pointer;
}

@media print {
    body {
        visibility: hidden;
    }

    .to-print {
        visibility: visible;
        /*position: absolute;
        top: 0;
        left: 0;*/
    }
}

.swal2-html-container {
    max-height: 300px !important;
}

/* Forzar tema claro en SweetAlert2 — evita el fondo negro
   cuando el OS del usuario tiene modo oscuro activado */
.swal2-popup {
    background-color: #fff !important;
    color: #212529 !important;
}

.swal2-title {
    color: #212529 !important;
}

.swal2-html-container,
.swal2-content {
    color: #545454 !important;
}

.custom-dz-filename:not(:hover),
.custom-dz-filename:hover {
    overflow: hidden;
    text-overflow: unset;
}

.custom-dz-filename:not(:hover) span,
.custom-dz-filename:hover span {
    background-color: transparent !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    max-width: 100% !important;
    border: none !important;
    line-height: 1.5 !important;
}

::-ms-reveal {
    display: none;
}

table.dataTable {
    border-collapse: collapse !important;
}

table.table.dataTable.table-striped > tbody > tr:nth-of-type(2n+1) > * {
    box-shadow: none !important;
    background-color: rgba(249, 249, 249, 0.75) !important;
}

table.dataTable.table-hover > tbody > tr:hover > * {
    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-hover), .050) !important;
}


table.dataTable tr.selected,
table.dataTable tr.selected td {
    color: inherit !important;
    background-color: none !important;
    box-shadow: none !important;
}

.dt-column-header:has(.form-check-input) {
    gap: 0 !important;
    justify-content: start !important;
}

#app-sidebar-logo-default {
    max-width: 173px;
    height: auto;
    justify-self: center;
}

#app-sidebar-logo-minimize {
    max-width: 60px;
    height: auto;
}

#logo-landing {
    max-width: 250px;
    width: auto;
    height: auto;
}

#login-sidebar {
    background: linear-gradient(145deg, #0d2a8a 0%, #1549c0 45%, #1040b0 75%, #0a2070 100%);
    background-position: left top;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

#login-sidebar::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -120px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    pointer-events: none;
}

#login-sidebar::after {
    content: '';
    position: absolute;
    bottom: -80px;
    left: -80px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    pointer-events: none;
}

#config-inicial-bg {
    background: url('/media/bg/background.jpg');
    background-blend-mode: overlay;
    background-size: cover;
}

.paso-inicio {
    width: 220px;
    height: 200px;
    background-color: #F5F6F6;
}

/*Media query para 1800px en adelante*/
@media (min-width: 1600px) and (max-width: 1900px) {
    .paso-inicio {
        width: 250px;
        height: 230px;
    }
}

@media (min-width: 1901px) {
    .paso-inicio {
        width: 200px;
        height: 180px;
    }
}

.border-animado {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, var(--bs-primary) 50%, transparent 50%), linear-gradient(90deg, var(--bs-primary) 50%, transparent 50%), linear-gradient(0deg, var(--bs-primary) 50%, transparent 50%), linear-gradient(0deg, var(--bs-primary) 50%, transparent 50%);
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-size: 8px 2px, 8px 2px, 2px 8px, 2px 8px;
    background-position: 0% 0%, 100% 100%, 0% 100%, 100% 0px;
    border-radius: 5px;
    padding: 10px;
    animation: dash 10s linear infinite;
}

@keyframes dash {
    to {
        background-position: 100% 0%, 0% 100%, 0% 0%, 100% 100%;
    }
}

#iframePac {
    width: 100%;
    height: 500px;
    border: none;
}

.modal-backdrop {
    z-index: 109 !important;
}

.app-sidebar .menu .menu-item.show > .menu-link .menu-icon i {
    color: #FFF !important;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-icon, [data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-icon .svg-icon, [data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-icon i {
    color: #050C9C !important;
}


[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.here > .menu-link .menu-icon, [data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.here > .menu-link .menu-icon .svg-icon, [data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.here > .menu-link .menu-icon i {
    color: #FFF !important;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.here > .menu-link .menu-title {
    color: #050C9C !important;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link {
    color: #050C9C !important;
}


    [data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-title {
        color: #050C9C !important;
    }

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.hover:not(.here) > .menu-link:not(.disabled):not(.active):not(.here) .menu-arrow:after, [data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-arrow:after {
    background-color: var(--bs-primary) !important;
}


[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item:hover > .menu-link .menu-title {
    color: var(--bs-primary) !important;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item:hover > .menu-link .menu-bullet .bullet {
    background-color: var(--bs-primary) !important;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item:hover .menu-link {
    color: var(--bs-primary) !important;
}


.menu-item .menu-link .menu-icon {
    width: 4rem !important;
}

.app-header {
    border-bottom: solid 1px #D2D4DB !important;
    background-color: #FFF !important;
}

.app-footer {
    border-top: solid 1px #D2D4DB !important;
    background-color: #FFF !important;
}

.app-content {
    background-color: #F5F6F6;
}

.app-toolbar {
    background-color: #F5F6F6 !important;
}

.app-sidebar {
    background-color: #FFF !important;
    background-size: auto;
}

.here .menu-icon {
    background-color: var(--var-color-2);
    color: #FFF !important;
    padding: 8px 5px;
    border-radius: 12px;
}

.app-sidebar .btn-custom {
    color: #FFF !important;
    background-color: rgba(7, 20, 55, .8) !important;
}

#kt_app_root {
    /* clip (no hidden): overflow-x hidden fuerza overflow-y a "auto", lo que convertía
       a este div en un scroller interno y dejaba a la página sin scroll vertical
       (p. ej. /Admin/Emisores no bajaba). clip recorta igual sin crear scroll context. */
    overflow-x: clip;
}

.card .card-header .card-title, .card .card-header .card-title .card-label {
    /* font-size: 1.5rem; */
}

.menu-sub-accordion {
    margin-left: 40px;
}

.app-content {
    background-color: #F5F6F6;
}

.app-root {
    background-color: #F5F6F6 !important;
}

.app-wrapper {
    margin-left: 0px;
}

.cuadro {
    width: 100%;
    height: 120px;
    border-radius: 10px;
    padding: 23px;
    text-align: center;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
}

    .cuadro h3 {
        color: #FFF;
        font-size: 24px;
        margin: 0;
        margin-bottom: 8px;
    }

    .cuadro div {
        color: #FFF;
    }

.cuadroverde {
    background-color: #3572EF;
}

.cuadrorojo {
    background-color: #3ABEF9;
}

.cuadroazul {
    background-color: #2162D1;
}

.cuadromora {
    background-color: #050C9C;
}

.cuadrito {
    width: 25px;
    height: 25px;
    float: left;
    margin-top: 8px;
}

.titcuadrito {
    height: 25px;
    float: left;
    margin-left: 15px;
    margin-top: 8px;
}

.qtycuadrito {
    height: 25px;
    float: left;
    margin-left: 15px;
    font-size: 25px;
    font-weight: bold;
}


.cuadritoingreso {
    background-color: #008FFB;
}

.cuadritoegreso {
    background-color: #00E396;
}

.cuadritonomina {
    background-color: #FEB019;
}

.cuadritoretencion {
    background-color: #FEB019;
}

.cuadritopago {
    background-color: #FF4560;
}

.cuadritotraslado {
    background-color: #775DD0;
}

.img-dinamica {
    opacity: 0;
}

/* ── Dashboard Inicio: tarjetas KPI ─────────────────────────────────────── */
.kpi-card {
    background: #fff;
    border: 1px solid #EEF0F4;
    border-radius: 12px;
    padding: 1rem 1.1rem;
    height: 100%;
}

.kpi-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.kpi-label {
    font-size: .8rem;
    color: #6B7280;
    font-weight: 500;
}

.kpi-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
}

.kpi-trend {
    font-size: .72rem;
    color: #9CA3AF;
    min-height: 14px;
}

.kpi-icon-ingreso  { background: #E1F5EE; color: #0F6E56; }
.kpi-icon-egreso   { background: #FAECE7; color: #993C1D; }
.kpi-icon-productos{ background: #E6F1FB; color: #185FA5; }
.kpi-icon-clientes { background: #EEEDFE; color: #534AB7; }
.kpi-icon-timbres  { background: #FAEEDA; color: #854F0B; }
.kpi-icon-csd      { background: #FBEAF0; color: #993556; }

/* ── Dashboard Inicio: leyenda de "Emisión de comprobantes" ─────────────── */
/* Número primero (grande/negrita), etiqueta después (chica/secundaria) —
   invierte la jerarquía que tenía el bloque original (etiqueta grande, qty chica). */
.leyenda-comprobantes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 28px;
}

.leyenda-num {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.leyenda-label {
    font-size: .78rem;
    color: #6B7280;
    display: flex;
    align-items: center;
    gap: 6px;
}

.leyenda-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

/* Paleta sin colisiones (antes Nómina y Retención compartían #FEB019) */
.leyenda-color-ingreso   { color: #0F6E56; }
.leyenda-color-egreso    { color: #993C1D; }
.leyenda-color-nomina    { color: #534AB7; }
.leyenda-color-retencion { color: #854F0B; }
.leyenda-color-pago      { color: #185FA5; }
.leyenda-color-traslado  { color: #993556; }

.leyenda-dot.leyenda-color-ingreso   { background: #1D9E75; }
.leyenda-dot.leyenda-color-egreso    { background: #D85A30; }
.leyenda-dot.leyenda-color-nomina    { background: #534AB7; }
.leyenda-dot.leyenda-color-retencion { background: #EF9F27; }
.leyenda-dot.leyenda-color-pago      { background: #378ADD; }
.leyenda-dot.leyenda-color-traslado  { background: #D4537E; }

/* Tipos sin movimiento en el periodo: presentes pero atenuados */
.leyenda-item.leyenda-cero { opacity: .35; }

/* ── Dashboard Inicio: lenguaje visual doc2sign (mismo que el panel admin) ── */
.dash-inicio h2 { color: #1E3A66; }

.dash-inicio .card { border-radius: 14px; border: 1px solid #EEF0F4; box-shadow: 0 1px 2px rgba(16,24,40,.04); }

.dash-inicio .btn-navy { background: #1E3A66; color: #fff; border-radius: 999px; font-weight: 600; }
.dash-inicio .btn-navy:hover { background: #16294A; color: #fff; }

.dash-inicio .btn-pill-light { background: #EEF4FF; color: #1E3A66; border: 1px solid #D6E2FA; border-radius: 999px; font-weight: 600; }
.dash-inicio .btn-pill-light:hover { background: #DDE9FD; color: #16294A; }

.dash-inicio .kpi-card { transition: box-shadow .15s ease; }
.dash-inicio .kpi-card:hover { box-shadow: 0 4px 14px rgba(16,24,40,.06); }

/* Notificaciones más compactas: franja delgada, icono contenido */
.dash-inicio .alert { padding: .7rem 1.1rem; border-radius: 12px; }
.dash-inicio .alert > i { font-size: 1.4rem; }

/* Chips de la bandeja: pill con borde suave y mejor contraste */
.dash-inicio .chip-atencion { border-radius: 999px; font-weight: 600; border: 1px solid rgba(0,0,0,.06); }

/* ===== Sidebar text color fix (dark-sidebar theme override) ===== */
/* Metronic dark-sidebar pone #f5f5f5 (blanco) en .here/.show/.hover/.active
   — invisible sobre fondo blanco. Se fuerza navy en todos los estados. */
.app-sidebar .menu-title {
    color: #050C9C !important;
    font-size: 0.875rem;
    letter-spacing: 0.01em;
}

/* ===== Timbrame Custom SVG Icons ===== */
.tmb-icon {
    width: 22px;
    height: 22px;
    display: inline-block;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: middle;
    transition: stroke 0.15s ease;
}

/* ===== Sidebar icon container ===== */
.menu-item .menu-link .menu-icon {
    width: 2.75rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 2.75rem !important;
}

/* Active icon pill */
.here .menu-icon {
    background-color: var(--var-color-2);
    padding: 7px 6px;
    border-radius: 10px;
}

/* Override old large bootstrap icon sizes inside sidebar */
.app-sidebar .menu .menu-item .menu-link .menu-icon i.bi {
    font-size: 1.2rem !important;
}

/* ===== Sidebar item transitions ===== */
.app-sidebar .menu .menu-item .menu-link {
    border-radius: 8px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* ===== Sidebar smooth collapse ===== */
.app-sidebar {
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Metronic maneja el opacity del menu-title con :not(:hover) para el hover-reveal.
   No agregar opacity:0 aquí — rompería ese mecanismo. */

/* ===== Sidebar section dividers ===== */
.app-sidebar .menu .menu-item + .menu-item {
    margin-top: 1px;
}

/* Tooltip for collapsed sidebar items */
[data-kt-app-sidebar-minimize="on"] .app-sidebar .menu-item[title]:hover::after {
    content: attr(data-title);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    background: #1e293b;
    color: #fff;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.78rem;
    white-space: nowrap;
    z-index: 999;
    pointer-events: none;
}

/* ===== Mobile / Responsive fixes (≤575px) ===== */
@media (max-width: 575.98px) {
    /* Modals — prevent overflow on small screens */
    .modal-dialog {
        max-width: 95vw !important;
        margin: 0.5rem auto !important;
    }

    /* Dashboard "Primeros pasos" nav pills */
    .paso-inicio {
        width: 100% !important;
        height: auto !important;
        min-height: 80px;
    }

    /* Login card width fix (.w-lg-500px Metronic class) */
    .w-lg-500px {
        width: 100% !important;
        max-width: 100% !important;
    }
}