/*=======================================================
TEMA DE LA MARCA MYQUICKSALES

El verde azulado (#008080) es el del logo. Se pisan las reglas del
skin-blue de AdminLTE que pintan el header y el menu, y las de AdminLTE que
usan su azul (#3c8dbc) en botones, cajas, pestanas y select2.

Los logos del menu son blancos, por eso el header lleva el color de la
marca de fondo.
=======================================================*/
:root{
    --marca-primario: #008080;
    --marca-oscuro: #006666;
    --marca-mas-oscuro: #005959;
}

/* Header */
.skin-blue .main-header li.user-header{ background-color: var(--marca-primario); }
.skin-blue .main-header .logo{ background-color: var(--marca-oscuro); }
.skin-blue .main-header .logo:hover,
.skin-blue .main-header .navbar .sidebar-toggle:hover,
.skin-blue .main-header .navbar .dropdown-menu li a:hover{ background-color: var(--marca-mas-oscuro); }

/* Menu lateral claro, distinto del oscuro de AdminLTE: fondo blanco e items
   en forma de pastilla. Las margenes y el redondeo solo van con el menu
   expandido; colapsado, AdminLTE despliega el texto al lado del icono y
   necesita el item a todo lo ancho. */
.skin-blue .wrapper,
.skin-blue .main-sidebar,
.skin-blue .left-side{ background-color: #ffffff; }
.skin-blue .main-sidebar{ border-right: 1px solid #e3ecec; }
.skin-blue .sidebar a{ color: #3d5252; }
.skin-blue .sidebar-menu>li>a{ border-left: 0; font-weight: 600; }
.skin-blue .sidebar-menu>li:hover>a,
.skin-blue .sidebar-menu>li.menu-open>a{ color: var(--marca-oscuro); background: #eef6f6; }
.skin-blue .sidebar-menu>li.active>a{ color: #ffffff; background: var(--marca-primario); }
.skin-blue .sidebar-menu>li>.treeview-menu{ margin: 0; background: #f6fafa; }
.skin-blue .sidebar-menu .treeview-menu>li>a{ color: #5f7373; }
.skin-blue .sidebar-menu .treeview-menu>li.active>a,
.skin-blue .sidebar-menu .treeview-menu>li>a:hover{ color: var(--marca-primario); }
body:not(.sidebar-collapse) .sidebar-menu>li>a{ margin: 3px 10px; border-radius: 10px; }
body:not(.sidebar-collapse) .sidebar-menu>li>.treeview-menu{ margin: 0 10px; border-radius: 10px; }
.sidebar-mini.sidebar-collapse .sidebar-menu>li:hover>.treeview-menu{ box-shadow: 4px 6px 16px rgba(0,0,0,.12); }

/* Botones */
.btn-primary{ background-color: var(--marca-primario); border-color: var(--marca-oscuro); }
.btn-primary:hover, .btn-primary:focus, .btn-primary.focus,
.btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary,
.btn-primary:active:hover, .btn-primary.active:hover,
.btn-primary:active:focus, .btn-primary.active:focus{
    background-color: var(--marca-oscuro); border-color: var(--marca-mas-oscuro);
}

/* Lo demas de AdminLTE que usa el azul */
.form-control:focus,
.select2-container--default.select2-container--open,
.select2-container--default .select2-selection--multiple:focus{ border-color: var(--marca-primario); }
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--single{ border-color: var(--marca-primario) !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-selection--multiple .select2-selection__choice,
.progress-bar-light-blue, .progress-bar-primary{ background-color: var(--marca-primario); }
.box.box-primary,
.nav-tabs-custom>.nav-tabs>li.active,
.nav-tabs-custom.tab-primary>.nav-tabs>li.active,
.nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus{ border-top-color: var(--marca-primario); }
.nav-stacked>li.active>a, .nav-stacked>li.active>a:hover{ border-left-color: var(--marca-primario); }
.box.box-solid.box-primary{ border-color: var(--marca-primario); }
.box.box-solid.box-primary>.box-header{ background: var(--marca-primario); }
.bg-light-blue, .label-primary, .modal-primary .modal-body{ background-color: var(--marca-primario) !important; }
.text-light-blue{ color: var(--marca-primario) !important; }

/* Login: degradado de la marca en vez de foto */
.login-page, .register-page{ background: linear-gradient(135deg, #003d3d, var(--marca-primario)); }
.login-page #back{ background: none; }

/* Fuente de la marca (la carga plantilla.php con la clave "fuente" de
   marca.json). AdminLTE la fija en body, titulos y el logo del header. */
body,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.main-header .logo{ font-family: 'Nunito', 'Helvetica Neue', Arial, sans-serif; }

/* Cajas, botones y ventanas: esquinas redondeadas y sombra suave en vez del
   borde superior de color de AdminLTE */
.content-wrapper{ background-color: #f3f7f7; }
.box{ border-top: 0; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,60,60,.07); }
.box>.box-header{ border-radius: 12px 12px 0 0; }
.btn{ border-radius: 8px; }
.modal-content{ border-radius: 12px; overflow: hidden; }
.login-box-body{ border-radius: 14px; box-shadow: 0 12px 32px rgba(0,0,0,.25); }

/* Tablero de inicio (vistas/marcas/myquicksales/modulos/inicio/tablero.php) */
.mqs-tablero{ padding: 20px 24px; }
.mqs-saludo{
    display: flex; align-items: center; justify-content: space-between;
    padding: 26px 30px; margin-bottom: 26px; border-radius: 16px; color: #ffffff;
    background: linear-gradient(120deg, var(--marca-mas-oscuro), var(--marca-primario));
    box-shadow: 0 8px 24px rgba(0,80,80,.18);
}
.mqs-saludo h1{ margin: 2px 0 4px; font-size: 30px; font-weight: 800; }
.mqs-saludo-fecha{ margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; opacity: .8; }
.mqs-saludo-texto{ margin: 0; font-size: 16px; opacity: .9; }
.mqs-saludo-icono{ font-size: 64px; opacity: .25; }
.mqs-seccion{ margin: 0 0 12px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #6b8080; }
.mqs-accesos{
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px; margin-bottom: 28px;
}
.mqs-acceso{
    display: flex; align-items: center; gap: 14px; padding: 18px;
    background: #ffffff; border: 1px solid #e3ecec; border-radius: 14px;
    color: #2b3d3d; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.mqs-acceso:hover, .mqs-acceso:focus{
    color: #2b3d3d; text-decoration: none; border-color: var(--marca-primario);
    transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,80,80,.12);
}
.mqs-acceso-icono{
    display: flex; align-items: center; justify-content: center; flex: 0 0 48px;
    width: 48px; height: 48px; border-radius: 12px; font-size: 20px;
    color: var(--marca-primario); background: #e3f2f2;
}
.mqs-acceso-texto{ display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.mqs-acceso-texto strong{ font-size: 16px; font-weight: 700; }
.mqs-acceso-texto small{ font-size: 13px; color: #7a8c8c; }
.mqs-acceso-dato{ font-size: 20px; font-weight: 800; color: var(--marca-primario); }
@media (max-width: 767px){
    .mqs-tablero{ padding: 14px; }
    .mqs-saludo{ padding: 20px; }
    .mqs-saludo-icono{ display: none; }
}

/* Login (vistas/marcas/myquicksales/modulos/login.php): pantalla dividida,
   marca a la izquierda y formulario a la derecha. En pantallas angostas
   queda solo el formulario. */
.mqs-login{ display: flex; min-height: 100vh; background: #ffffff; }
.mqs-login-marca{
    flex: 1 1 50%; display: flex; flex-direction: column; justify-content: space-between;
    padding: 56px 64px; color: #ffffff;
    background:
        radial-gradient(circle at 15% 15%, rgba(255,255,255,.14), transparent 45%),
        radial-gradient(circle at 90% 90%, rgba(0,0,0,.18), transparent 50%),
        linear-gradient(135deg, #003d3d, var(--marca-primario));
}
.mqs-login-marca-contenido{ margin: auto 0; max-width: 460px; }
.mqs-login-marca h1{ margin: 0 0 16px; font-size: 46px; font-weight: 800; line-height: 1.12; }
.mqs-login-marca p{ margin: 0; font-size: 17px; opacity: .85; }
.mqs-login-marca ul{ margin: 36px 0 0; padding: 0; list-style: none; }
.mqs-login-marca li{ display: flex; align-items: center; gap: 14px; margin: 16px 0; font-size: 16px; font-weight: 600; }
.mqs-login-marca li i{
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.16);
}
.mqs-login-marca small{ opacity: .7; }
.mqs-login-formulario{ flex: 1 1 50%; display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.mqs-login-caja{ width: 100%; max-width: 380px; }
.mqs-login-logo{ display: block; max-width: 220px; max-height: 90px; margin-bottom: 30px; }
.mqs-login-caja h2{ margin: 0 0 4px; font-size: 30px; font-weight: 800; color: #1f3333; }
.mqs-login-mensaje{ margin: 0 0 26px; color: #7a8c8c; }
.mqs-login-caja label{ font-size: 13px; font-weight: 700; color: #3d5252; }
.mqs-login-caja .form-control{ height: 46px; border-radius: 10px; }
.mqs-login-caja .input-group .form-control{ border-radius: 10px 0 0 10px; }
.mqs-login-caja .input-group-addon{ border-radius: 0 10px 10px 0; }
.mqs-login-caja .form-control-feedback{ height: 46px; line-height: 46px; }
.mqs-login-ingresar{ height: 48px; margin-top: 10px; border-radius: 10px; font-size: 16px; font-weight: 700; }
@media (max-width: 900px){
    .mqs-login-marca{ display: none; }
}

/* Pantalla de carga (#loading-screen en plantilla.php, la maneja loading()
   de funciones.js): en vez del circulo azul, cuatro cuadros en 2x2 como el
   logo que se encienden en el sentido del reloj. El cuadro de arriba a la
   izquierda es el elemento y los otros tres son sombras suyas; se corre
   13px para que el conjunto (48px) quede centrado. */
#loading-screen{ background: linear-gradient(160deg, #ffffff, #eef6f6); }
#loading-screen .loader{
    width: 22px; height: 22px; border: 0; border-radius: 5px;
    background: transparent; transform: translate(-13px, -13px);
    animation: mqs-cuadros 1.2s ease-in-out infinite;
}
@keyframes mqs-cuadros{
    0%, 100%{ box-shadow: 0 0 0 0 #008080, 26px 0 0 0 #cfe6e6, 26px 26px 0 0 #cfe6e6, 0 26px 0 0 #cfe6e6; }
    25%{ box-shadow: 0 0 0 0 #cfe6e6, 26px 0 0 0 #008080, 26px 26px 0 0 #cfe6e6, 0 26px 0 0 #cfe6e6; }
    50%{ box-shadow: 0 0 0 0 #cfe6e6, 26px 0 0 0 #cfe6e6, 26px 26px 0 0 #008080, 0 26px 0 0 #cfe6e6; }
    75%{ box-shadow: 0 0 0 0 #cfe6e6, 26px 0 0 0 #cfe6e6, 26px 26px 0 0 #cfe6e6, 0 26px 0 0 #008080; }
}
#loading-text, #dots{
    font-family: 'Nunito', 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px; font-weight: 700; color: #3d5252; letter-spacing: .02em;
}
#loading-text{ margin-top: 18px; }

/* Pausa mientras se procesa algo (#pause-screen): tarjeta blanca con las
   rayas en el color de la marca, en vez de la caja oscura. */
#pause-screen{ background: rgba(0, 60, 60, .12); }
#pause-screen .spinner{ background: rgba(255,255,255,.95); border-color: #e3ecec; box-shadow: 0 8px 24px rgba(0,80,80,.18); }
#pause-screen .spinner-line{ background: var(--marca-primario); }

@media (prefers-reduced-motion: reduce){
    #loading-screen .loader{ animation-duration: 2.4s; }
}

/* Alertas (SweetAlert2 v7 y mostrar_alerta() de funciones.js), con otra
   forma que la de Easytax: horizontal, icono chico a la izquierda, titulo y
   mensaje alineados a la izquierda, franja de color segun el tipo y la
   barra de tiempo como una linea en el borde de abajo.

   SweetAlert pone el titulo y el mensaje juntos en .swal2-contentwrapper,
   asi que basta con pasar el popup (flex en columna) a fila con salto de
   linea: los campos, los botones y la barra van a su propia fila.

   Las dos librerias inyectan su CSS en el <head> despues de este archivo:
   por eso todo va con body.marca-myquicksales delante, para ganar por
   especificidad. Los toast (alertas chicas de esquina) no se tocan. */
body.marca-myquicksales .swal2-container.swal2-shown{
    background-color: rgba(20, 35, 35, .28);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
body.marca-myquicksales .swal2-popup:not(.swal2-toast){
    flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start;
    width: 460px; max-width: calc(100% - 24px); padding: 22px 24px 24px 26px;
    position: relative; overflow: hidden; text-align: left;
    border-radius: 12px; border-left: 6px solid var(--marca-primario);
    box-shadow: 0 20px 50px rgba(0, 40, 40, .28);
    font-family: 'Nunito', 'Helvetica Neue', Arial, sans-serif;
}
/* Franja segun el icono que quedo visible (SweetAlert lo muestra con
   display: block en linea). Sin soporte de :has() queda la de la marca. */
body.marca-myquicksales .swal2-popup:has(> .swal2-error[style*="block"]){ border-left-color: #e0533d; }
body.marca-myquicksales .swal2-popup:has(> .swal2-warning[style*="block"]){ border-left-color: #e8960c; }
body.marca-myquicksales .swal2-popup:has(> .swal2-info[style*="block"]){ border-left-color: #1f9bb0; }
body.marca-myquicksales .swal2-popup:has(> .swal2-question[style*="block"]){ border-left-color: #4f7f7f; }

/* Icono a la mitad: sus piezas estan medidas en px para 80px, por eso se
   achica con zoom y no cambiando el tamano. */
body.marca-myquicksales .swal2-popup:not(.swal2-toast) > .swal2-icon{ zoom: .5; flex: 0 0 auto; margin: 0 36px 0 0; }
/* La base no puede ser 0: sin icono, 0 + los botones (100%) cabrian en la
   misma fila y el texto quedaba de una letra de ancho. Con calc(100% - 90px)
   cabe al lado del icono (~62px) y, sin icono, los botones bajan de fila. */
body.marca-myquicksales .swal2-popup:not(.swal2-toast) > .swal2-contentwrapper{ flex: 1 1 calc(100% - 90px); min-width: 0; }
body.marca-myquicksales .swal2-popup:not(.swal2-toast) > .swal2-progresssteps,
body.marca-myquicksales .swal2-popup:not(.swal2-toast) > .swal2-image,
body.marca-myquicksales .swal2-popup:not(.swal2-toast) > .swal2-input,
body.marca-myquicksales .swal2-popup:not(.swal2-toast) > .swal2-file,
body.marca-myquicksales .swal2-popup:not(.swal2-toast) > .swal2-range,
body.marca-myquicksales .swal2-popup:not(.swal2-toast) > .swal2-select,
body.marca-myquicksales .swal2-popup:not(.swal2-toast) > .swal2-radio,
body.marca-myquicksales .swal2-popup:not(.swal2-toast) > .swal2-checkbox,
body.marca-myquicksales .swal2-popup:not(.swal2-toast) > .swal2-textarea,
body.marca-myquicksales .swal2-popup:not(.swal2-toast) > .swal2-validationerror,
body.marca-myquicksales .swal2-popup:not(.swal2-toast) > .swal2-buttonswrapper{ flex: 0 0 100%; }
body.marca-myquicksales .swal2-popup:not(.swal2-toast) .swal2-title{
    margin: 0 0 2px; padding: 0; text-align: left; font-size: 19px; font-weight: 800; color: #1f3333;
}
body.marca-myquicksales .swal2-popup:not(.swal2-toast) .swal2-content{
    text-align: left; justify-content: flex-start; font-size: 15px; color: #5f7373;
}
body.marca-myquicksales .swal2-popup:not(.swal2-toast) > .swal2-buttonswrapper{ justify-content: flex-end; margin-top: 18px; }
body.marca-myquicksales .swal2-popup:not(.swal2-toast) .swal2-styled.swal2-cancel{ order: -1; }
body.marca-myquicksales .swal2-popup .swal2-styled{
    margin: 0 0 0 8px; padding: 9px 20px; border-radius: 8px; font-size: 14px; font-weight: 700;
}
/* Las confirmaciones irreversibles (eliminar importacion, anular OC) piden
   confirmButtonColor "#d33", que el navegador guarda como rgb(221, 51, 51):
   esas se quedan en rojo. El resto lo pone SweetAlert en linea, por eso el
   !important. */
body.marca-myquicksales .swal2-popup .swal2-styled.swal2-confirm:not([style*="221, 51, 51"]){
    background-color: var(--marca-primario) !important; border-color: var(--marca-primario) !important;
}
body.marca-myquicksales .swal2-popup .swal2-styled.swal2-cancel{
    background-color: #eef2f2 !important; border-color: #eef2f2 !important; color: #3d5252 !important;
}
body.marca-myquicksales .swal2-popup .swal2-styled:focus{ box-shadow: 0 0 0 3px rgba(0, 128, 128, .3); }

/* Colores de los iconos */
body.marca-myquicksales .swal2-icon.swal2-error{ border-color: #f0a8a0; }
body.marca-myquicksales .swal2-icon.swal2-error [class^='swal2-x-mark-line']{ background-color: #e0533d; }
body.marca-myquicksales .swal2-icon.swal2-success{ border-color: var(--marca-primario); }
body.marca-myquicksales .swal2-icon.swal2-success [class^='swal2-success-line']{ background-color: var(--marca-primario); }
body.marca-myquicksales .swal2-icon.swal2-success .swal2-success-ring{ border-color: rgba(0, 128, 128, .25); }
body.marca-myquicksales .swal2-icon.swal2-warning{ color: #e8960c; border-color: #f6cf8a; }
body.marca-myquicksales .swal2-icon.swal2-info{ color: #1f9bb0; border-color: #9fd8e2; }
body.marca-myquicksales .swal2-icon.swal2-question{ color: #4f7f7f; border-color: #c3dada; }

/* Barra de tiempo de mostrar_alerta(): una linea pegada al borde de abajo
   que se vacia de izquierda a derecha (la comun se encoge hacia el centro). */
body.marca-myquicksales .swal2-popup .pdv-swal-timer-wrap{
    position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
    height: 3px; border-radius: 0; background: transparent;
}
body.marca-myquicksales .swal2-popup .pdv-swal-timer-fill{
    border-radius: 0; transform-origin: left center; background: var(--marca-primario);
}

/* El azul de Bootstrap (#337ab7) y el de AdminLTE (#3c8dbc) que quedaban
   sueltos: opcion activa de las listas (bootstrap-select y menus
   desplegables), paginacion de las tablas, enlaces y demas. */
a{ color: var(--marca-primario); }
a:hover, a:focus{ color: var(--marca-mas-oscuro); }
.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover,
.dropdown-menu>.active>a:focus,
.bootstrap-select .dropdown-menu li.active>a,
.bootstrap-select .dropdown-menu li a.active{ color: #ffffff; background-color: var(--marca-primario); }
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus{ background-color: #eef6f6; }
.bootstrap-select .dropdown-menu li.selected>a{ font-weight: 700; }
.pagination>li>a,
.pagination>li>span{ color: var(--marca-primario); }
.pagination>.active>a, .pagination>.active>a:hover, .pagination>.active>a:focus,
.pagination>.active>span, .pagination>.active>span:hover, .pagination>.active>span:focus{
    background-color: var(--marca-primario); border-color: var(--marca-primario); color: #ffffff;
}
.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus{
    background-color: var(--marca-primario); border-color: var(--marca-primario);
}
.bg-primary, .progress-bar{ background-color: var(--marca-primario); }
.text-primary{ color: var(--marca-primario); }

/* Azules fijos de styles.css y style-bootstrap.css (CxC y procesos de caja
   del menu). El de view-panel-primary viene con !important. */
.btn-outline-primary{ color: var(--marca-primario); border-color: var(--marca-primario); }
.btn-outline-primary:hover,
.btn-outline-primary:focus{ color: #ffffff; background-color: var(--marca-primario); border-color: var(--marca-oscuro); }
.view-panel-primary > .view-panel-heading{ background: var(--marca-primario) !important; }

/* Header blanco, distinto de la barra de color de AdminLTE: solo el bloque
   del logo queda en el color de la marca (los logos del menu son blancos). */
.skin-blue .main-header .navbar{ background-color: #ffffff; border-bottom: 1px solid #e3ecec; }
.skin-blue .main-header .navbar .sidebar-toggle{ color: var(--marca-primario); }
.skin-blue .main-header .navbar .nav>li>a{ color: #3d5252; }
.skin-blue .main-header .navbar .sidebar-toggle:hover,
.skin-blue .main-header .navbar .nav>li>a:hover,
.skin-blue .main-header .navbar .nav>li>a:focus,
.skin-blue .main-header .navbar .nav>.active>a,
.skin-blue .main-header .navbar .nav .open>a,
.skin-blue .main-header .navbar .nav .open>a:hover,
.skin-blue .main-header .navbar .nav .open>a:focus{ color: var(--marca-oscuro); background-color: #eef6f6; }
.skin-blue .main-header .navbar .user-image{ border: 2px solid #cfe6e6; }

/* Titulo de cada pantalla: sin las migas de pan de AdminLTE
   ("Inicio > Crear venta") y con mas peso. */
.content-header>.breadcrumb{ display: none; }
.content-header>h1{ font-size: 26px; font-weight: 800; color: #1f3333; }
.content-header>h1>small{ font-weight: 600; color: #7a8c8c; }

/* Acceso rapido con usuarios de prueba: solo aparece en localhost */
.mqs-login-pruebas{ margin-top: 28px; padding-top: 18px; border-top: 1px dashed #d5e3e3; text-align: center; }
.mqs-login-pruebas>span{ display: block; margin-bottom: 10px; font-size: 12px; font-weight: 700; color: #9aabab; text-transform: uppercase; letter-spacing: .06em; }
.mqs-login-pruebas>div{ display: flex; gap: 8px; }
.mqs-login-pruebas .btn{ flex: 1 1 0; border-radius: 8px; border-color: #cfe6e6; color: var(--marca-oscuro); font-weight: 700; }
.mqs-login-pruebas .btn:hover{ background-color: #eef6f6; }