/**
 * MAIN CSS - Archivo Maestro de Importación
 * 
 * Este archivo importa todos los módulos CSS en el orden correcto.
 * Solo este archivo debe ser incluido en el HTML.
 */

/* 1. Variables y Temas (debe ir primero) */
@import url('variables.css');

/* 2. Temas */
@import url('themes.css');

/* 3. Layout Base */
@import url('layout.css');

/* 4. Componentes Reutilizables */
@import url('components.css');

/* 5. Formularios */
@import url('forms.css');

/* 6. Tablas */
@import url('tables.css');

/* 7. Utilidades */
@import url('utilities.css');

/* 8. Estilos extraídos de las vistas (Legacy) */
@import url('extracted-styles.css');

/* 9. Responsive (debe ir al final) */
@import url('responsive.css');

/* ========================================
   ESTILOS GLOBALES ADICIONALES
   ======================================== */

/* Reset adicional */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: var(--transition);
}

a:hover {
    color: var(--primary-dark);
}

/* Utilidades de texto */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-primary { color: var(--primary) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.text-danger { color: var(--danger) !important; }
.text-muted { color: var(--text-muted) !important; }

.fw-bold { font-weight: 700; }
.fw-semibold { font-weight: 600; }
.fw-normal { font-weight: 400; }

/* Utilidades de display */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-grid { display: grid !important; }
.d-inline-flex { display: inline-flex !important; }

/* Flex utilities */
.flex-column { flex-direction: column; }
.flex-row { flex-direction: row; }
.align-items-center { align-items: center; }
.align-items-start { align-items: flex-start; }
.align-items-end { align-items: flex-end; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-end { justify-content: flex-end; }
.gap-2 { gap: var(--spacing-sm); }
.gap-3 { gap: var(--spacing-md); }
.gap-4 { gap: var(--spacing-lg); }

/* Utilidades de espaciado */
.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-2 { margin-top: var(--spacing-sm) !important; }
.mb-2 { margin-bottom: var(--spacing-sm) !important; }
.mt-3 { margin-top: var(--spacing-md) !important; }
.mb-3 { margin-bottom: var(--spacing-md) !important; }
.mt-4 { margin-top: var(--spacing-lg) !important; }
.mb-4 { margin-bottom: var(--spacing-lg) !important; }

.p-0 { padding: 0 !important; }
.p-2 { padding: var(--spacing-sm) !important; }
.p-3 { padding: var(--spacing-md) !important; }
.p-4 { padding: var(--spacing-lg) !important; }

/* Utilidades de tamaño */
.w-100 { width: 100%; }
.h-100 { height: 100%; }

/* Utilidades de overflow */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }

/* Utilidades de posición */
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-fixed { position: fixed; }

/* Utilidades de cursor */
.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }

/* Utilidades de opacidad */
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }

/* Utilidades de border radius */
.rounded { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }

/* Utilidades de sombra */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* Utilidades de tamaño de iconos Lucide */
.size-14 { width: 14px; height: 14px; }
.size-16 { width: 16px; height: 16px; }
.size-18 { width: 18px; height: 18px; }
.size-20 { width: 20px; height: 20px; }
.size-24 { width: 24px; height: 24px; }

/* ========================================
   CLASES ESPECÍFICAS DEL SISTEMA
   ======================================== */

/* Helpers de funciones */
.esc {
    /* Clase para contenido escapado */
}

/* Indicadores de libro */
.book-indicator {
    width: 4px;
    height: 40px;
    background: var(--primary);
    border-radius: var(--radius-full);
    margin-right: var(--spacing-md);
}

.book-title-cell {
    font-weight: 700;
    color: var(--text);
    font-size: 0.9rem;
}

.book-id-cell {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.user-name-cell {
    font-weight: 600;
    color: var(--text);
}

.date-cell {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Botones de acción en tablas */
.btn-action-premium {
    padding: 0.5rem 0.85rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    font-size: 0.75rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: var(--transition);
    cursor: pointer;
}

.btn-action-premium i {
    width: 14px;
    height: 14px;
    color: var(--primary);
}

.btn-action-premium:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.btn-action-premium:hover i {
    color: white;
}

.btn-action-premium.edit i {
    color: var(--warning);
}

.btn-action-premium.edit:hover {
    background: var(--warning);
    border-color: var(--warning);
}

.btn-action-premium.delete i {
    color: var(--danger);
}

.btn-action-premium.delete:hover {
    background: var(--danger);
    border-color: var(--danger);
}

/* Almacenamiento */
.storage-compact {
    padding: var(--spacing-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.storage-usage-text {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text);
}

.storage-quota-text {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.storage-path-text {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

.storage-path-text code {
    background: rgba(0, 0, 0, 0.05);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
}

[data-theme="oscuro"] .storage-path-text code {
    background: #334155;
    color: #e2e8f0;
}

/* Badge con punto */
.badge-dot-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.badge-dot-label .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.dot.bg-primary {
    background: var(--primary);
}

/* Card header alternativo */
.card-header-alt {
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
}

.btn-link-db {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.btn-link-db:hover {
    text-decoration: underline;
    opacity: 0.8;
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
    body {
        background: white;
        color: black;
    }
    
    .no-print {
        display: none !important;
    }
}