/* Estilos personalizados para CompraNet */

/* ========================================
   Brand Color Scheme
   ======================================== */
:root {
    /* Primary Navy */
    --navy: #003366;
    --navy-light: #003d99;
    --navy-dark: #001a33;

    /* Primary Scale */
    --primary-50: #e6f0ff;
    --primary-100: #cce0ff;
    --primary-200: #99c2ff;
    --primary-300: #66a3ff;
    --primary-400: #3385ff;
    --primary-500: #0066ff;
    --primary-600: #0052cc;
    --primary-700: #003d99;
    --primary-800: #003366;
    --primary-900: #001a33;

    /* Accent Gold */
    --gold: #fdb714;
    --gold-hover: #f59e0b;

    /* Accent Scale */
    --accent-50: #fffbeb;
    --accent-100: #fef3c7;
    --accent-200: #fde68a;
    --accent-300: #fcd34d;
    --accent-400: #fdb714;
    --accent-500: #f59e0b;
    --accent-600: #d97706;
    --accent-700: #b45309;
}

/* Brand utility classes */
.bg-navy { background-color: var(--navy) !important; }
.bg-navy-light { background-color: var(--navy-light) !important; }
.bg-gold { background-color: var(--gold) !important; }
.text-navy { color: var(--navy) !important; }
.text-gold { color: var(--gold) !important; }
.border-navy { border-color: var(--navy) !important; }
.border-gold { border-color: var(--gold) !important; }

.gradient-navy {
    background: linear-gradient(to bottom, var(--navy), var(--navy-light)) !important;
}

/* Primary button style */
.btn-primary {
    background-color: var(--gold);
    color: var(--navy);
    font-weight: 600;
    padding: 0.625rem 1.5rem;
    border-radius: 0.5rem;
    transition: all 0.2s;
}

.btn-primary:hover {
    background-color: var(--gold-hover);
}

/* Focus states with brand colors */
.focus-navy:focus {
    outline: 2px solid var(--navy);
    outline-offset: 2px;
}

/* ========================================
   Original Styles
   ======================================== */

/* Ajuste para inputs en tablas */
input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Transiciones para feedback visual */
.bg-green-100, .bg-red-100 {
    transition: background-color 0.5s ease;
}

/* Estilos para tablas */
table {
    border-collapse: collapse;
}

table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Mobile-friendly touch targets */
@media (max-width: 768px) {
    /* Ensure minimum touch target size */
    button, .btn, a.button, input[type="submit"], input[type="button"] {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 16px;
    }
    
    /* Larger tap targets for small buttons */
    .btn-sm, button.text-xs {
        min-height: 40px;
        padding: 10px 14px;
        font-size: 0.875rem;
    }
    
    /* Better spacing for form elements */
    input, select, textarea {
        min-height: 44px;
        padding: 12px 16px;
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    /* Improved table mobile experience */
    .table-mobile-cards {
        display: block;
    }
    
    .table-mobile-cards thead {
        display: none;
    }
    
    .table-mobile-cards tbody,
    .table-mobile-cards tr,
    .table-mobile-cards td {
        display: block;
        width: 100%;
    }
    
    .table-mobile-cards tr {
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        margin-bottom: 1rem;
        padding: 1rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    
    .table-mobile-cards td {
        border: none;
        padding: 0.5rem 0;
        position: relative;
        padding-left: 40%;
    }
    
    .table-mobile-cards td:before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 35%;
        font-weight: bold;
        color: #374151;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .overflow-x-auto {
        max-width: 100%;
    }
    
    table {
        min-width: 700px;
    }
    
    /* Better mobile spacing */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Reduce large text on mobile */
    h1 {
        font-size: 1.875rem; /* 30px */
    }
    
    h2 {
        font-size: 1.5rem; /* 24px */
    }
    
    /* Stack hero content on mobile */
    .hero-content {
        flex-direction: column;
        text-align: center;
    }
    
    /* Hide decorative elements on mobile */
    .mobile-hidden {
        display: none;
    }
}

/* Improved focus states for accessibility */
button:focus,
input:focus,
select:focus,
textarea:focus,
a:focus {
    outline: 2px solid var(--navy, #003366);
    outline-offset: 2px;
}

/* Better mobile navigation */
@media (max-width: 768px) {
    .mobile-nav-item {
        padding: 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .mobile-nav-item:last-child {
        border-bottom: none;
    }
}

/* Mobile-optimized cards */
@media (max-width: 640px) {
    .card-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .stat-card {
        padding: 1.5rem;
        text-align: center;
    }
}

/* Improved mobile forms */
@media (max-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .form-row {
        flex-direction: column;
        gap: 1rem;
    }
    
    .form-actions {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .form-actions button {
        width: 100%;
    }
}