/* =====================================================================
   WIIMSTORE ERP — DESIGN SYSTEM v2.1
   Base visual consolidada. Regla obligatoria: texto mínimo de 13px.
   Este archivo se carga al final de los estilos de cada módulo.
   ===================================================================== */

:root {
    /* Tipografía */
    --wiim-font-min: 13px;
    --wiim-font-sm: 14px;
    --wiim-font-md: 15px;
    --wiim-font-lg: 17px;
    --wiim-font-xl: 20px;
    --wiim-font-2xl: 24px;
    --wiim-font-3xl: 28px;

    /* Espaciado */
    --wiim-space-1: 4px;
    --wiim-space-2: 8px;
    --wiim-space-3: 12px;
    --wiim-space-4: 16px;
    --wiim-space-5: 20px;
    --wiim-space-6: 24px;

    /* Componentes */
    --wiim-control-height: 42px;
    --wiim-control-height-sm: 36px;
    --wiim-radius-sm: 8px;
    --wiim-radius: 10px;
    --wiim-radius-lg: 14px;
    --wiim-border: var(--border);
    --wiim-text: var(--text);
    --wiim-muted: var(--muted);
    --wiim-surface: var(--white);
    --wiim-surface-soft: var(--surface-soft);
    --wiim-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}

html { font-size: var(--wiim-font-min); }
body {
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: var(--wiim-font-min);
    color: var(--wiim-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Protección global: ningún componente habitual reduce el texto. */
body, p, span, a, li, dt, dd,
button, input, select, textarea, option,
.form-control, .form-select, .input-group-text,
.btn, .dropdown-menu, .dropdown-item,
.table, table, th, td,
.modal, .offcanvas, .popover, .tooltip,
.alert, .badge, .pagination, .page-link,
.sidebar, .topbar, .navbar,
small, .small, .form-text, .text-small, .help-text,
.form-label, label, .invalid-feedback, .valid-feedback,
.text-muted, .dropdown-header, .breadcrumb, .breadcrumb-item,
.tooltip-inner, .popover-body, .popover-header {
    font-size: var(--wiim-font-min);
}

small, .small, .form-text, .text-small, .help-text,
.invalid-feedback, .valid-feedback, .tooltip-inner,
.badge, .dropdown-header {
    font-size: var(--wiim-font-min) !important;
}

/* Escala jerárquica */
h1, .h1 { font-size: var(--wiim-font-3xl); line-height: 1.2; }
h2, .h2 { font-size: var(--wiim-font-2xl); line-height: 1.25; }
h3, .h3 { font-size: var(--wiim-font-xl); line-height: 1.3; }
h4, .h4 { font-size: var(--wiim-font-lg); line-height: 1.35; }
h5, .h5 { font-size: var(--wiim-font-md); line-height: 1.4; }
h6, .h6 { font-size: var(--wiim-font-sm); line-height: 1.4; }

/* Formularios */
.form-label, label { font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.form-control, .form-select {
    min-height: var(--wiim-control-height);
    border-radius: var(--wiim-radius);
    border-color: var(--wiim-border);
    padding: 9px 12px;
}
textarea.form-control { min-height: 96px; }
.form-control:focus, .form-select:focus {
    border-color: var(--primary-color, var(--primary));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color, var(--primary)) 16%, transparent);
}
.form-control-sm, .form-select-sm,
.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text {
    min-height: var(--wiim-control-height-sm);
    font-size: var(--wiim-font-min) !important;
}

/* Botones */
.btn {
    min-height: var(--wiim-control-height);
    border-radius: var(--wiim-radius);
    font-weight: 600;
    padding: 9px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn-sm { min-height: var(--wiim-control-height-sm); font-size: var(--wiim-font-min) !important; padding: 6px 11px; }
.btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary-color, var(--primary)) 20%, transparent); outline-offset: 2px; }

/* Cards */
.card {
    border-color: var(--wiim-border);
    border-radius: var(--wiim-radius-lg);
    box-shadow: var(--wiim-shadow);
}
.card-header, .card-footer { background: var(--wiim-surface); border-color: var(--wiim-border); }

/* Tablas */
.table { margin-bottom: 0; }
.table > :not(caption) > * > * { padding: 12px 14px; vertical-align: middle; }
.table thead th { font-weight: 700; color: var(--muted); background: var(--wiim-surface-soft); white-space: nowrap; }
.table tbody tr { transition: background-color .16s ease; }
.table tbody tr:hover { background: var(--surface-soft); }

/* Badges, alertas y modales */
.badge { padding: 6px 9px; border-radius: 999px; font-weight: 700; }
.alert { border-radius: var(--wiim-radius); }
.modal-content { border: 0; border-radius: var(--wiim-radius-lg); box-shadow: 0 24px 60px rgba(15,23,42,.18); }
.modal-header, .modal-footer { border-color: var(--wiim-border); }

/* Paginación */
.page-link { min-width: 38px; min-height: 38px; display: inline-flex; align-items: center; justify-content: center; }

/* Plugins frecuentes */
.select2-container,
.select2-container .select2-selection,
.select2-container .select2-results__option,
.swal2-container, .swal2-popup, .swal2-title, .swal2-html-container,
.dataTables_wrapper, .dataTables_info, .dataTables_paginate,
.flatpickr-calendar, .flatpickr-day,
.choices, .choices__inner, .choices__item {
    font-size: var(--wiim-font-min) !important;
}
.select2-container .select2-selection--single { min-height: var(--wiim-control-height); border-radius: var(--wiim-radius); }

/* Utilidades */
.text-muted { color: var(--wiim-muted) !important; }
.empty-state { padding: 40px 24px; text-align: center; color: var(--wiim-muted); }

@media (max-width: 768px) {
    html, body { font-size: var(--wiim-font-min); }
    h1, .h1 { font-size: 24px; }
    h2, .h2 { font-size: 21px; }
    .table > :not(caption) > * > * { padding: 10px 12px; }
}

@media print {
    body { font-size: 13px !important; }
    .btn, .no-print, .sidebar, .topbar { display: none !important; }
    .card { box-shadow: none; }
}


/* ==========================================================================
   Estructura global de módulos
   Una sola regla de espaciado para Almacenes, Productos, Inventario,
   Transferencias, Compras, Ventas y nuevas pantallas ERP.
   ========================================================================== */
.module-page {
    width: 100%;
    max-width: 100%;
    padding: 28px;
    box-sizing: border-box;
    color: var(--text);
}

.module-page *,
.module-page *::before,
.module-page *::after {
    box-sizing: border-box;
}

.module-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.module-heading > div:first-child > span,
.module-eyebrow {
    display: block;
    color: var(--primary);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .1em;
}

.module-heading h2 {
    margin: 4px 0 5px;
    font-size: 25px;
    line-height: 1.2;
}

.module-heading p {
    margin: 0;
    color: var(--muted);
}

.module-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--wiim-shadow);
}

@media (max-width: 900px) {
    .module-page { padding: 18px; }
}

@media (max-width: 575px) {
    .module-page { padding: 14px; }
    .module-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ==========================================================================
   Paginación global Wiimstore
   Corrige el paginador Tailwind nativo de Laravel en todo el ERP.
   ========================================================================== */
.wiim-pagination{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    padding:14px 0;
    font-size:13px;
    color:var(--muted,#667085);
}
.wiim-pagination__summary{
    line-height:1.35;
    color:var(--muted,#667085);
}
.wiim-pagination__summary strong{
    color:var(--text,#172033);
    font-weight:750;
}
.wiim-pagination__controls,
.wiim-pagination__pages{
    display:flex;
    align-items:center;
    gap:6px;
}
.wiim-pagination__button,
.wiim-pagination__page,
.wiim-pagination__ellipsis{
    box-sizing:border-box;
    min-width:34px;
    height:34px;
    border-radius:8px;
    font-size:12px;
    line-height:1;
}
.wiim-pagination__button,
.wiim-pagination__page{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:0 10px;
    border:1px solid var(--border,#dfe4ec);
    background:var(--surface,#fff);
    color:var(--text,#172033);
    text-decoration:none;
    font-weight:650;
    transition:border-color .16s ease,background-color .16s ease,color .16s ease;
}
.wiim-pagination__page{
    width:34px;
    padding:0;
}
.wiim-pagination__button i{
    width:auto!important;
    height:auto!important;
    font-size:10px!important;
    line-height:1!important;
}
.wiim-pagination__button:hover,
.wiim-pagination__page:hover{
    border-color:var(--primary,#0b7dbb);
    color:var(--primary,#0b7dbb);
    background:color-mix(in srgb,var(--primary,#0b7dbb) 6%,#fff);
}
.wiim-pagination__page.is-active{
    border-color:var(--primary,#0b7dbb);
    background:var(--primary,#0b7dbb);
    color:#fff;
    cursor:default;
}
.wiim-pagination__button.is-disabled{
    opacity:.42;
    cursor:not-allowed;
    pointer-events:none;
}
.wiim-pagination__ellipsis{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:var(--muted,#667085);
}
.wiim-pagination--simple{
    justify-content:flex-end;
}
.wiim-pagination--simple .wiim-pagination__controls{
    margin-left:auto;
}

@media(max-width:700px){
    .wiim-pagination{
        align-items:stretch;
        flex-direction:column;
        gap:9px;
    }
    .wiim-pagination__controls{
        width:100%;
        justify-content:space-between;
    }
    .wiim-pagination__pages{
        flex:1;
        justify-content:center;
        overflow-x:auto;
        padding:1px 3px;
    }
    .wiim-pagination__button span{
        display:none;
    }
    .wiim-pagination__button{
        width:34px;
        padding:0;
        flex:0 0 34px;
    }
}


/* ==========================================================================
   Smart Select global
   Reutilizable en catálogos extensos sin cargar plugins externos.
   ========================================================================== */
.smart-select{position:relative;width:100%}
.smart-select__native{position:absolute;inset:0;opacity:0;pointer-events:none;width:1px;height:1px}
.smart-select__input{width:100%;padding-left:34px}
.smart-select__icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--muted);pointer-events:none}
.smart-select__panel{position:fixed;z-index:2200;max-height:340px;overflow:auto;padding:6px;background:var(--white);border:1px solid var(--border);border-radius:11px;box-shadow:0 16px 34px rgba(15,23,42,.14)}
.smart-select__option{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;padding:9px 10px;border:0;border-radius:8px;background:transparent;text-align:left;cursor:pointer;color:var(--text)}
.smart-select__option:hover,.smart-select__option.is-active{background:var(--erp-primary-softer)}
.smart-select__option span{font-size:12px;font-weight:700;line-height:1.35}
.smart-select__option small{font-size:10px;color:var(--muted)}
.smart-select__message{padding:12px 10px;font-size:11px;color:var(--muted)}