/* ============================================================
   ControlNet ERP — Modern Design System (Fase 0)
   Variables CSS y utilidades base para la modernización gradual.
   Cargar en todas las páginas que se vayan modernizando.
   ============================================================ */

/* --- Paleta corporativa ------------------------------------ */
:root {
    /* Colores primarios */
    --cn-primary:        #2563eb;   /* azul principal */
    --cn-primary-dark:   #1d4ed8;
    --cn-primary-light:  #dbeafe;

    /* Colores de estado (heredados del sistema actual) */
    --cn-success:        #16a34a;
    --cn-success-light:  #dcfce7;
    --cn-warning:        #d97706;
    --cn-warning-light:  #fef3c7;
    --cn-danger:         #dc2626;
    --cn-danger-light:   #fee2e2;
    --cn-info:           #0891b2;
    --cn-info-light:     #cffafe;

    /* Grises neutrales */
    --cn-gray-50:  #f8fafc;
    --cn-gray-100: #f1f5f9;
    --cn-gray-200: #e2e8f0;
    --cn-gray-300: #cbd5e1;
    --cn-gray-400: #94a3b8;
    --cn-gray-500: #64748b;
    --cn-gray-600: #475569;
    --cn-gray-700: #334155;
    --cn-gray-800: #1e293b;
    --cn-gray-900: #0f172a;

    /* Tipografía */
    --cn-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --cn-font-size-xs:  10px;
    --cn-font-size-sm:  11px;
    --cn-font-size-base: 13px;
    --cn-font-size-md:  14px;
    --cn-font-size-lg:  16px;

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

    /* Bordes */
    --cn-radius-sm:  4px;
    --cn-radius-md:  6px;
    --cn-radius-lg:  8px;

    /* Sombras */
    --cn-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --cn-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -1px rgba(0,0,0,0.06);

    /* Sidebar/Menú */
    --cn-sidebar-width:       220px;
    --cn-sidebar-bg:          #11456f;   /* azul claro intenso */
    --cn-sidebar-text:        #e4f3ff;
    --cn-sidebar-text-muted:  #a9cce6;
    --cn-sidebar-hover-bg:    #1c5f99;
    --cn-sidebar-active-bg:   #2ec4ff;   /* cian-azul brillante */
    --cn-sidebar-active-text: #05223a;
    --cn-sidebar-header-bg:   #0c3155;   /* azul medio */
    --cn-sidebar-border:      rgba(120,200,255,0.20);

    /* Mapeo de colores legacy → variables (para migración gradual) */
    --cn-legacy-header:       #5F9BCD;  /* tablaheader1, pager1 */
    --cn-legacy-header-dark:  #000084;  /* tablaheader2, pager2 */
    --cn-legacy-rows-green:   #99FF99;  /* rows1 */
    --cn-legacy-rows-blue:    #99CCFF;  /* rows2 */
    --cn-legacy-alert-red:    #f94332;  /* divAlertaNovedades */
}

/* --- Utilidades de visualización (reemplaza style="display:none") --- */
.cn-hidden   { display: none !important; }
.cn-visible  { display: block !important; }
.cn-flex     { display: flex !important; }

/* --- Utilidades de alineación -------------------------------- */
.cn-text-center  { text-align: center !important; }
.cn-text-right   { text-align: right !important; }
.cn-text-left    { text-align: left !important; }

/* --- Utilidades de texto ------------------------------------- */
.cn-text-xs   { font-size: var(--cn-font-size-xs) !important; }
.cn-text-sm   { font-size: var(--cn-font-size-sm) !important; }
.cn-text-base { font-size: var(--cn-font-size-base) !important; }
.cn-font-bold { font-weight: bold !important; }
.cn-font-normal { font-weight: normal !important; }

/* --- Colores de texto --------------------------------------- */
.cn-text-muted   { color: var(--cn-gray-500) !important; }
.cn-text-danger  { color: var(--cn-danger) !important; }
.cn-text-success { color: var(--cn-success) !important; }
.cn-text-primary { color: var(--cn-primary) !important; }

/* --- Fondos de badge/estado (reemplaza background-color inline) --- */
.cn-bg-success { background-color: var(--cn-success-light) !important; }
.cn-bg-warning { background-color: var(--cn-warning-light) !important; }
.cn-bg-danger  { background-color: var(--cn-danger-light) !important; }
.cn-bg-info    { background-color: var(--cn-info-light) !important; }
.cn-bg-light   { background-color: var(--cn-gray-100) !important; }

/* --- Formularios modernos ----------------------------------- */
.cn-input {
    font-family: var(--cn-font-family);
    font-size: var(--cn-font-size-sm);
    border: 1px solid var(--cn-gray-300);
    border-radius: var(--cn-radius-sm);
    padding: 3px 6px;
    transition: border-color 0.15s;
}
.cn-input:focus {
    outline: none;
    border-color: var(--cn-primary);
    box-shadow: 0 0 0 2px var(--cn-primary-light);
}

/* --- Card/panel (alternativa moderna a las tablas de fondo) - */
.cn-card {
    background: #ffffff;
    border: 1px solid var(--cn-gray-200);
    border-radius: var(--cn-radius-md);
    padding: var(--cn-spacing-4);
    box-shadow: var(--cn-shadow-sm);
}
.cn-card-header {
    background: var(--cn-gray-100);
    border-bottom: 1px solid var(--cn-gray-200);
    padding: var(--cn-spacing-2) var(--cn-spacing-4);
    font-weight: bold;
    font-size: var(--cn-font-size-sm);
    border-radius: var(--cn-radius-md) var(--cn-radius-md) 0 0;
    margin: calc(-1 * var(--cn-spacing-4));
    margin-bottom: var(--cn-spacing-4);
}

/* --- Badge/Etiqueta ----------------------------------------- */
.cn-badge {
    display: inline-block;
    padding: 2px 7px;
    font-size: 10px;
    font-weight: bold;
    border-radius: 10px;
    line-height: 1.4;
}
.cn-badge-primary { background: var(--cn-primary); color: white; }
.cn-badge-success { background: var(--cn-success); color: white; }
.cn-badge-danger  { background: var(--cn-danger);  color: white; }
.cn-badge-warning { background: var(--cn-warning); color: white; }