/* ==========================
   POS CSS
   Crafters Software Solutions

========================== */
body{
    background:#f5f6fa;
    font-family:'Segoe UI',sans-serif;
}

/* ==========================
   SIDEBAR
========================== */

.sidebar{

    position:fixed;

    left:15px;
    top:15px;
    bottom:15px;

    width:280px;

    border-radius:24px;

    background:
    linear-gradient(
    180deg,
    #172235 0%,
    #111827 100%
    );

    border:1px solid rgba(255,255,255,.08);

    box-shadow:
    0 20px 40px rgba(0,0,0,.30),
    0 8px 16px rgba(0,0,0,.15);
	
	transform:translateX(-320px);

	z-index:1000;

	transition:.35s ease;
	
	padding-top:15px !important;

}

.sidebar-company-logo{

    width: 70px;
    height: 70px;

    object-fit: contain;

    display: block;

    margin: 0 auto 20px auto;

}

.logo-title {
    color: #fff;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 0px; /* Juntamos el título "POS CSS" con el subtítulo */
}

.logo {
    text-align: center;
	margin-top: 0;
    margin-bottom: 0px;
}

.sidebar-company-logo {
    width: 65px; 
    height: 65px;
    object-fit: cover; 
    display: block;
    /* Reducimos a 5px para pegar el logo al texto de POS CSS */
    margin: 0 auto 5px auto; 
    
    border-radius: 50%;
    border: 2px solid #2563eb; 
    box-shadow: 0 0 15px rgba(37, 99, 235, 0.45); 
    padding: 2px; 
    background-color: #172235; 
}

.logo-area{

    text-align:center;

}

.empresa-login{

    display:block;

    color:#6c757d;

    margin-top:0;
    margin-bottom:20px;

    font-size:18px;
    font-weight:500;

}

.login-footer{

    text-align:center;

    margin-top:25px;

    padding-top:15px;

    border-top:1px solid #e5e7eb;

    font-size:12px;

    color:#9ca3af;

    line-height:1.6;

}

.sidebar::before{

    content:"";

    position:absolute;

    top:0;
    left:0;
    right:0;

    height:120px;

    border-radius:24px 24px 0 0;

    background:
    linear-gradient(
    rgba(255,255,255,.06),
    transparent
    );

    pointer-events:none;

}

.sidebar h2,
.sidebar h3,
.sidebar h4{
    font-weight:700;
    letter-spacing:.8px;
}

.sidebar hr {
    border-color: rgba(255, 255, 255, .15);
    margin-top: 0px !important; /* Forzamos a que se pegue arriba */
    margin-bottom: 12px !important; /* Espacio hacia el botón Dashboard */
}

.sidebar .nav-link{
    color:#fff;

    border-radius:16px;

    margin-bottom:8px;

    padding:14px 18px;

    font-size:1.05rem;

    transition:all .25s ease;
	
	border:1px solid transparent;
}

.sidebar .nav-link i{
    font-size:1.15rem;
    width:24px;
}

.sidebar .nav-link:hover{

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.10);

    transform:translateX(6px);

}

.sidebar .nav-link.active{

    background:
    linear-gradient(
    90deg,
    #2563eb,
    #3b82f6
    );

    color:#fff !important;

    font-weight:700;

    border:1px solid rgba(255,255,255,.15);

    box-shadow:
    0 0 25px rgba(37,99,235,.45);

}

.sidebar a{
    transition:.25s ease;
}

.sidebar a:hover{
    transform:translateX(5px);
}

.main-content{
    margin-left:0;
    flex:1;
    min-height:0;
}

.logo-title {
    color: #fff;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 0;
    line-height: 1.1; /* Le quita el aire invisible arriba y abajo de las letras */
}

.logo-subtitle {
    color: rgba(255, 255, 255, .55);
    font-size: 0.9rem;
    margin-top: 2px !important;
    margin-bottom: 5px !important; /* Forzamos a que solo haya 5px de espacio abajo */
    padding-bottom: 0 !important;
    display: block;
}

.logo-area{
    padding:10px 5px;
}

.sidebar.show{
    transform:translateX(0);
}

.sidebar-clock{

    position:fixed;

    top:50px;
    right:60px;

    text-align:right;

    color:white;

    z-index:1101;

    opacity:0;

    transform:translateX(70px);

    transition:
    opacity .3s ease,
    transform .3s ease;

    pointer-events:none;

}

.sidebar-clock.show{

    opacity:1;

    transform:translateX(0);

}

#sidebarTime{

    font-size:54px;

    font-weight:700;

    line-height:1;

    text-shadow:
    0 4px 15px rgba(0,0,0,.35);

}

#sidebarDate{

    margin-top:8px;

    font-size:24px;

    font-weight:400;

    text-shadow:
    0 4px 15px rgba(0,0,0,.35);

}



/* ==========================
   CONTENIDO
========================== */

.container-fluid h2{
    font-weight:700;
}

.container-fluid p{
    color:#6c757d;
}

/* ==========================
   CARDS DASHBOARD
========================== */

.card{
    border:none;
    border-radius:18px;
    box-shadow:0 4px 12px rgba(0,0,0,.08);
    transition:.3s;
}

.card:hover{
    transform:translateY(-3px);
}

.card h3{
    font-weight:700;
}

.card h2{
    font-weight:700;
}

/* ==========================
   TABLAS
========================== */

.table{
    vertical-align:middle;
}

.table thead{
    background:#f8f9fa;
}

.table thead th{
    border-bottom:2px solid #dee2e6;
    font-weight:700;
}

.table tbody tr:hover{
    background:#f8fbff;
}

/* ==========================
   BOTONES
========================== */

.btn{
    border-radius:10px;
}

.btn-success{
    box-shadow:0 3px 8px rgba(25,135,84,.25);
}

.btn-primary{
    box-shadow:0 3px 8px rgba(13,110,253,.25);
}

.btn-danger{
    box-shadow:0 3px 8px rgba(220,53,69,.25);
}

/* ==========================
   FORMULARIOS
========================== */

.form-control,
.form-select{
    border-radius:10px;
}

.form-control:focus,
.form-select:focus{
    box-shadow:0 0 0 .2rem rgba(13,110,253,.15);
}

/* ==========================
   BADGES STOCK
========================== */

.estado-bajo{
    background:#dc3545;
    color:white;
    padding:4px 10px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
}

.estado-normal{
    background:#ffc107;
    color:#212529;
    padding:4px 10px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
}

.estado-completo{
    background:#198754;
    color:white;
    padding:4px 10px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
}

.estado-bajo,
.estado-normal,
.estado-completo{
    display:inline-block;
    margin-left:5px;
    vertical-align:middle;
}

.card-header{
    border-bottom:1px solid #e5e7eb;
    font-weight:600;
}

.card-header h5{
    margin:0;
    font-weight:600;
}

.filtro-stock{
    transition:all .2s ease;
}

.filtro-mov{

    transition:all .2s ease;

}

.filtro-activo{
    transform:scale(1.05);
    box-shadow:0 8px 20px rgba(0,0,0,.20);
}

.pagination .page-link{
    border-radius:10px;
    margin:0 3px;
}

.pagination .active .page-link{
    background:#2563eb;
    border-color:#2563eb;
}

/* ==========================
   TOPBAR
========================== */

.logo-toggle{

    width:55px;

    height:55px;

    object-fit:contain;

    cursor:pointer;

    transition:.3s ease;

}

.menu-launcher{
    cursor:pointer;
    transition:all .25s ease;
    display:inline-flex;
}

.menu-launcher:hover{
    transform:translateY(-2px);
}

.menu-launcher:hover .logo-toggle{
    filter:brightness(1.08);
}

.menu-launcher:hover .menu-brand{
    color:#2563eb;
}

.menu-launcher:hover .menu-guide{
    color:#2563eb;
}

.menu-launcher{
    display:inline-flex;
    align-items:flex-start;
    gap:12px;
    cursor:pointer;
    user-select:none;
    width:fit-content;
}

.logo-column{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.logo-toggle{
    width:55px;
}

.menu-brand{
    font-size:15px;
    font-weight:600;
    margin-top:15px;
}

.menu-guide{
    font-size:12px;
    font-weight:600;
    color:#6c757d;
}

.menu-launcher:hover .menu-guide{
    color:#2563eb;
}

/* ==========================
   SIDEBAR TOGGLE
========================== */

.sidebar,
.main-content{
    transition:all .35s ease;
}

.profile-name{

    font-size:16px;
    font-weight:700;
    color:#111827;
	margin-bottom:0;
}

.profile-role{

    font-size:12px;
    font-weight:500;
    color:#9ca3af;
	margin-top:-2px;

    letter-spacing:.3px;

}

/* ==========================
   GUIDE OVERLAY
========================== */

.overlay-menu{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    backdrop-filter:blur(2px);

    z-index:999;

    opacity:0;

    visibility:hidden;

    transition:.3s ease;

}

.overlay-menu.show{

    opacity:1;

    visibility:visible;

}

/* ==========================
   USER AVATAR
========================== */

.user-avatar{

    position:absolute;

    top:15px;
    right:-23px;

    width:60px;
    height:60px;

    border-radius:50%;

    overflow:hidden;

    background:#1da1f2;

    border:2px solid rgba(255,255,255,.15);

    color:white;

    font-size:25px;
    font-weight:700;

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;

    transition:all .35s ease;

    user-select:none;
    -webkit-user-select:none;

}

.sidebar-avatar-img{

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:50%;

    display:block;

}

.user-avatar,
.profile-menu,
.profile-menu a,
.logo-title,
.logo-subtitle,
.sidebar{

    user-select:none;

}

.user-avatar.clicked{

    animation:avatarClick .3s ease;

}

@keyframes avatarClick{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.25);
    }

    100%{
        transform:scale(1.12);
    }

}

.user-avatar:hover{

    transform:scale(1.12);
	
	box-shadow:
    0 0 25px rgba(29,161,242,.45);

}

.user-avatar.active{

    transform:scale(1.12);

    box-shadow:
    0 0 30px rgba(29,161,242,.60);

}

.profile-menu {
    position: absolute;
    top: 55px; 
    left: 100%;
    margin-left: 15px;
    width: 175px; 
    padding: 0; 
    background: white;
    border-radius: 12px; 
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    z-index: 9999;
    overflow: hidden; 
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    
    /* MAGIA AQUÍ: 
       1. transform-origin: top left ancla la animación a la esquina del avatar.
       2. Reducimos la escala (0.7) y lo acercamos al círculo (-15px) para ocultarlo. */
    transform-origin: top left;
    transform: scale(0.7) translateX(-15px) translateY(-15px);
    
    /* Transición de cierre rápido */
    transition: opacity .10s ease, transform .15s ease, visibility .10s; 
}

.profile-menu.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    
    /* Expande a su tamaño y posición real */
    transform: scale(1) translateX(0) translateY(0);
    
    /* Apertura con cubic-bezier para dar ese efecto orgánico de pequeño rebote */
    transition: opacity .25s ease, transform .35s cubic-bezier(0.175, 0.885, 0.32, 1.2);
}

@keyframes profilePop{

    0%{

        opacity:0;

        transform:
        translateY(-10px)
        scale(.90);

    }

    100%{

        opacity:1;

        transform:
        translateY(0)
        scale(1);

    }

}

/* ==========================
   AJUSTES MENÚ DE PERFIL
========================== */
.profile-header {
    padding: 10px 15px 6px 15px;
    color: #111827;
}

.profile-header small {
    color: #6b7280;
}

.profile-menu hr {
    margin: 0 !important; 
    border-top: 1px solid #e5e7eb;
    opacity: 1;
}

/* Le quitamos el espacio extra de arriba al primer botón para pegarlo a la línea */
.profile-menu a:first-of-type {
    margin-top: 0 !important;
    padding-top: 6px !important; /* Si quieres pegarlo aún más, puedes bajar este valor a 4px */
}

/* Aseguramos que los enlaces calculen el tamaño incluyendo el padding */
.profile-menu a {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 6px 15px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    text-decoration: none;
    color: #111827;
    transition: .15s ease;
    font-size: 0.98rem;
    width: 100% !important; /* Forzamos a ocupar todo el ancho */
    box-sizing: border-box !important; /* CRÍTICO: Evita que el padding genere huecos o desbordes */
}

/* Sombreado normal */
.profile-menu a:hover {
    background: #f3f4f6;
    color: #111827;
	transform: none !important;
	padding-left: 22px !important;
}

/* Sombreado de cerrar sesión perfecto de lado a lado */
.profile-menu a.text-danger:hover {
    background: #fee2e2 !important;
    color: #dc2626 !important;
	transform:none !important;
	padding-left: 22px !important;
}

/* Sombreado de cerrar sesión sin recortes en la izquierda */
.profile-menu a.text-danger:hover {
    background: #fee2e2 !important;
    color: #dc2626 !important;
}

/* perfil */

.perfil-card{

    text-align:center;
	
	min-height:auto;

}

.perfil-card .perfil-avatar{

    width:120px;
    height:120px;

    margin:auto;

    font-size:42px;

}

.perfil-card h4{

    margin-top:12px;

    margin-bottom:6px;

    font-size:32px;

    font-weight:700;

    text-align:center;

    padding:0;

}

.perfil-card .card-body{

    padding:20px 25px 15px 25px;

}

.perfil-card .username{

    color:#6b7280;

    font-size:18px;

    margin-bottom:0;

}

.perfil-card .role{

    color:#9ca3af;

    font-size:13px;

    text-transform:uppercase;

    letter-spacing:1px;

    margin-top:-2px;

}

.perfil-header-card{

    max-width:600px;

    margin:0 auto 25px auto;

}

.perfil-section{

    max-width:900px;

    margin:0 auto 25px auto;

}

/* ==========================
   PERFIL
========================== */

.perfil-avatar{

    width:140px;
    height:140px;

    margin:auto;

    border-radius:50%;

    background:#2563eb;

    color:white;

    font-size:36px;

    font-weight:700;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:
    0 10px 25px rgba(37,99,235,.30);
	
	overflow:hidden;

}

.perfil-foto{

    width:100%;
    height:100%;

    object-fit:cover;

    border-radius:50%;

}

/* ==========================
   TOPBAR
========================== */

.topbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;
	
	transition:opacity .25s ease;

}

.topbar-right{

    text-align:right;

    padding:8px 14px;

    background:rgba(255,255,255,.6);

    border-radius:12px;

    box-shadow:
    0 8px 20px rgba(0,0,0,.08);

    backdrop-filter:blur(10px);
	
	transition:all .25s ease;

}

.topbar-right:hover{

    transform:translateY(-2px);

    box-shadow:
    0 12px 25px rgba(0,0,0,.10);

}

.notification-badge{

    font-size:14px;

    font-weight:600;

    margin-bottom:4px;

}

#currentDate{

    font-size:12px;

    color:#6b7280;

    margin-bottom:3px;

}

#currentTime{

    font-size:18px;

    font-weight:700;

    line-height:1;

}

.perfil-foto{

    width:100%;
    height:100%;

    object-fit:cover;

    border-radius:50%;

}

.avatar-foto{

    width:100%;
    height:100%;

    object-fit:cover;

    border-radius:50%;

}

.perfil-avatar-container{

    position:relative;

    display:inline-block;

    cursor:pointer;

}

.avatar-overlay{

    font-size:28px;

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    border-radius:50%;

    background:rgba(0,0,0,.45);

    backdrop-filter:blur(2px);

    color:white;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:4px;

    opacity:0;

    transition:.25s ease;

    z-index:2;
	
	text-align:center;

}

.avatar-overlay small{

    font-size:12px;

    font-weight:600;

}

.avatar-overlay i{

    font-size:26px;

    margin-bottom:4px;

}

.perfil-avatar-container:hover .avatar-overlay{

    opacity:1;

}

/* ==========================
   FLOATING TOPBAR
========================== */

.topbar-floating{

    position:fixed;

    top:30px;
    left:15px;
    right:15px;

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    z-index:9999;

    opacity:0;
    visibility:hidden;

    transform:translateY(-20px);

    transition:
    opacity .25s ease,
    transform .25s ease;

    pointer-events:none;

}

.topbar-floating.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

    pointer-events:auto;

}

.floating-left,
.floating-right{

    background:rgba(255,255,255,.85);

    backdrop-filter:blur(12px);

    border-radius:16px;

    padding:10px 15px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.12);

}

.floating-right{

    text-align:right;

}

#currentTimeFloating{

    font-size:18px;

    font-weight:700;

    line-height:1;

}

#currentDateFloating{

    font-size:12px;

    color:#6b7280;

    margin-bottom:3px;

}

.crafters-signature{

    position:fixed;

    right:30px;

    bottom:30px;

    display:flex;

    align-items:center;

    gap:12px;

    background:rgba(0,0,0,.25);

    backdrop-filter:blur(10px);

    padding:10px 15px;

    border-radius:15px;

    z-index:1000;

}

.crafters-signature img{

    width:40px;
    height:40px;

    object-fit:contain;

}

.crafters-signature span{

    color:white;

    font-weight:600;

    text-shadow:
    0 2px 8px rgba(0,0,0,.50);

}

.crafters-signature:hover{

    opacity:1;

}

#resultadoProductos{

    position: absolute;

    top: 100%;

    left: 0;

    right: 0;

    z-index: 1050;

    max-height: 250px;

    overflow-y: auto;

    display: none;

    border-radius: 10px;

}

#resultadoProductos.show{

    display: block;

}

#resultadoProductos .list-group-item{

    cursor: pointer;
	transition: all .15s ease;

}

#resultadoProductos .list-group-item:hover{

    background-color: #f8f9fa;

    border-left: 4px solid #0d6efd;

}

.filtro-stock,
.filtro-mov,
.filtro-proveedor,
.filtro-compra,
.filtro-venta,
.filtro-cotizacion{

    transition:all .2s ease;

}

.filtro-cliente{
	
	transition:all .2s ease;
}

.filtro-fecha{

    transition:
        transform .20s ease,
        box-shadow .20s ease;

}

.filtro-activo-fecha{

    transform:translateY(-2px) scale(1.05);

    box-shadow:
        0 8px 20px rgba(0,0,0,.20);

}

.filtro-activo{

    transform:scale(1.05);

    box-shadow:
    0 8px 20px rgba(0,0,0,.20);

}

.btn-ver{
    background:#0d6efd;
    border-color:#0d6efd;
    color:#fff;
    box-shadow:0 0 12px rgba(13,110,253,.35);
    transition:all .20s ease;
}

.btn-ver:hover{
    background:#0d6efd;
    border-color:#0d6efd;
    color:#fff;

    transform:translateY(-2px) scale(1.05);

    box-shadow:0 0 18px rgba(13,110,253,.60);
}

.btn-pdf{
    background:#212529;
    border-color:#212529;
    color:#fff;
    box-shadow:0 0 12px rgba(33,37,41,.30);
    transition:all .20s ease;
}

.btn-pdf:hover{
    background:#212529;
    border-color:#212529;
    color:#fff;

    transform:translateY(-2px) scale(1.05);

    box-shadow:0 0 18px rgba(33,37,41,.55);
}

.btn-devolucion{
    background:#ffc107;
    border-color:#ffc107;
    color:#212529;
    box-shadow:0 0 12px rgba(255,193,7,.35);
    transition:all .20s ease;
}

.btn-devolucion:hover{
    background:#ffc107;
    border-color:#ffc107;
    color:#212529;

    transform:translateY(-2px) scale(1.05);

    box-shadow:0 0 18px rgba(255,193,7,.60);
}

/* ==========================================
   MODAL DETALLE COMPRA
========================================== */
.detalle-productos-scroll{

    max-height:200px;

    overflow-y:auto;

}

.detalle-productos-scroll thead th{

    position:sticky;

    top:0;

    background:#f8f9fa;

    z-index:10;

}

.detalle-pagos-scroll{

    max-height:110px;

    overflow-y:auto;

}

.detalle-pagos-scroll thead th{

    position:sticky;

    top:0;

    background:#f8f9fa;

    z-index:10;

}

#detalleTotal{

    font-size:2.3rem;

    font-weight:700;
	
	letter-spacing:-1px;

}

#modalDetalleCompra .modal-dialog{

    max-width:1000px;
	
	height:500px;

}

#modalDetalleCompra .modal-content{

    border-radius:14px;

}

.tabla-totales{

    width:100%;

}

.tabla-totales td,
.tabla-totales th{

    border:none;

    padding:8px 0;

}

.tabla-totales tr.total-row{

    border-top:2px solid #ced4da;

}

.tabla-totales tr.total-row th,
.tabla-totales tr.total-row td{

    padding-top:18px;

}

/* ==========================
   SIDEBAR 2.0
========================== */

/* Asegura que la flecha sea simétrica */
.sidebar-arrow {
    transition: transform 0.3s ease !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

/* Cuando el menú se expande, Bootstrap pone aria-expanded="true" en el toggle */
.sidebar-toggle[aria-expanded="true"] .sidebar-arrow {
    transform: rotate(180deg) !important;
}


.sidebar-toggle{

    transition:
        background-color .20s ease,
        color .20s ease;

}

.sidebar-toggle.open{

    background:rgba(255,255,255,.08);

    border-radius:12px;

}

/* Sombreado del padre cuando un hijo está activo */
.sidebar-toggle.active-parent {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 3px solid rgba(37,99,235,.45) !important;
}

/* Ajuste de submenús */
.sidebar-submenu .nav-link {
    padding-top: 8px !important;    /* Menos espacio vertical */
    padding-bottom: 8px !important; /* Menos espacio vertical */
    padding-left: 30px !important;  /* Menos a la derecha */
    font-size: 0.95rem !important;  /* Tamaño un poco más grande que el anterior */
    margin-bottom: 2px !important;  /* Más compactos */
}

.header-logo-cell { 
    width: 20%; 
    vertical-align: middle; 
    text-align: left; 
}
.header-logo { 
    max-width: 120px; 
    max-height: 75px; 
    display: block; 
}