/* ===========================
   ViviendaSion – Fábrica & Compras
   Archivo: fabrica.css
   =========================== */

/* ------- Reset / base ------- */
*,
*::before,
*::after { box-sizing: border-box; }

:root{
  --bg: #0b1220;
  --bg-soft: #0f172a;
  --surface: #111827;
  --border: #1f2937;
  --muted: #94a3b8;
  --text: #e5e7eb;
  --primary: #2563eb;
  --primary-600: #1d4ed8;
  --danger: #dc2626;
  --danger-600: #b91c1c;
  --ok: #10b981;
  --warn: #f59e0b;

  --radius: 14px;
  --radius-sm: 10px;

  --shadow-soft: 0 10px 24px rgba(0,0,0,.28);
}

html, body { height: 100%; }
html { scroll-behavior: smooth; }
body{
  margin: 0;
  color: var(--text);
  background: linear-gradient(180deg, #0b1220 0%, #0a1020 100%);
  font: 14px/1.45 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* ------- Helpers ------- */
.hidden{ display: none !important; }
.no-print{ display: initial; }
.muted{ color: var(--muted); }
.bold{ font-weight: 700; }
.txt-right{ text-align: right; }
.mt-12{ margin-top: 12px; }
.mt-16{ margin-top: 16px; }
.ml-auto{ margin-left: auto; }
.w-100{ width: 100px; }
.w-120{ width: 120px; }
.w-160{ width: 160px; }
.w-220{ width: 220px; }
.flex-1{ flex: 1 1 auto; }
.align-center{ align-items: center; }
.align-end{ align-items: end; }

.container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
}

/* ------- Header ------- */
.hdr{
  position: sticky;
  top: 0; z-index: 50;
  backdrop-filter: blur(6px) saturate(120%);
  background: rgba(11,18,32,.75);
  border-bottom: 1px solid var(--border);
}
.hdr__inner{
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; max-width: 1200px; margin: 0 auto;
}
.hdr__title{
  font-size: 18px; font-weight: 650;
}
.hdr__actions{ margin-left: auto; display: flex; gap: 8px; }

/* ------- Buttons ------- */
.btn{
  --bg: var(--bg-soft);
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  padding: .55rem .9rem;
  border-radius: var(--radius-sm);
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  transition: .18s ease;
}
.btn:hover{ border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,.15) inset; }
.btn:disabled{ opacity: .5; cursor: not-allowed; }

.btn--primary{
  --bg: linear-gradient(180deg, #2563eb, #1d4ed8);
  border-color: #1d4ed8;
}
.btn--primary:hover{ filter: brightness(1.05); }

.btn--danger{
  --bg: linear-gradient(180deg, var(--danger), var(--danger-600));
  border-color: var(--danger-600);
}
.btn--danger:hover{ filter: brightness(1.05); }

.btn--ghost{
  background: transparent;
  border-color: var(--border);
}

/* ------- Inputs ------- */
.input{
  background: #0b1220;
  color: var(--text);
  border: 1px solid #334155;
  border-radius: 10px;
  padding: .55rem .7rem;
  outline: 0;
  min-height: 36px;
}
.input:focus{
  border-color: #60a5fa;
  box-shadow: 0 0 0 2px rgba(59,130,246,.22);
}
.input[readonly]{ opacity: .85; }

.lbl{
  display: block; margin-bottom: 6px; color: var(--muted); font-size: 12px;
}

/* ------- Layout util ------- */
.row{ display: flex; align-items: center; }
.wrap{ flex-wrap: wrap; }
.gap{ gap: 8px; }

/* ------- Cards ------- */
.card{
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow-soft);
  margin-bottom: 14px;
}
.card__header{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.card__title{ margin: 0; font-size: 16px; font-weight: 650; }

/* Subcards (secciones internas dentro de modales) */
.subcard{
  background: #0c1626;
  border: 1px dashed #2b3444;
  border-radius: 12px;
  padding: 12px;
  margin-top: 12px;
}
.subcard__header{ display:flex; align-items:center; justify-content:space-between; }

/* ------- KPIs ------- */
.kpis{
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-top: 12px;
}
.kpi{
  background: #0c1626;
  border: 1px solid #253048;
  border-radius: 12px;
  padding: 14px;
}
.kpi__label{ color: var(--muted); font-size: 12px; }
.kpi__value{ font-size: 24px; font-weight: 800; margin-top: 6px; }

/* Mini cards */
.mini-card{
  background:#0c1626; border:1px solid #233148; border-radius: 12px; padding: 12px; min-width: 140px;
}
.mini-card__label{ color: var(--muted); font-size: 12px; }
.mini-card__value{ font-size: 20px; font-weight: 800; margin-top: 4px; }

/* ------- Tabs ------- */
.tabs, .subtabs{
  display: flex; gap: 6px; margin: 8px 0 12px;
}
.tab, .subtab{
  background: transparent;
  border: 1px solid transparent;
  color: var(--text);
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
}
.tab:hover, .subtab:hover{ border-color: #334155; }
.tab.is-active, .subtab.is-active{
  background: #0f172a;
  border-color: #334155;
}

/* Paneles */
.panel{ display: none; }
.panel.is-active{ display: block; }
.subpanel{ display: none; }
.subpanel.is-active{ display: block; }

/* ------- Tablas ------- */
.table-wrap{
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: auto;
  background: #0b1220;
}
.tbl{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 720px;
}
.tbl th{
  position: sticky; top: 0; z-index: 5;
  background: #0f172a;
  color: var(--muted);
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 12px;
}
.tbl td{
  padding: 10px 12px;
  border-bottom: 1px solid #1b2435;
  vertical-align: middle;
}
.tbl tr:hover td{ background: #0c1426; }

.tbl.narrow th, .tbl.narrow td{ padding: 8px 10px; }

/* ------- Timeline ------- */
.timeline{
  margin: 0; padding: 0; list-style: none;
}
.timeline li{
  display: flex; gap: 8px; align-items: flex-start;
  padding: 8px 0; border-bottom: 1px dashed #20304a;
}
.timeline li:last-child{ border-bottom: 0; }
.timeline .chip{
  border:1px solid #2a3752; background:#0f172a; padding:2px 6px; border-radius:6px; font-size:12px; color:var(--muted);
}

/* ------- Uploader (OCR) ------- */
.uploader{
  display: block;
}
.uploader__drop{
  border: 2px dashed #334155;
  border-radius: 14px;
  padding: 20px;
  text-align: center;
  background: #0b1220;
  color: var(--muted);
}
.uploader__drop input[type="file"]{
  display: block;
  width: 100%;
  max-width: 460px;
  margin: 10px auto;
}
.uploader__drop.is-dragover{
  border-color: #60a5fa;
  background: #0c1a30;
  color: #c7d2fe;
}

/* ------- Switch ------- */
.switch{
  display: inline-flex; gap: 8px; align-items: center;
}
.switch > input[type="checkbox"]{
  appearance: none; width: 42px; height: 22px; border-radius: 22px; position: relative;
  border:1px solid #2a3752; background:#0f172a; outline: 0; cursor: pointer;
}
.switch > input[type="checkbox"]::after{
  content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%;
  background:#64748b; transition:.18s ease;
}
.switch > input[type="checkbox"]:checked{ background:#1c3d7a; border-color:#3b82f6; }
.switch > input[type="checkbox"]:checked::after{ left:22px; background:#93c5fd; }

/* ------- Dialogs (native <dialog>) ------- */
.dialog{
  border: 0; padding: 0; border-radius: 16px;
  background: var(--bg-soft);
  box-shadow: 0 40px 80px rgba(0,0,0,.5);
  width: min(980px, 96vw);
}
.dialog::backdrop{ background: rgba(0,0,0,.6); }
.dialog__body{ padding: 14px; }
.dialog__header{
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px;
}
.dialog__title{ margin: 0; font-size: 16px; font-weight: 700; }
.dialog__footer{ display:flex; justify-content:flex-end; gap: 8px; margin-top: 10px; }

.grid-1{ display: grid; grid-template-columns: 1fr; gap: 10px; }
.grid-2{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.grid-2 .span-2{ grid-column: 1 / -1; }

.h-100{ min-height: 100px; }

/* ------- Toasts ------- */
.toasts{
  position: fixed; top: 14px; right: 14px; z-index: 60;
  display: grid; gap: 8px;
}
.toast{
  background: rgba(17,24,39,.92);
  color: var(--text);
  border: 1px solid #27334c;
  padding: 10px 12px;
  border-radius: 10px;
  box-shadow: var(--shadow-soft);
  font-size: 13px;
}
.toast--error{ background: rgba(127,29,29,.9); border-color: #7f1d1d; }
.toast--ok{ background: rgba(6,95,70,.9); border-color: #065f46; }

/* ------- Pills / estados ------- */
.pill{
  display:inline-block; padding:.2rem .6rem; border-radius: 999px; font-weight: 700; font-size: 11px;
  border:1px solid transparent;
}
.pill--ok{ background:#064e3b; color:#bbf7d0; border-color:#065f46; }
.pill--warn{ background:#4f2f00; color:#fde68a; border-color:#854d0e; }
.pill--info{ background:#0e2a47; color:#93c5fd; border-color:#1d4ed8; }
.pill--bad{ background:#3f1d1d; color:#fecaca; border-color:#7f1d1d; }

/* ------- Lists ------- */
.list{ display:grid; gap:8px; }
.list__item{
  background:#0c1626; border:1px solid #20304a; border-radius:10px; padding:10px;
}

/* ------- Print ------- */
@media print{
  .no-print, .hdr, .tabs, .subtabs, .btn, .dialog { display: none !important; }
  body{ background: #fff; color: #111827; }
  .card, .table-wrap{ border:0; box-shadow:none; }
}

/* ------- Responsive ------- */
@media (max-width: 960px){
  .kpis{ grid-template-columns: 1fr; }
  .grid-2{ grid-template-columns: 1fr; }
  .tbl{ min-width: 640px; }
}

@media (max-width: 640px){
  .hdr__inner{ flex-wrap: wrap; gap: 8px; }
  .hdr__actions{ width: 100%; justify-content: flex-end; }
  .tbl{ min-width: 560px; }
}