/* ================================================
   KNAILS BY KILYNET - NEON CLEAN THEME
   Mobile-First SaaS UI con Glassmorphism + Neon
   ================================================ */



/* === GOOGLE FONTS === */

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



/* === VARIABLES DE COLOR === */

:root {

    /* Neon Violet Palette */

    --primary: #8b5cf6;

    --primary-dark: #7c3aed;

    --primary-light: #a78bfa;

    --primary-glow: rgba(139, 92, 246, 0.15);



    /* Secondary Colors */

    --secondary: #ec4899;

    --secondary-dark: #db2777;



    /* Backgrounds */

    --bg-body: #f8fafc;

    --card-bg: #ffffff;



    /* Text */

    --text-dark: #1e293b;

    --text-muted: #64748b;



    /* Borders */

    --border-color: #e2e8f0;

    --border-violet: #e9d5ff;



    /* Status Colors */

    --success: #10b981;

    --danger: #ef4444;

    --warning: #f59e0b;

    --info: #3b82f6;



    /* Border Radius */

    --radius-lg: 20px;

    --radius-md: 12px;

    --radius-sm: 8px;



    /* Shadows */

    --shadow-sm: 0 2px 8px rgba(139, 92, 246, 0.08);

    --shadow-md: 0 4px 20px rgba(139, 92, 246, 0.1);

    --shadow-lg: 0 8px 32px rgba(139, 92, 246, 0.15);

    --shadow-glow: 0 0 30px rgba(139, 92, 246, 0.3);

}



/* === FIX MOBILE VIEWPORT HEIGHT === */

html {

    height: -webkit-fill-available;

}



/* === ESTILOS GLOBALES === */

* {

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}



body {

    background-color: var(--bg-body);

    font-family: 'Outfit', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    color: var(--text-dark);

    /* Asegurar que el body ocupe toda la altura de la pantalla */

    min-height: 100vh;

    min-height: -webkit-fill-available;

    /* Padding adaptativo para la navegación inferior en mobile */

    padding-bottom: calc(80px + env(safe-area-inset-bottom));

    /* BLINDAJE ANTI-OVERFLOW HORIZONTAL */

    overflow-x: hidden !important;

    width: 100%;

    max-width: 100vw;

    position: relative;

}



h1,

h2,

h3,

h4,

h5,

h6 {

    font-weight: 600;

    letter-spacing: -0.02em;

}



/* === CARDS === */

.card {

    border: 1px solid var(--border-violet);

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-md);

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    background-color: var(--card-bg);

    overflow: hidden;

}



.card:hover {

    box-shadow: var(--shadow-lg);

    transform: translateY(-2px);

}



.card-header {

    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);

    color: white;

    font-weight: 600;

    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;

    border: none;

    padding: 1rem 1.5rem;

}



.card-body {

    padding: 1.5rem;

}



/* === FORMS === */

.form-control,

.form-select {

    background-color: #f1f5f9;

    border: 2px solid transparent;

    border-radius: var(--radius-md);

    padding: 0.75rem 1rem;

    transition: all 0.3s ease;

    font-weight: 500;

}



.form-control:focus,

.form-select:focus {

    background-color: white;

    border-color: var(--primary);

    box-shadow: 0 0 0 4px var(--primary-glow);

    outline: none;

}



.form-label {

    font-weight: 600;

    color: var(--text-dark);

    margin-bottom: 0.5rem;

    font-size: 0.9rem;

    text-transform: uppercase;

    letter-spacing: 0.05em;

}



.form-check-input:checked {

    background-color: var(--primary);

    border-color: var(--primary);

}



.form-check-input:focus {

    border-color: var(--primary-light);

    box-shadow: 0 0 0 0.25rem var(--primary-glow);

}



/* === BUTTONS === */

.btn {

    border-radius: var(--radius-md);

    font-weight: 600;

    padding: 0.625rem 1.25rem;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    border: 2px solid transparent;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    font-size: 0.875rem;

}



.btn-primary {

    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);

    border: none;

    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);

}



.btn-primary:hover {

    transform: translateY(-2px);

    box-shadow: var(--shadow-glow);

    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);

}



.btn-success {

    background: linear-gradient(135deg, var(--success) 0%, #059669 100%);

    border: none;

    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);

}



.btn-success:hover {

    transform: translateY(-2px);

    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);

}



.btn-secondary {

    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);

    border: none;

    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);

}



.btn-danger {

    background: linear-gradient(135deg, var(--danger) 0%, #dc2626 100%);

    border: none;

}



.btn-warning {

    background: linear-gradient(135deg, var(--warning) 0%, #d97706 100%);

    border: none;

    color: white;

}



.btn-info {

    background: linear-gradient(135deg, var(--info) 0%, #2563eb 100%);

    border: none;

}



/* Botones de Iconos (Outline) */

.btn-outline-primary {

    border: 2px solid var(--primary);

    color: var(--primary);

    background: white;

}



.btn-outline-primary:hover {

    background: var(--primary);

    color: white;

    transform: translateY(-1px);

}



.btn-outline-success {

    border: 2px solid var(--success);

    color: var(--success);

    background: white;

}



.btn-outline-success:hover {

    background: var(--success);

    color: white;

}



.btn-outline-danger {

    border: 2px solid var(--danger);

    color: var(--danger);

    background: white;

}



.btn-outline-danger:hover {

    background: var(--danger);

    color: white;

}



.btn-outline-info {

    border: 2px solid var(--info);

    color: var(--info);

    background: white;

}



.btn-outline-info:hover {

    background: var(--info);

    color: white;

}



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

.btn-sm,

.btn-compact {

    padding: 0.25rem 0.75rem;

    font-size: 0.8125rem;

    border-radius: var(--radius-sm);

    font-weight: 500;

}



.btn-xs,

.btn-mini {

    padding: 0.2rem 0.5rem;

    font-size: 0.75rem;

    border-radius: 6px;

    font-weight: 500;

}



/* Botón icon-only */

.btn-icon {

    width: 36px;

    height: 36px;

    padding: 0;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: var(--radius-sm);

}



.btn-icon.btn-sm {

    width: 30px;

    height: 30px;

    font-size: 0.8rem;

}



/* === BADGES === */

.badge {

    padding: 0.5rem 1rem;

    font-weight: 600;

    border-radius: 50px;

    font-size: 0.75rem;

    text-transform: uppercase;

    letter-spacing: 0.05em;

}



.badge.bg-primary {

    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;

    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);

}



.badge.bg-success {

    background: linear-gradient(135deg, var(--success) 0%, #059669 100%) !important;

}



.badge.bg-warning {

    background: linear-gradient(135deg, var(--warning) 0%, #d97706 100%) !important;

}



.badge.bg-danger {

    background: linear-gradient(135deg, var(--danger) 0%, #dc2626 100%) !important;

}



.badge.bg-info {

    background: linear-gradient(135deg, var(--info) 0%, #2563eb 100%) !important;

}



/* === NAVBAR DESKTOP === */

.navbar-desktop {

    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);

    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.2);

    backdrop-filter: blur(10px);

}



.navbar-desktop .navbar-brand {

    font-weight: 700;

    font-size: 1.5rem;

    color: white !important;

    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);

}



.navbar-desktop .nav-link {

    color: rgba(255, 255, 255, 0.9) !important;

    font-weight: 500;

    margin: 0 0.5rem;

    transition: all 0.3s ease;

    border-radius: var(--radius-sm);

    padding: 0.5rem 1rem;

}



.navbar-desktop .nav-link:hover {

    color: white !important;

    background-color: rgba(255, 255, 255, 0.15);

    transform: translateY(-2px);

}



.navbar-desktop .nav-link.active {

    color: white !important;

    background-color: rgba(255, 255, 255, 0.25);

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

}



/* === BOTTOM NAVIGATION (MOBILE) - GLASSMORPHISM === */

.bottom-nav {

    position: fixed !important;

    bottom: 0 !important;

    left: 0 !important;

    width: 100% !important;

    background: rgba(255, 255, 255, 0.8);

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    border-top: 1px solid rgba(139, 92, 246, 0.2);

    box-shadow: 0 -4px 20px rgba(139, 92, 246, 0.15);

    z-index: 9999 !important;

    display: none;

    padding-bottom: env(safe-area-inset-bottom);

}



.bottom-nav .nav-item {

    flex: 1;

    text-align: center;

}



.bottom-nav .nav-link {

    display: flex;

    flex-direction: column;

    align-items: center;

    padding: 0.75rem 0.5rem;

    color: var(--text-muted);

    text-decoration: none;

    transition: all 0.3s ease;

    font-size: 0.75rem;

    font-weight: 500;

    border-radius: var(--radius-sm);

}



.bottom-nav .nav-link i {

    font-size: 1.5rem;

    margin-bottom: 0.25rem;

    transition: all 0.3s ease;

}



.bottom-nav .nav-link.active {

    color: var(--primary);

    font-weight: 600;

}



.bottom-nav .nav-link.active i {

    transform: scale(1.1);

    filter: drop-shadow(0 0 8px var(--primary));

}



.bottom-nav .nav-link:not(.active):hover {

    color: var(--primary);

    background-color: var(--primary-glow);

}



/* === TABLES === */

.table {

    background-color: white;

    border-radius: var(--radius-md);

    overflow: hidden;

}



.table thead {

    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);

    color: white;

}



.table thead th {

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    font-size: 0.8rem;

    padding: 1rem;

}



.table tbody tr {

    transition: all 0.2s ease;

}



.table tbody tr:hover {

    background-color: var(--primary-glow);

}



.table-light {

    background-color: #faf5ff !important;

}



/* === AUTOCOMPLETE DROPDOWN === */

.autocomplete-dropdown {

    position: absolute;

    background: white;

    border: 1px solid var(--border-violet);

    border-radius: var(--radius-md);

    max-height: 300px;

    overflow-y: auto;

    z-index: 10000 !important;

    /* CRÍTICO: Asegurar que esté sobre cards */

    box-shadow: var(--shadow-lg);

    width: 100%;

    margin-top: 0.25rem;

}



/* Dropdown results específico (alias) */

.dropdown-results {

    position: absolute !important;

    z-index: 10000 !important;

    background: white;

    border: 1px solid var(--border-violet);

    border-radius: var(--radius-md);

    box-shadow: var(--shadow-lg);

}



/* Asegurar que contenedores padre no corten el dropdown */

.position-relative {

    overflow: visible !important;

}



.autocomplete-item {

    padding: 0.75rem 1rem;

    cursor: pointer;

    border-bottom: 1px solid var(--bg-body);

    transition: all 0.2s ease;

}



.autocomplete-item:hover {

    background-color: var(--primary-glow);

    color: var(--primary);

}



.autocomplete-item:last-child {

    border-bottom: none;

}



/* === MODAL === */

.modal-content {

    border-radius: var(--radius-lg);

    border: 1px solid var(--border-violet);

    box-shadow: var(--shadow-lg);

}



.modal-header {

    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);

    color: white;

    border-radius: var(--radius-lg) var(--radius-lg) 0 0;

}



.modal-footer {

    border-top: 1px solid var(--border-violet);

    background-color: #faf5ff;

}



/* === AGENDA V2 COMPACT === */



/* Barra de navegación de fechas centrada */

.date-nav-wrapper {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 0.5rem;

    padding: 1rem;

    background: white;

    border-radius: 50px;

    box-shadow: var(--shadow-md);

    margin: 0 auto;

    max-width: fit-content;

    border: 1px solid var(--border-violet);

}



.date-nav-btn {

    border: 2px solid var(--border-color);

    background: white;

    color: var(--text-dark);

    padding: 0.5rem 1rem;

    border-radius: var(--radius-md);

    transition: all 0.3s ease;

    font-weight: 500;

}



.date-nav-btn:hover {

    background-color: var(--primary-glow);

    border-color: var(--primary);

    color: var(--primary);

    transform: translateY(-1px);

}



.date-nav-btn.active {

    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);

    color: white;

    border-color: var(--primary);

    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);

}



.date-nav-arrow {

    width: 40px;

    height: 40px;

    border-radius: var(--radius-md);

    display: flex;

    align-items: center;

    justify-content: center;

}



/* Tarjeta de turno compacta */

.turn-card-compact {

    display: grid;

    grid-template-columns: 70px 1fr auto;

    gap: 1rem;

    padding: 1rem;

    background: white;

    border-bottom: 1px solid var(--border-color);

    transition: all 0.2s ease;

    cursor: pointer;

}



.turn-card-compact:hover {

    background-color: var(--primary-glow);

}



.turn-card-compact:first-child {

    border-radius: var(--radius-lg) var(--radius-lg) 0 0;

}



.turn-card-compact:last-child {

    border-bottom: none;

    border-radius: 0 0 var(--radius-lg) var(--radius-lg);

}



/* Bordes de color según estado */

.turn-border-confirmado {

    border-left: 4px solid var(--success);

}



.turn-border-finalizado {

    border-left: 4px solid #6c757d;

}



.turn-border-pendiente {

    border-left: 4px solid var(--warning);

}



.turn-border-cancelado {

    border-left: 4px solid var(--danger);

}



/* Columna de tiempo */

.turn-time-box {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}



.turn-time-main {

    font-size: 1.5rem;

    font-weight: 700;

    color: var(--primary);

    line-height: 1;

}



.turn-time-sub {

    font-size: 0.75rem;

    color: var(--text-muted);

    margin-top: 0.25rem;

}



/* Columna de información del cliente */

.turn-info-box {

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 0.25rem;

}



.client-name {

    font-weight: 600;

    font-size: 1rem;

    color: var(--text-dark);

}



.client-phone,

.client-duration {

    font-size: 0.875rem;

    color: var(--text-muted);

    display: flex;

    align-items: center;

    gap: 0.5rem;

}



/* Columna de acciones */

.turn-actions-box {

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    justify-content: space-between;

    gap: 0.5rem;

    min-width: 100px;

}



.btn-view-mini {

    padding: 0.375rem 0.75rem;

    font-size: 0.875rem;

    border: 2px solid var(--primary);

    background: white;

    color: var(--primary);

    border-radius: var(--radius-sm);

    transition: all 0.2s ease;

    font-weight: 500;

}



.btn-view-mini:hover {

    background: var(--primary);

    color: white;

    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);

}



.btn-cobrar-mini {

    padding: 0.375rem 0.75rem;

    font-size: 0.875rem;

    background: var(--success);

    color: white;

    border: none;

    border-radius: var(--radius-sm);

    transition: all 0.2s ease;

    font-weight: 500;

}



.btn-cobrar-mini:hover {

    background: #059669;

    transform: translateY(-1px);

    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);

}



.turn-status-badge {

    font-size: 0.75rem;

    padding: 0.25rem 0.75rem;

    border-radius: 50px;

    font-weight: 600;

    white-space: nowrap;

}



.turn-cobrado-badge {

    font-size: 0.75rem;

    color: var(--success);

    font-weight: 500;

    display: flex;

    align-items: center;

    gap: 0.25rem;

}



/* === SERVICIOS/PRODUCTOS COMPACT === */



.service-card-compact,

.product-card-compact {

    display: grid;

    grid-template-columns: 1fr auto auto;

    gap: 1rem;

    align-items: center;

    padding: 1rem;

    background: white;

    border-bottom: 1px solid var(--border-color);

    transition: all 0.2s ease;

}



.service-card-compact:hover,

.product-card-compact:hover {

    background-color: var(--primary-glow);

}



.service-card-compact:first-child,

.product-card-compact:first-child {

    border-radius: var(--radius-lg) var(--radius-lg) 0 0;

}



.service-card-compact:last-child,

.product-card-compact:last-child {

    border-bottom: none;

    border-radius: 0 0 var(--radius-lg) var(--radius-lg);

}



.item-info-col {

    display: flex;

    flex-direction: column;

    gap: 0.25rem;

}



.item-name {

    font-weight: 600;

    font-size: 1rem;

    color: var(--text-dark);

    display: flex;

    align-items: center;

    gap: 0.5rem;

}



.item-details {

    display: flex;

    gap: 0.75rem;

    flex-wrap: wrap;

    align-items: center;

}



.item-toggle-col {

    display: flex;

    align-items: center;

}



.item-actions-col {

    display: flex;

    gap: 0.5rem;

}



/* === UTILITIES === */

.opacity-50 {

    opacity: 0.5;

}



/* Scrollbar personalizado */

::-webkit-scrollbar {

    width: 8px;

    height: 8px;

}



::-webkit-scrollbar-track {

    background: var(--bg-body);

}



::-webkit-scrollbar-thumb {

    background: var(--primary-light);

    border-radius: 50px;

}





::-webkit-scrollbar-thumb:hover {

    background: var(--primary);

}



/* === CALENDARIO SCROLLER (INVISIBLE SCROLLBAR) === */

.calendar-scroller {

    overflow-x: auto;

    scrollbar-width: none;

    /* Firefox */

    -ms-overflow-style: none;

    /* IE/Edge */

}



.calendar-scroller::-webkit-scrollbar {

    display: none;

    /* Chrome/Safari/Opera */

}



/* === RESPONSIVE === */

@media (max-width: 767px) {



    /* Ocultar navbar desktop */

    .navbar-desktop {

        display: none !important;

    }



    /* Mostrar bottom nav */

    .bottom-nav {

        display: flex !important;

    }



    /* Ajustar padding del body */

    body {

        padding-top: 0;

        padding-bottom: 120px !important;

    }



    /* Cards más compactos en móvil */

    .card {

        margin-bottom: 1rem;

        border-radius: var(--radius-md);

    }



    /* Turn cards compact */

    .turn-card-compact {

        grid-template-columns: 60px 1fr auto;

        gap: 0.75rem;

        padding: 0.875rem;

    }



    .turn-time-main {

        font-size: 1.25rem;

    }



    .client-name {

        font-size: 0.9375rem;

    }



    .turn-actions-box {

        min-width: 80px;

    }



    .date-nav-wrapper {

        flex-wrap: wrap;

        padding: 0.75rem;

    }



    /* Service/Product cards en móvil */

    .service-card-compact,

    .product-card-compact {

        grid-template-columns: 1fr;

        gap: 0.75rem;

    }



    .item-toggle-col,

    .item-actions-col {

        justify-content: flex-start;

    }



    .item-actions-col {

        width: 100%;

    }



    .item-actions-col .btn {

        flex: 1;

    }

}



@media (min-width: 768px) {



    /* Mostrar navbar desktop */

    .navbar-desktop {

        display: flex !important;

    }



    /* Ocultar bottom nav */

    .bottom-nav {

        display: none !important;

    }



    /* Ajustar padding del body */

    body {

        padding-top: 0;

        padding-bottom: 20px;

    }

}



/* === ANIMATIONS === */

@keyframes fadeIn {

    from {

        opacity: 0;

        transform: translateY(10px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.card,

.btn,

.badge {

    animation: fadeIn 0.3s ease-out;

}



/* ========================================

   PUNTO DE VENTA (POS) - NEON APP STYLE

   ======================================== */



/* === CONTENEDOR PRINCIPAL === */

.pos-container {

    padding: 1.5rem 0;

    max-width: 1400px;

    margin: 0 auto;

}



/* === BUSCADOR HERO === */

.search-hero {

    position: relative;

    z-index: 100;

    margin-bottom: 2rem;

}



.search-hero-input {

    height: 60px;

    border: none;

    border-radius: var(--radius-lg);

    padding-left: 60px;

    font-size: 1.1rem;

    background: white;

    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.12);

    transition: all 0.3s ease;

    font-weight: 500;

}



.search-hero-input:focus {

    box-shadow: 0 8px 30px rgba(139, 92, 246, 0.25);

    transform: translateY(-2px);

    background: white;

    border: 2px solid var(--primary);

}



.search-hero-input::placeholder {

    color: var(--text-muted);

    font-weight: 400;

}



.search-hero-icon {

    position: absolute;

    left: 20px;

    top: 50%;

    transform: translateY(-50%);

    color: var(--primary);

    font-size: 1.5rem;

    z-index: 1;

}



/* === TICKET CARD (Carrito) === */

.ticket-card {

    background: white;

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-md);

    border: 1px solid var(--border-violet);

    overflow: hidden;

}



.ticket-header {

    padding: 1.25rem 1.5rem;

    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);

    color: white;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.ticket-header h5 {

    margin: 0;

    font-weight: 600;

    font-size: 1.1rem;

}



.ticket-body {

    padding: 0;

}



/* === TICKET EMPTY STATE (OPTIMIZED) === */

.ticket-empty {

    padding: 2rem 1rem;

    /* Reducido de 4rem 2rem */

    text-align: center;

    color: var(--text-muted);

}



.ticket-empty-icon {

    font-size: 2.5rem;

    /* Reducido de 4rem */

    opacity: 0.3;

    margin-bottom: 0.5rem;

    display: inline-block;

}



/* === TICKET ROW (Item del Carrito) === */

.ticket-row {

    display: flex;

    align-items: center;

    padding: 1.25rem 1.5rem;

    border-bottom: 1px solid var(--bg-body);

    transition: all 0.2s ease;

    gap: 1rem;

}



.ticket-row:hover {

    background-color: var(--primary-glow);

}



.ticket-row:last-child {

    border-bottom: none;

}



.ticket-row-name {

    flex: 1;

    font-weight: 600;

    color: var(--text-dark);

    font-size: 1rem;

}



.ticket-row-quantity {

    display: flex;

    align-items: center;

    gap: 0.75rem;

}



.ticket-row-quantity input {

    width: 70px;

    text-align: center;

    border: 2px solid var(--border-color);

    border-radius: var(--radius-sm);

    padding: 0.5rem;

    font-weight: 600;

}



.ticket-row-price {

    min-width: 110px;

    text-align: right;

    font-weight: 600;

    color: var(--text-dark);

}



.ticket-row-subtotal {

    min-width: 120px;

    text-align: right;

    font-weight: 700;

    color: var(--primary);

    font-size: 1.1rem;

}



.ticket-row-delete {

    min-width: 40px;

}



/* === QUANTITY BADGE === */

.qty-badge {

    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);

    color: white;

    padding: 0.3rem 0.7rem;

    border-radius: 50px;

    font-size: 0.85rem;

    font-weight: 700;

    min-width: 45px;

    text-align: center;

}



/* === BOTÓN DELETE ITEM === */

.btn-delete-item {

    width: 36px;

    height: 36px;

    border-radius: var(--radius-sm);

    border: 2px solid #fee2e2;

    background: white;

    color: var(--danger);

    display: inline-flex;

    align-items: center;

    justify-content: center;

    transition: all 0.2s ease;

    cursor: pointer;

}



.btn-delete-item:hover {

    background: #fef2f2;

    border-color: var(--danger);

    transform: scale(1.05);

}



/* === SUMMARY PANEL (Panel Derecho) === */

.summary-panel {

    position: sticky;

    top: 20px;

    background: white;

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-md);

    border: 2px solid var(--border-violet);

}



.summary-section {

    padding: 1.5rem;

}



.summary-section:not(:last-child) {

    border-bottom: 1px solid var(--bg-body);

}



.summary-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 1rem;

}



.summary-row:last-child {

    margin-bottom: 0;

}



.summary-label {

    color: var(--text-muted);

    font-weight: 500;

    font-size: 0.95rem;

}



.summary-value {

    font-weight: 700;

    color: var(--text-dark);

    font-size: 1rem;

}



.summary-total {

    padding: 1.5rem;

    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);

    border-radius: var(--radius-lg) var(--radius-lg) 0 0;

}



.summary-total-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.summary-total-label {

    font-size: 1.3rem;

    font-weight: 700;

    color: var(--text-dark);

    text-transform: uppercase;

    letter-spacing: 0.05em;

}



.summary-total-value {

    font-size: 2rem;

    font-weight: 700;

    color: var(--primary);

    line-height: 1;

}



/* === CLIENT CARD === */

.client-card {

    background: white;

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-md);

    border: 1px solid var(--border-violet);

    padding: 1.25rem;

    margin-bottom: 1.5rem;

}



.client-card-label {

    display: flex;

    align-items: center;

    font-weight: 600;

    color: var(--text-dark);

    margin-bottom: 0.75rem;

    font-size: 0.9rem;

}



.client-card-label i {

    margin-right: 0.5rem;

    color: var(--primary);

}



.client-input {

    border: 2px solid var(--border-color);

    border-radius: var(--radius-md);

    padding: 0.75rem 1rem;

    font-weight: 500;

}



.client-input:focus {

    border-color: var(--primary);

    box-shadow: 0 0 0 4px var(--primary-glow);

}



/* === BOTÓN COBRAR GRANDE === */

.btn-cobrar-lg {

    width: 100%;

    height: 65px;

    font-size: 1.3rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    border-radius: var(--radius-md);

    background: linear-gradient(135deg, var(--success) 0%, #059669 100%);

    border: none;

    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 0.75rem;

}



.btn-cobrar-lg:hover:not(:disabled) {

    transform: translateY(-3px);

    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.5);

    background: linear-gradient(135deg, #059669 0%, var(--success) 100%);

}



.btn-cobrar-lg:disabled {

    opacity: 0.5;

    cursor: not-allowed;

    box-shadow: none;

}



.btn-cobrar-lg i {

    font-size: 1.5rem;

}



/* === PAYMENT DETAILS === */

.payment-details {

    padding: 1.5rem;

    background: #fafafa;

    border-radius: var(--radius-md);

    margin-bottom: 1rem;

}



.payment-input-group {

    position: relative;

}



.payment-input-group .input-group-text {

    background: var(--primary);

    color: white;

    border: none;

    font-weight: 700;

    font-size: 1.2rem;

    border-radius: var(--radius-sm) 0 0 var(--radius-sm);

}



.payment-input-group input {

    border: 2px solid var(--border-color);

    font-size: 1.2rem;

    font-weight: 700;

    height: 55px;

}



.payment-input-group input:focus {

    border-color: var(--primary);

    box-shadow: 0 0 0 4px var(--primary-glow);

}



/* === ALERT DIFERENCIA === */

.alert-difference {

    padding: 1rem 1.25rem;

    border-radius: var(--radius-md);

    border: 2px solid;

    font-weight: 600;

}



.alert-difference.alert-success {

    background: #d1fae5;

    border-color: var(--success);

    color: #065f46;

}



.alert-difference.alert-warning {

    background: #fef3c7;

    border-color: var(--warning);

    color: #92400e;

}



.alert-difference-amount {

    font-size: 1.4rem;

    font-weight: 700;

}



/* === SALDO FAVOR CHECKBOX === */

.saldo-favor-check {

    padding: 1rem;

    background: #ecfdf5;

    border: 2px solid #a7f3d0;

    border-radius: var(--radius-md);

}



.saldo-favor-check .form-check-input:checked {

    background-color: var(--success);

    border-color: var(--success);

}



/* === RESPONSIVE MOBILE === */

@media (max-width: 991px) {

    .summary-panel {

        position: relative;

        top: 0;

        margin-top: 2rem;

    }



    .pos-container {

        padding: 1rem;

    }



    .search-hero-input {

        height: 55px;

        font-size: 1rem;

    }



    .ticket-row {

        flex-wrap: wrap;

        gap: 0.75rem;

    }



    .ticket-row-name {

        width: 100%;

        margin-bottom: 0.5rem;

    }



    .ticket-row-quantity,

    .ticket-row-price,

    .ticket-row-subtotal {

        flex: 1;

        text-align: left;

    }



    .summary-total-value {

        font-size: 1.75rem;

    }



    .btn-cobrar-lg {

        height: 60px;

        font-size: 1.1rem;

    }

}



/* === DASHBOARD 2.0 STYLES === */

.dashboard-metrics {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 1rem;

    margin-bottom: 2rem;

}



.metric-card {

    background: white;

    border-radius: var(--radius-lg);

    padding: 1.5rem;

    display: flex;

    align-items: center;

    gap: 1rem;

    box-shadow: var(--shadow-sm);

    border: 1px solid var(--border-violet);

    transition: transform 0.2s;

}



.metric-card:hover {

    transform: translateY(-3px);

    box-shadow: var(--shadow-md);

}



.metric-icon {

    width: 50px;

    height: 50px;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.5rem;

}



.metric-icon.wallet {

    background: rgba(16, 185, 129, 0.1);

    color: var(--success);

}



.metric-icon.calendar {

    background: rgba(139, 92, 246, 0.1);

    color: var(--primary);

}



/* Calendar Scroller */

.calendar-wrapper {

    margin-bottom: 2rem;

}



.calendar-scroller {

    display: flex;

    gap: 0.8rem;

    overflow-x: auto;

    padding: 0.5rem 0.2rem 1.5rem 0.2rem;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;

    /* Firefox */

    -ms-overflow-style: none;

}



.calendar-scroller::-webkit-scrollbar {

    display: none;

    /* Chrome/Safari */

}



.cal-bubble {

    min-width: 65px;

    height: 85px;

    background: white;

    border: 1px solid var(--border-violet);

    border-radius: 18px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    transition: all 0.2s;

    cursor: pointer;

    position: relative;

    color: var(--text-muted);

    text-decoration: none !important;

}



.cal-bubble:hover {

    transform: translateY(-2px);

    border-color: var(--primary);

    color: var(--primary);

}



.cal-bubble.today {

    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);

    border: none;

    color: white;

    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);

}



.cal-bubble.has-turns::after {

    content: '';

    position: absolute;

    bottom: 6px;

    width: 4px;

    height: 4px;

    border-radius: 50%;

    background-color: var(--secondary);

}



.cal-bubble.today::after {

    background-color: white;

}



.cal-day-name {

    font-size: 0.75rem;

    text-transform: uppercase;

    font-weight: 500;

    margin-bottom: 2px;

}



.cal-day-num {

    font-size: 1.4rem;

    font-weight: 700;

}



/* Timeline */

.timeline-section {

    background: white;

    border-radius: var(--radius-lg);

    padding: 1.5rem;

    box-shadow: var(--shadow-sm);

    border: 1px solid var(--border-violet);

}



.timeline-container {

    position: relative;

    padding: 0;

    /* Eliminamos padding-left para controlarlo con el item */

    margin-left: 1rem;

    /* Aumentamos el margen izquierdo para dar espacio */

}



.timeline-container::before {

    content: '';

    position: absolute;

    left: -1.55rem;

    /* Alineamos con el centro de los círculos */

    top: 0;

    bottom: 0;

    width: 2px;

    background: var(--border-violet);

    border-radius: 2px;

}



.timeline-item {

    position: relative;

    padding-bottom: 2rem;

    padding-left: 2.5rem;

    /* Movemos el padding aquí */

}



.timeline-item:last-child {

    padding-bottom: 0;

}



.timeline-dot {

    position: absolute;

    left: -2.4rem;

    /* Posicionamos a la izquierda del contenido */

    top: 0;

    width: 18px;

    height: 18px;

    background: white;

    border: 3px solid var(--primary);

    border-radius: 50%;

    z-index: 1;

}



.timeline-time {

    font-weight: 700;

    color: var(--text-dark);

    margin-bottom: 0.25rem;

    font-size: 1rem;

    line-height: 1;

}



.timeline-content {

    background: var(--bg-body);

    border-radius: var(--radius-md);

    padding: 1rem;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.timeline-info h5 {

    margin: 0;

    font-size: 0.95rem;

    font-weight: 600;

    color: var(--text-dark);

}



.timeline-info p {

    margin: 0;

    font-size: 0.85rem;

    color: var(--text-muted);

}



.timeline-actions .btn {

    width: 36px;

    height: 36px;

    border-radius: 50%;

    padding: 0;

    display: flex;

    align-items: center;

    justify-content: center;

}



/* Action Grid (Replacement for Cards) */

.action-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 1rem;

    margin-bottom: 2rem;

}



.btn-action-card {

    background: white;

    border: 1px solid var(--border-violet);

    border-radius: var(--radius-md);

    padding: 1rem;

    text-align: center;

    color: var(--text-dark);

    transition: all 0.2s;

    text-decoration: none;

    font-weight: 500;

    display: block;

}



.btn-action-card:hover {

    background: var(--bg-body);

    border-color: var(--primary);

    transform: translateY(-2px);

    color: var(--primary);

}



.btn-action-card i {

    font-size: 1.5rem;

    margin-bottom: 0.5rem;

    display: block;

}



/* --- MEJORA DE LEGIBILIDAD DE FILAS (ZEBRA) --- */



/* Tablas estándar */

.table> :not(caption)>*>* {

    background-color: transparent;

    /* Reset bootstrap */

    box-shadow: none !important;

}



.table tbody tr:nth-of-type(odd) {

    background-color: rgba(139, 92, 246, 0.03) !important;

    /* Violeta ultra suave */

}



.table tbody tr:hover {

    background-color: rgba(139, 92, 246, 0.1) !important;

    /* Highlight al pasar mouse */

    cursor: pointer;

    transition: background-color 0.2s ease;

}



/* Listas de Agenda y Clientes (si usan divs) */

.list-group-item:nth-of-type(odd),

.turn-card-compact:nth-of-type(odd),

.client-row:nth-of-type(odd) {

    background-color: rgba(139, 92, 246, 0.03);

}



.turn-card-compact:hover,

.client-row:hover,

.list-group-item-action:hover {

    background-color: rgba(139, 92, 246, 0.1);

    cursor: pointer;

}



/* --- REDISE�O DE TABLAS (LIMPIEZA VISUAL) --- */

.table thead {

    background: transparent !important;

    /* Elimina fondo pesado */

    border-bottom: 2px solid var(--border-color);

}



.table thead th {

    background: transparent !important;

    color: var(--text-muted) !important;

    font-weight: 700 !important;

    text-transform: uppercase;

    font-size: 0.75rem !important;

    letter-spacing: 0.08em;

    padding: 1rem 1.5rem !important;

}



/* --- ZEBRA & LIST STYLE PARA SERVICIOS/PRODUCTOS --- */

.service-card-compact,

.product-card-compact {

    margin-bottom: 0 !important;

    border-radius: 0 !important;

    border-bottom: 1px solid var(--border-color);

    transition: all 0.2s;

}



.service-card-compact:first-child,

.product-card-compact:first-child {

    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;

}



.service-card-compact:last-child,

.product-card-compact:last-child {

    border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;

    border-bottom: none;

}



/* Zebra Striping para items que NO son tablas */

.service-card-compact:nth-of-type(odd),

.product-card-compact:nth-of-type(odd) {

    background-color: rgba(139, 92, 246, 0.03) !important;

}



.service-card-compact:hover,

.product-card-compact:hover {

    background-color: rgba(139, 92, 246, 0.08) !important;

    transform: none !important;

    /* Evitar movimiento en listas densas */

    z-index: 1;

}





/* --- USER DROPDOWN MENU --- */

.dropdown-menu {

    background: white;

    border: 1px solid var(--border-violet);

    border-radius: var(--radius-md);

    box-shadow: var(--shadow-lg);

    padding: 0.5rem;

    margin-top: 0.5rem;

}



.dropdown-item {

    border-radius: var(--radius-sm);

    padding: 0.6rem 1rem;

    transition: all 0.2s ease;

    color: var(--text-dark);

    font-weight: 500;

}



.dropdown-item:hover {

    background-color: var(--primary-glow);

    color: var(--primary);

}



.dropdown-item i {

    width: 20px;

    text-align: center;

}







/* --- WHATSAPP BUTTONS (NEON GREEN) --- */

.btn-success {

    background: linear-gradient(135deg, #10b981 0%, #059669 100%);

    border: none;

    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);

}



.btn-success:hover {

    background: linear-gradient(135deg, #059669 0%, #047857 100%);

    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);

    transform: translateY(-2px);

}



/* WhatsApp button variant for small sizes */

.btn-success.btn-sm {

    padding: 0.4rem 0.75rem;

    font-size: 0.9rem;

}



/* WhatsApp icon color override */

.fab.fa-whatsapp {

    color: white;

}





/* ========================================

   GALER�A DE FOTOS - FICHA T�CNICA

   ======================================== */



/* Grid de galer�a de fotos */

.gallery-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));

    gap: 10px;

    margin-top: 15px;

}



/* Miniaturas de fotos */

.photo-thumb {

    width: 100%;

    height: 80px;

    object-fit: cover;

    border-radius: 8px;

    border: 2px solid #dee2e6;

    cursor: pointer;

    transition: all 0.3s ease;

}



.photo-thumb:hover {

    border-color: #0d6efd;

    transform: scale(1.05);

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

}



/* �rea de upload de fotos */

.photo-upload-area {

    border: 2px dashed #dee2e6;

    border-radius: 8px;

    padding: 20px;

    text-align: center;

    cursor: pointer;

    transition: all 0.3s ease;

    background-color: #f8f9fa;

}



.photo-upload-area:hover {

    border-color: #0d6efd;

    background-color: #e7f1ff;

}



.photo-upload-area i {

    display: block;

    margin-bottom: 10px;

}



/* Secci�n de ficha t�cnica */

.ficha-tecnica-section {

    padding: 15px;

    background-color: #f8f9fa;

    border-radius: 8px;

    margin-top: 15px;

}



/* === POLISHING V2 === */



/* 1. PROFUNDIDAD Y CRISTAL (GLASSMORPHISM) */

.metric-card,

.timeline-content,

.card {

    background: rgba(255, 255, 255, 0.85) !important;

    backdrop-filter: blur(12px) !important;

    -webkit-backdrop-filter: blur(12px) !important;

    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.10) !important;

    border: 1px solid rgba(255, 255, 255, 0.4) !important;

    /* Suavizar bordes visualmente */

    border-radius: var(--radius-lg, 1rem) !important;

}



/* Sombra violeta suave para elevación premium */

.metric-card:hover,

.metric-card:active {

    box-shadow: 0 12px 40px -8px rgba(139, 92, 246, 0.25) !important;

}



/* 2. INTERACCIONES TÁCTILES (MOBILE FEEL) */

.metric-card,

.cal-bubble,

.timeline-item,

.btn {

    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease, background-color 0.2s ease !important;

    cursor: pointer;

    /* Indicar interactividad */

}



/* Efecto de "hundimiento" al tocar */

.metric-card:active,

.cal-bubble:active,

.timeline-item:active,

.btn:active {

    transform: scale(0.97) !important;

}



/* Scroll horizontal invisible pero funcional */

.calendar-scroller {

    scrollbar-width: none !important;

    /* Firefox */

    -ms-overflow-style: none !important;

    /* IE/Edge */

    padding-bottom: 5px;

    /* Espacio para el rebote */

}



.calendar-scroller::-webkit-scrollbar {

    display: none !important;

    /* Chrome/Safari/Opera */

}



/* 3. TIPOGRAFÍA Y JERARQUÍA */

h1,

h2,

h3,

.navbar-brand {

    letter-spacing: -0.035em !important;

    font-weight: 700 !important;

}



/* Texto secundario más legible y frío */

.text-muted {

    color: #64748b !important;

    /* Slate 500 - Más premium que el gris estándar */

    font-weight: 500;

}



/* 4. DETALLES "DELIGHT" (EL FACTOR WOW) */



/* Timeline: Línea con gradiente */

.timeline-item::before {

    background: linear-gradient(to bottom, var(--primary, #8b5cf6), rgba(139, 92, 246, 0.1)) !important;

    width: 2px !important;

    /* Asegurar que la línea se vea bien */

}



.timeline-dot {

    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.8), 0 0 15px rgba(139, 92, 246, 0.6) !important;

}



/* Botón Logout: Glow rojo sutil */

.btn-danger,

a[href="logout.php"] {

    position: relative;

    overflow: hidden;

    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4) !important;

    border: none !important;

}



.btn-danger:hover,

a[href="logout.php"]:hover {

    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.6) !important;

}



/* Navbar Inferior: Indicador Activo */

.bottom-nav .nav-link.active {

    color: var(--primary, #8b5cf6) !important;

    position: relative;

}



.bottom-nav .nav-link.active::after {

    content: '';

    position: absolute;

    bottom: 5px;

    width: 5px;

    height: 5px;

    background-color: var(--primary, #8b5cf6);

    border-radius: 50%;

    box-shadow: 0 0 8px var(--primary, #8b5cf6);

}



/* Ajuste extra para títulos de tarjetas */

.metric-card h3 {

    background: -webkit-linear-gradient(45deg, #1e293b, #475569);

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

    /* Fallback simple si el gradiente no gusta: color: #1e293b; */

}



/* Cápsulas de calendario - Estado 'today' más vibrante */

.cal-bubble.today {

    background: linear-gradient(135deg, var(--primary, #8b5cf6) 0%, #7c3aed 100%) !important;

    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.4) !important;

    border: none !important;

}



/* === DASHBOARD PREMIUM OVERRIDES === */

/* Scoped styles for index.php only - No global class modifications */



/* 1. ELEVACIÓN Y SOMBRAS DE COLOR (Premium Card Shadows) */

.dashboard-metrics .metric-card {

    border-radius: 28px !important;

    padding: 2rem !important;

    box-shadow: 0 8px 24px -8px rgba(139, 92, 246, 0.2) !important;

    border: 1px solid rgba(255, 255, 255, 0.8) !important;

    /* Glass feel border */

    background: rgba(255, 255, 255, 0.95) !important;

}



.dashboard-metrics .metric-card:hover {

    transform: translateY(-4px) !important;

    box-shadow: 0 12px 32px -8px rgba(139, 92, 246, 0.3) !important;

}



/* Sombra verde para tarjeta de ventas */

.dashboard-metrics .metric-card:first-child {

    box-shadow: 0 8px 24px -8px rgba(16, 185, 129, 0.25) !important;

    border: 1px solid rgba(255, 255, 255, 0.8) !important;

}



.dashboard-metrics .metric-card:first-child:hover {

    box-shadow: 0 12px 32px -8px rgba(16, 185, 129, 0.35) !important;

}



/* 2. CALENDARIO CÁPSULA VERTICAL (iOS Style) */

.calendar-wrapper .cal-bubble {

    min-width: 72px !important;

    height: 110px !important;

    border-radius: 22px !important;

    background: rgba(255, 255, 255, 0.95) !important;

    border: 1px solid rgba(139, 92, 246, 0.08) !important;

    box-shadow: 0 4px 20px -5px rgba(139, 92, 246, 0.12) !important;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;

}



.calendar-wrapper .cal-bubble:hover {

    transform: translateY(-3px) scale(1.02) !important;

    box-shadow: 0 8px 30px -5px rgba(139, 92, 246, 0.25) !important;

    border-color: rgba(139, 92, 246, 0.2) !important;

}



/* Estado TODAY con gradiente premium (volumen sutil) */

.calendar-wrapper .cal-bubble.today {

    background: linear-gradient(135deg, #6C5DD3 0%, #8B5CF6 100%) !important;

    border: none !important;

    box-shadow: 0 8px 30px -5px rgba(108, 93, 211, 0.5) !important;

    color: white !important;

}



.calendar-wrapper .cal-bubble.today:hover {

    box-shadow: 0 12px 40px -5px rgba(108, 93, 211, 0.6) !important;

    transform: translateY(-4px) scale(1.03) !important;

}



/* Días con turnos - Badge sutil integrado */

.calendar-wrapper .cal-bubble.has-turns:not(.today)::after {

    bottom: 10px !important;

    width: 6px !important;

    height: 6px !important;

    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%) !important;

    box-shadow: 0 2px 8px rgba(236, 72, 153, 0.4) !important;

}



/* 3. TIMELINE HOLLOW DOTS (Anillos Premium) */

.timeline-section {

    border-radius: 28px !important;

    padding: 2rem !important;

    box-shadow: 0 10px 40px -10px rgba(139, 92, 246, 0.15) !important;

    border: 1px solid rgba(255, 255, 255, 0.8) !important;

    /* Glass feel */

}



.timeline-section .timeline-dot {

    width: 20px !important;

    height: 20px !important;

    background: #FFFFFF !important;

    /* Blanco puro */

    border: 3px solid var(--primary) !important;

    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9),

        0 4px 12px rgba(139, 92, 246, 0.3) !important;

}



.timeline-section .timeline-container::before {

    background: #E5E7EB !important;

    /* Línea gris muy suave */

    width: 2px !important;

}



.timeline-section .timeline-content {

    border-radius: 20px !important;

    padding: 1.25rem !important;

    background: rgba(248, 250, 252, 0.8) !important;

    backdrop-filter: blur(10px) !important;

    border: 1px solid rgba(139, 92, 246, 0.06) !important;

}



.timeline-section .timeline-content:hover {

    background: rgba(139, 92, 246, 0.05) !important;

    transform: translateX(4px) !important;

}



/* 4. BOTÓN LOGOUT SQUIRCLE (Premium Icon Button con Colored Shadow) */

a[href="logout.php"].btn-danger {

    width: 42px !important;

    height: 42px !important;

    border-radius: 14px !important;

    padding: 0 !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;

    border: none !important;

    box-shadow: 0 10px 20px -5px rgba(239, 68, 68, 0.4) !important;

    /* Colored shadow */

}



a[href="logout.php"].btn-danger:hover {

    transform: scale(1.05) !important;

    box-shadow: 0 12px 28px -5px rgba(239, 68, 68, 0.55) !important;

}



a[href="logout.php"].btn-danger i {

    font-size: 1.1rem !important;

    color: white !important;

}



/* 5. TIPOGRAFÍA PREMIUM (Blue-Gray Hierarchy + Letter Spacing) */

.text-muted,

.timeline-section .timeline-info p,

small.text-muted {

    color: #4B5563 !important;

    font-weight: 500 !important;

}



/* Títulos principales con letter-spacing compacto */

h2.mb-1.fw-bold {

    letter-spacing: -0.5px !important;

}



/* Metric cards números más grandes */

.metric-card h3 {

    font-size: 2rem !important;

    letter-spacing: -0.03em !important;

}



/* Timeline hora más destacada */

.timeline-section .timeline-time {

    font-size: 1.1rem !important;

    color: #1e293b !important;

    letter-spacing: -0.3px !important;

}



/* Título de secciones (Próximos 15 días, etc) */

.calendar-wrapper h5,

.timeline-section h5 {

    letter-spacing: -0.5px !important;

}



/* 6. CARD "PRÓXIMOS TURNOS" (Orange Glow) */

.card[style*="border-color: #f59e0b"] {

    border-radius: 28px !important;

    box-shadow: 0 4px 12px -4px rgba(245, 158, 11, 0.2) !important;

    border: 1px solid rgba(255, 255, 255, 0.8) !important;

    /* Glass feel - shadow reducida para evitar overflow */

}



.card[style*="border-color: #f59e0b"] .card-header {

    border-radius: 28px 28px 0 0 !important;

    padding: 1.5rem !important;

}



.card[style*="border-color: #f59e0b"] .list-group-item {

    border-left: none !important;

    border-right: none !important;

    padding: 1.25rem 1.5rem !important;

}



.card[style*="border-color: #f59e0b"] .list-group-item:first-child {

    border-top: none !important;

}



.card[style*="border-color: #f59e0b"] .list-group-item:last-child {

    border-bottom: none !important;

    border-radius: 0 0 28px 28px !important;

}



/* 7. ESPACIADO PREMIUM (Breathing Room) */

.dashboard-metrics {

    gap: 1.25rem !important;

    margin-bottom: 2.5rem !important;

}



.calendar-wrapper {

    margin-bottom: 2.5rem !important;

}



.calendar-wrapper h5 {

    font-size: 1.1rem !important;

    letter-spacing: -0.5px !important;

    color: #1e293b !important;

}



/* 8. ICON BACKGROUNDS (Subtle Glow) */

.metric-icon.wallet {

    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.15) 100%) !important;

    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.15) !important;

}



.metric-icon.calendar {

    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(139, 92, 246, 0.15) 100%) !important;

    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.15) !important;

}



/* 9. MOBILE OPTIMIZATIONS (Preserve Premium on Small Screens) */

@media (max-width: 767px) {

    .dashboard-metrics {

        gap: 0.75rem !important;

    }



    .dashboard-metrics .metric-card {

        padding: 1.25rem !important;

        border-radius: 20px !important;

        box-shadow: 0 4px 12px -4px rgba(139, 92, 246, 0.15) !important;

    }



    .dashboard-metrics .metric-card:first-child {

        box-shadow: 0 4px 12px -4px rgba(16, 185, 129, 0.2) !important;

    }



    .timeline-section,

    .card[style*="border-color: #f59e0b"] {

        border-radius: 24px !important;

    }



    .calendar-wrapper .cal-bubble {

        min-width: 68px !important;

        height: 105px !important;

        border-radius: 20px !important;

    }

}



/* 10. SCROLL BEHAVIOR PREMIUM (Smooth Snap) */

.calendar-scroller {

    scroll-behavior: smooth;

    scroll-snap-type: x proximity;

}



.calendar-scroller .cal-bubble {

    scroll-snap-align: start;

}



/* === PROFILE HEADER PREMIUM (iOS Style) === */

.profile-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 0.75rem 0;

    margin-bottom: 1.5rem;

}



.profile-header-content {

    display: flex;

    align-items: center;

    gap: 0.875rem;

}



.user-avatar {

    width: 48px;

    height: 48px;

    border-radius: 50%;

    background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.3rem;

    font-weight: 700;

    color: white;

    box-shadow: 0 6px 16px -4px rgba(139, 92, 246, 0.4);

    flex-shrink: 0;

}



.profile-text {

    display: flex;

    flex-direction: column;

    gap: 0.15rem;

}



.greeting-text {

    margin: 0;

    font-size: 0.8rem;

    color: #9CA3AF;

    font-weight: 500;

}



.user-name {

    margin: 0;

    font-size: 1.4rem;

    font-weight: 700;

    color: #111827;

    letter-spacing: -0.5px;

    line-height: 1.2;

}



.btn-glass-logout {

    width: 40px;

    height: 40px;

    border-radius: 12px;

    background: rgba(254, 242, 242, 0.9);

    border: 1px solid rgba(239, 68, 68, 0.2);

    display: inline-flex;

    align-items: center;

    justify-content: center;

    color: #EF4444;

    font-size: 1rem;

    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.15);

    transition: all 0.2s ease;

    text-decoration: none;

}



.btn-glass-logout:hover {

    background: rgba(239, 68, 68, 0.15);

    border-color: rgba(239, 68, 68, 0.3);

    color: #DC2626;

    transform: scale(1.05);

}



/* === AGENDA PREMIUM OVERRIDES === */

/* Scoped styles for agenda.php only - Same premium effects as dashboard */



/* 1. Date Navigation Bar (Premium Capsule) */

.date-nav-wrapper {

    background: rgba(255, 255, 255, 0.95) !important;

    border: 1px solid rgba(255, 255, 255, 0.8) !important;

    box-shadow: 0 8px 30px -8px rgba(139, 92, 246, 0.2) !important;

    border-radius: 50px !important;

}



.date-nav-btn {

    border-radius: 14px !important;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;

}



.date-nav-btn.active {

    background: linear-gradient(135deg, #6C5DD3 0%, #8B5CF6 100%) !important;

    box-shadow: 0 6px 20px -5px rgba(108, 93, 211, 0.5) !important;

}



.date-nav-btn:hover {

    transform: translateY(-1px) scale(1.02) !important;

}



/* 2. Main Turnos Card (Glass Feel) */

.card {

    border-radius: 28px !important;

    border: 1px solid rgba(255, 255, 255, 0.8) !important;

    box-shadow: 0 10px 40px -10px rgba(139, 92, 246, 0.15) !important;

}



.card-header {

    border-radius: 28px 28px 0 0 !important;

}



/* 3. Turn Cards Compact (Premium Styling) */

.turn-card-compact {

    border-radius: 0 !important;

    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;

}



.turn-card-compact:first-child {

    border-radius: 28px 28px 0 0 !important;

}



.turn-card-compact:last-child {

    border-radius: 0 0 28px 28px !important;

}



.turn-card-compact:hover {

    background-color: rgba(139, 92, 246, 0.08) !important;

    transform: translateX(4px) !important;

}



/* Estado borders con sombras de color */

.turn-border-confirmado {

    border-left: 4px solid var(--success) !important;

    box-shadow: inset 4px 0 0 0 rgba(16, 185, 129, 0.1) !important;

}



.turn-border-finalizado {

    border-left: 4px solid #6c757d !important;

    box-shadow: inset 4px 0 0 0 rgba(108, 117, 125, 0.1) !important;

}



.turn-border-pendiente {

    border-left: 4px solid var(--warning) !important;

    box-shadow: inset 4px 0 0 0 rgba(245, 158, 11, 0.1) !important;

}



.turn-border-cancelado {

    border-left: 4px solid var(--danger) !important;

    box-shadow: inset 4px 0 0 0 rgba(239, 68, 68, 0.1) !important;

}



/* 4. Botones Mini Premium */

.btn-view-mini {

    border-radius: 10px !important;

    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.2) !important;

}



.btn-view-mini:hover {

    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.35) !important;

}



.btn-cobrar-mini {

    border-radius: 10px !important;

    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25) !important;

}



.btn-cobrar-mini:hover {

    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4) !important;

}



/* 5. Turn Status Badge (Refined) */

.turn-status-badge {

    border-radius: 50px !important;

    padding: 0.3rem 0.85rem !important;

    font-weight: 600 !important;

    letter-spacing: 0.02em !important;

}



.turn-status-badge.bg-success {

    background: linear-gradient(135deg, var(--success) 0%, #059669 100%) !important;

    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3) !important;

}



.turn-status-badge.bg-warning {

    background: linear-gradient(135deg, var(--warning) 0%, #d97706 100%) !important;

    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3) !important;

}



.turn-status-badge.bg-danger {

    background: linear-gradient(135deg, var(--danger) 0%, #dc2626 100%) !important;

    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3) !important;

}



/* 6. Modal Premium */

.modal-content {

    border-radius: 28px !important;

    border: 1px solid rgba(255, 255, 255, 0.8) !important;

    box-shadow: 0 20px 60px -15px rgba(139, 92, 246, 0.3) !important;

}



.modal-header {

    border-radius: 28px 28px 0 0 !important;

}



/* 7. Client Name & Phone Typography */

.client-name {

    font-weight: 600 !important;

    letter-spacing: -0.3px !important;

}



.client-phone {

    color: #6B7280 !important;

    font-weight: 500 !important;

}



/* 8. Time Display Premium */

.turn-time-main {

    letter-spacing: -0.5px !important;

    font-weight: 700 !important;

}



/* 9. Empty State Polish */

.text-center.py-5 {

    padding: 3rem 2rem !important;

}



/* 10. Mobile Optimizations */

@media (max-width: 767px) {

    .card {

        border-radius: 24px !important;

    }



    .turn-card-compact:first-child {

        border-radius: 24px 24px 0 0 !important;

    }



    .turn-card-compact:last-child {

        border-radius: 0 0 24px 24px !important;

    }



    .modal-content {

        border-radius: 24px !important;

    }



    .modal-header {

        border-radius: 24px 24px 0 0 !important;

    }

}



/* === TIMELINE SECTION ENHANCED (Dashboard) === */

/* Mejora visual para "Cronograma de Hoy" */



.timeline-section {

    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.98) 100%) !important;

    border: 1px solid rgba(139, 92, 246, 0.12) !important;

}



/* Header del timeline más destacado */

.timeline-section h5 {

    color: #1e293b !important;

    font-weight: 700 !important;

    font-size: 1.15rem !important;

}



/* Icono del reloj más vibrante */

.timeline-section .fa-clock {

    color: #3b82f6 !important;

    font-size: 1.3rem !important;

}



/* Link/título clickeable con mejor contraste */

.timeline-section a.text-decoration-none {

    padding: 0.5rem 0 !important;

    border-radius: 12px !important;

    margin: -0.5rem 0 !important;

    transition: background 0.2s ease !important;

}



.timeline-section a.text-decoration-none:hover {

    background: rgba(139, 92, 246, 0.05) !important;

}



/* Timeline items con más contraste */

.timeline-content {

    background: white !important;

    border: 1px solid rgba(139, 92, 246, 0.08) !important;

}



/* === TIMELINE SECTION ENHANCED V2 (Dashboard) === */

/* Mejora DRAMÁTICA para "Cronograma de Hoy" */



.timeline-section {

    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;

    border: 1px solid rgba(139, 92, 246, 0.15) !important;

    padding: 1.75rem !important;

}



/* Header del timeline - MÁS destacado y con espacio */

.timeline-section>a {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    padding: 1rem 1.25rem !important;

    background: white !important;

    border-radius: 16px !important;

    margin-bottom: 1.5rem !important;

    box-shadow: 0 2px 12px rgba(139, 92, 246, 0.08) !important;

    border: 1px solid rgba(139, 92, 246, 0.1) !important;

    transition: all 0.2s ease !important;

}



.timeline-section>a:hover {

    background: rgba(248, 250, 252, 0.95) !important;

    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.15) !important;

    transform: translateY(-1px) !important;

}



/* Título más grande y destacado */

.timeline-section h5 {

    color: #1e293b !important;

    font-weight: 700 !important;

    font-size: 1.2rem !important;

    margin: 0 !important;

}



/* Icono del reloj más grande y vibrante */

.timeline-section .fa-clock {

    color: #3b82f6 !important;

    font-size: 1.4rem !important;

    margin-right: 0.75rem !important;

}



/* Flecha chevron más visible */

.timeline-section .fa-chevron-right {

    color: #94a3b8 !important;

    font-size: 1.1rem !important;

}



/* Timeline container con más espacio */

.timeline-container {

    margin-top: 0.5rem !important;

}



/* Timeline items con fondo más contrastado */

.timeline-content {

    background: white !important;

    border: 1px solid #e5e7eb !important;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;

}



.timeline-content:hover {

    background: rgba(249, 250, 251, 1) !important;

    border-color: rgba(139, 92, 246, 0.15) !important;

}



/* === TIMELINE SECTION REFINED (Dashboard) === */

/* Fix: Eliminar fondo gris feo y agregar espacio correcto */



.timeline-section {

    background: white !important;

    border: 1px solid rgba(139, 92, 246, 0.12) !important;

    padding: 2rem !important;

}



/* Header del timeline - ESPACIO ABAJO */

.timeline-section>a {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    margin-bottom: 2rem !important;

    padding-bottom: 1rem !important;

    border-bottom: 1px solid #f1f5f9 !important;

}



/* Título */

.timeline-section h5 {

    color: #1e293b !important;

    font-weight: 700 !important;

    font-size: 1.15rem !important;

    margin: 0 !important;

}



/* Icono del reloj */

.timeline-section .fa-clock {

    color: #3b82f6 !important;

    font-size: 1.3rem !important;

    margin-right: 0.75rem !important;

}



/* Círculos del timeline - HOLLOW por defecto (turnos pendientes) */

.timeline-dot {

    width: 20px !important;

    height: 20px !important;

    background: white !important;

    border: 3px solid var(--primary) !important;

    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9),

        0 4px 12px rgba(139, 92, 246, 0.3) !important;

}



/* Círculos SÓLIDOS para turnos completados (estado "Listo") */

.timeline-dot.completed {

    background: var(--success) !important;

    border: 3px solid var(--success) !important;

    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9),

        0 4px 12px rgba(16, 185, 129, 0.4) !important;

}



/* Timeline items */

.timeline-content {

    background: rgba(248, 250, 252, 0.8) !important;

    border: 1px solid rgba(139, 92, 246, 0.06) !important;

}



.timeline-content:hover {

    background: rgba(139, 92, 246, 0.05) !important;

}



/* === TIMELINE SECTION FINAL (Dashboard) === */

/* Título más arriba + Círculos violetas */



.timeline-section {

    background: white !important;

    border: 1px solid rgba(139, 92, 246, 0.12) !important;

    padding: 1.25rem 2rem 2rem 2rem !important;

    /* Menos padding arriba */

}



/* Header del timeline - ESPACIO ABAJO */

.timeline-section>a {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    margin-bottom: 2rem !important;

    padding-bottom: 1rem !important;

    border-bottom: 1px solid #f1f5f9 !important;

}



/* Título */

.timeline-section h5 {

    color: #1e293b !important;

    font-weight: 700 !important;

    font-size: 1.15rem !important;

    margin: 0 !important;

}



/* Icono del reloj */

.timeline-section .fa-clock {

    color: #3b82f6 !important;

    font-size: 1.3rem !important;

    margin-right: 0.75rem !important;

}



/* Círculos del timeline - HOLLOW VIOLETA por defecto (turnos pendientes) */

.timeline-dot {

    width: 20px !important;

    height: 20px !important;

    background: white !important;

    border: 3px solid var(--primary) !important;

    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9),

        0 4px 12px rgba(139, 92, 246, 0.3) !important;

}



/* Círculos SÓLIDOS VIOLETAS para turnos completados (estado "Listo") */

.timeline-dot.completed {

    background: var(--primary) !important;

    border: 3px solid var(--primary) !important;

    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9),

        0 4px 12px rgba(139, 92, 246, 0.5) !important;

}



/* Línea vertical violeta */

.timeline-container::before {

    background: #E5E7EB !important;

}



/* Timeline items */

.timeline-content {

    background: rgba(248, 250, 252, 0.8) !important;

    border: 1px solid rgba(139, 92, 246, 0.06) !important;

}



.timeline-content:hover {

    background: rgba(139, 92, 246, 0.05) !important;

}



/* === TIMELINE SECTION FINAL V2 (Dashboard) === */

/* Título más arriba + Líneas violetas + Texto más grande */



.timeline-section {

    background: white !important;

    border: 1px solid rgba(139, 92, 246, 0.12) !important;

    padding: 1rem 2rem 2rem 2rem !important;

    /* Aún menos padding arriba */

}



/* Header del timeline - ESPACIO ABAJO */

.timeline-section>a {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    margin-bottom: 2rem !important;

    padding-bottom: 1rem !important;

    border-bottom: 1px solid #f1f5f9 !important;

}



/* Título - Más grande */

.timeline-section h5 {

    color: #1e293b !important;

    font-weight: 700 !important;

    font-size: 1.25rem !important;

    /* De 1.15rem a 1.25rem */

    margin: 0 !important;

}



/* Icono del reloj */

.timeline-section .fa-clock {

    color: #3b82f6 !important;

    font-size: 1.3rem !important;

    margin-right: 0.75rem !important;

}



/* Círculos del timeline - HOLLOW VIOLETA por defecto (turnos pendientes) */

.timeline-dot {

    width: 20px !important;

    height: 20px !important;

    background: white !important;

    border: 3px solid var(--primary) !important;

    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9),

        0 4px 12px rgba(139, 92, 246, 0.3) !important;

}



/* Círculos SÓLIDOS VIOLETAS para turnos completados (estado "Listo") */

.timeline-dot.completed {

    background: var(--primary) !important;

    border: 3px solid var(--primary) !important;

    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9),

        0 4px 12px rgba(139, 92, 246, 0.5) !important;

}



/* Línea vertical VIOLETA (mismo color que círculos) */

.timeline-container::before {

    background: linear-gradient(to bottom,

            rgba(139, 92, 246, 0.3) 0%,

            rgba(139, 92, 246, 0.15) 100%) !important;

    width: 2px !important;

}



/* Timeline items */

.timeline-content {

    background: rgba(248, 250, 252, 0.8) !important;

    border: 1px solid rgba(139, 92, 246, 0.06) !important;

}



.timeline-content:hover {

    background: rgba(139, 92, 246, 0.05) !important;

}



/* === TIMELINE SECTION FINAL V3 (Dashboard) === */

/* Título centrado con más espacio */



.timeline-section {

    background: white !important;

    border: 1px solid rgba(139, 92, 246, 0.12) !important;

    padding: 1rem 2rem 2rem 2rem !important;

}



/* Header del timeline - CENTRADO con más espacio */

.timeline-section>a {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    /* Centrado */

    margin-bottom: 2.5rem !important;

    /* Más espacio (de 2rem a 2.5rem) */

    padding-bottom: 1.25rem !important;

    border-bottom: 1px solid #f1f5f9 !important;

}



/* Título - Centrado y más grande */

.timeline-section h5 {

    color: #1e293b !important;

    font-weight: 700 !important;

    font-size: 1.25rem !important;

    margin: 0 !important;

    text-align: center !important;

}



/* Icono del reloj */

.timeline-section .fa-clock {

    color: #3b82f6 !important;

    font-size: 1.3rem !important;

    margin-right: 0.75rem !important;

}



/* Ocultar flecha chevron en centrado */

.timeline-section .fa-chevron-right {

    display: none !important;

}



/* Círculos del timeline - HOLLOW VIOLETA por defecto (turnos pendientes) */

.timeline-dot {

    width: 20px !important;

    height: 20px !important;

    background: white !important;

    border: 3px solid var(--primary) !important;

    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9),

        0 4px 12px rgba(139, 92, 246, 0.3) !important;

}



/* Círculos SÓLIDOS VIOLETAS para turnos completados (estado "Listo") */

.timeline-dot.completed {

    background: var(--primary) !important;

    border: 3px solid var(--primary) !important;

    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9),

        0 4px 12px rgba(139, 92, 246, 0.5) !important;

}



/* Línea vertical VIOLETA (mismo color que círculos) */

.timeline-container::before {

    background: linear-gradient(to bottom,

            rgba(139, 92, 246, 0.3) 0%,

            rgba(139, 92, 246, 0.15) 100%) !important;

    width: 2px !important;

}



/* Timeline items */

.timeline-content {

    background: rgba(248, 250, 252, 0.8) !important;

    border: 1px solid rgba(139, 92, 246, 0.06) !important;

}



.timeline-content:hover {

    background: rgba(139, 92, 246, 0.05) !important;

}



/* === SECTION HEADERS PREMIUM (Dashboard) === */

/* Headers con glow neon matching para Timeline y Próximos Turnos */



/* TIMELINE SECTION - Violeta Neon Glow */

.timeline-section {

    background: white !important;

    border: 1px solid rgba(139, 92, 246, 0.12) !important;

    padding: 1rem 2rem 2rem 2rem !important;

}



.timeline-section>a {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    margin-bottom: 2.5rem !important;

    padding: 1rem 1.5rem !important;

    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(99, 102, 241, 0.08) 100%) !important;

    border-radius: 16px !important;

    border: 1px solid rgba(139, 92, 246, 0.15) !important;

    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.15),

        0 0 40px rgba(139, 92, 246, 0.1) !important;

    /* Neon glow */

    transition: all 0.3s ease !important;

}



.timeline-section>a:hover {

    box-shadow: 0 6px 28px rgba(139, 92, 246, 0.25),

        0 0 60px rgba(139, 92, 246, 0.15) !important;

    transform: translateY(-2px) !important;

}



.timeline-section h5 {

    color: #1e293b !important;

    font-weight: 700 !important;

    font-size: 1.25rem !important;

    margin: 0 !important;

    text-align: center !important;

}



.timeline-section .fa-clock {

    color: #6366f1 !important;

    font-size: 1.3rem !important;

    margin-right: 0.75rem !important;

}



.timeline-section .fa-chevron-right {

    display: none !important;

}



/* PRÓXIMOS TURNOS SECTION - Naranja Neon Glow */

.card[style*="border-color: #f59e0b"] {

    border-radius: 28px !important;

    border: 1px solid rgba(245, 158, 11, 0.2) !important;

    box-shadow: 0 4px 12px -4px rgba(245, 158, 11, 0.2) !important;

}



.card[style*="border-color: #f59e0b"] .card-header {

    border-radius: 28px 28px 0 0 !important;

    padding: 1rem 1.5rem !important;

    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(249, 115, 22, 0.12) 100%) !important;

    border: none !important;

    border-bottom: 1px solid rgba(245, 158, 11, 0.15) !important;

    text-align: center !important;

}



.card[style*="border-color: #f59e0b"] .card-header h5 {

    color: #1e293b !important;

    font-weight: 700 !important;

    font-size: 1.25rem !important;

    margin: 0 !important;

}



.card[style*="border-color: #f59e0b"] .card-header .fa-calendar {

    color: #f97316 !important;

    font-size: 1.3rem !important;

    margin-right: 0.75rem !important;

}



/* Timeline dots y líneas */

.timeline-dot {

    width: 20px !important;

    height: 20px !important;

    background: white !important;

    border: 3px solid var(--primary) !important;

    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9),

        0 4px 12px rgba(139, 92, 246, 0.3) !important;

}



.timeline-dot.completed {

    background: var(--primary) !important;

    border: 3px solid var(--primary) !important;

    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9),

        0 4px 12px rgba(139, 92, 246, 0.5) !important;

}



.timeline-container::before {

    background: linear-gradient(to bottom,

            rgba(139, 92, 246, 0.3) 0%,

            rgba(139, 92, 246, 0.15) 100%) !important;

    width: 2px !important;

}



.timeline-content {

    background: rgba(248, 250, 252, 0.8) !important;

    border: 1px solid rgba(139, 92, 246, 0.06) !important;

}



.timeline-content:hover {

    background: rgba(139, 92, 246, 0.05) !important;

}



/* List items de próximos turnos */

.card[style*="border-color: #f59e0b"] .list-group-item {

    border-left: none !important;

    border-right: none !important;

    padding: 1.25rem 1.5rem !important;

}



.card[style*="border-color: #f59e0b"] .list-group-item:first-child {

    border-top: none !important;

}



.card[style*="border-color: #f59e0b"] .list-group-item:last-child {

    border-bottom: none !important;

    border-radius: 0 0 28px 28px !important;

}



/* === SECTION HEADERS FIX (Dashboard) === */

/* Más espacio en timeline + tipografía matching exacta */



/* TIMELINE SECTION - Más espacio abajo del header */

.timeline-section>a {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    margin-bottom: 3rem !important;

    /* De 2.5rem a 3rem - MÁS ESPACIO */

    padding: 1rem 1.5rem !important;

    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(99, 102, 241, 0.08) 100%) !important;

    border-radius: 16px !important;

    border: 1px solid rgba(139, 92, 246, 0.15) !important;

    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.15),

        0 0 40px rgba(139, 92, 246, 0.1) !important;

    transition: all 0.3s ease !important;

}



.timeline-section>a:hover {

    box-shadow: 0 6px 28px rgba(139, 92, 246, 0.25),

        0 0 60px rgba(139, 92, 246, 0.15) !important;

    transform: translateY(-2px) !important;

}



.timeline-section h5 {

    color: #1e293b !important;

    /* MISMO COLOR */

    font-weight: 700 !important;

    /* MISMO PESO */

    font-size: 1.25rem !important;

    /* MISMO TAMAÑO */

    margin: 0 !important;

    text-align: center !important;

}



/* PRÓXIMOS TURNOS - TIPOGRAFÍA IDÉNTICA */

.card[style*="border-color: #f59e0b"] .card-header {

    border-radius: 28px 28px 0 0 !important;

    padding: 1rem 1.5rem !important;

    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(249, 115, 22, 0.12) 100%) !important;

    border: none !important;

    border-bottom: 1px solid rgba(245, 158, 11, 0.15) !important;

    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.15),

        0 0 40px rgba(245, 158, 11, 0.1) !important;

    text-align: center !important;

}



.card[style*="border-color: #f59e0b"] .card-header h5 {

    color: #1e293b !important;

    /* MISMO COLOR QUE CRONOGRAMA */

    font-weight: 700 !important;

    /* MISMO PESO QUE CRONOGRAMA */

    font-size: 1.25rem !important;

    /* MISMO TAMAÑO QUE CRONOGRAMA */

    margin: 0 !important;

}



/* === TIMELINE HEADER MATCHING (Dashboard) === */

/* Mismo estilo que Próximos Turnos pero con violeta */



.timeline-section {

    background: white !important;

    border: 1px solid rgba(139, 92, 246, 0.12) !important;

    border-radius: 28px !important;

    padding: 0 !important;

}



.timeline-header-wrapper {

    padding: 1rem 1.5rem !important;

    background: linear-gradient(135deg, rgba(139, 92, 246, 0.12) 0%, rgba(99, 102, 241, 0.12) 100%) !important;

    border-radius: 28px 28px 0 0 !important;

    border-bottom: 1px solid rgba(139, 92, 246, 0.15) !important;

    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.15),

        0 0 40px rgba(139, 92, 246, 0.1) !important;

    text-align: center !important;

}



.timeline-header-wrapper h5 {

    color: #1e293b !important;

    font-weight: 700 !important;

    font-size: 1.25rem !important;

    margin: 0 !important;

}



.timeline-header-wrapper .fa-clock {

    color: #6366f1 !important;

    font-size: 1.3rem !important;

}



/* Timeline container con padding */

.timeline-container {

    padding: 2rem !important;

}



/* Círculos y líneas */

.timeline-dot {

    width: 20px !important;

    height: 20px !important;

    background: white !important;

    border: 3px solid var(--primary) !important;

    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9),

        0 4px 12px rgba(139, 92, 246, 0.3) !important;

}



.timeline-dot.completed {

    background: var(--primary) !important;

    border: 3px solid var(--primary) !important;

    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9),

        0 4px 12px rgba(139, 92, 246, 0.5) !important;

}



.timeline-container::before {

    background: linear-gradient(to bottom,

            rgba(139, 92, 246, 0.3) 0%,

            rgba(139, 92, 246, 0.15) 100%) !important;

    width: 2px !important;

}



.timeline-content {

    background: rgba(248, 250, 252, 0.8) !important;

    border: 1px solid rgba(139, 92, 246, 0.06) !important;

}



.timeline-content:hover {

    background: rgba(139, 92, 246, 0.05) !important;

}



/* === TIMELINE ALIGNMENT FIX (Dashboard) === */

/* Corregir alineación de círculos y línea después de cambio de header */



.timeline-section {

    background: white !important;

    border: 1px solid rgba(139, 92, 246, 0.12) !important;

    border-radius: 28px !important;

    padding: 0 !important;

    overflow: hidden !important;

}



.timeline-header-wrapper {

    padding: 1rem 1.5rem !important;

    background: linear-gradient(135deg, rgba(139, 92, 246, 0.12) 0%, rgba(99, 102, 241, 0.12) 100%) !important;

    border-bottom: 1px solid rgba(139, 92, 246, 0.15) !important;

    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.15),

        0 0 40px rgba(139, 92, 246, 0.1) !important;

    text-align: center !important;

    margin: 0 !important;

}



.timeline-header-wrapper h5 {

    color: #1e293b !important;

    font-weight: 700 !important;

    font-size: 1.25rem !important;

    margin: 0 !important;

}



.timeline-header-wrapper .fa-clock {

    color: #6366f1 !important;

    font-size: 1.3rem !important;

}



/* Timeline container - padding SOLO arriba y abajo, NO a los lados */

.timeline-container {

    padding: 2rem 0 !important;

}



/* Timeline items - restaurar padding lateral aquí */

.timeline-item {

    padding: 0 2rem !important;

}



/* Círculos y líneas mantienen su posición original */

.timeline-dot {

    width: 20px !important;

    height: 20px !important;

    background: white !important;

    border: 3px solid var(--primary) !important;

    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9),

        0 4px 12px rgba(139, 92, 246, 0.3) !important;

}



.timeline-dot.completed {

    background: var(--primary) !important;

    border: 3px solid var(--primary) !important;

    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9),

        0 4px 12px rgba(139, 92, 246, 0.5) !important;

}



.timeline-container {

    position: relative !important;

}



.timeline-container::before {

    content: '' !important;

    position: absolute !important;

    left: 9px !important;

    top: 0 !important;

    bottom: 0 !important;

    width: 2px !important;

    background: linear-gradient(to bottom,

            rgba(139, 92, 246, 0.3) 0%,

            rgba(139, 92, 246, 0.15) 100%) !important;

    z-index: 0 !important;

    display: block !important;

}



.timeline-content {

    background: rgba(248, 250, 252, 0.8) !important;

    border: 1px solid rgba(139, 92, 246, 0.06) !important;

    position: relative !important;

    z-index: 1 !important;

}



.timeline-content:hover {

    background: rgba(139, 92, 246, 0.05) !important;

}



/* === TIMELINE COMPLETE FIX (Dashboard) === */

/* Restaurar padding completo del timeline-container */



.timeline-section {

    background: white !important;

    border: 1px solid rgba(139, 92, 246, 0.12) !important;

    border-radius: 28px !important;

    padding: 0 !important;

    overflow: hidden !important;

}



.timeline-header-wrapper {

    padding: 1rem 1.5rem !important;

    background: linear-gradient(135deg, rgba(139, 92, 246, 0.12) 0%, rgba(99, 102, 241, 0.12) 100%) !important;

    border-bottom: 1px solid rgba(139, 92, 246, 0.15) !important;

    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.15),

        0 0 40px rgba(139, 92, 246, 0.1) !important;

    text-align: center !important;

    margin: 0 !important;

}



.timeline-header-wrapper h5 {

    color: #1e293b !important;

    font-weight: 700 !important;

    font-size: 1.25rem !important;

    margin: 0 !important;

}



.timeline-header-wrapper .fa-clock {

    color: #6366f1 !important;

    font-size: 1.3rem !important;

}



/* Timeline container - padding COMPLETO para que se vean círculos */

.timeline-container {

    padding: 2rem !important;

}



/* Quitar padding extra de items */

.timeline-item {

    padding: 0 !important;

}



/* Círculos y líneas */

.timeline-dot {

    width: 20px !important;

    height: 20px !important;

    background: white !important;

    border: 3px solid var(--primary) !important;

    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9),

        0 4px 12px rgba(139, 92, 246, 0.3) !important;

}



.timeline-dot.completed {

    background: var(--primary) !important;

    border: 3px solid var(--primary) !important;

    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9),

        0 4px 12px rgba(139, 92, 246, 0.5) !important;

}



.timeline-container::before {

    background: linear-gradient(to bottom,

            rgba(139, 92, 246, 0.3) 0%,

            rgba(139, 92, 246, 0.15) 100%) !important;

    width: 2px !important;

}



.timeline-content {

    background: rgba(248, 250, 252, 0.8) !important;

    border: 1px solid rgba(139, 92, 246, 0.06) !important;

}



.timeline-content:hover {

    background: rgba(139, 92, 246, 0.05) !important;

}

/* ========================================
   MOBILE VIEWPORT FIX - FORZAR ANCLAJE
   ======================================== */

@media (max-width: 767px) {

    /* Asegurar que el body siempre tenga la altura correcta */
    body {
        min-height: 100vh;
        min-height: -webkit-fill-available;
        /* Más agresivo con el padding para evitar superposiciones */
        padding-bottom: max(80px, calc(80px + env(safe-area-inset-bottom))) !important;
    }

    /* Forzar posicionamiento correcto de la navegación inferior */
    .bottom-nav {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 9999 !important;
        display: flex !important;
        /* Asegurar que se renderice correctamente */
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        /* Padding adicional para dispositivos con notch/home indicator */
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom)) !important;
    }

    /* Container principal debe tener margen mínimo para no quedar oculto */
    .container-fluid {
        padding-bottom: calc(100px + env(safe-area-inset-bottom));
    }

    /* Fix adicional para asegurar que todo el contenido sea visible */
    main,
    .main-content,
    #main-content {
        margin-bottom: calc(90px + env(safe-area-inset-bottom));
    }
}

/* === FIX PARA SAFARI iOS === */
@supports (-webkit-touch-callout: none) {

    /* Solo para Safari iOS */
    body {
        min-height: -webkit-fill-available;
    }

    @media (max-width: 767px) {
        .bottom-nav {
            /* Fix adicional para Safari mobile */
            position: -webkit-sticky !important;
            position: sticky !important;
            bottom: 0 !important;
        }
    }
}

/* =========================================
   FIX FINAL: ALINEACIÓN Y TIMELINE
   ========================================= */

/* 1. CALIBRACIÓN DE LÍNEA Y CÍRCULOS (Timeline) */
/* Forzamos que la línea vertical esté exactamente en el pixel 30 desde la izquierda */
.timeline-container::before {
    left: 29px !important;
    /* Posición exacta del eje central */
    width: 2px !important;
    background: linear-gradient(to bottom,
            rgba(139, 92, 246, 0.3) 0%,
            rgba(139, 92, 246, 0.1) 100%) !important;
}

/* Alineamos los items para dejar espacio a la izquierda */
.timeline-item {
    padding-left: 3.5rem !important;
    /* Espacio generoso para la línea */
    padding-right: 0 !important;
}

/* Posicionamos el círculo (dot) centrado exactamente sobre la línea */
.timeline-dot {
    left: 20px !important;
    /* 29px (línea) - 9px (mitad del dot) = 20px */
    width: 20px !important;
    height: 20px !important;
    top: 2px !important;
    /* Ajuste fino vertical para alinear con el texto */
    border-width: 3px !important;
}

/* 2. ALINEACIÓN DE TEXTOS (Nombres a la izquierda) */
/* Forzamos alineación izquierda en todas las tarjetas de turnos */
.turn-info-box,
.client-name,
.timeline-info h5,
.timeline-info p {
    text-align: left !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

/* Aseguramos que la columna de la hora sí quede centrada (es más estético) */
.turn-time-box {
    text-align: center !important;
    align-items: center !important;
}

/* Corrección específica para Agenda Compacta */
.turn-card-compact {
    grid-template-columns: 70px 1fr auto !important;
    /* Asegura estructura fija */
    align-items: center !important;
}

/* =========================================
   FIX FINAL: ALINEACIÓN MILIMÉTRICA TIMELINE
   ========================================= */

/* 1. El Contenedor: Le damos espacio a la izquierda para la línea */
.timeline-container {
    position: relative !important;
    padding-left: 0 !important;
    /* Reseteamos para controlar manual */
    margin-left: 10px !important;
    /* Un pequeño margen global */
}

/* 2. La Línea Vertical: La clavamos en el pixel 29 */
.timeline-container::before {
    content: '' !important;
    position: absolute !important;
    left: 29px !important;
    /* COORDENADA X EXACTA DE LA LÍNEA */
    top: 15px !important;
    /* Bajar un poco para que no toque el header */
    bottom: 0 !important;
    width: 2px !important;
    background: linear-gradient(to bottom,
            rgba(139, 92, 246, 0.3) 0%,
            rgba(139, 92, 246, 0.1) 100%) !important;
    z-index: 0 !important;
    display: block !important;
}

/* 3. Los Items (Tarjetas): Empujamos el contenido a la derecha */
.timeline-item {
    position: relative !important;
    padding-left: 60px !important;
    /* Espacio generoso para que entre el círculo */
    padding-right: 0 !important;
    margin-bottom: 2rem !important;
    /* Separación entre turnos */
}

/* 4. Los Círculos (Dots): Los centramos sobre la línea */
.timeline-dot {
    position: absolute !important;
    left: 20px !important;
    /* 29px (línea) - 9px (mitad del dot) = 20px. CENTRADO PERFECTO */
    top: 0 !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    z-index: 1 !important;
    /* Aseguramos que se vean */
    display: block !important;
    visibility: visible !important;
}

/* Ajuste fino para la hora, para que se alinee con el círculo */
.timeline-time {
    margin-top: -3px !important;
    /* Subir un pelín la hora para alinear con el dot */
}

/* =========================================
   POS (CAJA.PHP) - OPTIMIZACIÓN MOBILE
   Diseño compacto y eficiente para POS
   ========================================= */

/* === CLIENT CARD === */
.client-card {
    background: white;
    border-radius: var(--radius-md);
    padding: 0.75rem;
    border: 1px solid var(--border-violet);
    box-shadow: var(--shadow-sm);
}

.client-card-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.client-input {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.95rem !important;
}

/* === SEARCH HERO === */
.search-hero {
    position: relative;
    margin-bottom: 0.75rem;
}

.search-hero-input {
    padding: 0.75rem 1rem 0.75rem 2.5rem !important;
    font-size: 1rem !important;
    border-radius: var(--radius-md);
    border: 2px solid var(--border-violet);
    transition: all 0.3s ease;
}

.search-hero-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-glow);
}

.search-hero-icon {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    color: var(--text-muted);
    pointer-events: none;
}

/* === TICKET CARD (CARRITO) === */
.ticket-card {
    background: white;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-violet);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.ticket-header {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ticket-header h5 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.ticket-body {
    max-height: 300px;
    overflow-y: auto;
    padding: 0;
}

.ticket-empty {
    padding: 1rem;
    text-align: center;
    background: var(--primary-glow);
    border-radius: var(--radius-sm);
    margin: 0.5rem;
}

.ticket-empty-icon {
    display: none;
    /* Ocultamos el ícono grande */
}

.ticket-empty h5 {
    font-size: 0.9rem;
    margin: 0;
    color: var(--text-muted);
    font-weight: 500;
}

.ticket-empty p {
    display: none;
    /* Ocultamos el texto adicional */
}

/* === TICKET ROWS (ITEMS DEL CARRITO) === */
.ticket-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 0.5rem;
    padding: 0.75rem 0.5rem;
    /* Padding reducido lateral */
    border-bottom: 1px solid var(--border-color);
    align-items: center;
    transition: background-color 0.2s ease;
}

.ticket-row:hover {
    background-color: var(--primary-glow);
}

.ticket-row-name {
    min-width: 0;
    /* Crítico para que el text-overflow funcione en grid */
    padding-right: 0.25rem;
}

.ticket-row-name strong {
    font-size: 0.85rem;
    display: block;
    margin-bottom: 0.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ticket-row-name .badge {
    font-size: 0.6rem;
    padding: 0.2rem 0.4rem;
    vertical-align: middle;
}

.ticket-row-quantity {
    display: flex;
    justify-content: center;
}

.ticket-row-quantity .input-group {
    width: 80px !important;
    /* Ancho fijo reducido */
    max-width: 80px !important;
}

.ticket-row-quantity .form-control {
    padding: 0.15rem 0 !important;
    text-align: center;
    font-size: 0.8rem !important;
}

.ticket-row-quantity .btn {
    padding: 0.15rem 0.4rem !important;
    font-size: 0.7rem !important;
}

/* Ocultar precio unitario en mobile, dejar solo subtotal */
.ticket-row-price {
    display: none;
}

/* En pantallas grandes sí mostrar precio unitario si hay espacio */
@media (min-width: 768px) {
    .ticket-row {
        grid-template-columns: 1.5fr 100px auto auto auto;
        gap: 1rem;
        padding: 0.75rem 1rem;
    }

    .ticket-row-price {
        display: block;
        font-weight: 500;
        font-size: 0.9rem;
        color: var(--text-muted);
    }
}

.ticket-row-subtotal {
    font-weight: 700;
    font-size: 0.9rem;
    text-align: right;
    min-width: 60px;
}

.ticket-row-delete {
    text-align: right;
    width: 24px;
}

.btn-delete-item {
    background: transparent;
    border: none;
    color: var(--text-muted);
    /* Color suave por defecto */
    padding: 0.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-delete-item:hover {
    background: rgba(220, 38, 38, 0.1);
    color: var(--danger);
}

.qty-badge {
    background: var(--primary-glow);
    color: var(--primary);
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* === SUMMARY PANEL === */
.summary-panel {
    background: white;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-violet);
    padding: 0.75rem;
    box-shadow: var(--shadow-md);
}

.summary-total {
    background: linear-gradient(135deg, var(--primary-glow) 0%, rgba(139, 92, 246, 0.05) 100%);
    border-radius: var(--radius-sm);
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}

.summary-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.summary-total-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.summary-total-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--primary);
}

.summary-section {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
}

.summary-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
    font-size: 0.9rem;
}

.summary-label {
    color: var(--text-muted);
}

.summary-value {
    color: var(--text-dark);
}

.summary-section .form-label {
    font-size: 0.85rem;
    margin-bottom: 0.375rem !important;
    font-weight: 600;
}

.summary-section .form-select,
.summary-section .form-control {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.9rem !important;
}

.summary-section h4 {
    font-size: 1.5rem !important;
    margin-bottom: 0;
    color: var(--primary);
}

.summary-section small {
    font-size: 0.75rem !important;
}

.payment-input-group .input-group-text {
    background: var(--primary-glow);
    border-color: var(--border-violet);
    color: var(--primary);
    font-weight: 600;
}

.payment-input-group .form-control {
    border-color: var(--border-violet);
}

.payment-input-group .form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.25rem var(--primary-glow);
}

.alert-difference {
    background: var(--primary-glow);
    border: 1px solid var(--primary-light);
    border-radius: var(--radius-sm);
    padding: 0.75rem;
    margin-top: 0.5rem;
}

.alert-difference-amount {
    font-size: 1.25rem;
    color: var(--primary);
}

.saldo-favor-check {
    background: rgba(16, 185, 129, 0.05);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: var(--radius-sm);
    padding: 0.75rem;
    margin-top: 0.5rem;
}

/* === BOTÓN COBRAR === */
.btn-cobrar-lg {
    width: 100%;
    padding: 0.875rem 1.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--success) 0%, #059669 100%);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.btn-cobrar-lg:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

.btn-cobrar-lg:active:not(:disabled) {
    transform: translateY(0);
}

.btn-cobrar-lg:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* === OPTIMIZACIONES MOBILE === */
@media (max-width: 767px) {

    /* Header POS más compacto */
    .pos-container h1 {
        font-size: 1.5rem !important;
        margin-bottom: 1rem !important;
    }

    /* Reducir márgenes generales */
    .pos-container .mb-4 {
        margin-bottom: 0.75rem !important;
    }

    .pos-container .mb-3 {
        margin-bottom: 0.5rem !important;
    }

    /* Client card más compacto */
    .client-card small {
        font-size: 0.7rem !important;
        margin-top: 0.25rem !important;
    }

    /* Search hero más compacto */
    .search-hero-input {
        padding: 0.625rem 0.875rem 0.625rem 2.25rem !important;
    }

    /* Botones grandes más compactos */
    .btn-outline-primary.btn-lg {
        padding: 0.5rem 1rem !important;
        font-size: 0.875rem !important;
    }

    /* Textos informativos más pequeños */
    .pos-container small.text-muted {
        font-size: 0.7rem !important;
        margin-top: 0.25rem !important;
    }

    /* Ticket body más compacto */
    .ticket-body {
        max-height: 250px;
    }

    /* Summary panel sticky en mobile */
    .summary-panel {
        position: sticky;
        bottom: calc(80px + env(safe-area-inset-bottom));
        z-index: 100;
    }
}

/* === MODAL SCROLL FIX (MOBILE) === */
/* Permite hacer scroll en modales largos en dispositivos móviles */
@media (max-width: 768px) {
    .modal-dialog {
        margin: 0.5rem;
        max-height: calc(100vh - 1rem);
        display: flex;
        flex-direction: column;
    }

    .modal-content {
        max-height: calc(100vh - 1rem);
        display: flex;
        flex-direction: column;
    }

    .modal-body {
        overflow-y: auto !important;
        max-height: calc(100vh - 300px);
        /* Más espacio reservado para header + footer + bottom nav */
        -webkit-overflow-scrolling: touch;
        /* Smooth scrolling en iOS */
    }

    /* Asegurar que el footer del modal sea visible */
    .modal-footer {
        flex-shrink: 0;
        border-top: 1px solid #dee2e6;
        gap: 0.75rem;
        /* Espacio entre botones */
        padding: 1rem;
    }
}

.summary-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
    font-size: 0.9rem;
}

.summary-label {
    color: var(--text-muted);
}

.summary-value {
    color: var(--text-dark);
}

.summary-section .form-label {
    font-size: 0.85rem;
    margin-bottom: 0.375rem !important;
    font-weight: 600;
}

.summary-section .form-select,
.summary-section .form-control {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.9rem !important;
}

.summary-section h4 {
    font-size: 1.5rem !important;
    margin-bottom: 0;
    color: var(--primary);
}

.summary-section small {
    font-size: 0.75rem !important;
}

.payment-input-group .input-group-text {
    background: var(--primary-glow);
    border-color: var(--border-violet);
    color: var(--primary);
    font-weight: 600;
}

.payment-input-group .form-control {
    border-color: var(--border-violet);
}

.payment-input-group .form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.25rem var(--primary-glow);
}

.alert-difference {
    background: var(--primary-glow);
    border: 1px solid var(--primary-light);
    border-radius: var(--radius-sm);
    padding: 0.75rem;
    margin-top: 0.5rem;
}

.alert-difference-amount {
    font-size: 1.25rem;
    color: var(--primary);
}

.saldo-favor-check {
    background: rgba(16, 185, 129, 0.05);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: var(--radius-sm);
    padding: 0.75rem;
    margin-top: 0.5rem;
}

/* === BOTÓN COBRAR === */
.btn-cobrar-lg {
    width: 100%;
    padding: 0.875rem 1.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--success) 0%, #059669 100%);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.btn-cobrar-lg:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

.btn-cobrar-lg:active:not(:disabled) {
    transform: translateY(0);
}

.btn-cobrar-lg:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* === OPTIMIZACIONES MOBILE === */
@media (max-width: 767px) {

    /* Header POS más compacto */
    .pos-container h1 {
        font-size: 1.5rem !important;
        margin-bottom: 1rem !important;
    }

    /* Reducir márgenes generales */
    .pos-container .mb-4 {
        margin-bottom: 0.75rem !important;
    }

    .pos-container .mb-3 {
        margin-bottom: 0.5rem !important;
    }

    /* Client card más compacto */
    .client-card small {
        font-size: 0.7rem !important;
        margin-top: 0.25rem !important;
    }

    /* Search hero más compacto */
    .search-hero-input {
        padding: 0.625rem 0.875rem 0.625rem 2.25rem !important;
    }

    /* Botones grandes más compactos */
    .btn-outline-primary.btn-lg {
        padding: 0.5rem 1rem !important;
        font-size: 0.875rem !important;
    }

    /* Textos informativos más pequeños */
    .pos-container small.text-muted {
        font-size: 0.7rem !important;
        margin-top: 0.25rem !important;
    }

    /* Ticket body más compacto */
    .ticket-body {
        max-height: 250px;
    }

    /* Summary panel sticky en mobile */
    .summary-panel {
        position: sticky;
        bottom: calc(80px + env(safe-area-inset-bottom));
        z-index: 100;
    }
}

/* === MODAL SCROLL FIX (MOBILE) === */
/* Permite hacer scroll en modales largos en dispositivos móviles */
@media (max-width: 768px) {
    .modal-dialog {
        margin: 0.5rem;
        max-height: calc(100vh - 1rem);
        display: flex;
        flex-direction: column;
    }

    .modal-content {
        max-height: calc(100vh - 1rem);
        display: flex;
        flex-direction: column;
    }

    .modal-body {
        overflow-y: auto !important;
        max-height: calc(100vh - 300px);
        /* Más espacio reservado para header + footer + bottom nav */
        -webkit-overflow-scrolling: touch;
        /* Smooth scrolling en iOS */
    }

    /* Asegurar que el footer del modal sea visible */
    .modal-footer {
        flex-shrink: 0;
        border-top: 1px solid #dee2e6;
        gap: 0.75rem;
        /* Espacio entre botones */
        padding: 1rem;
    }
}

/* === SUNDAY CALENDAR STYLING === */
.cal-bubble.is-sunday {
    background-color: #f1f5f9 !important;
    /* Gris muy claro */
    color: #cbd5e1 !important;
    /* Texto gris suave */
    border: 1px dashed #e2e8f0 !important;
    opacity: 0.8 !important;
}

/* Soporte Dark Mode */
[data-theme="dark"] .cal-bubble.is-sunday {
    background-color: #1e293b !important;
    color: #475569 !important;
    border-color: #334155 !important;
}
/* === QUICK DATE SELECTOR ENHANCEMENT === */
.date-selector-btn {
    cursor: pointer !important;
    transition: all 0.3s ease;
}

.date-selector-btn:hover {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4) !important;
}

.date-selector-btn:hover .fa-chevron-down {
    animation: bounce-down 0.6s ease-in-out infinite;
}

@keyframes bounce-down {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(3px);
    }
}