/* ============================================
   SISEC — Design System
   Variables de marca + base compartida por todo el sistema.
   Se carga primero en cada página: el resto de los CSS de cada
   módulo usan estas variables (var(--primary), etc.) en vez de
   colores sueltos, así todo el sistema se ve coherente.
   ============================================ */

:root {
    /* Marca */
    --primary: #0073aa;
    --primary-light: #00b4db;
    --primary-dark: #005a8d;
    --gradient-primary: linear-gradient(135deg, var(--primary), var(--primary-light));
    --brand-red: #e31e24;
    --brand-red-dark: #b91c1c;
    --indigo: #1a237e;
    --accent-orange: #f4590c;

    /* Estado */
    --success: #28a745;
    --success-dark: #1e7e34;
    --danger: #dc3545;
    --danger-dark: #b02a37;
    --danger-light: #ff416c;
    --warning: #f59e0b;
    --warning-dark: #c2760a;
    --whatsapp: #25d366;
    --whatsapp-dark: #128c7e;
    --whatsapp-darker: #075e54;

    /* Escala de grises */
    --gray-900: #1e293b;
    --gray-800: #334155;
    --gray-700: #475569;
    --gray-600: #64748b;
    --gray-500: #6b7280;
    --gray-300: #cbd5e1;
    --gray-200: #e2e8f0;
    --gray-100: #f1f5f9;
    --gray-50: #f8fafc;
    --white: #ffffff;

    /* Fondo general de las pantallas del panel */
    --bg-app: linear-gradient(135deg, #f5f7fa 0%, #e8ecf3 100%);

    /* Forma */
    --radius: 14px;
    --radius-sm: 8px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    /* Sombra */
    --shadow-sm: 0 2px 8px rgba(15, 23, 42, .06);
    --shadow-md: 0 8px 24px rgba(15, 23, 42, .08);
    --shadow-lg: 0 16px 40px rgba(15, 23, 42, .14);

    /* Tipografía */
    --font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Movimiento */
    --transition: all .2s cubic-bezier(.4, 0, .2, 1);
}

/* ============================================
   Reset base
   ============================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: var(--font);
    color: var(--gray-900);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection { background: var(--primary-light); color: #fff; }

/* ============================================
   Tipografía — jerarquía consistente en todo el sistema,
   sin importar qué font-family haya definido cada módulo por su lado.
   ============================================ */
body, input, select, textarea, button, table, .btn, [class*="btn-"]:not(.btn-text) {
    font-family: var(--font) !important;
}

/* El fondo de página lo define el panel (panel.php), no cada módulo:
   varios CSS migrados traían su propio "background" de cuando eran
   páginas independientes en WordPress (algunos hasta con degradés
   morados/azules fuertes) y le ganaban al fondo real del sistema. */
body { background: var(--bg-app) !important; }

h1, .container h1, .sisec-shell-container h1, .content-area h1, #content h1 {
    font-size: 26px !important;
    font-weight: 700 !important;
    letter-spacing: -.2px;
    margin-bottom: 6px !important;
}
h2, .container h2, .sisec-shell-container h2, .content-area h2, #content h2 {
    font-size: 20px !important;
    font-weight: 600 !important;
}
h3, .container h3, .sisec-shell-container h3, .content-area h3, #content h3 {
    font-size: 16px !important;
    font-weight: 600 !important;
}
p { line-height: 1.55; }
label { font-weight: 500 !important; color: var(--gray-700) !important; }

/* Scrollbar prolija (webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--gray-100); }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--gray-500); }

/* Foco accesible y consistente en toda la app */
a, button, input, select, textarea {
    font-family: inherit;
}
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ============================================
   Botones — TODOS los botones del sistema, agrupados por lo que
   HACEN (no por el nombre de clase que le puso cada módulo migrado:
   btn-buscar, boton-accion, btn-salir, btn-agregar... cada uno
   inventó el suyo). Así se ven todos iguales en todo el sistema.
   ============================================ */

.btn, button, input[type="submit"],
[class*="btn-"]:not(.btn-text), [class*="boton-"], .button-item {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    font-family: var(--font) !important;
    border-radius: var(--radius-sm) !important;
    border: none;
    font-weight: 600 !important;
    letter-spacing: .1px;
    cursor: pointer;
    transition: var(--transition) !important;
    text-decoration: none !important;
    line-height: 1.3;
}
.btn, button, input[type="submit"], [class*="btn-"]:not(.btn-text), [class*="boton-"] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 22px !important;
    font-size: 14px !important;
}
.btn:hover, button:hover, input[type="submit"]:hover,
[class*="btn-"]:not(.btn-text):hover, [class*="boton-"]:hover, .button-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.btn:active, button:active, [class*="btn-"]:not(.btn-text):active, [class*="boton-"]:active {
    transform: translateY(0);
}

/* Primario / navegación / buscar / ver (azul de marca) */
.btn-primary, .btn-buscar, .btn-busqueda, .btn-search, .btn-edit, .btn-editar-cliente,
.btn-detail, .btn-view-services, .btn-start, .boton-accion, .btn-descargar, .btn-maps-large,
.btn-call-large, .btn-crear, .edit-save, .btn-principal:not(.btn-salir):not(.btn-exit) {
    background: var(--gradient-primary) !important;
    color: #fff !important;
}

/* Positivo / guardar / agregar / confirmar (verde) */
.btn-success, .btn-save, .btn-guardar-cliente, .btn-agregar, .btn-add, .download-excel {
    background: linear-gradient(135deg, var(--success), #34d058) !important;
    color: #fff !important;
}

/* WhatsApp (siempre su verde característico) */
.btn-whatsapp, .btn-whatsapp-large, a[href*="wa.me"][class*="btn"] {
    background: linear-gradient(135deg, var(--whatsapp), var(--whatsapp-dark)) !important;
    color: #fff !important;
}

/* Destructivo / salir / cancelar / eliminar / anular (rojo) */
.btn-danger, .btn-delete, .btn-eliminar, .btn-anular, .btn-cancelar-edicion,
.btn-salir, .btn-exit, #salir {
    background: linear-gradient(135deg, var(--danger), var(--danger-light)) !important;
    color: #fff !important;
}

/* Secundario / neutro / ya realizado (gris oscuro) */
.btn-secondary, .btn-dark, .btn-enviado, .btn-archivar {
    background: linear-gradient(135deg, var(--gray-700), var(--gray-800)) !important;
    color: #fff !important;
}

/* Chips de filtro / categoría (pill, más chico) */
.btn-categoria, .quick-filter-btn {
    border-radius: var(--radius-pill) !important;
    padding: 6px 16px !important;
    font-size: 13px !important;
    background: var(--gray-100) !important;
    color: var(--gray-700) !important;
}
.btn-categoria.active, .btn-categoria:hover, .quick-filter-btn.active, .quick-filter-btn:hover {
    background: var(--gradient-primary) !important;
    color: #fff !important;
}

.btn-sm { padding: 6px 10px !important; font-size: 12px !important; }

/* Etiquetas de texto DENTRO de un botón (no son botones en sí) —
   nunca deben recibir el padding/display de un botón */
.btn-text { display: inline !important; padding: 0 !important; }

/* ============================================
   Tarjetas / contenedores
   ============================================ */
.card, .tarjeta, .accion-card, .stat-card {
    background: rgba(255, 255, 255, .97);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.card:hover, .tarjeta:hover, .accion-card:hover {
    box-shadow: var(--shadow-md);
}

/* ============================================
   Formularios
   ============================================ */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="tel"], input[type="search"], input[type="file"],
select, textarea {
    font-family: var(--font);
    border-radius: var(--radius-sm) !important;
    border: 2px solid var(--gray-200) !important;
    transition: var(--transition);
}
input:focus, select:focus, textarea:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 115, 170, .12) !important;
}

/* ============================================
   Tablas — más aire, encabezado prolijo
   ============================================ */
table { border-collapse: collapse; width: 100%; }
.table-container { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.table-container table, .table-container .table, .table-container .tabla-movimientos, .table-container .product-table {
    width: auto;
    min-width: 900px;
}
thead th {
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
    font-size: 12px;
}

/* ============================================
   Badges / estados
   ============================================ */
.badge, .tipo-badge, .stock-indicator, .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    border-radius: var(--radius-pill);
    padding: 3px 10px;
    font-size: 12px;
}

/* ============================================
   Estado vacío
   ============================================ */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--gray-500);
}
.empty-state i { font-size: 42px; opacity: .35; margin-bottom: 12px; display: block; }

/* ============================================
   Utilidades responsive
   ============================================ */
@media (max-width: 640px) {
    .container, .sisec-shell-container, .app-container, .content-area { width: 100% !important; margin: 0 auto !important; }
}

/* Impresión: ocultar navegación al imprimir reportes */
@media print {
    .sisec-topbar, .sisec-nav, .sisec-nav-toggle, .sisec-breadcrumb, .btn, button, .no-print { display: none !important; }
}