@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800;900&family=Cinzel:wght@600;700;800&display=swap');@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800;900&family=Cinzel:wght@600;700;800&display=swap');@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800;900&family=Cinzel:wght@600;700;800&display=swap');@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800;900&family=Cinzel:wght@600;700;800&display=swap');@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800;900&family=Cinzel:wght@600;700;800&display=swap');@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800;900&family=Cinzel:wght@600;700;800&display=swap');
.modal-overlay[data-v-19950851] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 1rem;
}
.modal-container[data-v-19950851] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 480px;
    overflow: hidden;
    animation: slideUp-19950851 0.3s ease-out;
}
@keyframes slideUp-19950851 {
from {
        opacity: 0;
        transform: translateY(20px);
}
to {
        opacity: 1;
        transform: translateY(0);
}
}
.modal-header[data-v-19950851] {
    padding: 1.5rem 1.75rem;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.modal-title[data-v-19950851] {
    font-size: 1.375rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}
.close-btn[data-v-19950851] {
    background: transparent;
    border: none;
    color: #6b7280;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 8px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.close-btn[data-v-19950851]:hover:not(:disabled) {
    background: #f3f4f6;
    color: #1f2937;
}
.close-btn[data-v-19950851]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.modal-body[data-v-19950851] {
    padding: 1.75rem;
}
.amount-section[data-v-19950851] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    margin-bottom: 1.5rem;
}
.amount-label[data-v-19950851] {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    font-weight: 500;
}
.amount-value[data-v-19950851] {
    color: white;
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: -0.5px;
}
.powered-by[data-v-19950851] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.8rem;
    color: #6b7280;
}
.stripe-logo[data-v-19950851] {
    height: 18px;
    width: auto;
}
.input-section[data-v-19950851],
.card-section[data-v-19950851] {
    margin-bottom: 1.25rem;
}
.input-label[data-v-19950851],
.card-label[data-v-19950851] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
}
.input-label .icon[data-v-19950851],
.card-label .icon[data-v-19950851] {
    font-size: 20px;
    color: #635BFF;
}
.input-field[data-v-19950851] {
    width: 100%;
    padding: 0.75rem 0.875rem;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font-size: 0.9rem;
    transition: all 0.2s;
    background: white;
    color: #1f2937;
    font-family: inherit;
    box-sizing: border-box;
}
.input-field[data-v-19950851]:focus {
    outline: none;
    border-color: #635BFF;
    box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.1);
}
.input-field[data-v-19950851]:disabled {
    background: #f9fafb;
    cursor: not-allowed;
}
.input-field.input-error[data-v-19950851] {
    border-color: #ef4444;
}
.input-field.input-error[data-v-19950851]:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}
.error-message[data-v-19950851] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: #ef4444;
    font-weight: 500;
}
.error-message .material-symbols-rounded[data-v-19950851] {
    font-size: 16px;
}
.card-element[data-v-19950851] {
    padding: 0.875rem;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    background: white;
    transition: all 0.2s;
    min-height: 44px;
    box-sizing: border-box;
}
.card-element[data-v-19950851]:focus-within {
    border-color: #635BFF;
    box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.1);
}
.card-hint[data-v-19950851] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.75rem;
    font-size: 0.8rem;
    color: #059669;
    font-weight: 500;
}
.card-hint .material-symbols-rounded[data-v-19950851] {
    font-size: 16px;
}
.modal-footer[data-v-19950851] {
    padding: 1.25rem 1.75rem;
    border-top: 1px solid #e5e7eb;
    display: flex;
    gap: 0.75rem;
    background: #f9fafb;
}
.btn[data-v-19950851] {
    flex: 1;
    padding: 0.875rem 1.5rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.btn-cancel[data-v-19950851] {
    background: white;
    color: #374151;
    border: 1.5px solid #d1d5db;
}
.btn-cancel[data-v-19950851]:hover:not(:disabled) {
    background: #f9fafb;
    border-color: #9ca3af;
}
.btn-pay[data-v-19950851] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
.btn-pay[data-v-19950851]:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.5);
}
.btn[data-v-19950851]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}
.spinner[data-v-19950851] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-19950851 0.6s linear infinite;
}
@keyframes spin-19950851 {
to {
        transform: rotate(360deg);
}
}

/* Transiciones del modal */
.modal-enter-active[data-v-19950851],
.modal-leave-active[data-v-19950851] {
    transition: opacity 0.3s ease;
}
.modal-enter-from[data-v-19950851],
.modal-leave-to[data-v-19950851] {
    opacity: 0;
}
.modal-enter-active .modal-container[data-v-19950851],
.modal-leave-active .modal-container[data-v-19950851] {
    transition: transform 0.3s ease;
}
.modal-enter-from .modal-container[data-v-19950851],
.modal-leave-to .modal-container[data-v-19950851] {
    transform: scale(0.9);
}

/* Responsivo */
@media (max-width: 640px) {
.modal-container[data-v-19950851] {
        max-width: 100%;
        border-radius: 16px 16px 0 0;
        align-self: flex-end;
}
.amount-value[data-v-19950851] {
        font-size: 1.5rem;
}
.modal-footer[data-v-19950851] {
        flex-direction: column-reverse;
}
.btn[data-v-19950851] {
        width: 100%;
}
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
.modal-overlay[data-v-19950851] {
        background: rgba(0, 0, 0, 0.8);
}
.modal-container[data-v-19950851] {
        background: #1e293b;
}
.modal-header[data-v-19950851] {
        border-color: #334155;
}
.modal-title[data-v-19950851] {
        color: #e2e8f0;
}
.close-btn[data-v-19950851] {
        color: #94a3b8;
}
.close-btn[data-v-19950851]:hover:not(:disabled) {
        background: #334155;
        color: #e2e8f0;
}
.powered-by[data-v-19950851] {
        color: #94a3b8;
}
.input-label[data-v-19950851],
    .card-label[data-v-19950851] {
        color: #e2e8f0;
}
.input-field[data-v-19950851] {
        background: #0f172a;
        border-color: #334155;
        color: #e2e8f0;
}
.input-field[data-v-19950851]:focus {
        border-color: #635BFF;
        box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.2);
}
.input-field[data-v-19950851]:disabled {
        background: #1e293b;
}
.card-element[data-v-19950851] {
        background: #0f172a;
        border-color: #334155;
}
.card-element[data-v-19950851]:focus-within {
        border-color: #635BFF;
        box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.2);
}
.modal-footer[data-v-19950851] {
        background: #0f172a;
        border-color: #334155;
}
.btn-cancel[data-v-19950851] {
        background: #1e293b;
        color: #e2e8f0;
        border-color: #334155;
}
.btn-cancel[data-v-19950851]:hover:not(:disabled) {
        background: #334155;
        border-color: #475569;
}
}
:root[data-theme="dark"] {
.modal-overlay[data-v-19950851] {
        background: rgba(0, 0, 0, 0.8);
}
.modal-container[data-v-19950851] {
        background: #1e293b;
}
.modal-header[data-v-19950851] {
        border-color: #334155;
}
.modal-title[data-v-19950851] {
        color: #e2e8f0;
}
.close-btn[data-v-19950851] {
        color: #94a3b8;
}
.close-btn[data-v-19950851]:hover:not(:disabled) {
        background: #334155;
        color: #e2e8f0;
}
.powered-by[data-v-19950851] {
        color: #94a3b8;
}
.input-label[data-v-19950851],
    .card-label[data-v-19950851] {
        color: #e2e8f0;
}
.input-field[data-v-19950851] {
        background: #0f172a;
        border-color: #334155;
        color: #e2e8f0;
}
.input-field[data-v-19950851]:focus {
        border-color: #635BFF;
        box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.2);
}
.input-field[data-v-19950851]:disabled {
        background: #1e293b;
}
.card-element[data-v-19950851] {
        background: #0f172a;
        border-color: #334155;
}
.card-element[data-v-19950851]:focus-within {
        border-color: #635BFF;
        box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.2);
}
.modal-footer[data-v-19950851] {
        background: #0f172a;
        border-color: #334155;
}
.btn-cancel[data-v-19950851] {
        background: #1e293b;
        color: #e2e8f0;
        border-color: #334155;
}
.btn-cancel[data-v-19950851]:hover:not(:disabled) {
        background: #334155;
        border-color: #475569;
}
}

.modal-overlay[data-v-ec3dc5a0] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 1rem;
}
.modal-container[data-v-ec3dc5a0] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 480px;
    overflow: hidden;
    animation: slideUp-ec3dc5a0 0.3s ease-out;
}
@keyframes slideUp-ec3dc5a0 {
from {
        opacity: 0;
        transform: translateY(20px);
}
to {
        opacity: 1;
        transform: translateY(0);
}
}
.modal-header[data-v-ec3dc5a0] {
    padding: 1.5rem 1.75rem;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.header-icon[data-v-ec3dc5a0] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.header-icon .material-symbols-rounded[data-v-ec3dc5a0] {
    font-size: 28px;
    color: white;
}
.modal-title[data-v-ec3dc5a0] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}
.modal-subtitle[data-v-ec3dc5a0] {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0.25rem 0 0 0;
}
.close-btn[data-v-ec3dc5a0] {
    background: transparent;
    border: none;
    color: #6b7280;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 8px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
}
.close-btn[data-v-ec3dc5a0]:hover {
    background: #f3f4f6;
    color: #1f2937;
}
.modal-body[data-v-ec3dc5a0] {
    padding: 1.75rem;
}
.total-section[data-v-ec3dc5a0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    border-radius: 12px;
    margin-bottom: 1.5rem;
}
.total-label[data-v-ec3dc5a0] {
    color: #6b7280;
    font-size: 0.9rem;
    font-weight: 500;
}
.total-value[data-v-ec3dc5a0] {
    color: #1f2937;
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: -0.5px;
}
.input-section[data-v-ec3dc5a0] {
    margin-bottom: 1.5rem;
}
.input-label[data-v-ec3dc5a0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
}
.input-label .icon[data-v-ec3dc5a0] {
    font-size: 20px;
    color: #10b981;
}
.input-wrapper[data-v-ec3dc5a0] {
    position: relative;
    display: flex;
    align-items: center;
}
.currency-symbol[data-v-ec3dc5a0] {
    position: absolute;
    left: 1rem;
    color: #6b7280;
    font-size: 1.25rem;
    font-weight: 600;
    pointer-events: none;
}
.input-field[data-v-ec3dc5a0] {
    width: 100%;
    padding: 0.875rem 1rem 0.875rem 2.25rem;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font-size: 1.125rem;
    font-weight: 600;
    transition: all 0.2s;
    background: white;
    color: #1f2937;
    font-family: inherit;
    box-sizing: border-box;
}
.input-field[data-v-ec3dc5a0]:focus {
    outline: none;
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}
.input-field[data-v-ec3dc5a0]::placeholder {
    color: #d1d5db;
    font-weight: 400;
}
.input-field.input-error[data-v-ec3dc5a0] {
    border-color: #ef4444;
}
.input-field.input-error[data-v-ec3dc5a0]:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}
.error-message[data-v-ec3dc5a0] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: #ef4444;
    font-weight: 500;
}
.error-message .material-symbols-rounded[data-v-ec3dc5a0] {
    font-size: 16px;
}
.change-section[data-v-ec3dc5a0] {
    padding: 1rem;
    background: #f9fafb;
    border: 1.5px dashed #d1d5db;
    border-radius: 12px;
    transition: all 0.3s;
}
.change-section.has-change[data-v-ec3dc5a0] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border-color: #10b981;
    border-style: solid;
}
.change-content[data-v-ec3dc5a0] {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.change-icon[data-v-ec3dc5a0] {
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s;
}
.has-change .change-icon[data-v-ec3dc5a0] {
    background: #10b981;
}
.change-icon .material-symbols-rounded[data-v-ec3dc5a0] {
    font-size: 24px;
    color: #d1d5db;
    transition: all 0.3s;
}
.has-change .change-icon .material-symbols-rounded[data-v-ec3dc5a0] {
    color: white;
}
.change-info[data-v-ec3dc5a0] {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.change-label[data-v-ec3dc5a0] {
    color: #6b7280;
    font-size: 0.9rem;
    font-weight: 500;
}
.has-change .change-label[data-v-ec3dc5a0] {
    color: #065f46;
}
.change-value[data-v-ec3dc5a0] {
    color: #9ca3af;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    transition: all 0.3s;
}
.has-change .change-value[data-v-ec3dc5a0] {
    color: #065f46;
}
.modal-footer[data-v-ec3dc5a0] {
    padding: 1.25rem 1.75rem;
    border-top: 1px solid #e5e7eb;
    display: flex;
    gap: 0.75rem;
    background: #f9fafb;
}
.btn[data-v-ec3dc5a0] {
    flex: 1;
    padding: 0.875rem 1.5rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.btn-cancel[data-v-ec3dc5a0] {
    background: white;
    color: #374151;
    border: 1.5px solid #d1d5db;
}
.btn-cancel[data-v-ec3dc5a0]:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}
.btn-confirm[data-v-ec3dc5a0] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}
.btn-confirm[data-v-ec3dc5a0]:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.5);
}
.btn-confirm[data-v-ec3dc5a0]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}
.btn-confirm .material-symbols-rounded[data-v-ec3dc5a0] {
    font-size: 20px;
}

/* Transiciones del modal */
.modal-enter-active[data-v-ec3dc5a0],
.modal-leave-active[data-v-ec3dc5a0] {
    transition: opacity 0.3s ease;
}
.modal-enter-from[data-v-ec3dc5a0],
.modal-leave-to[data-v-ec3dc5a0] {
    opacity: 0;
}
.modal-enter-active .modal-container[data-v-ec3dc5a0],
.modal-leave-active .modal-container[data-v-ec3dc5a0] {
    transition: transform 0.3s ease;
}
.modal-enter-from .modal-container[data-v-ec3dc5a0],
.modal-leave-to .modal-container[data-v-ec3dc5a0] {
    transform: scale(0.9);
}

/* Responsivo */
@media (max-width: 640px) {
.modal-container[data-v-ec3dc5a0] {
        max-width: 100%;
        border-radius: 16px 16px 0 0;
        align-self: flex-end;
}
.total-value[data-v-ec3dc5a0] {
        font-size: 1.5rem;
}
.modal-footer[data-v-ec3dc5a0] {
        flex-direction: column-reverse;
}
.btn[data-v-ec3dc5a0] {
        width: 100%;
}
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
.modal-overlay[data-v-ec3dc5a0] {
        background: rgba(0, 0, 0, 0.8);
}
.modal-container[data-v-ec3dc5a0] {
        background: #1e293b;
}
.modal-header[data-v-ec3dc5a0] {
        border-color: #334155;
}
.modal-title[data-v-ec3dc5a0] {
        color: #e2e8f0;
}
.modal-subtitle[data-v-ec3dc5a0] {
        color: #94a3b8;
}
.close-btn[data-v-ec3dc5a0] {
        color: #94a3b8;
}
.close-btn[data-v-ec3dc5a0]:hover {
        background: #334155;
        color: #e2e8f0;
}
.total-section[data-v-ec3dc5a0] {
        background: linear-gradient(135deg, #334155 0%, #1e293b 100%);
}
.total-label[data-v-ec3dc5a0] {
        color: #94a3b8;
}
.total-value[data-v-ec3dc5a0] {
        color: #e2e8f0;
}
.input-label[data-v-ec3dc5a0] {
        color: #e2e8f0;
}
.currency-symbol[data-v-ec3dc5a0] {
        color: #94a3b8;
}
.input-field[data-v-ec3dc5a0] {
        background: #0f172a;
        border-color: #334155;
        color: #e2e8f0;
}
.input-field[data-v-ec3dc5a0]:focus {
        border-color: #10b981;
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}
.input-field[data-v-ec3dc5a0]::placeholder {
        color: #475569;
}
.change-section[data-v-ec3dc5a0] {
        background: #0f172a;
        border-color: #334155;
}
.change-section.has-change[data-v-ec3dc5a0] {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(5, 150, 105, 0.2) 100%);
        border-color: #10b981;
}
.change-icon[data-v-ec3dc5a0] {
        background: #1e293b;
}
.change-icon .material-symbols-rounded[data-v-ec3dc5a0] {
        color: #475569;
}
.has-change .change-icon[data-v-ec3dc5a0] {
        background: #10b981;
}
.has-change .change-icon .material-symbols-rounded[data-v-ec3dc5a0] {
        color: white;
}
.change-label[data-v-ec3dc5a0] {
        color: #94a3b8;
}
.has-change .change-label[data-v-ec3dc5a0] {
        color: #6ee7b7;
}
.change-value[data-v-ec3dc5a0] {
        color: #64748b;
}
.has-change .change-value[data-v-ec3dc5a0] {
        color: #6ee7b7;
}
.modal-footer[data-v-ec3dc5a0] {
        background: #0f172a;
        border-color: #334155;
}
.btn-cancel[data-v-ec3dc5a0] {
        background: #1e293b;
        color: #e2e8f0;
        border-color: #334155;
}
.btn-cancel[data-v-ec3dc5a0]:hover {
        background: #334155;
        border-color: #475569;
}
}
:root[data-theme="dark"] {
.modal-overlay[data-v-ec3dc5a0] {
        background: rgba(0, 0, 0, 0.8);
}
.modal-container[data-v-ec3dc5a0] {
        background: #1e293b;
}
.modal-header[data-v-ec3dc5a0] {
        border-color: #334155;
}
.modal-title[data-v-ec3dc5a0] {
        color: #e2e8f0;
}
.modal-subtitle[data-v-ec3dc5a0] {
        color: #94a3b8;
}
.close-btn[data-v-ec3dc5a0] {
        color: #94a3b8;
}
.close-btn[data-v-ec3dc5a0]:hover {
        background: #334155;
        color: #e2e8f0;
}
.total-section[data-v-ec3dc5a0] {
        background: linear-gradient(135deg, #334155 0%, #1e293b 100%);
}
.total-label[data-v-ec3dc5a0] {
        color: #94a3b8;
}
.total-value[data-v-ec3dc5a0] {
        color: #e2e8f0;
}
.input-label[data-v-ec3dc5a0] {
        color: #e2e8f0;
}
.currency-symbol[data-v-ec3dc5a0] {
        color: #94a3b8;
}
.input-field[data-v-ec3dc5a0] {
        background: #0f172a;
        border-color: #334155;
        color: #e2e8f0;
}
.input-field[data-v-ec3dc5a0]:focus {
        border-color: #10b981;
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}
.input-field[data-v-ec3dc5a0]::placeholder {
        color: #475569;
}
.change-section[data-v-ec3dc5a0] {
        background: #0f172a;
        border-color: #334155;
}
.change-section.has-change[data-v-ec3dc5a0] {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(5, 150, 105, 0.2) 100%);
        border-color: #10b981;
}
.change-icon[data-v-ec3dc5a0] {
        background: #1e293b;
}
.change-icon .material-symbols-rounded[data-v-ec3dc5a0] {
        color: #475569;
}
.has-change .change-icon[data-v-ec3dc5a0] {
        background: #10b981;
}
.has-change .change-icon .material-symbols-rounded[data-v-ec3dc5a0] {
        color: white;
}
.change-label[data-v-ec3dc5a0] {
        color: #94a3b8;
}
.has-change .change-label[data-v-ec3dc5a0] {
        color: #6ee7b7;
}
.change-value[data-v-ec3dc5a0] {
        color: #64748b;
}
.has-change .change-value[data-v-ec3dc5a0] {
        color: #6ee7b7;
}
.modal-footer[data-v-ec3dc5a0] {
        background: #0f172a;
        border-color: #334155;
}
.btn-cancel[data-v-ec3dc5a0] {
        background: #1e293b;
        color: #e2e8f0;
        border-color: #334155;
}
.btn-cancel[data-v-ec3dc5a0]:hover {
        background: #334155;
        border-color: #475569;
}
}

.modal-overlay[data-v-d07237eb] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 1rem;
}
.modal-container[data-v-d07237eb] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 420px;
    overflow: hidden;
    animation: slideUp-d07237eb 0.3s ease-out;
}
@keyframes slideUp-d07237eb {
from {
        opacity: 0;
        transform: translateY(20px);
}
to {
        opacity: 1;
        transform: translateY(0);
}
}
.modal-header[data-v-d07237eb] {
    padding: 1.5rem 1.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.modal-title[data-v-d07237eb] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
    text-align: center;
}
.close-btn[data-v-d07237eb] {
    position: absolute;
    right: 1rem;
    top: 1rem;
    background: transparent;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.close-btn[data-v-d07237eb]:hover {
    background: #f3f4f6;
    color: #1f2937;
}
.modal-body[data-v-d07237eb] {
    padding: 0 2rem 2.5rem;
    text-align: center;
}
.modal-subtitle[data-v-d07237eb] {
    color: #6b7280;
    font-size: 1rem;
    margin-bottom: 2rem;
}
.payment-options[data-v-d07237eb] {
    display: flex;
    gap: 1rem;
    justify-content: center;
}
.option-btn[data-v-d07237eb] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem 1rem;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    background: #f3f4f6;
    color: #374151;
}
.option-btn[data-v-d07237eb]:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}
.option-btn[data-v-d07237eb]:active {
    transform: translateY(-2px);
}
.icon-wrapper[data-v-d07237eb] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.2s;
}
.option-btn .material-symbols-rounded[data-v-d07237eb] {
    font-size: 32px;
}
.option-label[data-v-d07237eb] {
    font-weight: 600;
    font-size: 1.1rem;
}

/* Cash Button Styles */
.option-btn.cash[data-v-d07237eb] {
    background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%);
    color: white;
}
.option-btn.cash .icon-wrapper[data-v-d07237eb] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}
.option-btn.cash[data-v-d07237eb]:hover {
    box-shadow: 0 12px 24px rgba(99, 102, 241, 0.3);
}

/* Card Button Styles */
.option-btn.card[data-v-d07237eb] {
    background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
    color: white;
}
.option-btn.card .icon-wrapper[data-v-d07237eb] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}
.option-btn.card[data-v-d07237eb]:hover {
    box-shadow: 0 12px 24px rgba(225, 29, 72, 0.3);
}

/* Transitions */
.modal-enter-active[data-v-d07237eb],
.modal-leave-active[data-v-d07237eb] {
    transition: opacity 0.3s ease;
}
.modal-enter-from[data-v-d07237eb],
.modal-leave-to[data-v-d07237eb] {
    opacity: 0;
}
.modal-enter-active .modal-container[data-v-d07237eb],
.modal-leave-active .modal-container[data-v-d07237eb] {
    transition: transform 0.3s ease;
}
.modal-enter-from .modal-container[data-v-d07237eb],
.modal-leave-to .modal-container[data-v-d07237eb] {
    transform: scale(0.95);
    opacity: 0;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
.modal-overlay[data-v-d07237eb] {
        background: rgba(0, 0, 0, 0.8);
}
.modal-container[data-v-d07237eb] {
        background: #1e293b;
}
.modal-title[data-v-d07237eb] {
        color: #e2e8f0;
}
.modal-subtitle[data-v-d07237eb] {
        color: #94a3b8;
}
.close-btn[data-v-d07237eb] {
        color: #94a3b8;
}
.close-btn[data-v-d07237eb]:hover {
        background: #334155;
        color: #e2e8f0;
}
}
:root[data-theme="dark"] {
.modal-overlay[data-v-d07237eb] {
        background: rgba(0, 0, 0, 0.8);
}
.modal-container[data-v-d07237eb] {
        background: #1e293b;
}
.modal-title[data-v-d07237eb] {
        color: #e2e8f0;
}
.modal-subtitle[data-v-d07237eb] {
        color: #94a3b8;
}
.close-btn[data-v-d07237eb] {
        color: #94a3b8;
}
.close-btn[data-v-d07237eb]:hover {
        background: #334155;
        color: #e2e8f0;
}
}

.modal-overlay[data-v-824344b8] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 1rem;
}
.modal-container[data-v-824344b8] {
    background: white;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 400px;
    padding: 2.5rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    animation: popIn-824344b8 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes popIn-824344b8 {
from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
}
to {
        opacity: 1;
        transform: scale(1) translateY(0);
}
}

/* Icon Animation */
.status-icon-wrapper[data-v-824344b8] {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.status-icon[data-v-824344b8] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    position: relative;
}
.status-icon .material-symbols-rounded[data-v-824344b8] {
    font-size: 40px;
    color: white;
}
.status-ring[data-v-824344b8] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    opacity: 0.2;
    animation: pulse-824344b8 2s infinite;
}
@keyframes pulse-824344b8 {
0% {
        transform: scale(1);
        opacity: 0.2;
}
50% {
        transform: scale(1.2);
        opacity: 0.1;
}
100% {
        transform: scale(1);
        opacity: 0.2;
}
}

/* Success Styles */
.modal-container.success .status-icon[data-v-824344b8] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 10px 20px rgba(16, 185, 129, 0.3);
}
.modal-container.success .status-ring[data-v-824344b8] {
    background: #10b981;
}

/* Error Styles */
.modal-container.error .status-icon[data-v-824344b8] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 10px 20px rgba(239, 68, 68, 0.3);
}
.modal-container.error .status-ring[data-v-824344b8] {
    background: #ef4444;
}
.modal-title[data-v-824344b8] {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1f2937;
    margin: 0 0 0.5rem;
}
.modal-message[data-v-824344b8] {
    color: #6b7280;
    font-size: 1rem;
    margin: 0 0 1.5rem;
    line-height: 1.5;
}
.details-card[data-v-824344b8] {
    background: #f9fafb;
    border-radius: 16px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    border: 1px solid #e5e7eb;
}
.detail-row[data-v-824344b8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    font-size: 0.95rem;
}
.detail-row[data-v-824344b8]:not(:last-child) {
    border-bottom: 1px dashed #e5e7eb;
}
.detail-label[data-v-824344b8] {
    color: #6b7280;
    font-weight: 500;
}
.detail-value[data-v-824344b8] {
    color: #1f2937;
    font-weight: 700;
    font-size: 1.1rem;
}
.detail-row.highlight .detail-value[data-v-824344b8] {
    color: #10b981;
}
.ticket-info[data-v-824344b8] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #6366f1;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 2rem;
    background: rgba(99, 102, 241, 0.1);
    padding: 0.5rem 1rem;
    border-radius: 99px;
    display: inline-flex;
}
.ticket-info .material-symbols-rounded[data-v-824344b8] {
    font-size: 18px;
}
.btn-action[data-v-824344b8] {
    width: 100%;
    padding: 1rem;
    border-radius: 12px;
    border: none;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}
.modal-container.success .btn-action[data-v-824344b8] {
    background: #1f2937;
    color: white;
    box-shadow: 0 4px 12px rgba(31, 41, 55, 0.2);
}
.modal-container.success .btn-action[data-v-824344b8]:hover {
    background: #111827;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(31, 41, 55, 0.3);
}
.modal-container.error .btn-action[data-v-824344b8] {
    background: #f3f4f6;
    color: #374151;
}
.modal-container.error .btn-action[data-v-824344b8]:hover {
    background: #e5e7eb;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
.modal-overlay[data-v-824344b8] {
        background: rgba(0, 0, 0, 0.8);
}
.modal-container[data-v-824344b8] {
        background: #1e293b;
}
.modal-title[data-v-824344b8] {
        color: #e2e8f0;
}
.modal-message[data-v-824344b8] {
        color: #94a3b8;
}
.details-card[data-v-824344b8] {
        background: #0f172a;
        border-color: #334155;
}
.detail-row[data-v-824344b8]:not(:last-child) {
        border-color: #334155;
}
.detail-label[data-v-824344b8] {
        color: #94a3b8;
}
.detail-value[data-v-824344b8] {
        color: #e2e8f0;
}
.ticket-info[data-v-824344b8] {
        background: rgba(99, 102, 241, 0.2);
        color: #818cf8;
}
.modal-container.success .btn-action[data-v-824344b8] {
        background: #e2e8f0;
        color: #0f172a;
}
.modal-container.success .btn-action[data-v-824344b8]:hover {
        background: white;
}
.modal-container.error .btn-action[data-v-824344b8] {
        background: #334155;
        color: #e2e8f0;
}
.modal-container.error .btn-action[data-v-824344b8]:hover {
        background: #475569;
}
}
:root[data-theme="dark"] {
.modal-overlay[data-v-824344b8] {
        background: rgba(0, 0, 0, 0.8);
}
.modal-container[data-v-824344b8] {
        background: #1e293b;
}
.modal-title[data-v-824344b8] {
        color: #e2e8f0;
}
.modal-message[data-v-824344b8] {
        color: #94a3b8;
}
.details-card[data-v-824344b8] {
        background: #0f172a;
        border-color: #334155;
}
.detail-row[data-v-824344b8]:not(:last-child) {
        border-color: #334155;
}
.detail-label[data-v-824344b8] {
        color: #94a3b8;
}
.detail-value[data-v-824344b8] {
        color: #e2e8f0;
}
.ticket-info[data-v-824344b8] {
        background: rgba(99, 102, 241, 0.2);
        color: #818cf8;
}
.modal-container.success .btn-action[data-v-824344b8] {
        background: #e2e8f0;
        color: #0f172a;
}
.modal-container.success .btn-action[data-v-824344b8]:hover {
        background: white;
}
.modal-container.error .btn-action[data-v-824344b8] {
        background: #334155;
        color: #e2e8f0;
}
.modal-container.error .btn-action[data-v-824344b8]:hover {
        background: #475569;
}
}

.modal-overlay[data-v-09480ced] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 1rem;
}
.modal-container[data-v-09480ced] {
    background: white;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 360px;
    padding: 3rem 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: popIn-09480ced 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes popIn-09480ced {
from {
        opacity: 0;
        transform: scale(0.95);
}
to {
        opacity: 1;
        transform: scale(1);
}
}
.spinner-wrapper[data-v-09480ced] {
    margin-bottom: 1.5rem;
    position: relative;
    width: 64px;
    height: 64px;
}
.spinner[data-v-09480ced] {
    width: 100%;
    height: 100%;
    border: 4px solid #e5e7eb;
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: spin-09480ced 1s linear infinite;
}
@keyframes spin-09480ced {
to {
        transform: rotate(360deg);
}
}
.modal-title[data-v-09480ced] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 0.5rem;
}
.modal-message[data-v-09480ced] {
    color: #6b7280;
    font-size: 0.95rem;
    margin: 0;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
.modal-overlay[data-v-09480ced] {
        background: rgba(0, 0, 0, 0.8);
}
.modal-container[data-v-09480ced] {
        background: #1e293b;
}
.modal-title[data-v-09480ced] {
        color: #e2e8f0;
}
.modal-message[data-v-09480ced] {
        color: #94a3b8;
}
.spinner[data-v-09480ced] {
        border-color: #334155;
        border-top-color: #818cf8;
}
}
:root[data-theme="dark"] {
.modal-overlay[data-v-09480ced] {
        background: rgba(0, 0, 0, 0.8);
}
.modal-container[data-v-09480ced] {
        background: #1e293b;
}
.modal-title[data-v-09480ced] {
        color: #e2e8f0;
}
.modal-message[data-v-09480ced] {
        color: #94a3b8;
}
.spinner[data-v-09480ced] {
        border-color: #334155;
        border-top-color: #818cf8;
}
}

.overlay[data-v-bc2a0255] {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 9999;
  /* por encima del topbar */
}
.sidebar[data-v-bc2a0255] {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 360px;
  background: var(--panel-bg);
  border-left: 1px solid var(--panel-border);
  display: grid;
  grid-template-rows: auto 1fr auto;
  z-index: 10000;
  /* asegúrate de estar al frente */
  overflow: hidden;
  /* evita que el scroll tape header/footer */
  box-sizing: border-box;
  padding-right: 8px;
  /* margen de seguridad contra la barra del sistema */
}
.bar-top[data-v-bc2a0255],
.bar-bottom[data-v-bc2a0255] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
}
.bar-bottom[data-v-bc2a0255] {
  flex-wrap: wrap;
  gap: 0.5rem;
}
.title[data-v-bc2a0255] {
  font-weight: 700;
}
.icon-btn[data-v-bc2a0255] {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 10px;
  padding: 0.35rem;
  color: var(--text);
}
.content[data-v-bc2a0255] {
  padding: 0.5rem;
  padding-bottom: 1rem;
  /* evita que el footer tape contenido */
  overflow-y: auto;
  /* el desplazamiento ocurre dentro del contenido */
  scrollbar-gutter: stable;
  /* reserva espacio para la scrollbar */
}
.empty[data-v-bc2a0255] {
  color: var(--muted);
  padding: 1rem;
  text-align: center;
}
.list[data-v-bc2a0255] {
  display: grid;
  gap: 0.5rem;
}
.row[data-v-bc2a0255] {
  display: grid;
  grid-template-columns: 48px 1fr auto auto auto;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px dashed var(--border);
  padding-bottom: 0.4rem;
}
.thumb img[data-v-bc2a0255] {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
}
.name[data-v-bc2a0255] {
  font-weight: 600;
}
.price[data-v-bc2a0255] {
  color: var(--muted);
  font-size: 0.9rem;
}
.qty[data-v-bc2a0255] {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.qty-btn[data-v-bc2a0255] {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 8px;
  color: var(--text);
  padding: 0.25rem;
}
.qty-val[data-v-bc2a0255] {
  min-width: 24px;
  text-align: center;
}
.total[data-v-bc2a0255] {
  font-weight: 600;
}
.del[data-v-bc2a0255] {
  border: none;
  background: transparent;
  color: var(--muted);
}
.summary[data-v-bc2a0255] {
  display: inline-flex;
  gap: 1rem;
}
.btn[data-v-bc2a0255] {
  border-radius: 10px;
  padding: 0.5rem 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
}
.btn.ghost[data-v-bc2a0255] {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}
.btn.primary[data-v-bc2a0255] {
  background: #2563eb;
  /* azul para botón de pagar */
  color: white;
  border: none;
}
.btn .material-symbols-rounded[data-v-bc2a0255] {
  font-size: 18px;
}

/* Mejor distribución del footer en pantallas estrechas */
.actions[data-v-bc2a0255] {
  display: inline-flex;
  gap: 0.5rem;
}

/* Responsivo */
@media (max-width: 640px) {
.sidebar[data-v-bc2a0255] {
    width: min(92vw, 420px);
}
.row[data-v-bc2a0255] {
    grid-template-columns: 40px 1fr auto;
}
.total[data-v-bc2a0255],
  .del[data-v-bc2a0255] {
    display: none;
}
.bar-bottom[data-v-bc2a0255] {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
}
.summary[data-v-bc2a0255] {
    display: flex;
    justify-content: space-between;
}
.actions[data-v-bc2a0255] {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
}

/* Paleta global (no scoped) para variables usadas en todos los componentes */
:root {
  --bg: #0b0f14;
  --surface: rgba(255, 255, 255, 0.06);
  --surface-2: linear-gradient(0deg,
      rgba(124, 92, 255, 0.08),
      rgba(0, 194, 168, 0.08));
  --surface-3: radial-gradient(80px 80px at 20% 20%,
      rgba(124, 92, 255, 0.1),
      rgba(0, 194, 168, 0.08));
  --border: rgba(255, 255, 255, 0.12);
  --text: #e6e8eb;
  --muted: #9aa3af;
  --accent: #7c5cff;
  /* púrpura moderno */
  --accent-2: #00c2a8;
  /* turquesa moderno */
  --accent-gradient: linear-gradient(135deg, #7c5cff, #00c2a8);
  --exotic-gradient-soft: linear-gradient(90deg,
      rgba(124, 92, 255, 0.15),
      rgba(0, 194, 168, 0.15),
      rgba(255, 149, 0, 0.12));
  --icon-color: #ffffff;
  /* Paneles flotantes (dropdown, popovers, etc.) */
  --panel-bg: rgba(20, 24, 30, 0.96);
  --panel-border: rgba(255, 255, 255, 0.18);
}

/* Overrides manuales por preferencia del usuario */
:root[data-theme="dark"] {
  --bg: #0b0f14;
  --surface: rgba(255, 255, 255, 0.12);
  --surface-2: linear-gradient(0deg,
      rgba(124, 92, 255, 0.08),
      rgba(0, 194, 168, 0.08));
  --surface-3: radial-gradient(80px 80px at 20% 20%,
      rgba(124, 92, 255, 0.1),
      rgba(0, 194, 168, 0.08));
  --border: rgba(255, 255, 255, 0.22);
  --text: #f1f5f9;
  --muted: #cbd5e1;
  --accent: #7c5cff;
  --accent-2: #00c2a8;
  --accent-gradient: linear-gradient(135deg, #7c5cff, #00c2a8);
  --exotic-gradient-soft: linear-gradient(90deg,
      rgba(124, 92, 255, 0.15),
      rgba(0, 194, 168, 0.15),
      rgba(255, 149, 0, 0.12));
  --icon-color: #ffffff;
  --panel-bg: rgba(20, 24, 30, 0.96);
  --panel-border: rgba(255, 255, 255, 0.18);
}
:root[data-theme="light"] {
  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-2: linear-gradient(0deg,
      rgba(124, 92, 255, 0.06),
      rgba(0, 194, 168, 0.06));
  --surface-3: radial-gradient(80px 80px at 20% 20%,
      rgba(124, 92, 255, 0.1),
      rgba(0, 194, 168, 0.08));
  --border: #e6e8ee;
  --text: #0f172a;
  --muted: #64748b;
  --accent: #7c5cff;
  --accent-2: #00c2a8;
  --accent-gradient: linear-gradient(135deg, #7c5cff, #00c2a8);
  --exotic-gradient-soft: linear-gradient(90deg,
      rgba(124, 92, 255, 0.18),
      rgba(0, 194, 168, 0.16),
      rgba(255, 149, 0, 0.12));
  --icon-color: #1a1f29;
  --panel-bg: #ffffff;
  --panel-border: #e6e8ee;
}
@media (prefers-color-scheme: light) {
:root {
    --bg: #f8fafc;
    --surface: #ffffff;
    --surface-2: linear-gradient(0deg,
        rgba(124, 92, 255, 0.06),
        rgba(0, 194, 168, 0.06));
    --surface-3: radial-gradient(80px 80px at 20% 20%,
        rgba(124, 92, 255, 0.1),
        rgba(0, 194, 168, 0.08));
    --border: #e6e8ee;
    --text: #0f172a;
    --muted: #64748b;
    --accent: #7c5cff;
    /* botón principal púrpura */
    --accent-2: #00c2a8;
    /* turquesa éxito */
    --accent-gradient: linear-gradient(135deg, #7c5cff, #00c2a8);
    --exotic-gradient-soft: linear-gradient(90deg,
        rgba(124, 92, 255, 0.18),
        rgba(0, 194, 168, 0.16),
        rgba(255, 149, 0, 0.12));
    --icon-color: #1a1f29;
    --panel-bg: #ffffff;
    --panel-border: #e6e8ee;
}
}

/* Tipografía y base */
html,
body {
  font-family: "Outfit", system-ui, -apple-system, Segoe UI, Roboto, Helvetica,
    Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  letter-spacing: 0.2px;
  margin: 0;
  /* evita el borde blanco por margen por defecto */
  background: var(--bg);
  /* asegura fondo consistente a nivel documento */
}
body {
  line-height: 1.25;
  max-width: 100%;
  overflow-x: hidden;
  /* evita desbordes horizontales globales */
}

/* el contenedor raíz también hereda el fondo para cubrir toda el área */
#app {
  min-height: 100vh;
  background: var(--bg);
}

/* Mejora legibilidad de iconos Material Symbols */
.material-symbols-rounded {
  font-variation-settings: "FILL" 0, "wght" 600, "GRAD" 0, "opsz" 48;
}

/* Esquema global: asegura que los controles nativos usen el tema correcto */
:root[data-theme="dark"] {
  color-scheme: dark;
}
:root[data-theme="light"] {
  color-scheme: light;
}

/* Estilos globales para el dropdown de los filtros en modo oscuro */
@media (prefers-color-scheme: dark) {
.filters select option,
  .filters select optgroup {
    background-color: #0f172a;
    color: #e5e7eb;
}
.filters select option:hover,
  .filters select option:checked {
    background-color: #1f2937;
    color: #ffffff;
}
}

/* Si el tema oscuro se fuerza vía data-theme, replicar los estilos */
:root[data-theme="dark"] .filters select option,
:root[data-theme="dark"] .filters select optgroup {
  background-color: #0f172a;
  color: #e5e7eb;
}
:root[data-theme="dark"] .filters select option:hover,
:root[data-theme="dark"] .filters select option:checked {
  background-color: #1f2937;
  color: #ffffff;
}

.shell[data-v-f95a30a1] {
  min-height: 100vh;
  color: var(--text);
  background: var(--bg);
  background-image: radial-gradient(1200px 600px at 15% -10%,
      rgba(124, 92, 255, 0.08),
      transparent),
    radial-gradient(800px 400px at 85% 120%,
      rgba(0, 194, 168, 0.06),
      transparent);
  overflow-x: hidden;
  padding-top: 68px;
}
.shell-no-nav[data-v-f95a30a1] {
  padding-top: 0;
}
.shell-brown[data-v-f95a30a1] {
  background: #3b2a22 !important;
  background-image: none !important;
}
.debug-overlay[data-v-f95a30a1] {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 4000;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid #ef4444;
  color: #ef4444;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  display: inline-flex;
  gap: 0.6rem;
  align-items: center;
  box-shadow: 0 18px 28px rgba(0, 0, 0, 0.18);
}
.debug-text[data-v-f95a30a1] {
  font-weight: 700;
}
.debug-close[data-v-f95a30a1] {
  border: none;
  background: transparent;
  color: inherit;
  font-weight: 800;
  cursor: pointer;
}
.topbar[data-v-f95a30a1] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid rgba(198, 146, 61, 0.3);
  background: linear-gradient(135deg, #0a0b14 0%, #1a1610 100%);
  backdrop-filter: blur(16px) saturate(180%);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.3),
    0 8px 24px rgba(0, 0, 0, 0.2);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  transition: all 0.3s ease;
}
.brand[data-v-f95a30a1] {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}
.brand-logo[data-v-f95a30a1] {
  height: 28px;
  width: auto;
  display: block;
  transition: transform 0.3s ease;
}
.brand-logo[data-v-f95a30a1]:hover {
  transform: scale(1.05);
}
.nav[data-v-f95a30a1] {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
}
.nav-link[data-v-f95a30a1] {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.85rem;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  font-size: 0.95rem;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
}
.nav-link .material-symbols-rounded[data-v-f95a30a1] {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.1rem;
  transition: transform 0.25s ease;
}
.nav-link[data-v-f95a30a1]:hover {
  background: linear-gradient(135deg,
      rgba(124, 92, 255, 0.12) 0%,
      rgba(0, 194, 168, 0.08) 100%);
  border-color: rgba(124, 92, 255, 0.2);
  box-shadow:
    0 4px 12px rgba(124, 92, 255, 0.15),
    0 2px 4px rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}
.nav-link:hover .material-symbols-rounded[data-v-f95a30a1] {
  transform: scale(1.1);
  color: #DFC05E;
}
.nav-link.router-link-active[data-v-f95a30a1] {
  background: linear-gradient(135deg,
      rgba(198, 146, 61, 0.25) 0%,
      rgba(223, 192, 94, 0.2) 100%);
  border-color: rgba(198, 146, 61, 0.5);
  box-shadow:
    0 4px 16px rgba(198, 146, 61, 0.3),
    0 2px 6px rgba(0, 0, 0, 0.2);
  font-weight: 600;
  color: #DFC05E;
}
.nav-link.disabled[data-v-f95a30a1] {
  opacity: 0.4;
  cursor: not-allowed;
}
.nav-link.disabled[data-v-f95a30a1]:hover {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

/* User avatar + dropdown */
.user-menu[data-v-f95a30a1] {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}
.avatar-btn[data-v-f95a30a1] {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(198, 146, 61, 0.4);
  background: rgba(20, 24, 30, 0.8);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
.avatar-btn[data-v-f95a30a1]:hover {
  border-color: rgba(198, 146, 61, 0.7);
  box-shadow:
    0 4px 12px rgba(198, 146, 61, 0.3),
    0 2px 6px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px) scale(1.05);
}
.avatar-img[data-v-f95a30a1] {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}
.avatar-fallback[data-v-f95a30a1] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.9rem;
  color: #DFC05E;
  background: linear-gradient(135deg,
      rgba(198, 146, 61, 0.3) 0%,
      rgba(223, 192, 94, 0.25) 100%);
}
.user-name[data-v-f95a30a1] {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dropdown[data-v-f95a30a1] {
  position: absolute;
  right: 0;
  top: 48px;
  min-width: 200px;
  padding: 0.5rem;
  border-radius: 14px;
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 4px 16px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(16px);
  display: grid;
  gap: 0.3rem;
  z-index: 9999;
  animation: dropdownFadeIn-f95a30a1 0.2s ease-out;
}
.notif-wrapper[data-v-f95a30a1] { position: relative;
}
.notif-dropdown[data-v-f95a30a1] {
  position: absolute;
  right: 0;
  top: 48px;
  min-width: 280px;
  padding: 0.5rem;
  border-radius: 14px;
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08);
  backdrop-filter: blur(16px);
  display: grid;
  gap: 0.4rem;
  z-index: 9999;
  animation: dropdownFadeIn-f95a30a1 0.2s ease-out;
}
.notif-head[data-v-f95a30a1] { display: flex; align-items: center; justify-content: space-between;
}
.notif-list[data-v-f95a30a1] { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem;
}
.notif-item[data-v-f95a30a1] { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem; border-radius: 10px;
}
.notif-item .material-symbols-rounded[data-v-f95a30a1] { color: #f59e0b;
}
.notif-empty[data-v-f95a30a1] { color: var(--muted); padding: 0.5rem; text-align: center;
}
@keyframes dropdownFadeIn-f95a30a1 {
from {
    opacity: 0;
    transform: translateY(-8px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.drop-item[data-v-f95a30a1] {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.drop-item .material-symbols-rounded[data-v-f95a30a1] {
  font-size: 1.1rem;
}
.drop-item[data-v-f95a30a1]:hover {
  background: linear-gradient(135deg,
      rgba(198, 146, 61, 0.2) 0%,
      rgba(223, 192, 94, 0.15) 100%);
  border-color: rgba(198, 146, 61, 0.4);
  transform: translateX(2px);
}
.drop-item.danger[data-v-f95a30a1] {
  color: #ff6b6b;
}
.drop-item.danger[data-v-f95a30a1]:hover {
  background: rgba(255, 77, 79, 0.12);
  border-color: rgba(255, 77, 79, 0.3);
}
.cart-btn[data-v-f95a30a1] {
  position: relative;
}
.badge[data-v-f95a30a1] {
  position: absolute;
  top: -4px;
  right: -4px;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 999px;
  box-shadow:
    0 2px 8px rgba(239, 68, 68, 0.4),
    0 1px 3px rgba(0, 0, 0, 0.2);
  animation: badgePulse-f95a30a1 2s ease-in-out infinite;
}
@keyframes badgePulse-f95a30a1 {
0%,
  100% {
    transform: scale(1);
}
50% {
    transform: scale(1.1);
}
}

/* Search bar */
.nav-search[data-v-f95a30a1] {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: 0.5rem;
}
.nav-input[data-v-f95a30a1] {
  width: 260px;
  max-width: 32vw;
  padding: 0.55rem 2.2rem 0.55rem 2.5rem;
  border-radius: 12px;
  border: 1px solid rgba(124, 92, 255, 0.15);
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.05) 0%,
      rgba(124, 92, 255, 0.03) 100%);
  color: var(--text);
  font-size: 0.95rem;
  outline: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-input[data-v-f95a30a1]::placeholder {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 400;
}
.nav-input[data-v-f95a30a1]:focus {
  background: rgba(20, 24, 30, 0.8);
  box-shadow:
    0 4px 16px rgba(198, 146, 61, 0.3),
    0 2px 8px rgba(0, 0, 0, 0.2);
  border-color: rgba(198, 146, 61, 0.6);
}
.nav-search .search-icon[data-v-f95a30a1] {
  position: absolute;
  left: 12px;
  pointer-events: none;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.25s ease;
}
.nav-input:focus~.search-icon[data-v-f95a30a1] {
  color: #DFC05E;
}
.nav-search .clear-btn[data-v-f95a30a1] {
  position: absolute;
  right: 8px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.nav-search .clear-btn[data-v-f95a30a1]:hover {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(198, 146, 61, 0.2);
  transform: scale(1.1);
}
.nav-suggestions[data-v-f95a30a1] {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  width: min(440px, 70vw);
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.15),
    0 4px 16px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(16px);
  padding: 0.4rem;
  z-index: 1000;
  animation: dropdownFadeIn-f95a30a1 0.2s ease-out;
}
.nav-suggestions .suggestion-item[data-v-f95a30a1] {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s ease;
}
.nav-suggestions .suggestion-item.active[data-v-f95a30a1],
.nav-suggestions .suggestion-item[data-v-f95a30a1]:hover {
  background: linear-gradient(135deg,
      rgba(124, 92, 255, 0.12) 0%,
      rgba(0, 194, 168, 0.08) 100%);
  border-color: rgba(124, 92, 255, 0.25);
  transform: translateX(2px);
}
.nav-suggestions .suggestion-thumb[data-v-f95a30a1] {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(198, 146, 61, 0.3);
}
.nav-suggestions .suggestion-name[data-v-f95a30a1] {
  font-weight: 600;
  font-size: 0.95rem;
}
.nav-suggestions .suggestion-sku[data-v-f95a30a1] {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 500;
}

/* Responsive */
@media (max-width: 1000px) {
.topbar[data-v-f95a30a1] {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
}
.shell[data-v-f95a30a1] {
    padding-top: 140px;
}
.brand[data-v-f95a30a1] {
    justify-content: space-between;
}
.nav[data-v-f95a30a1] {
    justify-content: flex-start;
    row-gap: 0.4rem;
}
.nav-input[data-v-f95a30a1] {
    width: 200px;
}
.nav-search[data-v-f95a30a1] {
    margin-left: 0;
}
}
@media (max-width: 640px) {
.nav-link[data-v-f95a30a1] {
    padding: 0.45rem 0.7rem;
    font-size: 0.9rem;
}
.nav-link .material-symbols-rounded[data-v-f95a30a1] {
    font-size: 1rem;
}
.user-name[data-v-f95a30a1] {
    display: none;
}
.nav-input[data-v-f95a30a1] {
    width: 160px;
    font-size: 0.9rem;
}
.brand-logo[data-v-f95a30a1] {
    height: 24px;
}
}

/* Hamburger button - solo visible en móvil */
.hamburger-btn[data-v-f95a30a1] {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(198, 146, 61, 0.4);
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition: all 0.25s ease;
}
.hamburger-btn[data-v-f95a30a1]:hover {
  background: linear-gradient(135deg,
      rgba(198, 146, 61, 0.2) 0%,
      rgba(223, 192, 94, 0.15) 100%);
  border-color: rgba(198, 146, 61, 0.6);
}
.hamburger-btn .material-symbols-rounded[data-v-f95a30a1] {
  font-size: 24px;
}

/* Mobile Overlay */
.mobile-overlay[data-v-f95a30a1] {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1999;
  backdrop-filter: blur(4px);
}

/* Media queries para móvil */
@media (max-width: 768px) {
.hamburger-btn[data-v-f95a30a1] {
    display: inline-flex;
}
.brand[data-v-f95a30a1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.nav[data-v-f95a30a1] {
    position: fixed;
    top: 68px;
    left: 0;
    width: 280px;
    max-width: 80vw;
    height: calc(100vh - 68px);
    background: var(--panel-bg);
    border-right: 1px solid var(--panel-border);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(16px);
    padding: 1rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2001;
}
.nav.nav-mobile-open[data-v-f95a30a1] {
    transform: translateX(0);
}
.mobile-overlay[data-v-f95a30a1] {
    display: block;
}
.nav-link[data-v-f95a30a1] {
    width: 100%;
    justify-content: flex-start;
    padding: 0.75rem 1rem;
}
.nav-search[data-v-f95a30a1] {
    width: 100%;
    margin-left: 0;
    order: -1;
}
.nav-input[data-v-f95a30a1] {
    width: 100%;
    max-width: 100%;
}
.user-menu[data-v-f95a30a1] {
    width: 100%;
    flex-direction: row-reverse;
    justify-content: flex-end;
}
.user-name[data-v-f95a30a1] {
    display: inline;
}
.shell[data-v-f95a30a1] {
    padding-top: 68px;
}
.topbar[data-v-f95a30a1] {
    flex-direction: row;
    padding: 0.75rem 1rem;
}
}


[data-v-09fb77d1] {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.landing-page[data-v-09fb77d1] {
  min-height: 100vh;
  background: linear-gradient(135deg, #0a0b14 0%, #1a1610 100%);
  color: #ffffff;
  overflow-x: hidden;
  position: relative;
  scroll-behavior: smooth;
  width: 100%;
  max-width: 100vw;
}

/* Hero Background */
.hero-background[data-v-09fb77d1] {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.gradient-orb[data-v-09fb77d1] {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.4;
  animation: float-09fb77d1 25s infinite ease-in-out;
}
.orb-1[data-v-09fb77d1] {
  width: 700px;
  height: 700px;
  background: linear-gradient(135deg, #C6923D 0%, #DFC05E 100%);
  top: -300px;
  right: -200px;
  animation-delay: 0s;
}
.orb-2[data-v-09fb77d1] {
  width: 600px;
  height: 600px;
  background: linear-gradient(135deg, #DFC05E 0%, #F7ED7D 100%);
  bottom: -200px;
  left: -150px;
  animation-delay: 12s;
}
@keyframes float-09fb77d1 {
0%,
  100% {
    transform: translate(0, 0) scale(1);
}
33% {
    transform: translate(40px, -40px) scale(1.1);
}
66% {
    transform: translate(-30px, 30px) scale(0.9);
}
}

/* Navbar */
.navbar[data-v-09fb77d1] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
  padding: 1.5rem 2rem;
  background: rgba(10, 11, 20, 0.85);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(198, 146, 61, 0.3);
}
.nav-content[data-v-09fb77d1] {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.nav-content .logo[data-v-09fb77d1] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  transition: transform 0.3s ease;
  flex-shrink: 0;
  order: 1;
  position: relative;
  top: auto;
  left: auto;
  width: auto;
  height: auto;
}
.nav-content .logo[data-v-09fb77d1]:hover {
  transform: scale(1.05);
}
.nav-content .logo-img[data-v-09fb77d1] {
  width: 50px;
  height: 50px;
  object-fit: contain;
  filter: drop-shadow(0 0 15px rgba(198, 146, 61, 0.8));
  transition: filter 0.3s ease;
  display: block;
  flex-shrink: 0;
}
.nav-content .logo:hover .logo-img[data-v-09fb77d1] {
  filter: drop-shadow(0 0 25px rgba(198, 146, 61, 1));
}
.nav-content .logo-text[data-v-09fb77d1] {
  font-size: 1.75rem;
  font-weight: 900;
  font-family: 'Playfair Display', 'Cinzel', 'Times New Roman', serif;
  text-transform: uppercase;
  background: linear-gradient(135deg,
      #FFD700 0%,
      #FFE55C 10%,
      #FFD700 20%,
      #F4D03F 35%,
      #FFD700 45%,
      #C6923D 60%,
      #9D6B27 75%,
      #C6923D 85%,
      #FFD700 95%,
      #FFE55C 100%);
  background-size: 300% 300%;
  animation: shimmer-09fb77d1 2.5s ease-in-out infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.2em;
  white-space: nowrap;
  text-shadow:
    3px 4px 0px rgba(0, 0, 0, 1),
    5px 7px 12px rgba(0, 0, 0, 0.9),
    7px 10px 20px rgba(0, 0, 0, 0.8),
    0px 2px 4px rgba(255, 215, 0, 0.6),
    0px -2px 2px rgba(114, 68, 16, 0.8),
    inset 0px 1px 0px rgba(255, 255, 255, 0.3);
  filter:
    drop-shadow(3px 5px 10px rgba(0, 0, 0, 0.9)) drop-shadow(1px 2px 4px rgba(255, 215, 0, 0.4));
  position: relative;
  transform: perspective(100px) rotateX(2deg);
}
@keyframes shimmer-09fb77d1 {
0%,
  100% {
    background-position: 0% 50%;
}
50% {
    background-position: 100% 50%;
}
}
.nav-links[data-v-09fb77d1] {
  display: flex;
  align-items: center;
  gap: 2rem;
  order: 2;
  margin-left: auto;
}
.nav-link[data-v-09fb77d1] {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
  scroll-behavior: smooth;
}
.nav-link[data-v-09fb77d1]:hover {
  color: #DFC05E;
}
.btn-nav-login[data-v-09fb77d1] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, rgba(198, 146, 61, 0.25) 0%, rgba(223, 192, 94, 0.2) 100%);
  border: 1px solid rgba(198, 146, 61, 0.5);
  border-radius: 12px;
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}
.btn-nav-login[data-v-09fb77d1]:hover {
  background: linear-gradient(135deg, rgba(198, 146, 61, 0.35) 0%, rgba(223, 192, 94, 0.3) 100%);
  transform: translateY(-2px);
  border-color: rgba(198, 146, 61, 0.7);
}

/* Hero Content */
.hero-content[data-v-09fb77d1] {
  position: relative;
  z-index: 10;
  max-width: 1400px;
  margin: 0 auto;
  padding: 4rem 2rem;
  padding-top: calc(4rem + 100px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  min-height: calc(100vh - 100px);
}
.hero-text[data-v-09fb77d1] {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.hero-badge[data-v-09fb77d1] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background: rgba(247, 237, 125, 0.15);
  border: 1px solid rgba(198, 146, 61, 0.5);
  border-radius: 50px;
  color: #DFC05E;
  font-size: 0.875rem;
  font-weight: 600;
  width: fit-content;
  backdrop-filter: blur(10px);
}
.hero-badge .material-symbols-rounded[data-v-09fb77d1] {
  font-size: 1.125rem;
  color: #C6923D;
}
.hero-title[data-v-09fb77d1] {
  font-size: 4rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  min-height: 1.1em;
}
.typewriter-cursor[data-v-09fb77d1] {
  display: inline-block;
  animation: blink-09fb77d1 1s infinite;
  color: #C6923D;
  font-weight: 300;
}
@keyframes blink-09fb77d1 {
0%,
  50% {
    opacity: 1;
}
51%,
  100% {
    opacity: 0;
}
}
.gradient-text[data-v-09fb77d1] {
  background: linear-gradient(135deg, #C6923D 0%, #DFC05E 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-subtitle[data-v-09fb77d1] {
  font-size: 1.25rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
  max-width: 550px;
}
.hero-buttons[data-v-09fb77d1] {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.btn-primary-hero[data-v-09fb77d1] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, #C6923D 0%, #DFC05E 100%);
  border: 2px solid rgba(198, 146, 61, 0.6);
  border-radius: 14px;
  color: #000000;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(198, 146, 61, 0.4);
}
.btn-primary-hero[data-v-09fb77d1]:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(198, 146, 61, 0.6);
  background: linear-gradient(135deg, #DFC05E 0%, #F7ED7D 100%);
}
.btn-secondary-hero[data-v-09fb77d1] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  background: rgba(247, 237, 125, 0.1);
  border: 2px solid rgba(198, 146, 61, 0.4);
  border-radius: 14px;
  color: #DFC05E;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}
.btn-secondary-hero[data-v-09fb77d1]:hover {
  background: rgba(198, 146, 61, 0.2);
  border-color: rgba(198, 146, 61, 0.7);
  color: #F7ED7D;
}

/* Hero Visual */
.hero-visual[data-v-09fb77d1] {
  position: relative;
  height: 600px;
}

/* Credit Card Flip Effect */
.flip-card[data-v-09fb77d1] {
  background-color: transparent;
  width: 400px;
  height: 256px;
  perspective: 1000px;
  color: white;
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  animation: floatCard-09fb77d1 5s infinite ease-in-out;
}
@keyframes floatCard-09fb77d1 {
0%,
  100% {
    transform: translate(-50%, -50%) translateY(0);
}
50% {
    transform: translate(-50%, -50%) translateY(-10px);
}
}
.heading_8264[data-v-09fb77d1] {
  position: absolute;
  letter-spacing: .25em;
  font-size: 0.65em;
  top: 2.5em;
  left: 20em;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
}
.flip-card .logo[data-v-09fb77d1] {
  position: absolute;
  top: 8.5em;
  left: 15em;
  width: 48px;
  height: 48px;
}
.chip[data-v-09fb77d1] {
  position: absolute;
  top: 2.8em;
  left: 2em;
  width: 40px;
  height: 40px;
}
.contactless[data-v-09fb77d1] {
  position: absolute;
  top: 4.5em;
  left: 16em;
  width: 28px;
  height: 28px;
}
.number[data-v-09fb77d1] {
  position: absolute;
  font-weight: bold;
  font-size: 0.85em;
  top: 10.5em;
  left: 2em;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.95);
}
.valid_thru[data-v-09fb77d1] {
  position: absolute;
  font-weight: bold;
  top: 17em;
  font-size: 0.5em;
  left: 4em;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.15em;
}
.date_8264[data-v-09fb77d1] {
  position: absolute;
  font-weight: bold;
  font-size: 0.65em;
  top: 18.5em;
  left: 4em;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: 0.1em;
}
.name[data-v-09fb77d1] {
  position: absolute;
  font-weight: bold;
  font-size: 0.65em;
  top: 20.5em;
  left: 2.5em;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: 0.15em;
}
.strip[data-v-09fb77d1] {
  position: absolute;
  background-color: black;
  width: calc(100% - 3rem);
  height: 2.5em;
  top: 3.5em;
  left: 1.5rem;
  right: 1.5rem;
  margin: 0 auto;
  background: repeating-linear-gradient(45deg,
      #303030,
      #303030 10px,
      #202020 10px,
      #202020 20px);
  border-radius: 2px;
}
.mstrip[data-v-09fb77d1] {
  position: absolute;
  background-color: rgb(255, 255, 255);
  width: 12em;
  height: 1.2em;
  top: 7.5em;
  left: 1.5rem;
  border-radius: 4px;
}
.sstrip[data-v-09fb77d1] {
  position: absolute;
  background-color: rgb(255, 255, 255);
  width: 6em;
  height: 1.2em;
  top: 7.5em;
  left: 14.5rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.code[data-v-09fb77d1] {
  font-weight: bold;
  text-align: center;
  color: black;
  font-size: 0.9em;
  margin: 0;
  padding: 0;
  line-height: 1.2em;
}
.flip-card-inner[data-v-09fb77d1] {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner[data-v-09fb77d1] {
  transform: rotateY(180deg);
}
.flip-card-front[data-v-09fb77d1],
.flip-card-back[data-v-09fb77d1] {
  box-shadow: 0 8px 14px 0 rgba(0, 0, 0, 0.2);
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 1rem;
}
.flip-card-front[data-v-09fb77d1] {
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 2px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -1px 0px inset;
  background: linear-gradient(135deg, #724410 0%, #9D6B27 100%);
  border: 1px solid rgba(198, 146, 61, 0.4);
  padding: 1.5rem;
}
.flip-card-back[data-v-09fb77d1] {
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 2px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -1px 0px inset;
  background: linear-gradient(135deg, #724410 0%, #9D6B27 100%);
  border: 1px solid rgba(198, 146, 61, 0.4);
  transform: rotateY(180deg);
  padding: 0;
  position: relative;
  overflow: hidden;
}

/* Floating Widgets */
.floating-widget[data-v-09fb77d1] {
  position: absolute;
  background: rgba(198, 146, 61, 0.2);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(198, 146, 61, 0.4);
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: 0 10px 40px rgba(198, 146, 61, 0.3);
  z-index: 6;
  animation: floatWidget-09fb77d1 6s infinite ease-in-out;
}
.widget-profit[data-v-09fb77d1] {
  top: 5%;
  left: 0;
  width: 220px;
  animation-delay: 0s;
}
@keyframes floatWidget-09fb77d1 {
0%,
  100% {
    transform: translateY(0);
}
50% {
    transform: translateY(-15px);
}
}
.widget-header[data-v-09fb77d1] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.widget-icon[data-v-09fb77d1] {
  font-size: 1.25rem;
  color: #C6923D;
}
.widget-title[data-v-09fb77d1] {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}
.widget-content[data-v-09fb77d1] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.widget-value[data-v-09fb77d1] {
  font-size: 2rem;
  font-weight: 700;
  color: #ffffff;
}
.widget-subtitle[data-v-09fb77d1] {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
}
.widget-chart[data-v-09fb77d1] {
  margin-top: 0.5rem;
  height: 40px;
}

/* Transaction Notifications */
.transaction-notifications[data-v-09fb77d1] {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  z-index: 6;
}
.notification-card[data-v-09fb77d1] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background: rgba(198, 146, 61, 0.2);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(198, 146, 61, 0.4);
  border-radius: 12px;
  width: 260px;
  box-shadow: 0 8px 30px rgba(198, 146, 61, 0.3);
  transition: all 0.3s ease;
}
.notification-card[data-v-09fb77d1]:hover {
  transform: translateX(-5px);
  box-shadow: 0 12px 40px rgba(198, 146, 61, 0.5);
}
.notification-avatar[data-v-09fb77d1] {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: linear-gradient(135deg, #C6923D 0%, #DFC05E 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #000000;
  flex-shrink: 0;
}
.notification-info[data-v-09fb77d1] {
  flex: 1;
}
.notification-amount[data-v-09fb77d1] {
  font-size: 0.9rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.25rem;
}
.notification-from[data-v-09fb77d1] {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
}

/* Icon Nodes */
.icon-nodes[data-v-09fb77d1] {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.icon-node[data-v-09fb77d1] {
  position: absolute;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: rgba(198, 146, 61, 0.25);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(198, 146, 61, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #C6923D;
  box-shadow: 0 4px 20px rgba(198, 146, 61, 0.3);
  animation: pulseNode-09fb77d1 3s infinite ease-in-out;
}
.icon-node .material-symbols-rounded[data-v-09fb77d1] {
  font-size: 1.75rem;
}
.node-user[data-v-09fb77d1] {
  bottom: 15%;
  left: 10%;
  animation-delay: 0s;
}
.node-chart[data-v-09fb77d1] {
  bottom: 20%;
  right: 15%;
  animation-delay: 1.5s;
}
@keyframes pulseNode-09fb77d1 {
0%,
  100% {
    transform: scale(1);
    opacity: 0.7;
}
50% {
    transform: scale(1.1);
    opacity: 1;
}
}

/* Carousel curvo (fisheye / coverflow) */
.carousel-curved-section[data-v-09fb77d1] {
  padding: 4rem 0;
  background: linear-gradient(180deg, rgba(10, 11, 20, 0.4) 0%, rgba(10, 11, 20, 0.6) 100%);
  overflow: hidden;
}
.carousel-curved-wrap[data-v-09fb77d1] {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 4rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  z-index: 10;
}
.carousel-curved-btn[data-v-09fb77d1] {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid rgba(198, 146, 61, 0.7);
  background: rgba(198, 146, 61, 0.25);
  backdrop-filter: blur(10px);
  color: #DFC05E;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  z-index: 200;
  position: relative;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.carousel-curved-btn[data-v-09fb77d1]:hover {
  background: rgba(198, 146, 61, 0.4);
  border-color: rgba(198, 146, 61, 1);
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(198, 146, 61, 0.5);
}
.carousel-curved-btn .material-symbols-rounded[data-v-09fb77d1] {
  font-size: 1.85rem;
  font-weight: 600;
}
.carousel-curved-viewport[data-v-09fb77d1] {
  flex: 1;
  min-height: 420px;
  perspective: 1400px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.carousel-curved-track[data-v-09fb77d1] {
  position: relative;
  width: 100%;
  height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  perspective: 1400px;
}
.carousel-curved-slide[data-v-09fb77d1] {
  position: absolute;
  width: 420px;
  height: 300px;
  border-radius: 20px;
  overflow: visible;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(198, 146, 61, 0.2);
  cursor: pointer;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity 0.5s ease,
    box-shadow 0.35s ease;
  left: 50%;
  top: 50%;
  margin-left: -210px;
  margin-top: -150px;
  transform: translateX(var(--slide-x, 0)) rotateY(var(--slide-rotate-y, 0deg)) scale(var(--slide-scale, 1));
  opacity: var(--slide-opacity, 1);
  z-index: calc(50 + var(--slide-z, 100));
  backface-visibility: hidden;
  background: rgba(0, 0, 0, 0.05);
}
.carousel-slide-inner[data-v-09fb77d1] {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.1);
}
.carousel-curved-slide img[data-v-09fb77d1] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.carousel-curved-slide.is-center[data-v-09fb77d1] {
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(198, 146, 61, 0.5);
  z-index: 150;
  cursor: pointer;
}
.carousel-curved-dots[data-v-09fb77d1] {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
  padding: 0 1rem;
}
.carousel-dot[data-v-09fb77d1] {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(198, 146, 61, 0.35);
  cursor: pointer;
  transition: all 0.25s ease;
}
.carousel-dot[data-v-09fb77d1]:hover {
  background: rgba(198, 146, 61, 0.6);
  transform: scale(1.2);
}
.carousel-dot.active[data-v-09fb77d1] {
  background: #DFC05E;
  width: 28px;
  border-radius: 5px;
}
@media (max-width: 900px) {
.carousel-curved-wrap[data-v-09fb77d1] {
    padding: 0 3rem;
}
.carousel-curved-btn[data-v-09fb77d1] {
    width: 44px;
    height: 44px;
    z-index: 200;
}
.carousel-curved-btn .material-symbols-rounded[data-v-09fb77d1] {
    font-size: 1.6rem;
}
.carousel-curved-viewport[data-v-09fb77d1] {
    min-height: 340px;
}
.carousel-curved-track[data-v-09fb77d1] {
    height: 320px;
}
.carousel-curved-slide[data-v-09fb77d1] {
    width: 320px;
    height: 230px;
    margin-left: -160px;
    margin-top: -115px;
}
}
@media (max-width: 600px) {
.carousel-curved-section[data-v-09fb77d1] {
    padding: 3rem 0;
}
.carousel-curved-wrap[data-v-09fb77d1] {
    padding: 0 2rem;
}
.carousel-curved-btn[data-v-09fb77d1] {
    width: 40px;
    height: 40px;
    z-index: 200;
}
.carousel-curved-btn .material-symbols-rounded[data-v-09fb77d1] {
    font-size: 1.5rem;
}
.carousel-curved-slide[data-v-09fb77d1] {
    width: 260px;
    height: 185px;
    margin-left: -130px;
    margin-top: -93px;
}
.carousel-curved-viewport[data-v-09fb77d1] {
    min-height: 280px;
}
.carousel-curved-track[data-v-09fb77d1] {
    height: 260px;
}
}

/* Stats Section */
.stats-section[data-v-09fb77d1] {
  padding: 4rem 2rem;
  background: rgba(247, 237, 125, 0.05);
  border-top: 1px solid rgba(198, 146, 61, 0.3);
  border-bottom: 1px solid rgba(198, 146, 61, 0.3);
}
.stats-container[data-v-09fb77d1] {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.stat-card[data-v-09fb77d1] {
  text-align: center;
  padding: 2rem;
  background: rgba(247, 237, 125, 0.08);
  border: 1px solid rgba(198, 146, 61, 0.3);
  border-radius: 20px;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}
.stat-card[data-v-09fb77d1]:hover {
  background: rgba(198, 146, 61, 0.15);
  border-color: rgba(198, 146, 61, 0.6);
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(198, 146, 61, 0.4);
}
.stat-icon[data-v-09fb77d1] {
  margin-bottom: 1rem;
}
.stat-icon .material-symbols-rounded[data-v-09fb77d1] {
  font-size: 2.5rem;
  color: #C6923D;
}
.stat-value[data-v-09fb77d1] {
  font-size: 2.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, #C6923D 0%, #DFC05E 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.5rem;
}
.stat-label[data-v-09fb77d1] {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}

/* Section Styles */
.section-container[data-v-09fb77d1] {
  max-width: 1400px;
  margin: 0 auto;
  padding: 6rem 2rem;
}
.section-header[data-v-09fb77d1] {
  text-align: center;
  margin-bottom: 4rem;
}
.section-badge[data-v-09fb77d1] {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  background: linear-gradient(135deg, rgba(198, 146, 61, 0.3) 0%, rgba(223, 192, 94, 0.25) 100%);
  border: 1px solid rgba(198, 146, 61, 0.5);
  border-radius: 50px;
  color: #DFC05E;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1.5rem;
}
.section-title[data-v-09fb77d1] {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #ffffff 0%, #DFC05E 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.section-subtitle[data-v-09fb77d1] {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.75);
  max-width: 600px;
  margin: 0 auto;
}

/* Features Section */
.features-section[data-v-09fb77d1] {
  background: rgba(10, 11, 20, 0.5);
}
.features-grid[data-v-09fb77d1] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.feature-card[data-v-09fb77d1] {
  padding: 2.5rem;
  background: linear-gradient(135deg, rgba(247, 237, 125, 0.1) 0%, rgba(247, 237, 125, 0.05) 100%);
  border: 1px solid rgba(198, 146, 61, 0.3);
  border-radius: 24px;
  transition: all 0.4s ease;
  backdrop-filter: blur(20px);
}
.feature-card[data-v-09fb77d1]:hover {
  background: linear-gradient(135deg, rgba(198, 146, 61, 0.2) 0%, rgba(223, 192, 94, 0.15) 100%);
  border-color: rgba(198, 146, 61, 0.7);
  transform: translateY(-10px);
  box-shadow: 0 25px 50px rgba(198, 146, 61, 0.4);
}
.feature-icon-wrapper[data-v-09fb77d1] {
  margin-bottom: 1.5rem;
}
.feature-icon[data-v-09fb77d1] {
  font-size: 3rem;
  color: #C6923D;
}
.feature-title[data-v-09fb77d1] {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #ffffff;
}
.feature-description[data-v-09fb77d1] {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}

/* Benefits Section */
.benefits-section[data-v-09fb77d1] {
  background: rgba(247, 237, 125, 0.05);
}
.benefits-grid[data-v-09fb77d1] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.benefit-card[data-v-09fb77d1] {
  padding: 2.5rem;
  background: rgba(247, 237, 125, 0.08);
  border: 1px solid rgba(198, 146, 61, 0.3);
  border-radius: 24px;
  transition: all 0.4s ease;
  backdrop-filter: blur(20px);
}
.benefit-card[data-v-09fb77d1]:hover {
  transform: translateY(-10px);
  box-shadow: 0 25px 50px rgba(198, 146, 61, 0.4);
  border-color: rgba(198, 146, 61, 0.6);
}
.benefit-icon[data-v-09fb77d1] {
  width: 70px;
  height: 70px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.benefit-icon .material-symbols-rounded[data-v-09fb77d1] {
  font-size: 2.5rem;
}
.benefit-title[data-v-09fb77d1] {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #ffffff;
}
.benefit-description[data-v-09fb77d1] {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}

/* Pricing Section */
.pricing-section[data-v-09fb77d1] {
  background: rgba(10, 11, 20, 0.5);
}
.pricing-grid[data-v-09fb77d1] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}
.pricing-card[data-v-09fb77d1] {
  padding: 2.5rem;
  background: linear-gradient(135deg, rgba(247, 237, 125, 0.1) 0%, rgba(247, 237, 125, 0.05) 100%);
  border: 1px solid rgba(198, 146, 61, 0.3);
  border-radius: 24px;
  transition: all 0.4s ease;
  backdrop-filter: blur(20px);
  position: relative;
}
.pricing-card[data-v-09fb77d1]:hover {
  transform: translateY(-10px);
  border-color: rgba(198, 146, 61, 0.7);
  box-shadow: 0 25px 50px rgba(198, 146, 61, 0.4);
}
.pricing-card.featured[data-v-09fb77d1] {
  border-color: rgba(198, 146, 61, 0.7);
  background: linear-gradient(135deg, rgba(198, 146, 61, 0.2) 0%, rgba(223, 192, 94, 0.15) 100%);
  transform: scale(1.05);
}
.pricing-badge[data-v-09fb77d1] {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #C6923D 0%, #DFC05E 100%);
  color: #000000;
  padding: 0.5rem 1.5rem;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pricing-header[data-v-09fb77d1] {
  margin-bottom: 2rem;
}
.pricing-name[data-v-09fb77d1] {
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 1rem;
}
.pricing-price[data-v-09fb77d1] {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.price-amount[data-v-09fb77d1] {
  font-size: 3rem;
  font-weight: 800;
  background: linear-gradient(135deg, #C6923D 0%, #DFC05E 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.price-period[data-v-09fb77d1] {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.6);
}
.pricing-features[data-v-09fb77d1] {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem 0;
}
.pricing-features li[data-v-09fb77d1] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 1rem;
}
.pricing-features li .material-symbols-rounded[data-v-09fb77d1] {
  font-size: 1.25rem;
  color: #C6923D;
}
.btn-pricing[data-v-09fb77d1] {
  width: 100%;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, #C6923D 0%, #DFC05E 100%);
  color: #000000;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}
.btn-pricing[data-v-09fb77d1]:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(198, 146, 61, 0.5);
  background: linear-gradient(135deg, #DFC05E 0%, #F7ED7D 100%);
}

/* Integrations Section */
.integrations-section[data-v-09fb77d1] {
  background: rgba(10, 11, 20, 0.5);
}
.integrations-grid[data-v-09fb77d1] {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.5rem;
}
.integration-card[data-v-09fb77d1] {
  padding: 2rem;
  background: rgba(247, 237, 125, 0.08);
  border: 1px solid rgba(198, 146, 61, 0.3);
  border-radius: 16px;
  text-align: center;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}
.integration-card[data-v-09fb77d1]:hover {
  transform: translateY(-5px);
  border-color: rgba(198, 146, 61, 0.6);
  box-shadow: 0 10px 30px rgba(198, 146, 61, 0.4);
}
.integration-icon[data-v-09fb77d1] {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}
.integration-name[data-v-09fb77d1] {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

/* Testimonials Section */
.testimonials-section[data-v-09fb77d1] {
  background: rgba(247, 237, 125, 0.05);
}
.testimonials-grid[data-v-09fb77d1] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.testimonial-card[data-v-09fb77d1] {
  padding: 2.5rem;
  background: rgba(247, 237, 125, 0.08);
  border: 1px solid rgba(198, 146, 61, 0.3);
  border-radius: 24px;
  backdrop-filter: blur(20px);
  transition: all 0.3s ease;
}
.testimonial-card[data-v-09fb77d1]:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(198, 146, 61, 0.4);
  border-color: rgba(198, 146, 61, 0.6);
}
.testimonial-rating[data-v-09fb77d1] {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1.5rem;
}
.star[data-v-09fb77d1] {
  color: #DFC05E;
  font-size: 1.25rem;
}
.testimonial-text[data-v-09fb77d1] {
  font-size: 1.125rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 2rem;
  font-style: italic;
}
.testimonial-author[data-v-09fb77d1] {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.testimonial-avatar[data-v-09fb77d1] {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #C6923D 0%, #DFC05E 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #000000;
  font-size: 1.25rem;
}
.testimonial-name[data-v-09fb77d1] {
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.25rem;
}
.testimonial-role[data-v-09fb77d1] {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
}

/* CTA Section */
.cta-section[data-v-09fb77d1] {
  padding: 6rem 2rem;
  background: linear-gradient(135deg, rgba(198, 146, 61, 0.25) 0%, rgba(223, 192, 94, 0.2) 100%);
  border-top: 1px solid rgba(198, 146, 61, 0.4);
  border-bottom: 1px solid rgba(198, 146, 61, 0.4);
}
.cta-container[data-v-09fb77d1] {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
.cta-title[data-v-09fb77d1] {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}
.cta-subtitle[data-v-09fb77d1] {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 2.5rem;
}
.cta-buttons[data-v-09fb77d1] {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.btn-cta-primary[data-v-09fb77d1] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 2.5rem;
  background: linear-gradient(135deg, #C6923D 0%, #DFC05E 100%);
  border: none;
  border-radius: 14px;
  color: #000000;
  font-size: 1.125rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 15px 40px rgba(198, 146, 61, 0.5);
}
.btn-cta-primary[data-v-09fb77d1]:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 50px rgba(198, 146, 61, 0.6);
  background: linear-gradient(135deg, #DFC05E 0%, #F7ED7D 100%);
}
.btn-cta-secondary[data-v-09fb77d1] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 2.5rem;
  background: rgba(247, 237, 125, 0.15);
  border: 2px solid rgba(198, 146, 61, 0.5);
  border-radius: 14px;
  color: #DFC05E;
  font-size: 1.125rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}
.btn-cta-secondary[data-v-09fb77d1]:hover {
  background: rgba(198, 146, 61, 0.25);
  border-color: rgba(198, 146, 61, 0.7);
  color: #F7ED7D;
}

/* Footer */
.footer[data-v-09fb77d1] {
  padding: 4rem 2rem 2rem;
  background: rgba(10, 11, 20, 0.9);
  border-top: 1px solid rgba(198, 146, 61, 0.3);
}
.footer-container[data-v-09fb77d1] {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4rem;
  margin-bottom: 3rem;
}
.footer-brand[data-v-09fb77d1] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.footer-text[data-v-09fb77d1] {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  line-height: 1.6;
}
.footer-social[data-v-09fb77d1] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.footer-social-link[data-v-09fb77d1] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  transition: color 0.3s ease, background 0.3s ease, transform 0.2s ease;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  z-index: 1;
}
.footer-social-link[data-v-09fb77d1]:hover {
  color: #DFC05E;
  background: rgba(223, 192, 94, 0.2);
  transform: translateY(-2px);
}
.footer-social-icon[data-v-09fb77d1] {
  width: 20px;
  height: 20px;
  pointer-events: none;
}
.footer-links[data-v-09fb77d1] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.footer-title[data-v-09fb77d1] {
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 1rem;
}
.footer-link[data-v-09fb77d1] {
  display: block;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
  transition: color 0.3s ease;
}
.footer-link[data-v-09fb77d1]:hover {
  color: #DFC05E;
}
.footer-bottom[data-v-09fb77d1] {
  max-width: 1400px;
  margin: 0 auto;
  padding-top: 2rem;
  border-top: 1px solid rgba(198, 146, 61, 0.3);
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.875rem;
}

/* WhatsApp Floating Button */
.whatsapp-button[data-v-09fb77d1] {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);
  z-index: 1000;
  transition: all 0.3s ease;
  overflow: visible;
}
.whatsapp-button[data-v-09fb77d1]:hover {
  transform: scale(1.1);
  box-shadow: 0 12px 35px rgba(37, 211, 102, 0.6);
}
.whatsapp-button[data-v-09fb77d1]:active {
  transform: scale(0.95);
}
.whatsapp-icon[data-v-09fb77d1] {
  width: 32px;
  height: 32px;
  fill: #ffffff;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}
.whatsapp-tooltip[data-v-09fb77d1] {
  position: absolute;
  right: 75px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(10, 11, 20, 0.95);
  color: #ffffff;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(198, 146, 61, 0.4);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.whatsapp-tooltip[data-v-09fb77d1]::after {
  content: '';
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 8px solid rgba(10, 11, 20, 0.95);
  border-left-color: rgba(10, 11, 20, 0.95);
}
.whatsapp-button:hover .whatsapp-tooltip[data-v-09fb77d1] {
  opacity: 1;
  right: 80px;
}

/* Responsive */
@media (max-width: 1024px) {
.nav-content .logo-img[data-v-09fb77d1] {
    width: 45px;
    height: 45px;
}
.nav-content .logo-text[data-v-09fb77d1] {
    font-size: 1.5rem;
}
.hero-content[data-v-09fb77d1] {
    grid-template-columns: 1fr;
    gap: 3rem;
}
.hero-visual[data-v-09fb77d1] {
    height: 500px;
}
.flip-card[data-v-09fb77d1] {
    width: 350px;
    height: 224px;
}
.heading_8264[data-v-09fb77d1] {
    font-size: 0.55em;
    top: 2.2em;
    left: 17.5em;
}
.flip-card .logo[data-v-09fb77d1] {
    top: 7.5em;
    left: 13em;
    width: 42px;
    height: 42px;
}
.chip[data-v-09fb77d1] {
    top: 2.5em;
    left: 1.8em;
    width: 36px;
    height: 36px;
}
.contactless[data-v-09fb77d1] {
    top: 4.2em;
    left: 14.5em;
    width: 24px;
    height: 24px;
}
.number[data-v-09fb77d1] {
    font-size: 0.75em;
    top: 9.5em;
    left: 1.8em;
}
.valid_thru[data-v-09fb77d1] {
    top: 15.5em;
    font-size: 0.45em;
    left: 3.5em;
}
.date_8264[data-v-09fb77d1] {
    font-size: 0.6em;
    top: 17em;
    left: 3.5em;
}
.name[data-v-09fb77d1] {
    font-size: 0.6em;
    top: 19em;
    left: 2.2em;
}
.stats-container[data-v-09fb77d1] {
    grid-template-columns: repeat(2, 1fr);
}
.features-grid[data-v-09fb77d1],
  .benefits-grid[data-v-09fb77d1],
  .pricing-grid[data-v-09fb77d1] {
    grid-template-columns: repeat(2, 1fr);
}
.testimonials-grid[data-v-09fb77d1] {
    grid-template-columns: 1fr;
}
.integrations-grid[data-v-09fb77d1] {
    grid-template-columns: repeat(3, 1fr);
}
.section-title[data-v-09fb77d1] {
    font-size: 2.5rem;
}
.widget-profit[data-v-09fb77d1] {
    width: 200px;
    top: 3%;
    left: 2%;
}
.transaction-notifications[data-v-09fb77d1] {
    top: 3%;
    right: 2%;
}
.notification-card[data-v-09fb77d1] {
    width: 240px;
}
.footer-container[data-v-09fb77d1] {
    grid-template-columns: 1fr 1fr;
}
.footer-links[data-v-09fb77d1] {
    grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.navbar[data-v-09fb77d1] {
    padding: 1rem;
}
.nav-content[data-v-09fb77d1] {
    padding: 0;
}
.nav-content .logo[data-v-09fb77d1] {
    gap: 0.5rem;
}
.nav-content .logo-img[data-v-09fb77d1] {
    width: 35px;
    height: 35px;
}
.nav-content .logo-text[data-v-09fb77d1] {
    font-size: 1.1rem;
}
.nav-links[data-v-09fb77d1] {
    gap: 0.5rem;
}
.nav-link[data-v-09fb77d1] {
    display: none;
}
.btn-nav-login[data-v-09fb77d1] {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}
.btn-nav-login span[data-v-09fb77d1]:last-child {
    display: none;
}

  /* Hero Section */
.hero[data-v-09fb77d1] {
    padding: 1.5rem 1rem;
    min-height: auto;
    overflow-x: hidden;
}
.hero-content[data-v-09fb77d1] {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 2rem 1rem;
    padding-top: calc(2rem + 80px);
    min-height: auto;
}
.hero-text[data-v-09fb77d1] {
    text-align: center;
    width: 100%;
    max-width: 100%;
}
.hero-badge[data-v-09fb77d1] {
    font-size: 0.7rem;
    padding: 0.5rem 0.875rem;
    margin-bottom: 1rem;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    white-space: normal;
    text-align: center;
}
.hero-badge span[data-v-09fb77d1]:last-child {
    font-size: 0.65rem;
    display: block;
    text-align: center;
    line-height: 1.3;
}
.hero-title[data-v-09fb77d1] {
    font-size: 1.75rem;
    line-height: 1.2;
    margin-bottom: 1rem;
    word-wrap: break-word;
}
.hero-subtitle[data-v-09fb77d1] {
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    line-height: 1.5;
    padding: 0 0.5rem;
}
.hero-buttons[data-v-09fb77d1] {
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 100%;
}
.btn-primary-hero[data-v-09fb77d1],
  .btn-secondary-hero[data-v-09fb77d1] {
    width: 100%;
    padding: 0.875rem 1.25rem;
    font-size: 0.9rem;
    white-space: nowrap;
}
.hero-visual[data-v-09fb77d1] {
    height: 300px;
    min-height: 300px;
    position: relative;
    width: 100%;
    overflow: hidden;
}
.flip-card[data-v-09fb77d1] {
    width: 280px;
    height: 180px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    max-width: calc(100% - 2rem);
}
.heading_8264[data-v-09fb77d1] {
    font-size: 0.45em;
    top: 1.8em;
    left: 12em;
}
.flip-card .logo[data-v-09fb77d1] {
    top: 6em;
    left: 9em;
    width: 30px;
    height: 30px;
}
.chip[data-v-09fb77d1] {
    top: 2em;
    left: 1.2em;
    width: 28px;
    height: 28px;
}
.contactless[data-v-09fb77d1] {
    top: 3.5em;
    left: 10.5em;
    width: 18px;
    height: 18px;
}
.number[data-v-09fb77d1] {
    font-size: 0.6em;
    top: 7.5em;
    left: 1.2em;
}
.valid_thru[data-v-09fb77d1] {
    top: 12em;
    font-size: 0.35em;
    left: 2.5em;
}
.date_8264[data-v-09fb77d1] {
    font-size: 0.5em;
    top: 13.5em;
    left: 2.5em;
}
.name[data-v-09fb77d1] {
    font-size: 0.5em;
    top: 15.5em;
    left: 1.8em;
}
.strip[data-v-09fb77d1] {
    width: calc(100% - 1.5rem);
    height: 1.5em;
    top: 2em;
    left: 0.75rem;
}
.mstrip[data-v-09fb77d1] {
    width: 7em;
    height: 0.8em;
    top: 4.8em;
    left: 0.75rem;
}
.sstrip[data-v-09fb77d1] {
    width: 4em;
    height: 0.8em;
    top: 4.8em;
    left: 8.5em;
}
.code[data-v-09fb77d1] {
    font-size: 0.65em;
}

  /* Floating Widgets */
.widget-profit[data-v-09fb77d1] {
    width: 160px;
    padding: 0.75rem;
    top: auto;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.75rem;
    position: absolute;
    z-index: 5;
    max-width: calc(100% - 2rem);
}
.widget-header[data-v-09fb77d1] {
    margin-bottom: 0.5rem;
}
.widget-icon[data-v-09fb77d1] {
    font-size: 1rem;
}
.widget-title[data-v-09fb77d1] {
    font-size: 0.75rem;
}
.widget-value[data-v-09fb77d1] {
    font-size: 1.25rem;
}
.widget-subtitle[data-v-09fb77d1] {
    font-size: 0.7rem;
}
.transaction-notifications[data-v-09fb77d1] {
    top: auto;
    bottom: 2%;
    right: 50%;
    transform: translateX(50%);
    gap: 0.5rem;
    position: absolute;
    z-index: 5;
    max-width: calc(100% - 2rem);
}
.notification-card[data-v-09fb77d1] {
    width: 180px;
    padding: 0.625rem;
    font-size: 0.75rem;
}
.notification-avatar[data-v-09fb77d1] {
    width: 28px;
    height: 28px;
    font-size: 0.75rem;
}
.notification-amount[data-v-09fb77d1] {
    font-size: 0.875rem;
}
.notification-from[data-v-09fb77d1] {
    font-size: 0.7rem;
}
.notification-amount[data-v-09fb77d1] {
    font-size: 0.875rem;
}
.notification-from[data-v-09fb77d1] {
    font-size: 0.7rem;
}
.icon-nodes[data-v-09fb77d1] {
    display: none;
}

  /* Stats Section */
.stats-section[data-v-09fb77d1] {
    padding: 3rem 1rem;
}
.stats-container[data-v-09fb77d1] {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
.stat-card[data-v-09fb77d1] {
    padding: 1.5rem 1rem;
}
.stat-value[data-v-09fb77d1] {
    font-size: 2rem;
}
.stat-label[data-v-09fb77d1] {
    font-size: 0.875rem;
}

  /* Section Styles */
.section-container[data-v-09fb77d1] {
    padding: 2.5rem 1rem;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}
.section-header[data-v-09fb77d1] {
    padding: 0 0.5rem;
}
.section-header[data-v-09fb77d1] {
    margin-bottom: 2rem;
}
.section-badge[data-v-09fb77d1] {
    font-size: 0.75rem;
    padding: 0.5rem 1rem;
}
.section-title[data-v-09fb77d1] {
    font-size: 1.75rem;
    line-height: 1.3;
}
.section-subtitle[data-v-09fb77d1] {
    font-size: 1rem;
}

  /* Features, Benefits, Testimonials */
.features-grid[data-v-09fb77d1],
  .benefits-grid[data-v-09fb77d1],
  .testimonials-grid[data-v-09fb77d1],
  .pricing-grid[data-v-09fb77d1] {
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
.feature-card[data-v-09fb77d1],
  .benefit-card[data-v-09fb77d1],
  .testimonial-card[data-v-09fb77d1],
  .pricing-card[data-v-09fb77d1] {
    padding: 1.5rem;
}
.feature-icon[data-v-09fb77d1] {
    font-size: 2.5rem;
}
.feature-title[data-v-09fb77d1],
  .benefit-title[data-v-09fb77d1],
  .pricing-name[data-v-09fb77d1] {
    font-size: 1.25rem;
}
.pricing-card.featured[data-v-09fb77d1] {
    transform: none;
}
.pricing-badge[data-v-09fb77d1] {
    font-size: 0.75rem;
    padding: 0.4rem 1rem;
}
.price-amount[data-v-09fb77d1] {
    font-size: 2.5rem;
}

  /* Integrations */
.integrations-grid[data-v-09fb77d1] {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
.integration-card[data-v-09fb77d1] {
    padding: 1.5rem 1rem;
}
.integration-icon[data-v-09fb77d1] {
    width: 50px;
    height: 50px;
}

  /* CTA Section */
.cta-section[data-v-09fb77d1] {
    padding: 3rem 1rem;
}
.cta-title[data-v-09fb77d1] {
    font-size: 1.75rem;
    line-height: 1.3;
}
.cta-subtitle[data-v-09fb77d1] {
    font-size: 1rem;
    margin-bottom: 2rem;
}
.cta-buttons[data-v-09fb77d1] {
    flex-direction: column;
    gap: 1rem;
}
.btn-cta-primary[data-v-09fb77d1],
  .btn-cta-secondary[data-v-09fb77d1] {
    width: 100%;
    padding: 1rem 1.5rem;
    font-size: 1rem;
}

  /* Footer */
.footer[data-v-09fb77d1] {
    padding: 3rem 1rem 1.5rem;
}
.footer-container[data-v-09fb77d1] {
    grid-template-columns: 1fr;
    gap: 2rem;
}
.footer-links[data-v-09fb77d1] {
    grid-template-columns: 1fr;
    gap: 2rem;
}
.footer-bottom[data-v-09fb77d1] {
    padding-top: 1.5rem;
    font-size: 0.8rem;
}

  /* WhatsApp Button Mobile */
.whatsapp-button[data-v-09fb77d1] {
    width: 56px;
    height: 56px;
    bottom: 1.5rem;
    right: 1.5rem;
}
.whatsapp-icon[data-v-09fb77d1] {
    width: 28px;
    height: 28px;
}
.whatsapp-tooltip[data-v-09fb77d1] {
    display: none;
}
}

/* Extra Small Devices */
@media (max-width: 480px) {
.hero-title[data-v-09fb77d1] {
    font-size: 1.75rem;
}
.hero-subtitle[data-v-09fb77d1] {
    font-size: 0.9rem;
}
.flip-card[data-v-09fb77d1] {
    width: 260px;
    height: 167px;
}
.widget-profit[data-v-09fb77d1] {
    width: 160px;
    padding: 0.75rem;
    font-size: 0.75rem;
}
.widget-value[data-v-09fb77d1] {
    font-size: 1.25rem;
}
.transaction-notifications[data-v-09fb77d1] {
    display: none;
}
.stats-container[data-v-09fb77d1] {
    grid-template-columns: 1fr;
}
.section-title[data-v-09fb77d1] {
    font-size: 1.5rem;
}
.section-subtitle[data-v-09fb77d1] {
    font-size: 0.9rem;
}
.feature-card[data-v-09fb77d1],
  .benefit-card[data-v-09fb77d1],
  .testimonial-card[data-v-09fb77d1],
  .pricing-card[data-v-09fb77d1] {
    padding: 1.25rem;
}
.integrations-grid[data-v-09fb77d1] {
    grid-template-columns: 1fr;
}
.cta-title[data-v-09fb77d1] {
    font-size: 1.5rem;
}
.btn-cta-primary[data-v-09fb77d1],
  .btn-cta-secondary[data-v-09fb77d1] {
    padding: 0.875rem 1.25rem;
    font-size: 0.9rem;
}
}

/* ========================================
   Lightbox / Image Modal Styles
======================================== */
.lightbox-overlay[data-v-09fb77d1] {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  backdrop-filter: blur(10px);
}
.lightbox-content[data-v-09fb77d1] {
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-image[data-v-09fb77d1] {
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 16px;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.7), 0 0 0 2px rgba(198, 146, 61, 0.4);
  animation: lightbox-zoom-in-09fb77d1 0.3s ease-out;
}
@keyframes lightbox-zoom-in-09fb77d1 {
from {
    transform: scale(0.8);
    opacity: 0;
}
to {
    transform: scale(1);
    opacity: 1;
}
}
.lightbox-close[data-v-09fb77d1] {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid rgba(198, 146, 61, 0.6);
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  color: #DFC05E;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  z-index: 10001;
}
.lightbox-close[data-v-09fb77d1]:hover {
  background: rgba(198, 146, 61, 0.3);
  border-color: rgba(198, 146, 61, 1);
  transform: scale(1.1);
}
.lightbox-close .material-symbols-rounded[data-v-09fb77d1] {
  font-size: 1.75rem;
  font-weight: 600;
}
.lightbox-nav[data-v-09fb77d1] {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid rgba(198, 146, 61, 0.6);
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  color: #DFC05E;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  z-index: 10001;
}
.lightbox-nav[data-v-09fb77d1]:hover {
  background: rgba(198, 146, 61, 0.3);
  border-color: rgba(198, 146, 61, 1);
  transform: translateY(-50%) scale(1.1);
}
.lightbox-nav .material-symbols-rounded[data-v-09fb77d1] {
  font-size: 2rem;
  font-weight: 600;
}
.lightbox-prev[data-v-09fb77d1] {
  left: 1.5rem;
}
.lightbox-next[data-v-09fb77d1] {
  right: 1.5rem;
}
.lightbox-counter[data-v-09fb77d1] {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.75rem 1.5rem;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(198, 146, 61, 0.4);
  border-radius: 30px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}

/* Lightbox Transition */
.lightbox-fade-enter-active[data-v-09fb77d1],
.lightbox-fade-leave-active[data-v-09fb77d1] {
  transition: opacity 0.3s ease;
}
.lightbox-fade-enter-from[data-v-09fb77d1],
.lightbox-fade-leave-to[data-v-09fb77d1] {
  opacity: 0;
}

/* Zoom icon overlay for carousel center slide */
.zoom-icon-overlay[data-v-09fb77d1] {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  transition: all 0.3s ease;
  pointer-events: none;
  border-radius: 20px;
}
.carousel-curved-slide.is-center:hover .zoom-icon-overlay[data-v-09fb77d1] {
  background: rgba(0, 0, 0, 0.4);
}
.zoom-icon-overlay .material-symbols-rounded[data-v-09fb77d1] {
  font-size: 3rem;
  color: rgba(255, 255, 255, 0);
  transition: all 0.3s ease;
  transform: scale(0.8);
}
.carousel-curved-slide.is-center:hover .zoom-icon-overlay .material-symbols-rounded[data-v-09fb77d1] {
  color: rgba(255, 255, 255, 0.95);
  transform: scale(1);
}

/* Make center slide cursor pointer for lightbox */
.carousel-curved-slide.is-center[data-v-09fb77d1] {
  cursor: pointer;
}

/* Mobile Lightbox Adjustments */
@media (max-width: 768px) {
.lightbox-overlay[data-v-09fb77d1] {
    padding: 1rem;
}
.lightbox-close[data-v-09fb77d1] {
    top: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
}
.lightbox-close .material-symbols-rounded[data-v-09fb77d1] {
    font-size: 1.5rem;
}
.lightbox-nav[data-v-09fb77d1] {
    width: 48px;
    height: 48px;
}
.lightbox-nav .material-symbols-rounded[data-v-09fb77d1] {
    font-size: 1.75rem;
}
.lightbox-prev[data-v-09fb77d1] {
    left: 0.75rem;
}
.lightbox-next[data-v-09fb77d1] {
    right: 0.75rem;
}
.lightbox-counter[data-v-09fb77d1] {
    bottom: 1rem;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}
.lightbox-image[data-v-09fb77d1] {
    border-radius: 12px;
}
.zoom-icon-overlay .material-symbols-rounded[data-v-09fb77d1] {
    font-size: 2.5rem;
}
}

.chat-fab[data-v-56b82174] {
  /* Define variables locally to ensure they exist */
  --bg: #ffffff;
  --surface: #ffffff;
  --text: #0f172a;
  --border: #e2e8f0;
  --muted: #64748b;

  position: fixed;
  bottom: 22px;
  right: 22px;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: linear-gradient(135deg, #6366f1, #14b8a6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  box-shadow: 0 16px 36px rgba(2, 6, 23, 0.25);
  cursor: pointer;
  z-index: 50;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  color-scheme: light dark;
}
.chat-fab.has-unread[data-v-56b82174]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45);
  animation: fabPulse-56b82174 2s ease-out infinite;
}
@keyframes fabPulse-56b82174 {
0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45);
}
70% {
    box-shadow: 0 0 0 14px rgba(239, 68, 68, 0);
}
100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
}
}
.fab-badge[data-v-56b82174] {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #ef4444;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 16px rgba(239, 68, 68, 0.35);
}
.chat-fab[data-v-56b82174]:hover {
  transform: translateY(-1px);
  box-shadow: 0 22px 44px rgba(2, 6, 23, 0.28);
}
.chat-panel[data-v-56b82174] {
  /* Define variables locally to ensure they exist and background is opaque */
  --bg: #ffffff;
  --surface: #ffffff;
  --text: #0f172a;
  --border: #e2e8f0;
  --muted: #64748b;

  position: fixed;
  bottom: 108px;
  right: 22px;
  width: 420px;
  max-height: 72vh;
  background: var(--surface);
  /* Now guaranteed to be defined */
  border-radius: 26px;
  box-shadow: 0 24px 56px rgba(38, 45, 80, 0.28);
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  z-index: 51;
  overflow: hidden;
  border: 2px solid transparent;
  background-clip: padding-box;
  color-scheme: light dark;
}
.chat-panel[data-v-56b82174]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 26px;
  padding: 2px;
  background: linear-gradient(135deg, #6a5cf5, #00c2ff);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.chat-header[data-v-56b82174] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1rem;
  background: linear-gradient(135deg, #6a5cf5, #00c2ff);
  color: #fff;
}
.brand[data-v-56b82174] {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.avatar-img[data-v-56b82174] {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  object-fit: cover;
}
.fab-img[data-v-56b82174] {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  object-fit: cover;
}
.title[data-v-56b82174] {
  font-weight: 800;
  color: #fff;
}
.sub[data-v-56b82174] {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
  margin-left: 0.35rem;
}
.chat-body[data-v-56b82174] {
  padding: 0.9rem;
  overflow: auto;
  display: grid;
  gap: 0.7rem;
  background: var(--surface);
}
.thumbs-list[data-v-56b82174] {
  display: grid;
  gap: 0.4rem;
}
.thumbs-list .thumb-row[data-v-56b82174] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.thumb-img[data-v-56b82174] {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  object-fit: cover;
}
.thumb-info[data-v-56b82174] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}
.thumb-info b[data-v-56b82174] {
  flex: 1 1 auto;
  color: var(--text);
}
.thumb-price[data-v-56b82174] {
  color: var(--text);
  font-weight: 700;
  margin-left: auto;
  white-space: nowrap;
}
.msg[data-v-56b82174] {
  padding: 0.62rem 0.8rem;
  border-radius: 18px;
  font-size: 0.95rem;
  max-width: 84%;
  line-height: 1.35;
}
.msg.user[data-v-56b82174] {
  background: linear-gradient(135deg, #6a5cf5, #00c2ff);
  color: #fff;
  justify-self: end;
  box-shadow: 0 12px 24px rgba(106, 92, 245, 0.25);
}
.msg.assistant[data-v-56b82174] {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  justify-self: start;
  text-align: justify;
  text-justify: inter-word;
  word-break: break-word;
}
.msg.assistant.typing[data-v-56b82174] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.msg-line[data-v-56b82174] {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.msg-line.assistant[data-v-56b82174] {
  justify-content: flex-start;
}
.msg-line.user[data-v-56b82174] {
  justify-content: flex-end;
}
.bubble-avatar[data-v-56b82174] {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  object-fit: cover;
  flex: 0 0 28px;
}
.bubble-avatar.fallback[data-v-56b82174] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(124, 92, 255, 0.14);
  color: var(--text);
  font-weight: 800;
}
.typing .dot[data-v-56b82174] {
  width: 6px;
  height: 6px;
  background: var(--text);
  border-radius: 50%;
  animation: pulse-56b82174 1.2s infinite ease-in-out;
  opacity: 0.6;
}
.typing .dot[data-v-56b82174]:nth-child(2) {
  animation-delay: 0.15s;
}
.typing .dot[data-v-56b82174]:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes pulse-56b82174 {
0%,
  80%,
  100% {
    transform: scale(0.8);
    opacity: 0.4;
}
40% {
    transform: scale(1);
    opacity: 1;
}
}
.chat-suggestions[data-v-56b82174] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
  padding: 0 1rem 0.8rem;
  max-height: 42vh;
  overflow: auto;
}
.sg-head[data-v-56b82174] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  background: var(--surface);
  padding: 0.4rem 0;
  color: var(--text);
}
.sg-item[data-v-56b82174] {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 16px;
  padding: 0.55rem 0.7rem;
  box-shadow: 0 6px 16px rgba(38, 45, 80, 0.08);
}
.sg-thumb[data-v-56b82174] {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  object-fit: cover;
}
.sg-info[data-v-56b82174] {
  display: grid;
  gap: 0.15rem;
}
.sg-name[data-v-56b82174] {
  font-weight: 700;
  color: var(--text);
}
.sg-price[data-v-56b82174] {
  color: var(--text);
  font-weight: 700;
}
.sg-qty[data-v-56b82174] {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.qty-btn[data-v-56b82174] {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.qty-val[data-v-56b82174] {
  min-width: 20px;
  text-align: center;
  color: var(--text);
}
.sg-add[data-v-56b82174] {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.7rem;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #6a5cf5, #00c2ff);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(106, 92, 245, 0.25);
}
.chat-input[data-v-56b82174] {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.chat-input input[data-v-56b82174] {
  flex: 1;
  padding: 0.6rem 0.9rem;
  border: 2px solid #60a5fa;
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  outline: none;
}
.chat-input input[data-v-56b82174]:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.25);
}
.send-btn[data-v-56b82174] {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: linear-gradient(135deg, #6a5cf5, #00c2ff);
  color: #fff;
  box-shadow: 0 10px 22px rgba(106, 92, 245, 0.25);
  cursor: pointer;
}
.mic-btn[data-v-56b82174] {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--muted);
  box-shadow: none;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease,
    border-color 160ms ease, background-color 160ms ease;
}
.mic-btn .material-symbols-rounded[data-v-56b82174] {
  color: inherit;
}
.mic-btn.active[data-v-56b82174] {
  border: none;
  background: linear-gradient(135deg, #6a5cf5, #00c2ff);
  color: #fff;
  box-shadow: 0 10px 22px rgba(106, 92, 245, 0.25);
}
.mic-btn[data-v-56b82174]:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(2, 6, 23, 0.16);
  border-color: var(--border);
  background: var(--surface);
  color: var(--text);
}
.mic-btn.active[data-v-56b82174]:not(:disabled):hover {
  box-shadow: 0 12px 26px rgba(106, 92, 245, 0.32);
}
.mic-btn[data-v-56b82174]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.mic-waves[data-v-56b82174] {
  position: absolute;
  inset: 6px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  pointer-events: none;
}
.mic-waves .w[data-v-56b82174] {
  width: 3px;
  height: 8px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.9);
  transition: height 80ms ease;
}
.tools-bar[data-v-56b82174] {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-top: 1px dashed var(--border);
  background: var(--bg);
}
.chat-panel .chip[data-v-56b82174] {
  border: 1.6px solid transparent;
  border-radius: 999px;
  padding: 0.38rem 0.7rem;
  color: #6a5cf5;
  background: linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, #6a5cf5, #00c2ff) border-box;
  cursor: pointer;
}
.chat-panel .chip[data-v-56b82174]:hover {
  background: linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(135deg, #6a5cf5, #00c2ff) border-box;
}
.chat-panel .chip.icon-only[data-v-56b82174] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
}
.chat-panel .chip.icon-only .material-symbols-rounded[data-v-56b82174] {
  font-size: 18px;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
.chat-fab[data-v-56b82174] {
    --bg: #0f172a;
    --surface: #1e293b;
    --text: #f8fafc;
    --border: #334155;
    --muted: #94a3b8;
}
.chat-panel[data-v-56b82174] {
    --bg: #0f172a;
    --surface: #1e293b;
    --text: #f8fafc;
    --border: #334155;
    --muted: #94a3b8;

    color-scheme: dark;
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.5);
}
.chat-body[data-v-56b82174] {
    background: var(--surface);
}
.chat-panel .chip[data-v-56b82174] {
    color: #ffffff;
}
.chat-panel .chip[data-v-56b82174]:hover {
    color: #ffffff;
}
.msg.assistant[data-v-56b82174] {
    background: var(--bg);
    border-color: var(--border);
}
.sg-item[data-v-56b82174] {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}
.chat-input input[data-v-56b82174] {
    color-scheme: dark;
}
}

/* Light mode support */
@media (prefers-color-scheme: light) {
.chat-panel[data-v-56b82174] {
    color-scheme: light;
}
.chat-input input[data-v-56b82174] {
    color-scheme: light;
}
}
:root[data-theme="dark"] .chat-panel[data-v-56b82174],
:root[data-theme="dark"] .chat-fab[data-v-56b82174] {
  --bg: #0f172a;
  --surface: #1e293b;
  --text: #f8fafc;
  --border: #334155;
  --muted: #94a3b8;
  color-scheme: dark;
}
:root[data-theme="dark"] .chat-panel .chip[data-v-56b82174] {
  color: #ffffff;
}
:root[data-theme="dark"] .chat-panel .chip[data-v-56b82174]:hover {
  color: #ffffff;
}
:root[data-theme="light"] .chat-panel[data-v-56b82174],
:root[data-theme="light"] .chat-fab[data-v-56b82174] {
  --bg: #ffffff;
  --surface: #ffffff;
  --text: #0f172a;
  --border: #e2e8f0;
  --muted: #64748b;
  color-scheme: light;
}
@media (max-width: 520px) {
.chat-panel[data-v-56b82174] {
    right: 10px;
    width: calc(100vw - 20px);
}
}

.users-wrap[data-v-a0488bb0] {
  --surface-2: rgba(255, 255, 255, 0.65);
  display: grid;
  gap: 1.5rem;
  padding: 2rem;
  max-width: 1400px;
  margin: 0 auto;
  overflow-x: hidden;
  isolation: isolate;
  box-sizing: border-box;
  background: linear-gradient(135deg, #0a0b14 0%, #1a1610 100%);
  min-height: 100vh;
}
.head[data-v-a0488bb0] {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.title[data-v-a0488bb0] {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  background: linear-gradient(135deg, #C6923D, #DFC05E);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  margin: 0;
}
.title[data-v-a0488bb0]::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 60px;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, #C6923D, #DFC05E);
  box-shadow: 0 2px 8px rgba(198, 146, 61, 0.3);
}
.subtitle[data-v-a0488bb0] {
  color: var(--muted);
  font-size: 1rem;
  margin: 0.5rem 0 0 0;
}
.grid[data-v-a0488bb0] {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.9fr);
  gap: 2rem;
  justify-content: center;
  align-items: start;
  width: 100%;
}
.card[data-v-a0488bb0] {
  display: grid;
  gap: 0.8rem;
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 1.5rem;
  background: var(--surface);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  position: relative;
}
.card[data-v-a0488bb0]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #C6923D, #DFC05E, #C6923D);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.card[data-v-a0488bb0]:hover {
  box-shadow: 0 12px 40px rgba(198, 146, 61, 0.15);
  transform: translateY(-4px);
  border-color: rgba(198, 146, 61, 0.3);
}
.card[data-v-a0488bb0]:hover::before {
  opacity: 1;
}
@media (prefers-color-scheme: dark) {
.card[data-v-a0488bb0] {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}
}
.card-head[data-v-a0488bb0] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 0.5rem;
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, rgba(198, 146, 61, 0.3), transparent);
  border-image-slice: 1;
  flex-wrap: wrap;
}
.card-head h2[data-v-a0488bb0] {
  font-size: 1.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, #C6923D, #DFC05E);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
  letter-spacing: -0.02em;
}
.table-wrap[data-v-a0488bb0] {
  width: 100%;
  overflow: auto;
  border-radius: 16px;
}
.table[data-v-a0488bb0] {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
  /* permite scroll si el card es estrecho */
}
.table th[data-v-a0488bb0],
.table td[data-v-a0488bb0] {
  text-align: left;
  padding: 0.5rem;
  border-bottom: none;
}
.table.epic thead th[data-v-a0488bb0] {
  background: linear-gradient(135deg, rgba(198, 146, 61, 0.12), rgba(223, 192, 94, 0.12));
  color: var(--text);
  border: none;
  border-bottom: 2px solid rgba(198, 146, 61, 0.3);
  border-radius: 0;
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 1rem 1.25rem;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}
.table.epic thead th[data-v-a0488bb0]:first-child {
  border-top-left-radius: 12px;
}
.table.epic thead th[data-v-a0488bb0]:last-child {
  border-top-right-radius: 12px;
}
.table tbody td[data-v-a0488bb0] {
  padding: 1rem 1.25rem;
  border: none;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.table tbody tr[data-v-a0488bb0] {
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
  border-left: 4px solid transparent;
}
.table tbody tr[data-v-a0488bb0]:hover {
  background: rgba(198, 146, 61, 0.04);
  border-left-color: #C6923D;
}
.table tbody tr.selected[data-v-a0488bb0] {
  background: rgba(198, 146, 61, 0.08);
  border-left-color: #C6923D;
}
.table tbody tr[data-v-a0488bb0]:nth-child(odd) {
  background: transparent;
}
@media (prefers-color-scheme: dark) {
.table.epic thead th[data-v-a0488bb0] {
    background: rgba(139, 92, 246, 0.15);
    color: #e5e7eb;
}
}
.avatar[data-v-a0488bb0] {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(198, 146, 61, 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}
.avatar[data-v-a0488bb0]:hover {
  transform: scale(1.1);
  border-color: #C6923D;
  box-shadow: 0 4px 12px rgba(198, 146, 61, 0.3);
}
.mono[data-v-a0488bb0] {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  font-weight: 600;
}
.badge[data-v-a0488bb0] {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 700;
  margin-right: 0.5rem;
  border: 2px solid;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  transition: all 0.3s ease;
}
.badge.ok[data-v-a0488bb0] {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.3);
}
.badge.ok[data-v-a0488bb0]:hover {
  background: rgba(16, 185, 129, 0.15);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}
.badge.ko[data-v-a0488bb0] {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.3);
}
.badge.ko[data-v-a0488bb0]:hover {
  background: rgba(239, 68, 68, 0.15);
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
}
.perm-list[data-v-a0488bb0] {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(2, minmax(200px, 1fr));
}
.perm-row[data-v-a0488bb0] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border: 2px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  gap: 1rem;
  flex-wrap: nowrap;
  max-width: 100%;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}
.perm-row[data-v-a0488bb0]::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #C6923D, #DFC05E);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.perm-row[data-v-a0488bb0]:hover {
  border-color: rgba(198, 146, 61, 0.3);
  box-shadow: 0 8px 24px rgba(198, 146, 61, 0.12);
  transform: translateY(-2px);
  background: rgba(198, 146, 61, 0.04);
}
.perm-row[data-v-a0488bb0]:hover::before {
  opacity: 1;
}
@media (prefers-color-scheme: dark) {
.perm-row[data-v-a0488bb0] {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}
}
.perm-left[data-v-a0488bb0] {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.perm-label[data-v-a0488bb0] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}
.module-icon[data-v-a0488bb0] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  color: white;
  background: linear-gradient(135deg, #C6923D, #DFC05E);
  box-shadow: 0 4px 12px rgba(198, 146, 61, 0.3);
  transition: all 0.3s ease;
}
.perm-row:hover .module-icon[data-v-a0488bb0] {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 6px 16px rgba(198, 146, 61, 0.4);
}
.code-chip[data-v-a0488bb0] {
  display: inline-block;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  border: 1px dashed var(--border);
  color: var(--muted);
  background: rgba(0, 0, 0, 0.03);
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.btn[data-v-a0488bb0] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  border: none;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  min-width: 140px;
  justify-content: center;
}
.btn[data-v-a0488bb0]:not(.primary):not(.danger) {
  background: var(--surface);
  color: var(--text);
  border: 2px solid var(--border);
  box-shadow: none;
}
.btn[data-v-a0488bb0]:not(.primary):not(.danger):hover {
  background: rgba(198, 146, 61, 0.08);
  border-color: #C6923D;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.btn.primary[data-v-a0488bb0] {
  background: linear-gradient(135deg, #C6923D, #DFC05E);
  color: white;
  box-shadow: 0 4px 16px rgba(198, 146, 61, 0.3);
  position: relative;
  overflow: hidden;
  border: none;
}
.btn.primary[data-v-a0488bb0]::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}
.btn.primary[data-v-a0488bb0]:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(198, 146, 61, 0.4);
}
.btn.primary[data-v-a0488bb0]:hover::before {
  left: 100%;
}
.btn.primary[data-v-a0488bb0]:active {
  transform: translateY(0);
}
.btn.danger[data-v-a0488bb0] {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
  border: none;
  position: relative;
  overflow: hidden;
}
.btn.danger[data-v-a0488bb0]::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}
.btn.danger[data-v-a0488bb0]:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.4);
}
.btn.danger[data-v-a0488bb0]:hover::before {
  left: 100%;
}
.btn.danger[data-v-a0488bb0]:active {
  transform: translateY(0);
}
.btn.danger[data-v-a0488bb0]:disabled,
.btn.primary[data-v-a0488bb0]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}
.selected-info[data-v-a0488bb0] {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.error[data-v-a0488bb0] {
  color: #ff6b6b;
}
.muted[data-v-a0488bb0] {
  color: var(--muted);
}
.small[data-v-a0488bb0] {
  font-size: 0.9rem;
}

/* Prioridad visual: el card izquierdo debe sobreponerse para que sus opciones no se tapen */
.grid>.card[data-v-a0488bb0]:nth-child(1) {
  position: relative;
  z-index: 5;
}
.grid>.card[data-v-a0488bb0]:nth-child(2) {
  position: relative;
  z-index: 1;
  max-width: 500px;
}

/* Barra de búsqueda moderna */
.search-wrap[data-v-a0488bb0] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(198, 146, 61, 0.04);
  border: 2px solid transparent;
  border-radius: 16px;
  padding: 0.75rem 1rem;
  min-width: 280px;
  max-width: 400px;
  flex: 0 1 400px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  position: relative;
  transition: all 0.3s ease;
}
.search-wrap[data-v-a0488bb0]:focus-within {
  background: var(--surface);
  box-shadow: 0 0 0 4px rgba(198, 146, 61, 0.15), 0 4px 16px rgba(0, 0, 0, 0.08);
  border-color: #C6923D;
}
.search-icon[data-v-a0488bb0] {
  color: var(--muted);
  font-size: 22px;
  flex-shrink: 0;
}
.search-input[data-v-a0488bb0] {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  padding: 0.5rem;
  font-size: 0.95rem;
  font-weight: 500;
}
.search-input[data-v-a0488bb0]::placeholder {
  color: var(--muted);
  font-weight: 400;
}
.clear-btn[data-v-a0488bb0] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: none;
  background: rgba(198, 146, 61, 0.08);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.clear-btn[data-v-a0488bb0]:hover {
  background: rgba(198, 146, 61, 0.15);
  color: #C6923D;
  transform: scale(1.05);
}
@media (prefers-color-scheme: dark) {
.search-wrap[data-v-a0488bb0] {
    background: rgba(139, 92, 246, 0.08);
    border-color: rgba(139, 92, 246, 0.15);
}
.search-wrap[data-v-a0488bb0]:focus-within {
    background: rgba(255, 255, 255, 0.06);
    border-color: #8b5cf6;
}
}
.suggestions[data-v-a0488bb0] {
  position: absolute;
  left: 0;
  top: calc(100% + 10px);
  width: 100%;
  background: #1a1d29;
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  z-index: 9999;
  overflow: hidden;
  backdrop-filter: blur(20px);
  animation: slideDown-a0488bb0 0.2s ease;
}
@media (prefers-color-scheme: light) {
.suggestions[data-v-a0488bb0] {
    background: #ffffff;
    border-color: var(--border);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
}
@keyframes slideDown-a0488bb0 {
from {
    opacity: 0;
    transform: translateY(-10px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.suggestion-item[data-v-a0488bb0] {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 0.875rem;
  align-items: center;
  padding: 0.875rem 1rem;
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #e5e7eb;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.2s ease;
  text-align: left;
}
.suggestion-item[data-v-a0488bb0]:last-child {
  border-bottom: none;
}
.suggestion-item[data-v-a0488bb0]:hover,
.suggestion-item.active[data-v-a0488bb0] {
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.15) 0%, rgba(124, 58, 237, 0.1) 100%);
  padding-left: 1.25rem;
}
@media (prefers-color-scheme: light) {
.suggestion-item[data-v-a0488bb0] {
    color: var(--text);
    border-bottom-color: var(--border);
}
.suggestion-item[data-v-a0488bb0]:hover,
  .suggestion-item.active[data-v-a0488bb0] {
    background: linear-gradient(90deg, rgba(109, 93, 246, 0.08) 0%, rgba(102, 126, 234, 0.05) 100%);
}
}
.suggestion-thumb[data-v-a0488bb0] {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid rgba(139, 92, 246, 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
@media (prefers-color-scheme: light) {
.suggestion-thumb[data-v-a0488bb0] {
    border-color: var(--border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
}
.suggestion-name[data-v-a0488bb0] {
  font-weight: 600;
  font-size: 0.95rem;
}
.suggestion-sku[data-v-a0488bb0] {
  color: #9ca3af;
  font-size: 0.875rem;
}
@media (prefers-color-scheme: light) {
.suggestion-sku[data-v-a0488bb0] {
    color: var(--muted);
}
}
input[type="text"][data-v-a0488bb0],
input[type="search"][data-v-a0488bb0],
select[data-v-a0488bb0] {
  border: 2px solid rgba(198, 146, 61, 0.15);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  background: var(--surface);
  color: var(--text);
  outline: none;
  font-weight: 500;
  transition: all 0.3s ease;
  color-scheme: dark;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
input[type="text"][data-v-a0488bb0]:hover,
input[type="search"][data-v-a0488bb0]:hover,
select[data-v-a0488bb0]:hover {
  border-color: rgba(198, 146, 61, 0.3);
  box-shadow: 0 4px 8px rgba(198, 146, 61, 0.1);
}
input[type="text"][data-v-a0488bb0]:focus,
input[type="search"][data-v-a0488bb0]:focus,
select[data-v-a0488bb0]:focus {
  box-shadow: 0 0 0 4px rgba(198, 146, 61, 0.15), 0 4px 12px rgba(198, 146, 61, 0.2);
  border-color: #C6923D;
  transform: translateY(-1px);
}
@media (prefers-color-scheme: dark) {
input[type="text"][data-v-a0488bb0],
  input[type="search"][data-v-a0488bb0],
  select[data-v-a0488bb0] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(198, 146, 61, 0.25);
}
}

/* Mejorar visibilidad del menú desplegable en modo oscuro */
@media (prefers-color-scheme: dark) {
.role-select[data-v-a0488bb0] {
    background-color: #0f172a;
    /* gris muy oscuro */
    border-color: #334155;
    /* contorno tenue */
    color: #e5e7eb;
    /* texto claro */
    background-image: linear-gradient(45deg, transparent 50%, #94a3b8 50%),
      linear-gradient(135deg, #94a3b8 50%, transparent 50%);
    background-position: calc(100% - 18px) calc(50% - 2px),
      calc(100% - 12px) calc(50% - 2px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}
.role-select option[data-v-a0488bb0],
  .role-select optgroup[data-v-a0488bb0] {
    background-color: #0f172a;
    color: #e5e7eb;
}
.role-select option[data-v-a0488bb0]:hover,
  .role-select option[data-v-a0488bb0]:checked {
    background-color: #1f2937;
    /* hover/selected */
    color: #ffffff;
}
}

/* Toggle switch moderno */
.switch[data-v-a0488bb0] {
  appearance: none;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  border: 2px solid var(--border);
  background: rgba(0, 0, 0, 0.1);
  position: relative;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}
.switch[data-v-a0488bb0]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(198, 146, 61, 0.2);
  border-color: #C6923D;
}
.switch[data-v-a0488bb0]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.switch[data-v-a0488bb0]:checked {
  background: linear-gradient(135deg, #10b981, #059669);
  border-color: #10b981;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}
.switch[data-v-a0488bb0]:checked::after {
  transform: translateX(20px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
.switch[data-v-a0488bb0]:hover {
  border-color: rgba(198, 146, 61, 0.4);
}
.switch[data-v-a0488bb0]:checked:hover {
  border-color: #10b981;
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
}
@media (prefers-color-scheme: dark) {
.switch[data-v-a0488bb0] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
}
}

/* Tipografía más compacta en el card derecho */
.grid>.card:nth-child(2) h2[data-v-a0488bb0] {
  font-size: 1.05rem;
}
.grid>.card:nth-child(2) .perm-label span[data-v-a0488bb0] {
  font-size: 0.9rem;
}
.grid>.card:nth-child(2) .small[data-v-a0488bb0] {
  font-size: 0.8rem;
}
.grid>.card[data-v-a0488bb0]:nth-child(2) {
  max-width: 460px;
}

/* Responsivo: en pantallas medianas apilar y evitar solapamientos */
@media (max-width: 1280px) {
.grid[data-v-a0488bb0] {
    grid-template-columns: 1fr;
    gap: 1.2rem;
}
.grid>.card[data-v-a0488bb0]:nth-child(1),
  .grid>.card[data-v-a0488bb0]:nth-child(2) {
    z-index: auto;
}
.card-head[data-v-a0488bb0] {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.5rem;
}
.search-wrap[data-v-a0488bb0] {
    width: 100%;
    max-width: none;
    flex: 1 1 auto;
}
}
@media (max-width: 1200px) {
.grid[data-v-a0488bb0] {
    grid-template-columns: 1fr;
}
}
@media (max-width: 1100px) {
.perm-list[data-v-a0488bb0] {
    grid-template-columns: 1fr;
}
}

/* Modal moderno con animaciones */
.modal-overlay[data-v-a0488bb0] {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  z-index: 99999;
  padding: 1rem;
  animation: fadeIn-a0488bb0 0.3s ease-out;
}
@keyframes fadeIn-a0488bb0 {
from { opacity: 0;
}
to { opacity: 1;
}
}
.modal[data-v-a0488bb0] {
  width: 100%;
  max-width: 680px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 2px solid rgba(198, 146, 61, 0.1);
  border-radius: 24px;
  box-shadow: 0 25px 80px rgba(198, 146, 61, 0.25), 0 0 1px rgba(0, 0, 0, 0.1);
  display: grid;
  gap: 0;
  padding: 0;
  max-height: 90vh;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  animation: slideUp-a0488bb0 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes slideUp-a0488bb0 {
from { opacity: 0; transform: translateY(40px) scale(0.95);
}
to { opacity: 1; transform: translateY(0) scale(1);
}
}
@media (prefers-color-scheme: dark) {
.modal[data-v-a0488bb0] {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border: 2px solid rgba(198, 146, 61, 0.3);
}
}
.modal-head[data-v-a0488bb0] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rem 2rem 1.5rem 2rem;
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, #C6923D, #DFC05E, #C6923D);
  border-image-slice: 1;
  background: linear-gradient(135deg, rgba(198, 146, 61, 0.08), rgba(223, 192, 94, 0.08));
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 10;
}
@media (prefers-color-scheme: dark) {
.modal-head[data-v-a0488bb0] {
    background: linear-gradient(135deg, rgba(198, 146, 61, 0.15), rgba(223, 192, 94, 0.15));
}
}
.modal-head h3[data-v-a0488bb0] {
  margin: 0;
  background: linear-gradient(135deg, #C6923D, #DFC05E);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.modal-head h3[data-v-a0488bb0]::before {
  content: '👤';
  font-size: 2rem;
}
.form-grid[data-v-a0488bb0] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 1.5rem;
  overflow-y: auto;
  padding: 2rem;
  overscroll-behavior: contain;
}
.form-grid label[data-v-a0488bb0] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.form-grid .label[data-v-a0488bb0] {
  font-size: 0.9rem;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 0.25rem;
}
@media (prefers-color-scheme: dark) {
.form-grid .label[data-v-a0488bb0] {
    color: #94a3b8;
}
}
.form-grid input[type="text"][data-v-a0488bb0] {
  padding: 0.875rem 1.25rem;
  border: 2px solid rgba(198, 146, 61, 0.15);
  border-radius: 12px;
  background: white;
  color: #1e293b;
  font-size: 1rem;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
@media (prefers-color-scheme: dark) {
.form-grid input[type="text"][data-v-a0488bb0] {
    background: rgba(255, 255, 255, 0.08);
    color: #f1f5f9;
    border-color: rgba(198, 146, 61, 0.25);
}
}
.form-grid input[type="text"][data-v-a0488bb0]:hover {
  border-color: rgba(198, 146, 61, 0.3);
  box-shadow: 0 4px 8px rgba(198, 146, 61, 0.1);
}
.form-grid input[type="text"][data-v-a0488bb0]:focus {
  outline: none;
  border-color: #C6923D;
  box-shadow: 0 0 0 4px rgba(198, 146, 61, 0.15), 0 4px 12px rgba(198, 146, 61, 0.2);
  transform: translateY(-1px);
}
.toggle-line[data-v-a0488bb0] {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  grid-column: 1 / -1;
  padding: 1rem;
  background: rgba(198, 146, 61, 0.04);
  border-radius: 12px;
  border: 2px solid rgba(198, 146, 61, 0.1);
}
.toggle-line .label[data-v-a0488bb0] {
  font-weight: 600;
  color: var(--text);
  text-transform: none;
}
.modal-actions[data-v-a0488bb0] {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  padding: 1.5rem 2rem;
  background: linear-gradient(135deg, rgba(198, 146, 61, 0.05), rgba(223, 192, 94, 0.05));
  border-radius: 0 0 22px 22px;
  position: sticky;
  bottom: 0;
  backdrop-filter: blur(10px);
  z-index: 10;
}
@media (prefers-color-scheme: dark) {
.modal-actions[data-v-a0488bb0] {
    background: linear-gradient(135deg, rgba(198, 146, 61, 0.1), rgba(223, 192, 94, 0.1));
}
}
.icon-btn[data-v-a0488bb0] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.3s;
}
.icon-btn[data-v-a0488bb0]:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  transform: scale(1.1);
}

/* Responsive del formulario de edición */
@media (max-width: 800px) {
.modal[data-v-a0488bb0] {
    max-width: 96vw;
    max-height: 95vh;
}
.modal-head[data-v-a0488bb0] {
    padding: 1.5rem 1rem;
}
.modal-head h3[data-v-a0488bb0] {
    font-size: 1.5rem;
}
.form-grid[data-v-a0488bb0] {
    grid-template-columns: 1fr;
    padding: 1.5rem 1rem;
}
.modal-actions[data-v-a0488bb0] {
    padding: 1rem;
    flex-wrap: wrap;
}
.btn[data-v-a0488bb0] {
    width: 100%;
    min-width: auto;
}
}
@media (max-width: 768px) {
.users-wrap[data-v-a0488bb0] {
    padding: 1rem;
}
.title[data-v-a0488bb0] {
    font-size: 1.75rem;
}
.card[data-v-a0488bb0] {
    padding: 1rem;
}
.search-wrap[data-v-a0488bb0] {
    min-width: 100%;
    max-width: 100%;
}
}

/* Modal Backdrop con animación */
.modal-backdrop[data-v-3edde1b7] {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  z-index: 99999;
  padding: 1rem;
  animation: fadeIn-3edde1b7 0.3s ease-out;
}
@keyframes fadeIn-3edde1b7 {
from { opacity: 0;
}
to { opacity: 1;
}
}

/* Modal Container con animación de entrada */
.modal[data-v-3edde1b7] {
  width: min(900px, 94vw);
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  color: #1c2027;
  border-radius: 24px;
  box-shadow: 0 25px 80px rgba(124, 92, 255, 0.25), 0 0 1px rgba(0, 0, 0, 0.1);
  border: 2px solid rgba(124, 92, 255, 0.1);
  display: grid;
  grid-template-rows: auto 1fr auto;
  max-height: 90vh;
  overflow: hidden;
  animation: slideUp-3edde1b7 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes slideUp-3edde1b7 {
from { opacity: 0; transform: translateY(40px) scale(0.95);
}
to { opacity: 1; transform: translateY(0) scale(1);
}
}

/* Dark mode para el modal */
@media (prefers-color-scheme: dark) {
.modal[data-v-3edde1b7] {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border: 2px solid rgba(124, 92, 255, 0.3);
    color: var(--text);
}
}

/* Header moderno con gradiente */
.modal-header[data-v-3edde1b7] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rem 2rem 1.5rem 2rem;
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, #7c5cff, #2563eb, #7c5cff);
  border-image-slice: 1;
  position: sticky;
  top: 0;
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.08), rgba(37, 99, 235, 0.08));
  backdrop-filter: blur(10px);
  z-index: 10;
}
@media (prefers-color-scheme: dark) {
.modal-header[data-v-3edde1b7] {
    background: linear-gradient(135deg, rgba(124, 92, 255, 0.15), rgba(37, 99, 235, 0.15));
}
}
.modal-header h2[data-v-3edde1b7] {
  margin: 0;
  background: linear-gradient(135deg, #7c5cff, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.modal-header h2[data-v-3edde1b7]::before {
  content: '📦';
  font-size: 2rem;
}
.close[data-v-3edde1b7] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.3s;
  line-height: 1;
}
.close[data-v-3edde1b7]:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  transform: scale(1.1);
}

/* Body con scroll suave */
.modal-body[data-v-3edde1b7] {
  padding: 2rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: transparent;
}

/* Error mejorado */
.error[data-v-3edde1b7] {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.error[data-v-3edde1b7]::before {
  content: '⚠️';
  font-size: 1.25rem;
}

/* Grid mejorado */
.grid[data-v-3edde1b7] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1.5rem;
}
.grid label[data-v-3edde1b7] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
@media (prefers-color-scheme: dark) {
.grid label[data-v-3edde1b7] {
    color: #94a3b8;
}
}

/* Inputs modernos */
.grid input[data-v-3edde1b7],
.grid select[data-v-3edde1b7],
.grid textarea[data-v-3edde1b7] {
  padding: 0.875rem 1.25rem;
  border: 2px solid rgba(124, 92, 255, 0.15);
  border-radius: 12px;
  background: white;
  color: #1e293b;
  font-size: 1rem;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
@media (prefers-color-scheme: dark) {
.grid input[data-v-3edde1b7],
  .grid select[data-v-3edde1b7],
  .grid textarea[data-v-3edde1b7] {
    background: rgba(255, 255, 255, 0.08);
    color: #f1f5f9;
    border-color: rgba(124, 92, 255, 0.25);
}
}
.grid input[data-v-3edde1b7]:hover,
.grid select[data-v-3edde1b7]:hover,
.grid textarea[data-v-3edde1b7]:hover {
  border-color: rgba(124, 92, 255, 0.3);
  box-shadow: 0 4px 8px rgba(124, 92, 255, 0.1);
}
.grid input[data-v-3edde1b7]:focus,
.grid select[data-v-3edde1b7]:focus,
.grid textarea[data-v-3edde1b7]:focus {
  outline: none;
  border-color: #7c5cff;
  box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.15), 0 4px 12px rgba(124, 92, 255, 0.2);
  transform: translateY(-1px);
}
.grid input[data-v-3edde1b7]::placeholder,
.grid textarea[data-v-3edde1b7]::placeholder {
  color: #94a3b8;
  font-weight: 400;
}

/* Span columns */
.span-2[data-v-3edde1b7] {
  grid-column: 1 / span 2;
}
.row-2.span-2[data-v-3edde1b7] {
  grid-column: 1 / span 2;
}
.row-2[data-v-3edde1b7] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
}

/* Image section mejorada */
.image-row[data-v-3edde1b7] {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75rem;
  align-items: center;
  margin-top: 0.5rem;
}
.image-row input[type="file"][data-v-3edde1b7] {
  padding: 0.75rem;
  border: 2px dashed rgba(124, 92, 255, 0.3);
  border-radius: 12px;
  background: rgba(124, 92, 255, 0.05);
  cursor: pointer;
  transition: all 0.3s ease;
}
.image-row input[type="file"][data-v-3edde1b7]:hover {
  border-color: rgba(124, 92, 255, 0.5);
  background: rgba(124, 92, 255, 0.08);
}
.image-preview[data-v-3edde1b7] {
  margin-top: 1rem;
  border: 2px solid rgba(124, 92, 255, 0.2);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(124, 92, 255, 0.03);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}
.image-preview[data-v-3edde1b7]:hover {
  border-color: rgba(124, 92, 255, 0.4);
  box-shadow: 0 8px 24px rgba(124, 92, 255, 0.15);
}
.image-preview img[data-v-3edde1b7] {
  display: block;
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.image-preview:hover img[data-v-3edde1b7] {
  transform: scale(1.05);
}

/* Small hint text */
small.hint[data-v-3edde1b7] {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 400;
  margin-top: 0.25rem;
  font-style: italic;
}

/* Footer moderno */
.modal-footer[data-v-3edde1b7] {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  padding: 1.5rem 2rem;
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.05), rgba(37, 99, 235, 0.05));
  border-radius: 0 0 22px 22px;
  backdrop-filter: blur(10px);
  z-index: 10;
}
@media (prefers-color-scheme: dark) {
.modal-footer[data-v-3edde1b7] {
    background: linear-gradient(135deg, rgba(124, 92, 255, 0.1), rgba(37, 99, 235, 0.1));
}
}

/* Botones modernos */
.btn[data-v-3edde1b7] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  border: none;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  min-width: 140px;
  justify-content: center;
}
.btn[data-v-3edde1b7]:not(.secondary) {
  background: linear-gradient(135deg, #7c5cff, #2563eb);
  color: white;
  box-shadow: 0 4px 16px rgba(124, 92, 255, 0.3);
  position: relative;
  overflow: hidden;
}
.btn[data-v-3edde1b7]:not(.secondary)::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}
.btn[data-v-3edde1b7]:not(.secondary):hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(124, 92, 255, 0.4);
}
.btn[data-v-3edde1b7]:not(.secondary):hover::before {
  left: 100%;
}
.btn[data-v-3edde1b7]:not(.secondary):active {
  transform: translateY(0);
}
.btn[data-v-3edde1b7]:not(.secondary):disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}
.btn.secondary[data-v-3edde1b7] {
  background: var(--surface);
  color: var(--text);
  border: 2px solid var(--border);
  box-shadow: none;
}
.btn.secondary[data-v-3edde1b7]:hover {
  background: rgba(124, 92, 255, 0.08);
  border-color: #7c5cff;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* Loading overlay mejorado */
.loading-overlay[data-v-3edde1b7] {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  backdrop-filter: blur(8px);
  background: rgba(0, 0, 0, 0.3);
  font-weight: 700;
  color: white;
  font-size: 1.1rem;
  z-index: 100;
  animation: fadeIn-3edde1b7 0.3s ease;
}
.loading-overlay[data-v-3edde1b7]::before {
  content: '⏳';
  font-size: 2rem;
  margin-right: 0.5rem;
}

/* Barcode preview (si se reactiva) */
.barcode-preview[data-v-3edde1b7] {
  margin-top: 0.75rem;
  border: 2px dashed rgba(124, 92, 255, 0.3);
  border-radius: 12px;
  background: rgba(124, 92, 255, 0.03);
  padding: 1rem;
  display: grid;
  place-items: center;
}

/* Responsivo */
@media (max-width: 720px) {
.modal[data-v-3edde1b7] {
    width: 96vw;
    max-height: 95vh;
}
.modal-header[data-v-3edde1b7] {
    padding: 1.5rem 1rem;
}
.modal-header h2[data-v-3edde1b7] {
    font-size: 1.5rem;
}
.modal-body[data-v-3edde1b7] {
    padding: 1.5rem 1rem;
}
.grid[data-v-3edde1b7] {
    grid-template-columns: 1fr;
    gap: 1rem;
}
.span-2[data-v-3edde1b7] {
    grid-column: auto;
}
.row-2[data-v-3edde1b7] {
    grid-template-columns: 1fr;
}
.modal-footer[data-v-3edde1b7] {
    flex-wrap: wrap;
    padding: 1rem;
}
.btn[data-v-3edde1b7] {
    width: 100%;
    min-width: auto;
}
}

.layout[data-v-cf4e375a] {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 1.5rem;
  padding: 1.5rem;
  max-width: 1920px;
  margin: 0 auto;
  background: linear-gradient(135deg, #0a0b14 0%, #1a1610 100%);
  min-height: 100vh;
}
.panel-left[data-v-cf4e375a],
.panel-right[data-v-cf4e375a] {
  display: grid;
  align-content: start;
  gap: 1.25rem;
}

/* Header */
.page-header[data-v-cf4e375a] {
  margin-bottom: 0.5rem;
}
.page-title-main[data-v-cf4e375a] {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 0.25rem 0;
  letter-spacing: -0.5px;
}
.page-subtitle[data-v-cf4e375a] {
  font-size: 1rem;
  color: var(--muted);
  margin: 0;
}

/* Tarjetas de estadísticas */
.stats-grid[data-v-cf4e375a] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-bottom: 0.5rem;
}
.stat-card[data-v-cf4e375a] {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.75rem 1.5rem;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: default;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.stat-card[data-v-cf4e375a]::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  opacity: 0.15;
  transition: transform 0.3s ease;
}
.stat-card[data-v-cf4e375a]:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}
.stat-card[data-v-cf4e375a]:hover::before {
  transform: scale(1.2);
}
.stat-orange[data-v-cf4e375a] {
  background: linear-gradient(135deg, #FF9A3D 0%, #FF6B3D 100%);
}
.stat-orange[data-v-cf4e375a]::before {
  background: #fff;
  top: -40px;
  right: -40px;
}
.stat-blue[data-v-cf4e375a] {
  background: linear-gradient(135deg, #C6923D 0%, #DFC05E 100%);
}
.stat-blue[data-v-cf4e375a]::before {
  background: #fff;
  top: -40px;
  right: -40px;
}
.stat-green[data-v-cf4e375a] {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}
.stat-green[data-v-cf4e375a]::before {
  background: #fff;
  top: -40px;
  right: -40px;
}
.stat-purple[data-v-cf4e375a] {
  background: linear-gradient(135deg, #C6923D 0%, #C6923D 100%);
}
.stat-purple[data-v-cf4e375a]::before {
  background: #fff;
  top: -40px;
  right: -40px;
}
.stat-icon[data-v-cf4e375a] {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  flex-shrink: 0;
}
.stat-icon .material-symbols-rounded[data-v-cf4e375a] {
  font-size: 32px;
  color: #ffffff;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}
.stat-content[data-v-cf4e375a] {
  flex: 1;
  color: #ffffff;
}
.stat-label[data-v-cf4e375a] {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  opacity: 0.95;
  margin-bottom: 0.5rem;
}
.stat-value[data-v-cf4e375a] {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.5px;
}

/* Toolbar */
.toolbar[data-v-cf4e375a] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1rem 1.25rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  backdrop-filter: blur(8px);
  position: relative;
  z-index: 100;
}
.toolbar-search[data-v-cf4e375a] {
  flex: 0 1 auto;
  max-width: 400px;
  min-width: 280px;
}
.toolbar-actions[data-v-cf4e375a] {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
/* Search Input */
.input-wrap[data-v-cf4e375a] {
  position: relative;
  width: 100%;
  z-index: 100;
}
.input-icon[data-v-cf4e375a] {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 22px;
  pointer-events: none;
  z-index: 1;
}
.search[data-v-cf4e375a] {
  width: 100%;
  padding: 0.875rem 3rem 0.875rem 3.25rem;
  border-radius: 14px;
  border: 2px solid transparent;
  background: rgba(223, 192, 94, 0.04);
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 500;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.search[data-v-cf4e375a]::placeholder {
  color: var(--muted);
  font-weight: 400;
}
.search[data-v-cf4e375a]:hover {
  background: rgba(223, 192, 94, 0.06);
}
.search[data-v-cf4e375a]:focus {
  outline: none;
  border-color: #667eea;
  background: var(--surface);
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}
.clear-btn[data-v-cf4e375a] {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: none;
  background: rgba(223, 192, 94, 0.08);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 1;
}
.clear-btn[data-v-cf4e375a]:hover {
  background: rgba(223, 192, 94, 0.15);
  color: var(--accent);
  transform: translateY(-50%) scale(1.05);
}
/* Suggestions Dropdown */
.suggestions[data-v-cf4e375a] {
  position: absolute;
  left: 0;
  top: calc(100% + 10px);
  width: 100%;
  background: #1a1d29;
  border: 1px solid rgba(198, 146, 61, 0.3);
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  z-index: 9999;
  overflow: hidden;
  backdrop-filter: blur(20px);
  animation: slideDown-cf4e375a 0.2s ease;
}
@media (prefers-color-scheme: light) {
.suggestions[data-v-cf4e375a] {
    background: #ffffff;
    border-color: var(--border);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
}
@keyframes slideDown-cf4e375a {
from {
    opacity: 0;
    transform: translateY(-10px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.suggestion-item[data-v-cf4e375a] {
  display: grid;
  grid-template-columns: 42px 1fr auto auto;
  gap: 0.875rem;
  align-items: center;
  padding: 0.875rem 1rem;
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #e5e7eb;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.2s ease;
  text-align: left;
}
.suggestion-item[data-v-cf4e375a]:last-child {
  border-bottom: none;
}
.suggestion-item[data-v-cf4e375a]:hover,
.suggestion-item.active[data-v-cf4e375a] {
  background: linear-gradient(90deg, rgba(198, 146, 61, 0.15) 0%, rgba(124, 58, 237, 0.1) 100%);
  padding-left: 1.25rem;
}
@media (prefers-color-scheme: light) {
.suggestion-item[data-v-cf4e375a] {
    color: var(--text);
    border-bottom-color: var(--border);
}
.suggestion-item[data-v-cf4e375a]:hover,
  .suggestion-item.active[data-v-cf4e375a] {
    background: linear-gradient(90deg, rgba(223, 192, 94, 0.08) 0%, rgba(102, 126, 234, 0.05) 100%);
}
}
.suggestion-thumb[data-v-cf4e375a] {
  width: 42px;
  height: 42px;
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
  border: 2px solid rgba(198, 146, 61, 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
  display: block;
}
@media (prefers-color-scheme: light) {
.suggestion-thumb[data-v-cf4e375a] {
    border-color: var(--border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
}
.suggestion-name[data-v-cf4e375a] {
  font-weight: 600;
  font-size: 0.95rem;
}
.suggestion-sku[data-v-cf4e375a] {
  color: #9ca3af;
  font-size: 0.875rem;
}
@media (prefers-color-scheme: light) {
.suggestion-sku[data-v-cf4e375a] {
    color: var(--muted);
}
}
.suggestion-price[data-v-cf4e375a] {
  font-weight: 700;
  font-size: 0.95rem;
  color: #10b981;
}

/* Botones */
.btn-primary[data-v-cf4e375a] {
  padding: 0.875rem 1.5rem;
  border-radius: 14px;
  background: linear-gradient(135deg, #C6923D 0%, #DFC05E 100%);
  border: none;
  color: #ffffff;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: 0 4px 16px rgba(198, 146, 61, 0.3);
  position: relative;
  overflow: hidden;
}
.btn-primary[data-v-cf4e375a]::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}
.btn-primary[data-v-cf4e375a]:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(198, 146, 61, 0.4);
}
.btn-primary[data-v-cf4e375a]:hover::before {
  left: 100%;
}
.btn-primary[data-v-cf4e375a]:active {
  transform: translateY(0);
}
.btn-primary[data-v-cf4e375a]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}
.btn-secondary[data-v-cf4e375a] {
  padding: 0.875rem 1.5rem;
  border-radius: 14px;
  background: var(--surface);
  border: 2px solid var(--border);
  color: var(--text);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.btn-secondary[data-v-cf4e375a]:hover {
  background: rgba(223, 192, 94, 0.08);
  border-color: #667eea;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* Card Container */
.card[data-v-cf4e375a] {
  background: var(--surface);
  color: var(--text);
  border-radius: 20px;
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  backdrop-filter: blur(10px);
  position: relative;
  z-index: 1;
}
@media (prefers-color-scheme: dark) {
.card[data-v-cf4e375a] {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}
}

/* Table */
.table-scroll[data-v-cf4e375a] {
  width: 100%;
  overflow-x: auto;
  position: relative;
}
.list[data-v-cf4e375a] {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.list thead tr[data-v-cf4e375a] {
  border-left: 4px solid transparent;
}
.list thead th[data-v-cf4e375a] {
  text-align: left;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 1rem 1.25rem;
  color: var(--muted);
  background: var(--surface);
  border-bottom: 2px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 5;
  backdrop-filter: blur(10px);
}
.list tbody td[data-v-cf4e375a] {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.list tbody tr[data-v-cf4e375a] {
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
  border-left: 4px solid transparent;
}
.list tbody tr[data-v-cf4e375a]:hover {
  background: rgba(198, 146, 61, 0.04);
  border-left-color: #C6923D;
}
.list tbody tr.selected[data-v-cf4e375a] {
  background: rgba(198, 146, 61, 0.08);
  border-left-color: #C6923D;
}
/* Table Cells */
.thumb-col[data-v-cf4e375a] {
  width: 80px;
}
.thumb[data-v-cf4e375a] {
  width: 56px;
  height: 56px;
  object-fit: cover;
  object-position: center;
  border-radius: 12px;
  border: 2px solid var(--border);
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease;
  display: block;
}
.thumb[data-v-cf4e375a]:hover {
  transform: scale(1.05);
  z-index: 10;
}
.thumb.placeholder[data-v-cf4e375a] {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  border: 2px dashed var(--border);
  color: var(--muted);
  background: rgba(223, 192, 94, 0.04);
  font-size: 1.5rem;
}
.name[data-v-cf4e375a] {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
}
.company[data-v-cf4e375a] {
  color: var(--muted);
  font-size: 0.9rem;
}
.qty[data-v-cf4e375a],
.reorder[data-v-cf4e375a] {
  text-align: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.price[data-v-cf4e375a] {
  text-align: right;
  font-weight: 700;
  font-size: 1rem;
  color: #10b981;
  font-variant-numeric: tabular-nums;
}
.empty[data-v-cf4e375a] {
  text-align: center;
  color: var(--muted);
  padding: 3rem 1rem;
  font-size: 0.95rem;
}

/* Action Buttons */
.actions-col[data-v-cf4e375a] {
  text-align: right;
}
.row-actions[data-v-cf4e375a] {
  display: inline-flex;
  gap: 0.5rem;
  justify-content: flex-end;
}
.act-btn[data-v-cf4e375a] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 10px;
  border: none;
  background: rgba(223, 192, 94, 0.08);
  color: var(--accent);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.act-btn .material-symbols-rounded[data-v-cf4e375a] {
  font-size: 20px;
}
.act-btn[data-v-cf4e375a]:hover {
  background: rgba(223, 192, 94, 0.15);
  transform: scale(1.08);
}
.act-btn.warn[data-v-cf4e375a] {
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
}
.act-btn.warn[data-v-cf4e375a]:hover {
  background: rgba(239, 68, 68, 0.15);
}
.act-btn[data-v-cf4e375a]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
}
@media (prefers-color-scheme: dark) {
.act-btn[data-v-cf4e375a] {
    background: rgba(198, 146, 61, 0.12);
}
.act-btn.warn[data-v-cf4e375a] {
    background: rgba(239, 68, 68, 0.12);
}
}

/* Panel de Detalles */
.detail[data-v-cf4e375a] {
  padding: 1.5rem;
  display: grid;
  gap: 1rem;
}
.detail-title[data-v-cf4e375a] {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--text);
}
.detail-image[data-v-cf4e375a] {
  border: 2px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(223, 192, 94, 0.03);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.detail-image img[data-v-cf4e375a] {
  width: 100%;
  max-height: 280px;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.detail-image:hover img[data-v-cf4e375a] {
  transform: scale(1.05);
}
.thumbs[data-v-cf4e375a] {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.625rem;
  margin: 0.5rem 0;
}
.thumb-mini[data-v-cf4e375a] {
  width: 100%;
  height: 70px;
  object-fit: cover;
  border-radius: 12px;
  border: 2px solid var(--border);
  background: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
}
.thumb-mini[data-v-cf4e375a]:hover {
  border-color: #C6923D;
  transform: scale(1.05);
}
.chips[data-v-cf4e375a] {
  display: flex;
  gap: 0.625rem;
  flex-wrap: wrap;
}
.chip[data-v-cf4e375a] {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border-radius: 12px;
  background: rgba(198, 146, 61, 0.1);
  border: 2px solid rgba(198, 146, 61, 0.2);
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 600;
  transition: all 0.2s ease;
}
.chip[data-v-cf4e375a]:hover {
  background: rgba(198, 146, 61, 0.15);
  border-color: rgba(198, 146, 61, 0.3);
  transform: translateY(-1px);
}
.chip.success[data-v-cf4e375a] {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.3);
  color: #10b981;
}
.chip.success[data-v-cf4e375a]:hover {
  background: rgba(16, 185, 129, 0.15);
}
.chip.price[data-v-cf4e375a] {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  border-color: #f59e0b;
  color: #ffffff;
  font-weight: 700;
}
.chip.price[data-v-cf4e375a]:hover {
  box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);
}
/* Secciones del panel de detalles */
.section[data-v-cf4e375a] {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.section[data-v-cf4e375a]:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.section-head[data-v-cf4e375a] {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
  margin-bottom: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.small[data-v-cf4e375a] {
  font-size: 0.85em;
  font-weight: 500;
}
.chip-row[data-v-cf4e375a] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}
.chip-btn[data-v-cf4e375a] {
  padding: 0.5rem 1rem;
  border-radius: 10px;
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.chip-btn[data-v-cf4e375a]:hover {
  background: rgba(198, 146, 61, 0.08);
  border-color: #C6923D;
  transform: translateY(-1px);
}
.desc-list[data-v-cf4e375a] {
  padding-left: 1.25rem;
  color: var(--text);
  line-height: 1.8;
}
.desc-list li[data-v-cf4e375a] {
  margin: 0.5rem 0;
  font-size: 0.95rem;
}
.shipping-grid[data-v-cf4e375a] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.ship-item[data-v-cf4e375a] {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem;
  border: 2px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  transition: all 0.2s ease;
}
.ship-item[data-v-cf4e375a]:hover {
  background: rgba(198, 146, 61, 0.04);
  border-color: #C6923D;
  transform: translateY(-2px);
}
.ship-item .material-symbols-rounded[data-v-cf4e375a] {
  color: #C6923D;
  font-size: 24px;
}
.reviews[data-v-cf4e375a] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.875rem;
}
.review-card[data-v-cf4e375a] {
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 1rem;
  background: var(--surface);
  transition: all 0.2s ease;
}
.review-card[data-v-cf4e375a]:hover {
  background: rgba(198, 146, 61, 0.04);
  border-color: #C6923D;
  transform: translateY(-2px);
}
.review-head[data-v-cf4e375a] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: space-between;
  margin-bottom: 0.625rem;
}
.review-head b[data-v-cf4e375a] {
  font-weight: 600;
  font-size: 0.95rem;
}
.stars[data-v-cf4e375a] {
  color: #fbbf24;
  font-size: 1rem;
}
.detail-grid[data-v-cf4e375a] {
  margin-top: 1.25rem;
  display: grid;
  gap: 0.5rem;
  padding: 1rem;
  background: rgba(198, 146, 61, 0.04);
  border-radius: 14px;
  border: 2px solid var(--border);
}
.detail-row[data-v-cf4e375a] {
  display: flex;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
}
.detail-row[data-v-cf4e375a]:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.detail-row span[data-v-cf4e375a] {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 500;
}
.detail-row b[data-v-cf4e375a] {
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
}
.muted[data-v-cf4e375a] {
  color: var(--muted);
  line-height: 1.6;
}

/* Mejoras de contraste en modo oscuro */
@media (prefers-color-scheme: dark) {
.search[data-v-cf4e375a] {
    background: rgba(198, 146, 61, 0.08);
    border-color: rgba(198, 146, 61, 0.15);
    color: #e5e7eb;
}
.search[data-v-cf4e375a]:hover {
    background: rgba(198, 146, 61, 0.12);
}
.search[data-v-cf4e375a]:focus {
    background: rgba(255, 255, 255, 0.06);
    border-color: #C6923D;
}
.list thead th[data-v-cf4e375a] {
    background: rgba(255, 255, 255, 0.04);
    color: var(--muted);
}
.chip-btn[data-v-cf4e375a],
  .ship-item[data-v-cf4e375a],
  .review-card[data-v-cf4e375a] {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    color: #e5e7eb;
}
.chip.price[data-v-cf4e375a] {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    border-color: #f59e0b;
    color: #ffffff;
}
.detail-grid[data-v-cf4e375a] {
    background: rgba(198, 146, 61, 0.08);
}
}

/* Badges y Estados */
.badge[data-v-cf4e375a] {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  margin-left: 0.5rem;
}
.badge.warn[data-v-cf4e375a] {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
  animation: pulse-cf4e375a 2s ease-in-out infinite;
}
@keyframes pulse-cf4e375a {
0%, 100% {
    opacity: 1;
}
50% {
    opacity: 0.85;
}
}
.error[data-v-cf4e375a] {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  font-weight: 500;
}

/* Barcode */
.barcode-mini[data-v-cf4e375a] {
  width: 100%;
  max-width: 140px;
  height: 42px;
  display: block;
  margin: 0 auto;
}

/* Paginación */
.pagination[data-v-cf4e375a] {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 0;
}
.pager-btn[data-v-cf4e375a] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 12px;
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s ease;
}
.pager-btn[data-v-cf4e375a]:hover:not(:disabled) {
  background: rgba(198, 146, 61, 0.08);
  border-color: #C6923D;
  transform: scale(1.05);
}
.pager-btn[data-v-cf4e375a]:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.pager-info[data-v-cf4e375a] {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
  padding: 0 0.5rem;
  min-width: 120px;
  text-align: center;
}
/* Responsivo */
@media (max-width: 1400px) {
.layout[data-v-cf4e375a] {
    grid-template-columns: 1fr;
}
.panel-right[data-v-cf4e375a] {
    order: -1;
}
}
@media (max-width: 1024px) {
.layout[data-v-cf4e375a] {
    padding: 1rem;
    gap: 1rem;
}
.page-title-main[data-v-cf4e375a] {
    font-size: 1.75rem;
}
.stats-grid[data-v-cf4e375a] {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
.stat-card[data-v-cf4e375a] {
    padding: 1.5rem 1.25rem;
}
.stat-value[data-v-cf4e375a] {
    font-size: 1.75rem;
}
.toolbar[data-v-cf4e375a] {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
}
.toolbar-search[data-v-cf4e375a] {
    max-width: 100%;
}
.toolbar-actions[data-v-cf4e375a] {
    width: 100%;
    justify-content: stretch;
}
.btn-primary[data-v-cf4e375a],
  .btn-secondary[data-v-cf4e375a] {
    flex: 1;
}
.shipping-grid[data-v-cf4e375a] {
    grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.layout[data-v-cf4e375a] {
    padding: 0.75rem;
}
.page-title-main[data-v-cf4e375a] {
    font-size: 1.5rem;
}
.page-subtitle[data-v-cf4e375a] {
    font-size: 0.9rem;
}
.stats-grid[data-v-cf4e375a] {
    grid-template-columns: 1fr;
}
.stat-card[data-v-cf4e375a] {
    padding: 1.25rem 1rem;
}
.stat-icon[data-v-cf4e375a] {
    width: 54px;
    height: 54px;
}
.stat-icon .material-symbols-rounded[data-v-cf4e375a] {
    font-size: 28px;
}
.stat-value[data-v-cf4e375a] {
    font-size: 1.5rem;
}
.toolbar[data-v-cf4e375a] {
    padding: 0.875rem;
}
.search[data-v-cf4e375a] {
    padding: 0.75rem 2.5rem 0.75rem 3rem;
    font-size: 0.9rem;
}
.btn-primary[data-v-cf4e375a],
  .btn-secondary[data-v-cf4e375a] {
    padding: 0.75rem 1.25rem;
    font-size: 0.9rem;
}
.list thead th[data-v-cf4e375a],
  .list tbody td[data-v-cf4e375a] {
    padding: 0.875rem 0.75rem;
    font-size: 0.875rem;
}
.thumb[data-v-cf4e375a],
  .thumb.placeholder[data-v-cf4e375a] {
    width: 42px;
    height: 42px;
}
.act-btn[data-v-cf4e375a] {
    width: 32px;
    height: 32px;
}
.act-btn .material-symbols-rounded[data-v-cf4e375a] {
    font-size: 18px;
}
.detail[data-v-cf4e375a] {
    padding: 1rem;
}
.detail-title[data-v-cf4e375a] {
    font-size: 1.1rem;
}
.thumbs[data-v-cf4e375a] {
    grid-template-columns: repeat(2, 1fr);
}
.reviews[data-v-cf4e375a] {
    grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.toolbar-actions[data-v-cf4e375a] {
    flex-direction: column;
}
.btn-primary span[data-v-cf4e375a]:not(.material-symbols-rounded),
  .btn-secondary span[data-v-cf4e375a]:not(.material-symbols-rounded) {
    display: none;
}
.btn-primary[data-v-cf4e375a],
  .btn-secondary[data-v-cf4e375a] {
    width: 100%;
    justify-content: center;
}
.table-scroll[data-v-cf4e375a] {
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
}
.list[data-v-cf4e375a] {
    min-width: 600px;
}
.stat-label[data-v-cf4e375a] {
    font-size: 0.7rem;
}
}

.overlay[data-v-9e231225] {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 10000;
}
.modal[data-v-9e231225] {
  position: fixed;
  inset: 40px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  display: grid;
  grid-template-rows: auto 1fr;
  z-index: 10001;
  overflow: hidden;
}
.top[data-v-9e231225] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem;
  border-bottom: 1px solid var(--panel-border);
}
.title[data-v-9e231225] {
  font-weight: 800;
}
.icon-btn[data-v-9e231225] {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 10px;
  padding: 0.35rem;
  color: var(--text);
}
.body[data-v-9e231225] {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem;
  align-items: start;
  overflow: auto;
  min-height: 0;
}
.left[data-v-9e231225] {
  display: grid;
  gap: 0.2rem;
  align-content: start;
  justify-items: start;
}
.main[data-v-9e231225] {
  display: block;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  height: auto;
  width: auto;
  max-width: 100%;
}
.main img[data-v-9e231225] {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}
.thumbs[data-v-9e231225] {
  display: grid;
  grid-auto-flow: column;
  gap: 0.25rem;
  overflow-x: auto;
  margin-top: 0;
  justify-content: start;
}
.thumb[data-v-9e231225] {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  display: inline-block;
}
.thumb img[data-v-9e231225] {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.right[data-v-9e231225] {
  display: grid;
  gap: 0.5rem;
  width: 100%; /* asegura que el contenido ocupe el ancho disponible */
}
.name[data-v-9e231225] {
  font-weight: 800;
  font-size: 1.1rem;
}
.price[data-v-9e231225] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 800;
  font-size: 1.15rem;
}
.price .old[data-v-9e231225] {
  text-decoration: line-through;
  color: var(--muted);
  font-weight: 600;
}
.price .new[data-v-9e231225] {
  font-size: 1.25rem;
}
.price .badge[data-v-9e231225] {
  background: #ef4444;
  color: #fff;
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
  font-size: 0.8rem;
}
.meta[data-v-9e231225] {
  color: var(--muted);
}
.low-stock-badge[data-v-9e231225] {
  margin-left: 0.4rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  background: #f59e0b; /* amber */
  color: #1c2027; /* mejor contraste en claro */
}
@media (prefers-color-scheme: dark) {
.low-stock-badge[data-v-9e231225] {
    color: #fff;
}
}
.desc .label[data-v-9e231225] {
  font-weight: 700;
  margin-bottom: 0.2rem;
}
.desc p[data-v-9e231225] {
  margin: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.bullets[data-v-9e231225] {
  margin: 0.25rem 0 0;
  padding-left: 1rem;
}
.bullets li[data-v-9e231225] {
  margin: 0.2rem 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.chips .label[data-v-9e231225],
.ingredients .label[data-v-9e231225],
.prep .label[data-v-9e231225],
.reviews .label[data-v-9e231225] {
  font-weight: 700;
  margin-bottom: 0.2rem;
}
.chip-row[data-v-9e231225] {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.chip[data-v-9e231225] {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.2rem 0.5rem;
}
.chip.soft[data-v-9e231225] {
  background: var(--surface);
}
.chip .chip-label[data-v-9e231225] {
  color: var(--muted);
  margin-right: 0.15rem;
}
.chips .only[data-v-9e231225] {
  color: var(--muted);
  font-weight: 500;
}
.chip.off[data-v-9e231225] {
  opacity: 0.5;
}
.ingredients ul[data-v-9e231225] {
  display: grid;
  gap: 0.2rem;
}
.allergen[data-v-9e231225] {
  color: #ef4444;
}
.reviews .review[data-v-9e231225] {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 0.2rem;
  align-items: center;
}
.reviews .stars[data-v-9e231225] {
  color: #f59e0b;
  font-weight: 700;
}
.actions[data-v-9e231225] {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}
.qty-label[data-v-9e231225] {
  font-weight: 600;
}
.qty-input[data-v-9e231225] {
  width: 90px;
  padding: 0.28rem 0.4rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.btn[data-v-9e231225] {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: 12px;
  padding: 0.32rem 0.58rem;
  font-size: 0.86rem;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.btn.primary[data-v-9e231225] {
  background: #2563eb; /* Azul como el de las cards */
  color: #ffffff;
  border: none;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);
}
.btn.primary[data-v-9e231225]:hover {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.35);
}
.btn.primary.success[data-v-9e231225] {
  background: #10b981; /* Verde éxito temporal */
  box-shadow: 0 12px 28px rgba(16, 185, 129, 0.35);
}
.btn.primary.compact[data-v-9e231225] {
  padding: 0.32rem 0.58rem;
}
.btn.primary.compact.xs[data-v-9e231225] {
  padding: 0.26rem 0.5rem;
}
.details-table[data-v-9e231225] {
  border-top: 1px solid var(--panel-border);
  margin-top: 0.2rem;
}
.details-table.full-width[data-v-9e231225] {
  grid-column: 1 / -1; /* ocupar ambas columnas del grid de la modal */
}
.details-table .row[data-v-9e231225] {
  display: flex;
  justify-content: space-between;
  padding: 0.35rem 0;
  border-bottom: 1px dashed var(--panel-border);
}
.details-table .label[data-v-9e231225] {
  color: var(--muted);
}
.details-table .value[data-v-9e231225] {
  font-weight: 600;
}
.details-table .old-value[data-v-9e231225] {
  text-decoration: line-through;
  color: var(--muted);
  margin-right: 0.4rem;
  font-weight: 500;
}
.details-table .new-value[data-v-9e231225] {
  font-weight: 700;
}
.loading[data-v-9e231225] {
  display: grid;
  place-items: center;
  padding: 1rem;
}
@media (max-width: 900px) {
.modal[data-v-9e231225] {
    inset: 0;
    border-radius: 0;
}
.body[data-v-9e231225] {
    grid-template-columns: 1fr;
}
}
/* Responsive refinements */
@media (max-width: 1400px) {
.body[data-v-9e231225] {
    grid-template-columns: 380px 1fr;
    gap: 0.7rem;
    padding: 0.7rem;
}
}
@media (max-width: 1200px) {
.body[data-v-9e231225] {
    grid-template-columns: 320px 1fr;
    gap: 0.6rem;
    padding: 0.6rem;
}
}
@media (max-width: 800px) {
.thumb img[data-v-9e231225] {
    width: 48px;
    height: 48px;
}
}

.wrap[data-v-5b67555f] {
  background: linear-gradient(135deg, #0a0b14 0%, #1a1610 100%);
  min-height: 100vh;
  display: grid;
  gap: 1rem;
  padding: 1rem;
}
.top[data-v-5b67555f] {
  display: grid;
  gap: 0.2rem;
}
.title[data-v-5b67555f] {
  font-weight: 800;
  font-size: 1.2rem;
}
.subtitle[data-v-5b67555f] {
  color: var(--muted);
}
.filters[data-v-5b67555f] {
  display: grid;
  grid-template-columns: repeat(6, minmax(160px, auto));
  gap: 1.6rem;
  /* mayor separación para que no choquen */
  align-items: center;
  margin-top: 0.6rem;
  padding: 0.8rem 1rem;
  /* un poco más de padding */
  border-radius: 18px;
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.14),
      rgba(255, 255, 255, 0.06));
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  backdrop-filter: saturate(1.4) blur(10px);
  overflow-x: auto;
  /* mantener una sola fila con scroll si es necesario */
}
.field[data-v-5b67555f] {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}
.field--center[data-v-5b67555f] {
  justify-items: center;
}
.field--center .label[data-v-5b67555f] {
  display: flex;
  justify-content: center;
  width: 100%;
  text-align: center;
}
.label[data-v-5b67555f] {
  color: var(--muted);
  font-size: 0.74rem;
  /* más compacto */
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
}
.label-icon[data-v-5b67555f] {
  font-size: 18px;
  color: var(--muted);
}
.control[data-v-5b67555f] {
  position: relative;
  overflow: visible;
}
.icon[data-v-5b67555f] {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: var(--muted);
  pointer-events: none;
}
.select[data-v-5b67555f],
.input[data-v-5b67555f] {
  width: 100%;
  border: 1px solid var(--border);
  background: radial-gradient(100% 100% at 50% 0%,
      var(--surface) 0%,
      rgba(255, 255, 255, 0.02) 100%);
  color: var(--text);
  border-radius: 14px;
  padding: 0.6rem 0.85rem 0.6rem 2.6rem;
  /* más padding para que no choquen con el ícono */
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
  transition: box-shadow 160ms ease, transform 160ms ease,
    border-color 160ms ease;
  box-sizing: border-box;
  /* evita que el padding cause desbordes */
}
.select[data-v-5b67555f]:focus,
.input[data-v-5b67555f]:focus {
  outline: none;
  border-color: rgba(198, 146, 61, 0.6);
  box-shadow: 0 14px 30px rgba(198, 146, 61, 0.3);
}
.select[data-v-5b67555f] {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.switch-row[data-v-5b67555f] {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg,
      var(--surface),
      rgba(255, 255, 255, 0.06));
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
  min-width: 0;
  /* permitir que se contraiga dentro de su columna */
  width: 100%;
}
.switch-input[data-v-5b67555f] {
  appearance: none;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #e5e7eb;
  position: relative;
  transition: background 160ms ease, border-color 160ms ease;
  cursor: pointer;
}
.switch-input[data-v-5b67555f]::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
  transition: transform 160ms ease;
}
.switch-input[data-v-5b67555f]:checked {
  background: #10b98133;
  border-color: #10b981;
}
.switch-input[data-v-5b67555f]:checked::after {
  transform: translateX(18px);
}
.switch-control[data-v-5b67555f] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.actions[data-v-5b67555f] {
  display: flex;
  align-items: center;
}
.btn.clear-filters[data-v-5b67555f] {
  border: none;
  background: #ef4444;
  color: white;
  border-radius: 999px;
  padding: 0.55rem 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(239, 68, 68, 0.28);
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}
.btn.clear-filters[data-v-5b67555f]:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}
.btn.clear-filters[data-v-5b67555f]:active {
  transform: translateY(0);
}
.grid[data-v-5b67555f] {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}
.pagination[data-v-5b67555f] {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.2rem;
}
.pager-btn[data-v-5b67555f] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.6rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.pager-btn[data-v-5b67555f]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.pager-info[data-v-5b67555f] {
  font-weight: 600;
}
.card[data-v-5b67555f] {
  position: relative;
  display: grid;
  gap: 0.6rem;
  border: none;
  border-radius: 18px;
  padding: 0.9rem;
  background: var(--surface);
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.14);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.card[data-v-5b67555f]:hover {
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
  transform: translateY(-1px);
}
.thumb img[data-v-5b67555f] {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  transition: transform 220ms ease;
  will-change: transform;
}
.thumb[data-v-5b67555f] {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}
.card:hover .thumb img[data-v-5b67555f] {
  transform: scale(1.06);
}
.name[data-v-5b67555f] {
  font-weight: 700;
}
.desc[data-v-5b67555f] {
  color: var(--muted);
  font-size: 0.92rem;
  margin: -0.2rem 0 0.1rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* muestra 2 líneas máximo */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cat[data-v-5b67555f] {
  color: var(--muted);
  font-size: 0.9rem;
}
.foot[data-v-5b67555f] {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.price[data-v-5b67555f] {
  display: grid;
  grid-template-rows: auto auto;
  gap: 2px;
}
.price-label[data-v-5b67555f] {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
}
.price-value[data-v-5b67555f] {
  font-weight: 700;
}
.badge-featured[data-v-5b67555f] {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #f59e0b;
  color: #1a1a1a;
  border-radius: 999px;
  padding: 0.15rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 800;
  box-shadow: 0 4px 10px rgba(245, 158, 11, 0.25);
  z-index: 5;
}
.btn.add[data-v-5b67555f] {
  border: none;
  background: linear-gradient(135deg, #C6923D 0%, #DFC05E 100%);
  color: #000000;
  border-radius: 999px;
  padding: 0.4rem 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}
.btn.add[data-v-5b67555f]:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(223, 192, 94, 0.28);
}
.btn.add.success[data-v-5b67555f] {
  background: #10b981;
  box-shadow: 0 10px 20px rgba(16, 185, 129, 0.28);
}
.btn.add[data-v-5b67555f]:active {
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(223, 192, 94, 0.22);
}
.btn.add .material-symbols-rounded[data-v-5b67555f] {
  font-size: 20px;
}
.badge-new[data-v-5b67555f] {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #10b981;
  color: white;
  border-radius: 999px;
  padding: 0.15rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.25);
  z-index: 5;
}

/* Responsivo: mantener proporción pero ajustar # de columnas */
@media (max-width: 1500px) {
.grid[data-v-5b67555f] {
    grid-template-columns: repeat(5, 1fr);
}
}
@media (max-width: 1200px) {
.grid[data-v-5b67555f] {
    grid-template-columns: repeat(4, 1fr);
}
}
@media (max-width: 900px) {
.grid[data-v-5b67555f] {
    grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 700px) {
.grid[data-v-5b67555f] {
    grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.grid[data-v-5b67555f] {
    grid-template-columns: 1fr;
}
}

/* Responsive del contenedor de filtros */
@media (max-width: 1280px) {
.filters[data-v-5b67555f] {
    grid-template-columns: repeat(6, minmax(160px, auto));
}
}
@media (max-width: 960px) {
.filters[data-v-5b67555f] {
    grid-template-columns: repeat(6, minmax(160px, auto));
}
}
@media (max-width: 620px) {
.filters[data-v-5b67555f] {
    grid-template-columns: repeat(6, minmax(160px, auto));
}
}

/* Compact size overrides for inputs and controls */
.filters .icon[data-v-5b67555f] {
  font-size: 14px;
  left: 10px;
}
.filters .select[data-v-5b67555f],
.filters .input[data-v-5b67555f] {
  border-radius: 10px;
  padding: 0.35rem 0.6rem 0.35rem 1.9rem;
  font-size: 0.85rem;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}
.switch-input[data-v-5b67555f] {
  width: 34px;
  height: 18px;
}
.switch-input[data-v-5b67555f]::after {
  left: 2px;
  top: 2px;
  width: 14px;
  height: 14px;
}
.switch-input[data-v-5b67555f]:checked::after {
  transform: translateX(16px);
}
.btn.clear-filters[data-v-5b67555f] {
  padding: 0.4rem 0.7rem;
  box-shadow: 0 6px 14px rgba(239, 68, 68, 0.24);
}

/* Layout fix: prevent grid items from overflowing their columns */
.filters[data-v-5b67555f]>* {
  min-width: 0;
  box-sizing: border-box;
}
.filters .field[data-v-5b67555f] {
  min-width: 0;
  max-width: 220px;
}
.filters .switch-row[data-v-5b67555f] {
  min-width: 0;
  width: 100%;
  max-width: 220px;
}

/* Dark-mode dropdown visibility for native <select> menus */
@media (prefers-color-scheme: dark) {
.filters .select[data-v-5b67555f] {
    background-color: #0f172a;
    border-color: #334155;
    color: #e5e7eb;
    color-scheme: dark;
    /* flecha del select más visible en dark */
    background-image: linear-gradient(45deg, transparent 50%, #94a3b8 50%),
      linear-gradient(135deg, #94a3b8 50%, transparent 50%);
}
.filters .select option[data-v-5b67555f],
  .filters .select optgroup[data-v-5b67555f] {
    background-color: #0f172a;
    /* very dark background */
    color: #e5e7eb;
    /* light text */
}
.filters .select option[data-v-5b67555f]:hover,
  .filters .select option[data-v-5b67555f]:checked {
    background-color: #1f2937;
    /* hover/selected */
    color: #ffffff;
}

  /* icono dentro del control más tenue en dark */
.filters .icon[data-v-5b67555f] {
    color: #94a3b8;
}
}

/* En modo claro, regresa el esquema a light para que el sistema dibuje el menú adecuado */
@media (prefers-color-scheme: light) {
.filters .select[data-v-5b67555f] {
    color-scheme: light;
    background-color: #ffffff;
    border-color: #e5e7eb;
    color: #1f2937;
}
.filters .select option[data-v-5b67555f] {
    background-color: #ffffff;
    color: #1f2937;
}
}
:root[data-theme="light"] .filters .select[data-v-5b67555f] {
  color-scheme: light;
  background-color: #ffffff;
  border-color: #e5e7eb;
  color: #1f2937;
}
:root[data-theme="light"] .filters .select option[data-v-5b67555f] {
  background-color: #ffffff;
  color: #1f2937;
}
:root[data-theme="dark"] .filters .select[data-v-5b67555f] {
  background-color: #0f172a;
  border-color: #334155;
  color: #e5e7eb;
  color-scheme: dark;
  background-image: linear-gradient(45deg, transparent 50%, #94a3b8 50%),
    linear-gradient(135deg, #94a3b8 50%, transparent 50%);
}
:root[data-theme="dark"] .filters .select option[data-v-5b67555f],
:root[data-theme="dark"] .filters .select optgroup[data-v-5b67555f] {
  background-color: #0f172a;
  color: #e5e7eb;
}
:root[data-theme="dark"] .filters .icon[data-v-5b67555f] {
  color: #94a3b8;
}


.dash-wrap[data-v-986afa03] {
  display: grid;
  gap: 1.5rem;
  padding: 2rem;
  background: linear-gradient(135deg, #0a0b14 0%, #1a1610 100%);
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}
.dash-wrap[data-v-986afa03]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 10% 20%, rgba(198, 146, 61, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 90% 80%, rgba(223, 192, 94, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(247, 237, 125, 0.05) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.dash-top[data-v-986afa03] {
  display: grid;
  gap: 0.25rem;
  position: relative;
  z-index: 1;
  padding: 1rem;
  background: rgba(20, 24, 30, 0.95);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 24px;
  border: 1px solid rgba(198, 146, 61, 0.3);
  box-shadow: 0 8px 32px rgba(198, 146, 61, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.title[data-v-986afa03] {
  font-size: 2.5rem;
  font-weight: 900;
  font-family: 'Playfair Display', 'Cinzel', 'Times New Roman', serif;
  text-transform: uppercase;
  background: linear-gradient(135deg, 
      #FFD700 0%, 
      #FFE55C 10%,
      #FFD700 20%,
      #F4D03F 35%,
      #FFD700 45%,
      #C6923D 60%,
      #9D6B27 75%,
      #C6923D 85%,
      #FFD700 95%,
      #FFE55C 100%);
  background-size: 300% 300%;
  animation: shimmer-986afa03 2.5s ease-in-out infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.2em;
  text-shadow: 
      3px 4px 0px rgba(0, 0, 0, 1),
      5px 7px 12px rgba(0, 0, 0, 0.9),
      7px 10px 20px rgba(0, 0, 0, 0.8),
      0px 2px 4px rgba(255, 215, 0, 0.6),
      0px -2px 2px rgba(114, 68, 16, 0.8),
      inset 0px 1px 0px rgba(255, 255, 255, 0.3);
  filter: 
      drop-shadow(3px 5px 10px rgba(0, 0, 0, 0.9))
      drop-shadow(1px 2px 4px rgba(255, 215, 0, 0.4));
  position: relative;
  transform: perspective(100px) rotateX(2deg);
}
@keyframes shimmer-986afa03 {
0%, 100% {
    background-position: 0% 50%;
}
50% {
    background-position: 100% 50%;
}
}
.subtitle[data-v-986afa03] {
  color: rgba(255, 255, 255, 0.7);
}
.grid[data-v-986afa03] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
  position: relative;
  z-index: 1;
}
.card[data-v-986afa03] {
  display: grid;
  place-items: center;
  gap: 0.75rem;
  border-radius: 24px;
  padding: 2rem 1.5rem;
  border: 1px solid rgba(198, 146, 61, 0.3);
  background: rgba(20, 24, 30, 0.95);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 8px 32px rgba(198, 146, 61, 0.2),
    0 2px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  perspective: 1000px;
}
.card[data-v-986afa03]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #C6923D, #DFC05E, #F7ED7D, #DFC05E);
  opacity: 0;
  transition: opacity 0.3s;
}
.card[data-v-986afa03]::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(198, 146, 61, 0.3), transparent 70%);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}
.card[data-v-986afa03]:hover::before {
  opacity: 1;
}
.card[data-v-986afa03]:hover::after {
  width: 300px;
  height: 300px;
}
.card[data-v-986afa03]:hover {
  border-color: rgba(198, 146, 61, 0.6);
  box-shadow: 0 20px 60px rgba(198, 146, 61, 0.4),
    0 8px 20px rgba(223, 192, 94, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.card.locked[data-v-986afa03] {
  opacity: 0.6;
  cursor: not-allowed;
  border-style: dashed;
  background: linear-gradient(135deg, rgba(200, 200, 200, 0.3) 0%, rgba(150, 150, 150, 0.2) 100%);
}
.card.locked[data-v-986afa03]:hover {
  transform: none;
  box-shadow: 0 8px 32px rgba(198, 146, 61, 0.2),
    0 2px 8px rgba(0, 0, 0, 0.3);
}
.icon[data-v-986afa03] {
  font-size: 36px;
  color: #000000;
  background: linear-gradient(135deg, #C6923D 0%, #DFC05E 100%);
  border-radius: 18px;
  padding: 1rem;
  box-shadow: 0 8px 24px rgba(198, 146, 61, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  z-index: 1;
}
.lock[data-v-986afa03] {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.25rem;
  color: rgba(255, 255, 255, 0.6);
}
.lock-text[data-v-986afa03] {
  font-size: 0.85rem;
}
.label[data-v-986afa03] {
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1rem;
  position: relative;
  z-index: 1;
  letter-spacing: -0.01em;
}

/* En modo claro, el texto debe ser oscuro para contrastar con el fondo claro */
@media (prefers-color-scheme: light) {
.dash-wrap[data-v-986afa03] {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}
.card[data-v-986afa03] {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(198, 146, 61, 0.4);
}
.label[data-v-986afa03] {
    color: #1a1610;
}
.muted[data-v-986afa03] {
    color: rgba(26, 22, 16, 0.7);
}
.lock[data-v-986afa03] {
    color: rgba(26, 22, 16, 0.6);
}
.dash-top[data-v-986afa03] {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(198, 146, 61, 0.4);
}
.subtitle[data-v-986afa03] {
    color: rgba(26, 22, 16, 0.7);
}
}
:root[data-theme="light"] .dash-wrap[data-v-986afa03] {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}
:root[data-theme="light"] .card[data-v-986afa03] {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(198, 146, 61, 0.4);
}
:root[data-theme="light"] .label[data-v-986afa03] {
  color: #1a1610;
}
:root[data-theme="light"] .muted[data-v-986afa03] {
  color: rgba(26, 22, 16, 0.7);
}
:root[data-theme="light"] .lock[data-v-986afa03] {
  color: rgba(26, 22, 16, 0.6);
}
:root[data-theme="light"] .dash-top[data-v-986afa03] {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(198, 146, 61, 0.4);
}
:root[data-theme="light"] .subtitle[data-v-986afa03] {
  color: rgba(26, 22, 16, 0.7);
}
.muted[data-v-986afa03] {
  color: rgba(255, 255, 255, 0.6);
}
.debug-box[data-v-986afa03] {
  position: fixed;
  top: 76px;
  left: 16px;
  z-index: 3000;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  border: 1px solid #ef4444;
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  font-weight: 600;
}
@media (prefers-color-scheme: dark) {
.card[data-v-986afa03] {
    background: var(--surface);
    border-color: var(--border);
}
}

.sidebar[data-v-9443f783] {
  width: 260px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  height: 100vh;
  flex-shrink: 0;
  transition: width 0.3s ease;
}
.sidebar.collapsed[data-v-9443f783] {
  width: 80px;
}
.logo-area[data-v-9443f783] {
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  border-bottom: 1px solid var(--border);
  transition: padding 0.3s ease;
}
.sidebar.collapsed .logo-area[data-v-9443f783] {
  padding: 1.5rem 0.5rem;
  justify-content: center;
}
.logo-icon[data-v-9443f783] {
  width: 36px;
  height: 36px;
  background: var(--accent);
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: white;
  flex-shrink: 0;
}
.logo-text[data-v-9443f783] {
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.5px;
  white-space: nowrap;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.2s ease;
}
.sidebar.collapsed .logo-text[data-v-9443f783] {
  opacity: 0;
  width: 0;
}
.nav-menu[data-v-9443f783] {
  flex: 1;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  overflow-y: auto;
  transition: padding 0.3s ease;
}
.sidebar.collapsed .nav-menu[data-v-9443f783] {
  padding: 1rem 0.5rem;
}
.nav-item[data-v-9443f783] {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 1rem;
  border-radius: 12px;
  cursor: pointer;
  color: var(--muted);
  transition: all 0.2s;
  text-decoration: none;
  position: relative;
}
.sidebar.collapsed .nav-item[data-v-9443f783] {
  justify-content: center;
  padding: 0.8rem;
}
.nav-item[data-v-9443f783]:hover:not(.disabled) {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text);
}
.nav-item.active[data-v-9443f783] {
  background: var(--accent);
  color: white;
  box-shadow: 0 4px 12px rgba(106, 92, 245, 0.3);
}
.nav-item.active .icon[data-v-9443f783] {
  color: white;
}
.nav-item.disabled[data-v-9443f783] {
  opacity: 0.5;
  cursor: not-allowed;
}
.icon[data-v-9443f783] {
  font-size: 22px;
  flex-shrink: 0;
}
.label[data-v-9443f783] {
  font-weight: 600;
  font-size: 0.95rem;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.2s ease;
}
.sidebar.collapsed .label[data-v-9443f783] {
  opacity: 0;
  width: 0;
}
.lock-icon[data-v-9443f783] {
  font-size: 16px;
  flex-shrink: 0;
}
.sidebar-footer[data-v-9443f783] {
  padding: 1rem;
  border-top: 1px solid var(--border);
  opacity: 1;
  transition: opacity 0.2s ease, padding 0.3s ease;
}
.sidebar.collapsed .sidebar-footer[data-v-9443f783] {
  opacity: 0;
  height: 0;
  padding: 0;
  overflow: hidden;
}
.logout-btn[data-v-9443f783] {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.8rem;
  border: 1px solid var(--border);
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  color: var(--muted);
  transition: all 0.2s;
}
.logout-btn[data-v-9443f783]:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text);
}

.topbar[data-v-ab7968a3] {
  height: 64px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
}
.left-section[data-v-ab7968a3] {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.toggle-btn[data-v-ab7968a3] {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--text);
  transition: all 0.2s ease;
}
.toggle-btn[data-v-ab7968a3]:hover {
  background: rgba(124, 92, 255, 0.1);
  border-color: rgba(124, 92, 255, 0.3);
  color: var(--accent);
}
.page-title[data-v-ab7968a3] {
  font-size: 1.2rem;
  font-weight: 700;
}
.top-actions[data-v-ab7968a3] {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.action-btn[data-v-ab7968a3] {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--muted);
  transition: all 0.2s ease;
}
.action-btn[data-v-ab7968a3]:hover {
  background: rgba(124, 92, 255, 0.1);
  border-color: rgba(124, 92, 255, 0.3);
  color: var(--accent);
}

.filters-advanced[data-v-079a2e12] {
  display: grid;
  gap: 0.75rem;
}
.panel-head[data-v-079a2e12] {
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}
.filters-grid[data-v-079a2e12] {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.65rem;
  row-gap: 0.85rem;
}
.filters-actions[data-v-079a2e12] {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.25rem;
}
.field[data-v-079a2e12] {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}
.label[data-v-079a2e12] {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.control[data-v-079a2e12] {
  position: relative;
  min-width: 0;
}
.control .icon[data-v-079a2e12] {
  position: absolute;
  left: 6px;
  top: 6px;
  color: var(--accent);
  font-size: 14px;
  pointer-events: none;
  z-index: 1;
}
.analytics-filter-input[data-v-079a2e12],
.analytics-filter-select-multiple[data-v-079a2e12] {
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  width: 100% !important;
  max-width: 100% !important;
  color: var(--text) !important;
  font-family: inherit !important;
  font-size: 0.8rem !important;
  line-height: 1.2 !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}
.analytics-filter-input[data-v-079a2e12] {
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  padding: 0 0.5rem 0 1.6rem !important;
  margin: 0 !important;
}
.analytics-filter-input[data-v-079a2e12]::placeholder {
  color: var(--muted) !important;
  opacity: 0.5 !important;
  font-size: 0.75rem !important;
}

/* Date Input Specific Styles */
.analytics-filter-input[type="date"][data-v-079a2e12] {
  color-scheme: light;
  cursor: pointer;
}
.analytics-filter-input[type="date"][data-v-079a2e12]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
  filter: invert(0.5) sepia(1) saturate(5) hue-rotate(230deg);
}
.analytics-filter-input[type="date"][data-v-079a2e12]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  filter: invert(0.4) sepia(1) saturate(6) hue-rotate(230deg);
}
.analytics-filter-input[type="date"][data-v-079a2e12]::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}
.analytics-filter-input[type="date"][data-v-079a2e12]::-webkit-datetime-edit-text {
  padding: 0 0.2em;
  color: var(--muted);
}
.analytics-filter-input[type="date"][data-v-079a2e12]::-webkit-datetime-edit-month-field,
.analytics-filter-input[type="date"][data-v-079a2e12]::-webkit-datetime-edit-day-field,
.analytics-filter-input[type="date"][data-v-079a2e12]::-webkit-datetime-edit-year-field {
  padding: 0 0.1em;
  color: var(--text);
  font-weight: 500;
}
.analytics-filter-input[type="date"][data-v-079a2e12]::-webkit-datetime-edit-month-field:focus,
.analytics-filter-input[type="date"][data-v-079a2e12]::-webkit-datetime-edit-day-field:focus,
.analytics-filter-input[type="date"][data-v-079a2e12]::-webkit-datetime-edit-year-field:focus {
  background: rgba(106, 92, 245, 0.15);
  color: var(--accent);
  border-radius: 3px;
}
.analytics-filter-select-multiple[data-v-079a2e12] {
  height: 55px !important;
  min-height: 55px !important;
  max-height: 55px !important;
  padding: 0.3rem 0.4rem 0.3rem 1.6rem !important;
  overflow-y: auto !important;
  cursor: pointer !important;
  margin: 0 !important;
}
.analytics-filter-select-multiple option[data-v-079a2e12] {
  padding: 0.2rem !important;
  font-size: 0.8rem !important;
}
.analytics-filter-input[data-v-079a2e12]:focus,
.analytics-filter-select-multiple[data-v-079a2e12]:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(106, 92, 245, 0.12) !important;
  border-color: rgba(106, 92, 245, 0.35) !important;
}
.filters-advanced .chip[data-v-079a2e12] {
  border-radius: 999px;
}
.filters-actions .chip[data-v-079a2e12] {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  padding: 0.45rem 0.75rem;
}
.filters-actions .chip .material-symbols-rounded[data-v-079a2e12] {
  color: var(--accent);
  font-size: 15px;
}
.chip[data-v-079a2e12] {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 10px;
  padding: 0.4rem 0.65rem;
  cursor: pointer;
  color: var(--text);
  font-family: inherit;
  font-weight: 500;
  transition: all 0.15s ease;
}
.chip[data-v-079a2e12]:hover {
  background: rgba(106, 92, 255, 0.08);
  border-color: rgba(106, 92, 255, 0.3);
  transform: translateY(-1px);
}
@media (max-width: 1200px) {
.filters-grid[data-v-079a2e12] {
    grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 900px) {
.filters-grid[data-v-079a2e12] {
    grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.filters-grid[data-v-079a2e12] {
    grid-template-columns: 1fr;
}
.filters-actions[data-v-079a2e12] {
    flex-direction: column;
}
.filters-actions .chip[data-v-079a2e12] {
    width: 100%;
    justify-content: center;
}
}
@media (max-width: 480px) {
.filters-advanced[data-v-079a2e12] {
    padding: 0.75rem;
    gap: 0.65rem;
}
.panel-head[data-v-079a2e12] {
    font-size: 0.85rem;
}
.filters-grid[data-v-079a2e12] {
    gap: 0.55rem;
    row-gap: 0.75rem;
}
.label[data-v-079a2e12] {
    font-size: 0.65rem;
}
.analytics-filter-input[data-v-079a2e12] {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    font-size: 0.85rem !important;
}
.analytics-filter-select-multiple[data-v-079a2e12] {
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    font-size: 0.85rem !important;
}
.filters-actions[data-v-079a2e12] {
    margin-top: 0.15rem;
    gap: 0.4rem;
}
.filters-actions .chip[data-v-079a2e12] {
    font-size: 0.75rem;
    padding: 0.5rem 0.65rem;
}
.filters-actions .chip .material-symbols-rounded[data-v-079a2e12] {
    font-size: 14px;
}
}

.hero-balance[data-v-99dc9d7e] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-radius: 16px;
  background: linear-gradient(135deg, #6a5cf5, #00c2ff);
  color: #fff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}
.hero-label[data-v-99dc9d7e] {
  font-weight: 600;
  opacity: 0.9;
}
.hero-value[data-v-99dc9d7e] {
  font-size: 2rem;
  font-weight: 900;
}
.hero-var[data-v-99dc9d7e] {
  font-weight: 700;
  margin-top: 0.15rem;
}
.hero-var.up[data-v-99dc9d7e] {
  color: #9ef0a1;
}
.hero-var.down[data-v-99dc9d7e] {
  color: #fecaca;
}
.head-tools[data-v-99dc9d7e] {
  display: inline-flex;
  gap: 0.5rem;
}
.chip[data-v-99dc9d7e] {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 10px;
  padding: 0.4rem 0.6rem;
  cursor: pointer;
}
.chip.active[data-v-99dc9d7e] {
  background: var(--accent-gradient);
  color: white;
  border-color: transparent;
}
.kpis-cards[data-v-99dc9d7e] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 0.6rem 0;
}
.soft-card[data-v-99dc9d7e] {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 16px;
  padding: 0.9rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  position: relative;
}
.card-title[data-v-99dc9d7e] {
  color: #ffffff;
  font-weight: 600;
}
.card-value[data-v-99dc9d7e] {
  font-size: 1.5rem;
  font-weight: 800;
  color: #ffffff;
}
.card-sub[data-v-99dc9d7e] {
  color: #ffffff;
  font-size: 0.85rem;
}
.card-badge[data-v-99dc9d7e] {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  font-weight: 700;
  background: rgba(124, 92, 255, 0.12);
}
.card-badge.up[data-v-99dc9d7e] {
  color: #10b981;
}
.card-badge.down[data-v-99dc9d7e] {
  color: #ef4444;
}

/* Responsive Design */
@media (max-width: 768px) {
.hero-balance[data-v-99dc9d7e] {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
}
.hero-value[data-v-99dc9d7e] {
    font-size: 1.75rem;
}
.head-tools[data-v-99dc9d7e] {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.chip[data-v-99dc9d7e] {
    flex: 1 1 auto;
    min-width: fit-content;
}
.kpis-cards[data-v-99dc9d7e] {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}
.card-value[data-v-99dc9d7e] {
    font-size: 1.3rem;
}
}
@media (max-width: 480px) {
.hero-balance[data-v-99dc9d7e] {
    padding: 1rem;
}
.hero-value[data-v-99dc9d7e] {
    font-size: 1.5rem;
}
.hero-var[data-v-99dc9d7e] {
    font-size: 0.9rem;
}
.head-tools[data-v-99dc9d7e] {
    gap: 0.4rem;
}
.chip[data-v-99dc9d7e] {
    font-size: 0.8rem;
    padding: 0.35rem 0.5rem;
}
.kpis-cards[data-v-99dc9d7e] {
    grid-template-columns: 1fr;
    gap: 0.65rem;
}
.card-value[data-v-99dc9d7e] {
    font-size: 1.2rem;
}
.card-title[data-v-99dc9d7e] {
    font-size: 0.85rem;
}
.card-sub[data-v-99dc9d7e] {
    font-size: 0.75rem;
}
}

.power-grid[data-v-9ddc1a8d] {
  display: grid;
  gap: 0.8rem;
}
.viz-grid[data-v-9ddc1a8d] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem;
}
@media (min-width: 900px) {
.viz-grid[data-v-9ddc1a8d] {
    grid-template-columns: repeat(3, 1fr);
}
}
.viz-card[data-v-9ddc1a8d] {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.viz-title[data-v-9ddc1a8d] {
  font-weight: 700;
  color: var(--text);
  text-align: center;
}
.donut-container[data-v-9ddc1a8d] {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto;
}
.donut-svg[data-v-9ddc1a8d] {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  /* Start from top */
  overflow: visible;
}
.donut-segment[data-v-9ddc1a8d] {
  transition: opacity 0.2s, transform 0.2s;
  cursor: pointer;
  stroke: var(--surface);
  stroke-width: 0.02;
}
.donut-segment[data-v-9ddc1a8d]:hover {
  opacity: 0.8;
  transform: scale(1.05);
  transform-origin: center;
}
.donut-center-text[data-v-9ddc1a8d] {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.donut-value[data-v-9ddc1a8d] {
  font-weight: 900;
  color: var(--text);
  font-size: 1.1rem;
}
.donut-label[data-v-9ddc1a8d] {
  color: var(--muted);
  font-size: 0.8rem;
}
.viz-legend[data-v-9ddc1a8d] {
  display: grid;
  gap: 0.35rem;
}
.legend-item[data-v-9ddc1a8d] {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.4rem;
}
.legend-dot[data-v-9ddc1a8d] {
  width: 12px;
  height: 12px;
  border-radius: 999px;
}
.legend-text[data-v-9ddc1a8d] {
  color: var(--muted);
  font-size: 0.85rem;
}
.legend-val[data-v-9ddc1a8d] {
  font-weight: 700;
  color: var(--text);
  font-size: 0.85rem;
}
.panel[data-v-9ddc1a8d] {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 16px;
  padding: 1rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.panel-head[data-v-9ddc1a8d] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  color: var(--text);
}
.panel-sub[data-v-9ddc1a8d] {
  color: var(--accent);
  font-weight: 700;
}

/* Tooltip Styles (Global/Teleported) */
.chart-tooltip[data-v-9ddc1a8d] {
  position: fixed;
  transform: translate(-50%, -100%);
  background: rgba(15, 23, 42, 0.9);
  color: #fff;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.8rem;
  pointer-events: none;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(4px);
}
.tt-label[data-v-9ddc1a8d] {
  font-weight: 600;
  margin-bottom: 2px;
  color: #cbd5e1;
}
.tt-val[data-v-9ddc1a8d] {
  font-weight: 700;
  color: #fff;
}

/* Responsive Design */
@media (max-width: 768px) {
.viz-grid[data-v-9ddc1a8d] {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
}
.donut-container[data-v-9ddc1a8d] {
    width: 160px;
    height: 160px;
}
.donut-value[data-v-9ddc1a8d] {
    font-size: 1rem;
}
.donut-label[data-v-9ddc1a8d] {
    font-size: 0.75rem;
}
.viz-title[data-v-9ddc1a8d] {
    font-size: 0.9rem;
}
.legend-text[data-v-9ddc1a8d],
  .legend-val[data-v-9ddc1a8d] {
    font-size: 0.8rem;
}
.legend-dot[data-v-9ddc1a8d] {
    width: 10px;
    height: 10px;
}
}
@media (max-width: 480px) {
.viz-grid[data-v-9ddc1a8d] {
    grid-template-columns: 1fr;
    gap: 1rem;
}
.power-grid[data-v-9ddc1a8d] {
    padding: 0.75rem;
}
.panel-head[data-v-9ddc1a8d] {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}
.donut-container[data-v-9ddc1a8d] {
    width: 140px;
    height: 140px;
}
.donut-value[data-v-9ddc1a8d] {
    font-size: 0.95rem;
}
.donut-label[data-v-9ddc1a8d] {
    font-size: 0.7rem;
}
.viz-title[data-v-9ddc1a8d] {
    font-size: 0.85rem;
}
.viz-legend[data-v-9ddc1a8d] {
    gap: 0.3rem;
}
.legend-text[data-v-9ddc1a8d],
  .legend-val[data-v-9ddc1a8d] {
    font-size: 0.75rem;
}
.legend-dot[data-v-9ddc1a8d] {
    width: 9px;
    height: 9px;
}
.legend-item[data-v-9ddc1a8d] {
    gap: 0.3rem;
}
}

.panel[data-v-7d6ded9a] {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 16px;
  padding: 1rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.panel-head[data-v-7d6ded9a] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  color: var(--text);
}
.panel-sub[data-v-7d6ded9a] {
  color: var(--accent);
  font-weight: 700;
}
.sales-series[data-v-7d6ded9a] {
  margin-top: 0.6rem;
}
.flow-bars[data-v-7d6ded9a] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12px, 1fr));
  align-items: end;
  gap: 0.35rem;
  padding: 0.6rem 0.4rem;
}
.flow-col[data-v-7d6ded9a] {
  display: grid;
  grid-template-rows: auto auto auto;
  align-items: end;
  justify-items: center;
  gap: 0.2rem;
}
.flow-pos[data-v-7d6ded9a] {
  width: 16px;
  background: linear-gradient(180deg, #6a5cf5, #00c2ff);
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  transition: opacity 0.2s;
}
.flow-pos[data-v-7d6ded9a]:hover {
  opacity: 0.8;
}
.flow-label[data-v-7d6ded9a] {
  font-size: 0.75rem;
  color: var(--muted);
}
.bars[data-v-7d6ded9a] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  align-items: end;
  gap: 0.8rem;
  min-height: 220px;
}
.bars-col[data-v-7d6ded9a] {
  display: grid;
  align-items: end;
  justify-items: center;
  gap: 0.35rem;
}
.bar-single[data-v-7d6ded9a] {
  width: 60%;
  background: linear-gradient(180deg, #6a5cf5, #00c2ff);
  transition: height 0.28s ease, opacity 0.2s;
  cursor: pointer;
}
.bar-single[data-v-7d6ded9a]:hover {
  opacity: 0.8;
}
.bars-label[data-v-7d6ded9a] {
  color: var(--muted);
  font-size: 0.9rem;
}

/* Tooltip Styles (Global/Teleported) */
.chart-tooltip[data-v-7d6ded9a] {
  position: fixed;
  transform: translate(-50%, -100%);
  background: rgba(15, 23, 42, 0.9);
  color: #fff;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.8rem;
  pointer-events: none;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(4px);
}
.tt-label[data-v-7d6ded9a] {
  font-weight: 600;
  margin-bottom: 2px;
  color: #cbd5e1;
}
.tt-val[data-v-7d6ded9a] {
  font-weight: 700;
  color: #fff;
}

/* Responsive Design */
@media (max-width: 768px) {
.panel[data-v-7d6ded9a] {
    padding: 0.85rem;
}
.panel-head[data-v-7d6ded9a] {
    font-size: 0.9rem;
}
.panel-sub[data-v-7d6ded9a] {
    font-size: 0.8rem;
}
.flow-bars[data-v-7d6ded9a] {
    padding: 0.4rem 0.2rem;
    gap: 0.25rem;
}
.flow-pos[data-v-7d6ded9a] {
    width: 14px;
}
.flow-label[data-v-7d6ded9a] {
    font-size: 0.7rem;
}
.bars[data-v-7d6ded9a] {
    gap: 0.6rem;
    min-height: 180px;
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
}
.bar-single[data-v-7d6ded9a] {
    width: 55%;
}
.bars-label[data-v-7d6ded9a] {
    font-size: 0.85rem;
}
}
@media (max-width: 480px) {
.panel[data-v-7d6ded9a] {
    padding: 0.75rem;
}
.panel-head[data-v-7d6ded9a] {
    font-size: 0.85rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}
.panel-sub[data-v-7d6ded9a] {
    font-size: 0.75rem;
}
.sales-series[data-v-7d6ded9a] {
    margin-top: 0.4rem;
}
.flow-bars[data-v-7d6ded9a] {
    padding: 0.3rem 0.1rem;
    gap: 0.2rem;
}
.flow-pos[data-v-7d6ded9a] {
    width: 12px;
}
.flow-label[data-v-7d6ded9a] {
    font-size: 0.65rem;
}
.bars[data-v-7d6ded9a] {
    gap: 0.5rem;
    min-height: 150px;
    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
}
.bar-single[data-v-7d6ded9a] {
    width: 50%;
}
.bars-label[data-v-7d6ded9a] {
    font-size: 0.8rem;
}
}

.panel[data-v-6c8dee50] {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.panel-head[data-v-6c8dee50] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.panel-head b[data-v-6c8dee50] {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
}
.panel-sub[data-v-6c8dee50] {
  color: var(--accent);
  font-weight: 600;
  font-size: 0.85rem;
  margin-top: 0.25rem;
}
.table-container[data-v-6c8dee50] {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.table[data-v-6c8dee50] {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.table thead[data-v-6c8dee50] {
  background: linear-gradient(135deg,
      rgba(124, 92, 255, 0.08) 0%,
      rgba(0, 194, 168, 0.06) 100%);
}
.table th[data-v-6c8dee50] {
  text-align: left;
  padding: 0.85rem 1rem;
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid var(--border);
}
.table th.text-center[data-v-6c8dee50] {
  text-align: center;
}
.table th.text-right[data-v-6c8dee50] {
  text-align: right;
}
.table tbody tr[data-v-6c8dee50] {
  transition: all 0.2s ease;
  border-bottom: 1px solid var(--border);
}
.table tbody tr[data-v-6c8dee50]:hover {
  background: rgba(124, 92, 255, 0.04);
}
.table tbody tr[data-v-6c8dee50]:last-child {
  border-bottom: none;
}
.table td[data-v-6c8dee50] {
  padding: 0.85rem 1rem;
  vertical-align: middle;
}
.table td.text-center[data-v-6c8dee50] {
  text-align: center;
}
.table td.text-right[data-v-6c8dee50] {
  text-align: right;
}
.product-cell[data-v-6c8dee50] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.product-image[data-v-6c8dee50] {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: var(--surface);
}
.product-image img[data-v-6c8dee50] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-placeholder[data-v-6c8dee50] {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg,
      rgba(124, 92, 255, 0.1) 0%,
      rgba(0, 194, 168, 0.08) 100%);
}
.product-placeholder .material-symbols-rounded[data-v-6c8dee50] {
  font-size: 20px;
  color: var(--accent);
  opacity: 0.6;
}
.product-name[data-v-6c8dee50] {
  font-weight: 600;
  color: var(--text);
}
.customer-name[data-v-6c8dee50] {
  color: var(--text);
  font-weight: 500;
}
.date-text[data-v-6c8dee50] {
  color: var(--muted);
  font-size: 0.85rem;
}
.method-badge[data-v-6c8dee50] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.3rem 0.65rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.method-cash[data-v-6c8dee50] {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
}
.method-card[data-v-6c8dee50] {
  background: rgba(59, 130, 246, 0.12);
  color: #2563eb;
}
.method-transfer[data-v-6c8dee50] {
  background: rgba(168, 85, 247, 0.12);
  color: #9333ea;
}
.method-other[data-v-6c8dee50] {
  background: rgba(107, 114, 128, 0.12);
  color: #6b7280;
}
.method-icon[data-v-6c8dee50] {
  font-size: 16px;
}
.quantity-badge[data-v-6c8dee50] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding: 0.25rem 0.5rem;
  background: rgba(124, 92, 255, 0.1);
  color: var(--accent);
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.85rem;
}
.price-text[data-v-6c8dee50] {
  color: var(--muted);
  font-weight: 500;
}
.total-text[data-v-6c8dee50] {
  color: var(--text);
  font-weight: 700;
  font-size: 0.95rem;
}
.pager[data-v-6c8dee50] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding-top: 1rem;
  margin-top: 0.5rem;
  border-top: 1px solid var(--border);
}
.chip[data-v-6c8dee50] {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 8px;
  padding: 0.5rem 0.85rem;
  cursor: pointer;
  color: var(--text);
  font-weight: 600;
  font-size: 0.85rem;
  transition: all 0.2s ease;
}
.chip .material-symbols-rounded[data-v-6c8dee50] {
  font-size: 18px;
}
.chip[data-v-6c8dee50]:hover:not(:disabled) {
  background: rgba(124, 92, 255, 0.08);
  border-color: rgba(124, 92, 255, 0.3);
  transform: translateY(-1px);
}
.chip[data-v-6c8dee50]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.muted[data-v-6c8dee50] {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.9rem;
}
@media (max-width: 768px) {
.table[data-v-6c8dee50] {
    font-size: 0.85rem;
}
.table th[data-v-6c8dee50],
  .table td[data-v-6c8dee50] {
    padding: 0.65rem 0.75rem;
}
.product-image[data-v-6c8dee50] {
    width: 32px;
    height: 32px;
}
.pager[data-v-6c8dee50] {
    flex-direction: column;
    gap: 0.75rem;
}
.chip[data-v-6c8dee50] {
    width: 100%;
    justify-content: center;
}
}
@media (max-width: 480px) {
.panel[data-v-6c8dee50] {
    padding: 0.85rem;
}
.panel-head[data-v-6c8dee50] {
    margin-bottom: 0.75rem;
}
.panel-head b[data-v-6c8dee50] {
    font-size: 1rem;
}
.panel-sub[data-v-6c8dee50] {
    font-size: 0.8rem;
}
.table[data-v-6c8dee50] {
    font-size: 0.8rem;
}
.table th[data-v-6c8dee50],
  .table td[data-v-6c8dee50] {
    padding: 0.5rem 0.5rem;
}
.table th[data-v-6c8dee50] {
    font-size: 0.7rem;
}
.product-image[data-v-6c8dee50] {
    width: 28px;
    height: 28px;
}
.product-cell[data-v-6c8dee50] {
    gap: 0.5rem;
}
.product-name[data-v-6c8dee50] {
    font-size: 0.85rem;
}
.customer-name[data-v-6c8dee50] {
    font-size: 0.85rem;
}
.date-text[data-v-6c8dee50] {
    font-size: 0.75rem;
}
.method-badge[data-v-6c8dee50] {
    padding: 0.25rem 0.5rem;
    font-size: 0.7rem;
    gap: 4px;
}
.method-icon[data-v-6c8dee50] {
    font-size: 14px;
}
.quantity-badge[data-v-6c8dee50] {
    min-width: 28px;
    padding: 0.2rem 0.4rem;
    font-size: 0.8rem;
}
.price-text[data-v-6c8dee50],
  .total-text[data-v-6c8dee50] {
    font-size: 0.85rem;
}
.pager[data-v-6c8dee50] {
    padding-top: 0.75rem;
    gap: 0.5rem;
}
.chip[data-v-6c8dee50] {
    font-size: 0.8rem;
    padding: 0.45rem 0.75rem;
}
.chip .material-symbols-rounded[data-v-6c8dee50] {
    font-size: 16px;
}
.muted[data-v-6c8dee50] {
    font-size: 0.85rem;
}

  /* Add horizontal scroll hint */
.table-container[data-v-6c8dee50]::after {
    content: '← Desliza para ver más →';
    display: block;
    text-align: center;
    font-size: 0.7rem;
    color: var(--muted);
    padding: 0.5rem;
    opacity: 0.7;
}
}

.predictions-panel[data-v-ca097200] {
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 16px;
    padding: 1.2rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
.icon[data-v-ca097200] {
    color: #8b5cf6;
    margin-right: 8px;
}
.grid-layout[data-v-ca097200] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 1rem;
}
@media (min-width: 900px) {
.grid-layout[data-v-ca097200] {
        grid-template-columns: 240px 1fr;
}
}
.stats-col[data-v-ca097200] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.stat-card[data-v-ca097200] {
    background: var(--bg);
    border-radius: 12px;
    padding: 1rem;
    border: 1px solid var(--border);
}
.label[data-v-ca097200] {
    font-size: 0.85rem;
    color: var(--muted);
    margin-bottom: 0.4rem;
}
.value[data-v-ca097200] {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text);
}
.value.highlight[data-v-ca097200] {
    color: #8b5cf6;
}
.value.pos[data-v-ca097200] {
    color: #10b981;
}
.value.neg[data-v-ca097200] {
    color: #ef4444;
}
.value.warning[data-v-ca097200] {
    color: #f59e0b;
}
.sub[data-v-ca097200] {
    font-size: 0.75rem;
    color: var(--muted);
    margin-top: 0.2rem;
}
.chart-col[data-v-ca097200] {
    display: flex;
    flex-direction: column;
}
.chart-title[data-v-ca097200] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 1rem;
}
.svg-container[data-v-ca097200] {
    flex: 1;
    min-height: 200px;
    position: relative;
}
svg[data-v-ca097200] {
    width: 100%;
    height: 100%;
    overflow: visible;
}
.legend[data-v-ca097200] {
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: 0.75rem;
    color: var(--muted);
}
.legend .dot[data-v-ca097200] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
}
.legend .actual[data-v-ca097200] {
    background: var(--primary);
}
.legend .trend[data-v-ca097200] {
    background: var(--accent);
}
.legend .forecast[data-v-ca097200] {
    background: transparent;
    border: 2px dashed var(--accent);
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
.legend .anomaly[data-v-ca097200] {
    background: #ef4444;
}
.overlay[data-v-ca097200] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.04);
    z-index: 2;
    border-radius: 8px;
    color: var(--muted);
}
.spinner[data-v-ca097200] {
    width: 16px;
    height: 16px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin-ca097200 0.8s linear infinite;
}
@keyframes spin-ca097200 {
to {
        transform: rotate(360deg);
}
}
.pulse[data-v-ca097200] {
    animation: pulse-ring-ca097200 2s infinite;
}
@keyframes pulse-ring-ca097200 {
0% {
        stroke-width: 2;
        opacity: 1;
}
50% {
        stroke-width: 6;
        opacity: 0.5;
}
100% {
        stroke-width: 2;
        opacity: 1;
}
}
.tooltip[data-v-ca097200] {
    position: fixed;
    transform: translate(-50%, -100%);
    background: rgba(15, 23, 42, 0.95);
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    pointer-events: none;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
}
.t-head[data-v-ca097200] {
    font-weight: 600;
    margin-bottom: 2px;
    color: #cbd5e1;
}
.t-val[data-v-ca097200] {
    font-weight: 700;
}

/* Responsive Design */
@media (max-width: 768px) {
.predictions-panel[data-v-ca097200] {
        padding: 1rem;
        box-sizing: border-box;
}
.panel-head[data-v-ca097200] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
        width: 100%;
}
.panel-head b[data-v-ca097200] {
        font-size: 0.85rem;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: break-word;
        word-break: break-word;
}
.icon[data-v-ca097200] {
        font-size: 16px;
}
.legend[data-v-ca097200] {
        flex-wrap: wrap;
        gap: 6px;
        font-size: 0.65rem;
        width: 100%;
}
.grid-layout[data-v-ca097200] {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
}
.stats-col[data-v-ca097200] {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.65rem;
        width: 100%;
        box-sizing: border-box;
}
.stat-card[data-v-ca097200] {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 0.85rem;
}
.label[data-v-ca097200] {
        font-size: 0.8rem;
        word-wrap: break-word;
}
.value[data-v-ca097200] {
        font-size: 1.2rem;
        word-wrap: break-word;
}
.sub[data-v-ca097200] {
        font-size: 0.7rem;
}
.chart-col[data-v-ca097200] {
        width: 100%;
}
.chart-title[data-v-ca097200] {
        font-size: 0.9rem;
}
.svg-container[data-v-ca097200] {
        min-height: 200px;
        width: 100%;
}
svg[data-v-ca097200] {
        width: 100%;
        height: 100%;
}
}
@media (max-width: 480px) {
.predictions-panel[data-v-ca097200] {
        padding: 0.75rem;
        box-sizing: border-box;
}
.icon[data-v-ca097200] {
        font-size: 14px;
}
.panel-head[data-v-ca097200] {
        gap: 0.3rem;
}
.panel-head b[data-v-ca097200] {
        font-size: 0.8rem;
        white-space: normal;
        overflow-wrap: break-word;
        word-break: break-word;
}
.legend[data-v-ca097200] {
        gap: 5px;
        font-size: 0.6rem;
}
.legend .dot[data-v-ca097200] {
        width: 7px;
        height: 7px;
        margin-right: 3px;
}
.legend .forecast[data-v-ca097200] {
        width: 9px;
        height: 9px;
}
.grid-layout[data-v-ca097200] {
        gap: 1rem;
}
.stats-col[data-v-ca097200] {
        gap: 0.5rem;
}
.stat-card[data-v-ca097200] {
        padding: 0.65rem;
        max-width: 100%;
        box-sizing: border-box;
}
.label[data-v-ca097200] {
        font-size: 0.75rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
}
.value[data-v-ca097200] {
        font-size: 1rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
}
.sub[data-v-ca097200] {
        font-size: 0.65rem;
}
.chart-title[data-v-ca097200] {
        font-size: 0.85rem;
}
.svg-container[data-v-ca097200] {
        min-height: 180px;
}
svg text[data-v-ca097200] {
        font-size: 7px;
}
.overlay[data-v-ca097200] {
        font-size: 0.75rem;
}
.spinner[data-v-ca097200] {
        width: 12px;
        height: 12px;
}
.tooltip[data-v-ca097200] {
        font-size: 0.7rem;
        padding: 4px 7px;
}
.t-head[data-v-ca097200] {
        font-size: 0.65rem;
}
.t-val[data-v-ca097200] {
        font-size: 0.7rem;
}
}

.layout[data-v-6db14512] {
  display: flex;
  height: 100vh;
  background: var(--bg);
  font-family: "Inter", sans-serif;
  color-scheme: light dark;
}
.main-content[data-v-6db14512] {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.dashboard-container[data-v-6db14512] {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  background: linear-gradient(135deg, #0a0b14 0%, #1a1610 100%);
  min-height: 100vh;
}
.panel[data-v-6db14512] {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 16px;
  padding: 1rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.panel-head[data-v-6db14512] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  color: var(--text);
}
.close-btn[data-v-6db14512] {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
}
.close-btn[data-v-6db14512]:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text);
}
.viz-section[data-v-6db14512] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

/* KPI Cards color variants */
[data-v-6db14512] .kpis-cards .soft-card:nth-child(1) {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  border-color: #ea580c;
}
[data-v-6db14512] .kpis-cards .soft-card:nth-child(2) {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border-color: #059669;
}
[data-v-6db14512] .kpis-cards .soft-card:nth-child(3) {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  border-color: #4f46e5;
}

/* Badges tint to match card theme */
[data-v-6db14512] .kpis-cards .soft-card:nth-child(2) .card-badge {
  background: #059669;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.25);
}
[data-v-6db14512] .kpis-cards .soft-card:nth-child(3) .card-badge {
  background: #4f46e5;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25);
}
@media (min-width: 1100px) {
.viz-section[data-v-6db14512] {
    grid-template-columns: 1fr 1fr;
}
}
.series-col[data-v-6db14512] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* AI Styles */
.ai-panel[data-v-6db14512] {
  border: 1px solid rgba(106, 92, 245, 0.3);
  background: var(--surface);
}
.ai-icon[data-v-6db14512] {
  color: var(--accent);
  margin-right: 6px;
}
.ai-loading[data-v-6db14512] {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--muted);
  padding: 1rem;
}
.spinner[data-v-6db14512] {
  width: 20px;
  height: 20px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin-6db14512 0.8s linear infinite;
}
@keyframes spin-6db14512 {
to {
    transform: rotate(360deg);
}
}
.ai-content[data-v-6db14512] {
  padding: 0.5rem;
}
.ai-text[data-v-6db14512] {
  margin-bottom: 1.5rem;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
  /* Fix text truncation */
  word-break: break-word;
}
.forecast-grid[data-v-6db14512] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 768px) {
.forecast-grid[data-v-6db14512] {
    grid-template-columns: 1fr 1fr;
}
}
.forecast-card[data-v-6db14512] {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  background: var(--surface);
}
.f-title[data-v-6db14512] {
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--accent);
}
.f-bars[data-v-6db14512] {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  height: 80px;
  gap: 4px;
}
.f-col[data-v-6db14512] {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.f-bar[data-v-6db14512] {
  width: 100%;
  background: linear-gradient(180deg, var(--accent) 0%, rgba(106, 92, 245, 0.6) 100%);
  border-radius: 4px 4px 0 0;
  min-height: 2px;
  transition: opacity 0.2s;
  cursor: pointer;
}
.f-bar[data-v-6db14512]:hover {
  opacity: 0.8;
}
.f-label[data-v-6db14512] {
  font-size: 0.7rem;
  color: var(--muted);
  font-weight: 600;
}

/* Tooltip */
.chart-tooltip[data-v-6db14512] {
  position: fixed;
  transform: translate(-50%, -100%);
  background: rgba(15, 23, 42, 0.9);
  color: #fff;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.8rem;
  pointer-events: none;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(4px);
}
.tt-label[data-v-6db14512] {
  font-weight: 600;
  margin-bottom: 2px;
  color: #cbd5e1;
}
.tt-val[data-v-6db14512] {
  font-weight: 700;
  color: #fff;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
.layout[data-v-6db14512] {
    color-scheme: dark;
}
.panel[data-v-6db14512] {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.spinner[data-v-6db14512] {
    border-color: #334155;
    border-top-color: var(--accent);
}
.close-btn[data-v-6db14512]:hover {
    background: rgba(255, 255, 255, 0.1);
}
}

/* Light mode support */
@media (prefers-color-scheme: light) {
.layout[data-v-6db14512] {
    color-scheme: light;
}
}
:root[data-theme="dark"] .layout[data-v-6db14512] {
  color-scheme: dark;
}
:root[data-theme="light"] .layout[data-v-6db14512] {
  color-scheme: light;
}

/* Live Mode Button */
.live-btn[data-v-6db14512] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.live-btn .icon[data-v-6db14512] {
  font-size: 18px;
}
.live-btn[data-v-6db14512]:hover {
  background: var(--bg);
  color: var(--text);
}
.live-btn.active[data-v-6db14512] {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.2);
}
.pulse-dot[data-v-6db14512] {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  animation: live-pulse-6db14512 2s infinite;
}
@keyframes live-pulse-6db14512 {
0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
}
70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
}
100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
}
}

/* Responsive Design */
@media (max-width: 768px) {
.dashboard-container[data-v-6db14512] {
    padding: 1rem;
    gap: 1rem;
}
.panel[data-v-6db14512] {
    padding: 0.85rem;
}
.ai-panel[data-v-6db14512] {
    padding: 0.75rem;
}
.forecast-grid[data-v-6db14512] {
    gap: 0.75rem;
}
.forecast-card[data-v-6db14512] {
    padding: 0.75rem;
}
.f-bars[data-v-6db14512] {
    height: 60px;
    gap: 3px;
}
.f-label[data-v-6db14512] {
    font-size: 0.65rem;
}
.live-btn[data-v-6db14512] {
    font-size: 0.8rem;
    padding: 5px 10px;
    gap: 6px;
}
.live-btn .icon[data-v-6db14512] {
    font-size: 16px;
}
}
@media (max-width: 480px) {
.dashboard-container[data-v-6db14512] {
    padding: 0.75rem;
    gap: 0.75rem;
}
.panel[data-v-6db14512] {
    padding: 0.75rem;
    border-radius: 12px;
}
.panel-head[data-v-6db14512] {
    font-size: 0.9rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}
.panel-head b[data-v-6db14512] {
    font-size: 1rem;
}
.ai-panel[data-v-6db14512] {
    padding: 0.65rem;
}
.ai-text[data-v-6db14512] {
    font-size: 0.85rem;
    margin-bottom: 1rem;
}
.forecast-grid[data-v-6db14512] {
    grid-template-columns: 1fr;
    gap: 0.5rem;
}
.forecast-card[data-v-6db14512] {
    padding: 0.65rem;
}
.f-title[data-v-6db14512] {
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}
.f-bars[data-v-6db14512] {
    height: 50px;
    gap: 2px;
}
.f-label[data-v-6db14512] {
    font-size: 0.6rem;
}
.live-btn[data-v-6db14512] {
    font-size: 0.75rem;
    padding: 4px 8px;
    gap: 5px;
}
.live-btn .icon[data-v-6db14512] {
    font-size: 14px;
}
.chart-tooltip[data-v-6db14512] {
    font-size: 0.75rem;
    padding: 5px 8px;
}
.viz-section[data-v-6db14512] {
    gap: 1rem;
}
}



[data-v-2df89e1f] {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.login-container[data-v-2df89e1f] {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(135deg, #0a0b14 0%, #1a1610 100%);
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
}
.login-wrapper[data-v-2df89e1f] {
  max-width: 1000px;
  width: 100%;
  display: flex;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  border-radius: 20px;
  overflow: hidden;
  background: rgba(20, 24, 30, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(198, 146, 61, 0.2);
  animation: slideUp-2df89e1f 0.6s ease-out;
}
@keyframes slideUp-2df89e1f {
from {
    opacity: 0;
    transform: translateY(30px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
/* ===== LEFT SIDE - FORM ===== */
.form-side[data-v-2df89e1f] {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 2rem;
  background: transparent;
  overflow: hidden;
}
.form-content[data-v-2df89e1f] {
  width: 100%;
  max-width: 380px;
  animation: fadeIn-2df89e1f 0.8s ease-out 0.2s both;
}
.form-content[data-v-2df89e1f]::-webkit-scrollbar {
  width: 4px;
}
.form-content[data-v-2df89e1f]::-webkit-scrollbar-track {
  background: transparent;
}
.form-content[data-v-2df89e1f]::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 2px;
}
.form-content[data-v-2df89e1f]::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2);
}
@keyframes fadeIn-2df89e1f {
from {
    opacity: 0;
    transform: translateX(-20px);
}
to {
    opacity: 1;
    transform: translateX(0);
}
}
.header[data-v-2df89e1f] {
  margin-bottom: 1.2rem;
  position: relative;
  text-align: center;
}
.back-to-landing[data-v-2df89e1f] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  margin-bottom: 1.5rem;
  background: rgba(198, 146, 61, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(198, 146, 61, 0.3);
  border-radius: 12px;
  color: #C6923D;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.3s ease;
}
.back-to-landing[data-v-2df89e1f]:hover {
  background: rgba(198, 146, 61, 0.15);
  border-color: rgba(198, 146, 61, 0.5);
  transform: translateX(-4px);
  box-shadow: 0 4px 12px rgba(198, 146, 61, 0.3);
}
.back-to-landing .material-symbols-rounded[data-v-2df89e1f] {
  font-size: 1.2rem;
}
.welcome-text[data-v-2df89e1f] {
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0.2rem;
  letter-spacing: 0.5px;
}
.brand-name[data-v-2df89e1f] {
  font-size: 1.8rem;
  font-weight: 900;
  font-family: 'Playfair Display', 'Cinzel', 'Times New Roman', serif;
  text-transform: uppercase;
  background: linear-gradient(135deg,
      #FFD700 0%,
      #FFE55C 10%,
      #FFD700 20%,
      #F4D03F 35%,
      #FFD700 45%,
      #C6923D 60%,
      #9D6B27 75%,
      #C6923D 85%,
      #FFD700 95%,
      #FFE55C 100%);
  background-size: 300% 300%;
  animation: shimmer-2df89e1f 2.5s ease-in-out infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.2em;
  margin: 0 0 0.3rem 0;
  text-shadow:
    3px 4px 0px rgba(0, 0, 0, 1),
    5px 7px 12px rgba(0, 0, 0, 0.9),
    7px 10px 20px rgba(0, 0, 0, 0.8),
    0px 2px 4px rgba(255, 215, 0, 0.6),
    0px -2px 2px rgba(114, 68, 16, 0.8),
    inset 0px 1px 0px rgba(255, 255, 255, 0.3);
  filter:
    drop-shadow(3px 5px 10px rgba(0, 0, 0, 0.9)) drop-shadow(1px 2px 4px rgba(255, 215, 0, 0.4));
  position: relative;
  transform: perspective(100px) rotateX(2deg);
}
@keyframes shimmer-2df89e1f {
0%,
  100% {
    background-position: 0% 50%;
}
50% {
    background-position: 100% 50%;
}
}
.login-form[data-v-2df89e1f] {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.error-message[data-v-2df89e1f] {
  padding: 0.85rem 1rem;
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.15) 0%, rgba(255, 107, 107, 0.1) 100%);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 107, 107, 0.3);
  border-left: 4px solid #ff6b6b;
  color: #ff6b6b;
  font-size: 0.85rem;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.1);
}
.error-message .material-symbols-rounded[data-v-2df89e1f] {
  font-size: 1.2rem;
}
.activation-hint[data-v-2df89e1f] {
  padding: 0.5rem;
  background: rgba(255, 193, 7, 0.1);
  border-left: 3px solid #ffc107;
  border-radius: 4px;
}
.hint-text[data-v-2df89e1f] {
  font-size: 0.75rem;
  color: var(--text);
  margin-bottom: 0.5rem;
}
.hint-actions[data-v-2df89e1f] {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.btn-link[data-v-2df89e1f] {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.btn-link[data-v-2df89e1f]:hover {
  color: var(--accent-2);
}
/* Input Groups */
.input-group[data-v-2df89e1f] {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.input-label[data-v-2df89e1f] {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.input-label .material-symbols-rounded[data-v-2df89e1f] {
  font-size: 1.1rem;
  color: #C6923D;
}
.input-wrapper[data-v-2df89e1f] {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(198, 146, 61, 0.2);
  border-radius: 14px;
  transition: all 0.3s ease;
  overflow: hidden;
}
.input-wrapper[data-v-2df89e1f]:focus-within {
  border-color: #C6923D;
  box-shadow: 0 0 0 4px rgba(198, 146, 61, 0.15),
    0 4px 12px rgba(198, 146, 61, 0.2);
  transform: translateY(-2px);
}
.input-icon[data-v-2df89e1f] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  color: #C6923D;
  pointer-events: none;
}
.input-icon .material-symbols-rounded[data-v-2df89e1f] {
  font-size: 1.3rem;
}
.input-field[data-v-2df89e1f] {
  flex: 1;
  padding: 0.95rem 1rem 0.95rem 0;
  border: none;
  background: transparent;
  font-size: 0.95rem;
  font-family: 'Poppins', sans-serif;
  color: #ffffff;
  transition: all 0.3s;
  outline: none;
}
.input-field[data-v-2df89e1f]::placeholder {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 400;
}
/* Password Wrapper */
.password-wrapper[data-v-2df89e1f] {
  position: relative;
}
.password-wrapper .input-icon[data-v-2df89e1f] {
  padding-right: 0.5rem;
}
.toggle-password[data-v-2df89e1f] {
  position: absolute;
  right: 0.75rem;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  border-radius: 8px;
}
.toggle-password[data-v-2df89e1f]:hover {
  color: #C6923D;
  background: rgba(198, 146, 61, 0.15);
}
.toggle-password[data-v-2df89e1f]:active {
  transform: scale(0.95);
}
.toggle-password .material-symbols-rounded[data-v-2df89e1f] {
  font-size: 1.3rem;
}
/* Activation and Reset Sections */
.activation-section[data-v-2df89e1f],
.reset-section[data-v-2df89e1f] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  background: var(--surface-2);
  border-radius: 8px;
  border: 1px dashed var(--border);
}
.btn-secondary[data-v-2df89e1f] {
  width: 100%;
  padding: 0.5rem;
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  border-radius: 16px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}
.btn-secondary[data-v-2df89e1f]:hover {
  background: rgba(124, 92, 255, 0.1);
}
/* Submit Button */
.submit-btn[data-v-2df89e1f] {
  width: 100%;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, #C6923D 0%, #DFC05E 100%);
  color: #000000;
  border: none;
  border-radius: 14px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 0.5rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(198, 146, 61, 0.4);
}
.submit-btn[data-v-2df89e1f]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #DFC05E 0%, #F7ED7D 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.submit-btn[data-v-2df89e1f]:hover:not(:disabled)::before {
  opacity: 1;
}
.submit-btn[data-v-2df89e1f]:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(198, 146, 61, 0.5);
}
.submit-btn[data-v-2df89e1f]:active:not(:disabled) {
  transform: translateY(-1px);
}
.submit-btn[data-v-2df89e1f]:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}
.btn-content[data-v-2df89e1f] {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}
.btn-content .material-symbols-rounded[data-v-2df89e1f] {
  font-size: 1.2rem;
  transition: transform 0.3s ease;
}
.submit-btn:hover:not(:disabled) .btn-content .material-symbols-rounded[data-v-2df89e1f] {
  transform: translateX(4px);
}
@keyframes spin-2df89e1f {
to {
    transform: rotate(360deg);
}
}
.loading-spinner[data-v-2df89e1f] {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(0, 0, 0, 0.3);
  border-top-color: #000000;
  border-radius: 50%;
  animation: spin-2df89e1f 0.8s linear infinite;
}
/* Links */
.form-links[data-v-2df89e1f] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
}
.link-item[data-v-2df89e1f] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  background: rgba(198, 146, 61, 0.08);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(198, 146, 61, 0.2);
  border-radius: 12px;
  color: #C6923D;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.3s ease;
}
.link-item[data-v-2df89e1f]:hover {
  background: rgba(198, 146, 61, 0.15);
  border-color: rgba(198, 146, 61, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(198, 146, 61, 0.3);
}
.link-item.signup[data-v-2df89e1f] {
  background: linear-gradient(135deg, rgba(198, 146, 61, 0.15) 0%, rgba(223, 192, 94, 0.15) 100%);
  border-color: rgba(198, 146, 61, 0.3);
}
.link-item.signup[data-v-2df89e1f]:hover {
  background: linear-gradient(135deg, rgba(198, 146, 61, 0.2) 0%, rgba(223, 192, 94, 0.2) 100%);
}
.link-item .material-symbols-rounded[data-v-2df89e1f] {
  font-size: 1.1rem;
}
.divider[data-v-2df89e1f] {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 0.5rem 0;
  color: #94a3b8;
  font-size: 0.75rem;
  font-weight: 500;
}
.divider[data-v-2df89e1f]::before,
.divider[data-v-2df89e1f]::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid rgba(148, 163, 184, 0.3);
}
.divider span[data-v-2df89e1f] {
  padding: 0 1rem;
}
/* ===== RIGHT SIDE - IMAGE ===== */
.illustration-side[data-v-2df89e1f] {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #000;
}
.image-container[data-v-2df89e1f] {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 500px;
}
.login-image[data-v-2df89e1f] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s ease;
}
.login-wrapper:hover .login-image[data-v-2df89e1f] {
  transform: scale(1.05);
}
.image-overlay[data-v-2df89e1f] {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(198, 146, 61, 0.2) 0%, rgba(223, 192, 94, 0.25) 100%);
  pointer-events: none;
}
/* Transitions */
.slide-fade-enter-active[data-v-2df89e1f] {
  transition: all 0.3s ease-out;
}
.slide-fade-leave-active[data-v-2df89e1f] {
  transition: all 0.2s ease-in;
}
.slide-fade-enter-from[data-v-2df89e1f] {
  opacity: 0;
  transform: translateY(-10px);
}
.slide-fade-leave-to[data-v-2df89e1f] {
  opacity: 0;
  transform: translateY(-5px);
}
/* Responsive */
@media (max-width: 968px) {
.login-container[data-v-2df89e1f] {
    min-height: 100vh;
    height: auto;
    padding: 0;
    align-items: flex-start;
}
.login-wrapper[data-v-2df89e1f] {
    flex-direction: column;
    max-width: 100%;
    width: 100%;
    min-height: 100vh;
    border-radius: 0;
    overflow-y: auto;
}
.illustration-side[data-v-2df89e1f] {
    min-height: 200px;
    max-height: 200px;
    order: -1;
    flex-shrink: 0;
}
.image-container[data-v-2df89e1f] {
    min-height: 200px;
    max-height: 200px;
}
.form-side[data-v-2df89e1f] {
    padding: 2rem 1.5rem;
    padding-bottom: 3rem;
    flex: 1;
    overflow: visible;
}
.form-content[data-v-2df89e1f] {
    max-width: 100%;
    overflow: visible;
}
}
@media (max-width: 480px) {
.login-container[data-v-2df89e1f] {
    padding: 0;
}
.login-wrapper[data-v-2df89e1f] {
    border-radius: 0;
}
.illustration-side[data-v-2df89e1f] {
    min-height: 180px;
    max-height: 180px;
}
.image-container[data-v-2df89e1f] {
    min-height: 180px;
    max-height: 180px;
}
.form-side[data-v-2df89e1f] {
    padding: 1.5rem 1.25rem;
    padding-bottom: 2.5rem;
}
.welcome-text[data-v-2df89e1f] {
    font-size: 0.9rem;
}
.brand-name[data-v-2df89e1f] {
    font-size: 1.5rem;
}
.input-wrapper[data-v-2df89e1f] {
    border-radius: 12px;
}
.submit-btn[data-v-2df89e1f] {
    padding: 0.9rem 1.25rem;
    font-size: 0.9rem;
}
.back-to-landing[data-v-2df89e1f] {
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
}
.form-links[data-v-2df89e1f] {
    margin-top: 1rem;
    padding-bottom: 1rem;
}
}



[data-v-f9c2f07f] {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.register-container[data-v-f9c2f07f] {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(135deg, #0a0b14 0%, #1a1610 100%);
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
}
.register-wrapper[data-v-f9c2f07f] {
  max-width: 1000px;
  width: 100%;
  display: flex;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  border-radius: 20px;
  overflow: hidden;
  background: rgba(20, 24, 30, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(198, 146, 61, 0.2);
  animation: slideUp-f9c2f07f 0.6s ease-out;
}
@keyframes slideUp-f9c2f07f {
from {
    opacity: 0;
    transform: translateY(30px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
/* ===== LEFT SIDE - FORM ===== */
.form-side[data-v-f9c2f07f] {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 2rem;
  background: transparent;
  overflow: hidden;
}
.form-content[data-v-f9c2f07f] {
  width: 100%;
  max-width: 380px;
  animation: fadeIn-f9c2f07f 0.8s ease-out 0.2s both;
}
.form-content[data-v-f9c2f07f]::-webkit-scrollbar {
  width: 4px;
}
.form-content[data-v-f9c2f07f]::-webkit-scrollbar-track {
  background: transparent;
}
.form-content[data-v-f9c2f07f]::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 2px;
}
.form-content[data-v-f9c2f07f]::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2);
}
@keyframes fadeIn-f9c2f07f {
from {
    opacity: 0;
    transform: translateX(-20px);
}
to {
    opacity: 1;
    transform: translateX(0);
}
}
.header[data-v-f9c2f07f] {
  margin-bottom: 1.2rem;
  position: relative;
  text-align: center;
}
.back-to-landing[data-v-f9c2f07f] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  margin-bottom: 1.5rem;
  background: rgba(198, 146, 61, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(198, 146, 61, 0.3);
  border-radius: 12px;
  color: #C6923D;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.3s ease;
}
.back-to-landing[data-v-f9c2f07f]:hover {
  background: rgba(198, 146, 61, 0.15);
  border-color: rgba(198, 146, 61, 0.5);
  transform: translateX(-4px);
  box-shadow: 0 4px 12px rgba(198, 146, 61, 0.3);
}
.back-to-landing .material-symbols-rounded[data-v-f9c2f07f] {
  font-size: 1.2rem;
}
.welcome-text[data-v-f9c2f07f] {
  font-size: 0.9rem;
  font-weight: 500;
  color: #64748b;
  margin-bottom: 0.2rem;
  letter-spacing: 0.5px;
}
.brand-name[data-v-f9c2f07f] {
  font-size: 1.8rem;
  font-weight: 900;
  font-family: 'Playfair Display', 'Cinzel', 'Times New Roman', serif;
  text-transform: uppercase;
  background: linear-gradient(135deg,
      #FFD700 0%,
      #FFE55C 10%,
      #FFD700 20%,
      #F4D03F 35%,
      #FFD700 45%,
      #C6923D 60%,
      #9D6B27 75%,
      #C6923D 85%,
      #FFD700 95%,
      #FFE55C 100%);
  background-size: 300% 300%;
  animation: shimmer-f9c2f07f 2.5s ease-in-out infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.2em;
  margin: 0 0 0.3rem 0;
  text-shadow:
    3px 4px 0px rgba(0, 0, 0, 1),
    5px 7px 12px rgba(0, 0, 0, 0.9),
    7px 10px 20px rgba(0, 0, 0, 0.8),
    0px 2px 4px rgba(255, 215, 0, 0.6),
    0px -2px 2px rgba(114, 68, 16, 0.8),
    inset 0px 1px 0px rgba(255, 255, 255, 0.3);
  filter:
    drop-shadow(3px 5px 10px rgba(0, 0, 0, 0.9)) drop-shadow(1px 2px 4px rgba(255, 215, 0, 0.4));
  position: relative;
  transform: perspective(100px) rotateX(2deg);
}
@keyframes shimmer-f9c2f07f {
0%,
  100% {
    background-position: 0% 50%;
}
50% {
    background-position: 100% 50%;
}
}
.register-form[data-v-f9c2f07f] {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.error-message[data-v-f9c2f07f] {
  padding: 0.85rem 1rem;
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.15) 0%, rgba(255, 107, 107, 0.1) 100%);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 107, 107, 0.3);
  border-left: 4px solid #ff6b6b;
  color: #ff6b6b;
  font-size: 0.85rem;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.1);
}
.error-message .material-symbols-rounded[data-v-f9c2f07f] {
  font-size: 1.2rem;
}
/* Avatar Upload */
.avatar-upload[data-v-f9c2f07f] {
  display: flex;
  justify-content: center;
  margin-bottom: 0.3rem;
}
.avatar-container[data-v-f9c2f07f] {
  position: relative;
  display: inline-block;
}
.avatar-preview[data-v-f9c2f07f] {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(198, 146, 61, 0.3);
  box-shadow: 0 4px 12px rgba(198, 146, 61, 0.3);
  transition: all 0.3s ease;
}
.avatar-preview[data-v-f9c2f07f]:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 32px rgba(198, 146, 61, 0.4);
}
.upload-label[data-v-f9c2f07f] {
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #C6923D 0%, #DFC05E 100%);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s;
  color: #000000;
  box-shadow: 0 4px 12px rgba(198, 146, 61, 0.4);
  border: 3px solid white;
}
.upload-label .material-symbols-rounded[data-v-f9c2f07f] {
  font-size: 1.1rem;
}
.upload-label[data-v-f9c2f07f]:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(198, 146, 61, 0.5);
}
.file-input[data-v-f9c2f07f] {
  display: none;
}
/* Input Groups */
.input-group[data-v-f9c2f07f] {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.input-label[data-v-f9c2f07f] {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.input-label .material-symbols-rounded[data-v-f9c2f07f] {
  font-size: 1.1rem;
  color: #667eea;
}
.input-wrapper[data-v-f9c2f07f] {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(198, 146, 61, 0.2);
  border-radius: 14px;
  transition: all 0.3s ease;
  overflow: hidden;
}
.input-wrapper[data-v-f9c2f07f]:focus-within {
  border-color: #C6923D;
  box-shadow: 0 0 0 4px rgba(198, 146, 61, 0.15),
    0 4px 12px rgba(198, 146, 61, 0.2);
  transform: translateY(-2px);
}
.input-error-wrapper[data-v-f9c2f07f] {
  border-color: #ff6b6b !important;
  box-shadow: 0 0 0 4px rgba(255, 107, 107, 0.1) !important;
}
.input-icon[data-v-f9c2f07f] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  color: #C6923D;
  pointer-events: none;
}
.input-icon .material-symbols-rounded[data-v-f9c2f07f] {
  font-size: 1.3rem;
}
.input-field[data-v-f9c2f07f] {
  flex: 1;
  padding: 0.75rem 1rem 0.75rem 0;
  border: none;
  background: transparent;
  font-size: 0.9rem;
  font-family: 'Poppins', sans-serif;
  color: #ffffff;
  transition: all 0.3s;
  outline: none;
}
.input-field[data-v-f9c2f07f]::placeholder {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 400;
}
.error-text[data-v-f9c2f07f] {
  font-size: 0.8rem;
  color: #ff6b6b;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 500;
  margin-top: -0.3rem;
}
.error-text .material-symbols-rounded[data-v-f9c2f07f] {
  font-size: 1rem;
}
/* Username Suggestions */
.suggestions-container[data-v-f9c2f07f] {
  margin-top: 0.5rem;
  padding: 0.75rem;
  background: rgba(198, 146, 61, 0.1);
  border: 1px solid rgba(198, 146, 61, 0.3);
  border-radius: 12px;
}
.suggestions-label[data-v-f9c2f07f] {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: #C6923D;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.suggestions-label .material-symbols-rounded[data-v-f9c2f07f] {
  font-size: 1rem;
}
.suggestions-list[data-v-f9c2f07f] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.suggestion-chip[data-v-f9c2f07f] {
  padding: 0.4rem 0.8rem;
  background: rgba(198, 146, 61, 0.2);
  border: 1px solid rgba(198, 146, 61, 0.4);
  border-radius: 20px;
  color: #DFC05E;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Poppins', sans-serif;
}
.suggestion-chip[data-v-f9c2f07f]:hover {
  background: rgba(198, 146, 61, 0.35);
  border-color: #C6923D;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(198, 146, 61, 0.3);
}
.suggestion-chip[data-v-f9c2f07f]:active {
  transform: translateY(0);
}
/* Password Wrapper */
.password-wrapper[data-v-f9c2f07f] {
  position: relative;
}
.password-wrapper .input-icon[data-v-f9c2f07f] {
  padding-right: 0.5rem;
}
.toggle-password[data-v-f9c2f07f] {
  position: absolute;
  right: 0.75rem;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  border-radius: 8px;
}
.toggle-password[data-v-f9c2f07f]:hover {
  color: #C6923D;
  background: rgba(198, 146, 61, 0.15);
}
.toggle-password[data-v-f9c2f07f]:active {
  transform: scale(0.95);
}
.toggle-password .material-symbols-rounded[data-v-f9c2f07f] {
  font-size: 1.3rem;
}
/* Password Strength */
.password-strength[data-v-f9c2f07f] {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.3rem;
  padding: 0.5rem 0.7rem;
  background: rgba(247, 237, 125, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 8px;
  border: 1px solid rgba(198, 146, 61, 0.2);
}
.strength-bar[data-v-f9c2f07f] {
  flex: 1;
  height: 6px;
  background: rgba(148, 163, 184, 0.2);
  border-radius: 10px;
  overflow: hidden;
}
.strength-fill[data-v-f9c2f07f] {
  height: 100%;
  transition: all 0.4s ease;
  border-radius: 10px;
  box-shadow: 0 0 8px currentColor;
}
.strength-label[data-v-f9c2f07f] {
  font-size: 0.75rem;
  font-weight: 700;
  min-width: 80px;
  text-align: right;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
/* Submit Button */
.submit-btn[data-v-f9c2f07f] {
  width: 100%;
  padding: 0.85rem 1.5rem;
  background: linear-gradient(135deg, #C6923D 0%, #DFC05E 100%);
  color: #000000;
  border: none;
  border-radius: 14px;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 0.3rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(198, 146, 61, 0.4);
}
.submit-btn[data-v-f9c2f07f]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #DFC05E 0%, #F7ED7D 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.submit-btn[data-v-f9c2f07f]:hover:not(:disabled)::before {
  opacity: 1;
}
.submit-btn[data-v-f9c2f07f]:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(198, 146, 61, 0.5);
}
.submit-btn[data-v-f9c2f07f]:active:not(:disabled) {
  transform: translateY(-1px);
}
.submit-btn[data-v-f9c2f07f]:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}
.btn-content[data-v-f9c2f07f] {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}
.btn-content .material-symbols-rounded[data-v-f9c2f07f] {
  font-size: 1.2rem;
  transition: transform 0.3s ease;
}
.submit-btn:hover:not(:disabled) .btn-content .material-symbols-rounded[data-v-f9c2f07f] {
  transform: scale(1.1);
}
@keyframes spin-f9c2f07f {
to {
    transform: rotate(360deg);
}
}
.loading-spinner[data-v-f9c2f07f] {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(0, 0, 0, 0.3);
  border-top-color: #000000;
  border-radius: 50%;
  animation: spin-f9c2f07f 0.8s linear infinite;
}
/* Links */
.form-links[data-v-f9c2f07f] {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-top: 0.8rem;
}
.link-item[data-v-f9c2f07f] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  background: rgba(198, 146, 61, 0.08);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(198, 146, 61, 0.2);
  border-radius: 12px;
  color: #C6923D;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.3s ease;
}
.link-item[data-v-f9c2f07f]:hover {
  background: rgba(198, 146, 61, 0.15);
  border-color: rgba(198, 146, 61, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(198, 146, 61, 0.3);
}
.link-item .material-symbols-rounded[data-v-f9c2f07f] {
  font-size: 1.1rem;
}
/* ===== RIGHT SIDE - IMAGE ===== */
.illustration-side[data-v-f9c2f07f] {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #000;
}
.image-container[data-v-f9c2f07f] {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 500px;
}
.register-image[data-v-f9c2f07f] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s ease;
}
.register-wrapper:hover .register-image[data-v-f9c2f07f] {
  transform: scale(1.05);
}
.image-overlay[data-v-f9c2f07f] {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(198, 146, 61, 0.2) 0%, rgba(223, 192, 94, 0.25) 100%);
  pointer-events: none;
}
/* Transitions */
.slide-fade-enter-active[data-v-f9c2f07f] {
  transition: all 0.3s ease-out;
}
.slide-fade-leave-active[data-v-f9c2f07f] {
  transition: all 0.2s ease-in;
}
.slide-fade-enter-from[data-v-f9c2f07f] {
  opacity: 0;
  transform: translateY(-10px);
}
.slide-fade-leave-to[data-v-f9c2f07f] {
  opacity: 0;
  transform: translateY(-5px);
}
/* Responsive */
@media (max-width: 968px) {
.register-container[data-v-f9c2f07f] {
    min-height: 100vh;
    height: auto;
    padding: 0;
    align-items: flex-start;
}
.register-wrapper[data-v-f9c2f07f] {
    flex-direction: column;
    max-width: 100%;
    width: 100%;
    min-height: 100vh;
    border-radius: 0;
    overflow-y: auto;
}
.illustration-side[data-v-f9c2f07f] {
    min-height: 180px;
    max-height: 180px;
    order: -1;
    flex-shrink: 0;
}
.image-container[data-v-f9c2f07f] {
    min-height: 180px;
    max-height: 180px;
}
.form-side[data-v-f9c2f07f] {
    padding: 1.5rem 1.5rem;
    padding-bottom: 3rem;
    flex: 1;
    overflow: visible;
    max-height: none;
}
.form-content[data-v-f9c2f07f] {
    max-width: 100%;
    overflow: visible;
}
}
@media (max-width: 480px) {
.register-container[data-v-f9c2f07f] {
    padding: 0;
}
.register-wrapper[data-v-f9c2f07f] {
    border-radius: 0;
}
.illustration-side[data-v-f9c2f07f] {
    min-height: 150px;
    max-height: 150px;
}
.image-container[data-v-f9c2f07f] {
    min-height: 150px;
    max-height: 150px;
}
.form-side[data-v-f9c2f07f] {
    padding: 1.25rem 1.25rem;
    padding-bottom: 2.5rem;
}
.welcome-text[data-v-f9c2f07f] {
    font-size: 0.85rem;
}
.brand-name[data-v-f9c2f07f] {
    font-size: 1.4rem;
}
.input-wrapper[data-v-f9c2f07f] {
    border-radius: 12px;
}
.submit-btn[data-v-f9c2f07f] {
    padding: 0.85rem 1.25rem;
    font-size: 0.9rem;
}
.avatar-preview[data-v-f9c2f07f] {
    width: 65px;
    height: 65px;
}
.back-to-landing[data-v-f9c2f07f] {
    padding: 0.5rem 1rem;
    margin-bottom: 0.75rem;
    font-size: 0.8rem;
}
.header[data-v-f9c2f07f] {
    margin-bottom: 0.8rem;
}
.input-group[data-v-f9c2f07f] {
    gap: 0.35rem;
}
.register-form[data-v-f9c2f07f] {
    gap: 0.7rem;
}
.form-links[data-v-f9c2f07f] {
    margin-top: 0.75rem;
    padding-bottom: 1rem;
}
.avatar-upload[data-v-f9c2f07f] {
    margin-bottom: 0.2rem;
}
}
/* ===== CUSTOM MODAL ===== */
.modal-overlay[data-v-f9c2f07f] {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 1rem;
}
.modal-container[data-v-f9c2f07f] {
  background: rgba(20, 24, 30, 0.98);
  border: 1px solid rgba(198, 146, 61, 0.3);
  border-radius: 20px;
  padding: 2rem;
  max-width: 400px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  animation: modalSlideIn-f9c2f07f 0.3s ease-out;
}
@keyframes modalSlideIn-f9c2f07f {
from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
}
to {
    opacity: 1;
    transform: translateY(0) scale(1);
}
}
.modal-icon[data-v-f9c2f07f] {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: iconPop-f9c2f07f 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
@keyframes iconPop-f9c2f07f {
0% {
    transform: scale(0);
    opacity: 0;
}
50% {
    transform: scale(1.1);
}
100% {
    transform: scale(1);
    opacity: 1;
}
}
.modal-icon.error[data-v-f9c2f07f] {
  background: linear-gradient(135deg, #ff6b6b, #ee5a6f);
}
.modal-icon.success[data-v-f9c2f07f] {
  background: linear-gradient(135deg, #51cf66, #00C2A8);
}
.modal-icon .material-symbols-rounded[data-v-f9c2f07f] {
  font-size: 3rem;
  color: white;
}
.modal-title[data-v-f9c2f07f] {
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  text-align: center;
}
.modal-message[data-v-f9c2f07f] {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  line-height: 1.5;
  margin: 0;
}
.modal-btn[data-v-f9c2f07f] {
  width: 100%;
  padding: 0.75rem;
  background: linear-gradient(135deg, #C6923D, #DFC05E);
  color: #000000;
  border: none;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  margin-top: 0.5rem;
}
.modal-btn[data-v-f9c2f07f]:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(198, 146, 61, 0.4);
}
/* Modal Transitions */
.modal-enter-active[data-v-f9c2f07f],
.modal-leave-active[data-v-f9c2f07f] {
  transition: opacity 0.3s ease;
}
.modal-enter-from[data-v-f9c2f07f],
.modal-leave-to[data-v-f9c2f07f] {
  opacity: 0;
}
.modal-enter-active .modal-container[data-v-f9c2f07f],
.modal-leave-active .modal-container[data-v-f9c2f07f] {
  transition: transform 0.3s ease;
}
.modal-enter-from .modal-container[data-v-f9c2f07f],
.modal-leave-to .modal-container[data-v-f9c2f07f] {
  transform: scale(0.9) translateY(-20px);
}


[data-v-139c88d6] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.activation-container[data-v-139c88d6] {
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(135deg, #0a0b14 0%, #1a1610 100%);
    padding: 2rem;
}
.activation-wrapper[data-v-139c88d6] {
    max-width: 900px;
    width: 100%;
    display: flex;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    border-radius: 16px;
    overflow: hidden;
    background: var(--panel-bg);
    border: 1px solid var(--border);
}

/* ===== LEFT SIDE - FORM ===== */
.form-side[data-v-139c88d6] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: transparent;
}
.form-content[data-v-139c88d6] {
    width: 100%;
    max-width: 380px;
}
.header[data-v-139c88d6] {
    margin-bottom: 1.5rem;
    text-align: center;
}
.welcome-text[data-v-139c88d6] {
    font-size: 1rem;
    font-weight: 300;
    color: var(--muted);
    margin-bottom: 0.15rem;
}
.brand-name[data-v-139c88d6] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.5rem 0;
    word-break: break-all;
}
.subtitle[data-v-139c88d6] {
    font-size: 0.8rem;
    color: var(--muted);
    line-height: 1.4;
}
.error-message[data-v-139c88d6] {
    padding: 0.5rem;
    background: rgba(255, 107, 107, 0.1);
    border-left: 3px solid #ff6b6b;
    color: #ff6b6b;
    font-size: 0.75rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}

/* Code Inputs */
.code-inputs[data-v-139c88d6] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 1rem;
}
.code-digit[data-v-139c88d6] {
    width: 3rem;
    height: 3.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    border: none;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
    background: transparent;
    color: #ffffff;
    transition: all 0.3s;
    outline: none;
    font-family: 'Poppins', sans-serif;
}
.code-digit[data-v-139c88d6]:focus {
    border-bottom-color: #C6923D;
    transform: scale(1.05);
}
.code-digit.filled[data-v-139c88d6] {
    border-bottom-color: #DFC05E;
    color: #DFC05E;
}
.code-digit.error[data-v-139c88d6] {
    border-bottom-color: #ff6b6b;
    animation: shake-139c88d6 0.5s;
}
@keyframes shake-139c88d6 {
0%,
    100% {
        transform: translateX(0);
}
25% {
        transform: translateX(-5px);
}
75% {
        transform: translateX(5px);
}
}
.code-digit[data-v-139c88d6]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Timer */
.timer-display[data-v-139c88d6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: rgba(198, 146, 61, 0.1);
    border-radius: 8px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1rem;
    border: 1px solid rgba(198, 146, 61, 0.2);
}
.timer-display .material-symbols-rounded[data-v-139c88d6] {
    color: #C6923D;
    font-size: 1.1rem;
}
.timer-display strong[data-v-139c88d6] {
    color: #C6923D;
    font-weight: 600;
}

/* Buttons */
.submit-btn[data-v-139c88d6] {
    width: 100%;
    padding: 0.65rem;
    background: linear-gradient(135deg, #C6923D, #DFC05E);
    color: #000000;
    border: none;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s;
    margin-bottom: 0.75rem;
}
.submit-btn[data-v-139c88d6]:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(198, 146, 61, 0.4);
}
.submit-btn[data-v-139c88d6]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.secondary-btn[data-v-139c88d6] {
    width: 100%;
    padding: 0.6rem;
    background: transparent;
    color: #C6923D;
    border: 1.5px solid #C6923D;
    border-radius: 16px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.secondary-btn[data-v-139c88d6]:hover:not(:disabled) {
    background: rgba(198, 146, 61, 0.15);
}
.secondary-btn[data-v-139c88d6]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.secondary-btn .material-symbols-rounded[data-v-139c88d6] {
    font-size: 1.1rem;
}
@keyframes spin-139c88d6 {
to {
        transform: rotate(360deg);
}
}
.loading-spinner[data-v-139c88d6] {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-139c88d6 0.6s linear infinite;
}

/* Footer */
.footer-text[data-v-139c88d6] {
    text-align: center;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
}
.link-btn[data-v-139c88d6] {
    background: none;
    border: none;
    color: #C6923D;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    text-decoration: none;
    transition: color 0.3s;
}
.link-btn[data-v-139c88d6]:hover {
    color: #DFC05E;
    text-decoration: underline;
}

/* ===== RIGHT SIDE - IMAGE ===== */
.illustration-side[data-v-139c88d6] {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: #000;
}
.image-container[data-v-139c88d6] {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 500px;
}
.activation-image[data-v-139c88d6] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.6s ease;
}
.activation-wrapper:hover .activation-image[data-v-139c88d6] {
    transform: scale(1.05);
}
.image-overlay[data-v-139c88d6] {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(198, 146, 61, 0.2) 0%, rgba(223, 192, 94, 0.25) 100%);
    pointer-events: none;
}

/* Responsive */
@media (max-width: 968px) {
.activation-wrapper[data-v-139c88d6] {
        flex-direction: column;
}
.illustration-side[data-v-139c88d6] {
        min-height: 300px;
        order: -1;
}
.form-side[data-v-139c88d6] {
        padding: 2rem 1rem;
}
}
@media (max-width: 480px) {
.activation-container[data-v-139c88d6] {
        padding: 1rem;
}
.activation-wrapper[data-v-139c88d6] {
        border-radius: 12px;
}
.code-digit[data-v-139c88d6] {
        width: 2.5rem;
        height: 3rem;
        font-size: 1.25rem;
}
.form-content[data-v-139c88d6] {
        max-width: 100%;
}
}

/* ===== CUSTOM MODAL ===== */
.modal-overlay[data-v-139c88d6] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 1rem;
}
.modal-container[data-v-139c88d6] {
    background: rgba(20, 24, 30, 0.98);
    border-radius: 20px;
    padding: 2rem;
    max-width: 400px;
    width: 100%;
    border: 1px solid rgba(198, 146, 61, 0.3);
    color: #ffffff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    animation: modalSlideIn-139c88d6 0.3s ease-out;
}
@media (prefers-color-scheme: dark) {
.modal-container[data-v-139c88d6] {
        background: #2a2a3a;
}
}
@keyframes modalSlideIn-139c88d6 {
from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
}
to {
        opacity: 1;
        transform: translateY(0) scale(1);
}
}
.modal-icon[data-v-139c88d6] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: iconPop-139c88d6 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
@keyframes iconPop-139c88d6 {
0% {
        transform: scale(0);
        opacity: 0;
}
50% {
        transform: scale(1.1);
}
100% {
        transform: scale(1);
        opacity: 1;
}
}
.modal-icon.error[data-v-139c88d6] {
    background: linear-gradient(135deg, #ff6b6b, #ee5a6f);
}
.modal-icon.success[data-v-139c88d6] {
    background: linear-gradient(135deg, #51cf66, #00C2A8);
}
.modal-icon .material-symbols-rounded[data-v-139c88d6] {
    font-size: 3rem;
    color: white;
}
.modal-title[data-v-139c88d6] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    text-align: center;
}
.modal-message[data-v-139c88d6] {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    line-height: 1.5;
    margin: 0;
}
.modal-btn[data-v-139c88d6] {
    width: 100%;
    padding: 0.75rem;
    background: linear-gradient(135deg, #C6923D, #DFC05E);
    color: #000000;
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 0.5rem;
}
.modal-btn[data-v-139c88d6]:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(198, 146, 61, 0.4);
}

/* Modal Transitions */
.modal-enter-active[data-v-139c88d6],
.modal-leave-active[data-v-139c88d6] {
    transition: opacity 0.3s ease;
}
.modal-enter-from[data-v-139c88d6],
.modal-leave-to[data-v-139c88d6] {
    opacity: 0;
}
.modal-enter-active .modal-container[data-v-139c88d6],
.modal-leave-active .modal-container[data-v-139c88d6] {
    transition: transform 0.3s ease;
}
.modal-enter-from .modal-container[data-v-139c88d6],
.modal-leave-to .modal-container[data-v-139c88d6] {
    transform: scale(0.9) translateY(-20px);
}

/* Overrides explícitos cuando data-theme=dark está activo */
[data-theme="dark"] { background: #0b0f14;
}
[data-theme="dark"] { background: rgba(20,24,30,0.96); border: 1px solid rgba(255,255,255,0.18);
}
[data-theme="dark"] { background: rgba(20,24,30,0.96);
}
[data-theme="dark"] { color: #f1f5f9;
}
[data-theme="dark"] { color: #cbd5e1;
}
[data-theme="dark"] { color: #f1f5f9;
}
[data-theme="dark"] { color: #cbd5e1;
}
[data-theme="dark"] { color: #f1f5f9; border-bottom-color: rgba(255,255,255,0.22);
}
[data-theme="dark"] { color: #cbd5e1;
}
[data-theme="dark"] { color: #ff6b6b; background: rgba(255,107,107,0.1);
}



[data-v-1b413b97] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.reset-container[data-v-1b413b97] {
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(135deg, #0a0b14 0%, #1a1610 100%);
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
}
.reset-wrapper[data-v-1b413b97] {
    max-width: 1000px;
    width: 100%;
    display: flex;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    border-radius: 20px;
    overflow: hidden;
    background: rgba(20, 24, 30, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(198, 146, 61, 0.2);
    animation: slideUp-1b413b97 0.6s ease-out;
}
@keyframes slideUp-1b413b97 {
from {
        opacity: 0;
        transform: translateY(30px);
}
to {
        opacity: 1;
        transform: translateY(0);
}
}
/* ===== LEFT SIDE - FORM ===== */
.form-side[data-v-1b413b97] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 2rem;
    background: transparent;
    overflow: hidden;
}
.form-content[data-v-1b413b97] {
    width: 100%;
    max-width: 380px;
    animation: fadeIn-1b413b97 0.8s ease-out 0.2s both;
}
.form-content[data-v-1b413b97]::-webkit-scrollbar {
    width: 4px;
}
.form-content[data-v-1b413b97]::-webkit-scrollbar-track {
    background: transparent;
}
.form-content[data-v-1b413b97]::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 2px;
}
.form-content[data-v-1b413b97]::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.2);
}
@keyframes fadeIn-1b413b97 {
from {
        opacity: 0;
        transform: translateX(-20px);
}
to {
        opacity: 1;
        transform: translateX(0);
}
}
.header[data-v-1b413b97] {
    margin-bottom: 1.2rem;
    text-align: center;
}
.welcome-text[data-v-1b413b97] {
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.2rem;
    letter-spacing: 0.5px;
}
.brand-name[data-v-1b413b97] {
    font-size: 1.8rem;
    font-weight: 900;
    font-family: 'Playfair Display', 'Cinzel', 'Times New Roman', serif;
    text-transform: uppercase;
    background: linear-gradient(135deg,
            #FFD700 0%,
            #FFE55C 10%,
            #FFD700 20%,
            #F4D03F 35%,
            #FFD700 45%,
            #C6923D 60%,
            #9D6B27 75%,
            #C6923D 85%,
            #FFD700 95%,
            #FFE55C 100%);
    background-size: 300% 300%;
    animation: shimmer-1b413b97 2.5s ease-in-out infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 0.2em;
    margin: 0 0 0.3rem 0;
    text-shadow:
        3px 4px 0px rgba(0, 0, 0, 1),
        5px 7px 12px rgba(0, 0, 0, 0.9),
        7px 10px 20px rgba(0, 0, 0, 0.8),
        0px 2px 4px rgba(255, 215, 0, 0.6),
        0px -2px 2px rgba(114, 68, 16, 0.8),
        inset 0px 1px 0px rgba(255, 255, 255, 0.3);
    filter:
        drop-shadow(3px 5px 10px rgba(0, 0, 0, 0.9)) drop-shadow(1px 2px 4px rgba(255, 215, 0, 0.4));
    position: relative;
    transform: perspective(100px) rotateX(2deg);
}
@keyframes shimmer-1b413b97 {
0%,
    100% {
        background-position: 0% 50%;
}
50% {
        background-position: 100% 50%;
}
}
.subtitle[data-v-1b413b97] {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
    font-weight: 400;
}
.reset-form[data-v-1b413b97] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}
.error-message[data-v-1b413b97] {
    padding: 0.85rem 1rem;
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.15) 0%, rgba(255, 107, 107, 0.1) 100%);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 107, 107, 0.3);
    border-left: 4px solid #ff6b6b;
    color: #ff6b6b;
    font-size: 0.85rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.1);
}
.error-message .material-symbols-rounded[data-v-1b413b97] {
    font-size: 1.2rem;
}
/* Input Groups */
.input-group[data-v-1b413b97] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.input-label[data-v-1b413b97] {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.input-label .material-symbols-rounded[data-v-1b413b97] {
    font-size: 1.1rem;
    color: #C6923D;
}
.input-wrapper[data-v-1b413b97] {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(198, 146, 61, 0.2);
    border-radius: 14px;
    transition: all 0.3s ease;
    overflow: hidden;
}
.input-wrapper[data-v-1b413b97]:focus-within {
    border-color: #C6923D;
    box-shadow: 0 0 0 4px rgba(198, 146, 61, 0.15),
        0 4px 12px rgba(198, 146, 61, 0.2);
    transform: translateY(-2px);
}
.input-disabled[data-v-1b413b97] {
    background: rgba(148, 163, 184, 0.1);
    border-color: rgba(148, 163, 184, 0.2);
    opacity: 0.7;
}
.input-icon[data-v-1b413b97] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    color: #C6923D;
    pointer-events: none;
}
.input-icon .material-symbols-rounded[data-v-1b413b97] {
    font-size: 1.3rem;
}
.input-field[data-v-1b413b97] {
    flex: 1;
    padding: 0.95rem 1rem 0.95rem 0;
    border: none;
    background: transparent;
    font-size: 0.95rem;
    font-family: 'Poppins', sans-serif;
    color: #ffffff;
    transition: all 0.3s;
    outline: none;
}
.input-field[data-v-1b413b97]::placeholder {
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
}
.input-field[data-v-1b413b97]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    color: #64748b;
}
.password-wrapper[data-v-1b413b97] {
    position: relative;
}
.password-wrapper .input-icon[data-v-1b413b97] {
    padding-right: 0.5rem;
}
.toggle-password[data-v-1b413b97] {
    position: absolute;
    right: 0.75rem;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    border-radius: 8px;
}
.toggle-password[data-v-1b413b97]:hover {
    color: #C6923D;
    background: rgba(198, 146, 61, 0.15);
}
.toggle-password[data-v-1b413b97]:active {
    transform: scale(0.95);
}
.toggle-password .material-symbols-rounded[data-v-1b413b97] {
    font-size: 1.3rem;
}
/* Submit Button */
.submit-btn[data-v-1b413b97] {
    width: 100%;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #C6923D 0%, #DFC05E 100%);
    color: #000000;
    border: none;
    border-radius: 14px;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 0.5rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(198, 146, 61, 0.4);
}
.submit-btn[data-v-1b413b97]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #DFC05E 0%, #F7ED7D 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.submit-btn[data-v-1b413b97]:hover:not(:disabled)::before {
    opacity: 1;
}
.submit-btn[data-v-1b413b97]:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(198, 146, 61, 0.5);
}
.submit-btn[data-v-1b413b97]:active:not(:disabled) {
    transform: translateY(-1px);
}
.submit-btn[data-v-1b413b97]:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}
.btn-content[data-v-1b413b97] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
}
.btn-content .material-symbols-rounded[data-v-1b413b97] {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}
.submit-btn:hover:not(:disabled) .btn-content .material-symbols-rounded[data-v-1b413b97] {
    transform: translateX(4px);
}
@keyframes spin-1b413b97 {
to {
        transform: rotate(360deg);
}
}
.loading-spinner[data-v-1b413b97] {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(0, 0, 0, 0.3);
    border-top-color: #000000;
    border-radius: 50%;
    animation: spin-1b413b97 0.8s linear infinite;
}
/* Links */
.form-links[data-v-1b413b97] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}
.link-item[data-v-1b413b97] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    background: rgba(198, 146, 61, 0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(198, 146, 61, 0.2);
    border-radius: 12px;
    color: #C6923D;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
}
.link-item[data-v-1b413b97]:hover {
    background: rgba(198, 146, 61, 0.15);
    border-color: rgba(198, 146, 61, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(198, 146, 61, 0.3);
}
.link-item .material-symbols-rounded[data-v-1b413b97] {
    font-size: 1.1rem;
}
/* ===== RIGHT SIDE - IMAGE ===== */
.illustration-side[data-v-1b413b97] {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: #000;
}
.image-container[data-v-1b413b97] {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 500px;
}
.forgot-image[data-v-1b413b97] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.6s ease;
}
.reset-wrapper:hover .forgot-image[data-v-1b413b97] {
    transform: scale(1.05);
}
.image-overlay[data-v-1b413b97] {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(198, 146, 61, 0.2) 0%, rgba(223, 192, 94, 0.25) 100%);
    pointer-events: none;
}
/* Transitions */
.slide-fade-enter-active[data-v-1b413b97] {
    transition: all 0.3s ease-out;
}
.slide-fade-leave-active[data-v-1b413b97] {
    transition: all 0.2s ease-in;
}
.slide-fade-enter-from[data-v-1b413b97] {
    opacity: 0;
    transform: translateY(-10px);
}
.slide-fade-leave-to[data-v-1b413b97] {
    opacity: 0;
    transform: translateY(-5px);
}
.slide-enter-active[data-v-1b413b97],
.slide-leave-active[data-v-1b413b97] {
    transition: all 0.4s ease;
}
.slide-enter-from[data-v-1b413b97] {
    opacity: 0;
    transform: translateX(30px);
}
.slide-leave-to[data-v-1b413b97] {
    opacity: 0;
    transform: translateX(-30px);
}
/* Responsive */
@media (max-width: 968px) {
.reset-container[data-v-1b413b97] {
        min-height: 100vh;
        height: auto;
        padding: 0;
        align-items: flex-start;
}
.reset-wrapper[data-v-1b413b97] {
        flex-direction: column;
        max-width: 100%;
        width: 100%;
        min-height: 100vh;
        border-radius: 0;
        overflow-y: auto;
}
.illustration-side[data-v-1b413b97] {
        min-height: 200px;
        max-height: 200px;
        order: -1;
        flex-shrink: 0;
}
.image-container[data-v-1b413b97] {
        min-height: 200px;
        max-height: 200px;
}
.form-side[data-v-1b413b97] {
        padding: 2rem 1.5rem;
        padding-bottom: 3rem;
        flex: 1;
        overflow: visible;
}
.form-content[data-v-1b413b97] {
        max-width: 100%;
        overflow: visible;
}
}
@media (max-width: 480px) {
.reset-container[data-v-1b413b97] {
        padding: 0;
}
.reset-wrapper[data-v-1b413b97] {
        border-radius: 0;
}
.illustration-side[data-v-1b413b97] {
        min-height: 180px;
        max-height: 180px;
}
.image-container[data-v-1b413b97] {
        min-height: 180px;
        max-height: 180px;
}
.form-side[data-v-1b413b97] {
        padding: 1.5rem 1.25rem;
        padding-bottom: 2.5rem;
}
.welcome-text[data-v-1b413b97] {
        font-size: 0.9rem;
}
.brand-name[data-v-1b413b97] {
        font-size: 1.5rem;
}
.input-wrapper[data-v-1b413b97] {
        border-radius: 12px;
}
.submit-btn[data-v-1b413b97] {
        padding: 0.9rem 1.25rem;
        font-size: 0.9rem;
}
.form-links[data-v-1b413b97] {
        margin-top: 1rem;
        padding-bottom: 1rem;
}
}
/* ===== CUSTOM MODAL ===== */
.modal-overlay[data-v-1b413b97] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5000;
    padding: 1rem;
    animation: fadeIn-1b413b97 0.3s ease;
}
@keyframes fadeIn-1b413b97 {
from {
        opacity: 0;
}
to {
        opacity: 1;
}
}
.modal-container[data-v-1b413b97] {
    background: rgba(20, 24, 30, 0.98);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(198, 146, 61, 0.3);
    border-radius: 24px;
    padding: 2.5rem;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    animation: modalSlideIn-1b413b97 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes modalSlideIn-1b413b97 {
from {
        opacity: 0;
        transform: translateY(-30px) scale(0.9);
}
to {
        opacity: 1;
        transform: translateY(0) scale(1);
}
}
.modal-icon[data-v-1b413b97] {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: iconPop-1b413b97 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
@keyframes iconPop-1b413b97 {
0% {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
}
50% {
        transform: scale(1.15) rotate(10deg);
}
100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
}
}
.modal-icon.error[data-v-1b413b97] {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
}
.modal-icon.success[data-v-1b413b97] {
    background: linear-gradient(135deg, #51cf66 0%, #00C2A8 100%);
}
.modal-icon .material-symbols-rounded[data-v-1b413b97] {
    font-size: 3.5rem;
    color: white;
}
.modal-title[data-v-1b413b97] {
    font-size: 1.6rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    text-align: center;
    letter-spacing: -0.5px;
}
.modal-message[data-v-1b413b97] {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    line-height: 1.6;
    margin: 0;
    white-space: pre-line;
}
.modal-btn[data-v-1b413b97] {
    width: 100%;
    padding: 0.9rem 1.5rem;
    background: linear-gradient(135deg, #C6923D 0%, #DFC05E 100%);
    color: #000000;
    border: none;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 0.5rem;
    box-shadow: 0 4px 15px rgba(198, 146, 61, 0.4);
}
.modal-btn[data-v-1b413b97]:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(198, 146, 61, 0.5);
}
.modal-btn[data-v-1b413b97]:active {
    transform: translateY(-1px);
}
/* Modal Transitions */
.modal-enter-active[data-v-1b413b97],
.modal-leave-active[data-v-1b413b97] {
    transition: opacity 0.3s ease;
}
.modal-enter-from[data-v-1b413b97],
.modal-leave-to[data-v-1b413b97] {
    opacity: 0;
}
.modal-enter-active .modal-container[data-v-1b413b97],
.modal-leave-active .modal-container[data-v-1b413b97] {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal-enter-from .modal-container[data-v-1b413b97],
.modal-leave-to .modal-container[data-v-1b413b97] {
    transform: scale(0.9) translateY(-30px);
}



[data-v-91a68f9c] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.reset-container[data-v-91a68f9c] {
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(135deg, #0a0b14 0%, #1a1610 100%);
    padding: 2rem;
}
.reset-wrapper[data-v-91a68f9c] {
    max-width: 900px;
    width: 100%;
    display: flex;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    border-radius: 16px;
    overflow: hidden;
    background: rgba(20, 24, 30, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(198, 146, 61, 0.2);
}
/* ===== LEFT SIDE - FORM ===== */
.form-side[data-v-91a68f9c] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: transparent;
}
.form-content[data-v-91a68f9c] {
    width: 100%;
    max-width: 380px;
}
.header[data-v-91a68f9c] {
    margin-bottom: 1.5rem;
    text-align: center;
}
.welcome-text[data-v-91a68f9c] {
    font-size: 1rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.15rem;
}
.brand-name[data-v-91a68f9c] {
    font-size: 1.1rem;
    font-weight: 900;
    font-family: 'Playfair Display', 'Cinzel', 'Times New Roman', serif;
    text-transform: uppercase;
    background: linear-gradient(135deg, 
        #FFD700 0%, 
        #FFE55C 10%,
        #FFD700 20%,
        #F4D03F 35%,
        #FFD700 45%,
        #C6923D 60%,
        #9D6B27 75%,
        #C6923D 85%,
        #FFD700 95%,
        #FFE55C 100%);
    background-size: 300% 300%;
    animation: shimmer-91a68f9c 2.5s ease-in-out infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 0.15em;
    margin: 0 0 0.5rem 0;
    word-break: break-all;
    text-shadow: 
        2px 3px 0px rgba(0, 0, 0, 1),
        4px 5px 8px rgba(0, 0, 0, 0.9),
        6px 8px 15px rgba(0, 0, 0, 0.8),
        0px 1px 3px rgba(255, 215, 0, 0.6),
        0px -1px 2px rgba(114, 68, 16, 0.8),
        inset 0px 1px 0px rgba(255, 255, 255, 0.3);
    filter: 
        drop-shadow(2px 4px 8px rgba(0, 0, 0, 0.9))
        drop-shadow(1px 2px 3px rgba(255, 215, 0, 0.4));
    position: relative;
    transform: perspective(100px) rotateX(2deg);
}
@keyframes shimmer-91a68f9c {
0%, 100% {
        background-position: 0% 50%;
}
50% {
        background-position: 100% 50%;
}
}
.subtitle[data-v-91a68f9c] {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.4;
}
.reset-form[data-v-91a68f9c] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.error-message[data-v-91a68f9c] {
    padding: 0.5rem;
    background: #ffe5e5;
    border-left: 3px solid #ff6b6b;
    color: #d63031;
    font-size: 0.75rem;
    border-radius: 4px;
}
/* Input Groups */
.input-group[data-v-91a68f9c] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.input-label[data-v-91a68f9c] {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}
.input-field[data-v-91a68f9c] {
    width: 100%;
    padding: 0.5rem 0;
    border: none;
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.3);
    background: transparent;
    font-size: 0.85rem;
    font-family: 'Poppins', sans-serif;
    color: #ffffff;
    transition: border-color 0.3s;
    outline: none;
}
.input-field[data-v-91a68f9c]::placeholder {
    color: rgba(255, 255, 255, 0.5);
}
.input-field[data-v-91a68f9c]:focus {
    border-bottom-color: #C6923D;
}
/* Password Wrapper */
.password-wrapper[data-v-91a68f9c] {
    position: relative;
    display: flex;
    align-items: center;
}
.toggle-password[data-v-91a68f9c] {
    position: absolute;
    right: 0;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    transition: color 0.3s;
}
.toggle-password[data-v-91a68f9c]:hover {
    color: #C6923D;
}
.toggle-password .material-symbols-rounded[data-v-91a68f9c] {
    font-size: 1.25rem;
}
/* Password Strength */
.password-strength[data-v-91a68f9c] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}
.strength-bar[data-v-91a68f9c] {
    flex: 1;
    height: 3px;
    background: #e0e0e0;
    border-radius: 2px;
    overflow: hidden;
}
.strength-fill[data-v-91a68f9c] {
    height: 100%;
    transition: all 0.3s;
}
.strength-label[data-v-91a68f9c] {
    font-size: 0.7rem;
    font-weight: 600;
}
/* Code Inputs */
.code-inputs[data-v-91a68f9c] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}
.code-digit[data-v-91a68f9c] {
    width: 2.5rem;
    height: 3rem;
    font-size: 1.25rem;
    font-weight: 700;
    text-align: center;
    border: none;
    border-bottom: 2px solid #e0e0e0;
    background: transparent;
    color: #333;
    transition: all 0.3s;
    outline: none;
    font-family: 'Poppins', sans-serif;
}
.code-digit[data-v-91a68f9c]:focus {
    border-bottom-color: #C6923D;
    transform: scale(1.05);
}
.code-digit.filled[data-v-91a68f9c] {
    border-bottom-color: #DFC05E;
    color: #DFC05E;
}
.code-digit.error[data-v-91a68f9c] {
    border-bottom-color: #ff6b6b;
    animation: shake-91a68f9c 0.5s;
}
@keyframes shake-91a68f9c {
0%,
    100% {
        transform: translateX(0);
}
25% {
        transform: translateX(-5px);
}
75% {
        transform: translateX(5px);
}
}
.code-digit[data-v-91a68f9c]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
/* Submit Button */
.submit-btn[data-v-91a68f9c] {
    width: 100%;
    padding: 0.65rem;
    background: linear-gradient(135deg, #C6923D, #DFC05E);
    color: #000000;
    border: none;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 0.35rem;
}
.submit-btn[data-v-91a68f9c]:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(198, 146, 61, 0.4);
}
.submit-btn[data-v-91a68f9c]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
@keyframes spin-91a68f9c {
to {
        transform: rotate(360deg);
}
}
.loading-spinner[data-v-91a68f9c] {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-91a68f9c 0.6s linear infinite;
}
/* Footer */
.footer-text[data-v-91a68f9c] {
    text-align: center;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 0.35rem;
}
.link-btn[data-v-91a68f9c] {
    color: #C6923D;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s;
}
.link-btn[data-v-91a68f9c]:hover {
    color: #DFC05E;
    text-decoration: underline;
}
/* ===== RIGHT SIDE - ILLUSTRATION ===== */
.illustration-side[data-v-91a68f9c] {
    flex: 1;
    position: relative;
    background: linear-gradient(135deg, #C6923D 0%, #DFC05E 50%, #F7ED7D 100%);
    overflow: hidden;
}
.illustration-content[data-v-91a68f9c] {
    position: relative;
    width: 100%;
    height: 100%;
}
.moon[data-v-91a68f9c] {
    position: absolute;
    top: 10%;
    right: 10%;
    width: 80px;
    height: 80px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.5);
    z-index: 2;
}
.stars[data-v-91a68f9c] {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.star[data-v-91a68f9c] {
    position: absolute;
    width: 4px;
    height: 4px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    animation: twinkle-91a68f9c 2s ease-in-out infinite;
}
@keyframes twinkle-91a68f9c {
0%,
    100% {
        opacity: 1;
}
50% {
        opacity: 0.3;
}
}
.star[data-v-91a68f9c]:nth-child(2) {
    animation-delay: 0.5s;
}
.star[data-v-91a68f9c]:nth-child(3) {
    animation-delay: 1s;
}
.star[data-v-91a68f9c]:nth-child(4) {
    animation-delay: 1.5s;
}
.star[data-v-91a68f9c]:nth-child(5) {
    animation-delay: 2s;
}
.mountains[data-v-91a68f9c] {
    position: absolute;
    bottom: 35%;
    width: 100%;
    height: 40%;
    z-index: 3;
}
.mountain[data-v-91a68f9c] {
    position: absolute;
    bottom: 0;
}
.mountain-1[data-v-91a68f9c] {
    left: 10%;
    width: 0;
    height: 0;
    border-left: 150px solid transparent;
    border-right: 150px solid transparent;
    border-bottom: 250px solid rgba(106, 90, 205, 0.6);
}
.mountain-2[data-v-91a68f9c] {
    left: 35%;
    width: 0;
    height: 0;
    border-left: 120px solid transparent;
    border-right: 120px solid transparent;
    border-bottom: 200px solid rgba(138, 43, 226, 0.5);
}
.mountain-3[data-v-91a68f9c] {
    right: 15%;
    width: 0;
    height: 0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 180px solid rgba(147, 112, 219, 0.4);
}
.buildings[data-v-91a68f9c] {
    position: absolute;
    bottom: 20%;
    width: 100%;
    height: 40%;
    z-index: 4;
}
.building[data-v-91a68f9c] {
    position: absolute;
    background: linear-gradient(135deg, #ff9a9e, #fad0c4);
    border-radius: 8px 8px 0 0;
}
.building-1[data-v-91a68f9c] {
    left: 25%;
    width: 120px;
    height: 200px;
    background: linear-gradient(135deg, #ffa07a, #ff8c69);
}
.building-door[data-v-91a68f9c] {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 80px;
    background: linear-gradient(135deg, #ff6b6b, #ff5252);
    border-radius: 4px 4px 0 0;
}
.building-windows[data-v-91a68f9c] {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 20px;
}
.window[data-v-91a68f9c] {
    width: 100%;
    height: 20px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}
.building-2[data-v-91a68f9c] {
    right: 20%;
    width: 140px;
    height: 160px;
    background: linear-gradient(135deg, #fbc2eb, #a6c1ee);
}
.building-roof[data-v-91a68f9c] {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
    border-bottom: 30px solid #f093fb;
}
.plants[data-v-91a68f9c] {
    position: absolute;
    bottom: 15%;
    width: 100%;
    z-index: 5;
}
.plant[data-v-91a68f9c] {
    position: absolute;
    width: 60px;
    height: 80px;
    background: linear-gradient(135deg, #d4a5a5, #c48b9f);
    border-radius: 50% 50% 0 0;
}
.plant-1[data-v-91a68f9c] {
    left: 15%;
    transform: rotate(-10deg);
}
.plant-2[data-v-91a68f9c] {
    right: 30%;
    transform: rotate(10deg);
}
.water[data-v-91a68f9c] {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 20%;
    background: linear-gradient(180deg,
            rgba(147, 197, 253, 0.4) 0%,
            rgba(96, 165, 250, 0.6) 50%,
            rgba(59, 130, 246, 0.8) 100%);
    z-index: 6;
}
/* Responsive */
@media (max-width: 968px) {
.reset-wrapper[data-v-91a68f9c] {
        flex-direction: column;
}
.illustration-side[data-v-91a68f9c] {
        min-height: 300px;
        order: -1;
}
.form-side[data-v-91a68f9c] {
        padding: 2rem 1rem;
}
}
@media (max-width: 480px) {
.reset-container[data-v-91a68f9c] {
        padding: 1rem;
}
.reset-wrapper[data-v-91a68f9c] {
        border-radius: 12px;
}
.code-digit[data-v-91a68f9c] {
        width: 2rem;
        height: 2.5rem;
        font-size: 1rem;
}
.form-content[data-v-91a68f9c] {
        max-width: 100%;
}
}
/* ===== CUSTOM MODAL ===== */
.modal-overlay[data-v-91a68f9c] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 1rem;
}
.modal-container[data-v-91a68f9c] {
    background: white;
    border-radius: 20px;
    padding: 2rem;
    max-width: 400px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    animation: modalSlideIn-91a68f9c 0.3s ease-out;
}
@keyframes modalSlideIn-91a68f9c {
from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
}
to {
        opacity: 1;
        transform: translateY(0) scale(1);
}
}
.modal-icon[data-v-91a68f9c] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: iconPop-91a68f9c 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
@keyframes iconPop-91a68f9c {
0% {
        transform: scale(0);
        opacity: 0;
}
50% {
        transform: scale(1.1);
}
100% {
        transform: scale(1);
        opacity: 1;
}
}
.modal-icon.error[data-v-91a68f9c] {
    background: linear-gradient(135deg, #ff6b6b, #ee5a6f);
}
.modal-icon.success[data-v-91a68f9c] {
    background: linear-gradient(135deg, #51cf66, #00C2A8);
}
.modal-icon .material-symbols-rounded[data-v-91a68f9c] {
    font-size: 3rem;
    color: white;
}
.modal-title[data-v-91a68f9c] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    text-align: center;
}
.modal-message[data-v-91a68f9c] {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    line-height: 1.5;
    margin: 0;
}
.modal-btn[data-v-91a68f9c] {
    width: 100%;
    padding: 0.75rem;
    background: linear-gradient(135deg, #C6923D, #DFC05E);
    color: #000000;
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 0.5rem;
}
.modal-btn[data-v-91a68f9c]:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(198, 146, 61, 0.4);
}
/* Modal Transitions */
.modal-enter-active[data-v-91a68f9c],
.modal-leave-active[data-v-91a68f9c] {
    transition: opacity 0.3s ease;
}
.modal-enter-from[data-v-91a68f9c],
.modal-leave-to[data-v-91a68f9c] {
    opacity: 0;
}

/* ===== MODAL OVERLAY ===== */
.modal-overlay[data-v-87a4a55e] {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 1rem;
  animation: fadeIn-87a4a55e 0.3s ease-out;
}
@keyframes fadeIn-87a4a55e {
from {
    opacity: 0;
}
to {
    opacity: 1;
}
}

/* ===== MODAL CONTAINER ===== */
.modal-container[data-v-87a4a55e] {
  position: relative;
  background: var(--panel-bg);
  border: 1.5px solid var(--panel-border);
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  width: 100%;
  max-width: 480px;
  overflow: hidden;
  animation: slideUp-87a4a55e 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  color: var(--text);
  backdrop-filter: blur(20px);
}
@keyframes slideUp-87a4a55e {
from {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
}
to {
    opacity: 1;
    transform: translateY(0) scale(1);
}
}

/* ===== MODAL HEADER ===== */
.modal-header[data-v-87a4a55e] {
  padding: 2rem 2rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: linear-gradient(
    135deg,
    rgba(239, 68, 68, 0.1),
    rgba(249, 115, 22, 0.05)
  );
  border-bottom: 1px solid var(--border);
}
.modal-title[data-v-87a4a55e] {
  font-size: 1.5rem;
  font-weight: 900;
  margin: 0;
  text-align: center;
  background: linear-gradient(135deg, #ef4444, #f97316);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em;
}
.close-btn[data-v-87a4a55e] {
  position: absolute;
  right: 1.25rem;
  top: 1.25rem;
  background: rgba(239, 68, 68, 0.1);
  border: 1.5px solid transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0.6rem;
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.close-btn[data-v-87a4a55e]:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
  color: #ef4444;
  transform: rotate(90deg) scale(1.1);
}
.close-btn .material-symbols-rounded[data-v-87a4a55e] {
  font-size: 1.25rem;
}

/* ===== MODAL BODY ===== */
.modal-body[data-v-87a4a55e] {
  padding: 1.75rem 2rem 2rem;
  text-align: center;
}
.modal-subtitle[data-v-87a4a55e] {
  color: var(--muted);
  font-size: 1rem;
  margin-bottom: 1.5rem;
  line-height: 1.6;
  font-weight: 500;
}
.modal-message[data-v-87a4a55e] {
  color: var(--text);
  font-size: 0.95rem;
  margin-bottom: 1.25rem;
  padding: 1rem;
  background: rgba(124, 92, 255, 0.08);
  border: 1px solid rgba(124, 92, 255, 0.2);
  border-radius: 12px;
  font-weight: 600;
  animation: slideIn-87a4a55e 0.3s ease-out;
}
@keyframes slideIn-87a4a55e {
from {
    opacity: 0;
    transform: translateY(-10px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

/* ===== ACTION BUTTONS ===== */
.actions[data-v-87a4a55e] {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}
.btn[data-v-87a4a55e] {
  border: none;
  border-radius: 14px;
  cursor: pointer;
  padding: 0.875rem 1.75rem;
  font-weight: 700;
  font-size: 0.95rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  overflow: hidden;
  min-width: 140px;
  justify-content: center;
}
.btn[data-v-87a4a55e]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.2));
  opacity: 0;
  transition: opacity 0.3s ease;
}
.btn[data-v-87a4a55e]:hover::before {
  opacity: 1;
}
.btn.cancel[data-v-87a4a55e] {
  background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
  color: #fff;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
}
.btn.cancel[data-v-87a4a55e]:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.4);
}
.btn.cancel[data-v-87a4a55e]:active {
  transform: translateY(0);
}
.btn.cancel .material-symbols-rounded[data-v-87a4a55e] {
  font-size: 1.25rem;
}
.btn[data-v-87a4a55e]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}
.btn.ghost[data-v-87a4a55e] {
  background: var(--surface);
  color: var(--text);
  border: 1.5px solid var(--border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.btn.ghost[data-v-87a4a55e]:hover {
  background: var(--panel-bg);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(124, 92, 255, 0.2);
}
.btn.ghost[data-v-87a4a55e]:active {
  transform: translateY(0);
}

/* ===== TRANSITIONS ===== */
.modal-enter-active[data-v-87a4a55e],
.modal-leave-active[data-v-87a4a55e] {
  transition: opacity 0.3s ease;
}
.modal-enter-from[data-v-87a4a55e],
.modal-leave-to[data-v-87a4a55e] {
  opacity: 0;
}
.modal-enter-active .modal-container[data-v-87a4a55e],
.modal-leave-active .modal-container[data-v-87a4a55e] {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal-enter-from .modal-container[data-v-87a4a55e],
.modal-leave-to .modal-container[data-v-87a4a55e] {
  transform: scale(0.9) translateY(20px);
  opacity: 0;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 640px) {
.modal-container[data-v-87a4a55e] {
    max-width: 100%;
    margin: 0 0.5rem;
    border-radius: 20px;
}
.modal-header[data-v-87a4a55e] {
    padding: 1.5rem 1.5rem 1rem;
}
.modal-title[data-v-87a4a55e] {
    font-size: 1.25rem;
}
.close-btn[data-v-87a4a55e] {
    right: 1rem;
    top: 1rem;
    padding: 0.5rem;
}
.modal-body[data-v-87a4a55e] {
    padding: 1.5rem 1.5rem 1.75rem;
}
.modal-subtitle[data-v-87a4a55e] {
    font-size: 0.95rem;
}
.actions[data-v-87a4a55e] {
    flex-direction: column;
    gap: 0.75rem;
}
.btn[data-v-87a4a55e] {
    width: 100%;
    min-width: auto;
    padding: 1rem 1.5rem;
}
}
@media (max-width: 380px) {
.modal-container[data-v-87a4a55e] {
    margin: 0 0.25rem;
}
.modal-header[data-v-87a4a55e] {
    padding: 1.25rem 1.25rem 0.875rem;
}
.modal-title[data-v-87a4a55e] {
    font-size: 1.125rem;
}
.modal-body[data-v-87a4a55e] {
    padding: 1.25rem;
}
}

/* ===== MODAL OVERLAY ===== */
.modal-overlay[data-v-423bf1c0] {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 1rem;
  animation: fadeIn-423bf1c0 0.3s ease-out;
}
@keyframes fadeIn-423bf1c0 {
from {
    opacity: 0;
}
to {
    opacity: 1;
}
}

/* ===== MODAL CONTAINER ===== */
.modal-container[data-v-423bf1c0] {
  position: relative;
  background: var(--panel-bg);
  border: 1.5px solid var(--panel-border);
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  width: 100%;
  max-width: 420px;
  overflow: hidden;
  animation: slideUp-423bf1c0 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  color: var(--text);
  backdrop-filter: blur(20px);
}
@keyframes slideUp-423bf1c0 {
from {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
}
to {
    opacity: 1;
    transform: translateY(0) scale(1);
}
}

/* ===== MODAL CONTENT ===== */
.modal-content[data-v-423bf1c0] {
  padding: 2.5rem 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}
.success-icon-wrapper[data-v-423bf1c0] {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scaleIn-423bf1c0 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 8px 24px rgba(34, 197, 94, 0.3);
}
@keyframes scaleIn-423bf1c0 {
from {
    transform: scale(0);
    opacity: 0;
}
to {
    transform: scale(1);
    opacity: 1;
}
}
.success-icon[data-v-423bf1c0] {
  font-size: 3rem;
  color: #fff;
  animation: checkmark-423bf1c0 0.6s ease-in-out 0.2s backwards;
}
@keyframes checkmark-423bf1c0 {
0% {
    transform: scale(0) rotate(-45deg);
    opacity: 0;
}
50% {
    transform: scale(1.2) rotate(0deg);
}
100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
}
}
.modal-title[data-v-423bf1c0] {
  font-size: 1.75rem;
  font-weight: 900;
  margin: 0;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em;
}
.modal-message[data-v-423bf1c0] {
  color: var(--muted);
  font-size: 1rem;
  margin: 0;
  line-height: 1.6;
  font-weight: 500;
}
.close-btn[data-v-423bf1c0] {
  margin-top: 0.5rem;
  padding: 0.875rem 2rem;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.3);
}
.close-btn[data-v-423bf1c0]:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(34, 197, 94, 0.4);
}
.close-btn[data-v-423bf1c0]:active {
  transform: translateY(0);
}

/* ===== TRANSITIONS ===== */
.modal-enter-active[data-v-423bf1c0],
.modal-leave-active[data-v-423bf1c0] {
  transition: opacity 0.3s ease;
}
.modal-enter-from[data-v-423bf1c0],
.modal-leave-to[data-v-423bf1c0] {
  opacity: 0;
}
.modal-enter-active .modal-container[data-v-423bf1c0],
.modal-leave-active .modal-container[data-v-423bf1c0] {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal-enter-from .modal-container[data-v-423bf1c0],
.modal-leave-to .modal-container[data-v-423bf1c0] {
  transform: scale(0.9) translateY(20px);
  opacity: 0;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 640px) {
.modal-container[data-v-423bf1c0] {
    max-width: 100%;
    margin: 0 0.5rem;
    border-radius: 20px;
}
.modal-content[data-v-423bf1c0] {
    padding: 2rem 1.5rem;
}
.success-icon-wrapper[data-v-423bf1c0] {
    width: 70px;
    height: 70px;
}
.success-icon[data-v-423bf1c0] {
    font-size: 2.5rem;
}
.modal-title[data-v-423bf1c0] {
    font-size: 1.5rem;
}
.modal-message[data-v-423bf1c0] {
    font-size: 0.95rem;
}
}
@media (max-width: 380px) {
.modal-container[data-v-423bf1c0] {
    margin: 0 0.25rem;
}
.modal-content[data-v-423bf1c0] {
    padding: 1.75rem 1.25rem;
}
}

/* ===== BASE LAYOUT ===== */
.purchases-wrap[data-v-622edc2a] {
  display: grid;
  gap: 1.5rem;
  padding: clamp(1rem, 3vw, 2rem);
  min-height: 100vh;
  color: var(--text);
  background: linear-gradient(135deg, #0a0b14 0%, #1a1610 100%);
  animation: fadeIn-622edc2a 0.4s ease-out;
}
@keyframes fadeIn-622edc2a {
from {
    opacity: 0;
    transform: translateY(10px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

/* ===== HEADER SECTION ===== */
.purchases-top[data-v-622edc2a] {
  display: grid;
  gap: 0.5rem;
  animation: slideDown-622edc2a 0.5s ease-out;
}
@keyframes slideDown-622edc2a {
from {
    opacity: 0;
    transform: translateY(-20px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.title[data-v-622edc2a] {
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 900;
  background: linear-gradient(135deg, var(--text), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em;
}
.subtitle[data-v-622edc2a] {
  color: var(--muted);
  font-size: clamp(0.875rem, 2vw, 1rem);
  font-weight: 500;
}

/* ===== KPI CARDS ===== */
.kpis[data-v-622edc2a] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.kpi[data-v-622edc2a] {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.75rem;
  border-radius: 16px;
  padding: 1.25rem;
  color: #fff;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}
.kpi[data-v-622edc2a]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.1));
  opacity: 0;
  transition: opacity 0.3s ease;
}
.kpi[data-v-622edc2a]:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}
.kpi[data-v-622edc2a]:hover::before {
  opacity: 1;
}
.kpi .icon[data-v-622edc2a] {
  color: #fff;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 14px;
  padding: 0.65rem;
  font-size: 1.75rem;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}
.kpi:hover .icon[data-v-622edc2a] {
  transform: rotate(5deg) scale(1.1);
}
.kpi .kpi-val[data-v-622edc2a] {
  color: #fff;
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 900;
  letter-spacing: -0.02em;
}
.kpi .kpi-label[data-v-622edc2a] {
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.kpi.orange[data-v-622edc2a] {
  background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
}
.kpi.blue[data-v-622edc2a] {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}
.kpi.green[data-v-622edc2a] {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}
.kpi.purple[data-v-622edc2a] {
  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
}

/* ===== PANEL CONTAINER ===== */
.panel[data-v-622edc2a] {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 20px;
  padding: clamp(1rem, 3vw, 1.5rem);
  backdrop-filter: blur(20px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  animation: scaleIn-622edc2a 0.4s ease-out 0.1s backwards;
}
@keyframes scaleIn-622edc2a {
from {
    opacity: 0;
    transform: scale(0.95);
}
to {
    opacity: 1;
    transform: scale(1);
}
}

/* ===== MESSAGES ===== */
.error[data-v-622edc2a] {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
  border: 1.5px solid #ef4444;
  padding: 1rem;
  border-radius: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  animation: shake-622edc2a 0.4s ease;
}
@keyframes shake-622edc2a {
0%,
  100% {
    transform: translateX(0);
}
25% {
    transform: translateX(-5px);
}
75% {
    transform: translateX(5px);
}
}
.notice[data-v-622edc2a] {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.1);
  border: 1.5px solid #22c55e;
  padding: 1rem;
  border-radius: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  animation: slideIn-622edc2a 0.3s ease;
}
@keyframes slideIn-622edc2a {
from {
    opacity: 0;
    transform: translateX(-20px);
}
to {
    opacity: 1;
    transform: translateX(0);
}
}

/* ===== LOADING SKELETON ===== */
.skeleton-list[data-v-622edc2a] {
  display: grid;
  gap: 0.75rem;
}
.skeleton-row[data-v-622edc2a] {
  height: 80px;
  border-radius: 16px;
  background: linear-gradient(
    90deg,
    rgba(198, 146, 61, 0.05),
    rgba(198, 146, 61, 0.15),
    rgba(198, 146, 61, 0.05)
  );
  background-size: 200% 100%;
  animation: shimmer-622edc2a 1.5s ease-in-out infinite;
}
@keyframes shimmer-622edc2a {
0% {
    background-position: -200% 0;
}
100% {
    background-position: 200% 0;
}
}

/* ===== SEARCH BAR ===== */
.search[data-v-622edc2a] {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
  padding: 0.35rem 0.5rem;
  background: var(--panel-bg);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  transition: all 0.3s ease;
  width: 240px;
}
.search[data-v-622edc2a]:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(198, 146, 61, 0.1);
  background: var(--surface);
}
.search .material-symbols-rounded[data-v-622edc2a] {
  color: var(--muted);
  font-size: 1rem;
  transition: color 0.3s ease;
}
.search:focus-within .material-symbols-rounded[data-v-622edc2a] {
  color: var(--accent);
}
.search-input[data-v-622edc2a] {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  padding: 0;
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 500;
}
.search-input[data-v-622edc2a]::placeholder {
  color: var(--muted);
  font-weight: 400;
}
.clear-btn[data-v-622edc2a] {
  background: rgba(198, 146, 61, 0.1);
  border: none;
  color: var(--accent);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 8px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.clear-btn[data-v-622edc2a]:hover {
  color: #fff;
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 900;
  letter-spacing: -0.02em;
}
.kpi .kpi-label[data-v-622edc2a] {
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.kpi.orange[data-v-622edc2a] {
  background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
}
.kpi.blue[data-v-622edc2a] {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}
.kpi.green[data-v-622edc2a] {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}
.kpi.purple[data-v-622edc2a] {
  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
}

/* ===== PANEL CONTAINER ===== */
.panel[data-v-622edc2a] {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 20px;
  padding: clamp(1rem, 3vw, 1.5rem);
  backdrop-filter: blur(20px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  animation: scaleIn-622edc2a 0.4s ease-out 0.1s backwards;
}
@keyframes scaleIn-622edc2a {
from {
    opacity: 0;
    transform: scale(0.95);
}
to {
    opacity: 1;
    transform: scale(1);
}
}

/* ===== MESSAGES ===== */
.error[data-v-622edc2a] {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
  border: 1.5px solid #ef4444;
  padding: 1rem;
  border-radius: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  animation: shake-622edc2a 0.4s ease;
}
@keyframes shake-622edc2a {
0%,
  100% {
    transform: translateX(0);
}
25% {
    transform: translateX(-5px);
}
75% {
    transform: translateX(5px);
}
}
.notice[data-v-622edc2a] {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.1);
  border: 1.5px solid #22c55e;
  padding: 1rem;
  border-radius: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  animation: slideIn-622edc2a 0.3s ease;
}
@keyframes slideIn-622edc2a {
from {
    opacity: 0;
    transform: translateX(-20px);
}
to {
    opacity: 1;
    transform: translateX(0);
}
}

/* ===== LOADING SKELETON ===== */
.skeleton-list[data-v-622edc2a] {
  display: grid;
  gap: 0.75rem;
}
.skeleton-row[data-v-622edc2a] {
  height: 80px;
  border-radius: 16px;
  background: linear-gradient(
    90deg,
    rgba(198, 146, 61, 0.05),
    rgba(198, 146, 61, 0.15),
    rgba(198, 146, 61, 0.05)
  );
  background-size: 200% 100%;
  animation: shimmer-622edc2a 1.5s ease-in-out infinite;
}
@keyframes shimmer-622edc2a {
0% {
    background-position: -200% 0;
}
100% {
    background-position: 200% 0;
}
}

/* ===== SEARCH BAR ===== */
.search[data-v-622edc2a] {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  padding: 0.75rem 1rem;
  background: var(--panel-bg);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  transition: all 0.3s ease;
}
.search[data-v-622edc2a]:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(198, 146, 61, 0.1);
  background: var(--surface);
}
.search .material-symbols-rounded[data-v-622edc2a] {
  color: var(--muted);
  font-size: 1.25rem;
  transition: color 0.3s ease;
}
.search:focus-within .material-symbols-rounded[data-v-622edc2a] {
  color: var(--accent);
}
.search-input[data-v-622edc2a] {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  padding: 0;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 500;
}
.search-input[data-v-622edc2a]::placeholder {
  color: var(--muted);
  font-weight: 400;
}
.clear-btn[data-v-622edc2a] {
  background: rgba(198, 146, 61, 0.1);
  border: none;
  color: var(--accent);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 8px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.clear-btn[data-v-622edc2a]:hover {
  background: rgba(198, 146, 61, 0.2);
  transform: scale(1.06);
}
.search-wrap[data-v-622edc2a] {
  position: relative;
  flex: 1;
}
.suggest-backdrop[data-v-622edc2a] {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 900;
}
.suggest-box[data-v-622edc2a] {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
  z-index: 1000;
  margin-top: 6px;
}
.suggest-loading[data-v-622edc2a] {
  padding: 0.5rem 0.75rem;
  color: var(--muted);
}
.suggest-list[data-v-622edc2a] {
  list-style: none;
  margin: 0;
  padding: 0.3rem 0;
  max-height: 260px;
  overflow-y: auto;
}
.suggest-item[data-v-622edc2a] {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.75rem;
  cursor: pointer;
  color: var(--text);
}
.suggest-item[data-v-622edc2a]:hover {
  background: #f8fafc;
}
.suggest-thumb[data-v-622edc2a] {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--border);
}
.suggest-info[data-v-622edc2a] {
  display: grid;
}
.suggest-name[data-v-622edc2a] {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text);
}
.suggest-name[data-v-622edc2a] {
  font-size: 0.85rem;
}
.suggest-sku[data-v-622edc2a] {
  font-size: 0.78rem;
  color: var(--muted);
}
.suggest-empty[data-v-622edc2a] {
  padding: 0.5rem 0.75rem;
  color: var(--muted);
}

/* Dark theme via data-theme attribute */
[data-theme="dark"] .suggest-box[data-v-622edc2a] {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .suggest-item[data-v-622edc2a] {
  color: #e2e8f0;
}
[data-theme="dark"] .suggest-item[data-v-622edc2a]:hover {
  background: #334155;
}
[data-theme="dark"] .suggest-thumb[data-v-622edc2a] {
  border-color: #334155;
}
[data-theme="dark"] .suggest-name[data-v-622edc2a] {
  color: #e2e8f0;
}
[data-theme="dark"] .suggest-sku[data-v-622edc2a],
[data-theme="dark"] .suggest-loading[data-v-622edc2a],
[data-theme="dark"] .suggest-empty[data-v-622edc2a] {
  color: #94a3b8;
}

/* ===== FILTERS SECTION ===== */
.filters-section[data-v-622edc2a] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* search arriba, filtros abajo */
.filter-item[data-v-622edc2a] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 1rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.filter-item[data-v-622edc2a]:hover {
  border-color: rgba(198, 146, 61, 0.4);
  box-shadow: 0 4px 12px rgba(198, 146, 61, 0.1);
  transform: translateY(-2px);
}
.filter-icon[data-v-622edc2a] {
  color: var(--accent);
  font-size: 1.5rem;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.filter-item:hover .filter-icon[data-v-622edc2a] {
  transform: scale(1.1) rotate(5deg);
}
.filter-content[data-v-622edc2a] {
  flex: 1;
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}
.filter-label[data-v-622edc2a] {
  font-size: 0.65rem;
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.filter-input[data-v-622edc2a] {
  width: 100%;
  border: none;
  background: transparent;
  outline: none;
  padding: 0;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 500;
}
.filter-input[data-v-622edc2a]:focus {
  color: var(--accent);
}
.filter-input[data-v-622edc2a]::placeholder {
  color: var(--muted);
  opacity: 0.6;
}
.order-row[data-v-622edc2a] {
  display: grid;
  grid-template-columns: 1fr 60px;
  gap: 0.5rem;
}
.filter-input-small[data-v-622edc2a] {
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
}

/* ===== QUICK FILTERS ===== */
.quick-filters[data-v-622edc2a] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.chip-filter[data-v-622edc2a] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}
.chip-filter .material-symbols-rounded[data-v-622edc2a] {
  font-size: 1.125rem;
}
.chip-filter[data-v-622edc2a]:hover {
  border-color: var(--accent);
  background: rgba(198, 146, 61, 0.1);
  color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(198, 146, 61, 0.2);
}
.chip-filter-clear[data-v-622edc2a] {
  background: #ef4444;
  border: none;
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.25);
}
.chip-filter-clear[data-v-622edc2a]:hover {
  background: #f87171;
  color: #ffffff;
  border: none;
}
.chip-filter[data-v-622edc2a]:active {
  transform: translateY(0);
}

/* ===== EMPTY STATE ===== */
.empty[data-v-622edc2a] {
  color: var(--muted);
  text-align: center;
  padding: 3rem 1rem;
  font-size: 1.125rem;
  font-weight: 500;
}
.empty .material-symbols-rounded[data-v-622edc2a] {
  font-size: 4rem;
  display: block;
  margin: 0 auto 1rem;
  opacity: 0.5;
}

/* ===== DAY GROUPS ===== */
.day-group[data-v-622edc2a] {
  display: grid;
  gap: 1rem;
  animation: fadeInUp-622edc2a 0.4s ease-out;
}
@keyframes fadeInUp-622edc2a {
from {
    opacity: 0;
    transform: translateY(20px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.day-header[data-v-622edc2a] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  position: sticky;
  top: 80px;
  z-index: 5;
  padding: 1rem 1.25rem;
  font-weight: 900;
  font-size: 1.125rem;
  color: var(--text);
  background: linear-gradient(
    90deg,
    rgba(198, 146, 61, 0.15),
    rgba(198, 146, 61, 0.05)
  );
  border-left: 4px solid var(--accent);
  border-radius: 14px;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  letter-spacing: -0.01em;
}
.day-header .material-symbols-rounded[data-v-622edc2a] {
  font-size: 1.5rem;
  color: var(--accent);
}

/* ===== SALE CARDS ===== */
.list[data-v-622edc2a] {
  display: grid;
  gap: 1.25rem;
}
.sale-card[data-v-622edc2a] {
  display: grid;
  gap: 1rem;
  border: 1.5px solid var(--border);
  background: var(--surface);
  border-radius: 18px;
  padding: 1.25rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.sale-card[data-v-622edc2a]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(198, 146, 61, 0.05), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.sale-card[data-v-622edc2a]:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  border-color: rgba(198, 146, 61, 0.5);
}
.sale-card[data-v-622edc2a]:hover::before {
  opacity: 1;
}

/* Sale Header */
.sale-header[data-v-622edc2a] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.sale-product[data-v-622edc2a] {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
  min-width: 0;
}
.thumb[data-v-622edc2a] {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    rgba(198, 146, 61, 0.15),
    rgba(240, 147, 251, 0.15)
  );
  display: grid;
  place-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
.sale-card:hover .thumb[data-v-622edc2a] {
  transform: scale(1.05) rotate(3deg);
}
.thumb img[data-v-622edc2a] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.thumb-fallback .material-symbols-rounded[data-v-622edc2a] {
  color: var(--accent);
  font-size: 2rem;
}
.product-info[data-v-622edc2a] {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}
.product-name[data-v-622edc2a] {
  font-weight: 900;
  font-size: 1.125rem;
  color: var(--text);
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-meta[data-v-622edc2a] {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 600;
}
.meta-icon[data-v-622edc2a] {
  font-size: 1rem;
}
.sale-amount[data-v-622edc2a] {
  font-weight: 900;
  font-size: 1.75rem;
  color: var(--text);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* Sale Details */
.sale-details[data-v-622edc2a] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.detail-badges[data-v-622edc2a] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex: 1;
}
.badge[data-v-622edc2a] {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.badge .material-symbols-rounded[data-v-622edc2a] {
  font-size: 1rem;
}
.badge-folio[data-v-622edc2a] {
  background: rgba(198, 146, 61, 0.1);
  color: var(--accent);
  border: 1.5px solid rgba(198, 146, 61, 0.3);
}
.badge-payment[data-v-622edc2a] {
  color: #fff;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.badge-payment.cash[data-v-622edc2a] {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}
.badge-payment.card[data-v-622edc2a] {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}
.badge-status[data-v-622edc2a] {
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.badge-status.refunded[data-v-622edc2a] {
  background: linear-gradient(135deg, #14b8a6 0%, #06b6d4 100%);
}
.badge-status.canceled[data-v-622edc2a] {
  background: linear-gradient(135deg, #ef4444 0%, #f59e0b 100%);
}

/* Sale Actions */
.sale-actions[data-v-622edc2a] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.action-btn[data-v-622edc2a] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: 12px;
  border: none;
  color: #fff;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.875rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  white-space: nowrap;
}
.action-btn .material-symbols-rounded[data-v-622edc2a] {
  font-size: 1.125rem;
}
.action-btn-ticket[data-v-622edc2a] {
  background: linear-gradient(135deg, #64748b 0%, #0ea5e9 100%);
}
.action-btn-ticket[data-v-622edc2a]:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(14, 165, 233, 0.3);
}
.action-btn-cancel[data-v-622edc2a] {
  background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
}
.action-btn-cancel[data-v-622edc2a]:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.3);
}
.action-btn[data-v-622edc2a]:active {
  transform: translateY(0);
}
.action-disabled[data-v-622edc2a] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.75rem 1rem;
}
.action-disabled .material-symbols-rounded[data-v-622edc2a] {
  font-size: 1rem;
}

/* ===== RESPONSIVE DESIGN ===== */

/* Tablet */
@media (max-width: 1024px) {
.kpis[data-v-622edc2a] {
    grid-template-columns: repeat(2, 1fr);
}
.filters-section[data-v-622edc2a] {
    grid-template-columns: repeat(2, 1fr);
}
.search[data-v-622edc2a] {
    width: 100%;
}
.day-header[data-v-622edc2a] {
    top: 70px;
}
}

/* Mobile */
@media (max-width: 640px) {
.purchases-wrap[data-v-622edc2a] {
    gap: 1.25rem;
    padding: 1rem;
}
.title[data-v-622edc2a] {
    font-size: 1.5rem;
}
.kpis[data-v-622edc2a] {
    grid-template-columns: 1fr;
    gap: 0.75rem;
}
.kpi[data-v-622edc2a] {
    padding: 1rem;
}
.kpi .icon[data-v-622edc2a] {
    font-size: 1.5rem;
    padding: 0.5rem;
}
.kpi .kpi-val[data-v-622edc2a] {
    font-size: 1.25rem;
}
.panel[data-v-622edc2a] {
    padding: 1rem;
    border-radius: 16px;
}
.filters-section[data-v-622edc2a] {
    grid-template-columns: 1fr;
}
.filter-item[data-v-622edc2a] {
    padding: 0.875rem;
}
.quick-filters[data-v-622edc2a] {
    flex-direction: column;
}
.chip-filter[data-v-622edc2a] {
    width: 100%;
    justify-content: center;
}
.day-header[data-v-622edc2a] {
    top: 60px;
    font-size: 1rem;
    padding: 0.875rem 1rem;
}
.sale-card[data-v-622edc2a] {
    padding: 1rem;
}
.sale-header[data-v-622edc2a] {
    flex-direction: column;
    align-items: flex-start;
}
.sale-product[data-v-622edc2a] {
    width: 100%;
}
.thumb[data-v-622edc2a] {
    width: 56px;
    height: 56px;
}
.product-name[data-v-622edc2a] {
    font-size: 1rem;
}
.sale-amount[data-v-622edc2a] {
    font-size: 1.5rem;
    align-self: flex-end;
}
.sale-details[data-v-622edc2a] {
    flex-direction: column;
    align-items: flex-start;
}
.detail-badges[data-v-622edc2a] {
    width: 100%;
}
.sale-actions[data-v-622edc2a] {
    width: 100%;
    justify-content: flex-start;
}
.action-btn[data-v-622edc2a] {
    flex: 1;
    justify-content: center;
}
.btn-text[data-v-622edc2a] {
    display: inline;
}
}

/* Extra small devices */
@media (max-width: 380px) {
.purchases-wrap[data-v-622edc2a] {
    padding: 0.75rem;
}
.kpi[data-v-622edc2a] {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
}
.sale-actions[data-v-622edc2a] {
    flex-direction: column;
}
.action-btn[data-v-622edc2a] {
    width: 100%;
}
.action-btn .btn-text[data-v-622edc2a] {
    display: inline;
}
}

.profile-shell[data-v-e77ecac7] {
  min-height: calc(100vh - 70px);
  padding: 1.4rem;
  max-width: 1400px;
  margin: 0 auto;
}

/* Hero Section */
.hero[data-v-e77ecac7] {
  position: relative;
  border-radius: 32px;
  overflow: hidden;
  margin-bottom: 2rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hero[data-v-e77ecac7]:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.2);
}
.hero-bg[data-v-e77ecac7] {
  position: absolute;
  inset: -40% -20% auto -20%;
  height: 500px;
  background: radial-gradient(120px 120px at 40% 30%, rgba(198, 146, 61, 0.12), transparent),
              radial-gradient(220px 220px at 60% 70%, rgba(0, 194, 168, 0.1), transparent),
              radial-gradient(160px 160px at 50% 50%, rgba(255, 149, 0, 0.08), transparent);
  filter: blur(40px) saturate(120%);
  animation: gradientShift-e77ecac7 8s ease infinite;
}
@keyframes gradientShift-e77ecac7 {
0%, 100% { transform: translate(0, 0) scale(1);
}
50% { transform: translate(20px, -20px) scale(1.1);
}
}
.hero-image[data-v-e77ecac7] {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(150%) contrast(110%) brightness(1.05);
  opacity: 1;
  transition: filter 0.6s ease, opacity 0.6s ease, transform 0.6s ease;
  animation: imageFade-e77ecac7 0.6s ease;
}
@keyframes imageFade-e77ecac7 {
from { opacity: 0; transform: scale(1.1);
}
to { opacity: 1; transform: scale(1);
}
}
.hero-overlay[data-v-e77ecac7] {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.5) 100%);
  backdrop-filter: blur(1px);
}
.hero-content[data-v-e77ecac7] {
  position: relative;
  z-index: 1;
  padding: 4rem 2rem 3rem;
  display: grid;
  justify-items: center;
  gap: 1.2rem;
}

/* Avatar */
.avatar-wrap[data-v-e77ecac7] {
  position: relative;
}
.avatar-container[data-v-e77ecac7] {
  position: relative;
  display: inline-block;
}
.avatar[data-v-e77ecac7] {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 20px 60px rgba(198, 146, 61, 0.4),
              0 0 0 8px rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: avatarFloat-e77ecac7 3s ease-in-out infinite;
}
@keyframes avatarFloat-e77ecac7 {
0%, 100% { transform: translateY(0px);
}
50% { transform: translateY(-8px);
}
}
.avatar[data-v-e77ecac7]:hover {
  transform: scale(1.05) translateY(-4px);
  box-shadow: 0 24px 80px rgba(198, 146, 61, 0.5),
              0 0 0 12px rgba(255, 255, 255, 0.15);
}
.avatar.fallback[data-v-e77ecac7] {
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 2rem;
  background: linear-gradient(135deg, #C6923D 0%, #00c2a8 100%);
  color: white;
  box-shadow: 0 20px 60px rgba(198, 146, 61, 0.4);
}
.upload-overlay[data-v-e77ecac7] {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: grid;
  place-items: center;
  backdrop-filter: blur(4px);
}
.spinner[data-v-e77ecac7] {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin-e77ecac7 0.8s linear infinite;
}
@keyframes spin-e77ecac7 {
to { transform: rotate(360deg);
}
}
.edit-avatar[data-v-e77ecac7] {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: #C6923D;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  z-index: 2;
  transition: all 0.3s ease;
}
.edit-avatar[data-v-e77ecac7]:hover {
  transform: scale(1.1) rotate(90deg);
  background: white;
  box-shadow: 0 12px 32px rgba(198, 146, 61, 0.4);
}
.edit-avatar .material-symbols-rounded[data-v-e77ecac7] {
  font-size: 20px;
}

/* Name and Meta */
.name[data-v-e77ecac7] {
  font-size: 2.2rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  margin: 0;
  letter-spacing: -0.5px;
}
.meta[data-v-e77ecac7] {
  display: inline-flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: center;
}
.chip[data-v-e77ecac7] {
  padding: 0.5rem 1rem;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.chip[data-v-e77ecac7]:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  background: rgba(255, 255, 255, 0.25);
}
.chip .material-symbols-rounded[data-v-e77ecac7] {
  font-size: 16px;
}
.chip.email[data-v-e77ecac7] {
  background: rgba(255, 255, 255, 0.2);
}

/* Stats Grid */
.stats-grid[data-v-e77ecac7] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  width: 100%;
  max-width: 800px;
  margin-top: 1rem;
}
.stat-card[data-v-e77ecac7] {
  border-radius: 20px;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.stat-card[data-v-e77ecac7]::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.95;
  z-index: 0;
}
.stat-card-blue[data-v-e77ecac7] {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}
.stat-card-blue[data-v-e77ecac7]::before {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}
.stat-card-green[data-v-e77ecac7] {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}
.stat-card-green[data-v-e77ecac7]::before {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}
.stat-card-orange[data-v-e77ecac7] {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}
.stat-card-orange[data-v-e77ecac7]::before {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}
.stat-card[data-v-e77ecac7]:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
}
.stat-card-blue[data-v-e77ecac7]:hover {
  box-shadow: 0 16px 40px rgba(79, 172, 254, 0.5);
}
.stat-card-green[data-v-e77ecac7]:hover {
  box-shadow: 0 16px 40px rgba(67, 233, 123, 0.5);
}
.stat-card-orange[data-v-e77ecac7]:hover {
  box-shadow: 0 16px 40px rgba(250, 112, 154, 0.5);
}
.stat-icon[data-v-e77ecac7] {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  display: grid;
  place-items: center;
  color: white;
  font-size: 28px;
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.stat-info[data-v-e77ecac7] {
  flex: 1;
  position: relative;
  z-index: 1;
}
.stat-value[data-v-e77ecac7] {
  font-size: 1.1rem;
  font-weight: 700;
  color: white;
  margin-bottom: 0.2rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.stat-label[data-v-e77ecac7] {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Modal */
.modal-backdrop[data-v-e77ecac7] {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  z-index: 5000;
  padding: 1rem;
  animation: fadeIn-e77ecac7 0.3s ease;
}
@keyframes fadeIn-e77ecac7 {
from { opacity: 0;
}
to { opacity: 1;
}
}
.modal[data-v-e77ecac7] {
  width: min(90vw, 700px);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--panel-bg);
  color: var(--text);
  border: 1px solid var(--panel-border);
  border-radius: 24px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.4);
  animation: modalSlide-e77ecac7 0.3s ease;
  position: relative;
}
@keyframes modalSlide-e77ecac7 {
from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
}
to {
    opacity: 1;
    transform: translateY(0) scale(1);
}
}
.modal-header[data-v-e77ecac7] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--panel-border);
  position: sticky;
  top: 0;
  background: var(--panel-bg);
  z-index: 10;
  backdrop-filter: blur(10px);
}
.modal-header h3[data-v-e77ecac7] {
  margin: 0;
  font-weight: 800;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.modal-header .material-symbols-rounded[data-v-e77ecac7] {
  font-size: 24px;
  color: var(--accent);
}
.close-btn[data-v-e77ecac7] {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: none;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.2s ease;
}
.close-btn[data-v-e77ecac7]:hover {
  background: var(--accent);
  color: white;
  transform: rotate(90deg);
}
.edit-form[data-v-e77ecac7] {
  padding: 2rem;
  display: grid;
  gap: 2rem;
}
.form-section[data-v-e77ecac7] {
  display: grid;
  gap: 1.2rem;
}
.section-title[data-v-e77ecac7] {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 0.8rem;
  border-bottom: 2px solid var(--panel-border);
}
.section-title .material-symbols-rounded[data-v-e77ecac7] {
  font-size: 20px;
  color: var(--accent);
}

/* Avatar Upload */
.avatar-upload[data-v-e77ecac7] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}
.avatar-preview[data-v-e77ecac7] {
  position: relative;
}
.preview-avatar[data-v-e77ecac7] {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--panel-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.preview-avatar.fallback[data-v-e77ecac7] {
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 2rem;
  background: linear-gradient(135deg, #C6923D 0%, #00c2a8 100%);
  color: white;
}
.upload-label[data-v-e77ecac7] {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.4rem;
  border-radius: 12px;
  background: var(--surface);
  border: 2px dashed var(--panel-border);
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 600;
  color: var(--text);
}
.upload-label[data-v-e77ecac7]:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(198, 146, 61, 0.3);
}
.upload-label input[data-v-e77ecac7] {
  display: none;
}
.upload-label .material-symbols-rounded[data-v-e77ecac7] {
  font-size: 20px;
}

/* Fields */
.field[data-v-e77ecac7] {
  display: grid;
  gap: 0.6rem;
}
.field label[data-v-e77ecac7] {
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
}
.field label .material-symbols-rounded[data-v-e77ecac7] {
  font-size: 18px;
  color: var(--accent);
}
.field input[data-v-e77ecac7],
.field select[data-v-e77ecac7] {
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 2px solid var(--panel-border);
  background: var(--surface);
  color: var(--text);
  font-size: 1rem;
  transition: all 0.3s ease;
}
.field input[data-v-e77ecac7]:focus,
.field select[data-v-e77ecac7]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(198, 146, 61, 0.1);
}
.select-modern[data-v-e77ecac7] {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  background-size: 20px;
  padding-right: 3rem;
}
.field select option[data-v-e77ecac7] {
  background: var(--panel-bg);
  color: var(--text);
  padding: 0.5rem;
}

/* Actions */
.actions[data-v-e77ecac7] {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  padding-top: 1rem;
  border-top: 1px solid var(--panel-border);
}
.btn[data-v-e77ecac7] {
  padding: 0.75rem 1.5rem;
  border-radius: 12px;
  border: 2px solid transparent;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
}
.btn .material-symbols-rounded[data-v-e77ecac7] {
  font-size: 20px;
}
.btn.ghost[data-v-e77ecac7] {
  background: var(--surface);
  color: var(--text);
  border-color: var(--panel-border);
}
.btn.ghost[data-v-e77ecac7]:hover {
  background: var(--panel-bg);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.btn.primary[data-v-e77ecac7] {
  background: linear-gradient(135deg, #C6923D 0%, #00c2a8 100%);
  color: white;
  border: none;
  box-shadow: 0 4px 16px rgba(198, 146, 61, 0.4);
}
.btn.primary[data-v-e77ecac7]:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(198, 146, 61, 0.5);
}

/* Modal Transitions */
.modal-enter-active[data-v-e77ecac7],
.modal-leave-active[data-v-e77ecac7] {
  transition: opacity 0.3s ease;
}
.modal-enter-from[data-v-e77ecac7],
.modal-leave-to[data-v-e77ecac7] {
  opacity: 0;
}

/* Responsive */
@media (max-width: 768px) {
.profile-shell[data-v-e77ecac7] {
    padding: 1rem;
}
.hero-content[data-v-e77ecac7] {
    padding: 3rem 1.5rem 2rem;
}
.avatar[data-v-e77ecac7] {
    width: 120px;
    height: 120px;
}
.name[data-v-e77ecac7] {
    font-size: 1.8rem;
}
.stats-grid[data-v-e77ecac7] {
    grid-template-columns: 1fr;
    gap: 0.8rem;
}
.stat-card[data-v-e77ecac7] {
    padding: 1.2rem;
}
.modal[data-v-e77ecac7] {
    width: 95vw;
    border-radius: 20px;
}
.modal-header[data-v-e77ecac7] {
    padding: 1.2rem 1.5rem;
}
.edit-form[data-v-e77ecac7] {
    padding: 1.5rem;
    gap: 1.5rem;
}
.actions[data-v-e77ecac7] {
    flex-direction: column;
}
.btn[data-v-e77ecac7] {
    width: 100%;
    justify-content: center;
}
}
@media (max-width: 480px) {
.hero-content[data-v-e77ecac7] {
    padding: 2.5rem 1rem 1.5rem;
}
.avatar[data-v-e77ecac7] {
    width: 100px;
    height: 100px;
}
.name[data-v-e77ecac7] {
    font-size: 1.5rem;
}
.chip[data-v-e77ecac7] {
    font-size: 0.75rem;
    padding: 0.4rem 0.8rem;
}
}

.menu-page[data-v-f09a7bdc] {
  background: linear-gradient(135deg, #0a0b14 0%, #1a1610 100%);
  min-height: 100vh;
  padding-bottom: 80px;
  min-height: 100vh;
}
.menu-header[data-v-f09a7bdc] {
  text-align: center;
  padding: 3rem 1rem 2rem;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.05) 100%);
}
.menu-header h1[data-v-f09a7bdc] {
  font-size: 2.5rem;
  font-weight: 800;
  margin: 0;
  background: var(--accent-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.02em;
}
.subtitle[data-v-f09a7bdc] {
  color: var(--muted);
  font-size: 1.1rem;
  margin-top: 0.5rem;
}

/* Category Nav */
.category-nav-wrapper[data-v-f09a7bdc] {
  position: sticky;
  top: 65px;
  /* Adjust based on topbar height */
  z-index: 100;
  background: rgba(var(--bg-rgb), 0.95);
  /* We might need to define bg-rgb or assume var(--bg) is enough */
  background: var(--bg);
  backdrop-filter: blur(12px);
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
.category-nav[data-v-f09a7bdc] {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding: 0 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
  scrollbar-width: none;
}
.category-nav[data-v-f09a7bdc]::-webkit-scrollbar {
  display: none;
}
.cat-pill[data-v-f09a7bdc] {
  padding: 0.5rem 1.25rem;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 0.9rem;
}
.cat-pill[data-v-f09a7bdc]:hover {
  background: var(--surface-2);
  color: var(--text);
  transform: translateY(-1px);
}
.cat-pill.active[data-v-f09a7bdc] {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(198, 146, 61, 0.3);
}

/* Grid */
.menu-container[data-v-f09a7bdc] {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}
.products-grid[data-v-f09a7bdc] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
}

/* Cards */
.menu-card[data-v-f09a7bdc] {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1.5rem;
  overflow: hidden;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  position: relative;
}
.menu-card[data-v-f09a7bdc]:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
  border-color: rgba(198, 146, 61, 0.3);
}
.card-image[data-v-f09a7bdc] {
  height: 200px;
  width: 100%;
  position: relative;
  overflow: hidden;
  background: var(--surface-2);
}
.card-image img[data-v-f09a7bdc] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.menu-card:hover .card-image img[data-v-f09a7bdc] {
  transform: scale(1.05);
}
.image-fallback[data-v-f09a7bdc] {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  opacity: 0.5;
}
.image-fallback span[data-v-f09a7bdc] {
  font-size: 4rem;
}
.category-badge[data-v-f09a7bdc] {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.card-content[data-v-f09a7bdc] {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.card-header[data-v-f09a7bdc] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.5rem;
  gap: 1rem;
}
.product-name[data-v-f09a7bdc] {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  line-height: 1.3;
}
.product-price[data-v-f09a7bdc] {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--accent-2);
  white-space: nowrap;
}
.product-desc[data-v-f09a7bdc] {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0 0 1.5rem 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}
.product-desc.muted[data-v-f09a7bdc] {
  font-style: italic;
  opacity: 0.7;
}



/* States */
.loading-state[data-v-f09a7bdc],
.error-state[data-v-f09a7bdc],
.empty-state[data-v-f09a7bdc] {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--muted);
}
.spinner[data-v-f09a7bdc] {
  width: 40px;
  height: 40px;
  border: 4px solid var(--surface-2);
  border-top-color: var(--accent);
  border-radius: 50%;
  display: inline-block;
  animation: spin-f09a7bdc 1s linear infinite;
  margin-bottom: 1rem;
}
@keyframes spin-f09a7bdc {
to {
    transform: rotate(360deg);
}
}
.retry-btn[data-v-f09a7bdc] {
  margin-top: 1rem;
  padding: 0.5rem 1.5rem;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 0.5rem;
  font-weight: 600;
  cursor: pointer;
}

/* Transitions */
.grid-enter-active[data-v-f09a7bdc],
.grid-leave-active[data-v-f09a7bdc] {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.grid-enter-from[data-v-f09a7bdc],
.grid-leave-to[data-v-f09a7bdc] {
  opacity: 0;
  transform: translateY(20px);
}
.grid-leave-active[data-v-f09a7bdc] {
  position: absolute;
}

.sales-wrap[data-v-194cb106] {
  display: grid;
  gap: 1.5rem;
  padding: 1.2rem;
  max-width: 1600px;
  margin: 0 auto;
  background: linear-gradient(135deg, #0a0b14 0%, #1a1610 100%);
  min-height: 100vh;
}
.top[data-v-194cb106] {
  display: grid;
  gap: 0.2rem;
}
.title[data-v-194cb106] {
  font-size: 1.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, #C6923D 0%, #DFC05E 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.subtitle[data-v-194cb106] {
  color: var(--muted);
  font-size: 0.95rem;
}

/* Statistics Cards */
.stats-grid[data-v-194cb106] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.25rem;
  margin-bottom: 0.5rem;
}
.stat-card[data-v-194cb106] {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem;
  border-radius: 12px;
  background: rgba(20, 24, 30, 0.95);
  border: 1px solid rgba(198, 146, 61, 0.3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.stat-card.today[data-v-194cb106] {
  background: #fed7aa;
  border-color: #f59e0b;
}
.stat-card.month[data-v-194cb106] {
  background: rgba(223, 192, 94, 0.2);
  border-color: rgba(198, 146, 61, 0.5);
}
.stat-card.total[data-v-194cb106] {
  background: #d1fae5;
  border-color: #10b981;
}
.stat-card.avg[data-v-194cb106] {
  background: #fce7f3;
  border-color: #d946ef;
}
.stat-card[data-v-194cb106]:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.stat-icon[data-v-194cb106] {
  font-size: 48px;
  color: #DFC05E;
  background: rgba(198, 146, 61, 0.2);
  padding: 1rem;
  border-radius: 14px;
  transition: transform 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  min-height: 64px;
}
.stat-card.today .stat-icon[data-v-194cb106] {
  background: #f59e0b;
  color: #ffffff;
}
.stat-card.month .stat-icon[data-v-194cb106] {
  background: rgba(198, 146, 61, 0.4);
  color: #DFC05E;
}
.stat-card.total .stat-icon[data-v-194cb106] {
  background: #34d399;
  color: #065f46;
}
.stat-card.avg .stat-icon[data-v-194cb106] {
  background: #f9a8d4;
  color: #7c3aed;
}
.stat-card:hover .stat-icon[data-v-194cb106] {
  transform: scale(1.05);
}
.stat-content[data-v-194cb106] {
  display: grid;
  gap: 0.3rem;
  flex: 1;
}
.stat-label[data-v-194cb106] {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.25rem;
}
.stat-value[data-v-194cb106] {
  font-size: 1.875rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1;
  margin-bottom: 0.125rem;
}
.stat-sub[data-v-194cb106] {
  font-size: 0.875rem;
  color: #6b7280;
  font-weight: 500;
}
.stat-card.today .stat-label[data-v-194cb106],
.stat-card.today .stat-value[data-v-194cb106],
.stat-card.today .stat-sub[data-v-194cb106] {
  color: rgba(255, 255, 255, 0.9);
}
.stat-card.month .stat-label[data-v-194cb106],
.stat-card.month .stat-value[data-v-194cb106],
.stat-card.month .stat-sub[data-v-194cb106] {
  color: rgba(255, 255, 255, 0.9);
}
.stat-card.total .stat-label[data-v-194cb106],
.stat-card.total .stat-value[data-v-194cb106],
.stat-card.total .stat-sub[data-v-194cb106] {
  color: rgba(255, 255, 255, 0.9);
}
.stat-card.avg .stat-label[data-v-194cb106],
.stat-card.avg .stat-value[data-v-194cb106],
.stat-card.avg .stat-sub[data-v-194cb106] {
  color: rgba(255, 255, 255, 0.9);
}

/* Filters */
.filters[data-v-194cb106] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  padding: 1.5rem;
  border-radius: 12px;
  background: rgba(20, 24, 30, 0.95);
  border: 1px solid rgba(198, 146, 61, 0.3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.filter-field[data-v-194cb106] {
  display: grid;
  gap: 0.5rem;
}
.search-wrap[data-v-194cb106] {
  position: relative;
}
.suggest-backdrop[data-v-194cb106] {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 900;
}
.suggest-box[data-v-194cb106] {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
  z-index: 1000;
  margin-top: 6px;
}
.suggest-loading[data-v-194cb106] {
  padding: 0.6rem 0.8rem;
  color: var(--muted);
}
.suggest-list[data-v-194cb106] {
  list-style: none;
  margin: 0;
  padding: 0.4rem 0;
  max-height: 300px;
  overflow-y: auto;
}
.suggest-item[data-v-194cb106] {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.8rem;
  cursor: pointer;
}
.suggest-item[data-v-194cb106]:hover {
  background: #f8fafc;
}
.suggest-thumb[data-v-194cb106] {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid #e5e7eb;
}
.suggest-info[data-v-194cb106] {
  display: grid;
}
.suggest-name[data-v-194cb106] {
  font-weight: 600;
}
.suggest-sku[data-v-194cb106] {
  font-size: 0.8rem;
  color: var(--muted);
}
.suggest-empty[data-v-194cb106] {
  padding: 0.6rem 0.8rem;
  color: var(--muted);
}
.filter-label[data-v-194cb106] {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.filter-label .material-symbols-rounded[data-v-194cb106] {
  font-size: 18px;
}
.filter-input[data-v-194cb106] {
  padding: 0.6rem 0.9rem;
  border-radius: 8px;
  border: 1px solid rgba(198, 146, 61, 0.3);
  background: rgba(20, 24, 30, 0.8);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.875rem;
  font-weight: 400;
  transition: all 0.2s ease;
}
.filter-input[data-v-194cb106]:hover {
  border-color: #9ca3af;
}
.filter-input[data-v-194cb106]:focus {
  outline: none;
  border-color: rgba(198, 146, 61, 0.6);
  box-shadow: 0 0 0 3px rgba(198, 146, 61, 0.2);
}
.btn-clear[data-v-194cb106] {
  align-self: end;
  padding: 0.75rem 1.5rem;
  border-radius: 14px;
  border: none;
  background: linear-gradient(135deg, #f43f5e, #e11d48);
  color: white;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(244, 63, 94, 0.2);
}
.btn-clear[data-v-194cb106]:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(244, 63, 94, 0.3);
}
.btn-clear[data-v-194cb106]:active {
  transform: translateY(0);
}

/* Table */
.table-container[data-v-194cb106] {
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.table-scroll[data-v-194cb106] {
  overflow-x: auto;
}
.table-header-info[data-v-194cb106] {
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg,
      rgba(124, 92, 255, 0.05),
      rgba(37, 99, 235, 0.05));
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-weight: 600;
  font-size: 0.9rem;
}

/* Pagination */
.pagination[data-v-194cb106] {
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  background: linear-gradient(135deg,
      rgba(124, 92, 255, 0.02),
      rgba(37, 99, 235, 0.02));
}
.pagination-info[data-v-194cb106] {
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 600;
}
.pagination-pages[data-v-194cb106] {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.pagination-btn[data-v-194cb106] {
  padding: 0.5rem 0.9rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 40px;
  text-align: center;
}
.pagination-btn[data-v-194cb106]:hover:not(:disabled) {
  background: rgba(124, 92, 255, 0.1);
  border-color: var(--accent);
  color: var(--accent);
}
.pagination-btn.active[data-v-194cb106] {
  background: linear-gradient(135deg, #7c5cff, #2563eb);
  color: white;
  border-color: transparent;
}
.pagination-btn[data-v-194cb106]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.pagination-ellipsis[data-v-194cb106] {
  padding: 0.5rem;
  color: var(--muted);
}
.sales-table[data-v-194cb106] {
  width: 100%;
  border-collapse: collapse;
}
.sales-table thead[data-v-194cb106] {
  background: linear-gradient(135deg,
      rgba(124, 92, 255, 0.12),
      rgba(37, 99, 235, 0.12));
}
.sales-table th[data-v-194cb106] {
  padding: 1rem;
  text-align: center;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text);
  border-bottom: 2px solid rgba(124, 92, 255, 0.2);
}
.sales-table td[data-v-194cb106] {
  padding: 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
  color: var(--text);
  text-align: center;
  vertical-align: middle;
}
.sale-row[data-v-194cb106] {
  transition: background 0.2s ease;
}
.sale-row[data-v-194cb106]:hover {
  background: rgba(124, 92, 255, 0.05);
}
.cell-doc[data-v-194cb106] {
  display: grid;
  gap: 0.2rem;
  place-items: center;
}
.doc-id[data-v-194cb106] {
  font-weight: 700;
  color: #7c5cff;
}
.doc-num[data-v-194cb106] {
  font-size: 0.85rem;
  color: var(--muted);
}
.payment-badge[data-v-194cb106] {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  background: #d1fae5;
  color: #065f46;
  font-size: 0.8125rem;
  font-weight: 600;
}
.payment-badge.card[data-v-194cb106] {
  background: #dbeafe;
  color: #1e40af;
}
.badge-icon[data-v-194cb106] {
  font-size: 16px;
}
.discount-cell[data-v-194cb106] {
  color: #ef4444;
  font-weight: 600;
}
.total-cell[data-v-194cb106] {
  font-weight: 700;
  font-size: 1.05rem;
  color: #10b981;
}

/* Product images in table */
.sales-table .product-image-cell[data-v-194cb106] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.sales-table .product-image[data-v-194cb106] {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}
.sales-table .no-image[data-v-194cb106] {
  font-size: 0.75rem;
  color: var(--muted);
  font-style: italic;
}
.btn-detail[data-v-194cb106] {
  padding: 0.5rem 0.9rem;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, #7c5cff, #2563eb);
  color: white;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-detail[data-v-194cb106]:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(124, 92, 255, 0.3);
}
.empty-state[data-v-194cb106] {
  padding: 3rem;
  text-align: center;
  color: var(--muted);
}
.empty-icon[data-v-194cb106] {
  font-size: 64px;
  opacity: 0.3;
}
.empty-text[data-v-194cb106] {
  margin-top: 1rem;
  font-size: 1.1rem;
}

/* Modal */
.modal-overlay[data-v-194cb106] {
  position: fixed;
  inset: 0;
  background: radial-gradient(1200px 600px at 20% 20%,
      rgba(124, 92, 255, 0.14),
      rgba(0, 194, 168, 0.12)),
    rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px) saturate(120%);
  display: grid;
  place-items: center;
  z-index: 99999;
  padding: 1rem;
  overflow-y: auto;
}
.modal[data-v-194cb106] {
  background: var(--panel-bg);
  border-radius: 20px;
  max-width: 940px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.28);
  border: 1px solid var(--panel-border);
  animation: modalIn-194cb106 220ms ease-out;
}
.modal-header[data-v-194cb106] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid var(--panel-border);
  position: sticky;
  top: 0;
  background: var(--exotic-gradient-soft);
  z-index: 10;
}
.modal-title[data-v-194cb106] {
  font-size: 1.25rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text);
}
.modal-title-text[data-v-194cb106] {
  letter-spacing: 0.2px;
}
.modal-icon[data-v-194cb106] {
  font-size: 24px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid var(--panel-border);
  color: var(--icon-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
}
.id-chip[data-v-194cb106] {
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  background: rgba(124, 92, 255, 0.15);
  color: var(--accent);
  font-weight: 700;
  border: 1px solid rgba(124, 92, 255, 0.35);
  font-size: 0.85rem;
}
.btn-close[data-v-194cb106] {
  padding: 0.5rem;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.btn-close[data-v-194cb106]:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}
.modal-loading[data-v-194cb106] {
  padding: 3rem;
  text-align: center;
}
.modal-body[data-v-194cb106] {
  padding: 1.25rem 1.5rem;
  display: grid;
  gap: 1.25rem;
}
.modal-section[data-v-194cb106] {
  display: grid;
  gap: 1rem;
  background: var(--surface-2);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  padding: 1rem;
}
.section-title[data-v-194cb106] {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
  padding-bottom: 0.5rem;
  border-bottom: 2px solid rgba(124, 92, 255, 0.2);
}
.info-grid[data-v-194cb106] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}
.info-item[data-v-194cb106] {
  display: grid;
  gap: 0.3rem;
}
.info-label[data-v-194cb106] {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
}
.info-value[data-v-194cb106] {
  font-size: 0.95rem;
  color: var(--text);
}
.items-table-scroll[data-v-194cb106] {
  overflow: auto;
  max-height: 42vh;
  border: 1px solid var(--panel-border);
  border-radius: 12px;
}
.items-table[data-v-194cb106] {
  width: 100%;
  border-collapse: collapse;
}
.items-table th[data-v-194cb106] {
  padding: 0.8rem;
  text-align: left;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--muted);
  border-bottom: 2px solid var(--panel-border);
  position: sticky;
  top: 0;
  background: var(--panel-bg);
}
.items-table td[data-v-194cb106] {
  padding: 0.8rem;
  border-bottom: 1px solid var(--panel-border);
  font-size: 0.9rem;
}
.items-table tbody tr[data-v-194cb106]:nth-child(even) {
  background: rgba(124, 92, 255, 0.06);
}
.items-table td[data-v-194cb106]:nth-child(3),
.items-table td[data-v-194cb106]:nth-child(4),
.items-table td[data-v-194cb106]:nth-child(5),
.items-table td[data-v-194cb106]:nth-child(6),
.items-table td[data-v-194cb106]:nth-child(7) {
  text-align: right;
}
.items-table th[data-v-194cb106]:nth-child(3),
.items-table th[data-v-194cb106]:nth-child(4),
.items-table th[data-v-194cb106]:nth-child(5),
.items-table th[data-v-194cb106]:nth-child(6),
.items-table th[data-v-194cb106]:nth-child(7) {
  text-align: right;
}
.item-name[data-v-194cb106] {
  font-weight: 600;
  color: var(--text);
}
.item-sku[data-v-194cb106] {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.2rem;
}
.product-image-cell[data-v-194cb106] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-image[data-v-194cb106] {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}
.no-image[data-v-194cb106] {
  font-size: 0.75rem;
  color: var(--muted);
  font-style: italic;
}
.item-total[data-v-194cb106] {
  font-weight: 700;
  color: #10b981;
}
.totals-section[data-v-194cb106] {
  background: linear-gradient(135deg,
      rgba(124, 92, 255, 0.06),
      rgba(0, 194, 168, 0.06));
  padding: 1.2rem;
  border-radius: 16px;
  border: 1px solid var(--panel-border);
}
.total-row[data-v-194cb106] {
  display: flex;
  justify-content: space-between;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
}
.total-row[data-v-194cb106]:last-child {
  border-bottom: none;
}
.total-label[data-v-194cb106] {
  font-weight: 600;
  color: var(--muted);
}
.mini-badge[data-v-194cb106] {
  margin-left: 0.5rem;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: rgba(124, 92, 255, 0.1);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.8rem;
}
.total-value[data-v-194cb106] {
  font-weight: 700;
  color: var(--text);
}
.total-value.discount[data-v-194cb106] {
  color: #ef4444;
}
.grand-total[data-v-194cb106] {
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 2px solid rgba(124, 92, 255, 0.3);
}
.grand-total .total-label[data-v-194cb106] {
  font-size: 1.1rem;
  color: var(--text);
}
.grand-total .total-value[data-v-194cb106] {
  font-size: 1.3rem;
  color: #10b981;
}
.muted[data-v-194cb106] {
  color: var(--muted);
}

/* Responsive */
@media (max-width: 768px) {
.stats-grid[data-v-194cb106] {
    grid-template-columns: 1fr;
}
.filters[data-v-194cb106] {
    grid-template-columns: 1fr;
}
.table-scroll[data-v-194cb106] {
    font-size: 0.85rem;
}
.sales-table th[data-v-194cb106],
  .sales-table td[data-v-194cb106] {
    padding: 0.7rem 0.5rem;
}
.info-grid[data-v-194cb106] {
    grid-template-columns: 1fr;
}
}
@keyframes modalIn-194cb106 {
from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
}
to {
    opacity: 1;
    transform: translateY(0) scale(1);
}
}

/* Buttons */
.btn-detail[data-v-194cb106],
.btn-print[data-v-194cb106] {
  width: 80px;
  /* equal width */
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  transition: background 0.2s;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}
.btn-detail[data-v-194cb106] {
  background: #2563eb;
  color: white;
}
.btn-detail[data-v-194cb106]:hover {
  background: #1e40af;
}
.btn-print[data-v-194cb106] {
  background: #10b981;
  color: white;
}
.btn-print[data-v-194cb106]:hover {
  background: #059669;
}

/* Dark Mode Support */
.sales-wrap[data-v-194cb106] {
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
.sales-wrap[data-v-194cb106] {
    color-scheme: dark;
}

  /* Stat Cards - Colores oscuros para mejor contraste */
.stat-card.today[data-v-194cb106] {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    border-color: #ea580c;
}
.stat-card.month[data-v-194cb106] {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    border-color: #1e40af;
}
.stat-card.total[data-v-194cb106] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-color: #059669;
}
.stat-card.avg[data-v-194cb106] {
    background: linear-gradient(135deg, #d946ef 0%, #c026d3 100%);
    border-color: #c026d3;
}

  /* Text color for dark stat cards */
.stat-card.today .stat-label[data-v-194cb106],
  .stat-card.today .stat-value[data-v-194cb106],
  .stat-card.today .stat-sub[data-v-194cb106],
  .stat-card.month .stat-label[data-v-194cb106],
  .stat-card.month .stat-value[data-v-194cb106],
  .stat-card.month .stat-sub[data-v-194cb106],
  .stat-card.total .stat-label[data-v-194cb106],
  .stat-card.total .stat-value[data-v-194cb106],
  .stat-card.total .stat-sub[data-v-194cb106],
  .stat-card.avg .stat-label[data-v-194cb106],
  .stat-card.avg .stat-value[data-v-194cb106],
  .stat-card.avg .stat-sub[data-v-194cb106] {
    color: #ffffff;
}

  /* Icon background for dark cards */
.stat-card.today .stat-icon[data-v-194cb106] {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}
.stat-card.month .stat-icon[data-v-194cb106] {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}
.stat-card.total .stat-icon[data-v-194cb106] {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}
.stat-card.avg .stat-icon[data-v-194cb106] {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

  /* Filters section */
.filters[data-v-194cb106] {
    background: #1e293b !important;
    border-color: #334155 !important;
}
.filter-input[data-v-194cb106] {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}
.filter-input[data-v-194cb106]:hover {
    border-color: #475569 !important;
}
.filter-input[data-v-194cb106]:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
}
.filter-label[data-v-194cb106] {
    color: #94a3b8 !important;
}

  /* Table */
.table-container[data-v-194cb106] {
    background: #1e293b !important;
    border-color: #334155 !important;
}
.sales-table[data-v-194cb106] {
    background: #1e293b !important;
}
.sales-table thead[data-v-194cb106] {
    background: #0f172a !important;
}
.sales-table th[data-v-194cb106] {
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}
.sales-table td[data-v-194cb106] {
    color: #cbd5e1 !important;
    border-color: #334155 !important;
}
.sale-row[data-v-194cb106] {
    background: #1e293b !important;
}
.sale-row[data-v-194cb106]:hover {
    background: #334155 !important;
}

  /* Suggestions box */
.suggest-box[data-v-194cb106] {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
}
.suggest-item[data-v-194cb106]:hover {
    background: #334155;
}
.suggest-loading[data-v-194cb106],
  .suggest-empty[data-v-194cb106] {
    color: #94a3b8;
}
.suggest-name[data-v-194cb106] {
    color: #e2e8f0;
}
.suggest-sku[data-v-194cb106] {
    color: #94a3b8;
}

  /* Modal */
.modal[data-v-194cb106] {
    background: #1e293b;
    border-color: #334155;
}
.modal-header[data-v-194cb106] {
    background: #0f172a;
    border-color: #334155;
}
.modal-title[data-v-194cb106] {
    color: #e2e8f0;
}
.section-title[data-v-194cb106] {
    color: #e2e8f0;
}
.info-label[data-v-194cb106] {
    color: #94a3b8;
}
.info-value[data-v-194cb106] {
    color: #cbd5e1;
}
.items-table[data-v-194cb106] {
    background: #0f172a;
}
.items-table th[data-v-194cb106] {
    color: #e2e8f0;
    background: #0f172a;
    border-color: #334155;
}
.items-table td[data-v-194cb106] {
    color: #cbd5e1;
    border-color: #334155;
}
.modal-overlay[data-v-194cb106] {
    background: rgba(0, 0, 0, 0.7);
}
.pagination[data-v-194cb106] {
    background: #0f172a;
    border-color: #334155;
}
.pagination-info[data-v-194cb106] {
    color: #94a3b8;
}
.pagination-btn[data-v-194cb106] {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}
.pagination-btn[data-v-194cb106]:hover:not(:disabled) {
    background: #334155;
    border-color: #6366f1;
    color: #a5b4fc;
}
.pagination-ellipsis[data-v-194cb106] {
    color: #64748b;
}

  /* Empty state */
.empty-state[data-v-194cb106] {
    color: #94a3b8;
}
.empty-icon[data-v-194cb106] {
    color: #64748b;
}

  /* Product images */
.no-image[data-v-194cb106] {
    background: #334155;
    color: #94a3b8;
}
}

/* Light mode */
@media (prefers-color-scheme: light) {
.sales-wrap[data-v-194cb106] {
    color-scheme: light;
}
}
:root[data-theme="dark"] .sales-wrap[data-v-194cb106] {
  color-scheme: dark;
}

/* Force Light Mode - Overrides system dark mode */
:root[data-theme="light"] {
&[data-v-194cb106] {

  /* Stat Cards */

  /* Filters */

  /* Table */

  /* Pagination */

  /* Modal */
  }
.sales-wrap[data-v-194cb106] {
    color-scheme: light;
}
.stat-card.today[data-v-194cb106] {
    background: #fed7aa !important;
    border-color: #f59e0b !important;
}
.stat-card.today .stat-label[data-v-194cb106], .stat-card.today .stat-value[data-v-194cb106], .stat-card.today .stat-sub[data-v-194cb106] { color: #111827 !important;
}
.stat-card.today .stat-icon[data-v-194cb106] { background: #f59e0b !important; color: #ffffff !important;
}
.stat-card.month[data-v-194cb106] {
    background: #dbeafe !important;
    border-color: #2563eb !important;
}
.stat-card.month .stat-label[data-v-194cb106], .stat-card.month .stat-value[data-v-194cb106], .stat-card.month .stat-sub[data-v-194cb106] { color: #111827 !important;
}
.stat-card.month .stat-icon[data-v-194cb106] { background: #93c5fd !important; color: #1e40af !important;
}
.stat-card.total[data-v-194cb106] {
    background: #d1fae5 !important;
    border-color: #10b981 !important;
}
.stat-card.total .stat-label[data-v-194cb106], .stat-card.total .stat-value[data-v-194cb106], .stat-card.total .stat-sub[data-v-194cb106] { color: #111827 !important;
}
.stat-card.total .stat-icon[data-v-194cb106] { background: #34d399 !important; color: #065f46 !important;
}
.stat-card.avg[data-v-194cb106] {
    background: #fce7f3 !important;
    border-color: #d946ef !important;
}
.stat-card.avg .stat-label[data-v-194cb106], .stat-card.avg .stat-value[data-v-194cb106], .stat-card.avg .stat-sub[data-v-194cb106] { color: #111827 !important;
}
.stat-card.avg .stat-icon[data-v-194cb106] { background: #f9a8d4 !important; color: #7c3aed !important;
}
.filters[data-v-194cb106] {
    background: #ffffff !important;
    border-color: #e5e7eb !important;
}
.filter-input[data-v-194cb106] {
    background: #ffffff !important;
    border-color: #d1d5db !important;
    color: #111827 !important;
    color-scheme: light !important;
}
.filter-input option[data-v-194cb106] {
    background-color: #ffffff !important;
    color: #111827 !important;
}
.filter-label[data-v-194cb106] {
    color: #6b7280 !important;
}
.table-container[data-v-194cb106] {
    background: #ffffff !important;
    border-color: #e5e7eb !important;
}
.sales-table[data-v-194cb106] {
    background: transparent !important;
}
.sales-table thead[data-v-194cb106] {
    background: linear-gradient(135deg, rgba(124, 92, 255, 0.12), rgba(37, 99, 235, 0.12)) !important;
}
.sales-table th[data-v-194cb106] {
    color: #111827 !important;
    border-color: rgba(124, 92, 255, 0.2) !important;
    background: transparent !important;
}
.sales-table td[data-v-194cb106] {
    color: #111827 !important;
    border-color: #e5e7eb !important;
}
.sale-row[data-v-194cb106] {
    background: transparent !important;
}
.sale-row[data-v-194cb106]:hover {
    background: rgba(124, 92, 255, 0.05) !important;
}
.pagination[data-v-194cb106] {
    background: linear-gradient(135deg, rgba(124, 92, 255, 0.02), rgba(37, 99, 235, 0.02)) !important;
    border-color: #e5e7eb !important;
}
.pagination-btn[data-v-194cb106] {
    background: #ffffff !important;
    border-color: #e5e7eb !important;
    color: #111827 !important;
}
.pagination-info[data-v-194cb106] {
    color: #6b7280 !important;
}
.modal[data-v-194cb106] {
    background: #ffffff !important;
    border-color: #e5e7eb !important;
}
.modal-header[data-v-194cb106] {
    background: #ffffff !important;
    border-color: #e5e7eb !important;
}
.modal-title[data-v-194cb106], .section-title[data-v-194cb106] {
    color: #111827 !important;
}
.info-label[data-v-194cb106] {
    color: #6b7280 !important;
}
.info-value[data-v-194cb106] {
    color: #111827 !important;
}
.items-table[data-v-194cb106] {
    background: transparent !important;
}
.items-table th[data-v-194cb106] {
    background: #ffffff !important;
    color: #6b7280 !important;
    border-color: #e5e7eb !important;
}
.items-table td[data-v-194cb106] {
    color: #111827 !important;
    border-color: #e5e7eb !important;
}
.no-image[data-v-194cb106] {
    background: #f3f4f6 !important;
    color: #9ca3af !important;
}
.suggest-box[data-v-194cb106] {
    background: #ffffff !important;
    border-color: #e5e7eb !important;
}
.suggest-item[data-v-194cb106]:hover {
    background: #f8fafc !important;
}
.suggest-name[data-v-194cb106] {
    color: #111827 !important;
}
.suggest-sku[data-v-194cb106] {
    color: #6b7280 !important;
}
.empty-state[data-v-194cb106] {
    color: #6b7280 !important;
}
.empty-icon[data-v-194cb106] {
    color: #d1d5db !important;
}
}

/* Dark Mode Support */
.sales-wrap[data-v-194cb106] {
  color-scheme: light dark;
}

/* Dark mode via system preference OR manual toggle */
@media (prefers-color-scheme: dark) {
.sales-wrap[data-v-194cb106] {
    color-scheme: dark;
}

  /* Stat Cards - Colores oscuros para mejor contraste */
.stat-card.today[data-v-194cb106] {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    border-color: #ea580c;
}
.stat-card.month[data-v-194cb106] {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    border-color: #1e40af;
}
.stat-card.total[data-v-194cb106] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-color: #059669;
}
.stat-card.avg[data-v-194cb106] {
    background: linear-gradient(135deg, #d946ef 0%, #c026d3 100%);
    border-color: #c026d3;
}

  /* Text color for dark stat cards */
.stat-card.today .stat-label[data-v-194cb106],
  .stat-card.today .stat-value[data-v-194cb106],
  .stat-card.today .stat-sub[data-v-194cb106],
  .stat-card.month .stat-label[data-v-194cb106],
  .stat-card.month .stat-value[data-v-194cb106],
  .stat-card.month .stat-sub[data-v-194cb106],
  .stat-card.total .stat-label[data-v-194cb106],
  .stat-card.total .stat-value[data-v-194cb106],
  .stat-card.total .stat-sub[data-v-194cb106],
  .stat-card.avg .stat-label[data-v-194cb106],
  .stat-card.avg .stat-value[data-v-194cb106],
  .stat-card.avg .stat-sub[data-v-194cb106] {
    color: #ffffff;
}

  /* Icon background for dark cards */
.stat-card.today .stat-icon[data-v-194cb106] {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}
.stat-card.month .stat-icon[data-v-194cb106] {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}
.stat-card.total .stat-icon[data-v-194cb106] {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}
.stat-card.avg .stat-icon[data-v-194cb106] {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

  /* Filters section */
.filters[data-v-194cb106] {
    background: #1e293b !important;
    border-color: #334155 !important;
}
.filter-input[data-v-194cb106] {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}
.filter-input[data-v-194cb106]:hover {
    border-color: #475569 !important;
}
.filter-input[data-v-194cb106]:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
}
.filter-label[data-v-194cb106] {
    color: #94a3b8 !important;
}

  /* Table */
.table-container[data-v-194cb106] {
    background: #1e293b !important;
    border-color: #334155 !important;
}
.sales-table[data-v-194cb106] {
    background: #1e293b !important;
}
.sales-table thead[data-v-194cb106] {
    background: #0f172a !important;
}
.sales-table th[data-v-194cb106] {
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}
.sales-table td[data-v-194cb106] {
    color: #cbd5e1 !important;
    border-color: #334155 !important;
}
.sale-row[data-v-194cb106] {
    background: #1e293b !important;
}
.sale-row[data-v-194cb106]:hover {
    background: #334155 !important;
}

  /* Suggestions box */
.suggest-box[data-v-194cb106] {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
}
.suggest-item[data-v-194cb106]:hover {
    background: #334155;
}
.suggest-loading[data-v-194cb106],
  .suggest-empty[data-v-194cb106] {
    color: #94a3b8;
}
.suggest-name[data-v-194cb106] {
    color: #e2e8f0;
}
.suggest-sku[data-v-194cb106] {
    color: #94a3b8;
}

  /* Modal */
.modal[data-v-194cb106] {
    background: #1e293b;
    border-color: #334155;
}
.modal-header[data-v-194cb106] {
    background: #0f172a;
    border-color: #334155;
}
.modal-title[data-v-194cb106] {
    color: #e2e8f0;
}
.section-title[data-v-194cb106] {
    color: #e2e8f0;
}
.info-label[data-v-194cb106] {
    color: #94a3b8;
}
.info-value[data-v-194cb106] {
    color: #cbd5e1;
}
.items-table[data-v-194cb106] {
    background: #0f172a;
}
.items-table th[data-v-194cb106] {
    color: #e2e8f0;
    background: #0f172a;
    border-color: #334155;
}
.items-table td[data-v-194cb106] {
    color: #cbd5e1;
    border-color: #334155;
}
.modal-overlay[data-v-194cb106] {
    background: rgba(0, 0, 0, 0.7);
}
.pagination[data-v-194cb106] {
    background: #0f172a;
    border-color: #334155;
}
.pagination-info[data-v-194cb106] {
    color: #94a3b8;
}
.pagination-btn[data-v-194cb106] {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}
.pagination-btn[data-v-194cb106]:hover:not(:disabled) {
    background: #334155;
    border-color: #6366f1;
    color: #a5b4fc;
}
.pagination-ellipsis[data-v-194cb106] {
    color: #64748b;
}

  /* Empty state */
.empty-state[data-v-194cb106] {
    color: #94a3b8;
}
.empty-icon[data-v-194cb106] {
    color: #64748b;
}

  /* Product images */
.no-image[data-v-194cb106] {
    background: #334155;
    color: #94a3b8;
}
}

/* Dark mode via manual toggle (data-theme attribute) */
:root[data-theme="dark"] {
&[data-v-194cb106] {

  /* Stat Cards */

  /* Filters */

  /* Table */
  }
.stat-card.today[data-v-194cb106] {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    border-color: #ea580c;
}
.stat-card.month[data-v-194cb106] {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    border-color: #1e40af;
}
.stat-card.total[data-v-194cb106] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-color: #059669;
}
.stat-card.avg[data-v-194cb106] {
    background: linear-gradient(135deg, #d946ef 0%, #c026d3 100%);
    border-color: #c026d3;
}
.stat-card.today .stat-label[data-v-194cb106],
  .stat-card.today .stat-value[data-v-194cb106],
  .stat-card.today .stat-sub[data-v-194cb106],
  .stat-card.month .stat-label[data-v-194cb106],
  .stat-card.month .stat-value[data-v-194cb106],
  .stat-card.month .stat-sub[data-v-194cb106],
  .stat-card.total .stat-label[data-v-194cb106],
  .stat-card.total .stat-value[data-v-194cb106],
  .stat-card.total .stat-sub[data-v-194cb106],
  .stat-card.avg .stat-label[data-v-194cb106],
  .stat-card.avg .stat-value[data-v-194cb106],
  .stat-card.avg .stat-sub[data-v-194cb106] {
    color: #ffffff;
}
.stat-card.today .stat-icon[data-v-194cb106],
  .stat-card.month .stat-icon[data-v-194cb106],
  .stat-card.total .stat-icon[data-v-194cb106],
  .stat-card.avg .stat-icon[data-v-194cb106] {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}
.filters[data-v-194cb106] {
    background: #1e293b !important;
    border-color: #334155 !important;
}
.filter-input[data-v-194cb106] {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}
.filter-input[data-v-194cb106]:hover {
    border-color: #475569 !important;
}
.filter-input[data-v-194cb106]:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
}
.filter-label[data-v-194cb106] {
    color: #94a3b8 !important;
}
.table-container[data-v-194cb106] {
    background: #1e293b !important;
    border-color: #334155 !important;
}
.sales-table[data-v-194cb106] {
    background: #1e293b !important;
}
.sales-table thead[data-v-194cb106] {
    background: #0f172a !important;
}
.sales-table th[data-v-194cb106] {
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}
.sales-table td[data-v-194cb106] {
    color: #cbd5e1 !important;
    border-color: #334155 !important;
}
.sale-row[data-v-194cb106] {
    background: #1e293b !important;
}
.sale-row[data-v-194cb106]:hover {
    background: #334155 !important;
}
.suggest-box[data-v-194cb106] {
    background: #1e293b;
    border-color: #334155;
}
.suggest-item[data-v-194cb106]:hover {
    background: #334155;
}
.suggest-loading[data-v-194cb106],
  .suggest-empty[data-v-194cb106] {
    color: #94a3b8;
}
.suggest-name[data-v-194cb106] {
    color: #e2e8f0;
}
.suggest-sku[data-v-194cb106] {
    color: #94a3b8;
}
.modal[data-v-194cb106] {
    background: #1e293b;
    border-color: #334155;
}
.modal-header[data-v-194cb106] {
    background: #0f172a;
    border-color: #334155;
}
.modal-title[data-v-194cb106],
  .section-title[data-v-194cb106] {
    color: #e2e8f0;
}
.info-label[data-v-194cb106] {
    color: #94a3b8;
}
.info-value[data-v-194cb106] {
    color: #cbd5e1;
}
.items-table[data-v-194cb106] {
    background: #0f172a;
}
.items-table th[data-v-194cb106] {
    color: #e2e8f0;
    background: #0f172a;
    border-color: #334155;
}
.items-table td[data-v-194cb106] {
    color: #cbd5e1;
    border-color: #334155;
}
.modal-overlay[data-v-194cb106] {
    background: rgba(0, 0, 0, 0.7);
}
.pagination[data-v-194cb106] {
    background: #0f172a;
    border-color: #334155;
}
.pagination-info[data-v-194cb106] {
    color: #94a3b8;
}
.pagination-btn[data-v-194cb106] {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}
.pagination-btn[data-v-194cb106]:hover:not(:disabled) {
    background: #334155;
    border-color: #6366f1;
    color: #a5b4fc;
}
.pagination-ellipsis[data-v-194cb106] {
    color: #64748b;
}
.empty-state[data-v-194cb106] {
    color: #94a3b8;
}
.empty-icon[data-v-194cb106] {
    color: #64748b;
}
.no-image[data-v-194cb106] {
    background: #334155;
    color: #94a3b8;
}
}

/* Light mode */
@media (prefers-color-scheme: light) {
.sales-wrap[data-v-194cb106] {
    color-scheme: light;
}
}
:root[data-theme="light"] .sales-wrap[data-v-194cb106] {
  color-scheme: light;
}

/* Reuse generic modal styles */
.modal-overlay[data-v-0dba4046] {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 1rem;
  animation: fadeIn-0dba4046 0.3s ease-out;
}
@keyframes fadeIn-0dba4046 {
from { opacity: 0;
}
to { opacity: 1;
}
}
.modal-container[data-v-0dba4046] {
  position: relative;
  background: var(--panel-bg, #1e293b);
  border: 1.5px solid var(--panel-border, #334155);
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  width: 100%;
  max-width: 420px;
  overflow: hidden;
  animation: slideUp-0dba4046 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  color: var(--text, #f1f5f9);
}
@keyframes slideUp-0dba4046 {
from { opacity: 0; transform: translateY(40px) scale(0.95);
}
to { opacity: 1; transform: translateY(0) scale(1);
}
}
.modal-content[data-v-0dba4046] {
  padding: 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

/* Icons */
.icon-wrapper[data-v-0dba4046] {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.icon-wrapper.warning[data-v-0dba4046] {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.3);
}
.icon-wrapper.danger[data-v-0dba4046] {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.3);
}
.icon-wrapper.info[data-v-0dba4046] {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3);
}
.icon[data-v-0dba4046] {
  font-size: 2.5rem;
  color: #fff;
}

/* Typography */
.modal-title[data-v-0dba4046] {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.02em;
}
.modal-title.warning[data-v-0dba4046] { color: #fbbf24;
}
.modal-title.danger[data-v-0dba4046] { color: #f87171;
}
.modal-title.info[data-v-0dba4046] { color: #60a5fa;
}
.modal-message[data-v-0dba4046] {
  color: var(--muted, #94a3b8);
  font-size: 1rem;
  margin: 0;
  line-height: 1.6;
}
.html-content[data-v-0dba4046] {
  text-align: left;
  width: 100%;
  background: rgba(255,255,255,0.05);
  padding: 1rem;
  border-radius: 12px;
  font-size: 0.9rem;
}

/* Buttons */
.modal-actions[data-v-0dba4046] {
  display: flex;
  gap: 1rem;
  width: 100%;
  margin-top: 1rem;
}
button[data-v-0dba4046] {
  flex: 1;
  padding: 0.875rem;
  border: none;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-cancel[data-v-0dba4046] {
  background: rgba(255,255,255,0.1);
  color: var(--text, #f1f5f9);
}
.btn-cancel[data-v-0dba4046]:hover {
  background: rgba(255,255,255,0.15);
}
.btn-confirm[data-v-0dba4046] {
  color: white;
}
.btn-confirm.warning[data-v-0dba4046] {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}
.btn-confirm.warning[data-v-0dba4046]:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.4);
}
.btn-confirm.danger[data-v-0dba4046] {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}
.btn-confirm.danger[data-v-0dba4046]:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(239, 68, 68, 0.4);
}
.btn-confirm.info[data-v-0dba4046] {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.btn-confirm.info[data-v-0dba4046]:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
}

/* Transitions */
.modal-enter-active[data-v-0dba4046], .modal-leave-active[data-v-0dba4046] { transition: opacity 0.3s ease;
}
.modal-enter-from[data-v-0dba4046], .modal-leave-to[data-v-0dba4046] { opacity: 0;
}

/* Reuse generic modal styles */
.modal-overlay[data-v-0dac852a] {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 1rem;
  animation: fadeIn-0dac852a 0.3s ease-out;
}
@keyframes fadeIn-0dac852a {
from { opacity: 0;
}
to { opacity: 1;
}
}
.modal-container[data-v-0dac852a] {
  position: relative;
  background: var(--panel-bg, #1e293b);
  border: 1.5px solid var(--panel-border, #334155);
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  width: 100%;
  max-width: 420px;
  overflow: hidden;
  animation: slideUp-0dac852a 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  color: var(--text, #f1f5f9);
}
@keyframes slideUp-0dac852a {
from { opacity: 0; transform: translateY(40px) scale(0.95);
}
to { opacity: 1; transform: translateY(0) scale(1);
}
}
.modal-content[data-v-0dac852a] {
  padding: 2.5rem 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

/* Icons */
.icon-wrapper[data-v-0dac852a] {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scaleIn-0dac852a 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.icon-wrapper.success[data-v-0dac852a] {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  box-shadow: 0 8px 24px rgba(34, 197, 94, 0.3);
}
.icon-wrapper.error[data-v-0dac852a] {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.3);
}
@keyframes scaleIn-0dac852a {
from { transform: scale(0); opacity: 0;
}
to { transform: scale(1); opacity: 1;
}
}
.icon[data-v-0dac852a] {
  font-size: 3rem;
  color: #fff;
  animation: checkmark-0dac852a 0.6s ease-in-out 0.2s backwards;
}
@keyframes checkmark-0dac852a {
0% { transform: scale(0) rotate(-45deg); opacity: 0;
}
50% { transform: scale(1.2) rotate(0deg);
}
100% { transform: scale(1) rotate(0deg); opacity: 1;
}
}

/* Typography */
.modal-title[data-v-0dac852a] {
  font-size: 1.75rem;
  font-weight: 900;
  margin: 0;
  letter-spacing: -0.02em;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.modal-title.success[data-v-0dac852a] {
  background-image: linear-gradient(135deg, #22c55e, #16a34a);
}
.modal-title.error[data-v-0dac852a] {
  background-image: linear-gradient(135deg, #ef4444, #dc2626);
}
.modal-message[data-v-0dac852a] {
  color: var(--muted, #94a3b8);
  font-size: 1rem;
  margin: 0;
  line-height: 1.6;
  font-weight: 500;
}
.html-content[data-v-0dac852a] {
  text-align: left;
  width: 100%;
  background: rgba(255,255,255,0.05);
  padding: 1rem;
  border-radius: 12px;
  font-size: 0.9rem;
}

/* Close Button */
.close-btn[data-v-0dac852a] {
  margin-top: 0.5rem;
  padding: 0.875rem 2rem;
  border: none;
  border-radius: 12px;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.close-btn.success[data-v-0dac852a] {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.3);
}
.close-btn.error[data-v-0dac852a] {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
}
.close-btn[data-v-0dac852a]:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.close-btn[data-v-0dac852a]:active { transform: translateY(0);
}

/* Transitions */
.modal-enter-active[data-v-0dac852a], .modal-leave-active[data-v-0dac852a] { transition: opacity 0.3s ease;
}
.modal-enter-from[data-v-0dac852a], .modal-leave-to[data-v-0dac852a] { opacity: 0;
}

.wrap[data-v-1fa91b82] {
  padding: 1.5rem;
  display: grid;
  gap: 1.5rem;
  background: linear-gradient(135deg, #0a0b14 0%, #1a1610 100%);
  min-height: 100vh;
}
.top[data-v-1fa91b82] {
  display: grid;
  gap: 0.3rem;
}
.title[data-v-1fa91b82] {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text);
}
.subtitle[data-v-1fa91b82] {
  color: var(--muted);
  font-size: 0.95rem;
}

/* Tabs */
.tabs[data-v-1fa91b82] {
  display: flex;
  gap: 0.5rem;
  border-bottom: 2px solid var(--border);
  padding-bottom: 0.5rem;
}
.tab[data-v-1fa91b82] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border: none;
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  cursor: pointer;
  border-radius: 12px 12px 0 0;
  transition: all 0.2s ease;
}
.tab[data-v-1fa91b82]:hover {
  background: rgba(99, 102, 241, 0.1);
  color: #6366f1;
}
.tab-recipes.active[data-v-1fa91b82] {
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  color: white;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}
.tab-usage.active[data-v-1fa91b82] {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}
.tab-images.active[data-v-1fa91b82] {
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  color: white;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

/* Stats */
.stats-grid[data-v-1fa91b82] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}
.stat-card[data-v-1fa91b82] {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  color: #fff;
  border: none;
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  min-height: 92px;
}
.stat-icon[data-v-1fa91b82] {
  font-size: 28px;
  background: rgba(255, 255, 255, 0.22);
  padding: 10px 12px;
  border-radius: 12px;
}
.stat-content[data-v-1fa91b82] {
  display: grid;
  gap: 6px;
}
.table-img-container[data-v-1fa91b82] {
  width: 50px;
  height: 50px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f1f5f9;
}
.table-img[data-v-1fa91b82] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.no-img[data-v-1fa91b82] {
  color: var(--muted);
  font-size: 1rem;
}
.stat-label[data-v-1fa91b82] {
  font-size: 0.8rem;
  opacity: 0.9;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 700;
}
.stat-value[data-v-1fa91b82] {
  font-size: 1.6rem;
  font-weight: 800;
}
.stat-recipes[data-v-1fa91b82] {
  background: linear-gradient(135deg, #f59e0b, #f97316);
}
.stat-active[data-v-1fa91b82] {
  background: linear-gradient(135deg, #3b82f6, #4f46e5);
}
.stat-usage[data-v-1fa91b82] {
  background: linear-gradient(135deg, #10b981, #059669);
}
.stat-images[data-v-1fa91b82] {
  background: linear-gradient(135deg, #a855f7, #7c3aed);
}

/* Filters Bar */
.filters-bar[data-v-1fa91b82] {
  margin-top: 1.5rem;
  background: white;
  padding: 1rem;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
.filter-group[data-v-1fa91b82] {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  justify-content: flex-start;
}
.filter-item[data-v-1fa91b82] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: white;
  padding: 0.5rem 1rem;
  border-radius: 50px;
  border: 1px solid #e2e8f0;
  transition: all 0.2s ease;
  flex: 0 0 auto;
  min-width: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.filter-item[data-v-1fa91b82]:focus-within {
  background: white;
  border-color: rgba(198, 146, 61, 0.35);
  box-shadow: 0 4px 16px rgba(198, 146, 61, 0.2), 0 2px 8px rgba(0, 0, 0, 0.05);
}
.filter-icon[data-v-1fa91b82] {
  color: #94a3b8;
  font-size: 1.1rem;
}
.filter-input[data-v-1fa91b82], .filter-select[data-v-1fa91b82] {
  border: none;
  background: transparent;
  width: 100%;
  font-size: 0.95rem;
  color: var(--text, #1e293b);
  outline: none;
  padding: 0;
  cursor: pointer;
}
.filter-input[data-v-1fa91b82]::placeholder {
  color: #94a3b8;
}
.search-item[data-v-1fa91b82] {
  flex: 2;
}
.date-input[data-v-1fa91b82] {
  font-family: inherit;
  color-scheme: light;
}

/* Tab Content */
.tab-content[data-v-1fa91b82] {
  display: grid;
  gap: 1rem;
}
.actions-bar[data-v-1fa91b82] {
  display: flex;
  justify-content: flex-end;
}
.btn-primary[data-v-1fa91b82] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: white;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
  transition: all 0.2s ease;
}
.btn-primary[data-v-1fa91b82]:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
}
.btn-primary[data-v-1fa91b82]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-secondary[data-v-1fa91b82] {
  padding: 0.75rem 1.5rem;
  background: #e5e7eb;
  color: #374151;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
}

/* Modern Buttons */
.action-buttons[data-v-1fa91b82] {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}
.btn-small[data-v-1fa91b82] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 42px;
  height: 42px;
  padding: 0;
  background: #334155;
  color: #cbd5e1;
  border: none;
  border-radius: 10px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.btn-small[data-v-1fa91b82]:hover {
  color: white;
  transform: translateY(-2px);
}

/* Specific Button Colors */
.btn-view[data-v-1fa91b82]:hover {
  background: #3b82f6; /* Blue */
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.btn-edit[data-v-1fa91b82]:hover,
.btn-small.btn-edit[data-v-1fa91b82]:hover {
  background: #f59e0b; /* Amber */
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}
.btn-delete[data-v-1fa91b82] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  background: #334155;
  color: #cbd5e1;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.btn-delete[data-v-1fa91b82]:hover {
  background: #ef4444; /* Red */
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
  color: white;
}
.btn-delete .material-symbols-rounded[data-v-1fa91b82],
.btn-small .material-symbols-rounded[data-v-1fa91b82] {
  font-size: 20px;
}

/* Table */
.table-scroll[data-v-1fa91b82] {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
}
.data-table[data-v-1fa91b82] {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  border: 1px solid #f1f5f9;
}
.data-table th[data-v-1fa91b82] {
  padding: 1rem;
  text-align: left;
  background: #f8fafc;
  color: #64748b;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid #e2e8f0;
}
.data-table td[data-v-1fa91b82] {
  padding: 1rem;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
}
.data-table tr:last-child td[data-v-1fa91b82] {
  border-bottom: none;
}
.data-table tr[data-v-1fa91b82]:hover {
  background: #f8fafc;
}
.badge[data-v-1fa91b82] {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
}
.badge-success[data-v-1fa91b82] {
  background: #d1fae5;
  color: #065f46;
}
.badge-inactive[data-v-1fa91b82] {
  background: #fee2e2;
  color: #991b1b;
}

/* Images Grid */
.images-container[data-v-1fa91b82] {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.images-grid[data-v-1fa91b82] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}
.image-card[data-v-1fa91b82] {
  background: white;
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  position: relative;
}
.image-card[data-v-1fa91b82]:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border-color: rgba(99, 102, 241, 0.2);
}
.image-card-header[data-v-1fa91b82] {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  background-color: #f1f5f9;
}
.image-preview[data-v-1fa91b82] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.image-card:hover .image-preview[data-v-1fa91b82] {
  transform: scale(1.05);
}
.image-recipe-badge[data-v-1fa91b82] {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  color: #059669;
  border-radius: 99px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  max-width: calc(100% - 1.5rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.image-recipe-badge .material-symbols-rounded[data-v-1fa91b82] {
  font-size: 16px;
}
.image-info[data-v-1fa91b82] {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}
.image-name[data-v-1fa91b82] {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1f2937;
  line-height: 1.4;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.image-desc[data-v-1fa91b82] {
  font-size: 0.875rem;
  color: #64748b;
  line-height: 1.5;
  margin-bottom: auto;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.image-actions[data-v-1fa91b82] {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  justify-content: flex-end;
}
.btn-icon[data-v-1fa91b82] {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: none;
  background: #f1f5f9;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-icon[data-v-1fa91b82]:hover {
  filter: brightness(0.95);
}
.btn-icon.btn-edit[data-v-1fa91b82] {
  background: #eff6ff;
  color: #3b82f6;
}
.btn-icon.btn-edit[data-v-1fa91b82]:hover {
  background: #dbeafe;
  color: #DFC05E;
}
.btn-icon.btn-delete[data-v-1fa91b82] {
  background: #fef2f2;
  color: #ef4444;
}
.btn-icon.btn-delete[data-v-1fa91b82]:hover {
  background: #fee2e2;
  color: #dc2626;
}
.btn-icon .material-symbols-rounded[data-v-1fa91b82] {
  font-size: 20px;
}

/* Pagination */
.pagination-controls[data-v-1fa91b82] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #e2e8f0;
  color: #64748b;
  font-weight: 500;
}
.btn-pagination[data-v-1fa91b82] {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: none;
  background: white;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  border: 1px solid #e2e8f0;
}
.btn-pagination[data-v-1fa91b82]:hover:not(:disabled) {
  background: #f8fafc;
  color: #1e293b;
  border-color: #cbd5e1;
}
.btn-pagination[data-v-1fa91b82]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

/* Modal */
.modal-overlay[data-v-1fa91b82] {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(8px);
  padding: 1rem;
}
.modal[data-v-1fa91b82] {
  background: white;
  border-radius: 24px;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.5);
  animation: modalPop-1fa91b82 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  flex-direction: column;
}
@keyframes modalPop-1fa91b82 {
from { opacity: 0; transform: scale(0.95) translateY(10px);
}
to { opacity: 1; transform: scale(1) translateY(0);
}
}
.modal-large[data-v-1fa91b82] {
  max-width: 900px;
}
.modal-header[data-v-1fa91b82] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid #f1f5f9;
  background: white;
  position: sticky;
  top: 0;
  z-index: 10;
}
.modal-header h2[data-v-1fa91b82] {
  font-size: 1.5rem;
  font-weight: 800;
  color: #1e293b;
  letter-spacing: -0.025em;
}
.btn-close[data-v-1fa91b82] {
  background: transparent;
  border: none;
  cursor: pointer;
  color: #94a3b8;
  padding: 0.5rem;
  border-radius: 50%;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-close[data-v-1fa91b82]:hover {
  background: #f1f5f9;
  color: #ef4444;
  transform: rotate(90deg);
}
.modal-body[data-v-1fa91b82] {
  padding: 2rem;
  display: grid;
  gap: 1.5rem;
  overflow-y: auto;
}
.modal-footer[data-v-1fa91b82] {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  padding: 1.5rem 2rem;
  border-top: 1px solid #f1f5f9;
  background: #f8fafc;
  position: sticky;
  bottom: 0;
  z-index: 10;
}
.form-field[data-v-1fa91b82] {
  display: grid;
  gap: 0.5rem;
}
.form-field label[data-v-1fa91b82] {
  font-weight: 600;
  color: var(--text);
  font-size: 0.9rem;
}
.label-with-button[data-v-1fa91b82] {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.btn-ai-suggest[data-v-1fa91b82] {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}
.btn-ai-suggest[data-v-1fa91b82]:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}
.btn-ai-suggest[data-v-1fa91b82]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn-ai-suggest .material-symbols-rounded[data-v-1fa91b82] {
  font-size: 18px;
  animation: spin-1fa91b82 2s linear infinite;
}
.btn-ai-suggest:not(:disabled) .material-symbols-rounded[data-v-1fa91b82] {
  animation: none;
}
@keyframes spin-1fa91b82 {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
.form-row[data-v-1fa91b82] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}
.input[data-v-1fa91b82] {
  padding: 0.875rem 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  font-size: 0.95rem;
  color: #1e293b;
  background: #f8fafc;
  transition: all 0.2s ease;
}
.input[data-v-1fa91b82]:focus {
  outline: none;
  background: white;
  border-color: #6366f1;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}
.time-input[data-v-1fa91b82] {
  position: relative;
  display: flex;
  align-items: center;
}
.segmented[data-v-1fa91b82] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding-left: 44px;
  padding-right: 44px;
}
.time-icon[data-v-1fa91b82] {
  position: absolute;
  left: 12px;
  font-size: 20px;
  color: #6366f1;
  background: rgba(99, 102, 241, 0.12);
  border-radius: 10px;
  padding: 6px;
}
.time-select[data-v-1fa91b82] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  padding: 0.6rem 0.9rem;
  font-weight: 700;
  color: #111827;
  background: linear-gradient(135deg, #f3f4f6, #ffffff);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.time-select[data-v-1fa91b82]:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}
.colon[data-v-1fa91b82] {
  font-weight: 800;
  color: #6b7280;
}
.time-clear[data-v-1fa91b82] {
  position: absolute;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: #e5e7eb;
  color: #374151;
  cursor: pointer;
}
.time-clear[data-v-1fa91b82]:hover {
  background: #d1d5db;
}
.time-control[data-v-1fa91b82]::-webkit-inner-spin-button,
.time-control[data-v-1fa91b82]::-webkit-clear-button {
  display: none;
}
.time-control[data-v-1fa91b82]::-webkit-calendar-picker-indicator {
  opacity: 0.7;
  filter: hue-rotate(250deg) saturate(1.4);
}
.alert[data-v-1fa91b82] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 12px;
}
.alert-warning[data-v-1fa91b82] {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fbbf24;
}
.image-preview-container[data-v-1fa91b82] {
  margin-top: 1rem;
}
.image-preview-large[data-v-1fa91b82] {
  width: 100%;
  max-height: 300px;
  object-fit: contain;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
}
.status-message-badge[data-v-1fa91b82] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
  color: #047857;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid #a7f3d0;
  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.1);
}
.status-icon[data-v-1fa91b82] {
  font-size: 1.2rem;
  color: #10b981;
}
.status-text[data-v-1fa91b82] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
}
.loading[data-v-1fa91b82],
.empty[data-v-1fa91b82] {
  text-align: center;
  padding: 3rem;
  color: var(--muted);
  font-size: 1.1rem;
}

/* Toast Notification */
.toast-notification[data-v-1fa91b82] {
  position: fixed;
  top: 2rem;
  right: 2rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  z-index: 10000;
  font-weight: 600;
  min-width: 300px;
  backdrop-filter: blur(10px);
}
.toast-notification.success[data-v-1fa91b82] {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
}
.toast-notification.error[data-v-1fa91b82] {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}
.toast-notification.warning[data-v-1fa91b82] {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
}
.toast-icon[data-v-1fa91b82] {
  font-size: 24px;
}
.toast-message[data-v-1fa91b82] {
  flex: 1;
}

/* Toast Animation */
.toast-enter-active[data-v-1fa91b82],
.toast-leave-active[data-v-1fa91b82] {
  transition: all 0.3s ease;
}
.toast-enter-from[data-v-1fa91b82] {
  transform: translateX(100%);
  opacity: 0;
}
.toast-leave-to[data-v-1fa91b82] {
  transform: translateY(-20px);
  opacity: 0;
}

/* Confirmation Modal */
.confirm-modal[data-v-1fa91b82] {
  max-width: 500px;
}
.confirm-message[data-v-1fa91b82] {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
}
.confirm-modal .modal-icon[data-v-1fa91b82] {
  color: #f59e0b;
}
.btn-clear-filters[data-v-1fa91b82] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #64748b;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.2s;
  margin-left: auto;
}
.btn-clear-filters[data-v-1fa91b82]:hover {
  background: #e2e8f0;
  color: #334155;
  border-color: #94a3b8;
}
.btn-clear-filters[data-v-1fa91b82]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.btn-clear-filters .material-symbols-rounded[data-v-1fa91b82] {
  font-size: 1.1rem;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
.btn-clear-filters[data-v-1fa91b82] {
    background: #1e293b;
    border-color: #475569;
    color: #94a3b8;
}
.btn-clear-filters[data-v-1fa91b82]:hover {
    background: #334155;
    color: #f1f5f9;
    border-color: #64748b;
}
.image-card[data-v-1fa91b82],
  .modal[data-v-1fa91b82] {
    background: #1e293b;
    border-color: #334155;
}
.data-table[data-v-1fa91b82] {
    background: #1e293b;
    border: none;
}
.modal-header[data-v-1fa91b82],
  .modal-footer[data-v-1fa91b82] {
    background: #1e293b;
    border-color: #334155;
}
.modal-header h2[data-v-1fa91b82] {
    color: #f1f5f9;
}
.btn-close[data-v-1fa91b82] {
    background: #334155;
    border-color: #475569;
    color: #cbd5e1;
}
.btn-close[data-v-1fa91b82]:hover {
    background: #475569;
    color: #fff;
}
.data-table th[data-v-1fa91b82] {
    background: #0f172a;
    color: #e2e8f0;
    border-color: #334155;
}
.data-table td[data-v-1fa91b82] {
    border-color: #334155;
    color: #cbd5e1;
}
.data-table tr[data-v-1fa91b82]:hover {
    background: #334155;
}
.input[data-v-1fa91b82] {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}
.input[data-v-1fa91b82]:focus {
    background: #1e293b;
}
.btn-secondary[data-v-1fa91b82] {
    background: #334155;
    color: #e2e8f0;
}
.modal-header[data-v-1fa91b82] {
    border-color: #334155;
}
.modal-footer[data-v-1fa91b82] {
    border-color: #334155;
}
.btn-small[data-v-1fa91b82] {
    background: #334155;
    color: #cbd5e1;
}
.btn-small[data-v-1fa91b82]:hover {
    background: #475569;
    color: #f1f5f9;
}
.btn-edit[data-v-1fa91b82]:hover {
    background: #f59e0b;
    color: white;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}
.btn-delete[data-v-1fa91b82]:hover {
    background: #ef4444;
    color: white;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

  /* Timer Styles */
.timer-cell[data-v-1fa91b82] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Monaco', 'Consolas', monospace;
}
.timer-display[data-v-1fa91b82] {
    min-width: 60px;
    font-weight: 600;
    color: #475569;
}
.timer-display.active[data-v-1fa91b82] {
    color: #e11d48; /* Red for active countdown */
    font-weight: 700;
}
.status-message-text[data-v-1fa91b82] {
    font-size: 0.85rem;
    color: #059669; /* Green-600 */
    font-weight: 600;
    line-height: 1.2;
    display: block;
    max-width: 200px;
}
.btn-icon-timer[data-v-1fa91b82] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    display: flex;
    align-items: center;
    border-radius: 50%;
    transition: all 0.2s;
}
.btn-icon-timer.start[data-v-1fa91b82] {
    color: #10b981; /* Green */
}
.btn-icon-timer.start[data-v-1fa91b82]:hover {
    background: #d1fae5;
}
.btn-icon-timer.stop[data-v-1fa91b82] {
    color: #ef4444; /* Red */
}
.btn-icon-timer.stop[data-v-1fa91b82]:hover {
    background: #fee2e2;
}
.image-card-header[data-v-1fa91b82] {
    background-color: #0f172a;
}
.image-name[data-v-1fa91b82] {
    color: #f1f5f9;
}
.image-desc[data-v-1fa91b82] {
    color: #94a3b8;
}
.btn-icon[data-v-1fa91b82] {
    background: #334155;
    color: #cbd5e1;
}
.btn-icon.btn-edit[data-v-1fa91b82] {
    background: rgba(59, 130, 246, 0.2); /* Blue tint */
    color: #60a5fa;
}
.btn-icon.btn-delete[data-v-1fa91b82] {
    background: rgba(239, 68, 68, 0.2); /* Red tint */
    color: #f87171;
}
.btn-icon[data-v-1fa91b82]:hover {
    background: #475569;
    color: #f1f5f9;
}
.btn-icon.btn-edit[data-v-1fa91b82]:hover {
    background: rgba(59, 130, 246, 0.3);
    color: #93c5fd;
}
.btn-icon.btn-delete[data-v-1fa91b82]:hover {
    background: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}
.pagination-controls[data-v-1fa91b82] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #334155;
    color: #cbd5e1;
}
.btn-pagination[data-v-1fa91b82] {
    background: #334155;
    color: #cbd5e1;
}
.btn-pagination[data-v-1fa91b82]:hover:not(:disabled) {
    background: #475569;
    color: #f1f5f9;
}
.btn-pagination[data-v-1fa91b82]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

  /* Dark Mode Filters */
.filters-bar[data-v-1fa91b82] {
    background: #1e293b;
    border-color: #334155;
}
.filter-item[data-v-1fa91b82] {
    background: #0f172a;
    border-color: #334155;
}
.filter-item[data-v-1fa91b82]:focus-within {
    background: #0f172a;
    border-color: #6366f1;
}
.filter-input[data-v-1fa91b82], .filter-select[data-v-1fa91b82] {
    color: #f1f5f9;
    background-color: transparent;
}
.filter-select option[data-v-1fa91b82] {
    background-color: #1e293b;
    color: #f1f5f9;
}
.filter-input[data-v-1fa91b82]::placeholder {
    color: #64748b;
}
.filter-icon[data-v-1fa91b82] {
    color: #94a3b8;
}
.date-input[data-v-1fa91b82] {
    color-scheme: dark;
}

  /* Nav Search Dark Mode */
.nav-input[data-v-1fa91b82] {
    background: #0f172a;
    border-color: #334155;
    color: #f1f5f9;
}
.nav-input[data-v-1fa91b82]:focus {
    background: #1e293b;
    border-color: #6366f1;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.25), 0 2px 8px rgba(0, 0, 0, 0.2);
}
.nav-search .search-icon[data-v-1fa91b82] {
    color: #94a3b8;
}
.nav-input:focus ~ .search-icon[data-v-1fa91b82] {
    color: #818cf8;
}
.nav-search .clear-btn[data-v-1fa91b82] {
    color: #94a3b8;
}
.nav-search .clear-btn[data-v-1fa91b82]:hover {
    color: #f1f5f9;
    background: rgba(99, 102, 241, 0.2);
}

  /* Suggestions Dropdown Dark Mode */
.nav-suggestions[data-v-1fa91b82] {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.2);
}
.nav-suggestions .suggestion-item[data-v-1fa91b82] {
    color: #e2e8f0;
}
.nav-suggestions .suggestion-item.active[data-v-1fa91b82],
  .nav-suggestions .suggestion-item[data-v-1fa91b82]:hover {
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.3);
}
.nav-suggestions .suggestion-thumb[data-v-1fa91b82] {
    border-color: #334155;
    background: #0f172a;
}
.nav-suggestions .placeholder-thumb[data-v-1fa91b82] {
    background: #0f172a;
    color: #64748b;
}
.nav-suggestions .suggestion-meta[data-v-1fa91b82] {
    color: #94a3b8;
}
}

/* Dark Mode Manual Toggle Support */
:root[data-theme="dark"] {
&[data-v-1fa91b82] {
  
  /* ... existing dark mode styles ... */

  /* Timer Styles */

  /* Dark Mode Filters */

  /* Pagination */

  /* Nav Search Dark Mode */

  /* Suggestions Dropdown Dark Mode */
  }
.image-card[data-v-1fa91b82],
  .modal[data-v-1fa91b82] {
    background: #1e293b;
    border-color: #334155;
}
.data-table[data-v-1fa91b82] {
    background: #1e293b;
    border: none;
}
.modal-header[data-v-1fa91b82],
  .modal-footer[data-v-1fa91b82] {
    background: #1e293b;
    border-color: #334155;
}
.modal-header h2[data-v-1fa91b82] {
    color: #f1f5f9;
}
.btn-close[data-v-1fa91b82] {
    background: #334155;
    border-color: #475569;
    color: #cbd5e1;
}
.btn-close[data-v-1fa91b82]:hover {
    background: #475569;
    color: #fff;
}
.data-table th[data-v-1fa91b82] {
    background: #0f172a;
    color: #e2e8f0;
    border-color: #334155;
}
.data-table td[data-v-1fa91b82] {
    border-color: #334155;
    color: #cbd5e1;
}
.data-table tr[data-v-1fa91b82]:hover {
    background: #334155;
}
.input[data-v-1fa91b82] {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}
.input[data-v-1fa91b82]:focus {
    background: #1e293b;
}
.btn-secondary[data-v-1fa91b82] {
    background: #334155;
    color: #e2e8f0;
}
.modal-header[data-v-1fa91b82] {
    border-color: #334155;
}
.modal-footer[data-v-1fa91b82] {
    border-color: #334155;
}
.btn-small[data-v-1fa91b82] {
    background: #334155;
    color: #cbd5e1;
}
.btn-small[data-v-1fa91b82]:hover {
    background: #475569;
    color: #f1f5f9;
}
.btn-edit[data-v-1fa91b82]:hover {
    background: #f59e0b;
    color: white;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}
.btn-delete[data-v-1fa91b82]:hover {
    background: #ef4444;
    color: white;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}
.timer-cell[data-v-1fa91b82] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Monaco', 'Consolas', monospace;
}
.timer-display[data-v-1fa91b82] {
    min-width: 60px;
    font-weight: 600;
    color: #475569;
}
.timer-display.active[data-v-1fa91b82] {
    color: #e11d48; /* Red for active countdown */
    font-weight: 700;
}
.status-message-text[data-v-1fa91b82] {
    font-size: 0.85rem;
    color: #059669; /* Green-600 */
    font-weight: 600;
    line-height: 1.2;
    display: block;
    max-width: 200px;
}
.btn-icon-timer[data-v-1fa91b82] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    display: flex;
    align-items: center;
    border-radius: 50%;
    transition: all 0.2s;
}
.btn-icon-timer.start[data-v-1fa91b82] {
    color: #10b981; /* Green */
}
.btn-icon-timer.start[data-v-1fa91b82]:hover {
    background: #d1fae5;
}
.btn-icon-timer.stop[data-v-1fa91b82] {
    color: #ef4444; /* Red */
}
.btn-icon-timer.stop[data-v-1fa91b82]:hover {
    background: #fee2e2;
}
.filters-bar[data-v-1fa91b82] {
    background: #1e293b;
    border-color: #334155;
}
.filter-item[data-v-1fa91b82] {
    background: #0f172a;
    border-color: #334155;
}
.filter-item[data-v-1fa91b82]:focus-within {
    background: #0f172a;
    border-color: #6366f1;
}
.filter-input[data-v-1fa91b82], .filter-select[data-v-1fa91b82] {
    color: #f1f5f9;
    background-color: transparent;
}
.filter-select option[data-v-1fa91b82] {
    background-color: #1e293b;
    color: #f1f5f9;
}
.filter-input[data-v-1fa91b82]::placeholder {
    color: #64748b;
}
.filter-icon[data-v-1fa91b82] {
    color: #94a3b8;
}
.date-input[data-v-1fa91b82] {
    color-scheme: dark;
}
.btn-clear-filters[data-v-1fa91b82] {
    background: #1e293b;
    border-color: #475569;
    color: #94a3b8;
}
.btn-clear-filters[data-v-1fa91b82]:hover:not(:disabled) {
    background: #334155;
    color: #f1f5f9;
    border-color: #64748b;
}
.btn-clear-filters[data-v-1fa91b82]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.pagination-controls[data-v-1fa91b82] {
    border-top-color: #334155;
    color: #cbd5e1;
}
.btn-pagination[data-v-1fa91b82] {
    background: #334155;
    color: #cbd5e1;
    border-color: #475569;
}
.btn-pagination[data-v-1fa91b82]:hover:not(:disabled) {
    background: #475569;
    color: #f1f5f9;
    border-color: #64748b;
}
.btn-pagination[data-v-1fa91b82]:disabled {
    opacity: 0.5;
}
.nav-input[data-v-1fa91b82] {
    background: #0f172a;
    border-color: #334155;
    color: #f1f5f9;
}
.nav-input[data-v-1fa91b82]:focus {
    background: #1e293b;
    border-color: #6366f1;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.25), 0 2px 8px rgba(0, 0, 0, 0.2);
}
.nav-search .search-icon[data-v-1fa91b82] {
    color: #94a3b8;
}
.nav-input:focus ~ .search-icon[data-v-1fa91b82] {
    color: #818cf8;
}
.nav-search .clear-btn[data-v-1fa91b82] {
    color: #94a3b8;
}
.nav-search .clear-btn[data-v-1fa91b82]:hover {
    color: #f1f5f9;
    background: rgba(99, 102, 241, 0.2);
}
.nav-suggestions[data-v-1fa91b82] {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.2);
}
.nav-suggestions .suggestion-item[data-v-1fa91b82] {
    color: #e2e8f0;
}
.nav-suggestions .suggestion-item.active[data-v-1fa91b82],
  .nav-suggestions .suggestion-item[data-v-1fa91b82]:hover {
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.3);
}
.nav-suggestions .suggestion-thumb[data-v-1fa91b82] {
    border-color: #334155;
    background: #0f172a;
}
.nav-suggestions .placeholder-thumb[data-v-1fa91b82] {
    background: #0f172a;
    color: #64748b;
}
.nav-suggestions .suggestion-meta[data-v-1fa91b82] {
    color: #94a3b8;
}
}

/* Force Light Mode (overrides system dark mode if manually selected) */
:root[data-theme="light"] {
&[data-v-1fa91b82] {

  /* Filters Light Mode Override */
  }
.image-card[data-v-1fa91b82],
  .modal[data-v-1fa91b82] {
    background: white;
    border-color: #f1f5f9;
}
.data-table[data-v-1fa91b82] {
    background: white;
    border: 1px solid #f1f5f9;
}
.modal-header[data-v-1fa91b82],
  .modal-footer[data-v-1fa91b82] {
    background: white;
    border-color: #f1f5f9;
}
.modal-footer[data-v-1fa91b82] {
    background: #f8fafc;
}
.modal-header h2[data-v-1fa91b82] {
    color: #1e293b;
}
.btn-close[data-v-1fa91b82] {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #64748b;
}
.btn-close[data-v-1fa91b82]:hover {
    background: #eff6ff;
    color: #3b82f6;
}
.data-table th[data-v-1fa91b82] {
    background: #f8fafc;
    color: #64748b;
    border-color: #e2e8f0;
}
.data-table td[data-v-1fa91b82] {
    border-color: #f1f5f9;
    color: #334155;
}
.data-table tr[data-v-1fa91b82]:hover {
    background: #f8fafc;
}
.input[data-v-1fa91b82] {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #1e293b;
}
.input[data-v-1fa91b82]:focus {
    background: white;
}
.btn-secondary[data-v-1fa91b82] {
    background: #e5e7eb;
    color: #374151;
}
.filters-bar[data-v-1fa91b82] {
    background: white;
    border-color: #e2e8f0;
}
.filter-item[data-v-1fa91b82] {
    background: #f8fafc;
    border-color: #e2e8f0;
}
.filter-item[data-v-1fa91b82]:focus-within {
    background: white;
    border-color: #6366f1;
}
.filter-input[data-v-1fa91b82], .filter-select[data-v-1fa91b82] {
    color: #1e293b;
    background-color: #f8fafc;
}
.filter-select option[data-v-1fa91b82] {
    background-color: white;
    color: #1e293b;
}
.filter-input[data-v-1fa91b82]::placeholder {
    color: #94a3b8;
}
.filter-icon[data-v-1fa91b82] {
    color: #64748b;
}
.btn-clear-filters[data-v-1fa91b82] {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #64748b;
}
.btn-clear-filters[data-v-1fa91b82]:hover {
    background: #e2e8f0;
    color: #334155;
    border-color: #94a3b8;
}
}
.pagination-controls[data-v-1fa91b82] {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  padding: 1rem;
}
.pagination-controls span[data-v-1fa91b82] {
  font-weight: 600;
  color: var(--text);
  font-size: 1.1rem;
}
.btn-pagination[data-v-1fa91b82] {
  background-color: #3b82f6;
  color: white;
  border: none;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}
.btn-pagination[data-v-1fa91b82]:hover:not(:disabled) {
  background-color: #DFC05E;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.3);
}
.btn-pagination[data-v-1fa91b82]:disabled {
  background-color: #e2e8f0;
  color: #94a3b8;
  cursor: not-allowed;
  box-shadow: none;
}

/* Nav Search */
.nav-search[data-v-1fa91b82] {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
}
.nav-input[data-v-1fa91b82] {
  width: 100%;
  padding: 0.55rem 2.2rem 0.55rem 2.5rem;
  border-radius: 12px;
  border: 1px solid rgba(198, 146, 61, 0.15);
  background: white;
  color: var(--text, #1e293b);
  font-size: 0.95rem;
  outline: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.nav-input[data-v-1fa91b82]:focus {
  background: white;
  box-shadow: 0 4px 16px rgba(198, 146, 61, 0.2), 0 2px 8px rgba(0, 0, 0, 0.05);
  border-color: rgba(198, 146, 61, 0.35);
}
.nav-search .search-icon[data-v-1fa91b82] {
  position: absolute;
  left: 12px;
  pointer-events: none;
  font-size: 1.1rem;
  color: #94a3b8;
  transition: color 0.25s ease;
}
.nav-input:focus~.search-icon[data-v-1fa91b82] {
  color: #6366f1;
}
.nav-search .clear-btn[data-v-1fa91b82] {
  position: absolute;
  right: 8px;
  border: none;
  background: transparent;
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.nav-search .clear-btn[data-v-1fa91b82]:hover {
  color: #1e293b;
  background: rgba(198, 146, 61, 0.1);
  transform: scale(1.1);
}

/* Suggestions Dropdown */
.nav-suggestions[data-v-1fa91b82] {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  width: min(420px, 70vw);
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.1);
  padding: 0.4rem;
  z-index: 1000;
  animation: dropdownFadeIn-1fa91b82 0.2s ease-out;
}
@keyframes dropdownFadeIn-1fa91b82 {
from { opacity: 0; transform: translateY(-8px);
}
to { opacity: 1; transform: translateY(0);
}
}
.nav-suggestions .suggestion-item[data-v-1fa91b82] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.6rem;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: #1e293b;
  cursor: pointer;
  transition: all 0.2s ease;
}
.nav-suggestions .suggestion-item.active[data-v-1fa91b82],
.nav-suggestions .suggestion-item[data-v-1fa91b82]:hover {
  background: linear-gradient(135deg, rgba(198, 146, 61, 0.12) 0%, rgba(0, 194, 168, 0.08) 100%);
  border-color: rgba(198, 146, 61, 0.25);
  transform: translateX(2px);
}
.nav-suggestions .suggestion-thumb[data-v-1fa91b82] {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #f1f5f9;
}
.nav-suggestions .placeholder-thumb[data-v-1fa91b82] {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  color: #cbd5e1;
}
.nav-suggestions .suggestion-info[data-v-1fa91b82] {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.nav-suggestions .suggestion-name[data-v-1fa91b82] {
  font-weight: 600;
  font-size: 0.95rem;
}
.nav-suggestions .suggestion-meta[data-v-1fa91b82] {
  color: #64748b;
  font-size: 0.8rem;
  font-weight: 500;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
.wrap[data-v-1fa91b82] {
    padding: 1rem;
    gap: 1rem;
}
.title[data-v-1fa91b82] {
    font-size: 1.25rem;
}
.subtitle[data-v-1fa91b82] {
    font-size: 0.85rem;
}

  /* Tabs Stacked/Wrapped on Mobile */
.tabs[data-v-1fa91b82] {
    flex-wrap: wrap;
    overflow-x: visible;
    white-space: normal;
    padding-bottom: 0;
    gap: 0.75rem;
    border-bottom: none;
}
.tab[data-v-1fa91b82] {
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    flex: 1 1 auto; /* Grow to fill space */
    width: auto;
    display: flex;
    justify-content: center;
    border-radius: 12px; /* Pill shape */
    background-color: #f8fafc; /* Light bg for inactive */
    border: 1px solid #e2e8f0;
}
.tab.active[data-v-1fa91b82] {
    border-color: transparent;
}

  /* Stats Grid: Stack on mobile */
.stats-grid[data-v-1fa91b82] {
    grid-template-columns: 1fr;
    gap: 0.75rem;
}
.stat-card[data-v-1fa91b82] {
    padding: 1rem;
    min-height: auto;
}

  /* Tables */
.table-scroll[data-v-1fa91b82] {
    margin: 0 -1rem; /* Full width on mobile */
    border-radius: 0;
    border-left: none;
    border-right: none;
    width: calc(100% + 2rem);
}
.data-table th[data-v-1fa91b82],
  .data-table td[data-v-1fa91b82] {
    padding: 0.75rem 0.5rem;
    font-size: 0.85rem;
}
.table-img-container[data-v-1fa91b82] {
    width: 40px;
    height: 40px;
}

  /* Modals */
.modal[data-v-1fa91b82] {
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    display: flex;
    flex-direction: column;
}
.modal-overlay[data-v-1fa91b82] {
    padding: 0;
    align-items: flex-end; /* Sheet-like on some mobiles, or full screen */
}
.modal-header[data-v-1fa91b82] {
    padding: 1rem;
}
.modal-body[data-v-1fa91b82] {
    padding: 1rem;
    flex: 1;
    overflow-y: auto;
}
.modal-footer[data-v-1fa91b82] {
    padding: 1rem;
    flex-shrink: 0; /* Ensure footer stays visible or at bottom */
}

  /* Forms */
.form-row[data-v-1fa91b82] {
    grid-template-columns: 1fr;
}
.btn-primary[data-v-1fa91b82], .btn-secondary[data-v-1fa91b82] {
    padding: 0.7rem 1rem;
    font-size: 0.9rem;
    width: 100%; /* Full width buttons on mobile */
    justify-content: center;
}
.modal-footer[data-v-1fa91b82] {
    flex-direction: column-reverse; /* Stack buttons, primary on top usually or reverse */
    gap: 0.75rem;
}
.modal-footer button[data-v-1fa91b82] {
    width: 100%;
    margin: 0;
}

  /* Images Grid */
.images-grid[data-v-1fa91b82] {
    grid-template-columns: 1fr; /* Single column for images */
}
  
  /* Pagination */
.pagination-controls[data-v-1fa91b82] {
    flex-direction: row;
    padding: 0.5rem;
    gap: 0.5rem;
}
.pagination-controls span[data-v-1fa91b82] {
    font-size: 0.9rem;
}
.btn-pagination[data-v-1fa91b82] {
    width: 40px;
    height: 40px;
}

  /* Toast Mobile */
.toast-notification[data-v-1fa91b82] {
    top: 1rem;
    right: 1rem;
    left: 1rem;
    min-width: auto;
    width: auto;
    justify-content: flex-start;
}

  /* Prevent iOS Zoom on inputs */
.input[data-v-1fa91b82],
  .time-select[data-v-1fa91b82],
  select[data-v-1fa91b82] {
    font-size: 16px !important;
}

  /* Adjust Time Input for small screens */
.segmented[data-v-1fa91b82] {
    padding-left: 38px;
    padding-right: 38px;
}
.time-icon[data-v-1fa91b82] {
    left: 8px;
}
.time-clear[data-v-1fa91b82] {
    right: 4px;
}
}

/* Reuse generic modal styles */
.modal-overlay[data-v-01770010] {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 1rem;
  animation: fadeIn-01770010 0.3s ease-out;
}
@keyframes fadeIn-01770010 {
from { opacity: 0;
}
to { opacity: 1;
}
}
.modal-container[data-v-01770010] {
  position: relative;
  background: var(--panel-bg, #1e293b);
  border: 1.5px solid var(--panel-border, #334155);
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  width: 100%;
  max-width: 420px;
  overflow: hidden;
  animation: slideUp-01770010 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  color: var(--text, #f1f5f9);
}
@keyframes slideUp-01770010 {
from { opacity: 0; transform: translateY(40px) scale(0.95);
}
to { opacity: 1; transform: translateY(0) scale(1);
}
}
.modal-content[data-v-01770010] {
  padding: 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

/* Icons */
.icon-wrapper[data-v-01770010] {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.icon-wrapper.success[data-v-01770010] {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3);
}
.icon-wrapper.error[data-v-01770010] {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.3);
}
.icon-wrapper.warning[data-v-01770010] {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.3);
}
.icon-wrapper.info[data-v-01770010] {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3);
}
.icon[data-v-01770010] {
  font-size: 2.5rem;
  color: #fff;
}

/* Typography */
.modal-title[data-v-01770010] {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.02em;
}
.modal-title.success[data-v-01770010] { color: #34d399;
}
.modal-title.error[data-v-01770010] { color: #f87171;
}
.modal-title.warning[data-v-01770010] { color: #fbbf24;
}
.modal-title.info[data-v-01770010] { color: #60a5fa;
}
.modal-message[data-v-01770010] {
  color: var(--muted, #94a3b8);
  font-size: 1rem;
  margin: 0;
  line-height: 1.6;
}
.html-content[data-v-01770010] {
  text-align: left;
  width: 100%;
  background: rgba(255,255,255,0.05);
  padding: 1rem;
  border-radius: 12px;
  font-size: 0.9rem;
}

/* Buttons */
.modal-actions[data-v-01770010] {
  display: flex;
  gap: 1rem;
  width: 100%;
  margin-top: 1rem;
}
button[data-v-01770010] {
  flex: 1;
  padding: 0.875rem;
  border: none;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s ease;
  color: white;
}
.btn-confirm.success[data-v-01770010] {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}
.btn-confirm.success[data-v-01770010]:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
}
.btn-confirm.error[data-v-01770010] {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}
.btn-confirm.error[data-v-01770010]:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(239, 68, 68, 0.4);
}
.btn-confirm.warning[data-v-01770010] {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}
.btn-confirm.warning[data-v-01770010]:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.4);
}
.btn-confirm.info[data-v-01770010] {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.btn-confirm.info[data-v-01770010]:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
}

/* Transitions */
.modal-enter-active[data-v-01770010], .modal-leave-active[data-v-01770010] { transition: opacity 0.3s ease;
}
.modal-enter-from[data-v-01770010], .modal-leave-to[data-v-01770010] { opacity: 0;
}

.page-wrap[data-v-4e6d6f6b] {
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  background: linear-gradient(135deg, #0a0b14 0%, #1a1610 100%);
  min-height: 100vh;
}
.page-header[data-v-4e6d6f6b] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2.5rem;
}

/* Filters Bar */
.filters-bar[data-v-4e6d6f6b] {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
  background: var(--surface);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  padding: 1.25rem;
  border-radius: 20px;
  border: 1px solid rgba(198, 146, 61, 0.2);
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 8px 32px rgba(198, 146, 61, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  position: relative;
  overflow: visible;
  z-index: 10;
}
.filters-bar[data-v-4e6d6f6b]::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(198, 146, 61, 0.1), transparent);
  transition: left 0.5s;
}
.filters-bar[data-v-4e6d6f6b]:hover::before {
  left: 100%;
}
.search-box[data-v-4e6d6f6b] {
  position: relative;
  flex: 1;
  min-width: 200px;
  max-width: 400px;
  z-index: 100;
}
.search-icon[data-v-4e6d6f6b] {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
}
.filter-input[data-v-4e6d6f6b] {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 2.8rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 0.95rem;
  outline: none;
  transition: all 0.2s;
}
.filter-input[data-v-4e6d6f6b]:focus {
  border-color: #C6923D;
  box-shadow: 0 0 0 3px rgba(198, 146, 61, 0.1);
}
.filter-group[data-v-4e6d6f6b] {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.range-inputs[data-v-4e6d6f6b] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.filter-input.small[data-v-4e6d6f6b] {
  width: 80px;
  padding-left: 0.75rem;
  padding-right: 0.5rem;
}
.separator[data-v-4e6d6f6b] {
  color: var(--muted);
  font-weight: bold;
}
.filter-select[data-v-4e6d6f6b] {
  padding: 0.75rem 2rem 0.75rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 0.95rem;
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%236b7280%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem top 50%;
  background-size: 0.65rem auto;
}
.reset-filters[data-v-4e6d6f6b] {
  color: var(--muted);
}
.reset-filters[data-v-4e6d6f6b]:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}
.title[data-v-4e6d6f6b] {
  font-size: 2rem;
  font-weight: 800;
  background: linear-gradient(135deg, #C6923D 0%, #DFC05E 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
}
.subtitle[data-v-4e6d6f6b] {
  color: var(--muted);
  margin-top: 0.5rem;
  font-size: 1rem;
}
.grid[data-v-4e6d6f6b] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}
.card[data-v-4e6d6f6b] {
  background: var(--surface);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(198, 146, 61, 0.2);
  border-radius: 24px;
  padding: 1.75rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  position: relative;
  box-shadow: 0 8px 32px rgba(198, 146, 61, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}
.card[data-v-4e6d6f6b]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #C6923D, #DFC05E, #06b6d4);
  opacity: 0;
  transition: opacity 0.3s;
}
.card[data-v-4e6d6f6b]:hover::before {
  opacity: 1;
}
.card[data-v-4e6d6f6b]:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 60px rgba(198, 146, 61, 0.25),
    0 8px 16px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  border-color: rgba(198, 146, 61, 0.4);
}
.card-icon[data-v-4e6d6f6b] {
  background: linear-gradient(135deg, #C6923D 0%, #DFC05E 100%);
  color: white;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  box-shadow: 0 8px 24px rgba(198, 146, 61, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.card:hover .card-icon[data-v-4e6d6f6b] {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 12px 32px rgba(198, 146, 61, 0.4);
}
.card-info[data-v-4e6d6f6b] {
  flex: 1;
}
.card-info h3[data-v-4e6d6f6b] {
  font-weight: 700;
  margin: 0;
  color: var(--text);
  font-size: 1.1rem;
}
.rate[data-v-4e6d6f6b] {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text);
  margin-top: 0.25rem;
  letter-spacing: -0.02em;
}
.card-actions[data-v-4e6d6f6b] {
  display: flex;
  gap: 0.5rem;
}
.btn-icon[data-v-4e6d6f6b] {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.6rem;
  border-radius: 12px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}
.btn-icon[data-v-4e6d6f6b]:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text);
}
.btn-icon.edit[data-v-4e6d6f6b]:hover {
  background: rgba(198, 146, 61, 0.1);
  color: #C6923D;
  transform: scale(1.1);
}
.btn-icon.delete[data-v-4e6d6f6b]:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  transform: scale(1.1);
}
.btn-primary[data-v-4e6d6f6b] {
  background: linear-gradient(135deg, #C6923D 0%, #DFC05E 50%, #06b6d4 100%);
  color: white;
  border: none;
  padding: 0.875rem 1.75rem;
  border-radius: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 8px 24px rgba(198, 146, 61, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
}
.btn-primary[data-v-4e6d6f6b]::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s;
}
.btn-primary[data-v-4e6d6f6b]:hover::before {
  left: 100%;
}
.btn-primary[data-v-4e6d6f6b]:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 32px rgba(198, 146, 61, 0.4),
    0 4px 12px rgba(223, 192, 94, 0.2);
}
.btn-secondary[data-v-4e6d6f6b] {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.75rem 1.5rem;
  border-radius: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-secondary[data-v-4e6d6f6b]:hover {
  background: var(--bg);
}

/* Empty State */
.empty-state[data-v-4e6d6f6b] {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem;
  color: var(--muted);
  background: var(--surface);
  border-radius: 24px;
  border: 2px dashed var(--border);
}
.empty-icon[data-v-4e6d6f6b] {
  font-size: 4rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

/* Loading */
.loading[data-v-4e6d6f6b] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem;
  color: var(--muted);
}
.spinner[data-v-4e6d6f6b] {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(198, 146, 61, 0.1);
  border-top-color: #C6923D;
  border-radius: 50%;
  animation: spin-4e6d6f6b 1s linear infinite;
  margin-bottom: 1rem;
}
@keyframes spin-4e6d6f6b {
to {
    transform: rotate(360deg);
}
}
@keyframes fadeIn-4e6d6f6b {
from {
    opacity: 0;
    transform: translateY(10px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

/* Modal Form */
.modal-backdrop[data-v-4e6d6f6b] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  backdrop-filter: blur(8px);
}
.modal[data-v-4e6d6f6b] {
  background: var(--surface);
  border-radius: 24px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border);
  overflow: hidden;
  animation: slideUp-4e6d6f6b 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes slideUp-4e6d6f6b {
from {
    opacity: 0;
    transform: translateY(20px) scale(0.96);
}
to {
    opacity: 1;
    transform: translateY(0) scale(1);
}
}
.modal-header[data-v-4e6d6f6b] {
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg);
}
.modal-header h2[data-v-4e6d6f6b] {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
}
.close-btn[data-v-4e6d6f6b] {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: 0.5rem;
  border-radius: 50%;
  display: flex;
  transition: background 0.2s;
}
.close-btn[data-v-4e6d6f6b]:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text);
}
.modal-body[data-v-4e6d6f6b] {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.form-group[data-v-4e6d6f6b] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.form-group label[data-v-4e6d6f6b] {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
}
.input-field[data-v-4e6d6f6b] {
  padding: 1rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
  outline: none;
  transition: all 0.2s;
}
.input-field[data-v-4e6d6f6b]:focus {
  border-color: #C6923D;
  box-shadow: 0 0 0 4px rgba(198, 146, 61, 0.1);
  background: var(--surface);
}
select.input-field[data-v-4e6d6f6b] {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%236b7280%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 0.8rem auto;
  padding-right: 2.5rem;
  cursor: pointer;
}
.modal-footer[data-v-4e6d6f6b] {
  padding: 1.5rem 2rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  background: var(--bg);
}

/* Transitions */
.fade-enter-active[data-v-4e6d6f6b],
.fade-leave-active[data-v-4e6d6f6b] {
  transition: opacity 0.2s;
}
.fade-enter-from[data-v-4e6d6f6b],
.fade-leave-to[data-v-4e6d6f6b] {
  opacity: 0;
}

/* Dark Mode Manual Toggle Support */
:root[data-theme="dark"],:root[data-theme="dark"],:root[data-theme="dark"] {
  background: #1e293b;
  border-color: #334155;
}
:root[data-theme="dark"],:root[data-theme="dark"] {
  background: #0f172a;
}
:root[data-theme="dark"],:root[data-theme="dark"],:root[data-theme="dark"] {
  background: #0f172a;
  border-color: #334155;
  color: #f1f5f9;
}
:root[data-theme="dark"] {
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2394a3b8%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  color-scheme: dark;
}
:root[data-theme="dark"] {
  background-color: #0f172a;
  color: #f1f5f9;
}
:root[data-theme="dark"] {
  background: #334155;
}
:root[data-theme="dark"] {
  background: rgba(255, 255, 255, 0.1);
}
:root[data-theme="dark"] {
  background: #1e293b;
  border-color: #334155;
}

/* Responsive Design */
@media (max-width: 768px) {
.page-wrap[data-v-4e6d6f6b] {
    padding: 1.5rem;
}
.filters-bar[data-v-4e6d6f6b] {
    flex-direction: column;
    align-items: stretch;
}
.search-box[data-v-4e6d6f6b] {
    width: 100%;
}
.filter-group[data-v-4e6d6f6b] {
    width: 100%;
    justify-content: space-between;
}
.range-inputs[data-v-4e6d6f6b] {
    flex: 1;
}
.filter-input.small[data-v-4e6d6f6b] {
    flex: 1;
}
.filter-select[data-v-4e6d6f6b] {
    flex: 1;
}
.page-header[data-v-4e6d6f6b] {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
}
.btn-primary[data-v-4e6d6f6b] {
    width: 100%;
    justify-content: center;
}
.grid[data-v-4e6d6f6b] {
    grid-template-columns: 1fr;
}
.modal[data-v-4e6d6f6b] {
    max-width: 100%;
    margin: 1rem;
    border-radius: 20px;
}
.modal-header[data-v-4e6d6f6b],
  .modal-footer[data-v-4e6d6f6b] {
    padding: 1.25rem 1.5rem;
}
.modal-body[data-v-4e6d6f6b] {
    padding: 1.5rem;
}
}

/* Dropdown Search Styles */
.nav-search[data-v-4e6d6f6b] {
  position: relative;
}
.clear-btn[data-v-4e6d6f6b] {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.clear-btn[data-v-4e6d6f6b]:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text);
}
.nav-suggestions[data-v-4e6d6f6b] {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--surface);
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
  max-height: 300px;
  overflow-y: auto;
  z-index: 9999;
  animation: slideDown-4e6d6f6b 0.2s ease-out;
}
@keyframes slideDown-4e6d6f6b {
from {
    opacity: 0;
    transform: translateY(-10px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.suggestion-item[data-v-4e6d6f6b] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: background 0.2s;
  border-bottom: 1px solid var(--border);
}
.suggestion-item[data-v-4e6d6f6b]:last-child {
  border-bottom: none;
}
.suggestion-item[data-v-4e6d6f6b]:hover,
.suggestion-item.active[data-v-4e6d6f6b] {
  background: var(--bg);
}
.suggestion-thumb[data-v-4e6d6f6b] {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  flex-shrink: 0;
}
.suggestion-thumb.placeholder-thumb[data-v-4e6d6f6b] {
  background: linear-gradient(135deg, rgba(198, 146, 61, 0.1), rgba(223, 192, 94, 0.1));
  color: #C6923D;
}
.suggestion-info[data-v-4e6d6f6b] {
  flex: 1;
  overflow: hidden;
}
.suggestion-name[data-v-4e6d6f6b] {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.suggestion-meta[data-v-4e6d6f6b] {
  font-size: 0.85rem;
  color: var(--muted);
}

/* Dark Mode Overrides for Suggestions */
:root[data-theme="dark"] {
  background-color: #1e293b !important;
  border-color: #334155;
}
:root[data-theme="dark"] {
  border-color: #334155;
  background-color: #1e293b;
}
:root[data-theme="dark"],:root[data-theme="dark"] {
  background-color: #334155 !important;
}

/* Global dark mode overrides for select options - placed outside scoped styles to ensure specificity */
:root[data-theme="dark"] select,
:root[data-theme="dark"] select option,
:root[data-theme="dark"] .input-field option {
  background-color: #1e293b !important;
  color: #ffffff !important;
  color-scheme: dark;
}
:root[data-theme="dark"] select:focus option {
  background-color: #1e293b !important;
  color: #ffffff !important;
}

.page-container[data-v-184930ab] {
  padding: 2rem;
  max-width: 1600px;
  margin: 0 auto;
  background: linear-gradient(135deg, #0a0b14 0%, #1a1610 100%);
  min-height: 100vh;
}
.header[data-v-184930ab] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  gap: 1rem;
}
.header-content[data-v-184930ab] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.title[data-v-184930ab] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 2rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.title .icon[data-v-184930ab] {
  font-size: 2.5rem;
  color: #7c5cff;
}
.subtitle[data-v-184930ab] {
  color: var(--muted);
  margin: 0;
}
.stats-grid[data-v-184930ab] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.stat-card[data-v-184930ab] {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.75rem;
  background: linear-gradient(135deg, #7c5cff, #DFC05E);
  border: none;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(198, 146, 61, 0.35);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.stat-card[data-v-184930ab]::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  transition: all 0.5s ease;
}
.stat-card[data-v-184930ab]:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(198, 146, 61, 0.45);
}
.stat-card[data-v-184930ab]:hover::before {
  top: -60%;
  right: -60%;
}
.stat-card[data-v-184930ab]:nth-child(1) {
  background: linear-gradient(135deg, #f59e0b, #f97316);
}
.stat-card[data-v-184930ab]:nth-child(2) {
  background: linear-gradient(135deg, #10b981, #06b6d4);
}
.stat-card[data-v-184930ab]:nth-child(3) {
  background: linear-gradient(135deg, #f59e0b, #eab308);
}
.stat-card[data-v-184930ab]:nth-child(4) {
  background: linear-gradient(135deg, #7c5cff, #a855f7);
}
.stat-icon[data-v-184930ab] {
  font-size: 3rem;
  color: white;
  background: rgba(255, 255, 255, 0.2);
  padding: 1rem;
  border-radius: 16px;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 1;
}
.stat-icon.paid[data-v-184930ab] {
  color: white;
  background: rgba(255, 255, 255, 0.2);
}
.stat-icon.pending[data-v-184930ab] {
  color: white;
  background: rgba(255, 255, 255, 0.2);
}
.stat-content[data-v-184930ab] {
  flex: 1;
  z-index: 1;
}
.stat-value[data-v-184930ab] {
  font-size: 2rem;
  font-weight: 800;
  color: white;
  margin: 0 0 0.25rem 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.stat-label[data-v-184930ab] {
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.95rem;
  margin: 0;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.search-bar[data-v-184930ab] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 1.5rem;
}
.search-bar span[data-v-184930ab] {
  color: var(--muted);
}
.search-bar input[data-v-184930ab] {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 1rem;
  outline: none;
}
.table-container[data-v-184930ab] {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.modern-table[data-v-184930ab] {
  width: 100%;
  border-collapse: collapse;
}
.modern-table thead[data-v-184930ab] {
  background: linear-gradient(135deg, rgba(198, 146, 61, 0.1), rgba(223, 192, 94, 0.1));
  border-bottom: 2px solid var(--border);
}
.modern-table th[data-v-184930ab] {
  padding: 1rem;
  text-align: left;
  font-weight: 600;
  color: var(--text);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.modern-table td[data-v-184930ab] {
  padding: 1rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.modern-table tbody tr[data-v-184930ab]:hover {
  background: rgba(198, 146, 61, 0.05);
}
.invoice-number[data-v-184930ab] {
  font-weight: 600;
  font-family: 'Courier New', monospace;
}
.total-amount[data-v-184930ab] {
  font-weight: 700;
  color: #7c5cff;
}
.status-badge[data-v-184930ab] {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  color: white;
  text-transform: capitalize;
}
.action-buttons[data-v-184930ab] {
  display: flex;
  gap: 0.5rem;
}
.btn-primary[data-v-184930ab], .btn-secondary[data-v-184930ab] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}
.btn-primary[data-v-184930ab] {
  background: linear-gradient(135deg, #7c5cff, #DFC05E);
  color: white;
  box-shadow: 0 4px 12px rgba(198, 146, 61, 0.3);
}
.btn-primary[data-v-184930ab]:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(198, 146, 61, 0.4);
}
.btn-secondary[data-v-184930ab] {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-secondary[data-v-184930ab]:hover {
  background: rgba(198, 146, 61, 0.1);
}
.btn-secondary.small[data-v-184930ab] {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
}
.btn-icon[data-v-184930ab] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: rgba(198, 146, 61, 0.1);
  color: #7c5cff;
  cursor: pointer;
  transition: all 0.3s;
}
.btn-icon[data-v-184930ab]:hover {
  background: rgba(198, 146, 61, 0.2);
  transform: scale(1.1);
}
.btn-icon.danger[data-v-184930ab] {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}
.btn-icon.danger[data-v-184930ab]:hover {
  background: rgba(239, 68, 68, 0.2);
}
.loading[data-v-184930ab], .empty-state[data-v-184930ab] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
  color: var(--muted);
}
.loading span[data-v-184930ab], .empty-state span[data-v-184930ab] {
  font-size: 4rem;
  margin-bottom: 1rem;
  color: #7c5cff;
}
.spin[data-v-184930ab] {
  animation: spin-184930ab 1s linear infinite;
}
@keyframes spin-184930ab {
from { transform: rotate(0deg);
}
to { transform: rotate(360deg);
}
}

/* Modal Styles */
.modal-overlay[data-v-184930ab] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  padding: 1rem;
  animation: fadeIn-184930ab 0.3s ease-out;
}
@keyframes fadeIn-184930ab {
from { opacity: 0;
}
to { opacity: 1;
}
}
.modal-content[data-v-184930ab] {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 24px;
  max-width: 700px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 25px 80px rgba(198, 146, 61, 0.25), 0 0 1px rgba(0, 0, 0, 0.1);
  border: 2px solid rgba(198, 146, 61, 0.1);
  animation: slideUp-184930ab 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes slideUp-184930ab {
from { opacity: 0; transform: translateY(40px) scale(0.95);
}
to { opacity: 1; transform: translateY(0) scale(1);
}
}

/* Dark mode para el modal */
:root[data-theme="dark"] .modal-content[data-v-184930ab] {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border: 2px solid rgba(198, 146, 61, 0.3);
}
.modal-content.large[data-v-184930ab] {
  max-width: 950px;
}
.modal-header[data-v-184930ab] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem 2rem 1.5rem 2rem;
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, #7c5cff, #DFC05E, #7c5cff);
  border-image-slice: 1;
  position: sticky;
  top: 0;
  background: linear-gradient(135deg, rgba(198, 146, 61, 0.08), rgba(223, 192, 94, 0.08));
  backdrop-filter: blur(10px);
  z-index: 10;
}
:root[data-theme="dark"] .modal-header[data-v-184930ab] {
  background: linear-gradient(135deg, rgba(198, 146, 61, 0.15), rgba(223, 192, 94, 0.15));
}
.modal-header h2[data-v-184930ab] {
  margin: 0;
  background: linear-gradient(135deg, #7c5cff, #DFC05E);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.modal-header h2[data-v-184930ab]::before {
  content: '📄';
  font-size: 2rem;
}
.btn-close[data-v-184930ab] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.3s;
}
.btn-close[data-v-184930ab]:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}
.modal-form[data-v-184930ab] {
  padding: 2rem;
  background: transparent;
}
.form-section[data-v-184930ab] {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: rgba(198, 146, 61, 0.03);
  border-radius: 16px;
  border: 1px solid rgba(198, 146, 61, 0.1);
  position: relative;
  overflow: hidden;
}
:root[data-theme="dark"] .form-section[data-v-184930ab] {
  background: rgba(198, 146, 61, 0.08);
  border-color: rgba(198, 146, 61, 0.2);
}
.form-section[data-v-184930ab]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #7c5cff, #DFC05E);
  border-radius: 4px 0 0 4px;
}
.section-title[data-v-184930ab] {
  font-size: 1.2rem;
  font-weight: 700;
  color: #7c5cff;
  margin: 0 0 1.25rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  letter-spacing: -0.01em;
}
.section-title[data-v-184930ab]::before {
  content: '▸';
  font-size: 1.4rem;
  color: #DFC05E;
}
.section-header[data-v-184930ab] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.form-row[data-v-184930ab] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}
.form-group[data-v-184930ab] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.form-group.flex-1[data-v-184930ab] {
  flex: 1;
}
.form-group.flex-2[data-v-184930ab] {
  flex: 2;
}
.form-group label[data-v-184930ab] {
  font-weight: 700;
  color: #475569;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}
:root[data-theme="dark"] .form-group label[data-v-184930ab] {
  color: #94a3b8;
}
.form-group input[data-v-184930ab],
.form-group select[data-v-184930ab],
.form-group textarea[data-v-184930ab] {
  padding: 0.875rem 1.25rem;
  border: 2px solid rgba(198, 146, 61, 0.15);
  border-radius: 12px;
  background: white;
  color: #1e293b;
  font-size: 1rem;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
:root[data-theme="dark"] .form-group input[data-v-184930ab],
:root[data-theme="dark"] .form-group select[data-v-184930ab],
:root[data-theme="dark"] .form-group textarea[data-v-184930ab] {
  background: rgba(255, 255, 255, 0.08);
  color: #f1f5f9;
  border-color: rgba(198, 146, 61, 0.25);
}
.form-group input[data-v-184930ab]:hover,
.form-group select[data-v-184930ab]:hover,
.form-group textarea[data-v-184930ab]:hover {
  border-color: rgba(198, 146, 61, 0.3);
  box-shadow: 0 4px 8px rgba(198, 146, 61, 0.1);
}
.form-group input[data-v-184930ab]:focus,
.form-group select[data-v-184930ab]:focus,
.form-group textarea[data-v-184930ab]:focus {
  outline: none;
  border-color: #7c5cff;
  box-shadow: 0 0 0 4px rgba(198, 146, 61, 0.15), 0 4px 12px rgba(198, 146, 61, 0.2);
  transform: translateY(-1px);
}
.form-group input.readonly[data-v-184930ab] {
  background: linear-gradient(135deg, rgba(198, 146, 61, 0.12), rgba(223, 192, 94, 0.12));
  font-weight: 700;
  color: #7c5cff;
  cursor: not-allowed;
  border-color: rgba(198, 146, 61, 0.3);
  font-family: 'Courier New', monospace;
  letter-spacing: 0.02em;
}
:root[data-theme="dark"] .form-group input.readonly[data-v-184930ab] {
  background: linear-gradient(135deg, rgba(198, 146, 61, 0.2), rgba(223, 192, 94, 0.2));
  color: #a78bfa;
}
.items-list[data-v-184930ab] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.item-row[data-v-184930ab] {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: flex-end;
  padding: 1.25rem;
  background: white;
  border-radius: 12px;
  border: 2px solid rgba(198, 146, 61, 0.1);
  box-shadow: 0 2px 8px rgba(198, 146, 61, 0.08);
  transition: all 0.3s ease;
}
:root[data-theme="dark"] .item-row[data-v-184930ab] {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(198, 146, 61, 0.2);
}
.item-row[data-v-184930ab]:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(198, 146, 61, 0.15);
  border-color: rgba(198, 146, 61, 0.3);
}
.item-fields[data-v-184930ab] {
  display: grid;
  grid-template-columns: 1.5fr 2fr 0.8fr 1fr 1fr;
  gap: 0.75rem;
  align-items: flex-end;
  width: 100%;
}
.item-fields .form-group[data-v-184930ab] {
  min-width: 0;
  max-width: 100%;
}
.item-total[data-v-184930ab] {
  text-align: right;
  padding-right: 1rem !important;
}
.item-row .btn-icon[data-v-184930ab] {
  align-self: center;
  flex-shrink: 0;
}
@media (max-width: 1200px) {
.item-fields[data-v-184930ab] {
    grid-template-columns: 1fr 1.5fr;
    gap: 0.75rem;
}
.item-row[data-v-184930ab] {
    grid-template-columns: 1fr;
}
.item-row .btn-icon[data-v-184930ab] {
    justify-self: end;
}
}
.totals-section[data-v-184930ab] {
  max-width: 450px;
  margin-left: auto;
  padding: 1.75rem;
  background: linear-gradient(135deg, rgba(198, 146, 61, 0.08), rgba(223, 192, 94, 0.08));
  border-radius: 16px;
  border: 2px solid rgba(198, 146, 61, 0.2);
  box-shadow: 0 8px 24px rgba(198, 146, 61, 0.15);
}
:root[data-theme="dark"] .totals-section[data-v-184930ab] {
  background: linear-gradient(135deg, rgba(198, 146, 61, 0.15), rgba(223, 192, 94, 0.15));
}
.total-row[data-v-184930ab] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  color: var(--text);
}
.total-row.grand-total[data-v-184930ab] {
  font-size: 1.5rem;
  font-weight: 800;
  padding: 1.25rem;
  margin: 1rem -1rem -1rem -1rem;
  background: linear-gradient(135deg, #7c5cff, #DFC05E);
  color: white !important;
  border-radius: 0 0 14px 14px;
  box-shadow: 0 -4px 20px rgba(198, 146, 61, 0.3);
}
.total-row.grand-total span[data-v-184930ab] {
  color: white !important;
}
.total-row.grand-total .amount[data-v-184930ab] {
  font-size: 1.75rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.total-row .amount[data-v-184930ab] {
  font-weight: 600;
}
.tax-input[data-v-184930ab] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.tax-rate[data-v-184930ab] {
  width: 80px;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--background);
  color: var(--text);
  text-align: center;
}
.modal-actions[data-v-184930ab] {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 2rem;
  padding: 1.5rem 2rem;
  background: linear-gradient(135deg, rgba(198, 146, 61, 0.05), rgba(223, 192, 94, 0.05));
  border-radius: 0 0 22px 22px;
  margin-left: -2rem;
  margin-right: -2rem;
  margin-bottom: -1.5rem;
}
:root[data-theme="dark"] .modal-actions[data-v-184930ab] {
  background: linear-gradient(135deg, rgba(198, 146, 61, 0.1), rgba(223, 192, 94, 0.1));
}
.modal-actions button[data-v-184930ab] {
  min-width: 140px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.9rem;
}
@media (max-width: 768px) {
.page-container[data-v-184930ab] {
    padding: 1rem;
}
.header[data-v-184930ab] {
    flex-direction: column;
    align-items: stretch;
}
.stats-grid[data-v-184930ab] {
    grid-template-columns: 1fr;
}
.form-row[data-v-184930ab] {
    grid-template-columns: 1fr;
}
.item-row[data-v-184930ab] {
    flex-direction: column;
}
.item-fields[data-v-184930ab] {
    flex-direction: column;
}
.table-container[data-v-184930ab] {
    overflow-x: auto;
}
.modern-table[data-v-184930ab] {
    min-width: 900px;
}
}

/* ===== MODAL OVERLAY ===== */
.modal-overlay[data-v-45f6b305] {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 1rem;
  animation: fadeIn-45f6b305 0.3s ease-out;
}
@keyframes fadeIn-45f6b305 {
from { opacity: 0;
}
to { opacity: 1;
}
}

/* ===== MODAL CONTAINER ===== */
.modal-container[data-v-45f6b305] {
  position: relative;
  background: var(--surface);
  border: 1px solid rgba(124, 92, 255, 0.2);
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  width: 100%;
  max-width: 420px;
  overflow: hidden;
  animation: slideUp-45f6b305 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  color: var(--text);
  backdrop-filter: blur(20px);
}
@keyframes slideUp-45f6b305 {
from { opacity: 0; transform: translateY(40px) scale(0.95);
}
to { opacity: 1; transform: translateY(0) scale(1);
}
}

/* ===== MODAL CONTENT ===== */
.modal-content[data-v-45f6b305] {
  padding: 2.5rem 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

/* ===== ICONS & SPINNER ===== */
.loading-wrapper[data-v-45f6b305] {
  padding: 1rem;
}
.spinner[data-v-45f6b305] {
  width: 60px;
  height: 60px;
  border: 4px solid rgba(124, 92, 255, 0.1);
  border-top-color: #7c5cff;
  border-radius: 50%;
  animation: spin-45f6b305 1s linear infinite;
}
@keyframes spin-45f6b305 {
to { transform: rotate(360deg);
}
}
.icon-wrapper[data-v-45f6b305] {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scaleIn-45f6b305 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.success-wrapper[data-v-45f6b305] {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  box-shadow: 0 8px 24px rgba(34, 197, 94, 0.3);
}
.error-wrapper[data-v-45f6b305] {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.3);
}
.info-wrapper[data-v-45f6b305] {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3);
}
@keyframes scaleIn-45f6b305 {
from { transform: scale(0); opacity: 0;
}
to { transform: scale(1); opacity: 1;
}
}
.icon[data-v-45f6b305] {
  font-size: 3rem;
  color: #fff;
  animation: checkmark-45f6b305 0.6s ease-in-out 0.2s backwards;
}
@keyframes checkmark-45f6b305 {
0% { transform: scale(0) rotate(-45deg); opacity: 0;
}
50% { transform: scale(1.2) rotate(0deg);
}
100% { transform: scale(1) rotate(0deg); opacity: 1;
}
}

/* ===== TEXT ===== */
.modal-title[data-v-45f6b305] {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.01em;
}
.modal-title.loading[data-v-45f6b305] { color: var(--text);
}
.modal-title.success[data-v-45f6b305] { color: #22c55e;
}
.modal-title.error[data-v-45f6b305] { color: #ef4444;
}
.modal-title.info[data-v-45f6b305] { color: #3b82f6;
}
.modal-message[data-v-45f6b305] {
  color: var(--muted);
  font-size: 1rem;
  margin: 0;
  line-height: 1.6;
}

/* ===== BUTTON ===== */
.close-btn[data-v-45f6b305] {
  margin-top: 0.5rem;
  padding: 0.875rem 2rem;
  border: none;
  border-radius: 12px;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 140px;
}
.close-btn.success[data-v-45f6b305] {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.3);
}
.close-btn.error[data-v-45f6b305] {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
}
.close-btn.info[data-v-45f6b305] {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
}
.close-btn[data-v-45f6b305]:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}
.close-btn[data-v-45f6b305]:active {
  transform: translateY(0);
}

/* ===== TRANSITIONS ===== */
.modal-enter-active[data-v-45f6b305],
.modal-leave-active[data-v-45f6b305] {
  transition: opacity 0.3s ease;
}
.modal-enter-from[data-v-45f6b305],
.modal-leave-to[data-v-45f6b305] {
  opacity: 0;
}
.modal-enter-active .modal-container[data-v-45f6b305],
.modal-leave-active .modal-container[data-v-45f6b305] {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal-enter-from .modal-container[data-v-45f6b305],
.modal-leave-to .modal-container[data-v-45f6b305] {
  transform: scale(0.9) translateY(20px);
  opacity: 0;
}

.page-wrap {
  padding: 2rem;
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
  background: linear-gradient(135deg, #0a0b14 0%, #1a1610 100%);
  min-height: 100vh;
}
.page-wrap .page-header {
  margin-bottom: 3rem;
}
.page-wrap .header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.page-wrap .title {
  font-size: 2rem;
  font-weight: 800;
  background: linear-gradient(135deg, #7c5cff 0%, #DFC05E 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0 0 0.5rem 0;
}
.page-wrap .subtitle {
  color: var(--muted);
  font-size: 1rem;
  margin: 0;
}
.page-wrap .btn-check {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1.75rem;
  background: rgba(198, 146, 61, 0.1) !important;
  border: 1px solid var(--accent) !important;
  border-radius: 12px !important;
  color: var(--accent) !important;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(198, 146, 61, 0.1);
  text-decoration: none;
}
.page-wrap .btn-check:hover {
  transform: translateY(-2px);
  background: var(--accent) !important;
  color: white !important;
  box-shadow: 0 8px 24px rgba(198, 146, 61, 0.3);
}
.page-wrap .btn-check:active {
  transform: translateY(0);
}
.page-wrap .btn-check .material-symbols-rounded {
  font-size: 1.25rem;
}
.page-wrap .btn-secondary {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: var(--text) !important;
}
.page-wrap .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
}
.page-wrap .timeline {
  position: relative;
  padding-left: 2rem;
  border-left: 2px solid rgba(198, 146, 61, 0.1);
}
.page-wrap .timeline-item {
  position: relative;
  margin-bottom: 2.5rem;
}
.page-wrap .timeline-marker {
  position: absolute;
  left: -2.6rem;
  top: 1.5rem;
  width: 1.2rem;
  height: 1.2rem;
  background: var(--surface);
  border: 3px solid #7c5cff;
  border-radius: 50%;
  z-index: 1;
  box-shadow: 0 0 0 4px var(--bg);
}
.page-wrap .card {
  background: var(--surface);
  border-radius: 16px;
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(0,0,0,0.03);
  transition: transform 0.3s ease;
}
.page-wrap .card:hover {
  transform: translateY(-2px);
  border-color: rgba(198, 146, 61, 0.3);
}
.page-wrap .update-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.page-wrap .version-badge {
  background: rgba(198, 146, 61, 0.15);
  color: #7c5cff;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.9rem;
  border: 1px solid rgba(198, 146, 61, 0.2);
}
.page-wrap .update-date {
  color: var(--muted);
  font-size: 0.9rem;
}
.page-wrap .update-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.75rem 0;
  color: var(--text);
}
.page-wrap .update-description {
  color: var(--text);
  opacity: 0.9;
  line-height: 1.6;
  white-space: pre-line;
}
.page-wrap .empty-state {
  text-align: center;
  padding: 6rem 1rem;
  color: var(--muted);
  background: rgba(255,255,255,0.02);
  border-radius: 20px;
  border: 1px dashed rgba(255,255,255,0.1);
}
.page-wrap .icon-large {
  font-size: 4rem;
  margin-bottom: 1rem;
  opacity: 0.3;
  display: block;
}
.page-wrap .loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem;
  gap: 1rem;
  color: var(--muted);
}
.page-wrap .spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(198, 146, 61, 0.1);
  border-top-color: #7c5cff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg);
}
}
@media (max-width: 600px) {
.page-wrap {
    padding: 1.5rem 1rem;
}
.page-wrap .timeline {
    padding-left: 1.5rem;
}
.page-wrap .timeline-marker {
    left: -2.15rem;
    width: 1rem;
    height: 1rem;
}
}

.page-wrap[data-v-c6148b22] {
  padding: 1.5rem;
  display: grid;
  gap: 1.5rem;
  align-content: start;
  background: linear-gradient(135deg, #0a0b14 0%, #1a1610 100%);
  min-height: 100vh;
}
.page-header[data-v-c6148b22] {
  display: grid;
  gap: 0.25rem;
}
.title[data-v-c6148b22] {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
}
.subtitle[data-v-c6148b22] {
  font-size: 0.9rem;
  color: var(--text-secondary);
}
.content[data-v-c6148b22] {
  display: grid;
  gap: 1rem;
}
.card[data-v-c6148b22] {
  background: var(--surface-card);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.placeholder-text[data-v-c6148b22] {
  color: var(--text-secondary);
  font-size: 1.1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.icon-large[data-v-c6148b22] {
  font-size: 3rem;
  opacity: 0.5;
}

.modal-backdrop[data-v-b362b724] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    animation: fadeIn-b362b724 0.2s ease-out;
}
.modal-content[data-v-b362b724] {
    background: var(--panel-bg);
    width: 100%;
    max-width: 500px;
    border-radius: 1.5rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    animation: slideUp-b362b724 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid var(--border);
}
.modal-header[data-v-b362b724] {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-header h2[data-v-b362b724] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text);
}
.close-modal-btn[data-v-b362b724] {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--muted);
    padding: 0.25rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
}
.close-modal-btn[data-v-b362b724]:hover {
    background: var(--surface-2);
    color: var(--text);
}
.modal-form[data-v-b362b724] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.center-group[data-v-b362b724] {
    align-items: center;
}
.image-upload-wrapper[data-v-b362b724] {
    position: relative;
    width: 100px;
    height: 100px;
}
.file-input[data-v-b362b724] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 10;
}
.image-preview[data-v-b362b724],
.image-placeholder[data-v-b362b724] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--border);
    position: relative;
    box-sizing: border-box;
}
.image-preview[data-v-b362b724] {
    border-style: solid;
    border-color: var(--accent);
}
.image-preview img[data-v-b362b724] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.image-placeholder .icon[data-v-b362b724] {
    font-size: 2rem;
    color: var(--muted);
}
.btn-remove-img[data-v-b362b724] {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: all 0.2s;
}
.btn-remove-img[data-v-b362b724]:hover {
    background: var(--surface-2);
    color: #ef4444;
    transform: scale(1.1);
}
.btn-remove-img span[data-v-b362b724] {
    font-size: 16px;
}
.form-group[data-v-b362b724] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.form-row[data-v-b362b724] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.form-group label[data-v-b362b724] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text);
}
.form-group input[data-v-b362b724]:not([type="file"]),
.form-group textarea[data-v-b362b724] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    background: var(--bg);
    color: var(--text);
    font-family: inherit;
    font-size: 0.95rem;
    transition: all 0.2s;
}
.form-group input[data-v-b362b724]:not([type="file"]):focus,
.form-group textarea[data-v-b362b724]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.1);
}
.modal-actions[data-v-b362b724] {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1rem;
}
.btn-primary[data-v-b362b724] {
    background: var(--accent);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
}
.btn-primary[data-v-b362b724]:hover:not(:disabled) {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(124, 92, 255, 0.25);
}
.btn-secondary[data-v-b362b724] {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-secondary[data-v-b362b724]:hover {
    background: var(--surface-2);
}
.btn-primary[data-v-b362b724]:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}
.spinner-sm[data-v-b362b724] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b362b724 1s linear infinite;
}
@keyframes spin-b362b724 {
0% {
        transform: rotate(0deg);
}
100% {
        transform: rotate(360deg);
}
}
@keyframes fadeIn-b362b724 {
from {
        opacity: 0;
}
to {
        opacity: 1;
}
}
@keyframes slideUp-b362b724 {
from {
        transform: translateY(20px);
        opacity: 0;
}
to {
        transform: translateY(0);
        opacity: 1;
}
}

/* Responsive */
@media (max-width: 768px) {
.form-row[data-v-b362b724] {
        grid-template-columns: 1fr;
        gap: 0.5rem;
}
}

/* Core Page Layout */
.page-container[data-v-140fe7b8] {
  background: linear-gradient(135deg, #0a0b14 0%, #1a1610 100%);
  min-height: 100vh;
  min-height: 100vh;
  background-color: var(--background);
  color: var(--text);
  display: flex;
  flex-direction: column;
}
.page-header[data-v-140fe7b8] {
  background: var(--surface);
  padding: 1.5rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(10px);
  flex-wrap: wrap;
  gap: 1rem;
}
.header-left[data-v-140fe7b8] {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.back-btn[data-v-140fe7b8] {
  background: transparent;
  border: none;
  color: var(--text);
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: background 0.2s;
  display: grid;
  place-items: center;
}
.back-btn[data-v-140fe7b8]:hover {
  background: var(--surface-2);
}
.title-group[data-v-140fe7b8] {
  display: flex;
  flex-direction: column;
}
.page-title[data-v-140fe7b8] {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.5px;
}
.page-subtitle[data-v-140fe7b8] {
  margin: 0;
  color: var(--muted);
  font-size: 0.875rem;
}
.content-wrapper[data-v-140fe7b8] {
  flex: 1;
  padding: 2rem;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Stats Cards - Matches IngredientesPage.vue */
.stats-grid[data-v-140fe7b8] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}
.stat-card[data-v-140fe7b8] {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  color: #fff;
  border: none;
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  min-height: 92px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s;
}
.stat-card[data-v-140fe7b8]:hover {
  transform: translateY(-2px);
}
.stat-icon[data-v-140fe7b8] {
  font-size: 28px;
  background: rgba(255, 255, 255, 0.22);
  padding: 10px 12px;
  border-radius: 12px;
  /* Reset previous position absolute if it was there */
  position: static;
  opacity: 1;
  transform: none;
}
.stat-content[data-v-140fe7b8] {
  display: grid;
  gap: 6px;
  z-index: 1;
}
.stat-label[data-v-140fe7b8] {
  font-size: 0.8rem;
  opacity: 0.9;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 700;
}
.stat-value[data-v-140fe7b8] {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
}
.stat-sub[data-v-140fe7b8] {
  font-size: 0.8rem;
  opacity: 0.8;
  margin-top: 0;
}

/* Gradients from IngredientesPage */
.stat-card.orange[data-v-140fe7b8] {
  background: linear-gradient(135deg, #f59e0b, #f97316);
}
.stat-card.blue[data-v-140fe7b8] {
  background: linear-gradient(135deg, #3b82f6, #4f46e5);
}

/* Main Card (Filters + Table) */
.main-card[data-v-140fe7b8] {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  flex: 1;
}
.filters-bar[data-v-140fe7b8] {
  padding: 1.5rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.filter-row[data-v-140fe7b8] {
  display: flex;
  gap: 1rem;
  align-items: center;
}

/* Dropdown Search Styles */
.search-wrap[data-v-140fe7b8] {
  position: relative;
  flex: 1;
  max-width: 500px;
}
.input-group[data-v-140fe7b8] {
  display: flex;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 0.5rem 1rem;
  gap: 0.5rem;
  transition: all 0.2s;
}
.input-group[data-v-140fe7b8]:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(198, 146, 61, 0.1);
}
.search-input[data-v-140fe7b8] {
  border: none;
  background: transparent;
  width: 100%;
  color: var(--text);
  outline: none;
  font-size: 0.95rem;
}
.search-icon[data-v-140fe7b8] {
  color: var(--muted);
}
.clear-search[data-v-140fe7b8] {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
}
.clear-search[data-v-140fe7b8]:hover {
  color: var(--text);
}

/* Suggestion Dropdown */
.suggest-box[data-v-140fe7b8] {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 0.5rem;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15);
  z-index: 50;
  overflow: hidden;
}
.suggest-list[data-v-140fe7b8] {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 300px;
  overflow-y: auto;
}
.suggest-item[data-v-140fe7b8] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: background 0.15s;
  border-bottom: 1px solid var(--border);
}
.suggest-item[data-v-140fe7b8]:last-child {
  border-bottom: none;
}
.suggest-item[data-v-140fe7b8]:hover {
  background: var(--surface-2);
}
.suggest-avatar[data-v-140fe7b8] {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text);
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 0.85rem;
}
.suggest-info[data-v-140fe7b8] {
  display: flex;
  flex-direction: column;
}
.suggest-name[data-v-140fe7b8] {
  font-weight: 500;
  color: var(--text);
}
.suggest-sub[data-v-140fe7b8] {
  font-size: 0.8rem;
  color: var(--muted);
}
.suggest-empty[data-v-140fe7b8] {
  padding: 1.5rem;
  text-align: center;
  color: var(--muted);
}

/* Advanced Filters */
.filter-toggle[data-v-140fe7b8] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.filter-toggle.active[data-v-140fe7b8] {
  background: var(--surface-2);
  border-color: var(--accent);
  color: var(--accent);
}
.advanced-filters[data-v-140fe7b8] {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding: 1rem;
  background: var(--surface-2);
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  animation: slideDown-140fe7b8 0.2s ease-out;
}
@keyframes slideDown-140fe7b8 {
from {
    opacity: 0;
    transform: translateY(-10px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.filter-group[data-v-140fe7b8] {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.filter-group label[data-v-140fe7b8] {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
}
.custom-select[data-v-140fe7b8] {
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--bg);
  color: var(--text);
  font-size: 0.9rem;
  cursor: pointer;
}
.checkbox-group[data-v-140fe7b8] {
  justify-content: center;
}
.checkbox-label[data-v-140fe7b8] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  color: var(--text);
  font-size: 0.95rem;
}

/* Table Styles - Preserved */
.table-container[data-v-140fe7b8] {
  overflow-x: auto;
  flex: 1;
}
.modern-table[data-v-140fe7b8] {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.modern-table th[data-v-140fe7b8] {
  padding: 1rem 1.5rem;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.modern-table td[data-v-140fe7b8] {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.name-cell[data-v-140fe7b8] {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.avatar-img[data-v-140fe7b8] {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.avatar-img img[data-v-140fe7b8] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar-ph[data-v-140fe7b8] {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #00c2a8);
  color: white;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 1rem;
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.name-text[data-v-140fe7b8] {
  font-weight: 500;
  color: var(--text);
}
.contact-info[data-v-140fe7b8] {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
}
.contact-row[data-v-140fe7b8] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--muted);
}
.tiny-icon[data-v-140fe7b8] {
  font-size: 1rem;
}
.address-cell[data-v-140fe7b8] {
  max-width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--muted);
  font-size: 0.9rem;
}
.actions-cell[data-v-140fe7b8] {
  display: flex;
  gap: 0.5rem;
}
.btn-icon[data-v-140fe7b8] {
  padding: 6px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  background: transparent;
  color: var(--muted);
  transition: all 0.2s;
}
.btn-icon[data-v-140fe7b8]:hover {
  background: var(--surface-2);
  color: var(--text);
}
.btn-icon.edit[data-v-140fe7b8]:hover {
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
}
.btn-icon.delete[data-v-140fe7b8]:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

/* Pagination */
.pagination-bar[data-v-140fe7b8] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
  gap: 1rem;
}
.page-btn[data-v-140fe7b8] {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--text);
  transition: all 0.2s;
}
.page-btn[data-v-140fe7b8]:hover:not(:disabled) {
  background: var(--surface-2);
  border-color: var(--text);
}
.page-btn[data-v-140fe7b8]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.page-info[data-v-140fe7b8] {
  font-size: 0.9rem;
  color: var(--muted);
}

/* Buttons */
.btn-primary[data-v-140fe7b8] {
  background: var(--accent);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s;
}
.btn-primary[data-v-140fe7b8]:hover:not(:disabled) {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 4px 6px -1px rgba(198, 146, 61, 0.25);
}
.btn-secondary[data-v-140fe7b8] {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-secondary[data-v-140fe7b8]:hover {
  background: var(--surface-2);
}
.btn-primary[data-v-140fe7b8]:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Utilities */
.spinner[data-v-140fe7b8],
.spinner-sm[data-v-140fe7b8] {
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin-140fe7b8 1s linear infinite;
}
.spinner[data-v-140fe7b8] {
  width: 40px;
  height: 40px;
  border-color: var(--border);
  border-top-color: var(--accent);
}
.loading-state[data-v-140fe7b8] {
  padding: 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  color: var(--muted);
}
.empty-state[data-v-140fe7b8] {
  padding: 4rem;
  text-align: center;
  color: var(--muted);
}
.empty-icon[data-v-140fe7b8] {
  font-size: 4rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}
.muted[data-v-140fe7b8] {
  color: var(--muted);
}
@keyframes spin-140fe7b8 {
0% {
    transform: rotate(0deg);
}
100% {
    transform: rotate(360deg);
}
}

/* Responsive Media Queries */
@media (max-width: 768px) {
.page-header[data-v-140fe7b8] {
    padding: 1rem;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
}
.header-left[data-v-140fe7b8] {
    justify-content: flex-start;
}
.btn-primary[data-v-140fe7b8] {
    justify-content: center;
    width: 100%;
}
.content-wrapper[data-v-140fe7b8] {
    padding: 1rem;
    gap: 1.5rem;
}
.stats-grid[data-v-140fe7b8] {
    grid-template-columns: 1fr;
}
.filter-row[data-v-140fe7b8] {
    flex-direction: column;
    align-items: stretch;
}
.search-wrap[data-v-140fe7b8] {
    max-width: 100%;
}
.filters-bar[data-v-140fe7b8] {
    padding: 1rem;
}
.pagination-bar[data-v-140fe7b8] {
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
}
}

.page-container[data-v-f0f24f51] {
  padding: 2rem;
  max-width: 1400px;
  margin: 0 auto;
  background: linear-gradient(135deg, #0a0b14 0%, #1a1610 100%);
  min-height: 100vh;
}
.header[data-v-f0f24f51] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  gap: 1rem;
}
.header-content[data-v-f0f24f51] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.title[data-v-f0f24f51] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 2rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.title .icon[data-v-f0f24f51] {
  font-size: 2.5rem;
  color: #7c5cff;
}
.subtitle[data-v-f0f24f51] {
  color: var(--muted);
  margin: 0;
}
.stats-grid[data-v-f0f24f51] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.stat-card[data-v-f0f24f51] {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.75rem;
  background: linear-gradient(135deg, #7c5cff, #DFC05E);
  border: none;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(198, 146, 61, 0.35);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.stat-card[data-v-f0f24f51]::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  transition: all 0.5s ease;
}
.stat-card[data-v-f0f24f51]:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(198, 146, 61, 0.45);
}
.stat-card[data-v-f0f24f51]:hover::before {
  top: -60%;
  right: -60%;
}
.stat-card[data-v-f0f24f51]:nth-child(1) {
  background: linear-gradient(135deg, #f59e0b, #f97316);
}
.stat-card[data-v-f0f24f51]:nth-child(2) {
  background: linear-gradient(135deg, #10b981, #06b6d4);
}
.stat-icon[data-v-f0f24f51] {
  font-size: 3rem;
  color: white;
  background: rgba(255, 255, 255, 0.2);
  padding: 1rem;
  border-radius: 16px;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 1;
}
.stat-content[data-v-f0f24f51] {
  flex: 1;
  z-index: 1;
}
.stat-value[data-v-f0f24f51] {
  font-size: 2rem;
  font-weight: 800;
  color: white;
  margin: 0 0 0.25rem 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.stat-label[data-v-f0f24f51] {
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.95rem;
  margin: 0;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.search-bar[data-v-f0f24f51] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 1.5rem;
}
.search-bar span[data-v-f0f24f51] {
  color: var(--muted);
}
.search-bar input[data-v-f0f24f51] {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 1rem;
  outline: none;
}
.table-container[data-v-f0f24f51] {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.modern-table[data-v-f0f24f51] {
  width: 100%;
  border-collapse: collapse;
}
.modern-table thead[data-v-f0f24f51] {
  background: linear-gradient(135deg, rgba(198, 146, 61, 0.1), rgba(223, 192, 94, 0.1));
  border-bottom: 2px solid var(--border);
}
.modern-table th[data-v-f0f24f51] {
  padding: 1rem;
  text-align: left;
  font-weight: 600;
  color: var(--text);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.modern-table td[data-v-f0f24f51] {
  padding: 1rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.modern-table tbody tr[data-v-f0f24f51]:hover {
  background: rgba(198, 146, 61, 0.05);
}
.product-name[data-v-f0f24f51] {
  font-weight: 600;
}
.total-price[data-v-f0f24f51] {
  font-weight: 700;
  color: #7c5cff;
}
.notes[data-v-f0f24f51] {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 0.9rem;
}
.action-buttons[data-v-f0f24f51] {
  display: flex;
  gap: 0.5rem;
}
.btn-primary[data-v-f0f24f51], .btn-secondary[data-v-f0f24f51] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}
.btn-primary[data-v-f0f24f51] {
  background: linear-gradient(135deg, #7c5cff, #DFC05E);
  color: white;
  box-shadow: 0 4px 12px rgba(198, 146, 61, 0.3);
}
.btn-primary[data-v-f0f24f51]:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(198, 146, 61, 0.4);
}
.btn-secondary[data-v-f0f24f51] {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-secondary[data-v-f0f24f51]:hover {
  background: rgba(198, 146, 61, 0.1);
}
.btn-icon[data-v-f0f24f51] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: rgba(198, 146, 61, 0.1);
  color: #7c5cff;
  cursor: pointer;
  transition: all 0.3s;
}
.btn-icon[data-v-f0f24f51]:hover {
  background: rgba(198, 146, 61, 0.2);
  transform: scale(1.1);
}
.btn-icon.danger[data-v-f0f24f51] {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}
.btn-icon.danger[data-v-f0f24f51]:hover {
  background: rgba(239, 68, 68, 0.2);
}
.loading[data-v-f0f24f51], .empty-state[data-v-f0f24f51] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
  color: var(--muted);
}
.loading span[data-v-f0f24f51], .empty-state span[data-v-f0f24f51] {
  font-size: 4rem;
  margin-bottom: 1rem;
  color: #7c5cff;
}
.spin[data-v-f0f24f51] {
  animation: spin-f0f24f51 1s linear infinite;
}
@keyframes spin-f0f24f51 {
from { transform: rotate(0deg);
}
to { transform: rotate(360deg);
}
}

/* Modal Styles */
.modal-overlay[data-v-f0f24f51] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}
.modal-content[data-v-f0f24f51] {
  background: var(--surface);
  border-radius: 24px;
  max-width: 700px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.modal-header[data-v-f0f24f51] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid var(--border);
}
.modal-header h2[data-v-f0f24f51] {
  margin: 0;
  color: var(--text);
  font-size: 1.5rem;
}
.btn-close[data-v-f0f24f51] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.3s;
}
.btn-close[data-v-f0f24f51]:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}
.modal-form[data-v-f0f24f51] {
  padding: 1.5rem;
}
.form-row[data-v-f0f24f51] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}
.form-group[data-v-f0f24f51] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.form-group label[data-v-f0f24f51] {
  font-weight: 600;
  color: var(--text);
  font-size: 0.9rem;
}
.form-group input[data-v-f0f24f51],
.form-group select[data-v-f0f24f51],
.form-group textarea[data-v-f0f24f51] {
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--background);
  color: var(--text);
  font-size: 1rem;
  transition: all 0.3s;
}
.form-group input[data-v-f0f24f51]:focus,
.form-group select[data-v-f0f24f51]:focus,
.form-group textarea[data-v-f0f24f51]:focus {
  outline: none;
  border-color: #7c5cff;
  box-shadow: 0 0 0 3px rgba(198, 146, 61, 0.1);
}
.form-group input.readonly[data-v-f0f24f51] {
  background: rgba(198, 146, 61, 0.05);
  font-weight: 600;
  color: #7c5cff;
  cursor: not-allowed;
}
.modal-actions[data-v-f0f24f51] {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
@media (max-width: 768px) {
.page-container[data-v-f0f24f51] {
    padding: 1rem;
}
.header[data-v-f0f24f51] {
    flex-direction: column;
    align-items: stretch;
}
.form-row[data-v-f0f24f51] {
    grid-template-columns: 1fr;
}
.table-container[data-v-f0f24f51] {
    overflow-x: auto;
}
.modern-table[data-v-f0f24f51] {
    min-width: 800px;
}
}

.layout[data-v-f5d864af] {
  display: flex;
  height: 100vh;
  background: var(--bg);
  color-scheme: light dark;
}
.main-content[data-v-f5d864af] {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dashboard-container[data-v-f5d864af] {
  background: linear-gradient(135deg, #0a0b14 0%, #1a1610 100%);
  min-height: 100vh;
  flex: 1;
  overflow: auto;
  padding: 1.5rem;
  display: grid;
  gap: 1.25rem;
}
.hero-balance[data-v-f5d864af] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-radius: 16px;
  background: linear-gradient(135deg, #6a5cf5, #00c2ff);
  color: #fff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}
.hero-label[data-v-f5d864af] {
  font-weight: 600;
  opacity: 0.9;
}
.hero-value[data-v-f5d864af] {
  font-size: 2rem;
  font-weight: 900;
}
.hero-var[data-v-f5d864af] {
  font-weight: 700;
  margin-top: 0.15rem;
}
.hero-var.up[data-v-f5d864af] {
  color: #9ef0a1;
}
.hero-var.down[data-v-f5d864af] {
  color: #fecaca;
}
.head-tools[data-v-f5d864af] {
  display: inline-flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.chip[data-v-f5d864af] {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 10px;
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  color: var(--text);
}
.chip[data-v-f5d864af]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.chip.active[data-v-f5d864af] {
  background: var(--accent-gradient);
  color: white;
  border-color: transparent;
}
.kpis-cards[data-v-f5d864af] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.soft-card[data-v-f5d864af] {
  border-radius: 16px;
  padding: 0.95rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  position: relative;
  color: #fff;
}
.soft-card.orange[data-v-f5d864af] {
  background: linear-gradient(135deg, #f97316, #fb7185);
}
.soft-card.green[data-v-f5d864af] {
  background: linear-gradient(135deg, #10b981, #22c55e);
}
.soft-card.purple[data-v-f5d864af] {
  background: linear-gradient(135deg, #6366f1, #a855f7);
}
.card-title[data-v-f5d864af] {
  font-weight: 700;
  opacity: 0.95;
}
.card-value[data-v-f5d864af] {
  font-size: 1.6rem;
  font-weight: 900;
  margin-top: 0.2rem;
}
.card-sub[data-v-f5d864af] {
  font-size: 0.85rem;
  opacity: 0.9;
  margin-top: 0.15rem;
}
.panel[data-v-f5d864af] {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.panel-head[data-v-f5d864af] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.panel-sub[data-v-f5d864af] {
  color: var(--accent);
  font-weight: 700;
  font-size: 0.9rem;
  margin-top: 0.25rem;
}
.filters-panel[data-v-f5d864af] {
  padding: 1rem 1.25rem 1.15rem;
}
.filters-grid[data-v-f5d864af] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
}
.field[data-v-f5d864af] {
  display: grid;
  gap: 0.4rem;
}
.field.grow[data-v-f5d864af] {
  grid-column: span 1;
}
.label[data-v-f5d864af] {
  color: var(--muted);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}
.control[data-v-f5d864af] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--border);
  background: rgba(15, 23, 42, 0.18);
  border-radius: 12px;
  padding: 0.55rem 0.65rem;
}
.icon[data-v-f5d864af] {
  color: var(--accent);
  font-size: 18px;
}
.input[data-v-f5d864af] {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 0.9rem;
}
.alert[data-v-f5d864af] {
  border: 1px solid rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
  padding: 0.75rem;
  border-radius: 12px;
  margin-bottom: 0.75rem;
  font-weight: 600;
}
.muted[data-v-f5d864af] {
  color: var(--muted);
  padding: 0.5rem 0;
}
.table-container[data-v-f5d864af] {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid var(--border);
}
.table[data-v-f5d864af] {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  min-width: 760px;
}
.table th[data-v-f5d864af],
.table td[data-v-f5d864af] {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.table th[data-v-f5d864af] {
  background: linear-gradient(
    135deg,
    rgba(198, 146, 61, 0.08) 0%,
    rgba(0, 194, 168, 0.06) 100%
  );
  color: var(--text);
  font-weight: 800;
  font-size: 0.85rem;
}
.table-row[data-v-f5d864af]:hover {
  background: rgba(198, 146, 61, 0.06);
}
.text[data-v-f5d864af] {
  color: var(--text);
  font-weight: 600;
}
.date-text[data-v-f5d864af] {
  color: var(--muted);
  font-size: 0.85rem;
}
.total-text[data-v-f5d864af] {
  color: var(--text);
  font-weight: 900;
}
.text-right[data-v-f5d864af] {
  text-align: right;
}
@media (max-width: 900px) {
.kpis-cards[data-v-f5d864af] {
    grid-template-columns: repeat(2, 1fr);
}
.filters-grid[data-v-f5d864af] {
    grid-template-columns: 1fr 1fr;
}
.field.grow[data-v-f5d864af] {
    grid-column: span 2;
}
}
@media (max-width: 520px) {
.hero-balance[data-v-f5d864af] {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
}
.hero-value[data-v-f5d864af] {
    font-size: 1.75rem;
}
.kpis-cards[data-v-f5d864af] {
    grid-template-columns: 1fr;
}
.filters-grid[data-v-f5d864af] {
    grid-template-columns: 1fr;
}
.field.grow[data-v-f5d864af] {
    grid-column: span 1;
}
}

.layout[data-v-1ef90a94] {
  display: flex;
  height: 100vh;
  background: var(--bg);
  color-scheme: light dark;
}
.main-content[data-v-1ef90a94] {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dashboard-container[data-v-1ef90a94] {
  background: linear-gradient(135deg, #0a0b14 0%, #1a1610 100%);
  min-height: 100vh;
  flex: 1;
  overflow: auto;
  padding: 1.5rem;
  display: grid;
  gap: 1.25rem;
}
.hero-balance[data-v-1ef90a94] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-radius: 16px;
  background: linear-gradient(135deg, #6a5cf5, #00c2ff);
  color: #fff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}
.hero-label[data-v-1ef90a94] {
  font-weight: 600;
  opacity: 0.9;
}
.hero-value[data-v-1ef90a94] {
  font-size: 2rem;
  font-weight: 900;
}
.hero-var[data-v-1ef90a94] {
  font-weight: 700;
  margin-top: 0.15rem;
}
.hero-var.up[data-v-1ef90a94] {
  color: #9ef0a1;
}
.hero-var.down[data-v-1ef90a94] {
  color: #fecaca;
}
.head-tools[data-v-1ef90a94] {
  display: inline-flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.chip[data-v-1ef90a94] {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 10px;
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  color: var(--text);
}
.chip[data-v-1ef90a94]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.chip.active[data-v-1ef90a94] {
  background: var(--accent-gradient);
  color: white;
  border-color: transparent;
}
.kpis-cards[data-v-1ef90a94] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.soft-card[data-v-1ef90a94] {
  border-radius: 16px;
  padding: 0.95rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  color: #fff;
}
.soft-card.orange[data-v-1ef90a94] {
  background: linear-gradient(135deg, #f97316, #fb7185);
}
.soft-card.green[data-v-1ef90a94] {
  background: linear-gradient(135deg, #10b981, #22c55e);
}
.soft-card.purple[data-v-1ef90a94] {
  background: linear-gradient(135deg, #6366f1, #a855f7);
}
.card-title[data-v-1ef90a94] {
  font-weight: 700;
  opacity: 0.95;
}
.card-value[data-v-1ef90a94] {
  font-size: 1.6rem;
  font-weight: 900;
  margin-top: 0.2rem;
}
.card-sub[data-v-1ef90a94] {
  font-size: 0.85rem;
  opacity: 0.9;
  margin-top: 0.15rem;
}
.panel[data-v-1ef90a94] {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.panel-head[data-v-1ef90a94] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.panel-sub[data-v-1ef90a94] {
  color: var(--accent);
  font-weight: 700;
  font-size: 0.9rem;
  margin-top: 0.25rem;
}
.muted[data-v-1ef90a94] {
  color: var(--muted);
  padding: 0.5rem 0;
}
.filters-panel[data-v-1ef90a94] {
  padding: 1rem 1.25rem 1.15rem;
}
.filters-grid[data-v-1ef90a94] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
}
.field[data-v-1ef90a94] {
  display: grid;
  gap: 0.4rem;
}
.field.actions .actions-row[data-v-1ef90a94] {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.label[data-v-1ef90a94] {
  color: var(--muted);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}
.control[data-v-1ef90a94] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--border);
  background: rgba(15, 23, 42, 0.18);
  border-radius: 12px;
  padding: 0.55rem 0.65rem;
}
.icon[data-v-1ef90a94] {
  color: var(--accent);
  font-size: 18px;
}
.input[data-v-1ef90a94] {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 0.9rem;
}
.alert[data-v-1ef90a94] {
  border: 1px solid rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
  padding: 0.75rem;
  border-radius: 12px;
  font-weight: 600;
}
.bars[data-v-1ef90a94] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));
  align-items: end;
  gap: 0.35rem;
  min-height: 220px;
  padding: 0.6rem 0.4rem;
}
.col[data-v-1ef90a94] {
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: end;
  justify-items: center;
  gap: 0.25rem;
}
.bar[data-v-1ef90a94] {
  width: 14px;
  background: linear-gradient(180deg, #6a5cf5, #00c2ff);
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  transition: opacity 0.2s;
}
.bar[data-v-1ef90a94]:hover {
  opacity: 0.85;
}
.lbl[data-v-1ef90a94] {
  font-size: 0.75rem;
  color: var(--muted);
}
.tooltip[data-v-1ef90a94] {
  position: fixed;
  transform: translate(-50%, -100%);
  background: rgba(15, 23, 42, 0.9);
  color: #fff;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.8rem;
  pointer-events: none;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(4px);
}
.tt-label[data-v-1ef90a94] {
  font-weight: 600;
  margin-bottom: 2px;
  color: #cbd5e1;
}
.tt-val[data-v-1ef90a94] {
  font-weight: 800;
}
@media (max-width: 900px) {
.kpis-cards[data-v-1ef90a94] {
    grid-template-columns: repeat(2, 1fr);
}
.filters-grid[data-v-1ef90a94] {
    grid-template-columns: 1fr 1fr;
}
.field.actions[data-v-1ef90a94] {
    grid-column: span 2;
}
}
@media (max-width: 520px) {
.hero-balance[data-v-1ef90a94] {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
}
.hero-value[data-v-1ef90a94] {
    font-size: 1.75rem;
}
.kpis-cards[data-v-1ef90a94] {
    grid-template-columns: 1fr;
}
.filters-grid[data-v-1ef90a94] {
    grid-template-columns: 1fr;
}
.field.actions[data-v-1ef90a94] {
    grid-column: span 1;
}
}

.layout[data-v-4884ae7a] {
  display: flex;
  height: 100vh;
  background: var(--bg);
  color-scheme: light dark;
}
.main-content[data-v-4884ae7a] {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dashboard-container[data-v-4884ae7a] {
  background: linear-gradient(135deg, #0a0b14 0%, #1a1610 100%);
  min-height: 100vh;
  flex: 1;
  overflow: auto;
  padding: 1.5rem;
  display: grid;
  gap: 1.25rem;
}
.hero-balance[data-v-4884ae7a] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-radius: 16px;
  background: linear-gradient(135deg, #6a5cf5, #00c2ff);
  color: #fff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}
.hero-label[data-v-4884ae7a] {
  font-weight: 600;
  opacity: 0.9;
}
.hero-value[data-v-4884ae7a] {
  font-size: 2rem;
  font-weight: 900;
}
.hero-var[data-v-4884ae7a] {
  font-weight: 700;
  margin-top: 0.15rem;
}
.hero-var.up[data-v-4884ae7a] {
  color: #9ef0a1;
}
.hero-var.down[data-v-4884ae7a] {
  color: #fecaca;
}
.head-tools[data-v-4884ae7a] {
  display: inline-flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.chip[data-v-4884ae7a] {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 10px;
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  color: var(--text);
}
.chip[data-v-4884ae7a]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.chip.active[data-v-4884ae7a] {
  background: var(--accent-gradient);
  color: white;
  border-color: transparent;
}
.kpis-cards[data-v-4884ae7a] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.soft-card[data-v-4884ae7a] {
  border-radius: 16px;
  padding: 0.95rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  color: #fff;
}
.soft-card.orange[data-v-4884ae7a] {
  background: linear-gradient(135deg, #f97316, #fb7185);
}
.soft-card.green[data-v-4884ae7a] {
  background: linear-gradient(135deg, #10b981, #22c55e);
}
.soft-card.purple[data-v-4884ae7a] {
  background: linear-gradient(135deg, #6366f1, #a855f7);
}
.card-title[data-v-4884ae7a] {
  font-weight: 700;
  opacity: 0.95;
}
.card-value[data-v-4884ae7a] {
  font-size: 1.6rem;
  font-weight: 900;
  margin-top: 0.2rem;
}
.card-sub[data-v-4884ae7a] {
  font-size: 0.85rem;
  opacity: 0.9;
  margin-top: 0.15rem;
}
.panel[data-v-4884ae7a] {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.panel-head[data-v-4884ae7a] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.panel-sub[data-v-4884ae7a] {
  color: var(--accent);
  font-weight: 700;
  font-size: 0.9rem;
  margin-top: 0.25rem;
}
.muted[data-v-4884ae7a] {
  color: var(--muted);
  padding: 0.5rem 0;
}
.filters-panel[data-v-4884ae7a] {
  padding: 1rem 1.25rem 1.15rem;
}
.filters-grid[data-v-4884ae7a] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
}
.field[data-v-4884ae7a] {
  display: grid;
  gap: 0.4rem;
}
.field.actions .actions-row[data-v-4884ae7a] {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.label[data-v-4884ae7a] {
  color: var(--muted);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}
.control[data-v-4884ae7a] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--border);
  background: rgba(15, 23, 42, 0.18);
  border-radius: 12px;
  padding: 0.55rem 0.65rem;
}
.icon[data-v-4884ae7a] {
  color: var(--accent);
  font-size: 18px;
}
.input[data-v-4884ae7a] {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 0.9rem;
}
.alert[data-v-4884ae7a] {
  border: 1px solid rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
  padding: 0.75rem;
  border-radius: 12px;
  font-weight: 600;
}
.bars[data-v-4884ae7a] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));
  align-items: end;
  gap: 0.35rem;
  min-height: 220px;
  padding: 0.6rem 0.4rem;
}
.col[data-v-4884ae7a] {
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: end;
  justify-items: center;
  gap: 0.25rem;
}
.bar[data-v-4884ae7a] {
  width: 14px;
  background: linear-gradient(180deg, #22c55e, #06b6d4);
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  transition: opacity 0.2s;
}
.bar.neg[data-v-4884ae7a] {
  background: linear-gradient(180deg, #ef4444, #f97316);
}
.bar[data-v-4884ae7a]:hover {
  opacity: 0.85;
}
.lbl[data-v-4884ae7a] {
  font-size: 0.75rem;
  color: var(--muted);
}
.tooltip[data-v-4884ae7a] {
  position: fixed;
  transform: translate(-50%, -100%);
  background: rgba(15, 23, 42, 0.9);
  color: #fff;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.8rem;
  pointer-events: none;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(4px);
}
.tt-label[data-v-4884ae7a] {
  font-weight: 600;
  margin-bottom: 2px;
  color: #cbd5e1;
}
.tt-val[data-v-4884ae7a] {
  font-weight: 800;
}
@media (max-width: 900px) {
.kpis-cards[data-v-4884ae7a] {
    grid-template-columns: repeat(2, 1fr);
}
.filters-grid[data-v-4884ae7a] {
    grid-template-columns: 1fr 1fr;
}
.field.actions[data-v-4884ae7a] {
    grid-column: span 2;
}
}
@media (max-width: 520px) {
.hero-balance[data-v-4884ae7a] {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
}
.hero-value[data-v-4884ae7a] {
    font-size: 1.75rem;
}
.kpis-cards[data-v-4884ae7a] {
    grid-template-columns: 1fr;
}
.filters-grid[data-v-4884ae7a] {
    grid-template-columns: 1fr;
}
.field.actions[data-v-4884ae7a] {
    grid-column: span 1;
}
}