/* =========================================================
   PCM AI Industrial Intelligence — Design System
   Industrial · Premium · Minimalista · Tecnológico
   ========================================================= */

:root{
  --bg: #f2f4f7;
  --bg-soft: #eaedf2;
  --surface: #ffffff;
  --surface-alt: #f7f8fa;
  --border: #e3e7ee;
  --border-strong: #d3d9e3;

  --ink: #101a2b;
  --ink-soft: #4b5768;
  --ink-faint: #8a94a6;

  --navy: #0b2036;
  --navy-soft: #12314f;
  --navy-line: #1d3d5c;

  --primary: #1c5fd6;
  --primary-dark: #123f94;
  --primary-soft: #e8f0fe;

  --accent: #0ea5b0;
  --accent-soft: #e3f7f8;

  --ok: #178a4c;
  --ok-soft: #e5f6ec;
  --warn: #b9770e;
  --warn-soft: #fdf1de;
  --danger: #c22b3a;
  --danger-soft: #fbe9eb;

  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;

  --shadow-sm: 0 1px 2px rgba(16,26,43,0.05), 0 1px 1px rgba(16,26,43,0.04);
  --shadow-md: 0 6px 20px -4px rgba(16,26,43,0.10), 0 2px 6px -2px rgba(16,26,43,0.06);
  --shadow-lg: 0 20px 45px -12px rgba(16,26,43,0.18);

  --sidebar-w: 264px;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }

body{
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5{
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
}

a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor: pointer; }
::selection{ background: var(--primary-soft); }

/* ---------- App shell ---------- */
.app-shell{ display:flex; min-height: 100vh; }

/* ---------- Sidebar ---------- */
.sidebar{
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: linear-gradient(180deg,var(--navy) 0%, #091a2c 100%);
  color: #cfe0f2;
  display:flex;
  flex-direction:column;
  position: fixed;
  top:0; left:0; bottom:0;
  z-index: 40;
}
.sidebar-brand{
  display:flex; align-items:center; gap:12px;
  padding: 24px 22px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sidebar-brand .mark{
  width:38px; height:38px; border-radius:10px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk',sans-serif; font-weight:700; color:#fff; font-size:15px;
  box-shadow: 0 4px 14px rgba(28,95,214,0.45);
  flex-shrink:0;
}
.sidebar-brand .name{ font-family:'Space Grotesk',sans-serif; font-weight:700; color:#fff; font-size:15.5px; line-height:1.2; }
.sidebar-brand .sub{ font-size:10.5px; color:#89a3bd; letter-spacing:.04em; text-transform:uppercase; margin-top:2px; }

.sidebar-nav{ flex:1; padding: 16px 12px; overflow-y:auto; }
.sidebar-section-label{
  font-size: 10.5px; text-transform: uppercase; letter-spacing:.08em;
  color:#5f7c98; padding: 14px 12px 6px;
}
.nav-item{
  display:flex; align-items:center; gap:12px;
  padding: 10px 12px; border-radius: 10px;
  color:#b9cbe0; font-size:13.8px; font-weight:500;
  margin-bottom: 2px; transition: all .15s ease;
  position: relative;
}
.nav-item i{ width:18px; text-align:center; font-size:14.5px; color:#7f9ab6; }
.nav-item:hover{ background: rgba(255,255,255,0.06); color:#fff; }
.nav-item:hover i{ color:#fff; }
.nav-item.active{
  background: linear-gradient(90deg, rgba(28,95,214,0.35), rgba(28,95,214,0.08));
  color:#fff;
  box-shadow: inset 0 0 0 1px rgba(28,95,214,0.35);
}
.nav-item.active i{ color:#5fa2ff; }
.nav-item.active::before{
  content:''; position:absolute; left:-12px; top:8px; bottom:8px; width:3px; border-radius:3px;
  background: linear-gradient(180deg, var(--primary), var(--accent));
}
.nav-item .badge-mini{
  margin-left:auto; background: rgba(255,255,255,0.12); color:#dbe7f5;
  font-size: 10.5px; padding: 1px 7px; border-radius: 20px; font-weight:600;
}

.sidebar-foot{
  padding: 14px 18px 20px; border-top:1px solid rgba(255,255,255,0.08);
  font-size:11.5px; color:#607b96;
}
.sidebar-foot .odoo-pill{
  display:flex; align-items:center; gap:8px; background: rgba(255,255,255,0.05);
  padding:9px 11px; border-radius:10px; margin-bottom:10px;
}
.odoo-dot{ width:7px; height:7px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,0.25); }

/* ---------- Main area ---------- */
.main-area{ margin-left: var(--sidebar-w); flex:1; display:flex; flex-direction:column; min-width:0; }

.topbar{
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 16px 32px;
  display:flex; align-items:center; justify-content:space-between;
  position: sticky; top:0; z-index: 30;
}
.topbar-title{ display:flex; flex-direction:column; gap:2px; }
.topbar-title .crumb{ font-size:11.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.06em; font-weight:600; }
.topbar-title h1{ font-size: 21px; font-weight:700; }
.topbar-right{ display:flex; align-items:center; gap:14px; }
.topbar-search{
  display:flex; align-items:center; gap:8px; background: var(--surface-alt);
  border:1px solid var(--border); border-radius:10px; padding:8px 12px; width:260px;
  color: var(--ink-faint); font-size:13px;
}
.topbar-search i{ font-size:12px; }
.topbar-pill{
  display:flex; align-items:center; gap:7px; background:var(--ok-soft); color:var(--ok);
  padding:7px 12px; border-radius:20px; font-size:12px; font-weight:600;
}
.avatar-chip{
  display:flex; align-items:center; gap:9px; padding:5px 12px 5px 5px;
  border-radius: 30px; background: var(--surface-alt); border:1px solid var(--border);
}
.avatar-chip .av{
  width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,#1c5fd6,#0ea5b0);
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:700;
}
.avatar-chip .who{ font-size:12.5px; font-weight:600; line-height:1.1; }
.avatar-chip .role{ font-size:10.5px; color:var(--ink-faint); }

.content{ padding: 28px 32px 60px; max-width: 1440px; width:100%; margin:0 auto; }

/* ---------- KPI strip ---------- */
.kpi-strip{
  display:grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 26px;
}
@media (max-width: 1200px){ .kpi-strip{ grid-template-columns: repeat(2,1fr); } }
.kpi-card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-md);
  padding: 18px 20px; box-shadow: var(--shadow-sm); position:relative; overflow:hidden;
}
.kpi-card .kpi-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.kpi-card .kpi-icon{
  width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:14px;
}
.kpi-card .kpi-label{ font-size:12px; color:var(--ink-soft); font-weight:600; }
.kpi-card .kpi-value{ font-size: 26px; font-weight:700; font-family:'Space Grotesk',sans-serif; }
.kpi-card .kpi-trend{ font-size: 11.5px; margin-top:6px; font-weight:600; }
.kpi-card .kpi-trend.up{ color: var(--danger); }
.kpi-card .kpi-trend.down{ color: var(--ok); }
.kpi-card .kpi-trend.flat{ color: var(--ink-faint); }

/* ---------- Cards / sections ---------- */
.card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg);
  padding: 22px 24px; box-shadow: var(--shadow-sm);
}
.card + .card{ margin-top: 20px; }
.section-head{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:16px; gap:16px; }
.section-head h2{ font-size:17px; font-weight:700; }
.section-head p{ font-size:12.8px; color:var(--ink-soft); margin-top:3px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em; color:var(--primary); margin-bottom:8px;
}
.eyebrow i{ font-size:10px; }

.grid-2{ display:grid; grid-template-columns: 1.3fr 1fr; gap:20px; align-items:start; }
.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
.grid-4{ display:grid; grid-template-columns: repeat(4,1fr); gap:16px; }
@media (max-width:1100px){ .grid-2,.grid-3,.grid-4{ grid-template-columns: 1fr; } }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  border-radius: 10px; padding: 10px 18px; font-size:13.5px; font-weight:600;
  border: 1px solid transparent; transition: all .15s ease; white-space:nowrap;
}
.btn-primary{ background: linear-gradient(135deg,var(--primary),var(--primary-dark)); color:#fff; box-shadow: 0 6px 16px -4px rgba(28,95,214,0.5); }
.btn-primary:hover{ filter:brightness(1.07); transform: translateY(-1px); }
.btn-accent{ background: linear-gradient(135deg,#0ea5b0,#0b7d86); color:#fff; box-shadow:0 6px 16px -4px rgba(14,165,176,0.45); }
.btn-outline{ background: var(--surface); border-color: var(--border-strong); color: var(--ink); }
.btn-outline:hover{ border-color: var(--primary); color:var(--primary); }
.btn-ghost{ background: transparent; color: var(--ink-soft); }
.btn-ghost:hover{ background: var(--surface-alt); }
.btn-sm{ padding:7px 13px; font-size:12.5px; border-radius:8px; }
.btn:disabled{ opacity:.55; cursor:not-allowed; }
.btn-block{ width:100%; }

/* ---------- Badges / tags ---------- */
.tag{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:20px; }
.tag-ok{ background:var(--ok-soft); color:var(--ok); }
.tag-warn{ background:var(--warn-soft); color:var(--warn); }
.tag-danger{ background:var(--danger-soft); color:var(--danger); }
.tag-primary{ background:var(--primary-soft); color:var(--primary-dark); }
.tag-neutral{ background:var(--surface-alt); color:var(--ink-soft); border:1px solid var(--border); }

/* ---------- Tables ---------- */
table.data-table{ width:100%; border-collapse: collapse; font-size:13.2px; }
table.data-table th{
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-faint); font-weight:700; padding:9px 12px; border-bottom:1px solid var(--border);
  background: var(--surface-alt);
}
table.data-table td{ padding: 12px; border-bottom:1px solid var(--border); vertical-align:middle; }
table.data-table tr:last-child td{ border-bottom:none; }
table.data-table tbody tr:hover{ background: var(--surface-alt); }
.mono{ font-family: 'SFMono-Regular', Consolas, monospace; font-size:12.5px; }

/* ---------- Forms ---------- */
.field-label{ font-size:12px; font-weight:700; color:var(--ink-soft); margin-bottom:6px; display:block; }
.field-input, select.field-input, textarea.field-input{
  width:100%; border:1px solid var(--border-strong); border-radius:9px; padding:10px 12px;
  font-size:13.5px; font-family:inherit; background:var(--surface); color: var(--ink);
}
.field-input:focus{ outline:none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.field-group{ margin-bottom:14px; }

/* ---------- Utility ---------- */
.flex{ display:flex; } .items-center{ align-items:center; } .justify-between{ justify-content:space-between; }
.gap-6{ gap:6px;} .gap-8{gap:8px;} .gap-10{gap:10px;} .gap-12{gap:12px;} .gap-16{gap:16px;} .gap-20{gap:20px;}
.mt-8{margin-top:8px;} .mt-12{margin-top:12px;} .mt-16{margin-top:16px;} .mt-20{margin-top:20px;} .mt-24{margin-top:24px;}
.mb-8{margin-bottom:8px;} .mb-12{margin-bottom:12px;} .mb-16{margin-bottom:16px;}
.text-soft{ color:var(--ink-soft); } .text-faint{ color:var(--ink-faint); }
.text-sm{ font-size:12.5px; } .text-xs{ font-size:11px; }
.fw-700{font-weight:700;} .fw-600{font-weight:600;}
.divider{ height:1px; background:var(--border); margin: 16px 0; }
.pill-icon{
  width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;
}

/* ---------- Flow diagram (PLANTA -> IA) ---------- */
.flow-strip{
  display:flex; align-items:center; gap:0; overflow-x:auto; padding: 6px 2px;
}
.flow-node{
  display:flex; flex-direction:column; align-items:center; gap:8px; min-width:128px; text-align:center;
}
.flow-node .fn-icon{
  width:52px; height:52px; border-radius:14px; background: var(--surface-alt); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:19px; color:var(--primary);
  box-shadow: var(--shadow-sm);
}
.flow-node .fn-label{ font-size:12px; font-weight:700; }
.flow-node .fn-sub{ font-size:10.5px; color:var(--ink-faint); }
.flow-arrow{ color: var(--ink-faint); font-size:16px; padding: 0 10px; flex-shrink:0; }

/* ---------- Loading / scanning animation ---------- */
.scan-overlay{
  position:absolute; inset:0; background: rgba(11,32,54,0.72); backdrop-filter: blur(2px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  border-radius: inherit; color:#fff; z-index:5;
}
.scan-line{
  position:absolute; left:0; right:0; height: 3px; background: linear-gradient(90deg, transparent, #4fd1de, transparent);
  box-shadow: 0 0 16px 2px rgba(79,209,222,0.8);
  animation: scan-move 1.6s linear infinite;
}
@keyframes scan-move{ 0%{ top:4%; } 50%{ top:94%; } 100%{ top:4%; } }
.spinner-ring{
  width:38px; height:38px; border-radius:50%; border:3px solid rgba(255,255,255,0.25); border-top-color:#4fd1de;
  animation: spin 0.8s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }
.scan-text{ font-size:13px; font-weight:600; letter-spacing:.02em; }
.scan-text small{ display:block; font-weight:400; color:#a9c4dd; font-size:11px; margin-top:3px; }

/* ---------- Image inspection stage ---------- */
.inspect-stage{ position:relative; border-radius: var(--radius-md); overflow:hidden; background:#0b1a2b; }
.inspect-stage img{ width:100%; display:block; }
.bbox{
  position:absolute; border: 2px solid; border-radius:4px;
  box-shadow: 0 0 0 3000px rgba(0,0,0,0) ;
}
.bbox-label{
  position:absolute; top:-24px; left:-2px; font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:5px 5px 5px 0;
  white-space:nowrap; color:#fff;
}
.bbox.sev-alta{ border-color:#ef4665; }
.bbox.sev-alta .bbox-label{ background:#ef4665; }
.bbox.sev-media{ border-color:#f5a524; }
.bbox.sev-media .bbox-label{ background:#f5a524; }
.bbox.sev-baja{ border-color:#4fd1de; }
.bbox.sev-baja .bbox-label{ background:#0ea5b0; }

/* ---------- Chat (Copiloto) ---------- */
.chat-shell{ display:flex; flex-direction:column; height: 100%; }
.chat-scroll{ flex:1; overflow-y:auto; padding: 4px 4px 12px; display:flex; flex-direction:column; gap:16px; }
.msg-row{ display:flex; gap:10px; max-width: 92%; }
.msg-row.user{ align-self:flex-end; flex-direction:row-reverse; }
.msg-avatar{
  width:32px; height:32px; border-radius:9px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-size:13px; color:#fff;
}
.msg-avatar.ai{ background: linear-gradient(135deg,#1c5fd6,#0ea5b0); }
.msg-avatar.user{ background: var(--ink-soft); }
.msg-bubble{
  background: var(--surface); border:1px solid var(--border); border-radius: 14px; padding: 13px 16px;
  font-size: 13.6px; box-shadow: var(--shadow-sm);
}
.msg-row.user .msg-bubble{ background: var(--primary); color:#fff; border-color:transparent; }
.msg-row.ai .msg-bubble{ max-width:640px; }

.source-chip{
  display:inline-flex; align-items:center; gap:6px; background: var(--surface-alt); border:1px solid var(--border);
  border-radius:8px; padding:6px 10px; font-size:11.5px; font-weight:600; color:var(--ink-soft);
}
.source-chip i{ color: var(--primary); }

.ref-card{ border:1px solid var(--border); border-radius: 14px; padding:16px; background: var(--surface-alt); }
.quick-btn{
  border:1px solid var(--border-strong); background:var(--surface); border-radius: 20px; padding: 8px 14px;
  font-size: 12.5px; font-weight:600; color: var(--ink-soft); display:inline-flex; align-items:center; gap:7px;
  transition: all .15s;
}
.quick-btn:hover{ border-color: var(--primary); color:var(--primary); background: var(--primary-soft); }

.chat-input-bar{
  display:flex; align-items:center; gap:10px; border:1px solid var(--border-strong); border-radius:14px;
  padding: 8px 8px 8px 16px; background: var(--surface); box-shadow: var(--shadow-sm);
}
.chat-input-bar input{ flex:1; border:none; outline:none; font-size:14px; font-family:inherit; background:transparent; }
.send-btn{
  width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:#fff; border:none; display:flex; align-items:center; justify-content:center; font-size:14px;
}

/* ---------- Alerts (predictive) ---------- */
.alert-card{ border-radius: var(--radius-lg); border:1px solid var(--border); overflow:hidden; background:var(--surface); }
.alert-head{ padding:16px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.alert-head.risk-alto{ background: linear-gradient(90deg, rgba(194,43,58,0.09), transparent); }
.alert-head.risk-medio{ background: linear-gradient(90deg, rgba(185,119,14,0.10), transparent); }
.risk-badge{ display:flex; flex-direction:column; align-items:flex-end; }
.risk-badge .rb-value{ font-size:22px; font-weight:800; font-family:'Space Grotesk',sans-serif; }
.risk-ring{ width:56px; height:56px; }

.timeline-dot{ width:8px; height:8px; border-radius:50%; margin-top:6px; flex-shrink:0; }

/* ---------- Modal ---------- */
.modal-backdrop{
  position: fixed; inset:0; background: rgba(11,20,32,0.55); backdrop-filter: blur(3px);
  display:flex; align-items:center; justify-content:center; z-index:100; padding: 24px;
}
.modal-panel{
  background: var(--surface); border-radius: var(--radius-lg); max-width: 920px; width:100%;
  max-height: 88vh; overflow-y:auto; box-shadow: var(--shadow-lg); padding: 26px 28px;
}
.modal-close{
  width:32px;height:32px;border-radius:9px;background:var(--surface-alt);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--ink-soft);
}
.modal-close:hover{ color: var(--danger); }

/* ---------- Toast ---------- */
.toast{
  position: fixed; bottom: 26px; right: 26px; z-index: 200;
  background: var(--navy); color:#fff; padding: 14px 20px; border-radius: 12px;
  display:flex; align-items:center; gap:12px; box-shadow: var(--shadow-lg);
  font-size:13.5px; font-weight:600; max-width: 420px;
  transform: translateY(20px); opacity:0; transition: all .25s ease;
}
.toast.show{ transform: translateY(0); opacity:1; }
.toast i{ color:#4fd1de; font-size:16px; }

/* ---------- Misc ---------- */
.progress-track{ height:8px; border-radius:6px; background: var(--surface-alt); overflow:hidden; border:1px solid var(--border); }
.progress-fill{ height:100%; border-radius:6px; }
.hairline-list li{ padding: 10px 0; border-bottom: 1px solid var(--border); font-size:13.3px; }
.hairline-list li:last-child{ border-bottom:none; }

.filters-bar{ display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.filters-bar .field-group{ min-width:150px; margin-bottom:0; flex:1; }

.dot-legend{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-soft); }
.dot-legend .dot{ width:9px; height:9px; border-radius:50%; }

.clickable{ cursor:pointer; }
.hover-lift{ transition: all .15s ease; }
.hover-lift:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); }

.upload-zone{
  border: 2px dashed var(--border-strong); border-radius: var(--radius-md); padding: 30px;
  text-align:center; color:var(--ink-soft); background: var(--surface-alt); transition: all .15s;
}
.upload-zone.drag{ border-color: var(--primary); background: var(--primary-soft); }

code.inline-src{
  background: var(--surface-alt); border:1px solid var(--border); padding:1px 6px; border-radius:5px; font-size:11.8px;
}