/*
Name: apiPOS
Author: Luisito Programa
Website 1: luisitoprograma.com
Website 2: apiERP.dev
version: 6.5.0
*/

/* Fonts */
:root {
--default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--heading-font: "Raleway", sans-serif;
--nav-font: "Poppins", sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root { 
--background-color: #ffffff; /* Background color for the entire website, including individual sections */
--default-color: #272829; /* Default color used for the majority of the text content across the entire website */
--heading-color: #050d18; /* Color for headings, subheadings and title throughout the website */
--accent-color: #FC5900; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
--surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
--contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
--nav-color: #a8a9b4;  /* The default color of the main navmenu links */
--nav-hover-color: #ffffff; /* Applied to main navmenu links when they are hovered over or active */
--nav-mobile-background-color: #040b14; /* Used as the background color for mobile navigation menu */
--nav-dropdown-background-color: #040b14; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
--nav-dropdown-color: #a8a9b4; /* Used for navigation links of the dropdown items in the navigation menu. */
--nav-dropdown-hover-color: #ffffff; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

.light-background {
--background-color: #f4fafd;
--surface-color: #ffffff;
}

.dark-background {
--background-color: #080060;
--default-color: #ffffff;
--heading-color: #ffffff;
--surface-color: #151f2b;
--contrast-color: #ffffff;
}

/* Smooth scroll */
:root {
scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
font-family: var(--default-font);
overflow: hidden;
margin: 0 !important;
padding: 0 !important;
}

h1,
h2,
h3,
h4,
h5 {
font-family: var(--heading-font);
}

/* Luisito Programa */
p{
font-size: 16px !important;
line-height: 30px !important;
}
.main{
padding-left: 30px !important;
padding-right: 30px !important;
}
.img-section{
width: 60%;
margin: 30px auto;
}
.video-container-blog{
position: relative;
width: 70%;
margin: 30px auto;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.video-container-blog iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.portfolio-info{
padding: 30px;
box-shadow: 0px 0 30px rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px){
.main{
padding-left: 0px !important;
padding-right: 0px !important;
}
.img-section{
width: 100%;
}
.video-container-blog{
width: 100%;
}
}

.ia-admin .modal {
display: none; /* Inicia oculto */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8); /* Fondo transl�cido */
justify-content: center;
align-items: center;
z-index: 1000;
}

.ia-admin .modal-content {
background-color: #fff;
padding: 20px;
border-radius: 10px;
text-align: center;
width: 100%;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Icono de �xito */
.ia-admin #successIcon {
font-size: 35px;
color: green;
}

/* Estilo para el icono de �xito */
.ia-admin .successIcon {
font-size: 25px; /* Tama�o grande para el icono */
color: #28a745; /* Verde Bootstrap para �xito */
margin-right: 10px; /* Espaciado entre el icono y el texto */
vertical-align: middle;
}

/* Estilo para el mensaje de �xito */
.ia-admin .successMessage {
font-size: 15px !important;
font-weight: bold;
color: #28a745; /* Coincide con el color del icono */
vertical-align: middle;
}

/* Estilo para el icono de carga */
.ia-admin .loadingIcon {
font-size: 25px; /* Tama�o grande para el icono */
color: #080060; /* Azul Bootstrap para indicar proceso */
margin-right: 10px; /* Espaciado entre el icono y el texto */
vertical-align: middle;
animation: spin 1s linear infinite; /* Animaci�n de rotaci�n */
}

/* Animaci�n de giro */
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

/* Estilo para el texto de carga */
.ia-admin .loadingText {
font-size: 15px !important;
font-weight: bold;
color: #111; /* Azul coherente con el icono */
vertical-align: middle;
}


/* PHP Email Form Messages
------------------------------*/
.php-email-form .error-message {
display: none;
background: #df1529;
color: #ffffff;
text-align: left;
padding: 15px;
margin-bottom: 24px;
font-weight: 600;
}

.php-email-form .sent-message {
display: none;
color: #ffffff;
background: #059652;
text-align: center;
padding: 15px;
margin-bottom: 24px;
font-weight: 600;
}

.php-email-form .loading {
display: none;
background: var(--surface-color);
text-align: center;
padding: 15px;
margin-bottom: 24px;
}

.php-email-form .loading:before {
content: "";
display: inline-block;
border-radius: 50%;
width: 24px;
height: 24px;
margin: 0 10px -6px 0;
border: 3px solid var(--accent-color);
border-top-color: var(--surface-color);
animation: php-email-form-loading 1s linear infinite;
}

@keyframes php-email-form-loading {
0% {
transform: rotate(0deg);
}

100% {
transform: rotate(360deg);
}
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
color: var(--default-color);
background-color: var(--background-color);
font-size: 14px;
padding: 40px 0;
position: relative;
border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer .copyright p {
margin-bottom: 0;
}

.footer .credits {
margin-top: 4px;
font-size: 13px;
text-align: center;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
position: fixed;
inset: 0;
z-index: 999999;
overflow: hidden;
background: var(--background-color);
transition: all 0.6s ease-out;
}

#preloader:before {
content: "";
position: fixed;
top: calc(50% - 30px);
left: calc(50% - 30px);
border: 6px solid #ffffff;
border-color: var(--accent-color) transparent var(--accent-color) transparent;
border-radius: 50%;
width: 60px;
height: 60px;
animation: animate-preloader 1.5s linear infinite;
}

@keyframes animate-preloader {
0% {
transform: rotate(0deg);
}

100% {
transform: rotate(360deg);
}
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
position: fixed;
visibility: hidden;
opacity: 0;
right: 15px;
bottom: -15px;
z-index: 99999;
background-color: var(--accent-color);
width: 44px;
height: 44px;
border-radius: 50px;
transition: all 0.4s;
}

.scroll-top i {
font-size: 24px;
color: var(--contrast-color);
line-height: 0;
}

.scroll-top:hover {
background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
color: var(--contrast-color);
}

.scroll-top.active {
visibility: visible;
opacity: 1;
bottom: 15px;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
[data-aos-delay] {
transition-delay: 0 !important;
}
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
color: var(--default-color);
background-color: var(--background-color);
padding: 25px 0;
position: relative;
}

.page-title h1 {
font-size: 24px;
font-weight: 700;
}

.page-title .breadcrumbs ol {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0;
margin: 0;
font-size: 14px;
font-weight: 400;
}

.page-title .breadcrumbs ol li+li {
padding-left: 10px;
}

.page-title .breadcrumbs ol li+li::before {
content: "/";
display: inline-block;
padding-right: 10px;
color: color-mix(in srgb, var(--default-color), transparent 70%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
color: var(--default-color);
background-color: var(--background-color);
padding: 60px 0;
overflow: clip;
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
padding-top: 30px;
padding-bottom: 0;
position: relative;
}

.section-title h2 {
font-size: 32px;
font-weight: 700;
margin-bottom: 20px;
padding-bottom: 20px;
position: relative;
}

.section-title h2:after {
content: "";
position: absolute;
display: block;
width: 50px;
height: 3px;
background: var(--accent-color);
left: 0;
bottom: 0;
}

.section-title p {
margin-bottom: 0;
}

/*--------------------------------------------------------------
# TITULOS BLOG
--------------------------------------------------------------*/
.section-title-blog {
padding-bottom: 60px;
position: relative;
}

.section-title-blog h1 {
font-size: 32px;
font-weight: 700;
margin-bottom: 20px;
padding-bottom: 20px;
position: relative;
}

.section-title-blog h1:after {
content: "";
position: absolute;
display: block;
width: 50px;
height: 3px;
background: var(--accent-color);
left: 0;
bottom: 0;
}

.section-title-blog p {
margin-bottom: 0;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
width: 100%;
min-height: 100vh;
position: relative;
padding: 80px 0;
display: flex;
align-items: center;
justify-content: center;
}

.hero img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}

.hero:before {
content: "";
background: color-mix(in srgb, var(--background-color), transparent 70%);
position: absolute;
inset: 0;
z-index: 2;
}

.hero .container {
position: relative;
z-index: 3;
}

.hero h2 {
margin: 0;
font-size: 64px;
font-weight: 700;
}

.hero p {
margin: 5px 0 0 0;
font-size: 26px !important;
}

.hero p span {
letter-spacing: 1px;
border-bottom: 2px solid var(--accent-color);
color: #FF5900;
}

.hero .social-links {
margin-top: 25px;
}

.hero .social-links a {
font-size: 24px;
display: inline-block;
color: color-mix(in srgb, var(--default-color), transparent 50%);
line-height: 1;
margin-right: 20px;
transition: 0.3s;
}

.hero .social-links a:hover {
color: var(--accent-color);
}

@media (max-width: 768px) {
.hero h2 {
font-size: 32px;
}

.hero p {
font-size: 20px !important;
}
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .content h2 {
font-weight: 700;
font-size: 24px;
}

.about .content ul {
list-style: none;
padding: 0;
}

.about .content ul li {
margin-bottom: 20px;
display: flex;
align-items: center;
}

.about .content ul strong {
margin-right: 10px;
}

.about .content ul i {
font-size: 16px;
margin-right: 5px;
color: var(--accent-color);
line-height: 0;
}

/*--------------------------------------------------------------
# Stats Section
--------------------------------------------------------------*/
.stats .stats-item {
padding: 30px;
width: 100%;
}

.stats .stats-item i {
color: var(--accent-color);
display: block;
font-size: 44px;
float: left;
line-height: 0;
}

.stats .stats-item .purecounter {
color: var(--heading-color);
font-size: 48px;
line-height: 40px;
display: block;
font-weight: 700;
margin-left: 60px;
}

.stats .stats-item p {
color: color-mix(in srgb, var(--default-color), transparent 40%);
padding: 15px 0 0 0;
margin: 0 0 0 60px;
font-family: var(--heading-font);
font-size: 14px;
}

/*--------------------------------------------------------------
# Skills Section
--------------------------------------------------------------*/
.skills .progress {
height: 60px;
display: block;
background: none;
border-radius: 0;
}

.skills .progress .skill {
color: var(--heading-color);
padding: 0;
margin: 0 0 6px 0;
text-transform: uppercase;
display: block;
font-weight: 600;
font-family: var(--heading-font);
}

.skills .progress .skill .val {
float: right;
font-style: normal;
}

.skills .progress-bar-wrap {
background: color-mix(in srgb, var(--default-color), transparent 90%);
height: 10px;
}

.skills .progress-bar {
width: 1px;
height: 10px;
transition: 0.9s;
background-color: var(--accent-color);
}

/*--------------------------------------------------------------
# Resume Section
--------------------------------------------------------------*/
.resume .resume-title {
color: var(--heading-color);
font-size: 26px;
font-weight: 700;
margin-top: 20px;
margin-bottom: 20px;
}

.resume .resume-item {
padding: 0 0 20px 20px;
margin-top: -2px;
border-left: 2px solid var(--accent-color);
position: relative;
}

.resume .resume-item h4 {
line-height: 18px;
font-size: 18px;
font-weight: 600;
text-transform: uppercase;
color: color-mix(in srgb, var(--default-color), transparent 20%);
margin-bottom: 10px;
}

.resume .resume-item h5 {
font-size: 16px;
padding: 5px 15px;
display: inline-block;
font-weight: 600;
margin-bottom: 10px;
}

.resume .resume-item ul {
padding-left: 20px;
}

.resume .resume-item ul li {
padding-bottom: 10px;
}

.resume .resume-item:last-child {
padding-bottom: 0;
}

.resume .resume-item::before {
content: "";
position: absolute;
width: 16px;
height: 16px;
border-radius: 50px;
left: -9px;
top: 0;
background: var(--background-color);
border: 2px solid var(--accent-color);
}

/*--------------------------------------------------------------
# Portfolio Section
--------------------------------------------------------------*/
.portfolio .portfolio-filters {
padding: 0;
margin: 0 auto 20px auto;
list-style: none;
text-align: center;
}

.portfolio .portfolio-filters li {
cursor: pointer;
display: inline-block;
padding: 0;
font-size: 14px;
font-weight: 400;
margin: 0 10px;
line-height: 1;
text-transform: uppercase;
margin-bottom: 10px;
transition: all 0.3s ease-in-out;
}

.portfolio .portfolio-filters li:hover,
.portfolio .portfolio-filters li.filter-active {
color: var(--accent-color);
}

.portfolio .portfolio-filters li:first-child {
margin-left: 0;
}

.portfolio .portfolio-filters li:last-child {
margin-right: 0;
}

@media (max-width: 575px) {
.portfolio .portfolio-filters li {
font-size: 14px;
margin: 0 5px;
}
}

.portfolio .portfolio-content {
position: relative;
overflow: hidden;
}

.portfolio .portfolio-content img {
transition: 0.3s;
}

.portfolio .portfolio-content .portfolio-info {
opacity: 0;
position: absolute;
inset: 0;
z-index: 3;
transition: all ease-in-out 0.3s;
background: rgba(0, 0, 0, 0.6);
padding: 15px;
}

.portfolio .portfolio-content .portfolio-info h4 {
font-size: 14px;
padding: 5px 10px;
font-weight: 400;
color: #ffffff;
display: inline-block;
background-color: var(--accent-color);
}

.portfolio .portfolio-content .portfolio-info p {
position: absolute;
bottom: 10px;
text-align: center;
display: inline-block;
left: 0;
right: 0;
font-size: 14px !important;
font-weight: 600;
color: rgba(255, 255, 255, 0.8);
}

.portfolio .portfolio-content .portfolio-info .preview-link,
.portfolio .portfolio-content .portfolio-info .details-link,
.portfolio .portfolio-content .portfolio-info .details-link-download,
.portfolio .portfolio-content .portfolio-info .details-link-update,
.portfolio .portfolio-content .portfolio-info .details-link-delete {
position: absolute;
color: #fff;
transition: 0.3s;
line-height: 1.2;
}

.portfolio .portfolio-content .portfolio-info .preview-link:hover,
.portfolio .portfolio-content .portfolio-info .details-link:hover,
.portfolio .portfolio-content .portfolio-info .details-link-download:hover,
.portfolio .portfolio-content .portfolio-info .details-link-update:hover,
.portfolio .portfolio-content .portfolio-info .details-link-delete:hover {
color: var(--accent-color);
}

.portfolio .portfolio-content .portfolio-info .preview-link {
left: calc(50% - 40px);
top: calc(50% - 14px);
font-size: 26px;
line-height: 0;
}

.portfolio .portfolio-content .portfolio-info .details-link {
left: 50%;
top: calc(50% - 14px);
font-size: 34px;
line-height: 0;
}

.portfolio .portfolio-content .portfolio-info .details-link-download {
left: calc(50% + 40px);
top: calc(50% - 14px);
font-size: 34px;
line-height: 0;
}

.portfolio .portfolio-content .portfolio-info .details-link-update {
left: calc(50% + 40px);
top: calc(50% - 14px);
font-size: 34px;
line-height: 0;
}

.portfolio .portfolio-content .portfolio-info .details-link-delete {
left: calc(50% + 40px);
top: calc(50% - 14px);
font-size: 34px;
line-height: 0;
}

.portfolio .portfolio-content:hover .portfolio-info {
opacity: 1;
}

.portfolio .portfolio-content:hover img {
transform: scale(1.1);
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .service-item {
position: relative;
}

.services .service-item .icon {
background: var(--accent-color);
display: flex;
align-items: center;
justify-content: center;
width: 54px;
height: 54px;
border-radius: 50%;
transition: 0.5s;
border: 1px solid var(--accent-color);
margin-right: 20px;
}

.services .service-item .icon i {
color: var(--contrast-color);
font-size: 24px;
line-height: 0;
}

.services .service-item:hover .icon {
background: var(--surface-color);
}

.services .service-item:hover .icon i {
color: var(--accent-color);
}

.services .service-item .title {
font-weight: 700;
margin-bottom: 15px;
font-size: 18px;
}

.services .service-item .title a {
color: var(--heading-color);
}

.services .service-item .title a:hover {
color: var(--accent-color);
}

.services .service-item .description {
line-height: 24px;
font-size: 14px;
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials .testimonials-carousel,
.testimonials .testimonials-slider {
overflow: hidden;
}

.testimonials .testimonial-item {
box-sizing: content-box;
text-align: center;
min-height: 320px;
}

.testimonials .testimonial-item .testimonial-img {
width: 90px;
border-radius: 50%;
margin: 0 auto;
}

.testimonials .testimonial-item h3 {
font-size: 18px;
font-weight: bold;
margin: 10px 0 5px 0;
}

.testimonials .testimonial-item h4 {
font-size: 14px;
color: color-mix(in srgb, var(--default-color), transparent 20%);
margin: 0;
}

.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
color: color-mix(in srgb, var(--accent-color), transparent 40%);
font-size: 26px;
line-height: 0;
}

.testimonials .testimonial-item .quote-icon-left {
display: inline-block;
left: -5px;
position: relative;
}

.testimonials .testimonial-item .quote-icon-right {
display: inline-block;
right: -5px;
position: relative;
top: 10px;
transform: scale(-1, -1);
}

.testimonials .testimonial-item p {
font-style: italic;
margin: 0 15px 15px 15px;
padding: 20px;
background-color: var(--surface-color);
position: relative;
margin-bottom: 35px;
border-radius: 6px;
box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
}

.testimonials .testimonial-item p::after {
content: "";
width: 0;
height: 0;
border-top: 20px solid var(--surface-color);
border-right: 20px solid transparent;
border-left: 20px solid transparent;
position: absolute;
bottom: -20px;
left: calc(50% - 20px);
}

.testimonials .swiper-wrapper {
height: auto;
}

.testimonials .swiper-pagination {
margin-top: 40px;
position: relative;
}

.testimonials .swiper-pagination .swiper-pagination-bullet {
width: 12px;
height: 12px;
background-color: var(--background-color);
opacity: 1;
border: 1px solid var(--accent-color);
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
background-color: var(--accent-color);
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-wrap {
background-color: var(--surface-color);
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
padding: 30px;
}

@media (max-width: 575px) {
.contact .info-wrap {
padding: 20px;
}
}

.contact .info-item {
margin-bottom: 40px;
}

.contact .info-item i {
font-size: 20px;
color: var(--accent-color);
background: color-mix(in srgb, var(--accent-color), transparent 92%);
width: 44px;
height: 44px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50px;
transition: all 0.3s ease-in-out;
margin-right: 15px;
}

.contact .info-item h3 {
padding: 0;
font-size: 18px;
font-weight: 700;
margin-bottom: 5px;
}

.contact .info-item p {
padding: 0;
margin-bottom: 0;
font-size: 14px;
}

.contact .info-item:hover i {
background: var(--accent-color);
color: var(--contrast-color);
}

.contact .php-email-form {
background-color: var(--surface-color);
height: 100%;
padding: 30px;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
}

@media (max-width: 575px) {
.contact .php-email-form {
padding: 20px;
}
}

.contact .php-email-form input,
.contact .php-email-form textarea,
.contact .php-email-form select {
font-size: 14px;
padding: 10px 15px;
box-shadow: none;
border-radius: 0;
color: var(--default-color);
background-color: var(--surface-color);
border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.contact .php-email-form input:focus,
.contact .php-email-form textarea:focus,
.contact .php-email-form select:focus {
border-color: var(--accent-color);
}

.contact .php-email-form input::placeholder,
.contact .php-email-form textarea::placeholder,
.contact .php-email-form select::placeholder {
color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.contact .php-email-form button {
color: var(--contrast-color);
background: var(--accent-color);
border: 0;
padding: 10px 30px;
transition: 0.4s;
border-radius: 50px;
}

.contact .php-email-form button:hover {
background: color-mix(in srgb, var(--accent-color), transparent 25%);
}

/*--------------------------------------------------------------
# FORM ADMIN
--------------------------------------------------------------*/

.blogFormContainer input,
.blogFormContainer textarea,
.blogFormContainer select {
font-size: 14px;
padding: 10px 15px;
box-shadow: none;
border-radius: 0;
color: #272829;
background-color: #ffffff;
border-color: color-mix(in srgb, #272829, transparent 80%);
box-shadow: none !important;
}
.blogFormContainer input:focus,
.blogFormContainer textarea:focus,
.blogFormContainer select:focus {
border-color: #FC5900 !important;
}
.blogFormContainer input::placeholder,
.blogFormContainer textarea::placeholder,
.blogFormContainer select::placeholder {
border-color: #FC5900 !important;
}
.blogFormContainer button {
color: #ffffff;
background: #FC5900;
border: 0;
padding: 10px 30px;
transition: 0.4s;
border-radius: 50px;
}
.blogFormContainer button:hover {
background: color-mix(in srgb, #FC5900, transparent 25%) !important;
}
.blogFormContainer .loading {
font-size: 14px;
color: #fc5900;
display: none;
}
.blogFormContainer .response {
margin-top: 15px;
padding: 10px;
border-radius: 4px;
font-size: 14px;
display: none;
}

/*--------------------------------------------------------------
# Portfolio Details Section
--------------------------------------------------------------*/
.portfolio-details .portfolio-details-slider img {
width: 100%;
}

.portfolio-details .portfolio-details-slider .swiper-pagination {
margin-top: 20px;
position: relative;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
width: 12px;
height: 12px;
background-color: color-mix(in srgb, var(--default-color), transparent 85%);
opacity: 1;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
background-color: var(--accent-color);
}

.portfolio-details .portfolio-info {
padding: 30px;
box-shadow: 0px 0 30px rgba(0, 0, 0, 0.1);
}

.portfolio-details .portfolio-info h3 {
font-size: 22px;
font-weight: 700;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
}

.portfolio-details .portfolio-info ul {
list-style: none;
padding: 0;
font-size: 15px;
}

.portfolio-details .portfolio-info ul li+li {
margin-top: 10px;
}

.portfolio-details .portfolio-description {
padding-top: 30px;
}

.portfolio-details .portfolio-description h2 {
font-size: 26px;
font-weight: 700;
margin-bottom: 20px;
}

.portfolio-details .portfolio-description p {
padding: 0;
color: color-mix(in srgb, var(--default-color), transparent 30%);
}

/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.service-details .services-list {
padding: 10px 30px;
border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
margin-bottom: 20px;
}

.service-details .services-list a {
display: block;
line-height: 1;
padding: 8px 0 8px 15px;
border-left: 3px solid color-mix(in srgb, var(--default-color), transparent 70%);
margin: 20px 0;
color: color-mix(in srgb, var(--default-color), transparent 20%);
transition: 0.3s;
}

.service-details .services-list a.active {
color: var(--heading-color);
font-weight: 700;
border-color: var(--accent-color);
}

.service-details .services-list a:hover {
border-color: var(--accent-color);
}

.service-details .services-img {
margin-bottom: 20px;
}

.service-details h3 {
font-size: 26px;
font-weight: 700;
}

.service-details h4 {
font-size: 20px;
font-weight: 700;
}

.service-details p {
font-size: 15px;
}

.service-details ul {
list-style: none;
padding: 0;
font-size: 15px;
}

.service-details ul li {
padding: 5px 0;
display: flex;
align-items: center;
}

.service-details ul i {
font-size: 20px;
margin-right: 8px;
color: var(--accent-color);
}

/*--------------------------------------------------------------
# POS - apiERP
--------------------------------------------------------------*/
.html-oh{
overflow: hidden !important;
}

.hidden {
display: none !important;
}

/* Contenedor principal */
.pos-container {
width: 100%;
margin: auto;
border: 1px solid #ccc;
border-radius: 8px;
overflow: hidden;
display: flex;
flex-direction: column;
}

/* Tabs */
.tabs {
display: flex;
align-items: center;
gap: 5px;
margin: 10px;
}
.img-tab-home{
width: 30px;
height: auto;
}
.arrow-link {
text-decoration: none;
}
.icon-arrow-right{
width: 25px;
height: auto;
}

.custom-inputs{
padding: 5px 15px;
border: none;
border-radius: 4px;
background-color: #FF5900;
color: white;
cursor: pointer;
margin: 5px;
font-size: 13px;
}

.custom-inputs:hover {
background-color: #080060;
}

.custom-input-add{
padding: 0;
border: 1px solid #FF5900;
border-radius: 4px;
background-color: white;
color: #FF5900;
cursor: pointer;
margin: 0;
font-size: 13px;
}

/* ITEM */
#fullscreen-btn,
#btnAddProductFree{
width: 7%;
margin-top: 3.5px;
margin-right: 5px;
background: none;
border: none;
}
.custom-inputs-border{
padding: 5px 15px;
border: 1px solid #080060;
border-radius: 4px;
background-color: #fff;
color: #080060;
margin: 5px;
font-size: 13px;
height: 30px;
box-shadow: none !important;
}
#btnAddProduct,
#btnScannerItem{
width: 10%;
margin-top: 3.5px;
padding-left: 4px;
padding-right: 5px;
}
#scanner-container {
position: absolute;
top: 0; left: 0;
width: 100vw; height: 100vh;
background: rgba(0,0,0,0.5);
display: none;
align-items: center;
justify-content: center;
z-index: 9999;
}
#scanner-container video {
width: 90vw;
max-width: 400px;
border: 2px solid #fff;
border-radius: 8px;
}
#scanner-close {
position: absolute;
top: 1rem;
right: 1rem;
background: rgba(255,255,255,0.8);
border: none;
border-radius: 50%;
width: 2.5rem;
height: 2.5rem;
font-size: 1.5rem;
cursor: pointer;
z-index: 10000;
}

.tabs .bi-plus{
font-size: 20px;
position: relative;
background: white;
left: 10px;
top: 10px;
}

/* Contenido del Tab */
.tab-content {
display: none;
}

.tab-content.active {
display: flex !important;
}

.products-panel{
flex: 1;
padding-left: 5px;
padding-right: 5px;
}

.cart-panel{
flex: 1;
}

.products-panel, #general-options{
background: #11111109;
}

#general-options label{
font-size: 14px;
color: #888;
}

h2 {
text-align: center;
}

.product {
border: none;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
background: #fff;
cursor: pointer;
height: 100%;
}
.product:focus,
input:focus,
textarea:focus{
outline: 1px solid var(--blue);
}

.cart-item-principal{
border-bottom: 1px solid #ddd;
margin-top: 10px;
padding-left: 5px;
}
.cart-item{
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 5px;
background: #fff;
font-size: 11px;
}
.cart-item-options{
justify-content: space-between;
align-items: center;
background: #fff;
font-size: 11px;
padding-bottom: 10px;
}
.a_cart_setAdd{
display: block;
font-size: 11px;
cursor: pointer;
}
.label-cart{
color: #888;
font-size: 12px;
}
.input_cart_setDescripcion{
padding-left: 5px;
color: #888;
}

.cart-product-note{
display: block;
font-size: 9px;
padding-left: 5px;
}

/* Custom Tooltip */
.container-tooltip{
position: relative;
cursor: pointer;
}
.container-tooltip[data-tooltip]:hover::after{
content: attr(data-tooltip);
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
background: #080060;
color: #fff;
padding: 4px 8px;
border-radius: 4px;
white-space: nowrap;
opacity: 1;
visibility: visible;
transition: opacity 0.3s ease;
z-index: 999999 !important;
}
.container-tooltip[data-tooltip]::after{
opacity: 0;
visibility: hidden;
pointer-events: none;
}

.input_cart_setCantidad{
display: flex;
align-items: center;
}

.input_cart_setSubtotal{
text-align: right;
padding-right: 10px;
color: #888;
}

.input-cart-size{
font-size: 11px;
}

.input_cart_setButton{
margin-right: 10px;
}

.input_cart_moreOptionsButton{
color: #888;
background: none;
border: none;
cursor: pointer;
font-size: 20px;
font-weight: bolder;
padding: 0;
margin-left: 5px;
margin-right: 15px;
}

.bg-background-transparent{
background-color: #f7f7f7 !important;
}
.custom-input-cart{
text-align: center;
height: 25px;
box-shadow: none !important;
padding: 0;
color: #888;
}
.custom-input-cart-notas{
text-align: left;
box-shadow: none !important;
padding: 0;
padding-top: 5px;
padding-left: 5px;
color: #888;
margin-right: 10px;
margin-bottom: 4px;
}
.custom-input-cart-observacion{
text-align: left;
box-shadow: none !important;
padding: 0;
padding-top: 5px;
padding-left: 5px;
color: #888;
font-size: 13px;
}
.custom-input-cart-options{
text-align: center;
height: 30px;
box-shadow: none !important;
font-size: 11px;
padding: 0;
color: #888;
}
.input-height-25{
height: 25px !important;
}
.icon-width-20{
width: 20px;
height: auto;
}

input[type="number"] {
appearance: none;
-moz-appearance: textfield;
-webkit-appearance: none;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
appearance: none;
margin: 0;
}

.input_setCantidad{
border: none;
}

/* PRODUCTS */
.product {
position: relative;
background-size: 15% auto;
background-position: 5px 5px;
background-repeat: no-repeat;
overflow: hidden;
}

.product::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0);
z-index: 0;
border-radius: 8px;
}
.product-content {
position: relative;
z-index: 1;
text-align: center;
}
.cart-title-item{
font-size: 12px !important;
color: #888;
margin-top: 10px;
margin-bottom: 11px;
width: 100%;
font-weight: bold;
text-align: center;
}

.pItemPrice{
white-space: nowrap;
color: #FF5900;
font-size: 13px !important;
font-weight: bold;
margin: 0;
text-align: right;
}
.pItemLocation{
font-size: 12px !important;
margin: 0;
margin-bottom: 5px;
text-align: right;
line-height: 1 !important;
}

.btn-cart-pay {
background-color: #FF5900;
color: white;
padding: 10px 20px;
padding-left: 10px;
padding-right: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
width: 100%;
}

.btn-cart-pay:hover {
background-color: #080060;
}

#tabs-icon-online,
#tabs-icon-offline{
transition: color 0.3s ease;
position: relative;
bottom: 3px;
}

.pagination {
margin-top: auto;
justify-content: center;
}

.pagination button{
background-color: white;
border: none;
color: #888;
font-size: 14px;
}

.pagination span{
color: #888;
font-size: 14px;
}

#itemsPerPageSelect{
display: none;
}

.float-left{
float: left;
font-size: 16px;
}

.float-right{
float: right;
font-size: 18px;
}

.float-left-totals{
float: left;
font-size: 14px;
padding-left: 10px;
color: #888;
}

.float-right-totals{
font-size: 14px;
padding-right: 10px;
color: #888;
}

.div-totals-right{
text-align: right;
}

.input-select-background{
background-color: #FF5900;
cursor: pointer;
color: #fff;
margin-top: 15px;
}

.input-select-background:hover {
background-color: #080060;
}

.custom-input-cart-setSerie,
.custom-input-cart-setCorrelativo,
.custom-input-cart-btnOpciones{
margin-top: 15px;
}

.col-bt-left-padding{
padding: 0;
margin: 0;
}

.col-bt-padding{
padding: 1px;
}
.col-bt-padding-options{
padding-left: 15px;
padding-right: 15px;
}

.checkout{
border-top: 1px solid #ddd;
padding-top: 10px;
margin-top: auto;
}

.form-select-normal{
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22%23FF5900%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M1.5%206.5L8%2013l6.5-6.5H1.5z%22/%3E%3C/svg%3E');
background-repeat: no-repeat;
background-position: right 0.2rem top 45%;
background-size: 1rem;
}

.form-select-background{
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 16 16"%3E%3Cpath d="M1.5 6.5L8 13l6.5-6.5H1.5z"/%3E%3C/svg%3E');
background-repeat: no-repeat;
background-position: right 0.2rem top 45%;
background-size: 1rem;
}

.custom-input-btn-background{
background-color: #FF5900;
cursor: pointer;
color: #fff;
}

.custom-input-btn-background:hover{
background-color: #080060;
}

#products{
margin: 0;
height: 0;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #888 transparent; 
}

#products::-webkit-scrollbar{
width: 8px;
}

#products::-webkit-scrollbar-thumb{
background-color: #080060;
border-radius: 4px;
}

#products::-webkit-scrollbar-track{
background: transparent;
}

.cart-items-container{
height: 0;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #888 transparent; 
}

.cart-items-container::-webkit-scrollbar{
width: 8px;
}

.cart-items-container::-webkit-scrollbar-thumb{
background-color: #080060;
border-radius: 4px;
}

.cart-items-container::-webkit-scrollbar-track{
background: transparent;
}

#newTabBtn{
cursor: wait;
}

.modal {
display: none;
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
z-index: 1000;
background-color: white;
border: 1px solid #ccc;
padding: 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
max-width: 90%;
overflow: auto;
width: auto;
scrollbar-width: thin;
scrollbar-color: #888 transparent; 
}

.modal.active {
display: block;
z-index: 99999;
}

.modal-content {
width: auto;
min-width: 250px;
max-width: 100%;
}

.close span{
font-size: 30px;
font-weight: bold;
}

.text-success-modal{
font-size: 14px;
color: green;
text-align: center;
font-weight: bold;
margin-bottom: 0;
}

.modalOverlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
display: none;
}

#div_sections{
height: 100vh;
height: 100dvh;
width: 100%;
display: flex;
}
#div_section_left{
width: 55%;
display: flex;
flex-direction: column
}
#div_section_right{
width: 45%;
display: flex;
flex-direction: column
}
.div-width-100{
width: 100% !important;
}
.div-width-90{
width: 90% !important;
}
.div-width-80{
width: 80% !important;
}
.div-width-70{
width: 70% !important;
}
.div-width-65{
width: 65% !important;
}
.div-width-30{
width: 30% !important;
}
.div-width-35{
width: 35% !important;
}
.div-width-40{
width: 40% !important;
}
.div-width-45{
width: 45% !important;
}
.div-width-50{
width: 50% !important;
}
.div-width-55{
width: 55% !important;
}
.div-width-25{
width: 25% !important;
}
.div-width-24{
width: 24% !important;
}
.div-width-20{
width: 20% !important;
}
.div-width-15{
width: 15% !important;
}
.div-width-10{
width: 10% !important;
}
.div-width-5{
width: 5% !important;
}
.divMarginTopAuto{
margin-top: auto;
}

#pdfContainer {
margin-bottom: 15px;
height: 400px;
text-align: center;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #888 transparent;
}
#pdfCanvas {
display: block;
margin: 0 auto;
}

.dynamicContent{
display: flex;
flex-direction: column;
}
#dynamicContent{
background: #f7f7f7;
width: 80%;
margin: 0 auto;
}
.div-width-options{
width: 50%;
}
.container-title-options{
background: #f7f7f7;
border-radius: 50px;
padding: 20px;
height: 99vh;
width: 35%;
}
.container-section-options{
margin-top: 70px;
width: 65%;
}
#detalleModal{
width: 50%;
border-radius: 50px;
}
#detalleModalPay{
border-radius: 50px;
}
#detalleModalLayout{
width: 100%;
}
#detalleModalOptions{
border-radius: 50px;
padding: 0;
}
.container-buttons{
display: flex;
justify-content: space-between;
align-items: center;
}

.btnModal{
border: none;
background: none;
font-size: 30px;
color: #080060;
}
.btnModalActive{
border: none;
background: #080060;
font-size: 30px;
color: #fff;
font-size: 13px;
margin-top: 10px;
}
.btnModalFooter{
display: flex;
flex-direction: column;
align-items: center;
}
.btnModalFooter span{
font-size: 13px;
}
.btnModalOptions span{
font-size: 13px;
}

.closeModal{
color: #888;
border: none;
background: none;
font-weight: normal;
}
#closeModal{
color: #FF5900 !important;
}

.payment-icon{
width: 60px;
height: auto;
}

.custom-label-cart-options{
text-align: left;
font-size: 14px;
color: #888;
margin-right: 10px;
}
.input-array-method,
.select-array-bank,
.select-array-other-payment,
.input-array-operacion,
.input-array-comision,
.input-array-totalcomision{
height: 30px;
outline: none;
border-color: #888 !important;
font-size: 13px !important;
margin-right: 10px;
}

.select-array-other-payment{
border: none !important;
color: #080060;
padding: 0;
background: none;
}

.btnSaveOperacion{
width: 50%;
margin: 20px auto;
}

.icon-pay-calendar{
color: green;
font-size: 20px;
}

.label-debe-vuelto{
margin-top: 30px;
text-align: center;
font-size: 16px;
}

/* Search More Products */
.container-responsive-main{
background: #FF590010;
border: 1px solid #FF5900;
color: #080060;
margin-top: 15px;
margin-bottom: 15px;
display: none;
}
#search_more_products{
font-size: 12px;
padding: 0;
border-radius: 0;
border-right: 1px solid #080060;
margin-right: 20px;
padding-right: 20px;
}
.img-search-more-products{
width: 30px;
height: auto;
margin: 5px;
}
.img-tab-home-responsive{
width: 30px;
}
.container-responsive-main-header{
background: #FF590010;
border: 1px solid #FF5900;
color: #080060;
display: none;
}
#show_right_section{
transform: rotate(180deg);
padding: 0;
}

.input-Descuento-Global{
text-align: right; width: 70px; padding: 0; margin: 0; border: none; color: #888; font-size: 14px; outline: none;
}

.products-img{
width: 40px; 
margin-right: 10px;
}

.divs_payments {
margin-top: 10px;
margin-bottom: 20px;
}

.payment-option {
width: 33.3%;
text-align: center;
font-size: 14px;
border-radius: 5px;
font-weight: bold;
margin: 0 10px;
padding: 10px;
text-decoration: none;
transition: background 0.3s, color 0.3s;
background: #fff;
color: #FF5900;
border: 1px solid #888;
align-items: center;
display: flex;
}

.payment-option:focus{
border: 2px solid #080060 !important;
}

.img-modal-pay{
width: 30px;
height: auto;
}
.img-cart-item{
width: 30px;
height: 30px;
}
.img-delete-card{
width: 14px;
height: auto;
margin-bottom: 3px;
}

/* Estilos individuales por tipo de pago */
.payment-contado {
margin-left: 50px;
}

.payment-mixto {
margin-right: 50px;
}

/* Estilo activo */
.active-payment {
background: #f9f5f5 !important;
color: #FF5900 !important;
font-weight: bold;
border: 1px solid #080060;
}

/* Estilos solo para la sección del login */
.btn-logout{
width: 100%;
background-color: #FF5900;
color: #fff;
font-size: 15px;
padding-top: 5px;
padding-bottom: 5px;
}
.btn-logout-icon{
font-size: 18px;
}
.btn-logout:hover{
font-size: 16px;
background-color: #FF5900;
}
.btn-logout:hover > .btn-logout-icon{
font-size: 19px;
}

.footer-apierp {
text-align: center;
padding: 5px;
color: #111;
font-family: Arial, sans-serif;
}
.a-apierp{
color: #111;
}
.a-apierp:hover{
color: #111;
font-weight: bold;
}
.span-apierp-api{
color: #080060;
}
.span-apierp-erp{
color: #FF5900;
}
.p-get-token{
font-size: 14px !important;
line-height: 0 !important;
margin-top: 10px;
font-weight: bold;
}
.p-apierp{
margin-top: 20px;
font-size: 12px !important;
line-height: 0 !important;
}
.p-ftr-copyright{
font-size: 10px !important;
line-height: 0 !important;
margin-top: 15px;
font-weight: bold;
}
.product-form {
display: flex;
flex-direction: column;
gap: 10px;
padding: 15px;
border: 1px solid #ddd;
border-radius: 8px;
background: #f9f9f9;
}
.product-form input, .product-form select, .product-form button {
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
.product-form button {
background: #FF5900;
color: white;
cursor: pointer;
}
.product-form button:hover {
background: #080060;
}



.ml-auto{
margin-left: auto;
}

.div-group-container {
display: flex;
}

/* MODAL OPTIONS */
.label-options{
font-size: 12px;
color: #888;
}
.span-options {
background-color: #FF5900;
color: #fff;
font-size: 13px;
padding: 3px;
padding-left: 5px;
padding-right: 5px;
border-radius: 5px;
}
.btn-options {
font-size: 14px;
color: #888;
border: 0;
background: none;
text-align: left;
display: flex;
padding: 0;
margin-top: 10px;
}
.img-options {
width: 25px;
height: auto;
margin-right: 5px;
}
.img-options-o {
width: 23px;
height: auto;
margin-right: 5px;
}
.img-btnopt {
width: 15px;
height: auto;
margin-bottom: 3px;
}
.custom-checkbox{
margin-right: 5px;
position: relative;
top: 2px;
}

input[type="checkbox"] {
accent-color: #FF5900;
}

.btnopt{
padding: 0;
}
.btns-btnopt{
border-color: #888 !important;
border-radius: 0;
}
.btns-btnopt:hover{
background-color: #f7f7f7;
}

/* IMPRESION */
.btn-group{
font-size: 11px;
background: #080060;
height: 30px;
margin-left: auto;
margin-top: 10px;
margin-right: 10px;
}
#defaultPrinter{
padding: 0;
padding-left: 10px;
padding-right: 10px;
font-size: 11px;
color: #fff;
}
#id_dropdown_impresion{
background: #080060;
color: #fff;
padding: 0;
padding-left: 5px;
padding-right: 5px;
}
#printerDropdown{
font-size: 11px;
padding: 0;
padding-top: 5px;
}
.dropdown-item{
padding: 0;
padding-left: 5px;
}
.dropdown-item:focus{
background-color: #080060;
color: white;
}
#btnModalPrint{
font-size: 25px;
margin-top: 5px;
margin-right: 10px;
}
#btnModalNewOperation{
padding: 0;
padding-left: 10px;
padding-right: 10px;
font-size: 11px;
background-color: #FF5900;
color: #fff;
height: 30px;
margin-top: 10px;
}

/* Layout Windows */
.layout-tab-row {
width: 100%;
text-align: center;
margin-top: 20px;
margin-bottom: 30px;
}
.layout-tab-btn {
font-size: 18px;
padding: 5px;
padding-right: 8px;
padding-left: 8px;
margin-right: 5px;
border: none;
cursor: pointer;
border-radius: 5px;
}
.layout-tab-btn.active {
background-color: #080060;
color: #fff;
}
.layout-tab-btn:not(.active) {
background-color: #FF5900;
color: #fff;
}
.layout-tab-btn:last-child {
margin-right: 0;
}
.layout-tab-content {
width: 100%;
}
.layout-tab-panel {
display: none;
}
.layout-tab-panel.active {
display: block;
}
.layout-scroll-container {
width: 100%;
overflow-x: auto;
}

.context-menu {
position: absolute;
list-style: none;
margin: 0;
padding: 4px 0;
background: #fff;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
z-index: 2000;
}
.context-menu li {
display: flex;
align-items: center;
padding: 6px 12px;
cursor: pointer;
white-space: nowrap;
font-size: 14px;
}
.context-menu li:hover {
background: #f0f0f0;
}
.context-menu li i {
margin-right: 8px;
font-size: 0.9em;
}

.tabs-environments-container {
width: 100%;
background: #f7f7f7;
margin-left: 15px;
display: flex;
align-items: center;
padding: 8px;
padding-bottom: 0;
border-radius: 8px;
margin-bottom: 25px;
}
.tabs-environments-btn {
font-size: 18px;
border: none;
background: transparent;
color: #888;
cursor: pointer;
padding: 5px 10px;
}
.tabs-environments-btn.selected {
background: #fff;
color: #080060;
font-weight: bold;
border-radius: 3px;
}
.tabs-environments-separator {
margin: 0 5px;
color: #888;
}

.legend-layout-container {
text-align: right;
font-size: 14px;
}
.legend-layout-label.libre {
color: #076031;
}
.legend-layout-label.ocupado {
color: #e9512e;
}
.legend-layout-label.pre-cuenta {
color: #080060;
}
.legend-layout-label.reservada {
color: #ece214;
}
#tabs-newTab{
margin-left: 10px;
}
.icon-arrow-back{
width: 50px;
height: auto;
margin-right: 10px;
margin-top: 25px;
}
#layout-windows {
width: 1000px;
height: 540px;
position: relative;
background-color: #fff;
overflow: hidden;
margin: 0 auto;
}
.draggable {
position: absolute;
cursor: move;
user-select: none;
white-space: nowrap;
display: flex;
flex-direction: column;
align-items: center;
}

/* Layout Elements Status */
.draggable-element{
padding-left: 5px;
padding-right: 5px;
display: flex;
align-items: center;
justify-content: center;
}
.draggable-free{
background-color: #ebfff5;
color: #076031;
border: 3px solid #076031;
}
.draggable-occupied{
background-color: #fff7f3;
color: #e9512e;
border: 3px solid #e9512e;
}
.draggable-collect{
background-color: #eaeef6;
color: #080060;
border: 3px solid #080060;
}

/* Layout Elements Shape */
.draggable-round-small{
height: 120px;
width: 120px;
border-radius: 50%;
}
.draggable-round-medium{
height: 160px;
width: 160px;
border-radius: 50%;
}
.draggable-round-large{
height: 200px;
width: 200px;
border-radius: 50%;
}
.draggable-square-small{
height: 120px;
width: 120px;
border-radius: 15px;
}
.draggable-square-medium{
height: 160px;
width: 160px;
border-radius: 15px;
}
.draggable-square-large{
height: 200px;
width: 200px;
border-radius: 15px;
}
.draggable-rectangle-horizontal-small{
height: 60px;
width: 120px;
border-radius: 5px;
}
.draggable-rectangle-horizontal-medium{
height: 80px;
width: 160px;
border-radius: 5px;
}
.draggable-rectangle-horizontal-large{
height: 100px;
width: 200px;
border-radius: 5px;
}
.draggable-rectangle-vertical-small{
height: 120px;
width: 60px;
border-radius: 5px;
}
.draggable-rectangle-vertical-medium{
height: 160px;
width: 80px;
border-radius: 5px;
}
.draggable-rectangle-vertical-large{
height: 200px;
width: 100px;
border-radius: 5px;
}

/* Other Elements */


/* Elements Window */
.top-row{
display:flex; justify-content: space-between; align-items: center;
}
.middle-row{
text-align: center; margin-top: 5px;
font-size: 14px;
}
.bottom-row{
display:flex; justify-content: space-between; margin-top: 5px;
}
.draggable .nombre {
font-size: 20px;
text-align: center;
width: 100%;
}
.span-element{
display: block;
font-size: 8.5px;
}
.left-text,
.time-text{
font-size: 9px;
}

.draggable img {
display: block;
pointer-events: none;
}
.icon-element{
width: 35px;
height: auto;
margin: 0 auto;
}
.icon-element-bar{
width: 150px;
height: auto;
}
.icon-element-bathroom-men,
.icon-element-bathroom-unisex,
.icon-element-bathroom-women{
width: 80px;
height: auto;
}
.icon-element-cashier{
width: 100px;
height: auto;
}
.icon-element-clock{
width: 50px;
height: auto;
}
.icon-element-fridge{
width: 50px;
height: auto;
}
.icon-element-laptop{
width: 60px;
height: auto;
}
.icon-element-printer{
width: 50px;
height: auto;
}
.icon-element-user{
width: 60px;
height: auto;
}
.icon-element-vase{
width: 60px;
height: auto;
}
.icon-element-vertical-line{
width: 20px;
height: auto;
}
.icon-element-waiter{
width: 80px;
height: auto;
}

/* Customers Search */
.suggestions-container{
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: #fff;
padding-left: 15px;
max-height: 200px;
overflow-y: auto;
font-size: 10px;
color: #888;
z-index: 1000;
}
.suggestion-item{
padding-top: 5px;
cursor: pointer;
}
.suggestion-item:hover{
background-color: #f7f7f7;
}

/* Shifts */
#closeModalShift{
padding-right: 20px;
}

/* Margin Left Auto */
.margin-left-auto{
margin-left: auto;
}

/* Shift Open */
.icon-close{
width: 18px;
height: auto;
margin-right: 10px;
margin-top: 25px;
}
.shift-open-container{
display: flex;
padding-left: 30px;
padding-right: 30px;
}
.shift-open-leftCol{
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.shift-open-img{
width: 80px;
height: auto;
margin-left: 20px;
margin-right: 50px;
}
.shift-open-rightCol{
flex: 2;
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 10px;
}
.shift-open-title{
text-align: center;
color: #080060;
font-size: 20px;
font-weight: bold;
margin-bottom: 30px;
}
.shift-open-label{
color: #080060;
font-size: 15px;
font-weight: bold;
white-space: nowrap;
margin-right: 20px;
}
.shift-open-row2{
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
}
.shift-open-input{
border: 1px solid #FF5900 !important;
height: 20px;
}
.shift-open-btnContainer{
text-align: center;
margin-top: 20px;
}
.shift-open-btn{
background-color: #FF5900;
color: white;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
border: none;
border-radius: 5px;
font-size: 13px;
white-space: nowrap;
}
.shift-open-payments-panel{
width:100%;
border:1px solid rgba(0,0,0,.08);
border-radius:14px;
padding:12px;
background:#fff;
box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
.shift-open-payments-header{
margin-bottom:10px;
}
.shift-open-payments-title{
font-weight:700;
font-size:14px;
color:#222;
letter-spacing:.2px;
}
.shift-open-payments-controls{
display:flex;
gap:10px;
align-items:center;
flex-wrap:wrap;
margin-bottom:10px;
}
.shift-open-payments-select{
flex: 1 1 220px;
min-width: 200px;
height: 40px;
border-radius:12px;
}
.shift-open-payments-addBtn{
flex: 0 0 auto;
height: 40px;
padding: 0 14px;
border: none;
border-radius:12px;
color:#fff;
background: var(--blue);
font-weight:700;
cursor:pointer;
transition: transform .08s ease, filter .15s ease;
}
.shift-open-payments-addBtn:active{ transform: scale(.98); }
.shift-open-payments-addBtn:hover{ filter: brightness(.98); }
.shift-open-payments-list{
display:grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap:10px;
}
@media (max-width: 640px){
.shift-open-payments-list{ grid-template-columns: 1fr; }
}
.shift-open-payment-card{
border:1px solid rgba(0,0,0,.08);
border-radius:14px;
padding:10px;
background: linear-gradient(180deg, rgba(0,0,0,.01), rgba(0,0,0,0));
}
.shift-open-payment-cardHead{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:8px;
}
.shift-open-payment-name{
font-weight:700;
font-size:13px;
color:#222;
}
.shift-open-payment-removeBtn{
width:34px;
height:34px;
border-radius:12px;
border:1px solid rgba(0,0,0,.08);
background:#fff;
cursor:pointer;
transition: transform .08s ease, background .15s ease;
}
.shift-open-payment-removeBtn:hover{
background: rgba(255,89,0,.08);
border-color: rgba(255,89,0,.25);
}
.shift-open-payment-removeBtn:active{ transform: scale(.98); }
.shift-open-payment-field{
display:flex;
align-items:center;
gap:8px;
}
.shift-open-payment-prefix{
flex: 0 0 auto;
font-weight:800;
color: var(--orange);
font-size:13px;
padding: 0 6px;
border-radius:10px;
background: rgba(255,89,0,.08);
border:1px solid rgba(255,89,0,.18);
height: 38px;
display:flex;
align-items:center;
}
.shift-open-payment-input{
flex: 1 1 auto;
height: 40px;
border-radius:12px;
}

/* Shift Close */
.shift-close-container {
display: flex;
flex-direction: column;
gap: 15px;
padding: 15px;
}
.shift-close-row1,
.shift-close-row2,
.shift-close-btnRow {
display: flex;
justify-content: space-between;
align-items: center;
}
.shift-close-row1{
position: relative;
bottom: 20px;
}
.shift-close-leftCol {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.shift-close-img {
width: 70px;
height: auto;
}
.shift-close-rightCol {
flex: 2;
display: flex;
justify-content: center;
align-items: center;
}
.shift-close-title {
text-align: center;
color: #080060;
font-weight: bold;
font-size: 18px;
margin: 0;
}
.shift-close-label {
color: #111;
font-weight: bold;
font-size: 14px;
white-space: nowrap;
margin-right: 10px;
}
.shift-close-smallIcon {
width: 24px;
height: auto;
position: relative;
left: 5px;
bottom: 1px;
}
.shift-close-infoSpan {
border: 1px solid #888;
border-left: 0;
border-radius: 5px;
padding: 2px 5px;
font-size: 12px;
color: #888;
white-space: nowrap;
}
.shift-div-table{
height: 23vh;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--orange) transparent;
}
.shift-table {
width: 100%;
border-collapse: collapse;
}
.shift-table th,
.shift-table td {
padding: 5px;
text-align: center;
font-size: 13px;
color: #888;
}
.shift-close-info-col {
flex: 1;
display: flex;
align-items: center;
margin-right: 20px;
}
.shift-close-infoLabel {
font-weight: bold;
color: #000;
font-size: 14px;
white-space: nowrap;
margin-right: 10px;
}
.shift-close-infoValue {
font-weight: bold;
color: #080060;
font-size: 14px;
}
.shift-close-input {
border: 1px solid #111 !important;
width: 100px;
height: 20px;
}
.shift-table-expenses{
color: #FF5900 !important;
}
.shift-close-row5 {
width: 100%;
display: flex;
flex-direction: column;
gap: 5px;
}
.shift-close-notaLabel {
font-weight: bold;
margin-bottom: 5px;
color: #888;
font-size: 15px;
}
.shift-close-textarea {
width: 100%;
border-color: #080060 !important;
text-align: left;
padding: 5px;
height: auto;
}
.shift-close-differentialRow {
width: 100%;
background: #ff5900;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 3px;
font-size: 13px;
}
.shift-close-diff-col {
flex: 1;
display: flex;
align-items: center;
gap: 5px;
}
.shift-close-btnRow {
width: 100%;
display: flex;
justify-content: center;
}
.shift-close-btn {
padding: 5px;
padding-left: 10px;
padding-right: 10px;
border: none;
border-radius: 5px;
font-size: 13px;
}
.shift-count-grid{
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
width: 100%;
margin-top: 10px;
}
.shift-count-grid{
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)); /* máximo 3 */
gap: 8px;                /* menos espacio */
width: 100%;
margin-top: 6px;
align-items: stretch;
}
@media (max-width: 900px){
.shift-count-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
.shift-count-grid{ grid-template-columns: 1fr; }
}
.shift-count-card{
background: #fff;
border: 1px solid rgba(0,0,0,.08);
border-radius: 10px;
padding: 8px 10px;          /* menor */
box-shadow: 0 1px 6px rgba(0,0,0,.04);
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
min-width: 0;
}
.shift-count-title{
white-space: normal;
font-size: 11px;
}
@media (max-width: 420px){
.shift-count-card{
flex-direction: column;
align-items: stretch;
}
}

/* CSS APIERP */
.apierp_bg_slash{
background: linear-gradient(135deg, 
#FF5900 0%, 
#FF5900 50%, 
#080060 50%, 
#080060 100%
);
color: #fff;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
border: none;
border-radius: 5px;
font-size: 13px;
}

/* Create Window */
#input-setWindowType,
#inputItemPrice{
margin-right: 20px;
}
#detalleModalShift,
#detalleModalWindowShift,
#detalleModalCreateWindow,
#detalleModalCreateItem{
width: auto;
border-radius: 50px;
padding: 0;
padding-bottom: 20px;
}

/* Item Modal */
.product-zoom-area{
position: absolute;
top: 0;
left: 15px;
width: 50px;
height: 50px;
cursor: zoom-in;
background: transparent;
z-index: 2;
}
.carousel {
position: relative;
display: flex;        /* necesario para alinear verticalmente */
align-items: center;  /* centra contenido en eje Y */
justify-content: center; /* centra track entre flechas */
flex: 1;              /* ocupa todo el espacio vertical que queda */
overflow: hidden;     /* oculta lo que está fuera del contenedor horizontalmente */
}
.carousel-prev,
.carousel-next {
background: none;
border: none;
cursor: pointer;
position: absolute;
top: 50%;                 /* verticalmente al centro del contenedor */
transform: translateY(-50%); /* compensar el propio alto del botón */
z-index: 2;
/* Puedes aumentar el tamaño clicable si quieres: */
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.carousel-prev {
left: 10px; 
}
.carousel-next {
right: 10px;
}
.carousel-next img {
transform: rotate(180deg);
transform-origin: center center;
}
.carousel-track-wrapper {
overflow: hidden;
width: 100%;   /* ocupa TODO el ancho disponible entre flechas */
height: 100%;  /* ocupa toda la altura del carousel */
}
.carousel-track {
display: flex;
height: 100%;
transition: transform 0.3s ease; /* animación fluida al mover */
}
.carousel-track img {
width: 100%;
height: 100%;
object-fit: contain;
flex-shrink: 0;
}
.infoItem-title{
text-align: center;
font-size: 16px;
font-weight: bold;
margin-top: 20px;
}
#sectionInfoItem{
text-align: center;
}
.btn-details-ntf-variant{
background: #FF5900;
color: #fff;
border: none;
font-size: 14px;
padding-left: 5px;
padding-right: 5px;
padding-top: 2px;
padding-bottom: 2px;
}

/* ADD ITEM */
.newItem_container{
padding-right: 15px;
padding-left: 15px;
}
.newItem-modal-title{
text-align: center;
color: #080060;
font-size: 20px;
font-weight: bold;
margin-bottom: 20px;
}
.newItem-title{
display: flex;
flex: 1;
align-items: center;
justify-content: center;
}
.newItem-label{
color: #080060;
font-size: 15px;
font-weight: bold;
white-space: nowrap;
}
.newItem-span{
color: var(--lead);
font-size: 15px;
font-weight: bold;
white-space: nowrap;
text-align: center;
}
.newItem-span-min{
color: var(--lead);
font-size: 12px;
font-weight: bold;
}
.newItem_btn {
background: var(--orange);
color: #fff;
border-radius: 50%;
width: 20px;
height: 20px;
font-size: 12px;
border: none;
cursor: pointer;
}
.new-item-img{
width: 80px;
height: auto;
}
.image_box {
position: relative;
width: 100px;
height: 100px;
border: 2px dashed #ccc;
border-radius:4px;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
margin-bottom: 15px;
}
.image_box img {
width:100%;
height:100%;
object-fit:cover;
border-radius:4px; 
}
.image_box .remove {
position:absolute;
top:2px;
right:2px;
background:#fff;
border-radius:50%;
cursor:pointer;
padding:2px; 
}
.newItem_col {
flex: 1;
}
.newItem_section{
margin-top: 10px;
}
.newItem_hidden {
display: none;
}
.newItem_title_table{
display: flex;
gap: .5rem;
margin-top: .5rem;
align-items: center;
}
.options_list {
position:absolute;
top:100%; left:0;
right:0;
max-height:150px;
overflow:auto;
background:#fff;
border:1px solid #aaa;
z-index:10;
scrollbar-width: thin;
scrollbar-color: var(--blue) transparent; 
}
.options_list div{
padding:.5rem;
cursor:pointer;
font-size: 11px;
}
.options_list div:hover{
background:#eee;
}
.selected_tags {
display:flex;
flex-wrap:wrap;
gap:.25rem;
margin-top:.25rem;
}
.tag {
border: 1px solid var(--blue);
background: var(--white);
padding-left: 5px;
padding-right: 5px;
padding-top: 1px;
border-radius:4px;
display:flex;
align-items:center;
font-size: 11px;
color: var(--lead);
}
.tag .remove-tag{
margin-left:.25rem;
cursor:pointer;
font-size: 13px;
}
.variant_header{
text-align: center;
background: var(--orange);
margin-top: 5px;
}
.variant_header_span{
font-size: 13px;
color: var(--white);
}
.removeVariant{
background: var(--white) !important;
float: right;
}
.newItem_row {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.newItem_col-inline label {
margin-right: 1rem;
}
.newItem_list > div{
display: flex;
gap: .5rem;
margin-top: .5rem;
align-items: center;
}

/* Item Units */
.newItem_list > div.unit_card {
display: flex;
flex-direction: column;
gap: .35rem;
margin-top: .5rem;
padding: .6rem .8rem;
border: 1px solid #e0e0e0;
border-radius: 8px;
background: #fff;
align-items: normal;
}
.unit_row {
display: flex;
flex-wrap: wrap;
gap: .5rem;
}
.unit_col {
flex: 1 1 0;
min-width: 140px;
}
.unit_gain_info {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .25rem;
margin-top: .15rem;
font-size: .75rem;
opacity: .9;
}
.unit_gain_info .gainMode {
border: none;
background: transparent;
padding: 0 .3rem;
font-size: .7rem;
cursor: pointer;
opacity: .5;
}
.unit_gain_info .gainMode.active {
opacity: 1;
font-weight: 600;
background: var(--orange);
color: white;
border-radius: 5px;
}
.unit_gain_info .gainInput {
width: 4rem;
border: none;
background: transparent;
font-size: .75rem;
padding: 0 2px;
}
.unit_gain_info .gainText {
white-space: nowrap;
color: var(--orange);
font-weight: bold;
}
.newItem-span-min {
font-size: .78rem;
}

.multi_select {
position: relative;
}
.ms_input {
width: 100%;
padding: .5rem;
border: 1px solid #aaa;
border-radius:4px;
}
#importNewItems {
margin-top: 15px;
max-width: 500px;
margin: 1rem auto;
padding: 1rem;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
border-radius: 8px;
background: #fff;
text-align: center;
}
.drop-zone {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
border: 2px dashed #888;
border-radius: 6px;
transition: background 0.2s, border-color 0.2s;
text-align: center;
cursor: pointer;
overflow: hidden;
}
.drop-zone:hover {
background: #f9f9f9;
border-color: #555;
}
.drop-zone.dragover {
background: #e8e8ff;
border-color: #080060;
}
.drop-zone__prompt {
color: #666;
font-size: 0.95rem;
pointer-events: none;
}
.drop-zone__input {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.drop-zone__remove {
position: absolute;
top: 6px;
right: 6px;
background: #e00;
color: #fff;
border: none;
border-radius: 50%;
width: 24px;
height: 24px;
font-size: 0.9rem;
line-height: 1;
cursor: pointer;
}
progress {
width: 100%;
height: 0.8rem;
margin: 0.8rem 0;
appearance: none;
}
progress::-webkit-progress-bar {
background: #eee;
border-radius: 4px;
}
progress::-webkit-progress-value {
background: #080060;
border-radius: 4px;
}
progress::-moz-progress-bar {
background: #080060;
border-radius: 4px;
}
#upload-btn{
background: var(--blue);
color: var(--white);
font-size: 13px;
margin-top: 10px;
border: none;
padding-left: 8px;
padding-right: 8px;
}
#status{
font-size: 13px;
color: #333;
}
.p-dowload-template-excel{
font-size: 12px !important;
font-weight: bold;
}

/* Reports */
.row-report-details{
padding-top: 30px;
padding-right: 10px;
padding-left: 10px;
}
.th-bg-blue{
background-color: var(--blue) !important;
color: var(--white) !important;
}
.th-bg-orange{
background-color: var(--orange) !important;
color: var(--white) !important;
}
.td-bg-none{
background-color: none !important;
background: none !important;
}

/* apiWAChat Send */
.whatsapp-form {
max-width: 600px;
margin: auto;
background: #fff;
border: 1px solid #ddd;
padding: 1.5rem;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.whatsapp-form .field {
margin-bottom: 1rem;
}
.whatsapp-form label {
display: block;
margin-bottom: .4rem;
font-weight: 600;
color: #888;
font-size: .95rem;
}

/* Emisor */
#setCredentialsApiWAChat {
width: 100%;
padding: .5rem;
font-size: .95rem;
border: 1px solid #ccc;
border-radius: 4px;
background: #fff;
color: #080060;
}

/* Select país */
.custom-select-pais-flag {
position: relative;
flex: 0 0 30%;
}
.select-button-pais-flag {
display: flex;
justify-content: space-between;
align-items: center;
background: #fff;
padding: .4rem .6rem;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
color: #080060;
}
.dropdown-list-pais-flag {
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: #fff;
border: 1px solid #080060;
border-radius: 4px;
display: none;
max-height: 140px;
overflow-y: auto;
z-index: 10;
}
.dropdown-item-pais-flag {
padding: .4rem .6rem;
display: flex;
align-items: center;
cursor: pointer;
}
.dropdown-item-pais-flag:hover {
background: #f0f0f0;
}
.dropdown-item-pais-flag img {
width: 20px; height: 14px; margin-right: .5rem;
}

/* Textarea */
#waMessage {
width: 100%;
min-height: 100px;
padding: .6rem;
border: 1px solid #ccc;
border-radius: 4px;
font-size: .95rem;
resize: vertical;
}

/* Área Drag&Drop */
#waDropArea {
border: 2px dashed #080060;
border-radius: 6px;
padding: 1rem;
text-align: center;
color: #888;
cursor: pointer;
transition: background .2s;
}
#waDropArea.dragover {
background: rgba(8,0,96, .05);
}
#waDropArea input {
display: none;
}

/* Preview */
.preview-list {
display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem;
}
.preview-item {
position: relative;
border: 1px solid #ccc;
border-radius: 4px;
width: 80px; height: 80px;
font-size: .75rem;
text-align: center;
overflow: hidden;
background: #fafafa;
}
.preview-item img,
.preview-item video {
max-width: 100%; max-height: 60px; display: block; margin: auto;
}
.remove-btn {
position: absolute; top: 2px; right: 2px;
background: #FF5900; color: #fff; border: none;
border-radius: 50%; width: 18px; height: 18px;
font-size: 12px; line-height: 18px; text-align: center;
cursor: pointer;
}

/* Botones en fila */
.button-row {
display: flex; justify-content: flex-end;
gap: .5rem; align-items: center;
}
.button-row button {
display: flex; align-items: center; gap: .3rem;
border: none; padding: .6rem 1rem; border-radius: 4px;
font-size: .95rem; cursor: pointer; color: #fff;
}
.button-row button#sendWhatsApp {
background: #00bb2d;
}
.button-row button#sendEmail {
background: #080060;
}
.button-row button.download {
background: #888;
}

.table-no-hover tbody tr:hover {
background-color: transparent !important;
}

/* Responsive Design */
@media (max-width: 768px){

#div_section_left{
width: 100% !important;
}
#div_section_right{
width: 100% !important;
}

.modal{
max-width: 100% !important;
width: 100% !important;
}
#dynamicContent{
width: 100% !important;
}

/* Search More Products */
.container-responsive-main,
.container-responsive-main-header{
display: flex;
justify-content: center;
align-items: center;
}

.payment-contado {
margin-left: 0px;
}
.payment-mixto {
margin-right: 0px;
}
.payment-option {
display: block;
}
.div_margen{
display: none;
}

/* MODAL OPTIONS */
.div-group-container {
display: block;
}
.container-section-options{
width: 50%;
}
.container-title-options{
width: 50%;
}
.div-width-options{
width: 100%;
}

/* SHIFTS */
.container-shift {
margin: 10px;
padding: 15px;
}
.form-group-shift {
flex-direction: column;
align-items: stretch;
}
.form-group-shift label {
text-align: left;
margin-bottom: 5px;
}

/* LAYOUT */
.layout-tab-btn{
font-size: 15px;
padding: 0;
padding-right: 5px;
padding-left: 5px;
margin-right: 0px;
}
.tabs-environments-separator{
margin: 0;
}
#tabs-newTab{
margin-left: 0;
}
.img-tab-home{
width: 25px;
}

/* Create Window */
.shift-open-container{
display: block;
}

.shift-open-img{
margin-left: 0;
margin-right: 0;
}

/* ADD ITEM */
.image_box{
width: 45% !important;
display: inline-block !important;
margin: 5px !important;
text-align: center !important;
padding-top: 10% !important;
}
.drop-zone {
padding: 1rem;
}
.drop-zone__prompt {
font-size: 0.9rem;
}
#upload-btn {
width: 100%;
padding: 0.6rem;
}

/* DEPARTAMENTO / PROVINCIA / DISTRITO (PE) */
.custom-input-cart-setClientSupplierProvince{
margin-left: 0px;
margin-right: 0px;
}
}

.eqRelationBtn{
white-space: normal;
min-height: 42px;
height: auto;
line-height: 1.25;
font-weight: normal;
background: #FF5900;
color: #fff;
text-align: center !important;
}

.eqRelationBtn:hover{
opacity: .92;
}

/* RENDER PRODUCTS + PREVIEW ADD TO CART */
#productPickerOverlay{
position:fixed;
inset:0;
background:rgba(0,0,0,.45);
display:none;
align-items:center;
justify-content:center;
z-index:9999999;
padding:14px;
}
#productPickerOverlay.pp-open{
display:flex;
}
#productPickerModal{
width:min(920px, 100%);
max-height:90vh;
background:#fff;
border-radius:18px;
box-shadow:0 20px 60px rgba(0,0,0,.22);
display:flex;
flex-direction:column;
overflow:hidden;
}
#productPickerHeader{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:14px 16px;
border-bottom:1px solid #eee;
}
#productPickerHeaderLeft{
display:flex;
align-items:center;
gap:8px;
min-width:0;
}
#productPickerBack{
display:none;
border:none;
background:#f5f5f5;
border-radius:10px;
padding:8px 10px;
cursor:pointer;
font-size:13px;
}
#productPickerTitle{
font-size:16px;
font-weight:700;
color:#111;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
#productPickerClose{
border:none;
background:transparent;
font-size:22px;
cursor:pointer;
line-height:1;
padding:2px 6px;
color:#555;
}
#productPickerBody{
padding:14px;
overflow:auto;
}
#productPickerSubtitle{
font-size:12px;
color:#666;
margin-bottom:10px;
}
#productPickerGrid{
display:grid;
grid-template-columns:repeat(2, minmax(0,1fr));
gap:12px;
}
.pp-card{
border:1px solid #e6e6e6;
border-radius:16px;
padding:12px;
cursor:pointer;
transition:.15s ease;
background:#fff;
display:flex;
flex-direction:column;
gap:8px;
min-width:0;
}
.pp-card:hover{
border-color:#FF5900;
box-shadow:0 6px 22px rgba(255,89,0,.10);
transform:translateY(-1px);
}
.pp-card.pp-disabled{
opacity:.55;
cursor:not-allowed;
background:#fafafa;
}
.pp-card-top{
display:flex;
justify-content:space-between;
gap:8px;
align-items:flex-start;
}
.pp-card-title{
font-size:14px;
font-weight:700;
color:#111;
line-height:1.2;
word-break:break-word;
}
.pp-card-unit{
font-size:12px;
font-weight:700;
color:#080060;
background:#eef0ff;
padding:4px 8px;
border-radius:999px;
white-space:nowrap;
}
.pp-card-code{
font-size:12px;
color:#666;
}
.pp-card-desc{
font-size:12px;
color:#444;
line-height:1.35;
word-break:break-word;
}
.pp-card-meta{
display:flex;
flex-wrap:wrap;
gap:8px;
}
.pp-badge{
font-size:11px;
padding:5px 8px;
border-radius:999px;
background:#f5f5f5;
color:#333;
}
.pp-badge.pp-stock-low{
background:#fff3e9;
color:#FF5900;
}
.pp-badge.pp-stock-ok{
background:#eefaf0;
color:#158219;
}
.pp-badge.pp-price{
background:#f4f3ff;
color:#302C78;
}
.pp-badge.pp-can-add{
background:#eefaf0;
color:#158219;
font-weight:700;
}
.pp-badge.pp-cannot-add{
background:#fff3e9;
color:#FF5900;
font-weight:700;
}
.pp-empty{
border:1px dashed #ddd;
border-radius:16px;
padding:24px 14px;
text-align:center;
font-size:13px;
color:#777;
background:#fafafa;
}
@media (max-width: 768px){
#productPickerModal{
width:min(100%, 100%);
max-height:92vh;
border-radius:16px;
}
#productPickerHeader{
padding:12px;
}
#productPickerBody{
padding:12px;
}
#productPickerGrid{
grid-template-columns:1fr;
gap:10px;
}
.pp-card{
padding:11px;
}
.pp-card-title{
font-size:13px;
}
}

.product{
position:relative;
overflow:hidden;
}
.product-group-marker{
position:absolute;
z-index:4;
display:inline-flex;
align-items:center;
gap:4px;
padding:4px 8px;
border-radius:999px;
font-size:10px;
font-weight:700;
line-height:1;
backdrop-filter: blur(4px);
user-select:none;
pointer-events:none;
max-width:calc(100% - 16px);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.product-group-marker.marker-unit{
background:rgba(8,0,96,.10);
color:#080060;
border:1px solid rgba(8,0,96,.18);
}

.product-group-marker.marker-product{
background: rgba(8, 0, 96, .10);
color: #080060;
border: 1px solid rgba(8, 0, 96, .18);
}

.product-group-marker .pgm-icon{
font-size:11px;
line-height:1;
}

/* =========================
VISTA CUADRICULA
abajo centrado
========================= */
.product.group-view-grid .product-group-marker{
left: auto;
right: 1px;
top: 1px;
bottom: auto;
padding: 2px;
}

/* =========================
VISTA LISTA
abajo derecha
========================= */
.product.group-view-list .product-group-marker{
right:1px;
left:auto;
top:1px;
bottom:auto;
transform:none;
padding: 2px;
}

@media (max-width: 768px){
.product-group-marker{
padding:4px 7px;
font-size:9px;
}

.product-group-marker .pgm-icon{
font-size:10px;
}
}

.btn-product-action-list,
.btn-product-action-grid{
opacity: .85;
vertical-align: middle;
}

.btn-product-action-list:hover,
.btn-product-action-grid:hover{
opacity: 1;
transform: scale(1.05);
}

.pp-card-actions{
display: flex;
justify-content: flex-end;
align-items: center;
gap: 6px;
margin-top: 8px;
}

.pp-card-action{
border: none;
background: rgba(0,0,0,.06);
border-radius: 999px;
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
line-height: 1;
cursor: pointer;
}

.pp-card-action:hover{
background: rgba(0,0,0,.12);
}

.pp-volume-price-section{
width: 100%;
flex-basis: 100%;
margin-top: 10px;
padding-top: 8px;
border-top: 1px dashed rgba(0,0,0,.12);
}

.pp-volume-price-title{
font-size: 11px;
font-weight: 800;
color: var(--lead);
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: .3px;
}

.pp-volume-price-row{
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
width: 100%;
}

.pp-volume-price-badge{
display: inline-flex;
align-items: center;
background: var(--orange);
color: var(--white);
font-weight: normal;
font-size: 11px;
border-radius: 999px;
padding: 4px 8px;
line-height: 1.1;
white-space: nowrap;
}

/* LOGIN */
:root{--fasyb-orange:#FF5900;--fasyb-orange-light:rgba(255,89,0,0.1);--fasyb-blue:#080060;--fasyb-blue-light:rgba(8,0,96,0.08);--white:#FFFFFF;--fasyb-gradient-bg:linear-gradient(135deg,#080060,#3a00ff,#e0c3fc);--welcome-bg:linear-gradient(145deg,#421cd9,#f6f2ea,#f0f4f8);--dark-bg-start:#ffffff;--dark-bg-end:#2d2de2;--medium-gray:#E0E2E7;--text-dark:#1e293b;--text-medium:#475569;--text-light:#64748b;--shadow-subtle:0 4px 20px rgba(0,0,0,0.06);--shadow-sharp:0 10px 40px rgba(8,0,96,0.12);--transition-speed:0.3s}

/* FUENTES */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* SCROLLBAR */
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--light-bg);border-radius:4px}
::-webkit-scrollbar-thumb{background:#FF5900;border-radius:4px;border:2px solid var(--light-bg)}
::-webkit-scrollbar-thumb:hover{background:#e04e00}

/* BODY */
.welcome_container_body{display:flex;flex-direction:column;align-items:center;min-height:100vh;--dark-bg-start:#cad5ff;--dark-bg-end:#fdfdfd;background:linear-gradient(145deg,var(--dark-bg-start),var(--dark-bg-end));padding:15px 15px 5px 15px;color:var(--white);position:relative;font-size:16px}

/* BACKGROUND ANIMADO */
.welcome_background_animated_blobs{position:fixed;top:0;left:0;width:100%;height:100%;overflow:hidden;pointer-events:none;z-index:-1}
.welcome_blob{position:absolute;background:linear-gradient(135deg,#3a00ff,#080060);border-radius:50%;opacity:0.08;animation:welcome_blob_movement 20s infinite ease-in-out alternate;filter:blur(20px)}
.welcome_blob:nth-child(1){width:200px;height:200px;top:10%;left:15%;animation-delay:0s}
.welcome_blob:nth-child(2){width:150px;height:150px;top:40%;left:80%;animation-delay:5s}
.welcome_blob:nth-child(3){width:180px;height:180px;bottom:5%;right:20%;animation-delay:10s}
.welcome_blob:nth-child(4){width:220px;height:220px;top:60%;left:10%;animation-delay:15s}
.welcome_blob:nth-child(5){width:120px;height:120px;bottom:15%;left:60%;animation-delay:20s}
@keyframes welcome_blob_movement{0%{transform:translate(0,0) scale(1)}25%{transform:translate(40px,-60px) scale(1.1)}50%{transform:translate(-30px,30px) scale(0.9)}75%{transform:translate(20px,40px) scale(1.05)}100%{transform:translate(0,0) scale(1)}}

/* LOGIN CONTAINER */
.welcome_login_container{display:flex;width:100%;max-width:950px;background:rgba(255,255,255,0.95);border-radius:24px;overflow:hidden;animation:welcome_slideIn 0.8s ease-out forwards;z-index:1;margin:20px 0;box-shadow:var(--shadow-sharp),0 0 0 1px rgba(255,255,255,0.8),0 0 0 0px rgba(255,89,0,0.1);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(12px)}
@keyframes welcome_slideIn{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}

/* WELCOME SECTION */
.welcome_welcome_section{flex:1;background:linear-gradient(135deg,#ffffff 50%,#fbfbfb 50%);padding:70px 50px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;border-right:0px solid rgba(20,0,237,0.08);position:relative;overflow:hidden}
.welcome_welcome_section::before{content:'';position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,var(--fasyb-orange),var(--fasyb-blue))}
.welcome_welcome_title{display:flex;align-items:center;justify-content:center;gap:8px;font-size:32px;font-weight:700;color:var(--fasyb-orange)}
.welcome_logo_inline{height:50px;width:auto}
.welcome_logo_inline{height:2.2em;vertical-align:middle;margin-left:6px;transform:translateY(-17px)}
.welcome_welcome_title::after{content:'';position:absolute;bottom:-8px;left:25%;width:50%;height:3px;background:linear-gradient(90deg,transparent,var(--fasyb-orange),transparent);border-radius:2px}
.welcome_welcome_subtitle{font-size:16px;color:var(--text-medium);margin-bottom:40px;max-width:380px;line-height:1.6;opacity:0;animation:welcome_fadeInText 0.6s ease-out 0.5s forwards;font-weight:400}
.welcome_features_list{display:flex;flex-direction:column;gap:12px;margin:30px 0 40px 0;max-width:380px;opacity:0;animation:welcome_fadeInText 0.6s ease-out 0.7s forwards}
.welcome_feature_item{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--text-medium);text-align:left}
.welcome_feature_icon{width:24px;height:24px;background:var(--fasyb-orange-light);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--fasyb-orange);font-size:12px;flex-shrink:0}
@keyframes welcome_fadeInText{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* FEATURES HORIZONTAL */
.welcome_features_horizontal{display:flex;justify-content:space-between;gap:20px;margin:0 0 30px 0;max-width:350px;opacity:0;animation:welcome_fadeInText 0.6s ease-out 0.7s forwards}
.welcome_features_left,.welcome_features_right{display:flex;flex-direction:column;gap:12px;flex:1}

/* ILLUSTRATION */
.welcome_illustration_container{width:88%;margin:5px 0 0 0;max-width:350px;background:var(--white);border-radius:16px;box-shadow:var(--shadow-subtle);overflow:hidden;margin:20px 0;opacity:0;animation:welcome_fadeInText 0.6s ease-out 0.9s forwards;border:0px solid #080060;border-left:5px solid var(--fasyb-orange);transition:transform 0.3s ease,box-shadow 0.3s ease}
.welcome_illustration_container:hover{transform:translateY(-5px);box-shadow:0 15px 30px rgba(0,0,0,0.1)}
.welcome_illustration_panel{width:100%;text-align:center;padding:20px}
@keyframes welcome_rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.welcome_illustration_content{display:inline-block;position:relative;z-index:1;background:rgba(255,255,255,0.85);padding:5px 9px;border-radius:8px;backdrop-filter:blur(5px);display:flex;align-items:center;gap:10px;box-shadow:0 4px 12px rgba(0,0,0,0.05);font-size:16px;line-height:1.2}
.welcome_illustration_content i{color:var(--fasyb-orange);font-size:16px}
.welcome_illustration_content span{color:var(--fasyb-blue);font-weight:100;font-size:12px;word-wrap:break-word;display:block;max-width:180px;margin:0 auto;text-align:center;line-height:1.3;white-space:normal}
.welcome_illustration_verse{background:var(--white);padding:1px;border-radius:12px;font-size:14px;font-style:normal;font-weight:400;color:var(--text-dark);line-height:1.5;text-align:left;position:relative}
.welcome_illustration_verse_text{display:inline-block;overflow:hidden;letter-spacing:.03em;border-right:.15em solid var(--fasyb-orange);max-width:100%;word-wrap:break-word}
.welcome_illustration_verse_reference{text-align:right;font-weight:600;font-size:12px;color:var(--fasyb-blue);margin-top:0px;margin-bottom:0}

/* LETRERO */
.welcome_illustration{
width:100%;
position:relative;
border:1px solid var(--fasyb-orange);
border-radius:14px;
background:linear-gradient(145deg,#fffaf7,#fff);
overflow:hidden;
min-height:58px;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
transition:all .3s ease;
box-shadow:0 8px 18px rgba(255,89,0,0.08);
}

.welcome_explanation_marquee{
position:relative;
width:100%;
height:52px;
overflow:hidden;
border-radius:10px;
display:block;
}

.welcome_explanation_marquee::before,
.welcome_explanation_marquee::after{
content:"";
position:absolute;
top:0;
width:28px;
height:100%;
z-index:2;
pointer-events:none;
}

.welcome_explanation_marquee::before{
left:0;
background:linear-gradient(to right,#f8f8fb 0%,rgba(248,248,251,0) 100%);
}

.welcome_explanation_marquee::after{
right:0;
background:linear-gradient(to left,#f8f8fb 0%,rgba(248,248,251,0) 100%);
}

.welcome_explanation_track{
position:absolute;
top:0;
left:100%;
height:52px;
display:inline-block;
white-space:nowrap;
will-change:transform;
}

.welcome_explanation_text{
display:inline-block;
white-space:nowrap !important;
font-size: 15px;
font-weight: bold;
line-height:52px;
color:var(--fasyb-orange);
padding-right:80px;
}
.welcome_explanation_closing{
color:#FF5900;
font-weight:800;
margin-left:18px;
display:inline-block;
text-shadow:0 0 8px rgba(255,89,0,0.12);
}

@keyframes welcome_marquee_scroll{
from{
transform:translateX(0);
}
to{
transform:translateX(-100%);
}
}

@media (max-width:768px){
.welcome_explanation_marquee{
height:46px;
}
.welcome_explanation_track{
height:46px;
}
.welcome_explanation_text{
font-size:15px;
line-height:46px;
}
}

@media (max-width:480px){
.welcome_illustration{
padding:10px;
min-height:62px;
}
.welcome_explanation_marquee{
height:42px;
}
.welcome_explanation_track{
height:42px;
}
.welcome_explanation_text{
font-size:13px;
line-height:42px;
}
}

/* LOGIN SECTION */
.welcome_login_section{flex:0.8;padding:30px 30px 30px 30px;display:flex;flex-direction:column;justify-content:flex-start;z-index:3;background:var(--white);position:relative;top:5px}
#welcome_loginForm{width:90%;max-width:310px;align-self:center}

/* TOP LINKS */
.welcome_top_links_container{position:absolute;top:40px;left:50px;right:50px;display:flex;justify-content:space-between;align-items:center;z-index:10}
.welcome_home_link_top{font-weight:normal;color:var(--fasyb-orange);text-decoration:none;font-size:18px;transition:color 0.3s ease,transform 0.3s ease,box-shadow 0.3s ease;background-color:rgba(255,255,255,0.9);padding:15px;border-radius:50%;box-shadow:0 2px 10px rgba(0,0,0,0.1);display:flex;align-items:center;justify-content:center}
.welcome_home_link_top:hover{color:var(--fasyb-blue);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.15)}
.welcome_recommend_link_top{font-weight:normal;color:#FF5900;text-decoration:none;font-size:14px;transition:color 0.3s ease,transform 0.3s ease;background-color:rgba(255,255,255,0.9);padding:8px 16px;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,0.1);display:flex;align-items:center;gap:5px}
.welcome_recommend_link_top:hover{color:#e04e00;text-decoration:underline;transform:translateY(-2px)}

/* LOGIN TITLE */
@keyframes welcome_glowPulse{0%{text-shadow:0 0 5px rgba(127,127,127,0.5)}80%{text-shadow:0 0 20px rgba(201,199,199,0.8),0 0 30px rgba(122,122,122,0.6)}100%{text-shadow:0 0 5px rgba(139,139,139,0.5)}}
.welcome_login_title{font-size:34px;color:#080060;margin-bottom:20px;font-weight:700;animation:welcome_fadeInText 0.8s ease-out 0.2s both,welcome_glowPulse 2s infinite;text-align:center;width:100%}
.welcome_login_title_dash{margin-bottom:1px;font-weight:700;text-align:center;width:100%}
.welcome_login_subtitle{font-size:17px;color:var(--text-light);margin-bottom:40px;font-weight:400;animation:welcome_fadeInText 0.6s ease-out 0.3s forwards;opacity:0;text-align:center;width:100%}

/* FORM */
.welcome_form_group{margin-bottom:24px;position:relative}
.welcome_label{display:block;margin-bottom:10px;color:var(--fasyb-blue);font-weight:600;font-size:14px;opacity:0;animation:welcome_fadeInInputLabel 0.4s ease-out forwards}
.welcome_form_group:nth-child(1) .welcome_label{animation-delay:0.5s}
.welcome_form_group:nth-child(2) .welcome_label{animation-delay:0.6s}
@keyframes welcome_fadeInInputLabel{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}
.welcome_input{height:35px;font-size:14px;padding:0 12px;width:100%;border:1.5px solid var(--medium-gray);background:var(--light-bg);border-radius:12px;color:var(--text-dark);transition:all var(--transition-speed);opacity:0;animation:welcome_fadeInInput 0.4s ease-out forwards}
.welcome_form_group:nth-child(1) .welcome_input{animation-delay:0.6s}
.welcome_form_group:nth-child(2) .welcome_input{animation-delay:0.7s}
@keyframes welcome_fadeInInput{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.welcome_input:focus{border-color:var(--fasyb-orange);box-shadow:0 0 0 3px rgba(255,89,0,0.15);background:var(--white);outline:none}
.welcome_password_container{position:relative;display:flex;align-items:center}
.welcome_toggle_password{color:var(--text-light);position:absolute;right:10px;top:15%;transform:translateY(-50%);display:flex;cursor:pointer;color:var(--text-light);transition:color 0.2s;opacity:0;animation:welcome_fadeInInput 0.4s ease-out 0.8s forwards;background:none;border:none;align-items:center;justify-content:center;font-size:15px}
.welcome_toggle_password:hover{color:var(--fasyb-orange)}

/* OPTIONS */
.welcome_options{margin-bottom:30px;font-size:14px;opacity:0;animation:welcome_fadeInText 0.6s ease-out 0.9s forwards;display:flex !important;justify-content:space-between !important;align-items:center !important;width:100% !important;margin:10px 0 !important}
.welcome_remember_me{justify-content: space-between; color:var(--text-light);display:flex !important;align-items:center !important;gap:6px !important}
.welcome_remember_me .welcome_input[type="checkbox"]{width:14px;height:14px;accent-color:var(--fasyb-orange);margin:0;transform:translateY(0);cursor:pointer}
.welcome_remember_me .welcome_label{margin-bottom:0;font-weight:400;color:var(--text-light);cursor:pointer;opacity:1;animation:none}
.welcome_forgot_password{color:var(--fasyb-orange);text-decoration:none;font-weight:500;transition:color 0.2s;display:inline-block !important;font-size:14px !important;text-decoration:none !important;margin-left:auto !important}
.welcome_forgot_password:hover{text-decoration:underline;color:var(--fasyb-blue)}

/* BUTTON */
.welcome_login_btn{height:40px;background:linear-gradient(135deg,var(--fasyb-orange),#e65100);color:var(--white);border:none;padding:0 14px;border-radius:12px;font-size:17px;font-weight:600;cursor:pointer;transition:all var(--transition-speed);width:100%;box-shadow:0 8px 20px rgba(255,89,0,0.25);letter-spacing:0.5px;opacity:0;animation:welcome_fadeInScaleButton 0.5s ease-out 1.1s forwards;position:relative;overflow:hidden;transition:all 0.3s ease,transform 0.1s linear,box-shadow 0.3s ease}
.welcome_login_btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);transition:left 0.5s}
@keyframes welcome_fadeInScaleButton{from{opacity:0;transform:translateY(20px) scale(0.95)}to{opacity:1;transform:translateY(0) scale(1)}}
.welcome_login_btn:active{transform:scale(0.98) translateY(1px) !important;box-shadow:0 4px 15px rgba(255,89,0,0.4)}
.welcome_login_btn:hover{transform:translateY(-3px);box-shadow:0 12px 25px rgba(255,89,0,0.35)}
.welcome_login_btn:hover::before{left:100%}
@keyframes welcome_pulse{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,89,0,0.4)}70%{transform:scale(1.02);box-shadow:0 0 0 15px rgba(255,89,0,0)}100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,89,0,0)}}
.welcome_login_btn.loading{cursor:not-allowed;background:linear-gradient(135deg,var(--fasyb-blue),#03004a);box-shadow:0 8px 20px rgba(8,0,96,0.25);animation:welcome_pulse 1.5s infinite}

/* DIVIDER */
.welcome_divider{margin-bottom:1x;padding:0 !important;text-align:center;margin:10px 0;position:relative;color:var(--medium-gray);opacity:0;animation:welcome_fadeInText 0.6s ease-out 1.3s forwards}
.welcome_divider::before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:var(--medium-gray);z-index:1}
.welcome_divider span{display:inline-block;color:#FF5900 !important;line-height:1;background:var(--white);padding:0 15px;position:relative;z-index:2;font-size:13px;color:var(--text-light)}

/* SOCIAL LOGIN */
.welcome_social_login{gap:12px;margin-top:1px;padding:0;width:100%;display:flex !important;justify-content:center !important;align-items:center !important;opacity:0;animation:welcome_fadeInText 0.6s ease-out 1.5s forwards;text-align:center}
.welcome_social_btn{display:flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:50%;border:1.5px solid var(--medium-gray);background:var(--white);cursor:pointer;transition:all 0.25s;font-size:20px;box-shadow:var(--shadow-subtle)}
.welcome_social_btn.welcome_google{color:#db4437}
.welcome_social_btn.welcome_facebook{color:#4267B2}
.welcome_social_btn.welcome_youtube{color:#FF0000}
.welcome_social_btn.welcome_tiktok{color:#000000;text-shadow:1px 1px 0 #25f4ee,-1px -1px 0 #fe2c55;font-size:18px}
.welcome_social_btn:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 8px 15px rgba(0,0,0,0.1);border-color:var(--fasyb-orange)}

/* SIGNUP LINK */
.welcome_signup_link{width:100%;text-align:center;margin:8px auto;margin-top:30px;color:var(--text-light);font-size:15px;opacity:0;animation:welcome_fadeInText 0.6s ease-out 1.7s forwards}
.welcome_signup_link a{color:var(--fasyb-orange);text-decoration:none;font-weight:600;transition:color 0.2s}
.welcome_signup_link a:hover{text-decoration:underline;color:var(--fasyb-blue)}

/* WHATSAPP FLOAT */
.welcome_whatsapp_float{position:fixed;width:60px;height:60px;bottom:40px;right:40px;background-color:#25d366;color:#FFF;border-radius:50px;text-align:center;font-size:30px;z-index:100;box-shadow:0 4px 20px rgba(0,0,0,0.15);transition:all 0.3s ease}
.welcome_whatsapp_float:hover{transform:scale(1.1);box-shadow:0 6px 25px rgba(0,0,0,0.2)}
.welcome_whatsapp_icon{ margin-top: 13px; font-size: 30px; position: relative; top: 7px; }

/* MEDIA QUERIES */
@media (max-width:968px){.welcome_top_links_container{position:relative;top:auto;left:auto;right:auto;width:80%;justify-content:space-between;margin-bottom:0px;padding:0 10px;box-sizing:border-box}.welcome_login_section{flex-direction:column;padding:30px 30px;display:flex;align-items:center}.welcome_recommend_link_top{font-size:14px;padding:6px 12px}.welcome_home_link_top{padding:6px 10px;font-size:16px}.welcome_login_container{flex-direction:column;max-width:400px;min-height:auto;border-radius:20px;overflow-y: scroll;display: block;height: 92vh;}.welcome_welcome_section{padding:40px 30px 30px 30px;border-right:none;border-bottom:1px solid var(--medium-gray)}.welcome_welcome_title{font-size:32px;margin-top:40px !important;display:block}.welcome_login_title{font-size:30px;text-align:center}.welcome_login_title_dash{font-size:30px;text-align:center}.welcome_options{flex-direction:column;align-items:flex-start;gap:15px}.welcome_forgot_password{align-self:flex-end}.welcome_features_horizontal{flex-direction:column;gap:12px}.welcome_whatsapp_float{width:50px;height:50px;bottom:20px;right:20px;font-size:25px}#welcome_loginForm{max-width:85%;width:100%;padding:0}.welcome_divider,.welcome_social_login,.welcome_signup_link{width:90%;max-width:380px}.welcome_social_login{justify-content:space-around}}
@media (max-width:480px){.welcome_recommend_link_top{font-size:14px;padding:5px 10px}.welcome_home_link_top{padding:5px 8px;font-size:15px}.welcome_top_links_container{padding:0 20px}body{padding:15px}.welcome_welcome_section,.welcome_login_section{padding:30px 20px}.welcome_welcome_title{font-size:28px;margin-top:0px}.welcome_login_title{font-size:26px}.welcome_login_title_dash{font-size:26px}.welcome_welcome_subtitle{font-size:16px}.welcome_illustration_container{max-width:82%;border:2px solid #FF5900;border-left:5px solid var(--fasyb-orange)}#welcome_loginForm{max-width:100%;padding:0 10px}.welcome_divider,.welcome_social_login,.welcome_signup_link{width:100%;max-width:100%}.welcome_whatsapp_float{width:58px;height:58px;bottom:15px;right:15px;font-size:22px}.welcome_top_links_container .welcome_recommend_link_top{margin-right:auto}}

/* BIBLIA */
.welcome_verse_container {min-height: 10px;display: flex;flex-direction: column;justify-content: center;align-items: center;padding: 2ch;text-align: justify;}
.welcome_verse_text {font-size: 14px;line-height: 1.4;margin-bottom: 8px;min-height: 60px;display: flex; text-align: left; }
.welcome_verse_reference {font-size: 13px;color: #060651;font-weight: bold;font-style: normal;}
.welcome_illustration_verse {cursor: default;background: rgba(255, 255, 255, 0.1);border-radius: 10px;padding: 2px;margin: 2px 0;}

.welcome_a_apierp{
text-decoration: none;
}

/* MODAL OPTIONS */

.modal_opt_overlay{
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.42);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
z-index: 99998;
display: none;
}

.modal_opt_overlay.is-open{
display: block;
}

.modal_opt_root{
position: fixed;
inset: 0;
z-index: 99999;
display: none;
align-items: center;
justify-content: center;
padding: 12px;
overflow: hidden;
}

.modal_opt_root.is-open{
display: flex;
}

.modal_opt_dialog{
width: min(1440px, calc(100vw - 24px));
height: min(94vh, 920px);
max-height: calc(100vh - 24px);
background: #ffffff;
border-radius: 28px;
overflow: hidden;
box-shadow:
0 24px 80px rgba(0,0,0,0.18),
0 2px 12px rgba(0,0,0,0.08);
border: 1px solid rgba(255,255,255,0.7);
display: flex;
flex-direction: column;
}

.modal_opt_content{
width: 100%;
height: 100%;
min-height: 0;
border: none !important;
padding: 0 !important;
background:
radial-gradient(circle at top right, rgba(252,89,0,0.08), transparent 22%),
linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%);
display: flex;
flex-direction: column;
}

.modal_opt_dynamic{
width: 100%;
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
}

/* cadena de alturas */
#div_section_options{
height: 100%;
min-height: 0;
}

#modal_opt_root .tab-content{
min-height: 0;
}

#modal_opt_root .tab-content.active{
display: flex !important;
flex-direction: column;
height: 100%;
min-height: 0;
}

#modal_opt_root [id^="container-div-flex-"]{
min-height: 0;
height: 100%;
}

/* neutralizar estilos viejos que siguen entrando por estas clases */
#modal_opt_root .container-section-options{
width: auto !important;
height: auto !important;
min-height: 0 !important;
margin-top: 0 !important;
border-radius: 0 !important;
background: transparent !important;
padding: 0 !important;
}

#modal_opt_root .container-title-options{
width: auto !important;
height: auto !important;
min-height: 0 !important;
margin-top: 0 !important;
border-radius: 24px !important;
background: linear-gradient(180deg, #ffffff 0%, #f7f8fc 100%) !important;
padding: 18px !important;
}

/* layout principal */
#modal_opt_root .modal_opt_shell{
display: grid !important;
grid-template-columns: minmax(0, 1fr) 74px;
gap: 18px;
height: 100%;
min-height: 0;
padding: 18px;
align-items: stretch;
overflow: hidden;
box-sizing: border-box;
}

#modal_opt_root .modal_opt_main{
min-width: 0;
min-height: 0;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
padding-right: 6px;
scrollbar-width: thin;
scrollbar-color: #c9cfdb transparent;
}

#modal_opt_root .modal_opt_main::-webkit-scrollbar{
width: 8px;
}

#modal_opt_root .modal_opt_main::-webkit-scrollbar-thumb{
background: #c9cfdb;
border-radius: 999px;
}

#modal_opt_root .modal_opt_main::-webkit-scrollbar-track{
background: transparent;
}

#modal_opt_root .modal_opt_sidebar{
min-width: 0;
min-height: 0;
height: 100%;
overflow: hidden;
border: none;
border-radius: 24px;
box-shadow: none;
scrollbar-width: thin;
scrollbar-color: #c9cfdb transparent;
box-sizing: border-box;
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 2px;
background: transparent !important;
}

#modal_opt_root .modal_opt_sidebar::-webkit-scrollbar{
width: 8px;
}

#modal_opt_root .modal_opt_sidebar::-webkit-scrollbar-thumb{
background: #c9cfdb;
border-radius: 999px;
}

#modal_opt_root .modal_opt_sidebar::-webkit-scrollbar-track{
background: transparent;
}

#modal_opt_root .container-buttons{
margin-bottom: 0;
display: flex;
justify-content: center;
align-items: flex-start;
width: 100%;
}

#modal_opt_root .closeModal{
width: 44px;
height: 44px;
border-radius: 14px;
background: #fff;
border: 1px solid #eceef5;
color: #666;
transition: .18s ease;
flex: 0 0 44px;
}

#modal_opt_root .closeModal:hover{
background: #fff3ed;
color: #FC5900;
border-color: rgba(252,89,0,.18);
}

#modal_opt_root .btn-options{
width: 100%;
display: flex;
align-items: center;
gap: 10px;
background: #fff;
border: 1px solid #eceef5;
border-radius: 16px;
padding: 12px 14px;
margin-top: 10px;
font-size: 13px;
color: #394150;
transition: .18s ease;
box-shadow: 0 6px 18px rgba(15,23,42,.03);
text-align: left;
overflow: hidden;
}

#modal_opt_root .btn-options:hover{
transform: translateY(-1px);
border-color: rgba(252,89,0,.22);
box-shadow: 0 10px 24px rgba(252,89,0,.08);
color: #111827;
}

#modal_opt_root .btn-options span{
display: block;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

#modal_opt_root .img-options,
#modal_opt_root .img-options-o{
width: 22px;
height: 22px;
object-fit: contain;
margin-right: 0;
flex: 0 0 22px;
}

#modal_opt_root .modal_opt_sections_grid{
display: flex;
flex-direction: column;
gap: 16px;
padding-bottom: 24px;
}

.modal_opt_card{
background: #fff;
border: 1px solid #eceef5;
border-radius: 22px;
overflow: hidden;
box-shadow: 0 10px 28px rgba(15,23,42,.05);
}

.modal_opt_card_header{
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 18px;
border-bottom: 1px solid #f1f3f8;
background: linear-gradient(180deg, #ffffff 0%, #fcfcfe 100%);
}

.modal_opt_card_title_wrap{
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}

.modal_opt_card_icon{
width: 40px;
height: 40px;
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(252,89,0,.10);
color: #FC5900;
font-size: 16px;
flex: 0 0 40px;
}

.modal_opt_card_title{
margin: 0;
font-size: 16px;
font-weight: 700;
color: #111827;
line-height: 1.2;
}

.modal_opt_card_subtitle{
margin: 4px 0 0 0;
font-size: 12px;
color: #6b7280;
line-height: 1.35;
}

.modal_opt_card_body{
padding: 16px 18px 18px 18px;
}

#modal_opt_root .modal_opt_card{
transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

#modal_opt_root .modal_opt_card_header{
padding: 0;
border-bottom: none;
background: linear-gradient(180deg, #ffffff 0%, #fcfcfe 100%);
}

#modal_opt_root .modal_opt_card_toggle{
width: 100%;
border: none;
background: transparent;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 18px;
text-align: left;
cursor: pointer;
}

#modal_opt_root .modal_opt_card_toggle:hover{
background: rgba(252,89,0,.03);
}

#modal_opt_root .modal_opt_card_chevron{
flex: 0 0 auto;
width: 34px;
height: 34px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #6b7280;
background: #f8fafc;
border: 1px solid #eceef5;
transition: transform .2s ease, color .2s ease, background .2s ease;
}

#modal_opt_root .modal_opt_card{
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
}

#modal_opt_root .modal_opt_card_body{
display: none;
padding: 0 18px 18px 18px;
overflow: visible !important;
opacity: 1;
max-height: none !important;
border-top: 1px solid transparent;
}

#modal_opt_root .modal_opt_card.is-expanded .modal_opt_card_body{
display: block;
border-top: 1px solid #f1f3f8;
}

#modal_opt_root .modal_opt_card.is-expanded .modal_opt_card_chevron{
transform: rotate(180deg);
color: #FC5900;
background: #fff3ed;
border-color: rgba(252,89,0,.18);
}

#modal_opt_root .modal_opt_dialog,
#modal_opt_root .modal_opt_content,
#modal_opt_root .modal_opt_dynamic,
#modal_opt_root #div_section_options,
#modal_opt_root .tab-content.active,
#modal_opt_root [id^="container-div-flex-"],
#modal_opt_root .modal_opt_shell,
#modal_opt_root .modal_opt_main,
#modal_opt_root .modal_opt_sidebar{
min-height: 0;
}

#modal_opt_root .modal_opt_main{
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}

#modal_opt_root .modal_opt_sidebar{
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}

#modal_opt_root .div-group-container{
display: flex;
gap: 14px;
width: 100%;
margin-bottom: 14px;
}

#modal_opt_root .div-group-container:last-child{
margin-bottom: 0;
}

#modal_opt_root .div-width-options{
width: 50%;
}

#modal_opt_root .col-bt-padding-options{
padding-left: 0 !important;
padding-right: 0 !important;
}

#modal_opt_root .label-options{
display: inline-block;
margin-bottom: 6px;
font-size: 12px;
font-weight: 600;
color: #6b7280;
letter-spacing: .2px;
}

#modal_opt_root .custom-input-cart-options,
#modal_opt_root .custom-input-cart-observacion,
#modal_opt_root .form-control,
#modal_opt_root .form-select{
border-radius: 14px !important;
border: 1px solid #dde3ee !important;
background: #fff !important;
color: #4b5563 !important;
box-shadow: none !important;
transition: .18s ease;
}

#modal_opt_root .custom-input-cart-options,
#modal_opt_root .form-control,
#modal_opt_root .form-select{
min-height: 38px;
font-size: 12px;
padding-left: 12px;
padding-right: 12px;
}

#modal_opt_root textarea.custom-input-cart-observacion{
min-height: 120px;
padding: 12px;
resize: vertical;
}

#modal_opt_root .custom-input-cart-options:focus,
#modal_opt_root .custom-input-cart-observacion:focus,
#modal_opt_root .form-control:focus,
#modal_opt_root .form-select:focus{
border-color: rgba(252,89,0,.45) !important;
box-shadow: 0 0 0 4px rgba(252,89,0,.08) !important;
}

#modal_opt_root .custom-input-btn-background{
background: linear-gradient(180deg, #FC5900 0%, #f05200 100%) !important;
color: #fff !important;
border: none !important;
}

#modal_opt_root .custom-input-btn-background:hover{
background: linear-gradient(180deg, #080060 0%, #06004a 100%) !important;
}

#modal_opt_root .btns-btnopt{
min-height: 42px;
border-radius: 14px !important;
border: 1px solid #dde3ee !important;
background: #fff !important;
color: #4b5563 !important;
}

#modal_opt_root .btnopt{
padding: 0;
}

#modal_opt_root .img-btnopt{
margin-left: 4px;
}

/* sugerencias */
#modal_opt_root .suggestions-container{
top: calc(100% + 6px);
left: 0;
right: 0;
padding: 8px;
border: 1px solid #eceef5;
border-radius: 16px;
box-shadow: 0 16px 36px rgba(15,23,42,.10);
background: #fff;
max-height: 220px;
overflow-y: auto;
z-index: 50;
}

#modal_opt_root .suggestion-item{
padding: 10px 12px;
border-radius: 12px;
font-size: 12px;
}

#modal_opt_root .suggestion-item:hover{
background: #f8fafc;
}

#modal_opt_root [id^="divRelatedDocumentsResult-"]{
margin-top: 8px;
}

#modal_opt_root .modal_opt_card_body > .div-group-container:last-child{
margin-bottom: 0;
}

#modal_opt_root .d-none{
display: none !important;
}

#modal_opt_root [id^="map_select_container_"]{
width: 100%;
min-height: 260px;
height: 400px;
border-radius: 22px;
overflow: hidden;
background: #fff;
border: 1px solid #eceef5;
box-shadow: 0 10px 28px rgba(15,23,42,.05);
margin-top: 12px;
}

#modal_opt_root [id^="map_select_container_"].d-none{
display: none !important;
}

#modal_opt_root .modal_opt_shortcuts_grid{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
width: 100%;
}

#modal_opt_root .modal_opt_shortcuts_grid .btn-options{
margin-top: 0;
min-height: 58px;
}

#modal_opt_root .mdl_opt_dropzonefile_wrap{
width: 100%;
}

#modal_opt_root .mdl_opt_dropzonefile_header{
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}

#modal_opt_root .mdl_opt_dropzonefile_title{
font-size: 14px;
font-weight: 700;
color: #111827;
line-height: 1.2;
}

#modal_opt_root .mdl_opt_dropzonefile_subtitle{
margin-top: 4px;
font-size: 12px;
color: #6b7280;
line-height: 1.45;
}

#modal_opt_root .mdl_opt_dropzonefile_counter{
padding: 8px 10px;
border-radius: 12px;
background: #fff7f0;
color: #FC5900;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
border: 1px solid rgba(252,89,0,.12);
}

#modal_opt_root .mdl_opt_dropzonefile{
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 220px;
padding: 22px 18px;
border: 2px dashed #d7deeb;
border-radius: 22px;
background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
text-align: center;
transition: .18s ease;
margin-bottom: 12px;
}

#modal_opt_root .mdl_opt_dropzonefile.is-dragover{
border-color: rgba(252,89,0,.45);
background: #fff7f2;
box-shadow: 0 0 0 4px rgba(252,89,0,.08);
}

#modal_opt_root .mdl_opt_dropzonefile_icon{
width: 58px;
height: 58px;
border-radius: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(252,89,0,.10);
color: #FC5900;
font-size: 26px;
}

#modal_opt_root .mdl_opt_dropzonefile_text{
font-size: 15px;
font-weight: 700;
color: #111827;
}

#modal_opt_root .mdl_opt_dropzonefile_hint{
font-size: 12px;
color: #6b7280;
}

#modal_opt_root .mdl_opt_dropzonefile_selectbtn{
border: none;
border-radius: 14px;
padding: 11px 18px;
font-size: 13px;
font-weight: 700;
background: linear-gradient(180deg, #FC5900 0%, #f05200 100%);
color: #fff;
cursor: pointer;
transition: .18s ease;
}

#modal_opt_root .mdl_opt_dropzonefile_selectbtn:hover{
background: linear-gradient(180deg, #080060 0%, #06004a 100%);
}

#modal_opt_root .mdl_opt_inputfile{
display: none !important;
}

#modal_opt_root .mdl_opt_dropzonefile_list{
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 12px;
}

#modal_opt_root .mdl_opt_dropzonefile_item{
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px;
border: 1px solid #e7ebf3;
border-radius: 16px;
background: #fff;
}

#modal_opt_root .mdl_opt_dropzonefile_item_uploaded{
background: #fbfcff;
}

#modal_opt_root .mdl_opt_dropzonefile_item_icon{
width: 42px;
height: 42px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #fff3ed;
color: #FC5900;
font-size: 12px;
font-weight: 800;
flex: 0 0 42px;
}

#modal_opt_root .mdl_opt_dropzonefile_item_meta{
min-width: 0;
flex: 1 1 auto;
}

#modal_opt_root .mdl_opt_dropzonefile_item_name{
font-size: 13px;
font-weight: 700;
color: #111827;
line-height: 1.3;
word-break: break-word;
}

#modal_opt_root .mdl_opt_dropzonefile_item_sub{
font-size: 11px;
color: #6b7280;
margin-top: 3px;
word-break: break-all;
}

#modal_opt_root .mdl_opt_dropzonefile_item_sub a{
color: #2563eb;
text-decoration: none;
}

#modal_opt_root .mdl_opt_dropzonefile_item_sub a:hover{
text-decoration: underline;
}

#modal_opt_root .mdl_opt_dropzonefile_remove{
width: 34px;
height: 34px;
border: 1px solid #eceef5;
border-radius: 10px;
background: #fff;
color: #ef4444;
font-size: 22px;
line-height: 1;
cursor: pointer;
flex: 0 0 34px;
}

#modal_opt_root .mdl_opt_dropzonefile_remove:hover{
background: #fff5f5;
border-color: #fecaca;
}

#modal_opt_root .mdl_opt_dropzonefile_empty{
padding: 14px;
border-radius: 14px;
background: #f8fafc;
border: 1px dashed #dbe2ee;
font-size: 12px;
color: #6b7280;
text-align: center;
}

#modal_opt_root .mdl_opt_dropzonefile_uploaded{
margin-top: 10px;
}

#modal_opt_root .mdl_opt_dropzonefile_uploaded_title{
font-size: 12px;
font-weight: 700;
color: #374151;
margin-bottom: 10px;
}

/* ---------- Desktop mediano ---------- */
@media (max-width: 1199px){
#modal_opt_root .modal_opt_shell{
grid-template-columns: minmax(0, 1fr) 74px;
}
}

@media (max-width: 991px){
.modal_opt_root{
padding: 8px;
}

.modal_opt_dialog{
width: calc(100vw - 16px);
height: calc(100dvh - 16px);
max-height: calc(100dvh - 16px);
border-radius: 22px;
}

#modal_opt_root .modal_opt_shell{
display: flex !important;
flex-direction: column;
gap: 12px;
padding: 12px;
height: 100%;
min-height: 0;
overflow: hidden;
}

#modal_opt_root .modal_opt_sidebar{
order: 1;
flex: 0 0 auto;
height: auto !important;
min-height: auto !important;
max-height: none;
overflow: visible;
display: flex;
justify-content: flex-end;
padding: 0 !important;
}

#modal_opt_root .modal_opt_main{
order: 2;
flex: 1 1 auto;
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
padding-right: 0;
}

#modal_opt_root .container-buttons{
grid-column: 1 / -1;
margin-bottom: 0;
}

#modal_opt_root .btn-options{
margin-top: 0;
min-height: 56px;
}
}

@media (max-width: 768px){
#modal_opt_root .div-group-container{
display: block;
margin-bottom: 0;
}

#modal_opt_root .div-group-container > *{
width: 100% !important;
margin-bottom: 12px;
}

#modal_opt_root .div-group-container > *:last-child{
margin-bottom: 0;
}

#modal_opt_root .modal_opt_card_toggle{
padding: 14px;
}

#modal_opt_root .modal_opt_card_body{
padding-left: 14px;
padding-right: 14px;
}

#modal_opt_root .modal_opt_card.is-expanded .modal_opt_card_body{
padding: 0 14px 14px 14px;
}

#modal_opt_root .modal_opt_sidebar{
grid-template-columns: 1fr 1fr;
max-height: 30vh;
}

#modal_opt_root [id^="map_select_container_"]{
min-height: 220px;
}
#modal_opt_root .modal_opt_shortcuts_grid{
grid-template-columns: 1fr;
}

#modal_opt_root .mdl_opt_dropzonefile_header{
flex-direction: column;
align-items: stretch;
}

#modal_opt_root .mdl_opt_dropzonefile_counter{
width: fit-content;
}

#modal_opt_root .mdl_opt_dropzonefile{
min-height: 190px;
}
}

@media (max-width: 575px){
.modal_opt_root{
padding: 0;
overflow: hidden;
}

.modal_opt_dialog{
width: 100vw;
height: 100dvh;
max-height: 100dvh;
border-radius: 0;
border: none;
}

#modal_opt_root .modal_opt_content,
#modal_opt_root .modal_opt_dynamic,
#modal_opt_root #div_section_options,
#modal_opt_root .tab-content.active,
#modal_opt_root [id^="container-div-flex-"]{
height: 100%;
min-height: 0;
}

#modal_opt_root .modal_opt_shell{
padding: 10px;
gap: 10px;
height: 100%;
min-height: 0;
overflow: hidden;
}

#modal_opt_root .modal_opt_sidebar{
grid-template-columns: none;
max-height: none;
padding: 0 !important;
border-radius: 0 !important;
overflow: visible !important;
-webkit-overflow-scrolling: touch;
display: flex;
justify-content: flex-end;
}

#modal_opt_root .modal_opt_main{
flex: 1 1 auto;
min-height: 0;
height: auto;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch;
padding-right: 0;
padding-bottom: 14px;
}

#modal_opt_root .btn-options{
min-height: 50px;
padding: 10px 12px;
}

.modal_opt_card{
border-radius: 18px;
}

.modal_opt_card_title{
font-size: 15px;
}

.modal_opt_card_subtitle{
font-size: 11px;
}

#modal_opt_root [id^="map_select_container_"]{
height: 300px;
min-height: 300px;
border-radius: 18px;
}
}

/* LAYOUT ORDERS - DATE FILTERS */
.layout-orders-date-filters{
display:none;
justify-content:center;
align-items:center;
gap:8px;
margin:5px auto 12px auto;
position:relative;
flex-wrap:wrap;
}

.layout-orders-date-btn{
border:none;
background:#f1f1f1;
color:#080060;
font-weight:700;
font-size:13px;
padding:7px 12px;
border-radius:8px;
cursor:pointer;
box-shadow:0 2px 8px rgba(0,0,0,.08);
}

.layout-orders-date-btn.active{
background:#080060;
color:#fff;
}

.layout-orders-calendar-btn{
background:#FF5900;
color:#fff;
}

.layout-orders-calendar-popover{
display:none;
position:absolute;
top:42px;
background:#fff;
border:1px solid #e7e7e7;
border-radius:12px;
box-shadow:0 12px 35px rgba(0,0,0,.18);
padding:12px;
z-index:3000;
min-width:280px;
}

.layout-orders-calendar-popover.active{
display:block;
}

.layout-orders-calendar-row{
display:flex;
flex-direction:column;
gap:4px;
margin-bottom:8px;
}

.layout-orders-calendar-row label{
font-size:12px;
font-weight:700;
color:#080060;
}

.layout-orders-calendar-row input{
border:1px solid #d7d7d7;
border-radius:8px;
padding:7px;
font-size:13px;
}

.layout-orders-calendar-actions{
display:flex;
justify-content:flex-end;
gap:8px;
}

.layout-orders-calendar-actions button{
border:none;
border-radius:8px;
padding:7px 10px;
font-weight:700;
cursor:pointer;
}

#layoutOrdersCalendarCancel{
background:#e9e9e9;
color:#333;
}

#layoutOrdersCalendarApply{
background:#FF5900;
color:#fff;
}

/* LAYOUT ORDERS - PANEL */
.layout-orders-panel{
width:100%;
padding:0 10px 20px 10px;
}

.layout-orders-loading,
.layout-orders-empty{
text-align:center;
font-weight:700;
color:#999;
padding:18px;
}

.layout-orders-grid{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(270px, 1fr));
gap:14px;
align-items:start;
}

.layout-order-card{
background:#fff;
border-radius:14px;
box-shadow:0 8px 22px rgba(0,0,0,.08);
padding:12px;
border:1px solid #f0f0f0;
}

.layout-order-card-dirty{
border-color:#FF5900;
}

.layout-order-card-header{
display:flex;
justify-content:space-between;
align-items:center;
gap:10px;
margin-bottom:8px;
}

.layout-order-eye{
color:#FF5900;
margin-right:6px;
}

.layout-order-number{
font-size:20px;
font-weight:800;
color:#999;
}

.layout-order-payment-badge{
background:#080060;
color:#fff;
font-size:12px;
font-weight:800;
border-radius:8px;
padding:5px 14px;
white-space:nowrap;
}

.layout-order-card-body{
font-size:12px;
color:#444;
}

.layout-order-customer{
font-weight:800;
color:#222;
margin-bottom:7px;
}

.layout-order-line{
display:flex;
justify-content:space-between;
gap:8px;
margin-bottom:4px;
}

.layout-order-line span{
color:#666;
}

.layout-order-line strong{
color:#222;
text-align:right;
}

.layout-order-edit-box{
margin-top:10px;
border-top:1px solid #f0f0f0;
padding-top:10px;
display:grid;
grid-template-columns:1fr;
gap:6px;
}

.layout-order-edit-box label{
font-size:11px;
font-weight:800;
color:#080060;
}

.layout-order-select{
width:100%;
border:1px solid #ddd;
border-radius:8px;
padding:7px;
font-size:12px;
background:#fff;
}

.layout-order-save-btn{
border:none;
border-radius:8px;
background:#FF5900;
color:#fff;
font-weight:800;
padding:8px 10px;
cursor:pointer;
margin-top:4px;
}

.layout-order-save-btn:disabled{
opacity:.65;
cursor:not-allowed;
}

.layout-order-save-message{
font-size:12px;
font-weight:700;
min-height:16px;
}

.layout-order-save-message.success{
color:#00bb2d;
}

.layout-order-save-message.error{
color:#C41C00;
}

.layout-orders-pagination{
display:flex;
justify-content:center;
align-items:center;
gap:10px;
margin-top:18px;
}

.layout-orders-page-btn{
border:none;
background:#080060;
color:#fff;
font-weight:800;
border-radius:8px;
padding:7px 14px;
cursor:pointer;
}

.layout-orders-page-btn:disabled{
background:#d6d6d6;
cursor:not-allowed;
}

.layout-orders-page-label{
font-weight:800;
color:#999;
}

@media (max-width: 768px){
.layout-orders-grid{
grid-template-columns:1fr;
}

.layout-orders-date-btn{
font-size:12px;
padding:6px 8px;
}

.layout-orders-calendar-popover{
left:50%;
transform:translateX(-50%);
}
}