/* =========================================================================
 * PrefabCalc — styles.css (v1.2 · UI/UX pass)
 * Tema: acero profundo + ambar. Glassmorphism, micro-interacciones,
 * animaciones sutiles, bordes suaves. Accesible: respeta prefers-reduced-motion.
 * ========================================================================= */
:root {
  --bg: #0b1220;
  --bg2: #111c2b;
  --card: rgba(22, 35, 58, 0.55);
  --card2: rgba(27, 43, 70, 0.65);
  --glass: rgba(22, 35, 58, 0.45);
  --line: rgba(127, 168, 217, 0.18);
  --line-soft: rgba(127, 168, 217, 0.10);
  --txt: #e8eef7;
  --muted: #93a5c0;
  --amber: #f5a623;
  --amber2: #ffc75e;
  --ok: #3ddc84;
  --bad: #ff6b6b;
  --steel: #7fa8d9;
  --radius: 18px;
  --radius-s: 12px;
  --mono: "Cascadia Code", "Consolas", monospace;
  --display: Georgia, "Times New Roman", "Segoe UI", serif;
  --body: "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, -apple-system, sans-serif;
  --shadow: 0 10px 32px rgba(3, 8, 16, 0.45);
  --glow-amber: 0 6px 24px rgba(245, 166, 35, 0.28);
  --glow-steel: 0 6px 24px rgba(127, 168, 217, 0.22);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.55'/></svg>");
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  background: var(--bg);
  color: var(--txt);
  min-height: 100vh;
  line-height: 1.55;
  overflow-x: hidden;
  position: relative;
  font-feature-settings: "tnum" 1;
}

/* grano filmico sobre toda la UI: mata el look plano de plantilla */
.grain-layer {
  position: fixed; inset: 0;
  background-image: var(--grain);
  opacity: 0.05;
  pointer-events: none;
  z-index: 999;
  mix-blend-mode: overlay;
}

/* ---------- fondo vivo: orbes de luz flotando (transparencia base) ---------- */
body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
  pointer-events: none;
}
body::before {
  width: 55vw; height: 55vw;
  top: -18vw; right: -12vw;
  background: radial-gradient(circle, rgba(127, 168, 217, 0.22), transparent 65%);
  animation: floatA 26s ease-in-out infinite alternate;
}
body::after {
  width: 48vw; height: 48vw;
  bottom: -16vw; left: -14vw;
  background: radial-gradient(circle, rgba(245, 166, 35, 0.13), transparent 65%);
  animation: floatB 32s ease-in-out infinite alternate;
}
@keyframes floatA { from { transform: translate(0, 0) scale(1); } to { transform: translate(-6vw, 7vh) scale(1.12); } }
@keyframes floatB { from { transform: translate(0, 0) scale(1.05); } to { transform: translate(5vw, -6vh) scale(0.95); } }

::selection { background: rgba(245, 166, 35, 0.35); color: #fff; }

/* scrollbar sutil */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(127, 168, 217, 0.25); border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: rgba(245, 166, 35, 0.45); }

/* ---------- header glass ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center; justify-content: space-between;
  padding: 14px 24px;
  background: rgba(13, 21, 32, 0.72);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 30px rgba(3, 8, 16, 0.35);
}
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245, 166, 35, 0.5), transparent);
  pointer-events: none;
}
.brand { display: flex; align-items: center; gap: 12px; }
.logo {
  width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center;
  font-weight: 800; font-size: 17px; color: #101418;
  background: linear-gradient(135deg, var(--amber2) 0%, var(--amber) 55%, #e08900 100%);
  box-shadow: var(--glow-amber);
  position: relative;
  overflow: hidden;
  transition: transform 0.35s var(--ease);
}
.logo:hover { transform: rotate(-6deg) scale(1.06); }
.logo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.5) 48%, transparent 62%);
  transform: translateX(-120%);
  animation: shimmer 5.5s ease-in-out infinite;
}
@keyframes shimmer { 0%, 55% { transform: translateX(-120%); } 75%, 100% { transform: translateX(120%); } }
.brand-txt h1 { font-size: 21px; letter-spacing: 0.3px; font-family: var(--display); font-weight: 600; }
.brand-txt h1, .brand-txt p { transition: color 0.3s; }
.brand-txt p { font-size: 12px; color: var(--muted); }

/* tabs: pills animadas */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.tabs button {
  background: rgba(127, 168, 217, 0.06);
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 15px; font-size: 13px; cursor: pointer;
  transition: all 0.25s var(--ease);
  font-family: inherit;
  backdrop-filter: blur(6px);
  position: relative;
  overflow: hidden;
}
.tabs button:hover {
  color: var(--txt); border-color: rgba(245, 166, 35, 0.5);
  background: rgba(245, 166, 35, 0.10);
  transform: translateY(-1px);
}
.tabs button.active {
  color: #101418; font-weight: 700;
  background: linear-gradient(135deg, var(--amber2), var(--amber));
  border-color: transparent;
  box-shadow: var(--glow-amber);
}

/* ---------- layout ---------- */
main { max-width: 1280px; margin: 0 auto; padding: 24px; }
.tab { display: none; }
.tab.active { display: block; }
.tab.active > * { animation: fadeUp 0.5s var(--ease) both; }
.tab.active > *:nth-child(2) { animation-delay: 0.06s; }
.tab.active > *:nth-child(3) { animation-delay: 0.12s; }
.tab.active > *:nth-child(4) { animation-delay: 0.18s; }
.tab.active > *:nth-child(5) { animation-delay: 0.24s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- cards glass con borde degradado (doble background) ---------- */
.card {
  position: relative;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background:
    linear-gradient(rgba(19, 30, 50, 0.72), rgba(14, 23, 38, 0.82)) padding-box,
    linear-gradient(150deg, rgba(127, 168, 217, 0.35), rgba(127, 168, 217, 0.06) 40%, rgba(245, 166, 35, 0.10)) border-box;
  transition: transform 0.35s var(--ease), box-shadow 0.35s;
}
.card:hover { box-shadow: 0 14px 44px rgba(3, 8, 16, 0.55); }
/* linea de luz superior */
.card::before {
  content: ""; position: absolute; inset: 0 12% auto 12%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200, 220, 245, 0.35), transparent);
  pointer-events: none;
}
.card h2 {
  font-family: var(--display);
  font-size: 17.5px; font-weight: 600; letter-spacing: 0.2px;
  margin-bottom: 12px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.unit-note { font-size: 11.5px; color: var(--muted); font-weight: 400; font-family: var(--body); }
.foot-note { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-top: 10px; }

/* ---------- form ---------- */
fieldset.card { border: 1px solid var(--line); }
legend {
  padding: 4px 14px; border-radius: 999px;
  background: rgba(245, 166, 35, 0.10); border: 1px solid rgba(245, 166, 35, 0.35);
  font-size: 12.5px; font-weight: 700; color: var(--amber2);
  letter-spacing: 0.3px;
}
.fields {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px; padding-top: 10px;
}
label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
label.wide { grid-column: 1 / -1; }
label.check { flex-direction: row; align-items: center; gap: 9px; color: var(--txt); font-size: 13.5px; }
.hint { font-size: 11.5px; color: var(--muted); line-height: 1.45; }

select, input[type="number"], input[type="text"] {
  background: rgba(13, 21, 32, 0.65);
  color: var(--txt);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 10px 12px; font-size: 14px; font-family: inherit;
  width: 100%;
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
select:hover, input[type="number"]:hover, input[type="text"]:hover { border-color: rgba(127, 168, 217, 0.45); }
select:focus, input[type="number"]:focus, input[type="text"]:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.18);
  background: rgba(13, 21, 32, 0.9);
}
input[type="checkbox"] {
  width: 17px; height: 17px; accent-color: var(--amber);
  cursor: pointer; transition: transform 0.2s var(--ease);
}
input[type="checkbox"]:hover { transform: scale(1.15); }
:is(select, input, button, a):focus-visible { outline: 2px solid var(--amber2); outline-offset: 2px; }

/* ---------- config layout ---------- */
.config-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 330px;
  gap: 16px; align-items: start;
}
.side { position: sticky; top: 92px; }
.side .live {
  background: linear-gradient(170deg, rgba(245, 166, 35, 0.10), rgba(17, 28, 43, 0.78) 45%);
  border-color: rgba(245, 166, 35, 0.35);
}
.side .live h2 { color: var(--amber2); }
.live-body { font-size: 13.5px; margin: 10px 0 14px; }
.live-row {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 7px 0; border-bottom: 1px dashed var(--line);
}
.live-row b { color: var(--txt); font-family: var(--mono); font-size: 13px; }
.live-big { margin-top: 12px; text-align: center; animation: pop 0.45s var(--ease); }
@keyframes pop { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }
.live-big .num { font-size: 27px; font-weight: 800; color: var(--amber2); font-family: var(--mono); text-shadow: 0 0 24px rgba(245, 166, 35, 0.35); }
.live-big .ars { font-size: 11.5px; color: var(--muted); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; border-radius: var(--radius-s);
  cursor: pointer; padding: 11px 16px; font-size: 13.5px; font-weight: 600;
  font-family: inherit; border: 1px solid var(--line);
  background: rgba(127, 168, 217, 0.10);
  color: var(--txt);
  transition: all 0.25s var(--ease);
  width: 100%; margin-top: 8px;
  backdrop-filter: blur(6px);
}
.btn:hover {
  border-color: var(--steel);
  transform: translateY(-2px);
  box-shadow: var(--glow-steel);
}
.btn:active { transform: translateY(0) scale(0.98); }
.btn.primary {
  background: linear-gradient(135deg, var(--amber2), var(--amber));
  color: #101418; border: none;
  box-shadow: var(--glow-amber);
  position: relative;
  overflow: hidden;
}
.btn.primary::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.45) 48%, transparent 62%);
  transform: translateX(-130%);
  transition: transform 0.6s var(--ease);
}
.btn.primary:hover::after { transform: translateX(130%); }
.btn.primary:hover { box-shadow: 0 10px 34px rgba(245, 166, 35, 0.45); filter: brightness(1.05); }
.btn.ghost { background: transparent; }
.btn.danger { border-color: rgba(255, 107, 107, 0.6); color: var(--bad); background: transparent; }
.btn.danger:hover { box-shadow: 0 6px 24px rgba(255, 107, 107, 0.25); }
.save-row { display: flex; gap: 8px; }
.save-row .btn { margin-top: 8px; }
.save-row select { flex: 1; min-width: 0; }
#quoteName { margin-top: 8px; }

/* ---------- KPIs ---------- */
.kpis {
  display: grid; gap: 14px; margin-bottom: 16px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.kpi {
  background: linear-gradient(165deg, rgba(30, 47, 76, 0.55), rgba(17, 28, 43, 0.75));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
  position: relative;
  overflow: hidden;
  animation: fadeUp 0.5s var(--ease) both;
}
.kpi:nth-child(even) { animation-delay: 0.07s; }
.kpi:nth-child(3n) { animation-delay: 0.14s; }
.kpi:hover {
  transform: translateY(-3px);
  border-color: rgba(127, 168, 217, 0.5);
  box-shadow: 0 16px 40px rgba(3, 8, 16, 0.55);
}
.kpi .k-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.7px; }
.kpi .k-value {
  font-size: 24px; font-weight: 700; font-family: var(--mono); margin-top: 5px; transition: color 0.3s;
  background: linear-gradient(135deg, #f4f7fb, #a8c4e4);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.kpi .k-sub { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.kpi.gold { border-color: rgba(245, 166, 35, 0.45); }
.kpi.gold .k-value {
  background: linear-gradient(135deg, var(--amber2), var(--amber));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.kpi.gold::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
}
.kpi.good .k-value {
  background: linear-gradient(135deg, #7ce8ab, var(--ok));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.kpi.bad .k-value {
  background: linear-gradient(135deg, #ff9d9d, var(--bad));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- tablas ---------- */
.table-wrap {
  overflow-x: auto; border-radius: var(--radius-s);
  border: 1px solid var(--line-soft);
  background: rgba(13, 21, 32, 0.35);
}
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th {
  text-align: left; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--muted);
  padding: 10px 12px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0;
  background: rgba(17, 28, 43, 0.95);
  backdrop-filter: blur(8px);
  z-index: 2;
}
.tbl th.num, .tbl td.num { text-align: right; font-family: var(--mono); font-size: 13px; white-space: nowrap; }
.tbl td { padding: 9px 12px; border-bottom: 1px solid var(--line-soft); transition: background 0.2s; }
.tbl tbody tr { transition: background 0.2s; }
.tbl tbody tr:hover { background: rgba(127, 168, 217, 0.07); }
.tbl tfoot td {
  font-weight: 800; font-size: 15px; color: var(--amber2);
  border-top: 2px solid var(--amber); font-family: var(--mono);
  background: rgba(245, 166, 35, 0.05);
}
.tbl tfoot td:first-child { font-family: inherit; font-size: 13px; }
.tbl tr.off td { opacity: 0.42; }

.mini-bar {
  height: 9px; border-radius: 999px; min-width: 36px;
  background: linear-gradient(90deg, var(--amber), var(--amber2));
  box-shadow: 0 0 12px rgba(245, 166, 35, 0.3);
  transform-origin: left center;
  animation: growBar 0.8s var(--ease) both;
}
@keyframes growBar { from { width: 0 !important; opacity: 0.4; } to { opacity: 1; } }

/* ---------- termica / schedule ---------- */
.thermal-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px dashed var(--line-soft); font-size: 13.5px;
}
.thermal-row b { font-family: var(--mono); }
.badge {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700;
  transition: transform 0.25s var(--ease);
}
.badge:hover { transform: scale(1.05); }
.badge.ok { background: rgba(61, 220, 132, 0.14); color: var(--ok); border: 1px solid var(--ok); }
.badge.bad { background: rgba(255, 107, 107, 0.12); color: var(--bad); border: 1px solid var(--bad); }
.badge.neutral { background: rgba(127, 168, 217, 0.12); color: var(--steel); border: 1px solid var(--steel); }
.label-letter {
  display: inline-grid; place-items: center; width: 36px; height: 36px;
  border-radius: 11px; font-weight: 800; font-size: 18px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  animation: pop 0.5s var(--ease);
}
.label-A { background: #00a651; color: #fff; }
.label-B { background: #55b847; color: #fff; }
.label-C { background: #a9c519; color: #101418; }
.label-D { background: #f0d000; color: #101418; }
.label-E { background: #f5a623; color: #101418; }
.label-F { background: #ef8100; color: #fff; }
.label-G { background: #e53935; color: #fff; }
.reading { font-size: 13.5px; color: var(--txt); }
.reading p { margin-bottom: 9px; }
.reading b { color: var(--amber2); }

/* ---------- alertas ---------- */
.alert-item {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 11px 14px; border-radius: var(--radius-s); margin-bottom: 9px;
  border: 1px solid var(--line); background: rgba(13, 21, 32, 0.45);
  font-size: 13.5px;
  animation: fadeUp 0.4s var(--ease) both;
  transition: transform 0.25s var(--ease), box-shadow 0.25s;
}
.alert-item:nth-child(even) { animation-delay: 0.07s; }
.alert-item:hover { transform: translateX(3px); }
.alert-item p { color: var(--txt); }
.alert-item .alert-ico { flex: none; font-size: 14px; margin-top: 1px; }
.alert-item.bad {
  border-color: rgba(255, 107, 107, 0.55); background: rgba(255, 107, 107, 0.07);
  box-shadow: inset 3px 0 0 var(--bad);
}
.alert-item.warn {
  border-color: rgba(245, 166, 35, 0.5); background: rgba(245, 166, 35, 0.06);
  box-shadow: inset 3px 0 0 var(--amber);
}
.alert-item.ok {
  border-color: rgba(61, 220, 132, 0.45); background: rgba(61, 220, 132, 0.06);
  box-shadow: inset 3px 0 0 var(--ok);
}

/* ---------- flujo y cuotas ---------- */
.cash-grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 16px; align-items: start;
}
.cash-summary { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 12px; }
.chip {
  background: rgba(127, 168, 217, 0.08); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 14px; font-size: 12.5px; color: var(--muted);
  backdrop-filter: blur(6px);
  transition: all 0.25s var(--ease);
}
.chip:hover { border-color: rgba(245, 166, 35, 0.5); color: var(--txt); }
.chip b { color: var(--amber2); font-family: var(--mono); }

/* ---------- rentabilidad ---------- */
.renta-fields { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.renta-fields label { font-size: 12.5px; }

/* ---------- comparador ---------- */
.tbl.compare tbody tr.sel { background: rgba(245, 166, 35, 0.08); }
.tbl.compare tbody tr.sel td:first-child { border-left: 3px solid var(--amber); font-weight: 700; }
.bars { display: flex; flex-direction: column; gap: 11px; }
.bar-row {
  display: grid; grid-template-columns: 190px 1fr 110px; gap: 10px;
  align-items: center; font-size: 13px;
  transition: transform 0.25s var(--ease);
}
.bar-row:hover { transform: translateX(4px); }
.bar-track {
  background: rgba(13, 21, 32, 0.65); border-radius: 999px;
  height: 24px; overflow: hidden; border: 1px solid var(--line-soft);
}
.bar-fill {
  height: 100%; border-radius: 999px 0 0 999px;
  background: linear-gradient(90deg, #2e4a75, var(--steel));
  transform-origin: left center;
  animation: growBar 0.9s var(--ease) both;
  position: relative;
}
.bar-fill::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.25) 50%, transparent 65%);
  transform: translateX(-100%);
  animation: sweep 3.5s ease-in-out 1s infinite;
}
@keyframes sweep { 0%, 60% { transform: translateX(-100%); } 85%, 100% { transform: translateX(100%); } }
.bar-row.sel .bar-fill { background: linear-gradient(90deg, var(--amber), var(--amber2)); }
.bar-val { text-align: right; font-family: var(--mono); font-size: 12.5px; color: var(--muted); }

.sys-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 14px; }
.sys-card { transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s; }
.sys-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(3, 8, 16, 0.55);
}
.sys-card h3 { font-size: 15px; margin-bottom: 2px; }
.sys-card .tag { font-size: 11.5px; color: var(--steel); margin-bottom: 8px; display: block; }
.sys-card p { font-size: 12.5px; color: var(--muted); margin-bottom: 8px; }
.sys-card ul { font-size: 12.5px; color: var(--txt); padding-left: 18px; }
.sys-card li { margin-bottom: 3px; }
.sys-card .mini-t { font-size: 12px; font-weight: 700; margin-top: 9px; display: block; }
.sys-card .t-ok { color: var(--ok); }
.sys-card .t-warn { color: var(--amber2); }
.sys-card .t-norm { color: var(--steel); }

/* ---------- planos ---------- */
#planoPlanta, #planoFachada, #planoUbicacion {
  background: rgba(244, 247, 251, 0.04);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-s);
  padding: 10px;
  transition: border-color 0.3s, background 0.3s;
}
#planoPlanta:hover, #planoFachada:hover, #planoUbicacion:hover { border-color: rgba(245, 166, 35, 0.4); }

svg.plano { width: 100%; height: auto; display: block; }
svg .room { fill: #f4f7fb; stroke: #31527d; stroke-width: 1; }
svg .wall { fill: #31527d; }
svg .lbl { font: 11px "Segoe UI", sans-serif; fill: #1b2b46; }
svg .lblS { font: 9px "Segoe UI", sans-serif; fill: #1b2b46; }
svg .m2 { font: 9px "Segoe UI", sans-serif; fill: #93a5c0; }
svg .dim { font: 10px "Segoe UI", sans-serif; fill: #93a5c0; }
svg .door { fill: #16233a; stroke: #7fa8d9; }
svg .win { fill: #7fa8d9; }
svg .north { stroke: #f5a623; fill: none; stroke-width: 2; }
svg .fas { fill: #eef2f8; stroke: #31527d; }
svg .door2 { fill: #31527d; }
svg .win2 { fill: #7fa8d9; stroke: #31527d; }
svg .ground { stroke: #e8eef7; stroke-width: 2; }
svg .roofF { fill: #2e4a75; stroke: #7fa8d9; }
svg .roofLine { stroke: #7fa8d9; stroke-width: 1; }
svg .lote { fill: rgba(61, 220, 132, 0.06); stroke: #3ddc84; stroke-dasharray: 6 4; }
svg .building { fill: #2e4a75; stroke: #7fa8d9; }
svg .street { fill: #1b2b46; stroke: #27395a; }
svg .ret { stroke: #f5a623; stroke-dasharray: 4 3; }

/* ---------- normas ---------- */
.norm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; margin-bottom: 16px; }
.norm-list { padding-left: 18px; font-size: 13.5px; }
.norm-list li { margin-bottom: 9px; }
.norm-list strong { color: var(--amber2); }
.checklist { padding-left: 20px; font-size: 13.5px; }
.checklist li { margin-bottom: 9px; }
.checklist strong { color: var(--amber2); }
.card.warn { border-color: rgba(255, 107, 107, 0.5); }
.card.warn h2 { color: var(--bad); }
.card.warn ul { padding-left: 18px; font-size: 13.5px; }
.card.warn li { margin-bottom: 8px; }

/* ---------- costos ---------- */
.costs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.costs-grid fieldset {
  border: 1px solid var(--line); border-radius: var(--radius-s); padding: 12px;
  background: rgba(13, 21, 32, 0.4);
}
.costs-grid legend { font-size: 12px; }
.cost-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cost-row label { flex: 1; font-size: 12.5px; }
.cost-row input { width: 105px; flex: none; }

/* ---------- footer / toast ---------- */
.foot { padding: 24px; text-align: center; font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); margin-top: 10px; }
.toast {
  position: fixed; bottom: 26px; left: 50%;
  transform: translateX(-50%) translateY(90px) scale(0.95);
  background: rgba(27, 43, 70, 0.92);
  backdrop-filter: blur(16px);
  color: var(--txt);
  border: 1px solid rgba(245, 166, 35, 0.5);
  border-radius: 14px;
  padding: 13px 24px; font-size: 13.5px; z-index: 100;
  opacity: 0; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55), var(--glow-amber);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }

/* ---------- hero editorial ---------- */
.hero {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 22px; align-items: center;
  background:
    linear-gradient(115deg, rgba(31, 24, 10, 0.55), rgba(16, 25, 41, 0.85) 55%) padding-box,
    linear-gradient(150deg, rgba(245, 166, 35, 0.45), rgba(127, 168, 217, 0.12) 55%, rgba(245, 166, 35, 0.15)) border-box;
}
.eyebrow {
  font-size: 11px; letter-spacing: 2.2px; text-transform: uppercase;
  color: var(--amber2); margin-bottom: 10px; font-weight: 700;
}
.hero h2 {
  font-family: var(--display);
  font-size: 30px; line-height: 1.18; font-weight: 600;
  color: #f2f6fb; margin-bottom: 10px; letter-spacing: 0.2px;
}
.hero h2 em {
  font-style: italic; color: var(--amber2);
  background: linear-gradient(120deg, var(--amber2), #f5a623);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub { font-size: 13.5px; color: #c3d0e2; max-width: 52ch; margin-bottom: 14px; }
.hero-ctas { display: flex; gap: 10px; margin-bottom: 16px; }
.hero-ctas .btn { width: auto; margin-top: 0; padding: 11px 22px; }
.hero-stats {
  display: flex; gap: 22px; list-style: none; padding: 0;
  border-top: 1px solid var(--line-soft); padding-top: 12px;
}
.hero-stats li { display: flex; flex-direction: column; }
.hero-stats b {
  font-family: var(--display); font-size: 22px; font-weight: 600;
  background: linear-gradient(120deg, #fff, #ffd98a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-stats span { font-size: 10.5px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--muted); }
.hero-art { overflow: hidden; border-radius: 14px; }
.heroart { width: 100%; height: auto; display: block; border-radius: 14px; }

.sysart {
  width: 100%; height: auto; display: block;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(3, 8, 16, 0.4);
  transition: transform 0.35s var(--ease), box-shadow 0.35s;
}
.sys-card:hover .sysart, .live-art .sysart:hover { transform: scale(1.03) rotate(-0.5deg); }
.sys-art { margin-bottom: 10px; border-radius: 12px; overflow: hidden; }
.live-art { margin-bottom: 12px; border-radius: 12px; overflow: hidden; }

/* muebles y naturaleza en los planos */
svg .furn { fill: rgba(49, 82, 125, 0.14); stroke: #31527d; stroke-width: 1; }
svg .tile { stroke-width: 1.4; }
svg .vrd { opacity: 0.95; }
svg .tree rect { fill: #7a5c3f; }
svg .tree circle { fill: #7fb069; stroke: #4a7c3f; stroke-width: 1; }
svg .person circle { fill: #31527d; }
svg .person line { stroke: #31527d; stroke-width: 2; }

/* ---------- obra: semaforo, fases, gantt, bitacora ---------- */
.obra-head { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: 10px; }
.semaforo-box { font-size: 13.5px; }
.sem-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line-soft); }
.sem-row b { font-family: var(--mono); display: flex; gap: 8px; align-items: center; }
.sem-bar { position: relative; height: 22px; border-radius: 999px; background: rgba(13, 21, 32, 0.65); border: 1px solid var(--line-soft); overflow: hidden; margin-top: 12px; }
.sem-fill { position: absolute; top: 0; bottom: 0; }
.sem-fill.plan { background: rgba(127, 168, 217, 0.35); border-right: 2px solid var(--steel); transition: width 0.5s var(--ease); }
.sem-fill.real { background: linear-gradient(90deg, var(--amber), var(--amber2)); width: 100%; opacity: 0.85; clip-path: inset(6px 0 6px 0); transition: width 0.5s var(--ease); }
.fase { margin-bottom: 16px; }
.fase-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13.5px; }
.fase-range { width: 100%; accent-color: var(--amber); cursor: pointer; }
.fase-gasto label { font-size: 12px; color: var(--muted); display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.fase-gasto input { width: 130px; }
.gantt { display: flex; flex-direction: column; gap: 7px; }
.gantt-meses { display: flex; gap: 2px; font-size: 9.5px; color: var(--muted); padding-left: 78px; }
.gantt-meses span { flex: 1; text-align: left; }
.gantt-row { display: grid; grid-template-columns: 78px 1fr; gap: 8px; align-items: center; }
.gantt-lbl { font-size: 11.5px; color: var(--muted); text-align: right; }
.gantt-track { position: relative; height: 16px; border-radius: 999px; background: rgba(13, 21, 32, 0.6); border: 1px solid var(--line-soft); }
.gantt-bar { position: absolute; top: 2px; bottom: 2px; border-radius: 999px; background: rgba(127, 168, 217, 0.25); border: 1px solid rgba(127, 168, 217, 0.4); overflow: hidden; transition: all 0.4s var(--ease); }
.gantt-fill { height: 100%; background: linear-gradient(90deg, var(--amber), var(--amber2)); transition: width 0.5s var(--ease); }
.gantt-today { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--bad); border-radius: 2px; }
.hitos { max-height: 260px; overflow-y: auto; }
.bitacora { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.bit-item { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; padding: 9px 12px; border: 1px solid var(--line-soft); border-radius: var(--radius-s); background: rgba(13, 21, 32, 0.4); font-size: 13px; animation: fadeUp 0.35s var(--ease); }
.bit-item p { color: var(--txt); margin-top: 2px; }
.bit-monto { color: var(--amber2); font-family: var(--mono); }
.bit-foto { display: block; margin-top: 8px; max-width: 260px; border-radius: 10px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.bit-del, .prov-item .bit-del { background: none; border: 1px solid var(--line); color: var(--muted); border-radius: 8px; width: 26px; height: 26px; cursor: pointer; flex: none; transition: all 0.2s; }
.bit-del:hover { color: var(--bad); border-color: var(--bad); }

/* ---------- proveedores ---------- */
.prov-list { margin-top: 14px; display: flex; flex-direction: column; gap: 9px; }
.prov-item { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; padding: 10px 13px; border: 1px solid var(--line-soft); border-radius: var(--radius-s); background: rgba(13, 21, 32, 0.4); font-size: 13px; animation: fadeUp 0.35s var(--ease); }
.prov-item p { color: var(--muted); margin-top: 3px; font-size: 12.5px; }
.prov-wa { color: var(--ok); text-decoration: none; font-weight: 600; }
.prov-wa:hover { text-decoration: underline; }

/* ---------- localizador de proveedores ---------- */
.loc-head { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-bottom: 14px; }
.loc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.loc-chip {
  background: rgba(127, 168, 217, 0.08); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 14px; font-size: 12.5px; color: var(--muted);
  cursor: pointer; font-family: inherit;
  transition: all 0.25s var(--ease);
}
.loc-chip:hover { color: var(--txt); border-color: rgba(245, 166, 35, 0.5); transform: translateY(-1px); }
.loc-chip.active {
  background: linear-gradient(135deg, var(--amber2), var(--amber));
  color: #101418; font-weight: 700; border-color: transparent;
  box-shadow: var(--glow-amber);
}
.loc-desc { font-size: 13.5px; margin-bottom: 12px; color: var(--txt); }
.loc-btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; margin-bottom: 6px; text-decoration: none; }
.loc-btn { display: block; text-decoration: none; text-align: center; }
.loc-sub { font-size: 13px; color: var(--amber2); margin: 14px 0 8px; font-weight: 700; }
.loc-tag { cursor: pointer; font-family: inherit; font-size: 11px; padding: 3px 10px; background: rgba(127, 168, 217, 0.12); }
.loc-tag:hover { border-color: var(--amber); color: var(--amber2); }

/* ---------- asistente IA ---------- */
.hero-ia {
  background: linear-gradient(120deg, rgba(127, 168, 217, 0.14), rgba(22, 35, 58, 0.6) 55%);
  border-color: rgba(127, 168, 217, 0.4);
}
.hero-ia h2 { color: var(--steel); }
.hero-ia p { font-size: 13.5px; max-width: 70ch; }
.ia-chat {
  display: flex; flex-direction: column; gap: 12px;
  max-height: 460px; overflow-y: auto; padding: 4px;
  margin-bottom: 12px; min-height: 220px;
}
.ia-msg { max-width: 88%; padding: 12px 15px; border-radius: 16px; animation: fadeUp 0.35s var(--ease); }
.ia-msg.user {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--amber2), var(--amber));
  color: #101418; font-weight: 600; font-size: 13.5px;
  border-bottom-right-radius: 4px;
}
.ia-msg.bot {
  align-self: flex-start;
  background: rgba(27, 43, 70, 0.75); border: 1px solid var(--line);
  border-bottom-left-radius: 4px; backdrop-filter: blur(8px);
}
.ia-msg.byok { border-color: rgba(61, 220, 132, 0.5); }
.ia-rol { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.7px; color: var(--steel); margin-bottom: 4px; }
.ia-titulo { font-size: 14.5px; font-weight: 700; color: var(--amber2); margin-bottom: 8px; }
.ia-bullets { padding-left: 18px; font-size: 13px; display: flex; flex-direction: column; gap: 7px; }
.ia-bullets b { color: var(--amber2); }
.ia-text { font-size: 13px; line-height: 1.6; }
.ia-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ia-action { margin-top: 4px; font-size: 12px; padding: 7px 12px; }

/* ---------- autenticacion ---------- */
.auth-gate {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 13, 21, 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 18px;
  overflow-y: auto;
}
.auth-box { width: 460px; max-width: 100%; max-height: 94vh; overflow-y: auto; }
.auth-brand { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.auth-brand h2 { font-size: 20px; margin: 0; }
.auth-brand p { font-size: 12px; color: var(--muted); }
.auth-providers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.prov-btn {
  border: 1px solid var(--line); background: rgba(127, 168, 217, 0.08);
  color: var(--txt); border-radius: var(--radius-s); padding: 10px 8px;
  font-size: 12.5px; cursor: pointer; font-family: inherit;
  transition: all 0.25s var(--ease);
}
.prov-btn:hover { border-color: var(--steel); transform: translateY(-1px); }
.prov-btn.off { opacity: 0.5; }
.auth-tabs { margin-bottom: 10px; }
.auth-error { color: var(--bad); font-size: 12.5px; min-height: 16px; margin-top: 8px; }
.enroll-qr { display: flex; justify-content: center; margin: 12px 0; }
.qrsvg { width: 190px; height: 190px; background: #fff; border-radius: 10px; padding: 6px; box-shadow: var(--shadow); }
.recovery-box { margin-top: 12px; font-size: 13px; }
.rec-codes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.rec-codes code { background: rgba(245, 166, 35, 0.12); border: 1px solid rgba(245, 166, 35, 0.4); padding: 4px 10px; border-radius: 8px; font-family: var(--mono); }
.tabs-logout {
  background: transparent; color: var(--bad); border: 1px solid rgba(255, 107, 107, 0.5);
  border-radius: 999px; padding: 8px 14px; font-size: 13px; cursor: pointer; font-family: inherit;
  transition: all 0.2s;
}
.tabs-logout:hover { background: rgba(255, 107, 107, 0.12); }
.prov-oauth { display: flex; flex-direction: column; gap: 9px; }
.prov-cfg { display: flex; gap: 6px; align-items: center; }
.prov-cfg input { width: 140px; font-size: 11.5px; padding: 6px 8px; }
.prov-cfg button { cursor: pointer; font-family: inherit; background: none; }

/* ---------- bandas fotograficas y detalles de plano tecnico ---------- */
.band { border-radius: 14px; overflow: hidden; margin-bottom: 16px; box-shadow: var(--shadow); }
.band .bandart { display: block; width: 100%; height: 132px; }
.ruler {
  height: 16px; margin: 2px 0 18px;
  background:
    repeating-linear-gradient(90deg, rgba(200, 220, 245, 0.38) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(90deg, rgba(245, 166, 35, 0.5) 0 1px, transparent 1px 60px);
  background-size: 100% 7px, 100% 13px;
  background-repeat: repeat-x; background-position: bottom;
  border-bottom: 1px solid rgba(200, 220, 245, 0.45);
}
.regmarks i { position: fixed; width: 14px; height: 14px; z-index: 60; pointer-events: none; opacity: 0.5; }
.regmarks i:nth-child(1) { top: 74px; left: 8px; border-left: 1px solid var(--steel); border-top: 1px solid var(--steel); }
.regmarks i:nth-child(2) { top: 74px; right: 8px; border-right: 1px solid var(--steel); border-top: 1px solid var(--steel); }
.regmarks i:nth-child(3) { bottom: 8px; left: 8px; border-left: 1px solid var(--steel); border-bottom: 1px solid var(--steel); }
.regmarks i:nth-child(4) { bottom: 8px; right: 8px; border-right: 1px solid var(--steel); border-bottom: 1px solid var(--steel); }
#planoPlanta, #planoFachada, #planoUbicacion {
  background:
    repeating-linear-gradient(0deg, rgba(127, 168, 217, 0.10) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(127, 168, 217, 0.10) 0 1px, transparent 1px 22px),
    rgba(13, 21, 32, 0.5);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-s);
  padding: 14px;
  transition: border-color 0.3s, background 0.3s;
}
#planoPlanta:hover, #planoFachada:hover, #planoUbicacion:hover { border-color: rgba(245, 166, 35, 0.4); }
.titleblock {
  display: grid; grid-template-columns: repeat(6, 1fr);
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  font-family: var(--mono); margin-bottom: 16px;
  background: rgba(13, 21, 32, 0.45);
}
.titleblock > div { padding: 8px 10px; border-right: 1px solid var(--line); }
.titleblock > div:last-child { border-right: none; }
.titleblock span { display: block; color: var(--muted); font-size: 8.5px; letter-spacing: 1.6px; text-transform: uppercase; margin-bottom: 2px; }
.titleblock b { color: var(--amber2); font-size: 11px; font-weight: 600; }
.stamp {
  width: 118px; height: 118px; border: 2.5px dashed rgba(61, 220, 132, 0.6);
  border-radius: 50%; display: grid; place-items: center; text-align: center;
  transform: rotate(-11deg); color: var(--ok);
  font: 700 10px var(--body); letter-spacing: 1px; line-height: 1.5;
  opacity: 0.85; position: absolute; right: 20px; top: 16px; pointer-events: none;
  box-shadow: inset 0 0 0 4px rgba(13, 21, 32, 0.5), inset 0 0 0 5.5px rgba(61, 220, 132, 0.35);
}
.stamp small { display: block; font-size: 8px; letter-spacing: 2.5px; color: inherit; opacity: 0.8; }

/* ---------- corte de muro y radar ---------- */
.corte-box { margin-top: 4px; overflow-x: auto; }
.corte-box svg.plano { min-width: 480px; background: rgba(13, 21, 32, 0.4); border-radius: var(--radius-s); padding: 8px 6px; }
#radarBox svg.radar { background: rgba(13, 21, 32, 0.35); border-radius: var(--radius-s); padding: 8px; }
svg.radar .lbl { font: 10.5px "Segoe UI", sans-serif; fill: #93a5c0; }

/* ---------- modos de usuario ---------- */
.modo-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.modo-card {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  background: rgba(13, 21, 32, 0.45); border: 1px solid var(--line);
  border-radius: var(--radius-s); padding: 16px 16px 14px;
  color: var(--txt); cursor: pointer; font-family: inherit; text-align: left;
  transition: all 0.25s var(--ease);
}
.modo-card:hover { border-color: rgba(245, 166, 35, 0.55); transform: translateY(-2px); box-shadow: var(--glow-amber); }
.modo-card b { font-size: 14px; }
.modo-card p { font-size: 12px; color: var(--muted); line-height: 1.45; }
.modo-ico { font-size: 24px; }
.modo-btn {
  background: linear-gradient(135deg, var(--amber2), var(--amber));
  border: none; border-radius: 999px; width: 38px; height: 38px;
  font-size: 17px; cursor: pointer; flex: none;
  box-shadow: var(--glow-amber);
}
/* visibilidad segun modo */
.only-cliente, .only-prov { display: none; }
body[data-modo="cliente"] .only-cliente { display: block; }
body[data-modo="proveedor"] .only-prov { display: block; }
/* el cliente no ve el modo de obra avanzado ni la fundacion tecnica */
body[data-modo="cliente"] fieldset.only-pro,
body[data-modo="cliente"] label.only-pro { display: none; }

/* ---------- portfolio / enterprise ---------- */
.estado-sel {
  background: rgba(13, 21, 32, 0.7); color: var(--txt);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 10px; font-size: 12px; font-family: inherit;
}
#pfTable .estado-sel:hover { border-color: var(--steel); }
.partida-item { border-left: 3px solid var(--amber); }
.tpl-item { border-left: 3px solid var(--ok); }

/* ---------- planes / monetización ---------- */
.trial-banner {
  background: linear-gradient(120deg, rgba(245, 166, 35, 0.12), rgba(22, 35, 58, 0.8) 60%);
  border-color: rgba(245, 166, 35, 0.5);
  font-size: 14.5px;
}
.trial-banner b { color: var(--amber2); font-size: 16px; }
.plan-status { font-size: 15px; display: flex; align-items: center; gap: 10px; }
.plan-card {
  position: relative; text-align: left; border-top: 3px solid var(--line);
}
.plan-card.pro { border-top-color: var(--amber); }
.plan-card h3 { font-family: var(--display); font-size: 22px; margin-bottom: 6px; }
.plan-precio { font-size: 32px; font-weight: 800; color: var(--amber2); margin-bottom: 2px; }
.plan-precio span { font-size: 14px; color: var(--muted); font-weight: 400; }
.plan-precio-alt { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.plan-features { list-style: none; padding: 0; font-size: 13.5px; display: flex; flex-direction: column; gap: 7px; }
.plan-features li { color: var(--txt); }
.plan-features li b { color: var(--amber2); }
.plan-badge {
  position: absolute; top: -12px; right: 16px;
  background: linear-gradient(135deg, var(--amber2), var(--amber));
  color: #101418; font-weight: 800; font-size: 11px; letter-spacing: 1.5px;
  padding: 4px 14px; border-radius: 999px; box-shadow: var(--glow-amber);
}

/* ---------- academia de obra ---------- */
.hero-academy {
  background: linear-gradient(120deg, rgba(127, 168, 217, 0.14), rgba(16, 25, 41, 0.85) 55%);
  border-color: rgba(127, 168, 217, 0.4);
}
.hero-academy h2 { font-family: var(--display); font-size: 28px; }
.hero-academy em { font-style: italic; color: var(--amber2); }
.academy-fase { border-left: 3px solid var(--amber); }
.academy-fase h2 { font-family: var(--display); font-size: 19px; color: var(--amber2); margin-bottom: 16px; }
.academy-paso {
  padding: 14px 16px; margin-bottom: 12px;
  background: rgba(13, 21, 32, 0.4);
  border-radius: var(--radius-s);
  border: 1px solid var(--line-soft);
}
.academy-paso h3 { font-size: 15.5px; margin-bottom: 6px; }
.academy-paso .badge { margin-left: 8px; }
.academy-desc { font-size: 13.5px; color: var(--txt); line-height: 1.6; margin: 8px 0; }
.academy-sub { font-size: 12px; font-weight: 700; color: var(--amber2); margin: 10px 0 4px; text-transform: uppercase; letter-spacing: 0.8px; }
.academy-sub.seguridad { color: var(--bad); }
.academy-sub.normas { color: var(--steel); }
.academy-item { font-size: 13px; color: var(--muted); margin: 2px 0 2px 12px; }
.academy-item.seguridad { color: #ffb3b3; }
.academy-item.normas { color: var(--steel); }
.academy-tip {
  font-size: 13px; color: var(--amber2); margin-top: 10px;
  padding: 8px 12px; background: rgba(245, 166, 35, 0.08);
  border-radius: 8px; border-left: 3px solid var(--amber);
}
.academy-error {
  font-size: 13px; color: var(--bad); margin-top: 6px;
  padding: 6px 10px; background: rgba(255, 107, 107, 0.06);
  border-radius: 6px; border-left: 3px solid var(--bad);
}

/* ---------- banner estilo fábrica rústica ---------- */
.fabrica-banner {
  margin-top: 20px;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 2px, transparent 2px 28px),
    linear-gradient(135deg, #2a1f0e, #3d2e14 40%, #2a1f0e);
  border: 3px solid #5c4523;
  border-radius: 4px;
  padding: 0;
  position: relative;
  overflow: hidden;
}
.fabrica-banner::before {
  content: ""; position: absolute; inset: 6px;
  border: 1px dashed rgba(245, 166, 35, 0.35); border-radius: 2px;
  pointer-events: none;
}
.fabrica-inner { padding: 28px 24px 20px; text-align: center; }
.fabrica-stamp {
  display: inline-block;
  font-family: var(--mono); font-size: 11px; font-weight: 800;
  letter-spacing: 4px; color: #f5a623;
  border: 2px solid #f5a623; padding: 4px 18px;
  border-radius: 2px; margin-bottom: 14px;
  transform: rotate(-2deg);
  text-transform: uppercase;
  box-shadow: inset 0 0 8px rgba(245, 166, 35, 0.2);
}
.fabrica-banner h3 {
  font-family: var(--display); font-size: 26px; font-weight: 800;
  color: #ffc75e; letter-spacing: 2px; text-transform: uppercase;
  text-shadow: 2px 2px 4px rgba(0,0,0,.6);
  margin-bottom: 6px;
}
.fabrica-banner p {
  color: #d4b896; font-size: 14px; letter-spacing: 1px;
}
.fabrica-cta { margin-top: 16px; }
.fabrica-cta .btn {
  display: inline-block; width: auto; padding: 10px 28px;
  font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
  border-radius: 2px;
}

/* ---------- diseñador de plantas ---------- */
.ds-room { padding: 10px 12px; margin-bottom: 10px; background: rgba(13,21,32,.4); border-radius: 10px; border: 1px solid var(--line-soft); }
.ds-room-head { display: flex; align-items: center; gap: 8px; }
.ds-room input[type="number"] { background: rgba(13,21,32,.7); border: 1px solid var(--line); border-radius: 6px; color: var(--txt); padding: 5px 8px; font-size: 13px; }
.ds-room input[type="text"] { background: rgba(13,21,32,.7); border: 1px solid var(--line); border-radius: 6px; color: var(--txt); padding: 5px 8px; font-size: 13px; }
.ds-room input:focus { border-color: var(--amber); }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .config-grid, .res-grid, .cash-grid { grid-template-columns: 1fr; }
  .side { position: static; }
  .bar-row { grid-template-columns: 120px 1fr 90px; }
  .hero { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .topbar { flex-direction: column; align-items: stretch; }
  main { padding: 14px; }
  .card { padding: 16px; border-radius: 14px; }
}

/* ---------- accesibilidad: menos movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  body::before, body::after { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- print (efectos fuera) ---------- */
@media print {
  body { background: #fff; color: #111; }
  body::before, body::after, .grain-layer { display: none; }
  .topbar, .foot, .tabs, .actions, .side, .toast { display: none !important; }
  .tab { display: none !important; }
  #tab-results { display: block !important; }
  .card, .kpi {
    border: 1px solid #ccc; background: #fff; color: #111;
    box-shadow: none; backdrop-filter: none; break-inside: avoid;
    animation: none;
  }
  .kpi .k-value, .tbl tfoot td { color: #b45309; }
  .tbl td, .tbl th { border-color: #ddd; color: #111; }
  .kpi .k-label, .kpi .k-sub, .unit-note, .hint { color: #555; }
  .table-wrap { border-color: #ccc; background: #fff; }
  .tbl th { background: #f2f2f2; color: #333; }
  .mini-bar { background: #b45309; animation: none; }
}