/* Victorico's Centralized Design System - Toast Merchant Style */

:root {
    /* Color Palette */
    --p: 24 100% 57%;
    /* #ff7c23 - Toast Orange */
    --pc: 0 0% 100%;
    /* White text on primary */

    --b1: 0 0% 100%;
    /* Pure White Background */
    --b2: 210 20% 98%;
    /* Very light grey for backgrounds */
    --b3: 210 20% 95%;
    /* Borders color (soft) */

    --bc: 215 28% 17%;
    /* Dark grey for text */

    /* Shape & Shadows (Premium Toast Style) */
    --rounded-box: 0rem;
    /* User asked for no rounded corners originally, but Toast uses some. 
                            Wait, the user said "sin bordes negros... con sombras... y experiencia bonita". 
                            I'll use a very small radius (0.25rem) for a modern sharp look that isn't 'brutal' */
    --rounded-btn: 0.125rem;

    /* Soft Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow: 0 10px 15px -3px rgb(0 0 0 / 0.04), 0 4px 6px -4px rgb(0 0 0 / 0.04);
    --shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

    color-scheme: light;
}

body {
    font-family: 'Public Sans', 'Inter', sans-serif;
    background-color: #f8f9fa !important;
    color: #1a1a1a !important;
    -webkit-font-smoothing: antialiased;
    font-size: 16px;
}

.bg-primary {
    background-color: #ff7c23 !important;
}

.title-font {
    font-family: 'Public Sans', sans-serif;
    font-weight: 900;
    letter-spacing: -0.02em;
}

/* Global Border Reset - No black borders */
* {
    border-color: #edf2f7 !important;
}

/* --- Toast Components --- */

/* Cards - White, Soft Shadow, No Border */
.card {
    background-color: #ffffff !important;
    border: none !important;
    box-shadow: var(--shadow) !important;
    border-radius: 0.25rem !important;
}

.card-title {
    color: #1a1a1a;
    font-weight: 800;
    letter-spacing: -0.01em;
}

/* Buttons - Clean Toast Orange */
.btn {
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.05em;
    font-size: 0.75rem;
    border: none !important;
    border-radius: 0.125rem !important;
}

.btn-primary {
    background-color: #ff7c23 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px 0 rgba(255, 124, 35, 0.39);
}

.btn-primary:hover {
    background-color: #e66b1a !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(255, 124, 35, 0.23);
}

/* Inputs - Subtle Shadows, Clean Borders */
.input,
.select,
.textarea {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.125rem !important;
    color: #1a1a1a !important;
    font-weight: 500;
}

.input:focus,
.select:focus,
.textarea:focus {
    border-color: #ff7c23 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(255, 124, 35, 0.1) !important;
}

/* Navbar */
.navbar {
    background-color: #ffffff !important;
    border-bottom: 1px solid #edf2f7 !important;
}

/* Sidebar */
aside,
.sidebar {
    background-color: #ffffff !important;
    border-right: 1px solid #edf2f7 !important;
}

.menu li a {
    border-radius: 0.125rem;
    margin-bottom: 0.125rem;
    color: #4a5568;
    font-weight: 600;
    font-size: 0.875rem;
}

.menu li a:hover {
    background-color: #f8f9fa;
    color: #ff7c23;
}

.menu li a.active {
    background-color: #fff5e6 !important;
    color: #ff7c23 !important;
    font-weight: 800;
    border-left: 4px solid #ff7c23;
}

/* Tables */
.datatable-table th {
    background-color: #f8f9fa !important;
    color: #4a5568 !important;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    border-bottom: 2px solid #edf2f7 !important;
}

/* Utility */
.shadow-premium {
    box-shadow: var(--shadow-lg) !important;
}

/* Upload progress bar animation */
@keyframes progress {
    0% { transform: translateX(-100%); }
    50% { transform: translateX(100%); }
    100% { transform: translateX(300%); }
}