:root {
  --bg: #0f1117;
  --surface: #181c27;
  --surface-2: #1e2333;
  --border: #2a3050;
  --accent: #00d4aa;
  --orange: #ff6b35;
  --warn: #ffb020;
  --text: #e2e8f0;
  --muted: #64748b;
  --green: #22c55e;
  --red: #ef4444;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --sans: "IBM Plex Sans", Inter, system-ui, -apple-system, sans-serif;
}

html { background: var(--bg); }
body.sepak-app {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  min-height: 100vh;
  padding: 0 0 60px;
}

.sepak-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 14px 32px;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 53px;
}
.sepak-header .brand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  font: 800 13px/1 'League Spartan', 'Arial Black', Arial, sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.sepak-header .brand::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 26px;
  background: url('/static/logo-sepak-isotipo.png') no-repeat center/contain;
  flex-shrink: 0;
}
.sepak-header .divider { color: var(--border); font-size: 20px; }
.sepak-header h1 { margin: 0; font-size: 16px; font-weight: 600; color: var(--text); }
.sepak-header .header-actions { margin-left: auto; display: flex; gap: 8px; }
.page-actions { display: flex; align-items: center; gap: 8px; }
.back-link { display: inline-block; margin-bottom: 10px; font-size: 12px; font-weight: 700; text-decoration: none; }
.module-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 18px;
}
.module-nav a {
  min-height: 34px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  color: #a8b3c7;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  border-radius: 6px;
}
.module-nav a:hover { color: var(--text); background: var(--surface-2); }
.module-nav a.active { color: var(--bg); background: var(--accent); }

.compact-details { padding: 0 !important; overflow: hidden; }
.compact-details > summary {
  min-height: 48px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  color: var(--text);
  font-weight: 700;
  list-style: none;
}
.compact-details > summary::-webkit-details-marker { display: none; }
.compact-details > summary::after { content: "+"; color: var(--accent); font: 800 18px var(--mono); }
.compact-details[open] > summary { border-bottom: 1px solid var(--border); }
.compact-details[open] > summary::after { content: "−"; }
.compact-details > :not(summary) { margin: 14px; }

body.sepak-app .page-shell { max-width: 1120px; margin: 0 auto; padding: 28px 24px; }
body.sepak-app .page-header { max-width: none; margin: 0 0 20px; }
body.sepak-app .page-header h1 { color: var(--text); }
body.sepak-app .page-header > a:first-child { color: var(--accent); }

body.sepak-app .card,
body.sepak-app .tabla-wrap,
body.sepak-app .panel,
body.sepak-app .sheet-ui,
body.sepak-app .urgente-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: none;
  color: var(--text);
}
body.sepak-app .card { max-width: none; }
body.sepak-app .card-title,
body.sepak-app .panel h2 {
  color: var(--accent);
  border-color: var(--border);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 2px;
}
body.sepak-app .client-context,
body.sepak-app .import-box,
body.sepak-app .readonly-field input,
body.sepak-app .readonly-field textarea {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}
body.sepak-app .client-context h2 { color: var(--text); }
body.sepak-app .client-context p,
body.sepak-app .hint,
body.sepak-app .urgente-hint { color: var(--muted); }

body.sepak-app .field label { color: #a8b3c7; font-family: var(--mono); font-size: 10px; letter-spacing: .6px; text-transform: uppercase; }
body.sepak-app input,
body.sepak-app select,
body.sepak-app textarea {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text);
  font-family: var(--sans);
}
body.sepak-app input:focus,
body.sepak-app select:focus,
body.sepak-app textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,212,170,.1); }
body.sepak-app input[readonly], body.sepak-app textarea[readonly] { background: var(--surface-2); color: var(--text); }
body.sepak-app input[type="checkbox"] { accent-color: var(--accent); }
body.sepak-app select option { background: var(--surface); color: var(--text); }

body.sepak-app .btn,
body.sepak-app button,
body.sepak-app .btn-nueva,
body.sepak-app .package,
body.sepak-app .action-primary {
  border-radius: 6px;
  font-family: var(--sans);
  font-weight: 600;
}
body.sepak-app .btn-primary,
body.sepak-app .btn-nueva,
body.sepak-app .package,
body.sepak-app .upload,
body.sepak-app .action-primary { background: var(--accent); color: var(--bg); border-color: var(--accent); }
body.sepak-app .btn-secondary,
body.sepak-app .actions a,
body.sepak-app .actions button { background: var(--surface-2); color: var(--text); border-color: var(--border); }
body.sepak-app a { color: var(--accent); }
body.sepak-app .link-ot { color: var(--accent); }

body.sepak-app .filters { max-width: none; }
body.sepak-app .filters select, body.sepak-app .filters input { background: var(--surface); color: var(--text); border-color: var(--border); }
body.sepak-app .tabla-wrap { max-width: none; }
body.sepak-app thead tr { background: var(--surface-2); }
body.sepak-app thead th { color: var(--muted); border-color: var(--border); font-family: var(--mono); font-size: 10px; letter-spacing: 1.5px; }
body.sepak-app tbody tr { border-color: var(--border); }
body.sepak-app tbody tr:hover { background: var(--surface-2); }
body.sepak-app tbody td { color: var(--text); }
body.sepak-app tbody td.numero { color: var(--text); font-family: var(--mono); }
body.sepak-app .empty { color: var(--muted); }

body.sepak-app .badge { border-radius: 4px; font-family: var(--mono); }
body.sepak-app .badge-FLEX { background: rgba(59,130,246,.15); color: #7eb6ff; }
body.sepak-app .badge-BIND { background: rgba(34,197,94,.14); color: #69dc8f; }
body.sepak-app .badge-CAJA { background: rgba(255,176,32,.14); color: var(--warn); }
body.sepak-app .badge-ingresada { background: rgba(99,102,241,.18); color: #a5b4fc; }
body.sepak-app .badge-preprensa { background: rgba(255,176,32,.14); color: var(--warn); }
body.sepak-app .badge-cdi { background: rgba(0,212,170,.13); color: var(--accent); }
body.sepak-app .badge-control_preprensa,
body.sepak-app .badge-copiado { background: rgba(59,130,246,.15); color: #7eb6ff; }
body.sepak-app .badge-premontaje { background: rgba(168,85,247,.12); color: #c4a0ff; }
body.sepak-app .badge-montaje { background: rgba(168,85,247,.16); color: #c4a0ff; }
body.sepak-app .badge-control,
body.sepak-app .badge-control_final,
body.sepak-app .badge-despacho { background: rgba(34,197,94,.14); color: #69dc8f; }
body.sepak-app .badge-cerrada { background: var(--surface-2); color: var(--muted); }

body.sepak-app .urgente-card.active { background: rgba(255,107,53,.08); border-color: var(--orange); }
body.sepak-app .numero-preview { background: var(--bg); border-color: var(--border); color: var(--accent); font-family: var(--mono); }
body.sepak-app .toast.ok { background: var(--accent); color: var(--bg); }
body.sepak-app .toast.error { background: var(--red); }

body.sepak-app.elementos-page .top { background: var(--surface); border-color: var(--border); }
body.sepak-app.elementos-page .bar { max-width: 1120px; }
body.sepak-app.elementos-page .title h1 { color: var(--text); }
body.sepak-app.elementos-page .title p { color: var(--muted); }
body.sepak-app.elementos-page .layout { max-width: 1120px; }
body.sepak-app.elementos-page .panel { background: var(--surface); border-color: var(--border); }
body.sepak-app.elementos-page .item { background: var(--surface-2); border-color: var(--border); border-left-color: var(--accent); }
body.sepak-app.elementos-page .kind { color: var(--accent); }
body.sepak-app.elementos-page .notes, body.sepak-app.elementos-page .state { color: var(--muted); }
body.sepak-app.elementos-page .actions a, body.sepak-app.elementos-page .actions button { background: var(--bg); }
body.sepak-app.elementos-page .empty { border-color: var(--border); }

body.sepak-app.paquete-page .wrap { max-width: 900px; }
body.sepak-app.paquete-page .head h1 { color: var(--text); }
body.sepak-app.paquete-page .head p, body.sepak-app.paquete-page .note { color: var(--muted); }
body.sepak-app.paquete-page .sheet { background: var(--surface); border-color: var(--border); }
body.sepak-app.paquete-page .doc { border-color: var(--border); }
body.sepak-app.paquete-page .num { background: rgba(0,212,170,.13); color: var(--accent); border-radius: 4px; }
body.sepak-app.paquete-page .doc span { color: var(--muted); }
body.sepak-app.paquete-page .doc a { background: var(--surface-2); border-color: var(--border); color: var(--accent); }
body.sepak-app.paquete-page .actions { border-color: var(--accent); }

body.detail-page { background: var(--bg); color: var(--text); }
body.detail-page .sheet {
  color: #000;
}
body.detail-page .sheet .label,
body.detail-page .sheet .k,
body.detail-page .sheet .foot,
body.detail-page .sheet .source,
body.detail-page .sheet .signature {
  color: #111;
}
body.detail-page .sheet .value,
body.detail-page .sheet .v,
body.detail-page .sheet .notes,
body.detail-page .sheet .instruction,
body.detail-page .sheet .instructions,
body.detail-page .sheet .instructions *,
body.detail-page .sheet .chip,
body.detail-page .sheet .color,
body.detail-page .sheet b,
body.detail-page .sheet strong {
  color: #000;
}
body.detail-page .sheet .title,
body.detail-page .sheet .section-title,
body.detail-page .sheet .rh {
  color: #000;
}
body.detail-page .toolbar,
body.detail-page .tools {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
body.detail-page .toolbar a, body.detail-page .tools a { color: var(--accent); }
body.detail-page .toolbar button, body.detail-page .tools button {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  border-radius: 6px;
}

.ot-tabs {
  width: min(1120px, calc(100% - 28px));
  margin: 18px auto 12px;
  padding: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--sans);
}
body.detail-page .ot-tabs { width: min(210mm, calc(100% - 20px)); }
.ot-back,
.ot-tab {
  min-height: 40px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #a8b3c7;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  border-radius: 6px;
}
.ot-back {
  color: var(--text);
  padding-right: 18px;
  border-right: 1px solid var(--border);
  border-radius: 6px 0 0 6px;
}
.ot-back:hover,
.ot-tab:hover { color: var(--text); background: var(--surface-2); }
.ot-tabs-group {
  min-width: 0;
  display: flex;
  flex: 1;
  gap: 4px;
}
.ot-tab { flex: 1; }
.ot-tab.active { color: var(--bg); background: var(--accent); }
.tab-count {
  min-width: 20px;
  height: 20px;
  margin-left: 7px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  background: rgba(255,255,255,.16);
  border-radius: 10px;
  font-size: 11px;
}
.upload-steps {
  margin: 0 0 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.upload-step {
  min-height: 50px;
  padding: 9px 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #a8b3c7;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
}
.upload-step strong {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bg);
  background: var(--accent);
  border-radius: 50%;
}

@media (max-width: 760px) {
  .sepak-header { padding: 12px 16px; flex-wrap: wrap; gap: 10px; }
  .sepak-header h1 { display: none; }
  .sepak-header .divider { display: none; }
  .module-nav { order: 3; width: 100%; margin-left: 0; }
  .module-nav a { flex: 1; justify-content: center; }
  .page-actions { width: 100%; }
  .page-actions a { flex: 1; text-align: center; }
  .ot-tabs { align-items: stretch; overflow-x: auto; }
  .ot-back { flex: 0 0 auto; padding: 0 10px; }
  .ot-tabs-group { min-width: 420px; }
}

.workflow-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(108px, 1fr));
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.workflow-step {
  min-height: 52px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
}
.workflow-step.done { color: #a8b3c7; border-color: #3c4962; }
.workflow-step.current { color: var(--bg); background: var(--accent); border-color: var(--accent); }
.workflow-step.cancelled { color: #fecaca; background: rgba(239,68,68,.12); border-color: var(--red); }

.status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  color: #a8b3c7;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  font: 700 10px/1.2 var(--mono);
  text-transform: uppercase;
}
.status-badge.aprobado { color: var(--bg); background: var(--accent); border-color: var(--accent); }
.status-badge.cotizacion { color: var(--warn); background: rgba(255,176,32,.12); }
.status-badge.modificacion { color: #c4a0ff; background: rgba(168,85,247,.14); }
.status-badge.cancelado { color: #fecaca; background: rgba(239,68,68,.12); }

.boceto-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.boceto-summary > div {
  min-height: 70px;
  padding: 13px 15px;
  background: var(--surface);
  border-right: 1px solid var(--border);
}
.boceto-summary > div:last-child { border-right: 0; }
.summary-label {
  margin-bottom: 6px;
  color: var(--muted);
  font: 700 9px/1 var(--mono);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.summary-value { color: var(--text); font-size: 14px; font-weight: 700; }

.workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(290px, .75fr);
  gap: 18px;
}
.stack { display: flex; flex-direction: column; gap: 18px; }
.action-panel {
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.action-panel h2 {
  margin: 0 0 15px;
  color: var(--accent);
  font: 700 10px/1 var(--mono);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label {
  color: #a8b3c7;
  font: 700 10px/1.2 var(--mono);
  letter-spacing: .6px;
  text-transform: uppercase;
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 9px 10px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  font: 14px var(--sans);
}
.form-field textarea { min-height: 82px; resize: vertical; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.button-primary,
.button-secondary {
  min-height: 40px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font: 700 13px var(--sans);
  text-decoration: none;
  cursor: pointer;
}
.button-primary { color: var(--bg); background: var(--accent); border: 1px solid var(--accent); }
.button-secondary { color: var(--text); background: var(--surface-2); border: 1px solid var(--border); }
body.sepak-app .button-primary { color: var(--bg); }
body.sepak-app .button-secondary { color: var(--text); }
.button-primary:disabled { opacity: .45; cursor: not-allowed; }
label.check-line input[type="checkbox"] {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
}
.notice {
  padding: 11px 13px;
  color: #a8b3c7;
  background: var(--surface-2);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.45;
}
.notice.error { color: #fecaca; border-left-color: var(--red); }
.document-list,
.history-list { display: flex; flex-direction: column; gap: 8px; }
.document-row,
.history-row {
  padding: 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.document-row.approved { border-left: 3px solid var(--accent); }
.document-name { color: var(--text); font-weight: 700; overflow-wrap: anywhere; }
.document-meta,
.history-meta { margin-top: 4px; color: var(--muted); font-size: 11px; }
.document-actions { display: flex; align-items: center; gap: 6px; }
.document-actions a,
.document-actions button {
  min-height: 32px;
  padding: 0 9px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}
.history-row { grid-template-columns: 14px 1fr; }
.history-dot { width: 9px; height: 9px; margin-top: 4px; background: var(--accent); border-radius: 50%; }
.history-title { color: var(--text); font-size: 13px; font-weight: 700; }
.empty-state {
  padding: 34px 18px;
  color: var(--muted);
  border: 1px dashed var(--border);
  border-radius: 6px;
  text-align: center;
}

.production-route {
  display: grid;
  grid-template-columns: repeat(8, minmax(112px, 1fr));
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 5px;
}
.production-stage {
  min-height: 92px;
  padding: 11px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 7px;
}
.production-stage.completed { border-color: rgba(0,212,170,.42); }
.production-stage.current {
  background: rgba(0,212,170,.1);
  border: 2px solid var(--accent);
}
.production-stage.pending { opacity: .58; }
.stage-number {
  color: var(--muted);
  font: 700 10px var(--mono);
}
.production-stage.current .stage-number,
.production-stage.completed .stage-number { color: var(--accent); }
.stage-name { color: var(--text); font-size: 12px; font-weight: 800; line-height: 1.25; }
.stage-state {
  color: var(--muted);
  font: 700 9px var(--mono);
  letter-spacing: .7px;
  text-transform: uppercase;
}
.production-stage.current .stage-state { color: var(--accent); }
.route-current {
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
}
.route-current h2 { margin: 0 0 5px; font-size: 20px; }
.route-current p { margin: 0; color: var(--muted); font-size: 13px; }
.route-complete {
  padding: 20px;
  color: var(--text);
  background: rgba(0,212,170,.09);
  border: 1px solid rgba(0,212,170,.4);
  border-radius: 8px;
}
.route-complete h2 { margin: 0 0 6px; color: var(--accent); font-size: 18px; }
.sector-detail-list { display: flex; flex-direction: column; gap: 8px; }
.sector-detail {
  padding: 12px;
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.sector-marker {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 50%;
  font: 700 10px var(--mono);
}
.sector-detail.completed .sector-marker { color: var(--bg); background: var(--accent); border-color: var(--accent); }
.sector-detail.current { border-color: var(--accent); }
.sector-detail.current .sector-marker { color: var(--accent); border-color: var(--accent); }
.sector-detail-name { color: var(--text); font-size: 13px; font-weight: 800; }
.sector-detail-meta { margin-top: 3px; color: var(--muted); font-size: 11px; }
.sector-detail-status { color: var(--muted); font: 700 9px var(--mono); text-transform: uppercase; }
.sector-detail.current .sector-detail-status { color: var(--accent); }

@media (max-width: 720px) {
  .sepak-header { padding: 12px 16px; }
  .sepak-header .header-actions { display: none; }
  .module-nav { order: 4; width: 100%; margin: 8px 0 0; }
  .sepak-header { flex-wrap: wrap; }
  .module-nav a { flex: 1; justify-content: center; }
  body.sepak-app .page-shell { padding: 20px 14px; }
  body.sepak-app .tabla-wrap { overflow-x: auto; }
  .ot-tabs { align-items: stretch; flex-direction: column; }
  .ot-back {
    justify-content: flex-start;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 6px 6px 0 0;
  }
  .ot-tabs-group { width: 100%; flex-wrap: wrap; overflow: visible; }
  .ot-tab { min-width: calc(50% - 4px); flex: 1 1 calc(50% - 4px); padding: 0 8px; font-size: 12px; }
  .upload-steps { grid-template-columns: 1fr; }
  .workflow-strip { grid-template-columns: 1fr 1fr; overflow: visible; }
  .boceto-summary { grid-template-columns: 1fr 1fr; }
  .boceto-summary > div:nth-child(2) { border-right: 0; }
  .boceto-summary > div { border-bottom: 1px solid var(--border); }
  .boceto-summary > div:nth-last-child(-n+2) { border-bottom: 0; }
  .workspace-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: auto; }
  .production-route { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .sector-detail { grid-template-columns: 28px 1fr; }
  .sector-detail-status { grid-column: 2; }
}

@media print {
  body.detail-page { background: #fff; }
  .ot-tabs { display: none !important; }
}

/* ── Semáforo de entrega (estilo planilla) ── */
.semaforo{display:inline-flex;align-items:center;gap:6px;font:700 12px var(--mono);white-space:nowrap}
.semaforo::before{content:'';width:10px;height:10px;border-radius:50%;flex-shrink:0}
.semaforo.verde::before{background:#22c55e}
.semaforo.amarillo::before{background:#eab308}
.semaforo.rojo::before{background:#ef4444}
.semaforo.verde{color:#22c55e}
.semaforo.amarillo{color:#eab308}
.semaforo.rojo{color:#ef4444}