/* --- Banner Superior --- */
.header-banner {
    position: relative;
    width: 100%; /* Ocupa todo el ancho */
    height: 180px;
    background-image: url('/appVentas/img/banner-placeholder.jpg'); /* Ejemplo, usa tu ruta real */
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centrar verticalmente el título */
    align-items: center;
    color: white;
    text-shadow: 0 0 10px rgba(0,0,0,0.7);
    padding: 20px; /* Padding interno para el contenido del banner */
    overflow: hidden; /* Para el model-image que se sale un poco */
    /* margin-top: 0; se elimina porque ya el #app no tiene padding arriba */
    border-radius: 0; /* En esta implementación, el banner va de borde a borde */
    /* Si quieres bordes redondeados en el banner, deberías definir un contenedor con max-width
       y los bordes redondeados, y este banner dentro */
}

.banner-title {
    font-size: 1.8em; /* Ajuste para que se vea bien en pantalla completa */
    font-weight: 800;
    margin: 0; /* Eliminar márgenes para que no ocupe espacio innecesario */
    text-align: center;
    z-index: 6;
    position: relative;
    letter-spacing: 1.5px;
    line-height: 1.2; /* Ajuste para evitar líneas muy pegadas */
    cursor: pointer;
}

.model-image {
    position: absolute;
    bottom: -60px; /* Ajusta según el diseño de tu imagen */
    left: 50%;
    transform: translateX(-50%);
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 6px solid white;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
    background-color: #f0f0f0;
    object-fit: cover;
    z-index: 5;
    cursor: pointer;
    transition: transform 0.3s ease;
}
.model-image:hover {
    transform: translateX(-50%) scale(1.05);
}

/* --- Contenedor Principal para el contenido debajo del banner --- */
.main-content-wrapper {
    flex-grow: 1; /* Asegura que este contenedor ocupe el espacio restante */
    background-color: var(--bg-light); /* Fondo para esta sección, para que no sea blanco de borde a borde */
    padding: 0; /* El padding se manejará dentro de los subcomponentes */
    margin-top: 0; /* Elimina cualquier margen superior */
    /* Si quieres que esta sección tenga un ancho limitado y centrado, lo definiríamos aquí */
}

/* Contenedor principal del menú de navegación */
.nav-menu {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px var(--padding-base); /* Ajustar padding lateral */
    background-color: #fff;
    border-bottom: 1px solid #e0e0e0;
    gap: 8px;
    width: 100%; /* Ocupa todo el ancho */
    box-sizing: border-box; /* Incluye padding en el ancho */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Sombra sutil debajo del menú */

    /* Estilos para la barra de desplazamiento */
    &::-webkit-scrollbar {
        height: 6px;
    }
    &::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
    }
    &::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 3px;
    }
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

.nav-item {
    flex: 0 0 auto;
    padding: 10px 15px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #f0f0f0;
    color: #333;
    font-size: 0.95rem;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.nav-item:hover {
    background-color: #e0e0e0;
}
.nav-item.active {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
}

.nav-item.active:hover {
    background-color: #007bff;
    color: white;
}

.nav-text {
    margin-right: 8px;
}
.badge-total-articulos {
    background-color: #28a745;
    color: #fff;
    padding: 2px 7px;
    border-radius: 10
    px;
    font-size: 0.75rem;
    font-weight: bold;
    width: 30px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.nav-item.active .badge-total-articulos {
    background-color: #fff;
    color: #007bff;
}

/* --- Contenedores de contenido (resumen, lista, etc. - includes de PHP) --- */
.content-section {
    padding: var(--padding-base); /* Padding interno para el contenido */
    background-color: var(--card-bg); /* Fondo blanco para las tarjetas de contenido */
    margin: var(--padding-base); /* Margen para separarse del nav-menu y otras secciones */
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
}


/* --- Barra de Herramientas (Toolbar) --- */
.toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 15px;
    padding: 15px;
    margin: var(--padding-base); /* Margen para separarse de los otros bloques */
    background-color: #fefefe;
    border-radius: 12px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #e0e6ec;
}

.toolbar-button {
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.4em;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.toolbar-button:hover {
    background-color: #0056b3;
    box-shadow: 0 6px 15px rgba(0,0,0,0.25);
    transform: translateY(-4px);
}

.whatsapp-button {
    background-color: #25D366;
}
.whatsapp-button:hover {
    background-color: #1DA851;
}
.cancel-button {
    background-color: #f92d23;
}
.cancel-button:hover {
    background-color: #f98723;
}

/* Transiciones de Vue.js */
.fade-slide-enter-from,
.fade-slide-leave-to {
    opacity: 0;
    transform: translateX(20px);
}
.fade-slide-enter-active,
.fade-slide-leave-active {
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}
.fade-slide-enter-to,
.fade-slide-leave-from {
    opacity: 1;
    transform: translateX(0);
}

/*/*Estilos para el botón de volver (en la esquina superior derecha del banner) */
.back-button-container {
    position: absolute;
    top: 100px;
    right: 20px;
    z-index: 100;
}
.back-button {
    display: flex;
    align-items: center;
    background-color: #28a745;
    color: white;
    padding: 8px 15px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 0.9em;
    font-weight: 500;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease;
}
.back-button:hover {
    background-color: #218838;
}
.back-button i {
    margin-right: 8px;
    font-size: 1em;
}

/*/* Estilos del modal (si no está incluido en tu CSS) */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}*/

.modal-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    max-width: 90%;
    max-height: 90%;
    overflow: auto;
    position: relative;
}

.modal-close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
    color: #333;
}

.modal-image {
    max-width: 100%;
    height: auto;
    display: block;
}


/* --- Media Queries para Responsividad (TABLETAS y ESCRITORIO) --- */
@media (min-width: 768px) {
    /* Reiniciamos estilos de #app si queremos un contenedor con sombra/borde visible y centrado */
    #app {
        max-width: 960px; /* Volvemos a un ancho máximo para el contenedor principal */
        width: 95%; /* Ocupa el 95% hasta el max-width */
        margin: 20px auto; /* Centrar la aplicación en pantallas grandes */
        background-color: var(--card-bg); /* Fondo blanco para la aplicación */
        border-radius: var(--border-radius); /* Bordes redondeados en la aplicación */
        box-shadow: var(--card-shadow); /* Sombra para la aplicación */
        padding: var(--padding-base); /* Padding interno de la aplicación */
    }

    /* Eliminar el padding que pusimos en main-content, ya lo tiene #app */
    .main-content {
        padding: 0;
        gap: var(--padding-base);
    }

    /* LAYOUT DEL CLIENTE: HORIZONTAL EN ESCRITORIO */
    .client-summary-card {
        flex-direction: row; /* Elementos en fila */
        align-items: flex-start; /* Alinea los elementos al inicio (arriba) */
        text-align: left; /* Alinea el texto a la izquierda */
        gap: var(--padding-base); /* Espacio entre los elementos flex */
        justify-content: space-between; /* Distribuye el espacio entre los elementos */
        padding: var(--padding-base); /* Padding general para la tarjeta */
    }

    .client-avatar {
        width: 90px;
        height: 90px;
        flex-shrink: 0; /* Asegura que no se encoja */
    }
    .client-info-center {
        flex-grow: 1; /* Crece para ocupar el espacio central */
        min-width: 0; /* Permite que el texto largo no desborde */
        padding-right: 1rem; /* Espacio antes del botón de la derecha */
    }
    .name-type {
        justify-content: flex-start; /* Alinea el nombre y tipo a la izquierda */
    }
    .client-name {
        font-size: 1.5rem;
        word-break: normal; /* No romper palabras en escritorio */
    }
    .client-info-right {
        width: auto; /* Ocupa el ancho del botón */
        justify-content: flex-end; /* Alinea el botón a la derecha */
        align-items: flex-start; /* Alinea el botón arriba */
        margin-top: 0; /* Eliminar margen superior de móvil */
    }

    /* AJUSTES PARA EL MENÚ DE NAVEGACIÓN EN ESCRITORIO */
    .nav-menu {
        padding: 10px var(--padding-base); /* Padding horizontal para el menú */
        overflow-x: visible; /* Elimina el scroll horizontal */
        white-space: normal; /* Permite que el texto se envuelva */
        justify-content: space-around; /* Ocupa el espacio completo con distribución */
        width: auto; /* Elimina el width: max-content */
        box-shadow: none; /* Elimina sombra si está dentro de #app con sombra */
    }
    .nav-item {
        flex-shrink: 1; /* Permite que los ítems se encojan si es necesario */
        flex-basis: auto; /* Elimina la base fija para ítems */
    }
    .nav-item a {
        padding: 0.8rem 1.2rem;
        font-size: 1rem;
    }

    /* AJUSTES PARA BARRAS DE HERRAMIENTAS Y SECCIONES DE CONTENIDO */
    .toolbar, .content-section {
        margin: var(--padding-base); /* Margen para centrar y separar */
        box-shadow: var(--card-shadow); /* Sombra estándar */
        border-radius: var(--border-radius); /* Bordes redondeados estándar */
        background-color: var(--card-bg); /* Fondo blanco estándar */
    }

    .toolbar {
        justify-content: flex-start;
        gap: 15px;
    }

    .content-section {
        padding: var(--padding-base);
    }

    /* LAYOUT DE TARJETAS DE CRÉDITO EN ESCRITORIO */
    .credit-list, .order-list, .client-associated-list {
        gap: 1rem;
    }
    .credit-card, .order-card, .client-card {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        text-align: left;
        padding: 1rem;
        gap: 1rem;
    }
    .credit-icon img {
        width: 60px;
        height: 60px;
        padding: 5px;
    }
    .credit-title-row {
        flex-direction: row;
        gap: 0.8rem;
        margin-bottom: 0.5rem;
    }
    .credit-title {
        font-size: 1.1rem;
    }
    .credit-status {
        padding: 0.2rem 0.6rem;
        font-size: 0.75rem;
    }
    .credit-card p {
        font-size: 0.9rem;
        margin: 0.2rem 0;
    }
    .credit-actions, .order-actions, .client-actions {
        width: auto;
        justify-content: flex-end;
        margin-top: 0;
        border-top: none;
        padding-top: 0;
        gap: 0.5rem;
    }
    .icon-btn {
        width: 36px;
        height: 36px;
    }
    .icon-btn i.material-icons {
        font-size: 1.2rem;
    }
}

/* Si tienes un top-navbar o elementos fuera de #app que necesitan ancho completo */
/* Asegúrate de que no tengan max-width o margin que los centren. */