/* Ukarasoft Technology — Sistema de Diseño Oficial */
:root {
    /* Tipografía */
    --font-display: 'Outfit', system-ui, sans-serif;
    --font-body:    'Inter', system-ui, sans-serif;
    --font-mono:    'JetBrains Mono', monospace;

    /* Paleta Primaria — Azul Ucaro */
    --color-primary-900: #0B3D91;
    --color-primary-700: #1558C0;
    --color-primary-600: #1E7FC8;
    --color-primary-400: #5BB8E8;
    --color-primary-100: #DBEEFF;

    /* Paleta Secundaria — Verde Ucaro */
    --color-secondary-700: #1A5C3A;
    --color-secondary-500: #2E9E65;
    --color-secondary-200: #A7F3D0;

    /* Semánticos */
    --color-success:  #2E9E65;
    --color-warning:  #F59E0B;
    --color-error:    #EF4444;
    --color-info:     #1E7FC8;

    /* Fondos */
    --surface-body-light:   #F5F7FA;
    --surface-body-dark:    #0D1B2A;
    --surface-card-light:   #FFFFFF;
    --surface-card-dark:    #132236;
    --surface-sidebar-dark: #0B1E30;

    /* Grises */
    --gray-50:  #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;

    /* Bordes */
    --radius-sm: 0.25rem;
    --radius:    0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;

    /* Sombras */
    --shadow-sm: 0 1px 2px 0 rgba(0,0,0,.05);
    --shadow:    0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);

    /* Gradientes de marca */
    --gradient-brand:        linear-gradient(135deg, #0B3D91 0%, #1E7FC8 100%);
    --gradient-brand-subtle: linear-gradient(135deg, rgba(11,61,145,.12) 0%, rgba(30,127,200,.06) 100%);

    /* Sidebar — variables fijas, no cambian con dark mode */
    --sidebar-text:        #CBD5E1;
    --sidebar-text-muted:  #4A6080;
    --sidebar-text-active: #FFFFFF;
    --sidebar-accent:      #5BB8E8;
    --sidebar-hover-bg:    rgba(255,255,255,.06);
    --sidebar-active-bg:   rgba(30,127,200,.18);
    --sidebar-border:      rgba(255,255,255,.07);
}

/* ─── Dark mode ───────────────────────────────────────────── */
html.dark {
    --surface-body-light:   var(--surface-body-dark);
    --surface-card-light:   var(--surface-card-dark);
    --gray-50:  #1a2332;
    --gray-100: #1e293b;
    --gray-200: #334155;
    --gray-300: #475569;
    --gray-400: #94a3b8;
    --gray-500: #94a3b8;
    --gray-600: #cbd5e1;
    --gray-700: #e2e8f0;
    --gray-800: #f1f5f9;
    --gray-900: #f8fafc;
    --shadow-sm: 0 1px 2px 0 rgba(0,0,0,.3);
    --shadow:    0 1px 3px 0 rgba(0,0,0,.4), 0 1px 2px -1px rgba(0,0,0,.3);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,.4), 0 2px 4px -2px rgba(0,0,0,.3);
}
html.dark .badge-success { background-color: #064e3b; color: #6ee7b7; }
html.dark .badge-info    { background-color: #1e3a5f; color: #93c5fd; }
html.dark .badge-warning { background-color: #451a03; color: #fcd34d; }
html.dark .badge-error   { background-color: #450a0a; color: #fca5a5; }

/* ─── Botones ─────────────────────────────────────────────── */
.btn-primary {
    background-color: var(--color-primary-600);
    color: #fff;
    padding: .5rem 1.25rem;
    border-radius: var(--radius);
    font-weight: 500;
    min-height: 44px;
    transition: background-color 150ms ease, box-shadow 150ms ease;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    border: none;
    gap: .375rem;
}
.btn-primary:hover {
    background-color: var(--color-primary-700);
    box-shadow: 0 4px 12px rgba(30,127,200,.35);
}

.btn-secondary {
    background-color: var(--color-secondary-500);
    color: #fff;
    padding: .5rem 1.25rem;
    border-radius: var(--radius);
    font-weight: 500;
    min-height: 44px;
    transition: background-color 150ms ease;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    border: none;
}
.btn-secondary:hover { background-color: var(--color-secondary-700); }

/* ─── Cards ───────────────────────────────────────────────── */
.card {
    background-color: var(--surface-card-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
    padding: 1.25rem;
}

/* KPI card con franja de acento superior */
.kpi-card {
    background-color: var(--surface-card-light);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    transition: box-shadow 200ms ease, transform 200ms ease;
}
.kpi-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--kpi-accent, var(--color-primary-600));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.kpi-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.kpi-card.accent-green  { --kpi-accent: var(--color-success); }
.kpi-card.accent-red    { --kpi-accent: var(--color-error); }
.kpi-card.accent-yellow { --kpi-accent: var(--color-warning); }
.kpi-card.accent-blue   { --kpi-accent: var(--color-primary-600); }

/* Proyecto card con borde izquierdo de acento */
.proyecto-card {
    background-color: var(--surface-card-light);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
    border-left: 3px solid var(--proyecto-color, var(--color-primary-600));
    padding: 1.25rem;
    transition: box-shadow 200ms ease, transform 200ms ease;
    display: block;
    text-decoration: none;
    position: relative;
}
.proyecto-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

/* Status bar — barra de uptime visual */
.status-bar {
    display: flex;
    gap: 2px;
    height: 4px;
    border-radius: 2px;
    overflow: hidden;
}
.status-bar-fill {
    height: 4px;
    border-radius: 2px;
    transition: width 600ms ease;
}

/* ─── Formularios ─────────────────────────────────────────── */
.form-input {
    border: 1px solid var(--gray-300);
    border-radius: var(--radius);
    padding: .5rem .75rem;
    width: 100%;
    font-family: var(--font-body);
    transition: border-color 150ms ease, box-shadow 150ms ease;
    background-color: var(--surface-card-light);
    color: var(--gray-900);
}
.form-input:focus {
    outline: none;
    border-color: var(--color-primary-600);
    box-shadow: 0 0 0 3px rgba(30,127,200,.15);
}

/* ─── Layout ──────────────────────────────────────────────── */
.navbar  { background-color: var(--color-primary-900); color: #fff; }
.sidebar {
    background-color: var(--surface-sidebar-dark);
    /* color base no se define aquí — los hijos usan --sidebar-text directamente */
}

/* ─── Badges ──────────────────────────────────────────────── */
.badge-success { background-color: var(--color-secondary-200); color: var(--color-secondary-700); }
.badge-info    { background-color: var(--color-primary-100);   color: var(--color-primary-900);  }
.badge-warning { background-color: #FEF3C7; color: #92400E; }
.badge-error   { background-color: #FEE2E2; color: #991B1B; }

/* ─── Semáforo de estado ──────────────────────────────────── */
.semaforo {
    width: 8px; height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.semaforo.up         { background-color: var(--color-success);  box-shadow: 0 0 0 3px rgba(46,158,101,.2); }
.semaforo.down       { background-color: var(--color-error);    box-shadow: 0 0 0 3px rgba(239,68,68,.2);  }
.semaforo.degradado  { background-color: var(--color-warning);  box-shadow: 0 0 0 3px rgba(245,158,11,.2); }
.semaforo.mantenimiento { background-color: var(--gray-400); }