:root {
  --bg: #f4f3f0;
  --surface: #ffffff;
  --ink: #1d1d1f;
  --ink-soft: #6b6b70;
  --line: #e3e1dc;
  --hover: #f0efec;   /* fondo de hover en botones/items */
  --neutral: #ecebe7; /* chip/badge neutro (sin estado) */
  --radius: 10px;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.04);
}

/* Tema oscuro: espejo cálido del papel (marrón-carbón, no negro frío). Los
   pills de acento (estado/compra) se mantienen; sí oscurecemos los fondos de
   panel completos más abajo, para que no encandilen sobre superficie oscura. */
[data-theme="dark"] {
  --bg: #1a1815;
  --surface: #232019;
  --ink: #ececea;
  --ink-soft: #a39d90;
  --line: #3a352d;
  --hover: #2c2820;
  --neutral: #322e26;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 16px rgba(0, 0, 0, 0.35);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

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

.topbar h1 {
  margin: 0;
  font-size: 1.25rem;
}

.topbar__sub {
  margin: 0.15rem 0 0;
  color: var(--ink-soft);
  font-size: 0.85rem;
}

.topbar__actions {
  display: flex;
  gap: 0.5rem;
  flex: none;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem;
}

/* --- Ambiente --- */
.ambiente {
  margin-bottom: 2rem;
}

.ambiente__head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

.ambiente__head h2 {
  margin: 0;
  font-size: 1.05rem;
}

.ambiente__m2 {
  margin-left: auto;
  color: var(--ink-soft);
  font-size: 0.85rem;
}

.badge {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--neutral);
  color: var(--ink-soft);
}

.badge--social { background: #e0edff; color: #1f5fb8; }
.badge--privado { background: #e6f0e6; color: #2e7d4f; }
.badge--bano { background: #eae4f5; color: #6a4ca3; }
.badge--servicio { background: #f0ece2; color: #8a6d3b; }

/* --- Cards --- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.85rem;
}

.card {
  display: flex;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.swatch {
  position: relative;
  width: 56px;
  flex: 0 0 56px;
  background: var(--swatch, #ddd);
  background-size: cover;
  background-position: center;
}
.swatch--clickable { cursor: pointer; }
/* Affordance de "subir foto" — siempre visible cuando el swatch es solo color
   (sin imagen aún), para que se note que la barra es clickeable. El scrim de
   abajo hace legible el ícono sobre colores claros u oscuros. */
.swatch--clickable:not(.swatch--img)::after {
  content: "＋ foto";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: end center;
  padding-bottom: 8px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0) 55%);
  opacity: 0.92;
  transition: opacity 0.15s;
}
.swatch--clickable:not(.swatch--img):hover::after { opacity: 1; }
.swatch__rm {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}
.swatch--img:hover .swatch__rm { opacity: 1; }

.card__body {
  padding: 0.7rem 0.8rem;
  min-width: 0;
}

.card__kind {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.card__title {
  margin: 0.15rem 0;
  font-size: 0.95rem;
}

.card__meta {
  margin: 0 0 0.45rem;
  color: var(--ink-soft);
  font-size: 0.8rem;
}

/* --- Estado de decisión --- */
.estado {
  display: inline-block;
  font-size: 0.7rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  text-transform: capitalize;
}

.estado--cerrado { background: #e6f4ea; color: #1e7d3a; }
.estado--candidato { background: #fef3d8; color: #9a6b00; }
.estado--pendiente { background: #fde8e6; color: #b3261e; }
.estado--reabierto { background: #ffe9d6; color: #b35b00; }

.error {
  padding: 1rem;
  background: #fde8e6;
  border-radius: var(--radius);
  color: #b3261e;
}

/* --- Botón + pestañas --- */
.btn {
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-size: 0.85rem;
  cursor: pointer;
}

.btn:hover {
  background: var(--hover);
}

.btn--icon {
  padding: 0.5rem 0.65rem;
  font-size: 1rem;
  line-height: 1;
}

.tabs {
  display: flex;
  gap: 0.25rem;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.75rem 1.5rem 0;
}

.tab {
  padding: 0.45rem 0.9rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.9rem;
  cursor: pointer;
}

.tab--active {
  background: var(--ink);
  color: var(--surface); /* auto-invierte: pill oscura en light, pill clara en dark */
}

.subhead {
  margin: 1rem 0 0.5rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

/* --- Cards: artefacto / falta --- */
.card--artefacto .card__body {
  width: 100%;
}

.card--falta {
  border-style: dashed;
  border-color: #e0b970;
  background: #fffaf0;
}

.card__nota {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-style: italic;
}

/* --- Banner de nota --- */
.banner {
  margin: 0.75rem 0;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius);
  background: #fef3d8;
  color: #6b4e00;
  font-size: 0.85rem;
}

/* --- Estado de compra --- */
.compra--pendiente { background: #fde8e6; color: #b3261e; }
.compra--comprado { background: #e0edff; color: #1f5fb8; }
.compra--entregado { background: #e6f4ea; color: #1e7d3a; }

/* --- Vista qué me falta --- */
.grupo {
  margin-bottom: 1.75rem;
}

.grupo__head {
  margin: 0 0 0.6rem;
  font-size: 1rem;
}

.grupo__vacio {
  color: var(--ink-soft);
  font-size: 0.85rem;
}

.faltantes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.faltante {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.8rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}

.faltante:hover {
  border-color: var(--ink-soft);
}

.faltante__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.faltante__label {
  font-size: 0.9rem;
}

.faltante__sub {
  font-size: 0.78rem;
  color: var(--ink-soft);
}

/* --- Controles interactivos en cards --- */
.controles {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.55rem;
}

.chip {
  border: none;
  border-radius: 999px;
  padding: 0.18rem 0.55rem;
  font-size: 0.72rem;
  cursor: pointer;
  text-transform: capitalize;
}

.chip:hover {
  filter: brightness(0.95);
}

/* Chip de sólo lectura (modo público): muestra el avance sin ser interactivo. */
.chip--ro { cursor: default; }
.chip--ro:hover { filter: none; }

.instalado {
  background: var(--neutral);
  color: var(--ink-soft);
}

.instalado--on {
  background: #e6f4ea;
  color: #1e7d3a;
}

/* --- Tema oscuro: fondos de panel completos (los pills chicos quedan igual) --- */
[data-theme="dark"] .card--falta {
  background: #2a2415;
  border-color: #6b5a2a;
}
[data-theme="dark"] .banner {
  background: #2e2710;
  color: #e8c97a;
}
[data-theme="dark"] .error {
  background: #321a18;
  color: #f0a9a2;
}