/* ============================================================
   assets/css/style.css — Estilos complementarios Almacén
   (Tailwind CDN cubre el 95% — esto cubre detalles finos)
   ============================================================ */

/* Escala de texto equilibrada y nítida */
html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

/* Mejora general de contraste y legibilidad */
body {
    -webkit-font-smoothing: antialiased;
}

/* Tablas con espaciado equilibrado y excelente legibilidad */
table th {
    font-weight: 700;
}
table td {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}

/* Números y códigos en fuente mono */
.font-mono {
    font-weight: 600;
}

/* Scrollbar personalizado */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }
.dark ::-webkit-scrollbar-thumb { background: #334155; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.dark ::-webkit-scrollbar-thumb:hover { background: #475569; }

/* Ocultar scrollbar en tabla horizontal en móvil */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll::-webkit-scrollbar { height: 4px; }

/* Transición de página / fade suave */
.page-section { animation: fadeSlideIn 0.2s ease-out both; }
@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Badge de estatus personalizado */
.badge { display: inline-flex; align-items: center; gap: 4px; }

/* KPI card hover lift */
.kpi-card { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.kpi-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px -4px rgba(0,0,0,0.12); }
.dark .kpi-card:hover { box-shadow: 0 8px 24px -4px rgba(0,0,0,0.5); }

/* Fila de tabla con cursor pointer cuando tiene click */
.row-clickable { cursor: pointer; }

/* Loading skeleton pulse */
.skeleton { animation: skeleton-pulse 1.5s ease-in-out infinite; background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%); background-size: 200% 100%; border-radius: 6px; }
.dark .skeleton { background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%); background-size: 200% 100%; }
@keyframes skeleton-pulse { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Gráfico canvas */
canvas { display: block; }

/* Tooltip nativo mejorado */
[title] { cursor: help; }

/* Tab activo con indicador animado */
.tab-dot { width: 6px; height: 6px; border-radius: 9999px; }

/* Modal overlay */
.modal-overlay {
    position: fixed; inset: 0; z-index: 50;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}