:root {
  --azul: #0D3B65;
  --verde: #4DB69C;
  --hueso: #E9E5D6;
  --gris: #4A4A4A;
  --negro: #1B1B1B;
  --panel-bg: #14202b;
  --panel-bg-2: #1a2b38;
  --borde: #2a3d4d;
  --texto: #e9e5d6;
  --texto-tenue: #9fb0bd;
  font-family: "Aktiv Grotesk", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--negro);
  color: var(--texto);
}

h1, h2, h3 {
  font-family: "Orpheus Pro Condensed", Georgia, serif;
  font-weight: 600;
  margin: 0 0 0.4em 0;
}

a { color: var(--verde); }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
  background: var(--azul);
  border-bottom: 1px solid var(--borde);
}

.topbar .marca {
  font-family: "Orpheus Pro Condensed", Georgia, serif;
  font-size: 1.3rem;
  color: white;
  text-decoration: none;
}
.nav-menu { display: flex; gap: 0.4rem; }
.nav-link {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  padding: 0.35rem 0.9rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.9rem;
}
.nav-link:hover { background: rgba(255,255,255,0.12); }
.nav-link.activo { background: var(--verde); color: var(--negro); }
.nav-ayuda {
  width: 1.6rem; height: 1.6rem; padding: 0; margin-left: 0.3rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid rgba(255,255,255,0.4);
}

/* Home */
.home-wrap { min-height: calc(100vh - 60px); display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
.home-hero { width: min(760px, 100%); text-align: center; }
.home-hero h1 { font-size: 2.4rem; }
.home-sub { color: var(--texto-tenue); margin-bottom: 1.5rem; }
.home-nombre { max-width: 460px; margin: 0 auto 1rem; text-align: center; }
.home-prompt { background: var(--panel-bg); border: 1px solid var(--borde); border-radius: 12px; padding: 1rem; }
.home-prompt textarea {
  width: 100%; background: var(--panel-bg-2); border: 1px solid var(--borde);
  color: var(--texto); border-radius: 8px; padding: 0.9rem; font-size: 1.05rem; resize: vertical;
}
.home-prompt-acciones { display: flex; gap: 0.6rem; justify-content: center; margin-top: 0.8rem; }
.home-prompt-acciones .btn { padding: 0.6rem 1.4rem; font-size: 1rem; }
#home-mic.grabando { background: #c0392b; color: white; }
.home-links { margin-top: 1.2rem; }
.home-links a { color: var(--texto-tenue); text-decoration: none; }

/* tarjeta de proyecto con eliminar */
.tarjeta-obra { position: relative; display: flex; align-items: flex-start; justify-content: space-between; }
.tarjeta-obra .tarjeta-link { text-decoration: none; color: var(--texto); flex: 1; }
.btn-eliminar-obra {
  background: transparent; border: none; color: var(--texto-tenue); cursor: pointer;
  font-size: 1rem; padding: 0.2rem 0.4rem; border-radius: 6px;
}
.btn-eliminar-obra:hover { background: rgba(192,57,43,0.2); color: #e74c3c; }

.btn {
  background: var(--verde);
  color: var(--negro);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
}
.btn:hover { opacity: 0.9; }
.btn.secundario {
  background: transparent;
  border: 1px solid var(--verde);
  color: var(--verde);
}
.btn.chico { padding: 0.3rem 0.7rem; font-size: 0.85rem; }

.contenedor {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem;
}

.lista-obras {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
.tarjeta-obra {
  background: var(--panel-bg);
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 1rem;
  text-decoration: none;
  color: var(--texto);
  display: block;
}
.tarjeta-obra:hover { border-color: var(--verde); }
.tarjeta-obra .nombre { font-weight: 600; }
.tarjeta-obra .meta { font-size: 0.8rem; color: var(--texto-tenue); }

.proyecto-layout {
  display: grid;
  grid-template-columns: 320px 1fr 300px;
  gap: 1rem;
  height: calc(100vh - 60px);
  padding: 1rem;
}
.panel {
  background: var(--panel-bg);
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 1rem;
  overflow-y: auto;
}
.panel h3 { color: var(--verde); font-size: 1rem; text-transform: uppercase; letter-spacing: 0.05em; }

.historial-item {
  background: var(--panel-bg-2);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.5rem;
  cursor: pointer;
  border: 1px solid transparent;
}
.historial-item.vigente { border-color: var(--verde); }
.historial-item.en-vista { outline: 1px dashed var(--verde); }
.historial-item .hist-acciones { display: flex; gap: 0.3rem; margin-top: 0.4rem; }
.historial-item .prompt { font-size: 0.85rem; color: var(--texto-tenue); }
.historial-item .cambios { font-size: 0.75rem; margin-top: 0.3rem; }
.chip {
  display: inline-block;
  background: var(--azul);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  font-size: 0.7rem;
  margin: 0.1rem;
}
.chip.warn { background: #7a5c00; }

.form-refinamiento {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
#btn-mic.grabando { background: #c0392b; color: white; }
.form-refinamiento textarea {
  flex: 1;
  background: var(--panel-bg-2);
  border: 1px solid var(--borde);
  color: var(--texto);
  border-radius: 6px;
  padding: 0.5rem;
  resize: vertical;
  min-height: 2.5rem;
}

fieldset {
  border: 1px solid var(--borde);
  border-radius: 6px;
  margin-bottom: 0.75rem;
  padding: 0.6rem 0.8rem;
}
legend { color: var(--verde); font-size: 0.85rem; text-transform: uppercase; }
label { display: block; font-size: 0.8rem; margin-top: 0.4rem; color: var(--texto-tenue); }
input, select {
  width: 100%;
  background: var(--panel-bg-2);
  border: 1px solid var(--borde);
  color: var(--texto);
  border-radius: 4px;
  padding: 0.35rem 0.5rem;
  margin-top: 0.15rem;
}
input[type="checkbox"] { width: auto; }

.centro-vacio {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--texto-tenue);
  text-align: center;
}

.cards-resumen { display: flex; flex-direction: column; gap: 0.6rem; }
.card {
  background: var(--panel-bg-2);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
}
.card .valor { font-size: 1.2rem; font-weight: 600; color: var(--verde); }
.card .label { font-size: 0.75rem; color: var(--texto-tenue); }
.aviso-estimacion { font-size: 0.72rem; color: #c9a94a; margin-top: 0.6rem; line-height: 1.3; }

/* Ajustes */
.ajustes-tabs { display: flex; gap: 0.25rem; margin: 1rem 0; flex-wrap: wrap; }
.ajustes-tabs .tab {
  background: transparent; border: 1px solid var(--borde); color: var(--texto-tenue);
  padding: 0.4rem 0.9rem; cursor: pointer; border-radius: 6px; font-weight: 600;
}
.ajustes-tabs .tab.activa { color: var(--negro); background: var(--verde); border-color: var(--verde); }
.ajustes-sec fieldset { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.3rem 0.8rem; }
.ajustes-acciones { display: flex; gap: 0.5rem; justify-content: flex-end; margin: 1rem 0 2rem; }
.tabla-catalogo { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.tabla-catalogo th, .tabla-catalogo td { padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--borde); text-align: left; }
.tabla-catalogo th { color: var(--texto-tenue); text-transform: uppercase; font-size: 0.7rem; }

.abertura-card {
  background: var(--panel-bg-2);
  border: 1px solid var(--borde);
  border-radius: 6px;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
}
.abertura-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem 0.5rem;
}
.abertura-grid label { margin-top: 0.2rem; font-size: 0.72rem; }
.abertura-card .btn-quitar-abertura { margin-top: 0.4rem; }

/* Suelo SPT */
.spt-row { display: grid; grid-template-columns: 2.2rem 3.5rem 1fr auto auto; gap: 0.3rem; align-items: center; margin-bottom: 0.25rem; }
.spt-row .spt-prof { font-size: 0.75rem; color: var(--texto-tenue); }
.spt-row input[type="number"] { width: 100%; }
#fund-propuesta { margin-top: 0.6rem; }
#fund-propuesta .fund-carga { font-size: 0.8rem; color: var(--verde); margin-bottom: 0.4rem; }
#fund-propuesta table { width: 100%; }

/* Panel de pre-visualización */
#panel-preview { display: flex; flex-direction: column; padding: 0.5rem; overflow: hidden; }
.preview-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
}
.preview-toolbar select { width: auto; }
#viewer-wrap {
  position: relative;
  flex: 1;
  min-height: 300px;
  background: #0b141c;
  border-radius: 6px;
  overflow: hidden;
}
#viewer-3d { width: 100%; height: 100%; }
#viewer-3d canvas { display: block; }
#viewer-2d { width: 100%; height: 100%; display: none; }
#viewer-2d svg { width: 100%; height: 100%; }
#panel-capas {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: rgba(20, 32, 43, 0.9);
  border: 1px solid var(--borde);
  border-radius: 6px;
  padding: 0.5rem 0.7rem;
  font-size: 0.8rem;
  max-height: 90%;
  overflow-y: auto;
}
.capas-titulo { color: var(--verde); text-transform: uppercase; font-size: 0.7rem; margin-bottom: 0.3rem; }
.capa-row { display: flex; align-items: center; gap: 0.4rem; margin: 0.15rem 0; cursor: pointer; }
.capa-row input { width: auto; margin: 0; }
.swatch { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }

/* Tabs Proyecto/Presupuesto */
.tabs-centro { display: flex; gap: 0.25rem; margin-bottom: 0.4rem; }
.tabs-centro .tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--texto-tenue);
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  font-weight: 600;
}
.tabs-centro .tab.activa { color: var(--verde); border-bottom-color: var(--verde); }
#tab-proyecto { display: flex; flex-direction: column; height: calc(100% - 2.5rem); }
#tab-presupuesto { height: calc(100% - 2.5rem); overflow-y: auto; padding-right: 0.3rem; }

/* Tabla de presupuesto */
.tabla-presupuesto { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.tabla-presupuesto th, .tabla-presupuesto td {
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--borde);
  text-align: left;
}
.tabla-presupuesto th { color: var(--texto-tenue); font-weight: 600; text-transform: uppercase; font-size: 0.7rem; }
.tabla-presupuesto td.num, .tabla-presupuesto th:nth-child(n+2) { text-align: right; }
.tabla-presupuesto input { width: 7rem; text-align: right; }
.presupuesto-total {
  display: flex;
  justify-content: space-between;
  padding: 0.8rem 0.5rem;
  font-size: 1.05rem;
}
.presupuesto-total strong { color: var(--verde); }

/* Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
.modal {
  background: var(--panel-bg);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 1.2rem 1.5rem;
  width: min(560px, 92vw);
  max-height: 88vh;
  overflow-y: auto;
}
.modal-nota { color: var(--texto-tenue); font-size: 0.8rem; }
.costo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.3rem 0;
  color: var(--texto);
}
.costo-row span { font-size: 0.8rem; }
.costo-row input { width: 10rem; }
.modal-acciones { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem; }

/* ---------- V4: toasts, errores de form, panel de miembro, modales ---------- */
#toasts {
  position: fixed; bottom: 1rem; right: 1rem; z-index: 9999;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.toast {
  background: var(--panel-bg-2); color: var(--texto);
  border-left: 3px solid var(--verde); border-radius: 6px;
  padding: 0.6rem 0.9rem; font-size: 0.85rem; max-width: 340px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.45);
  opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s;
}
.toast.visible { opacity: 1; transform: translateY(0); }
.toast-error { border-left-color: #e74c3c; }

.form-errores {
  background: rgba(231,76,60,0.12); border: 1px solid #e74c3c;
  border-radius: 6px; padding: 0.6rem 0.8rem; margin-top: 0.6rem; font-size: 0.8rem;
}
.form-errores-titulo { font-weight: 600; color: #e74c3c; margin-bottom: 0.3rem; }
.form-errores ul { margin: 0; padding-left: 1.1rem; }
input.campo-error, select.campo-error { border-color: #e74c3c; background: rgba(231,76,60,0.08); }

.guardar-sticky {
  position: sticky; bottom: 0; background: var(--panel-bg);
  padding: 0.6rem 0 0.2rem; margin-top: 0.75rem;
  border-top: 1px solid var(--borde); display: flex; align-items: center; gap: 0.6rem;
}
.guardar-sticky .btn { flex: 1; }
.ind-sucio { font-size: 0.72rem; color: #e0a800; white-space: nowrap; }

#panel-miembro {
  position: absolute; left: 0.6rem; bottom: 0.6rem; z-index: 6;
  background: rgba(20,32,43,0.95); border: 1px solid var(--borde);
  border-radius: 8px; padding: 0.7rem 0.9rem; min-width: 210px; max-width: 280px;
}
.panel-miembro-cerrar {
  position: absolute; top: 0.2rem; right: 0.35rem; background: none;
  border: none; color: var(--texto-tenue); cursor: pointer; font-size: 0.85rem;
}
.pm-grupo { font-size: 0.72rem; color: var(--texto-tenue); text-transform: uppercase; letter-spacing: 0.04em; }
.pm-perfil { font-size: 1.05rem; font-weight: 600; color: var(--verde); margin: 0.15rem 0; }
.pm-detalle { font-size: 0.75rem; color: var(--texto-tenue); margin-bottom: 0.55rem; }
.capas-ayuda { font-size: 0.68rem; color: var(--texto-tenue); margin-top: 0.25rem; line-height: 1.3; }
.capa-row.modo-secciones { font-weight: 600; }

.modal-fondo {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 9998;
  display: flex; align-items: center; justify-content: center;
}
.modal-box {
  background: var(--panel-bg); border: 1px solid var(--borde); border-radius: 10px;
  padding: 1.2rem; min-width: 320px; max-width: 90vw;
}
.modal-box h3 { margin-bottom: 0.3rem; }
.modal-sub { font-size: 0.8rem; color: var(--texto-tenue); margin-bottom: 0.8rem; }
.modal-box select { margin-bottom: 1rem; }
.modal-acciones { display: flex; gap: 0.5rem; justify-content: flex-end; }

/* ---------- V4-F3: cabecera de obra, colapsables, buscador, overrides ---------- */
.obra-cabecera { margin-bottom: 0.9rem; }
.obra-nombre {
  font-family: "Orpheus Pro Condensed", Georgia, serif; font-size: 1.15rem;
  font-weight: 600; background: transparent; border: 1px solid transparent;
  color: var(--texto); padding: 0.25rem 0.4rem;
}
.obra-nombre:hover, .obra-cliente:hover { border-color: var(--borde); }
.obra-nombre:focus, .obra-cliente:focus { border-color: var(--verde); background: var(--panel-bg-2); }
.obra-cliente {
  font-size: 0.8rem; background: transparent; border: 1px solid transparent;
  color: var(--texto-tenue); padding: 0.2rem 0.4rem; margin-top: 0.15rem;
}
.hint-versiones { font-size: 0.7rem; color: var(--texto-tenue); line-height: 1.35; margin: 0 0 0.5rem; }
.hint-perfiles { font-size: 0.7rem; color: var(--texto-tenue); line-height: 1.35; margin: 0.5rem 0 0.2rem; }

details.fs-colapsable {
  border: 1px solid var(--borde); border-radius: 6px;
  margin-bottom: 0.5rem; padding: 0 0.8rem;
}
details.fs-colapsable > summary {
  cursor: pointer; color: var(--verde); font-size: 0.85rem; text-transform: uppercase;
  letter-spacing: 0.03em; padding: 0.5rem 0; font-weight: 600; list-style: revert;
}
details.fs-colapsable[open] { padding-bottom: 0.7rem; }
details.fs-colapsable > summary:hover { color: var(--texto); }
.fs-ayuda {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.1rem; height: 1.1rem; margin-left: 0.3rem; border-radius: 50%;
  border: 1px solid var(--borde); color: var(--texto-tenue); text-decoration: none;
  font-size: 0.7rem; font-weight: 700; text-transform: none; letter-spacing: 0;
  vertical-align: middle;
}
.fs-ayuda:hover { color: var(--verde); border-color: var(--verde); }

.buscador { max-width: 320px; }

.badge-override {
  display: inline-block; background: #7a5c00; color: var(--texto);
  border-radius: 999px; padding: 0.05rem 0.4rem; font-size: 0.62rem; margin-left: 0.4rem;
  vertical-align: middle;
}
.btn-volver-default {
  background: none; border: none; color: var(--texto-tenue); cursor: pointer;
  font-size: 0.8rem; padding: 0 0.2rem; margin-left: 0.15rem;
}
.btn-volver-default:hover { color: var(--verde); }
input.con-override { border-color: #b8860b; background: rgba(184,134,11,0.12); }
tr.linea-override td:first-child { border-left: 2px solid #b8860b; }

.tarjeta-acciones { display: flex; flex-direction: column; gap: 0.15rem; }
.btn-icono {
  background: transparent; border: none; color: var(--texto-tenue); cursor: pointer;
  font-size: 0.95rem; padding: 0.15rem 0.35rem; border-radius: 6px; line-height: 1;
}
.btn-icono:hover { background: rgba(77,182,156,0.18); color: var(--verde); }
.btn-eliminar-obra:hover { background: rgba(192,57,43,0.2); color: #e74c3c; }

.banner-aviso {
  background: rgba(224,168,0,0.14); border: 1px solid #e0a800; border-radius: 6px;
  padding: 0.55rem 0.8rem; font-size: 0.8rem; margin-bottom: 0.7rem;
}
.spt-vacio { font-size: 0.75rem; color: var(--texto-tenue); line-height: 1.35; margin: 0.3rem 0; }
.badge-vigente { background: var(--verde); color: var(--negro); font-weight: 600; }
input.campo-aplicado, select.campo-aplicado {
  border-color: var(--verde); background: rgba(77,182,156,0.15);
  transition: background .4s, border-color .4s;
}

/* ---------- V5: página de ayuda ---------- */
.ayuda { max-width: 860px; }
.ayuda h2 {
  color: var(--verde); font-size: 1.15rem; margin-top: 2rem;
  border-bottom: 1px solid var(--borde); padding-bottom: 0.3rem;
}
.ayuda p { line-height: 1.6; color: var(--texto); }
.ayuda code {
  background: var(--panel-bg-2); border: 1px solid var(--borde); border-radius: 4px;
  padding: 0.05rem 0.35rem; font-size: 0.85em;
}
.ayuda-indice {
  display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem;
  background: var(--panel-bg); border: 1px solid var(--borde); border-radius: 8px;
  padding: 0.8rem 1rem; margin: 1rem 0 1.5rem;
}
.ayuda-indice a { text-decoration: none; font-size: 0.85rem; }
.ayuda-indice a:hover { text-decoration: underline; }
.tabla-normativa-wrap { overflow-x: auto; }