/* =====================================================
   MUTUAL JUMATAKI — DESIGN SYSTEM
   Version: 2.0
   Inspirado en: Salesforce, HubSpot, Odoo, Stripe
===================================================== */

/* =====================================================
   COLOR PALETTE — Corporate Grade
===================================================== */
:root {
    /* JUMATAKI Brand Colors - Inspirado en el logo */
    --jumataki-blue:   #30366E;
    --jumataki-red:    #E91E3D;
    --jumataki-yellow: #FFD21A;
    --jumataki-green:  #169B4F;
    --jumataki-cyan:   #60C8F5;
    --jumataki-white:  #FFFFFF;

    /* Primary Colors */
    --primary-50:  #E3F2FD;
    --primary-100: #BBDEFB;
    --primary-200: #90CAF9;
    --primary-300: #64B5F6;
    --primary-400: #42A5F5;
    --primary-500: #1E88E5;
    --primary-600: #1976D2;
    --primary-700: #1565C0;
    --primary-800: #0F4C81;
    --primary-900: #0D3B66;

    /* Semantic Colors */
    --success-50:  #ECFDF5;
    --success-500: #10B981;
    --success-700: #047857;

    --warning-50:  #FFFBEB;
    --warning-500: #F59E0B;
    --warning-700: #B45309;

    --error-50:  #FEF2F2;
    --error-500: #EF4444;
    --error-700: #B91C1C;

    --info-50:  #EFF6FF;
    --info-500: #3B82F6;
    --info-700: #1D4ED8;

    /* Neutral Colors */
    --neutral-0:   #FFFFFF;
    --neutral-50:  #F8FAFC;
    --neutral-100: #F1F5F9;
    --neutral-200: #E2E8F0;
    --neutral-300: #CBD5E1;
    --neutral-400: #94A3B8;
    --neutral-500: #64748B;
    --neutral-600: #475569;
    --neutral-700: #334155;
    --neutral-800: #1E293B;
    --neutral-900: #0F172A;

    /* Accent Colors */
    --accent-teal:   #14B8A6;
    --accent-purple: #8B5CF6;
    --accent-pink:   #EC4899;
    --accent-orange: #F97316;

    /* Functional Aliases */
    --bg-primary:    var(--neutral-0);
    --bg-secondary:  var(--neutral-50);
    --bg-tertiary:   var(--neutral-100);
    --bg-dark:       var(--neutral-900);

    --text-primary:   var(--neutral-800);
    --text-secondary: var(--neutral-500);
    --text-muted:     var(--neutral-400);
    --text-inverse:   var(--neutral-0);

    --border-default: var(--neutral-200);
    --border-light:   var(--neutral-100);
    --border-strong:  var(--neutral-300);

    /* Interactive States */
    --hover-bg:     var(--neutral-50);
    --active-bg:    var(--primary-50);
    --focus-ring:   rgba(30, 136, 229, 0.2);

    /* Shadows */
    --shadow-xs:  0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm:  0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* Border Radius */
    --radius-none: 0;
    --radius-sm:   0.25rem;
    --radius-md:   0.5rem;
    --radius-lg:   0.75rem;
    --radius-xl:   1rem;
    --radius-2xl:  1.5rem;
    --radius-full: 9999px;

    /* Spacing */
    --space-xs:  0.25rem;
    --space-sm:  0.5rem;
    --space-md:  1rem;
    --space-lg:  1.5rem;
    --space-xl:  2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;

    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    --font-mono: 'Fira Code', 'Consolas', 'Monaco', monospace;

    --font-size-xs:   0.75rem;
    --font-size-sm:   0.875rem;
    --font-size-base: 1rem;
    --font-size-lg:   1.125rem;
    --font-size-xl:   1.25rem;
    --font-size-2xl:  1.5rem;
    --font-size-3xl:  1.875rem;
    --font-size-4xl:  2.25rem;
    --font-size-5xl:  3rem;

    --font-weight-normal:    400;
    --font-weight-medium:    500;
    --font-weight-semibold:  600;
    --font-weight-bold:      700;
    --font-weight-extrabold: 800;

    --line-height-tight:  1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* Transitions */
    --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base:   200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow:   300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slower: 500ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Z-Index Layers */
    --z-dropdown:   1000;
    --z-sticky:     1020;
    --z-fixed:      1030;
    --z-modal-bg:   1040;
    --z-modal:      1050;
    --z-popover:    1060;
    --z-tooltip:    1070;
}

/* =====================================================
   BASE RESET
===================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--text-primary);
    background-color: var(--bg-secondary);
}

/* =====================================================
   TYPOGRAPHY SYSTEM
===================================================== */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--text-primary);
    margin-bottom: var(--space-md);
}

h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-base); }

p { margin-bottom: var(--space-md); line-height: var(--line-height-relaxed); }

.text-xs   { font-size: var(--font-size-xs); }
.text-sm   { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg   { font-size: var(--font-size-lg); }
.text-xl   { font-size: var(--font-size-xl); }
.text-2xl  { font-size: var(--font-size-2xl); }
.text-3xl  { font-size: var(--font-size-3xl); }

.font-normal    { font-weight: var(--font-weight-normal); }
.font-medium    { font-weight: var(--font-weight-medium); }
.font-semibold  { font-weight: var(--font-weight-semibold); }
.font-bold      { font-weight: var(--font-weight-bold); }
.font-extrabold { font-weight: var(--font-weight-extrabold); }

.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-muted); }

/* =====================================================
   BUTTON SYSTEM
===================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 0.625rem 1.25rem;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
    border-radius: var(--radius-lg);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition-base);
    white-space: nowrap;
    user-select: none;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Primary Button */
.btn-primary {
    background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
    color: var(--text-inverse);
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-700), var(--primary-800));
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

/* Secondary Button */
.btn-secondary {
    background: var(--neutral-0);
    color: var(--text-primary);
    border-color: var(--border-default);
    box-shadow: var(--shadow-xs);
}

.btn-secondary:hover {
    background: var(--neutral-50);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-sm);
}

/* Success Button */
.btn-success {
    background: linear-gradient(135deg, var(--success-500), var(--success-700));
    color: var(--text-inverse);
    box-shadow: var(--shadow-sm);
}

.btn-success:hover {
    opacity: 0.9;
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

/* Danger Button */
.btn-danger {
    background: linear-gradient(135deg, var(--error-500), var(--error-700));
    color: var(--text-inverse);
    box-shadow: var(--shadow-sm);
}

.btn-danger:hover {
    opacity: 0.9;
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

/* Ghost Button */
.btn-ghost {
    background: transparent;
    color: var(--text-primary);
    border-color: transparent;
}

.btn-ghost:hover {
    background: var(--hover-bg);
}

/* Button Sizes */
.btn-sm {
    padding: 0.375rem 0.875rem;
    font-size: var(--font-size-xs);
}

.btn-lg {
    padding: 0.875rem 1.75rem;
    font-size: var(--font-size-base);
}

.btn-icon {
    padding: 0.625rem;
    aspect-ratio: 1;
}

/* =====================================================
   CARD SYSTEM
===================================================== */
.card {
    background: var(--bg-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: all var(--transition-base);
}

.card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.card-header {
    padding: var(--space-lg);
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-secondary);
}

.card-body {
    padding: var(--space-lg);
}

.card-footer {
    padding: var(--space-lg);
    border-top: 1px solid var(--border-light);
    background: var(--bg-secondary);
}

/* =====================================================
   FORM CONTROLS
===================================================== */
.form-group {
    margin-bottom: var(--space-lg);
}

.form-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

.form-control,
.form-select {
    display: block;
    width: 100%;
    padding: 0.625rem 1rem;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    line-height: 1.5;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    border: 1.5px solid var(--border-default);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
}

.form-control:focus,
.form-select:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.form-control::placeholder {
    color: var(--text-muted);
}

.form-control:disabled,
.form-select:disabled {
    background-color: var(--bg-tertiary);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Validation States */
.form-control.is-invalid {
    border-color: var(--error-500);
}

.form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

.form-control.is-valid {
    border-color: var(--success-500);
}

.form-control.is-valid:focus {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.invalid-feedback,
.valid-feedback {
    display: block;
    font-size: var(--font-size-xs);
    margin-top: var(--space-xs);
}

.invalid-feedback {
    color: var(--error-700);
}

.valid-feedback {
    color: var(--success-700);
}

/* =====================================================
   TABLE SYSTEM
===================================================== */
.table-container {
    background: var(--bg-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.table {
    width: 100%;
    border-collapse: collapse;
}

.table thead {
    background: var(--bg-secondary);
}

.table thead th {
    padding: var(--space-md) var(--space-lg);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    text-align: left;
    border-bottom: 2px solid var(--border-default);
}

.table tbody tr {
    border-bottom: 1px solid var(--border-light);
    transition: background-color var(--transition-fast);
}

.table tbody tr:hover {
    background: var(--hover-bg);
}

.table tbody td {
    padding: var(--space-md) var(--space-lg);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

/* =====================================================
   BADGE SYSTEM
===================================================== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 0.25rem 0.75rem;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.badge-primary {
    background: var(--primary-50);
    color: var(--primary-700);
}

.badge-success {
    background: var(--success-50);
    color: var(--success-700);
}

.badge-warning {
    background: var(--warning-50);
    color: var(--warning-700);
}

.badge-danger {
    background: var(--error-50);
    color: var(--error-700);
}

.badge-info {
    background: var(--info-50);
    color: var(--info-700);
}

/* =====================================================
   ALERT SYSTEM
===================================================== */
.alert {
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-lg);
    border-left: 4px solid;
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-lg);
}

.alert-success {
    background: var(--success-50);
    border-color: var(--success-500);
    color: var(--success-700);
}

.alert-warning {
    background: var(--warning-50);
    border-color: var(--warning-500);
    color: var(--warning-700);
}

.alert-danger {
    background: var(--error-50);
    border-color: var(--error-500);
    color: var(--error-700);
}

.alert-info {
    background: var(--info-50);
    border-color: var(--info-500);
    color: var(--info-700);
}

/* =====================================================
   UTILITY CLASSES
===================================================== */
.shadow-none { box-shadow: none; }
.shadow-sm   { box-shadow: var(--shadow-sm); }
.shadow-md   { box-shadow: var(--shadow-md); }
.shadow-lg   { box-shadow: var(--shadow-lg); }
.shadow-xl   { box-shadow: var(--shadow-xl); }

.rounded-none { border-radius: var(--radius-none); }
.rounded-sm   { border-radius: var(--radius-sm); }
.rounded-md   { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-xl   { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

.transition-fast { transition: all var(--transition-fast); }
.transition-base { transition: all var(--transition-base); }
.transition-slow { transition: all var(--transition-slow); }

/* =====================================================
   ANIMATIONS
===================================================== */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.animate-fadeIn {
    animation: fadeIn var(--transition-base) ease-out;
}

.animate-fadeInUp {
    animation: fadeInUp var(--transition-slow) ease-out;
}

.animate-fadeInDown {
    animation: fadeInDown var(--transition-slow) ease-out;
}

.animate-slideInRight {
    animation: slideInRight var(--transition-slow) ease-out;
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* =====================================================
   RESPONSIVE UTILITIES
===================================================== */
@media (max-width: 640px) {
    html { font-size: 14px; }
    h1 { font-size: var(--font-size-3xl); }
    h2 { font-size: var(--font-size-2xl); }
    h3 { font-size: var(--font-size-xl); }
}

@media (min-width: 641px) and (max-width: 1024px) {
    html { font-size: 15px; }
}

@media (min-width: 1920px) {
    html { font-size: 18px; }
}