/* ============================================
   LUCAQUIBO WEB - MAIN STYLESHEET
   Sistema de diseño unificado basado en LucaQuibo.Mobile
   ============================================ */

/* Importación de módulos CSS */
@import url('./_variables.css');
@import url('./_colors.css');
@import url('./_theme.css');
@import url('./_components.css');

/* ============================================
   BASE STYLES - Enhanced
   ============================================ */
html, body {
    font-family: var(--font-family-primary);
    background-color: var(--color-background);
    color: var(--color-text-primary);
    line-height: var(--line-height-base);
    font-size: var(--font-size-base);
    transition: var(--transition-base);
    margin: 0;
    padding: 0;
}

/* ============================================
   ENHANCED LINK STYLES
   ============================================ */
a, .btn-link {
    color: var(--color-interactive-primary);
    text-decoration: none;
    transition: var(--transition-fast);
}

a:hover, .btn-link:hover {
    color: var(--color-interactive-primary-hover);
    text-decoration: underline;
}

label {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

/* ============================================
   ENHANCED FORM STYLES
   ============================================ */
.btn:focus, 
.btn:active:focus, 
.btn-link.nav-link:focus, 
.form-control:focus, 
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--color-primary-400);
    outline: none;
}

.form-control {
    border-color: var(--color-border);
    background-color: var(--color-surface-card);
    color: var(--color-text-primary);
    border-radius: var(--radius-base);
    transition: var(--transition-fast);
}

.form-control:focus {
    border-color: var(--color-border-focus);
    background-color: var(--color-surface-card);
    color: var(--color-text-primary);
    box-shadow: 0 0 0 3px var(--color-primary-100);
}

/* Placeholder Styles */
.form-control::placeholder,
textarea::placeholder,
input::placeholder {
    color: var(--input-placeholder-color);
    opacity: var(--input-placeholder-opacity);
}

.form-control::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
input::-webkit-input-placeholder {
    color: var(--input-placeholder-color);
    opacity: var(--input-placeholder-opacity);
}

.form-control::-moz-placeholder,
textarea::-moz-placeholder,
input::-moz-placeholder {
    color: var(--input-placeholder-color);
    opacity: var(--input-placeholder-opacity);
}

.form-control:-ms-input-placeholder,
textarea:-ms-input-placeholder,
input:-ms-input-placeholder {
    color: var(--input-placeholder-color);
    opacity: var(--input-placeholder-opacity);
}

/* ============================================
   ENHANCED LAYOUT STYLES
   ============================================ */
.content {
    padding-top: var(--spacing-6);
    background: var(--color-background);
}

.page {
    background: var(--color-background);
    min-height: 100vh;
}

.sidebar {
    background: var(--nav-background);
    border-right: 1px solid var(--nav-border);
}

.top-row {
    background: var(--nav-background);
    border-bottom: 1px solid var(--nav-border);
    backdrop-filter: blur(8px);
}

.main-content {
    background: var(--color-background);
    padding: 0 1.5rem;
}

/* ============================================
   ENHANCED VALIDATION STYLES
   ============================================ */
h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 2px solid var(--color-success);
    border-color: var(--color-success);
}

.invalid {
    outline: 2px solid var(--color-error);
    border-color: var(--color-error);
}

.validation-message {
    color: var(--color-error);
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-1);
}

/* ============================================
   HEADER & BORDER IMPROVEMENTS
   ============================================ */
.border-bottom {
    border-color: var(--color-border) !important;
}

/* ============================================
   NAVIGATION MENU ICONS
   ============================================ */
.bi-house-door-fill-nav-menu::before {
    content: "\f4c4";
}

.bi-list-nested-nav-menu::before {
    content: "\f4c9";
}

.bi-stopwatch-nav-menu::before {
    content: "\f614";
}

.bi-geo-alt-nav-menu::before {
    content: "\f2ff";
}

/* ============================================
   NAV LINK BASE STYLES
   ============================================ */
.nav-link {
    color: var(--color-text-secondary);
    text-decoration: none;
    padding: 0.75rem 1rem;
    transition: var(--transition-fast);
}

.nav-link:hover {
    background: var(--color-surface-secondary);
    color: var(--color-text-primary);
}

.nav-link.active {
    background: var(--color-primary-100);
    color: var(--color-primary-700);
}

/* ============================================
   TEXT UTILITY OVERRIDES (Bootstrap 5.3)
   ============================================ */
.text-muted {
    color: var(--color-text-secondary) !important;
}

.text-primary {
    color: #ffc800 !important;
}

/* ============================================
   RESPONSIVE UTILITIES
   ============================================ */
@media (max-width: 768px) {
    .content {
        padding-top: var(--spacing-4);
    }
    
    .card-body {
        padding: var(--spacing-4);
    }
}

/* ============================================
   ACCESSIBILITY IMPROVEMENTS
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus visible para accesibilidad */
:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .sidebar, .top-row {
        display: none !important;
    }
    
    .content {
        padding: 0 !important;
    }
}