:root{
  --bg: #0A1F19;
  --surface: #15352B;
  --surface-2: #1B3F33;
  --line: #2B5142;
  --line-soft: #1E3E32;
  --text: #E9F2EC;
  --text-muted: #9FBCAE;
  --text-faint: #6E8C7E;
  --copper: #C9803F;
  --copper-bright: #E8A462;
  --signal: #6FE3B4;
  --red: #D9705A;
  --amber: #D9A441;
  --radius: 4px;
  --mono: 'IBM Plex Mono', monospace;
  --sans: 'IBM Plex Sans', sans-serif;
}
*{ box-sizing:border-box; }
body{ margin:0; background: var(--bg); color: var(--text); font-family: var(--sans); line-height:1.6; font-size:14px; }
a{ color: var(--copper-bright); text-decoration:none; }
a:hover{ text-decoration:underline; }
:focus-visible{ outline: 2px solid var(--signal); outline-offset:2px; }

.app{ display:flex; min-height:100vh; }

/* ---------- SIDEBAR ---------- */
.sidebar{ width: 232px; flex-shrink:0; background: var(--surface); border-right:1px solid var(--line); padding: 22px 16px; display:flex; flex-direction:column; }
.sidebar .brand{ font-family: var(--mono); font-size:14px; color: var(--text); margin-bottom: 30px; padding: 0 8px; }
.sidebar .brand span{ color: var(--copper-bright); }
.sidebar nav{ display:flex; flex-direction:column; gap:2px; flex-grow:1; }
.sidebar nav a{ color: var(--text-muted); font-size:13.5px; padding: 10px 12px; border-radius: var(--radius); display:flex; align-items:center; gap:10px; }
.sidebar nav a:hover{ background: var(--surface-2); color: var(--text); text-decoration:none; }
.sidebar nav a.active{ background: var(--surface-2); color: var(--copper-bright); font-weight:600; }
.sidebar .user-box{ border-top:1px solid var(--line); padding-top:14px; margin-top:14px; font-size:12px; color: var(--text-faint); }
.sidebar .user-box .name{ color: var(--text); font-weight:600; display:block; margin-bottom:6px; }
.sidebar .user-box a{ font-family: var(--mono); font-size:11.5px; }

/* ---------- MAIN ---------- */
.main{ flex-grow:1; padding: 30px 40px; max-width: 1180px; }
.page-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom: 26px; flex-wrap:wrap; gap:14px; }
.page-head h1{ font-family: var(--mono); font-size: 22px; margin:0 0 6px; }
.page-head p{ color: var(--text-muted); font-size:13px; margin:0; }
.eyebrow{ font-family: var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color: var(--text-faint); margin:0 0 6px; }

.btn{ font-family: var(--mono); font-size:12.5px; padding:9px 18px; border-radius: var(--radius); border:1px solid var(--copper); background: var(--copper); color:#0A1F19; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.btn:hover{ background: var(--copper-bright); border-color: var(--copper-bright); text-decoration:none; }
.btn.ghost{ background:transparent; color: var(--text-muted); border-color: var(--line); }
.btn.ghost:hover{ border-color: var(--copper); color: var(--copper-bright); }
.btn.danger{ background: var(--red); border-color: var(--red); color:#fff; }
.btn.danger:hover{ background:#c15f4b; border-color:#c15f4b; }
.btn.small{ padding:6px 12px; font-size:11.5px; }

/* ---------- CARDS / STATS ---------- */
.stats-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:16px; margin-bottom: 30px; }
@media (max-width: 900px){ .stats-grid{ grid-template-columns: repeat(2,1fr); } }
.stat-card{ background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.stat-card .num{ font-family: var(--mono); font-weight:700; font-size:26px; color: var(--copper-bright); }
.stat-card .lbl{ font-size:11.5px; color: var(--text-faint); text-transform:uppercase; letter-spacing:0.04em; margin-top:4px; }

.panel{ background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; margin-bottom:22px; }
.panel h2, .panel h3{ font-family: var(--mono); font-size:14px; margin:0 0 16px; text-transform:uppercase; letter-spacing:0.04em; color: var(--text-faint); }

/* ---------- TABLE ---------- */
table{ width:100%; border-collapse: collapse; font-size:13px; }
th{ text-align:left; font-family: var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0.04em; color: var(--text-faint); padding: 10px 12px; border-bottom:1px solid var(--line); }
td{ padding: 12px; border-bottom:1px solid var(--line-soft); vertical-align: middle; }
tr:hover td{ background: var(--surface-2); }
.empty-row td{ color: var(--text-faint); text-align:center; padding: 30px; }

/* ---------- BADGES ---------- */
.badge{ font-family: var(--mono); font-size:10.5px; padding:3px 10px; border-radius:12px; text-transform:uppercase; letter-spacing:0.03em; display:inline-block; }
.badge.status-planificada{ background: rgba(159,188,174,0.15); color: var(--text-muted); }
.badge.status-en_curso{ background: rgba(201,128,63,0.18); color: var(--copper-bright); }
.badge.status-completada{ background: rgba(111,227,180,0.15); color: var(--signal); }
.badge.status-cerrada{ background: rgba(110,140,126,0.2); color: var(--text-faint); }
.badge.status-abierto{ background: rgba(217,112,90,0.18); color: var(--red); }
.badge.status-en_tratamiento{ background: rgba(217,164,65,0.18); color: var(--amber); }
.badge.status-pendiente{ background: rgba(217,112,90,0.18); color: var(--red); }
.badge.status-en_progreso{ background: rgba(217,164,65,0.18); color: var(--amber); }
.badge.status-completada, .badge.status-verificada{ background: rgba(111,227,180,0.15); color: var(--signal); }
.badge.type-no_conformidad_mayor{ background: rgba(217,112,90,0.22); color: var(--red); }
.badge.type-no_conformidad_menor{ background: rgba(217,164,65,0.2); color: var(--amber); }
.badge.type-observacion{ background: rgba(159,188,174,0.15); color: var(--text-muted); }
.badge.type-oportunidad_mejora{ background: rgba(111,227,180,0.15); color: var(--signal); }

/* ---------- FORMS ---------- */
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
@media (max-width: 700px){ .form-grid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.field.full{ grid-column:1/-1; }
.field label{ font-family: var(--mono); font-size:11px; color: var(--text-faint); text-transform:uppercase; letter-spacing:0.04em; }
.field input, .field select, .field textarea{
  font-family: var(--sans); font-size:13.5px; color: var(--text);
  background: var(--bg); border:1px solid var(--line); border-radius: var(--radius); padding:9px 11px; resize:vertical;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color: var(--copper); }
.field textarea{ min-height:80px; }
.form-actions{ display:flex; gap:10px; margin-top: 6px; }

.alert{ padding: 12px 16px; border-radius: var(--radius); font-size:13px; margin-bottom:20px; }
.alert.error{ background: rgba(217,112,90,0.12); border:1px solid var(--red); color:#F3B7A9; }
.alert.success{ background: rgba(111,227,180,0.1); border:1px solid var(--signal); color: var(--signal); }

/* ---------- LOGIN ---------- */
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding: 20px; }
.login-card{ width:100%; max-width: 380px; background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); padding: 34px 30px; }
.login-card .brand{ font-family: var(--mono); text-align:center; font-size:16px; margin-bottom:26px; }
.login-card .brand span{ color: var(--copper-bright); }

/* ---------- CHECKLIST (audit view) ---------- */
.domain-block{ margin-bottom: 26px; }
.domain-block h4{ font-family: var(--mono); font-size:13px; color: var(--copper-bright); margin: 0 0 2px; }
.domain-block .ref{ font-size:11px; color: var(--text-faint); font-family: var(--mono); margin-bottom:12px; }
.check-item{ border:1px solid var(--line); border-radius: var(--radius); padding:14px 16px; margin-bottom:10px; }
.check-item p{ margin:0 0 10px; font-size:13px; }
.scale-row{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom: 8px; }
.scale-row label{ font-family: var(--mono); font-size:11px; padding:6px 10px; border:1px solid var(--line); border-radius: var(--radius); cursor:pointer; color: var(--text-muted); }
.scale-row input{ display:none; }
.scale-row input:checked + label{ background: var(--copper); border-color: var(--copper); color:#0A1F19; font-weight:600; }
.check-item .mini-fields{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-top:8px; }
@media (max-width: 700px){ .check-item .mini-fields{ grid-template-columns:1fr; } }
.check-item .mini-fields input{ font-size:12px; padding:6px 8px; }

.tag-na{ font-family: var(--mono); font-size:11px; color: var(--text-faint); }