/* ============================================================
   DESIGN TOKENS — Kiro design system
   ============================================================ */
:root {
  color-scheme: light;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'SF Mono', 'Monaco', 'Menlo', 'Consolas', monospace;
  --text-xs: 0.625rem; --text-sm: 0.6875rem; --text-base: 0.75rem;
  --text-md: 0.8125rem; --text-lg: 0.875rem; --text-xl: 1rem;
  --text-2xl: 1.125rem; --text-3xl: 1.25rem; --text-4xl: 1.5rem;
  --radius-sm: 6px; --radius-md: 10px; --radius-card: 12px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --color-bg: #f2f1f4; --color-bg-secondary: #ffffff; --color-bg-tertiary: #eae8ed;
  --color-bg-hover: #dcdadf; --color-surface: #eae8ed;
  --color-border: #c1bec6; --color-border-light: #dcdadf; --color-border-strong: #c1bec6;
  --color-primary: #7138cc; --color-primary-light: #8e47ff;
  --color-primary-bg: #ece0f8; --color-primary-subtle: rgba(113,56,204,0.18);
  --color-primary-border: #9e61ff;
  --color-text: #352f3d; --color-text-secondary: #5e5966; --color-text-muted: #938f9b;
  --color-text-on-primary: #f2f1f4;
  --color-success: #367c53; --color-success-bg: rgba(54,124,83,0.09); --color-success-border: rgba(54,124,83,0.22);
  --color-error: #993333; --color-error-bg: rgba(153,51,51,0.09); --color-error-border: rgba(153,51,51,0.22);
  --color-warning: #d08025; --color-warning-bg: rgba(208,128,37,0.10); --color-warning-border: rgba(208,128,37,0.28);
  --color-info: #3878b0; --color-info-bg: rgba(56,120,176,0.09); --color-info-border: rgba(56,120,176,0.22);
  --color-scrollbar-thumb: #c1bec6; --sidebar-width: 240px;
}
[data-theme="kiro-dark"] {
  color-scheme: dark;
  --color-bg: #19161d; --color-bg-secondary: #211d25; --color-bg-tertiary: #28242e;
  --color-bg-hover: #352f3d; --color-surface: #28242e;
  --color-border: #4a464f; --color-border-light: #352f3d; --color-border-strong: #4a464f;
  --color-primary: #8e47ff; --color-primary-light: #b080ff;
  --color-primary-bg: rgba(142,71,255,0.25); --color-primary-subtle: rgba(113,56,204,0.25);
  --color-primary-border: #9e61ff;
  --color-text: #ffffff; --color-text-secondary: #c1bec6; --color-text-muted: #938f9b;
  --color-text-on-primary: #f2f1f4;
  --color-success: #80ffb5; --color-success-bg: rgba(128,255,181,0.13); --color-success-border: rgba(128,255,181,0.25);
  --color-error: #ff8080; --color-error-bg: rgba(255,128,128,0.13); --color-error-border: rgba(255,128,128,0.25);
  --color-warning: #ffcf99; --color-warning-bg: rgba(255,207,153,0.13); --color-warning-border: rgba(255,207,153,0.25);
  --color-info: #8dc8fb; --color-info-bg: rgba(141,200,251,0.13); --color-info-border: rgba(141,200,251,0.25);
  --color-scrollbar-thumb: #4a464f;
}

/* ============================================================
   BASE RESET
   ============================================================ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
body { font-family:var(--font-sans); font-size:var(--text-md); line-height:1.6;
  color:var(--color-text); background:var(--color-bg);
  -webkit-font-smoothing:antialiased; }
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--color-scrollbar-thumb); border-radius:3px; }
a { color:var(--color-primary); text-decoration:none; }

/* ============================================================
   LOGIN SCREEN
   ============================================================ */
.login-screen {
  display:flex; align-items:center; justify-content:center;
  min-height:100vh; background:var(--color-bg);
}
.login-card {
  text-align:center; padding:48px; background:var(--color-bg-secondary);
  border:1px solid var(--color-border-light); border-radius:var(--radius-card);
  box-shadow:var(--shadow-md);
}
.login-logo { font-size:3rem; margin-bottom:16px; }
.login-card h1 { font-size:var(--text-3xl); margin-bottom:8px; }
.login-card p { color:var(--color-text-muted); margin-bottom:24px; }
.login-spinner {
  width:24px; height:24px; border:3px solid var(--color-border);
  border-top-color:var(--color-primary); border-radius:50%;
  animation:spin 0.8s linear infinite; margin:0 auto;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ============================================================
   LAYOUT
   ============================================================ */
.page-wrapper { display:flex; min-height:100vh; }
.sidebar {
  position:fixed; left:0; top:0; width:var(--sidebar-width); height:100vh;
  background:var(--color-bg-secondary); border-right:1px solid var(--color-border);
  display:flex; flex-direction:column; overflow-y:auto; z-index:100;
}
.sidebar-header { padding:20px 16px; border-bottom:1px solid var(--color-border-light);
  display:flex; align-items:center; gap:10px; }
.sidebar-logo { width:32px; height:32px; border-radius:8px;
  background:linear-gradient(135deg, #FF9900 0%, #FF6600 100%);
  display:flex; align-items:center; justify-content:center; }
.sidebar-brand-wrap { display:flex; flex-direction:column; }
.sidebar-brand { font-size:var(--text-lg); font-weight:600; color:var(--color-text); }
.sidebar-sub { font-size:var(--text-xs); color:var(--color-text-muted);
  text-transform:uppercase; letter-spacing:0.08em; }
.sidebar-nav { padding:12px 8px; flex:1; }
.nav-group { margin-bottom:4px; }
.nav-link { display:flex; align-items:center; gap:10px; padding:9px 12px;
  border-radius:var(--radius-sm); color:var(--color-text-secondary);
  font-size:var(--text-md); font-weight:500; cursor:pointer;
  transition:background 0.12s, color 0.12s; text-decoration:none; }
.nav-link:hover { background:var(--color-bg-hover); color:var(--color-text); }
.nav-link.active { background:var(--color-primary-bg); color:var(--color-primary); font-weight:600; }
.nav-link svg { width:16px; height:16px; flex-shrink:0; }
.sidebar-footer { padding:12px 16px; border-top:1px solid var(--color-border-light);
  font-size:var(--text-xs); color:var(--color-text-muted); text-align:center; }

.content-wrapper { flex:1; margin-left:var(--sidebar-width); }
.container { max-width:1100px; margin:0 auto; padding:24px 28px; }

/* ============================================================
   TOP BAR
   ============================================================ */
.top-bar { display:flex; align-items:center; justify-content:space-between;
  margin-bottom:24px; }
.top-bar h1 { font-size:var(--text-3xl); font-weight:700; letter-spacing:-0.02em; }
.top-bar-right { display:flex; align-items:center; gap:16px; }
.user-info { display:flex; align-items:center; gap:8px; }
.user-avatar { width:32px; height:32px; border-radius:50%;
  background:var(--color-primary); display:flex; align-items:center;
  justify-content:center; color:#fff; font-weight:700; font-size:var(--text-sm); }
.user-name { font-size:var(--text-sm); font-weight:500; color:var(--color-text-secondary); }
.icon-btn { width:32px; height:32px; border-radius:50%; border:1px solid var(--color-border);
  background:var(--color-bg-secondary); display:flex; align-items:center;
  justify-content:center; cursor:pointer; color:var(--color-text-secondary); }
.icon-btn:hover { background:var(--color-bg-hover); color:var(--color-primary); }

/* ============================================================
   TRAFFIC-LIGHT CARDS (Semáforo)
   ============================================================ */
.semaforo-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-bottom:24px; }
.semaforo-card { background:var(--color-bg-secondary); border-radius:var(--radius-card);
  padding:20px; border:1px solid var(--color-border-light);
  transition:border-color 0.15s, box-shadow 0.15s; }
.semaforo-card:hover { box-shadow:var(--shadow-md); }
.semaforo-card.critical { border-left:4px solid var(--color-error); }
.semaforo-card.warning { border-left:4px solid var(--color-warning); }
.semaforo-card.success { border-left:4px solid var(--color-success); }
.semaforo-header { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.semaforo-dot { width:12px; height:12px; border-radius:50%; flex-shrink:0; }
.semaforo-dot.red { background:var(--color-error); box-shadow:0 0 8px var(--color-error); }
.semaforo-dot.yellow { background:var(--color-warning); box-shadow:0 0 8px var(--color-warning); }
.semaforo-dot.green { background:var(--color-success); box-shadow:0 0 8px var(--color-success); }
.semaforo-title { font-size:var(--text-md); font-weight:600; color:var(--color-text-secondary); }
.semaforo-value { font-size:var(--text-4xl); font-weight:800;
  font-variant-numeric:tabular-nums; margin-bottom:4px; }
.semaforo-value.red { color:var(--color-error); }
.semaforo-value.yellow { color:var(--color-warning); }
.semaforo-value.green { color:var(--color-success); }
.semaforo-desc { font-size:var(--text-sm); color:var(--color-text-muted); }

/* ============================================================
   SECTION CARDS
   ============================================================ */
.section { background:var(--color-bg-secondary); border:1px solid var(--color-border-light);
  border-radius:var(--radius-card); padding:22px; margin-bottom:20px; }
.section-header { display:flex; align-items:center; gap:10px; margin-bottom:16px;
  padding-bottom:12px; border-bottom:1px solid var(--color-border-light); }
.section-icon { width:30px; height:30px; border-radius:8px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.section-icon.primary { background:var(--color-primary-bg); color:var(--color-primary);
  border:1px solid var(--color-primary-border); }
.section-icon.info { background:var(--color-info-bg); color:var(--color-info);
  border:1px solid var(--color-info-border); }
.section-icon.warning { background:var(--color-warning-bg); color:var(--color-warning);
  border:1px solid var(--color-warning-border); }
.section-icon.success { background:var(--color-success-bg); color:var(--color-success);
  border:1px solid var(--color-success-border); }
.section-title { font-size:var(--text-2xl); font-weight:600; flex:1; }

/* ============================================================
   SERVICE STATUS TABLE
   ============================================================ */
.service-table { width:100%; border-collapse:collapse; }
.service-table th { text-align:left; font-size:var(--text-xs); font-weight:600;
  text-transform:uppercase; letter-spacing:0.06em; color:var(--color-text-muted);
  padding:8px 12px; border-bottom:1px solid var(--color-border-light); }
.service-table td { padding:12px; border-bottom:1px solid var(--color-border-light);
  font-size:var(--text-md); vertical-align:middle; }
.service-table tr:last-child td { border-bottom:none; }
.service-table tr:hover td { background:var(--color-bg-hover); }
.service-name { display:flex; align-items:center; gap:10px; font-weight:500; }
.service-icon { width:28px; height:28px; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  background:var(--color-bg-tertiary); color:var(--color-text-secondary); }
.dot-count { display:inline-flex; align-items:center; gap:5px; }
.dot-count .dot { width:9px; height:9px; border-radius:50%; }
.dot-count .dot.green { background:var(--color-success); }
.dot-count .dot.yellow { background:var(--color-warning); }
.dot-count .dot.red { background:var(--color-error); }
.dot-count span { font-weight:600; font-variant-numeric:tabular-nums; min-width:20px; }
.na-badge { font-size:var(--text-xs); color:var(--color-text-muted);
  background:var(--color-bg-tertiary); padding:2px 8px; border-radius:999px; }

/* ============================================================
   EVENTS FEED
   ============================================================ */
.events-list { display:flex; flex-direction:column; gap:8px; }
.event-item { display:flex; align-items:flex-start; gap:10px; padding:10px 12px;
  border-radius:var(--radius-sm); background:var(--color-bg-tertiary); }
.event-dot { width:8px; height:8px; border-radius:50%; margin-top:6px; flex-shrink:0; }
.event-dot.green { background:var(--color-success); }
.event-dot.yellow { background:var(--color-warning); }
.event-dot.red { background:var(--color-error); }
.event-content { flex:1; }
.event-text { font-size:var(--text-md); color:var(--color-text); }
.event-time { font-size:var(--text-xs); color:var(--color-text-muted); margin-top:2px; }

/* ============================================================
   MAINTENANCE WINDOWS
   ============================================================ */
.mw-list { display:flex; flex-direction:column; gap:10px; }
.mw-item { display:flex; align-items:center; gap:12px; padding:12px;
  border-radius:var(--radius-sm); border:1px solid var(--color-border-light); }
.mw-icon { width:36px; height:36px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:var(--color-info-bg); color:var(--color-info);
  border:1px solid var(--color-info-border); }
.mw-details { flex:1; }
.mw-name { font-weight:600; font-size:var(--text-md); }
.mw-meta { font-size:var(--text-sm); color:var(--color-text-muted); }
.mw-badge { font-size:var(--text-xs); font-weight:600; padding:3px 10px;
  border-radius:999px; }
.mw-badge.active { background:var(--color-success-bg); color:var(--color-success);
  border:1px solid var(--color-success-border); }
.mw-badge.none { background:var(--color-bg-tertiary); color:var(--color-text-muted);
  border:1px solid var(--color-border-light); }

/* ============================================================
   AI CHAT WIDGET
   ============================================================ */
.chat-widget { display:flex; flex-direction:column; gap:12px; max-height:400px; overflow-y:auto; }
.chat-message { display:flex; gap:10px; }
.chat-avatar { width:28px; height:28px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:var(--text-xs); font-weight:700; }
.chat-avatar.bot { background:var(--color-primary-bg); color:var(--color-primary);
  border:1px solid var(--color-primary-border); }
.chat-avatar.user { background:var(--color-info-bg); color:var(--color-info);
  border:1px solid var(--color-info-border); }
.chat-bubble { background:var(--color-bg-tertiary); border-radius:var(--radius-md);
  padding:12px 14px; font-size:var(--text-md); color:var(--color-text);
  border:1px solid var(--color-border-light); max-width:85%; line-height:1.5; }
.chat-bubble.loading { opacity:0.6; animation:pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity:0.6; } 50% { opacity:1; } }
.chat-bubble code { background:var(--color-bg-hover); padding:1px 4px; border-radius:3px;
  font-family:var(--font-mono); font-size:var(--text-sm); }
.chat-input-wrap { display:flex; gap:8px; margin-top:8px; }
.chat-input { flex:1; background:var(--color-bg-tertiary); border:1px solid var(--color-border);
  border-radius:var(--radius-md); padding:10px 14px; font-size:var(--text-md);
  color:var(--color-text); outline:none; font-family:var(--font-sans); }
.chat-input:focus { border-color:var(--color-primary); }
.chat-input::placeholder { color:var(--color-text-muted); }
.chat-input:disabled { opacity:0.5; cursor:not-allowed; }
.chat-send { width:36px; height:36px; border-radius:var(--radius-sm);
  background:var(--color-primary); border:none; color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer; }
.chat-send:hover { background:var(--color-primary-light); }

/* ============================================================
   TWO-COLUMN LAYOUT
   ============================================================ */
.two-col { display:grid; grid-template-columns:1.4fr 1fr; gap:20px; margin-bottom:20px; }

/* ============================================================
   LOADING STATE
   ============================================================ */
.loading { position:relative; }
.loading::after {
  content:''; position:absolute; inset:0; background:var(--color-bg-secondary);
  opacity:0.7; border-radius:inherit;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .two-col { grid-template-columns:1fr; }
  .semaforo-grid { grid-template-columns:1fr; }
  .sidebar { display:none; }
  .content-wrapper { margin-left:0; }
}