/* InclusivaConnect v2.0 — Design System (Neo-Brutalist) */
:root {
  --primary-blue: #3266F5; --primary-dark: #1A45D4; --primary-light: #EEF3FF;
  --bg-light: #F0F5FF; --deep-dark: #1A1B22; --white: #FFFFFF; --accent: #E5E9F4;
  --success: #10B981; --success-bg: #D1FAE5; --warning: #F59E0B; --warning-bg: #FEF3C7;
  --danger: #EF4444; --danger-bg: #FEE2E2; --info: #3B82F6; --info-bg: #DBEAFE;
  --purple-ai: #8B5CF6; --purple-bg: #EDE9FE;
  --border-thick: 3px solid var(--deep-dark);
  --shadow-hard: 5px 5px 0px var(--deep-dark);
  --shadow-hard-hover: 7px 7px 0px var(--deep-dark);
  --shadow-blue: 5px 5px 0px var(--primary-blue);
  --radius-sm: 0.5rem; --radius-md: 0.75rem; --radius-lg: 1rem; --radius-xl: 1.5rem; --radius-pill: 9999px;
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'DM Mono', monospace;
  --bouncy-ease: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --z-modal: 500; --z-toast: 800;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body { font-family:var(--font-body); color:var(--deep-dark); background:var(--bg-light); line-height:1.6; min-height:100vh;
  background-image: linear-gradient(to right, rgba(50,102,245,0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(50,102,245,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}
h1,h2,h3,h4,h5,h6 { font-family:var(--font-heading); font-weight:700; letter-spacing:-0.03em; line-height:1.2; }
h1 { font-size:clamp(2rem,4vw,2.5rem); } h2 { font-size:clamp(1.5rem,3vw,2rem); } h3 { font-size:1.25rem; }
a { color:var(--primary-blue); text-decoration:none; } a:hover { color:var(--primary-dark); }
.label-upper { font-family:var(--font-mono); font-size:0.7rem; font-weight:500; text-transform:uppercase; letter-spacing:0.12em; color:var(--primary-blue); }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; padding:0.65rem 1.5rem; font-family:var(--font-heading); font-weight:700; font-size:0.9rem; border:var(--border-thick); border-radius:var(--radius-pill); cursor:pointer; transition:all 0.15s var(--bouncy-ease); white-space:nowrap; }
.btn:active { transform:translate(2px,2px); } .btn:disabled { opacity:0.5; cursor:not-allowed; }
.btn-primary { background:var(--primary-blue); color:var(--white); box-shadow:var(--shadow-hard); }
.btn-primary:hover:not(:disabled) { transform:translate(-2px,-2px); box-shadow:var(--shadow-hard-hover); }
.btn-secondary { background:var(--white); color:var(--deep-dark); box-shadow:var(--shadow-hard); }
.btn-secondary:hover:not(:disabled) { transform:translate(-2px,-2px); box-shadow:var(--shadow-hard-hover); }
.btn-success { background:var(--success); color:var(--white); border-color:#059669; box-shadow:5px 5px 0 #059669; }
.btn-danger { background:var(--danger); color:var(--white); border-color:#B91C1C; box-shadow:5px 5px 0 #B91C1C; }
.btn-ai { background:var(--purple-ai); color:var(--white); border-color:#6D28D9; box-shadow:5px 5px 0 #6D28D9; }
.btn-ghost { background:transparent; border-color:transparent; box-shadow:none; } .btn-ghost:hover { background:var(--accent); }
.btn-sm { padding:0.4rem 1rem; font-size:0.8rem; } .btn-lg { padding:0.85rem 2rem; font-size:1rem; }
.btn-loading { position:relative; color:transparent!important; }
.btn-loading::after { content:''; position:absolute; width:18px; height:18px; border:3px solid rgba(255,255,255,0.3); border-top-color:white; border-radius:50%; animation:spin .6s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* Cards */
.card { background:var(--white); border:var(--border-thick); border-radius:var(--radius-lg); box-shadow:var(--shadow-hard); padding:1.5rem; }
.card-hover { transition:transform .15s var(--bouncy-ease), box-shadow .15s; }
.card-hover:hover { transform:translate(-2px,-2px); box-shadow:var(--shadow-hard-hover); }

/* KPI */
.kpi-card { background:var(--white); border:var(--border-thick); border-radius:var(--radius-lg); box-shadow:var(--shadow-hard); padding:1.25rem 1.5rem; display:flex; flex-direction:column; gap:0.25rem; }
.kpi-label { font-family:var(--font-mono); font-size:0.7rem; font-weight:500; text-transform:uppercase; letter-spacing:0.1em; opacity:0.5; }
.kpi-value { font-family:var(--font-heading); font-size:2rem; font-weight:700; color:var(--primary-blue); line-height:1; }
.kpi-card.highlight { background:var(--primary-blue); border-color:var(--primary-dark); box-shadow:var(--shadow-blue); }
.kpi-card.highlight .kpi-label { color:rgba(255,255,255,0.7); } .kpi-card.highlight .kpi-value { color:var(--white); }

/* Forms */
.form-group { display:flex; flex-direction:column; gap:0.4rem; margin-bottom:1.25rem; }
.form-label { font-weight:600; font-size:0.9rem; }
.form-input, .form-select, .form-textarea { width:100%; padding:0.7rem 1rem; font-family:var(--font-body); font-size:0.95rem; border:var(--border-thick); border-radius:var(--radius-md); background:var(--white); color:var(--deep-dark); outline:none; transition:box-shadow .2s, border-color .2s; }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color:var(--primary-blue); box-shadow:0 0 0 3px rgba(50,102,245,0.15); }
.form-input.error { border-color:var(--danger); } .form-error { font-size:0.8rem; color:var(--danger); font-weight:500; }
.form-textarea { min-height:100px; resize:vertical; }

/* Tables */
.table-wrap { background:var(--white); border:var(--border-thick); border-radius:var(--radius-lg); box-shadow:var(--shadow-hard); overflow:hidden; }
.table { width:100%; border-collapse:collapse; }
.table thead th { font-family:var(--font-heading); font-size:0.8rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; text-align:left; padding:0.85rem 1rem; background:var(--deep-dark); color:var(--white); }
.table tbody td { padding:0.75rem 1rem; font-size:0.9rem; border-bottom:2px solid var(--accent); }
.table tbody tr:nth-child(even) td { background:#F8FAFF; }
.table tbody tr:hover td { background:var(--primary-light); }

/* Badges */
.badge { display:inline-flex; align-items:center; gap:0.3rem; padding:0.2rem 0.75rem; font-family:var(--font-heading); font-size:0.75rem; font-weight:700; border-radius:var(--radius-pill); border:2px solid; white-space:nowrap; }
.badge-success { background:var(--success-bg); color:#065F46; border-color:#059669; }
.badge-warning { background:var(--warning-bg); color:#92400E; border-color:#D97706; }
.badge-danger { background:var(--danger-bg); color:#991B1B; border-color:#DC2626; }
.badge-info { background:var(--info-bg); color:#1E40AF; border-color:#3B82F6; }
.badge-purple { background:var(--purple-bg); color:#5B21B6; border-color:#7C3AED; }

/* Modal */
.modal-overlay { position:fixed; inset:0; background:rgba(26,27,34,0.5); backdrop-filter:blur(4px); z-index:var(--z-modal); display:none; align-items:center; justify-content:center; padding:1rem; opacity:0; transition:opacity .3s; }
.modal-overlay.active { display:flex; opacity:1; }
.modal-content { background:var(--white); border:var(--border-thick); border-radius:var(--radius-xl); box-shadow:10px 10px 0 var(--deep-dark); width:100%; max-width:600px; max-height:90vh; overflow-y:auto; animation:modalIn .3s var(--bouncy-ease); }
@keyframes modalIn { from { transform:scale(0.9) translateY(20px); opacity:0; } to { transform:scale(1) translateY(0); opacity:1; } }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:1.25rem 1.5rem; border-bottom:var(--border-thick); }
.modal-close { width:36px; height:36px; border:2px solid var(--deep-dark); border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s; }
.modal-close:hover { background:var(--danger-bg); }
.modal-body { padding:1.5rem; } .modal-footer { display:flex; justify-content:flex-end; gap:0.75rem; padding:1rem 1.5rem; border-top:2px solid var(--accent); }

/* Toast */
.toast-container { position:fixed; top:1.5rem; right:1.5rem; z-index:var(--z-toast); display:flex; flex-direction:column; gap:0.75rem; }
.toast { display:flex; align-items:center; gap:0.75rem; padding:0.85rem 1.25rem; background:var(--white); border:var(--border-thick); border-radius:var(--radius-md); box-shadow:var(--shadow-hard); font-size:0.9rem; font-weight:500; min-width:280px; max-width:420px; animation:toastIn .4s var(--bouncy-ease); }
.toast-success { border-left:6px solid var(--success); } .toast-error { border-left:6px solid var(--danger); } .toast-info { border-left:6px solid var(--info); }
@keyframes toastIn { from { transform:translateX(120%); opacity:0; } to { transform:translateX(0); opacity:1; } }
.toast.fade-out { animation:toastOut .3s forwards; }
@keyframes toastOut { to { transform:translateX(120%); opacity:0; } }

/* Skeleton */
.skeleton { background:linear-gradient(90deg, var(--accent) 25%, #D8DEF0 50%, var(--accent) 75%); background-size:200% 100%; animation:shimmer 1.5s infinite; border-radius:var(--radius-sm); }
@keyframes shimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }

/* Utils */
.flex { display:flex; } .flex-col { flex-direction:column; } .items-center { align-items:center; } .justify-between { justify-content:space-between; }
.gap-sm { gap:0.5rem; } .gap-md { gap:1rem; } .gap-lg { gap:1.5rem; } .text-center { text-align:center; } .w-full { width:100%; } .hidden { display:none!important; }
.grid-2 { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:1.5rem; }
.grid-3 { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:1.25rem; }
.grid-4 { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:1rem; }
.mt-1 { margin-top:0.5rem; } .mt-2 { margin-top:1rem; } .mt-3 { margin-top:1.5rem; }
.mb-1 { margin-bottom:0.5rem; } .mb-2 { margin-bottom:1rem; } .mb-3 { margin-bottom:1.5rem; }
@media (max-width:768px) { .grid-4 { grid-template-columns:repeat(2,1fr); } .hide-mobile { display:none!important; } }
@media (max-width:480px) { .grid-2, .grid-3, .grid-4 { grid-template-columns:1fr; } }