/* =============================================================================
   Armario — capa de aplicación
   Consume exclusivamente los tokens de ng-template (css/tokens.css).
   Radios y duraciones son literales por componente: el template no declara
   tokens de radio ni de motion, así que no se inventan acá.
     card / menu / snackbar / tooltip .. 0.5rem
     dialog / datepicker ............... 1rem
     chip .............................. 2rem
   Transición estándar del template ..... 0.2s ease-in-out
   ============================================================================= */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--theme-bg);
  color: var(--theme-text);
  font-family: var(--secondary-font), "Segoe UI", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: var(--font-regular);
  line-height: 1.6;
}

h1, h2, h3, h4 {
  font-family: var(--primary-font), "Segoe UI", system-ui, sans-serif;
  font-weight: var(--font-semibold);
  line-height: 1.25;
  margin: 0;
}

a { color: var(--app-primary); }

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

:focus-visible {
  outline: 0.125rem solid var(--app-primary);
  outline-offset: 0.125rem;
}

.visually-hidden {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   Shell: header + sidenav + contenido
   -------------------------------------------------------------------------- */
.shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--header-height);
  padding: 0.75rem 1rem;
  background: var(--theme-header-bg);
  color: var(--theme-header-text);
}

.topbar__brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.topbar__mark {
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
}

.topbar__name {
  font-family: var(--primary-font), "Segoe UI", system-ui, sans-serif;
  font-weight: var(--font-semibold);
  font-size: 1.0625rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.topbar__sub {
  font-size: 0.8125rem;
  opacity: 0.78;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar__spacer { flex: 1 1 auto; }

/* El disparador del sidenav sólo existe cuando el sidenav es overlay
   (isSmallOrBelow, < 960px). */
.solo-compacto { display: none; }

.iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 0.625rem;
  border: 0.0625rem solid transparent;
  border-radius: 0.5rem;
  background: transparent;
  color: inherit;
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.iconbtn:hover { background: color-mix(in srgb, currentColor 14%, transparent); }

.iconbtn svg { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; }

.iconbtn--label { font-size: 0.875rem; }

.topbar .iconbtn { border-color: color-mix(in srgb, var(--theme-header-text) 34%, transparent); }

.layout {
  display: grid;
  grid-template-columns: var(--navbar-width) minmax(0, 1fr);
  align-items: start;
  min-height: 0;
}

/* -----------------------------------------------------------------------------
   Modo aplicación — instalada en la pantalla de inicio
   El notch y la barra de gestos sólo aparecen acá: dentro del navegador ya los
   resuelve el propio navegador. El atributo lo pone shell.js.
   -------------------------------------------------------------------------- */
[data-standalone='true'] .topbar { padding-top: max(0.75rem, env(safe-area-inset-top)); }
[data-standalone='true'] .sidenav { padding-top: max(1.25rem, env(safe-area-inset-top)); }
[data-standalone='true'] .content { padding-bottom: max(3rem, env(safe-area-inset-bottom)); }
[data-standalone='true'] .aviso { bottom: max(1.25rem, env(safe-area-inset-bottom)); }

/* -----------------------------------------------------------------------------
   Sidenav — lista de perfiles de la familia
   -------------------------------------------------------------------------- */
.sidenav {
  position: sticky;
  top: var(--header-height);
  height: calc(100vh - var(--header-height));
  height: calc(100dvh - var(--header-height));
  overflow-y: auto;
  padding: 1rem 0.75rem 2rem;
  background: var(--theme-sidenav-bg);
  color: var(--theme-sidenav-text);
  border-right: 0.0625rem solid var(--theme-border);
}

.sidenav__title {
  font-size: 0.75rem;
  font-weight: var(--font-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--theme-text-secondary);
  padding: 0.25rem 0.625rem 0.75rem;
}

.perfil {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.5rem 0.625rem;
  margin-bottom: 0.25rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: inherit;
  text-align: left;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.perfil:hover { background: var(--theme-sidenav-hover); }

.perfil[aria-current='true'] {
  background: var(--theme-sidenav-active-bg);
  color: var(--theme-sidenav-active-text);
}

.perfil__avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 2rem;
  background: color-mix(in srgb, var(--app-primary) 14%, var(--theme-bg-elevated));
  display: grid;
  place-items: center;
  overflow: hidden;
}

.perfil__avatar svg { width: 100%; height: 100%; display: block; }

.perfil__nombre {
  display: block;
  font-weight: var(--font-medium);
  font-size: 0.9375rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.perfil__meta {
  display: block;
  font-size: 0.78125rem;
  color: var(--theme-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.perfil[aria-current='true'] .perfil__meta { color: inherit; opacity: 0.8; }

.perfil__alerta {
  grid-column: 2;
  justify-self: start;
  margin-top: 0.125rem;
  font-size: 0.6875rem;
  font-weight: var(--font-semibold);
  padding: 0.0625rem 0.5rem;
  border-radius: 2rem;
  background: var(--result-failure-bg);
  color: var(--result-failure-text);
}

.perfil__alerta[data-tipo='bajo'] {
  background: var(--result-timeout-bg);
  color: var(--result-timeout-text);
}

.sidenav__backdrop { display: none; }

/* -----------------------------------------------------------------------------
   Contenido
   -------------------------------------------------------------------------- */
.content {
  min-width: 0;
  padding: 1.25rem 1.25rem 3rem;
}

.pagehead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1.25rem;
  margin-bottom: 1.25rem;
}

.pagehead h1 { font-size: 1.5rem; }

.pagehead p {
  margin: 0.25rem 0 0;
  color: var(--theme-text-secondary);
  font-size: 0.9375rem;
  max-width: 44rem;
  text-wrap: pretty;
}

.pagehead__side { margin-left: auto; display: flex; gap: 0.5rem; flex-wrap: wrap; }

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

/* -----------------------------------------------------------------------------
   Tarjeta genérica
   -------------------------------------------------------------------------- */
.card {
  background: var(--theme-bg-elevated);
  border: 0.0625rem solid var(--theme-border);
  border-radius: 0.5rem;
  box-shadow: 0 0.0625rem 0.125rem color-mix(in srgb, var(--app-neutral-dark) 12%, transparent);
}

.card__head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1rem;
  border-bottom: 0.0625rem solid var(--theme-divider);
}

.card__head h2 { font-size: 1.0625rem; }

.card__body { padding: 1rem; }

/* -----------------------------------------------------------------------------
   Panel de la silueta
   -------------------------------------------------------------------------- */
.mapa { padding: 0.75rem 0.75rem 1rem; }

.vista {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: 2rem;
  background: var(--theme-bg-surface);
  border: 0.0625rem solid var(--theme-border);
  width: fit-content;
  margin: 0 auto 0.5rem;
}

.vista button {
  min-height: 2.75rem;
  padding: 0 1.25rem;
  border: 0;
  border-radius: 2rem;
  background: transparent;
  font-size: 0.8125rem;
  font-weight: var(--font-medium);
  color: var(--theme-text-secondary);
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.vista button[aria-pressed='true'] {
  background: var(--app-primary);
  color: var(--app-on-primary);
}

.silueta-wrap {
  display: grid;
  place-items: center;
  padding: 0.25rem 0 0.5rem;
}

/* La silueta se dimensiona por ALTO: el viewBox es 1:2, así que fijar el ancho
   la vuelve desproporcionadamente alta en la columna angosta. */
.silueta {
  width: auto;
  height: clamp(17rem, 44vh, 24rem);
  max-width: 100%;
  display: block;
  overflow: visible;
}

.silueta__cuerpo {
  fill: color-mix(in srgb, var(--app-primary) 20%, var(--theme-bg-elevated));
  stroke: none;
  transition: fill 0.2s ease-in-out;
}

/* Zonas cliqueables — el área es la unidad de interacción */
.zona { cursor: pointer; }

.zona__area {
  fill: color-mix(in srgb, var(--app-primary) 6%, transparent);
  stroke: color-mix(in srgb, var(--app-neutral-outline) 70%, transparent);
  stroke-width: 0.9;
  stroke-dasharray: 3 3;
  transition: fill 0.2s ease-in-out, stroke 0.2s ease-in-out, stroke-width 0.2s ease-in-out;
}

.zona__area--limb {
  fill: none;
  stroke-linecap: round;
}

.zona:hover .zona__area,
.zona:focus-visible .zona__area {
  fill: color-mix(in srgb, var(--app-primary) 24%, transparent);
  stroke: var(--app-primary);
  stroke-dasharray: none;
  stroke-width: 1.4;
}

.zona:hover .zona__area--limb,
.zona:focus-visible .zona__area--limb {
  fill: none;
  stroke: color-mix(in srgb, var(--app-primary) 42%, transparent);
}

.zona[aria-pressed='true'] .zona__area {
  fill: color-mix(in srgb, var(--app-primary) 34%, transparent);
  stroke: var(--app-primary);
  stroke-dasharray: none;
  stroke-width: 1.8;
}

.zona[aria-pressed='true'] .zona__area--limb {
  fill: none;
  stroke: color-mix(in srgb, var(--app-primary) 52%, transparent);
}

.zona__badge {
  stroke: var(--theme-bg-elevated);
  stroke-width: 1.6;
  transition: r 0.2s ease-in-out;
}

.zona[data-estado='ok'] .zona__badge { fill: var(--app-success); }
.zona[data-estado='bajo'] .zona__badge { fill: var(--app-warning); }
.zona[data-estado='vacio'] .zona__badge { fill: var(--app-error); }
.zona[data-estado='neutral'] .zona__badge { fill: var(--app-neutral); }

.zona__num {
  font-family: var(--monospace-font), ui-monospace, monospace;
  font-size: 9px;
  font-weight: var(--font-semibold);
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
  fill: var(--app-on-success);
}

.zona[data-estado='bajo'] .zona__num { fill: var(--app-on-warning); }

.leyenda {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.375rem 0.875rem;
  padding: 0.5rem 0.25rem 0;
  border-top: 0.0625rem solid var(--theme-divider);
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--theme-text-secondary);
}

.leyenda span { display: inline-flex; align-items: center; gap: 0.375rem; }

.leyenda i {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 2rem;
  display: inline-block;
}

.leyenda .is-ok { background: var(--app-success); }
.leyenda .is-bajo { background: var(--app-warning); }
.leyenda .is-vacio { background: var(--app-error); }

/* Chips de zona: navegación alternativa, obligatoria en táctil */
.zonachips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  padding: 0.75rem 0.25rem 0.25rem;
}

.zonachip {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  min-height: 2.75rem;
  padding: 0 0.875rem;
  border: 0.0625rem solid var(--theme-border);
  border-radius: 2rem;
  background: var(--theme-bg-surface);
  font-size: 0.8125rem;
  font-weight: var(--font-medium);
  transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.zonachip:hover { border-color: var(--app-primary); }

.zonachip[aria-pressed='true'] {
  background: var(--app-primary-container);
  border-color: var(--app-primary);
  color: var(--app-primary-dark);
}

.zonachip i {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 2rem;
  flex: 0 0 auto;
}

.zonachip[data-estado='ok'] i { background: var(--app-success); }
.zonachip[data-estado='bajo'] i { background: var(--app-warning); }
.zonachip[data-estado='vacio'] i { background: var(--app-error); }
.zonachip[data-estado='neutral'] i { background: var(--app-neutral); }

/* -----------------------------------------------------------------------------
   Panel de inventario de la zona
   -------------------------------------------------------------------------- */
.panel { min-width: 0; }

.panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.875rem;
  padding: 0.875rem 1rem;
  border-bottom: 0.0625rem solid var(--theme-divider);
}

.panel__title { min-width: 0; }

.panel__title h2 { font-size: 1.125rem; }

.panel__title p {
  margin: 0.125rem 0 0;
  font-size: 0.8125rem;
  color: var(--theme-text-secondary);
}

.cobertura {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  background: var(--theme-bg-surface);
  border: 0.0625rem solid var(--theme-border);
}

.cobertura__num {
  font-family: var(--monospace-font), ui-monospace, monospace;
  font-size: 1.25rem;
  font-weight: var(--font-semibold);
  line-height: 1;
}

.cobertura__txt { font-size: 0.75rem; color: var(--theme-text-secondary); line-height: 1.3; }

.cobertura[data-estado='ok'] .cobertura__num { color: var(--app-success); }
.cobertura[data-estado='bajo'] .cobertura__num { color: var(--app-warning); }
.cobertura[data-estado='vacio'] .cobertura__num { color: var(--app-error); }

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  padding: 0.75rem 1rem;
  border-bottom: 0.0625rem solid var(--theme-divider);
}

.filtro {
  min-height: 2.75rem;
  padding: 0 0.875rem;
  border: 0.0625rem solid var(--theme-border);
  border-radius: 2rem;
  background: transparent;
  font-size: 0.8125rem;
  color: var(--theme-text-secondary);
  transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.filtro:hover { border-color: var(--app-primary); color: var(--theme-text); }

.filtro[aria-pressed='true'] {
  background: var(--app-primary);
  border-color: var(--app-primary);
  color: var(--app-on-primary);
}

.grupo { padding: 1rem 1rem 0; }

.grupo:last-of-type { padding-bottom: 1rem; }

.grupo__head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.625rem;
}

.grupo__head h3 {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--theme-text-secondary);
  font-weight: var(--font-semibold);
}

.grupo__head span {
  font-family: var(--monospace-font), ui-monospace, monospace;
  font-size: 0.75rem;
  color: var(--theme-text-disabled);
}

/* Con el switch la tarjeta necesita algo más de ancho: se usa el token de
   card del template en vez de un mínimo suelto. */
.prendas {
  display: grid;
  grid-template-columns: var(--grid-profile-card);
  gap: 0.75rem;
}

.prenda {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  border: 0.0625rem solid var(--theme-border);
  border-radius: 0.5rem;
  background: var(--theme-bg-surface);
  color: inherit;
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.prenda__link {
  display: grid;
  grid-template-columns: 3.75rem minmax(0, 1fr);
  gap: 0.75rem;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.prenda:hover {
  border-color: var(--app-primary);
  box-shadow: 0 0.25rem 0.75rem color-mix(in srgb, var(--app-primary) 18%, transparent);
  transform: translateY(-0.0625rem);
}

.prenda__ph {
  width: 3.75rem;
  height: 4.5rem;
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--app-neutral) 12%, var(--theme-bg-elevated));
  border: 0.0625rem dashed color-mix(in srgb, var(--app-neutral-outline) 60%, transparent);
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* Con foto la miniatura la muestra; sin foto queda el glifo de la categoría. */
.prenda__ph--foto { border-style: solid; padding: 0; }

.prenda__ph--foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.4375rem;
  display: block;
}

.foto-fila {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.foto-mini {
  width: 3.25rem;
  height: 4rem;
  flex: 0 0 auto;
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--app-neutral) 12%, var(--theme-bg-elevated));
  border: 0.0625rem dashed color-mix(in srgb, var(--app-neutral-outline) 60%, transparent);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.foto-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }

.foto-mini[data-vacia='true']::after {
  content: "—";
  color: var(--theme-text-disabled);
  font-size: 0.875rem;
}

.ficha__foto--con { border-style: solid; padding: 0; overflow: hidden; }

.ficha__foto--con img { width: 100%; height: 100%; object-fit: cover; display: block; }

.prenda__ph svg {
  width: 1.75rem;
  height: 1.75rem;
  fill: none;
  stroke: color-mix(in srgb, var(--app-neutral) 88%, transparent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.prenda__nombre {
  font-weight: var(--font-medium);
  font-size: 0.9375rem;
  line-height: 1.3;
  text-wrap: pretty;
}

.prenda__marca {
  font-size: 0.8125rem;
  color: var(--theme-text-secondary);
  margin: 0.125rem 0 0.4375rem;
}

.prenda__tags { display: flex; flex-wrap: wrap; gap: 0.3125rem; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  font-weight: var(--font-semibold);
  letter-spacing: 0.01em;
  padding: 0.125rem 0.5rem;
  border-radius: 2rem;
  background: var(--agent-default-bg);
  color: var(--agent-default-text);
  white-space: nowrap;
}

.tag--talle {
  font-family: var(--monospace-font), ui-monospace, monospace;
  background: var(--agent-ui-bg);
  color: var(--agent-ui-text);
}

.tag--activo { background: var(--result-success-bg); color: var(--result-success-text); }
.tag--lavado { background: var(--result-timeout-bg); color: var(--result-timeout-text); }
.tag--chico { background: var(--result-failure-bg); color: var(--result-failure-text); }
.tag--guardado { background: var(--agent-devops-bg); color: var(--agent-devops-text); }
.tag--reparacion { background: var(--agent-bff-bg); color: var(--agent-bff-text); }
.tag--heredada { background: var(--agent-planner-bg); color: var(--agent-planner-text); }
/* -----------------------------------------------------------------------------
   Switch de disponibilidad
   El modelo tiene diez estados de ciclo; el switch los RESUME, no los reemplaza:
   encendido = disponible, apagado = guardado, y el texto de abajo siempre dice
   el estado real para que una prenda en lavado no se lea como "guardada".
   -------------------------------------------------------------------------- */
.switch {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 0.375rem;
  cursor: pointer;
}

.switch input {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  opacity: 0;
  pointer-events: none;
}

.switch__track {
  position: relative;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 1.5rem;
  border-radius: 2rem;
  background: color-mix(in srgb, var(--app-neutral) 42%, transparent);
  transition: background-color 0.2s ease-in-out;
}

.switch__track::after {
  content: "";
  position: absolute;
  top: 0.1875rem;
  left: 0.1875rem;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 2rem;
  background: var(--theme-bg-elevated);
  box-shadow: 0 0.0625rem 0.125rem color-mix(in srgb, var(--app-neutral-dark) 34%, transparent);
  transition: transform 0.2s ease-in-out;
}

.switch input:checked + .switch__track { background: var(--app-success); }

.switch input:checked + .switch__track::after { transform: translateX(1rem); }

.switch input:focus-visible + .switch__track {
  outline: 0.125rem solid var(--app-primary);
  outline-offset: 0.125rem;
}

.switch input:disabled + .switch__track { opacity: 0.4; }

.switch:has(input:disabled) { cursor: not-allowed; }

.switch__txt {
  font-size: 0.6875rem;
  font-weight: var(--font-medium);
  line-height: 1.2;
  color: var(--theme-text-secondary);
  text-align: center;
  max-width: 5rem;
}

.switch input:checked ~ .switch__txt { color: var(--result-success-text); }

.tag--salida { background: var(--agent-migration-bg); color: var(--agent-migration-text); }
.tag--archivo { background: var(--agent-frontend-legacy-bg); color: var(--agent-frontend-legacy-text); }

/* Una prenda fuera de circulación se sigue viendo, pero no se lee como
   inventario disponible. */
.prenda[data-fuera='true'] .prenda__ph { opacity: 0.55; }

.prenda[data-fuera='true'] .prenda__nombre {
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--app-neutral) 65%, transparent);
}

.vacio {
  margin: 1rem;
  padding: 1.5rem 1.25rem;
  border: 0.0625rem dashed color-mix(in srgb, var(--app-error) 45%, transparent);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--app-error) 5%, transparent);
  text-align: center;
}

.vacio h3 { font-size: 1rem; margin-bottom: 0.375rem; }

.vacio p {
  margin: 0 auto 1rem;
  max-width: 30rem;
  font-size: 0.875rem;
  color: var(--theme-text-secondary);
  text-wrap: pretty;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  min-height: 2.75rem;
  padding: 0 1.125rem;
  border: 0.0625rem solid var(--app-primary);
  border-radius: 0.5rem;
  background: var(--app-primary);
  color: var(--app-on-primary);
  font-size: 0.875rem;
  font-weight: var(--font-medium);
  text-decoration: none;
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.btn:hover { background: var(--app-primary-dark); border-color: var(--app-primary-dark); }

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

.btn--ghost:hover {
  background: var(--app-primary-container);
  border-color: var(--app-primary);
  color: var(--app-primary-dark);
}

.btn svg { width: 1.125rem; height: 1.125rem; }

/* -----------------------------------------------------------------------------
   Ficha de ejemplar
   -------------------------------------------------------------------------- */
.ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1.25rem;
  align-items: start;
}

.ficha__foto {
  aspect-ratio: 4 / 5;
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--app-neutral) 10%, var(--theme-bg-elevated));
  border: 0.0625rem dashed color-mix(in srgb, var(--app-neutral-outline) 60%, transparent);
  display: grid;
  place-items: center;
  gap: 0.5rem;
  color: var(--theme-text-disabled);
  font-size: 0.8125rem;
}

.ficha__foto svg {
  width: 4rem;
  height: 4rem;
  fill: none;
  stroke: color-mix(in srgb, var(--app-neutral) 80%, transparent);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dims { display: grid; gap: 0.875rem; }

.dim__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  font-size: 0.8125rem;
}

.dim__label { color: var(--theme-text-secondary); }

.dim__valor { font-weight: var(--font-semibold); }

.meter {
  height: 0.5rem;
  border-radius: 2rem;
  background: color-mix(in srgb, var(--app-neutral) 22%, transparent);
  overflow: hidden;
  margin-top: 0.3125rem;
}

.meter i {
  display: block;
  height: 100%;
  border-radius: 2rem;
  background: var(--app-secondary);
}

.meter[data-nivel='medio'] i { background: var(--app-warning); }
.meter[data-nivel='bajo'] i { background: var(--app-error); }

.escala {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.3125rem;
}

.escala span {
  flex: 1 1 0;
  min-height: 0.5rem;
  border-radius: 2rem;
  background: color-mix(in srgb, var(--app-neutral) 22%, transparent);
}

.escala span[data-on='true'] { background: var(--app-primary); }

.linea { display: grid; gap: 0.875rem; margin: 0; padding: 0; list-style: none; }

.hito {
  display: grid;
  grid-template-columns: 0.625rem minmax(0, 1fr);
  gap: 0.75rem;
  position: relative;
}

.hito::before {
  content: "";
  width: 0.625rem;
  height: 0.625rem;
  margin-top: 0.375rem;
  border-radius: 2rem;
  background: var(--app-primary);
}

.hito--traspaso::before { background: var(--app-tertiary); }
.hito--lavado::before { background: var(--app-neutral); }

.hito time {
  display: block;
  font-family: var(--monospace-font), ui-monospace, monospace;
  font-size: 0.75rem;
  color: var(--theme-text-disabled);
}

.hito p { margin: 0.0625rem 0 0; font-size: 0.875rem; text-wrap: pretty; }

.acciones { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Mover una prenda dentro de la casa y sacarla del inventario son dos
   decisiones distintas: van en bloques separados y el segundo lo dice. */
.grupo-acc + .grupo-acc {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 0.0625rem solid var(--theme-divider);
}

.grupo-acc h3 {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: var(--font-semibold);
  color: var(--theme-text-secondary);
  margin-bottom: 0.25rem;
}

.grupo-acc p {
  margin: 0 0 0.875rem;
  font-size: 0.8125rem;
  color: var(--theme-text-secondary);
  max-width: 46rem;
  text-wrap: pretty;
}

.grupo-acc--salida h3 { color: var(--app-error); }

.grupo-acc--salida .btn--ghost:hover {
  background: color-mix(in srgb, var(--app-error) 10%, transparent);
  border-color: var(--app-error);
  color: var(--app-error);
}

.hito--salida::before { background: var(--app-error); }

.dato {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 0.0625rem solid var(--theme-divider);
  font-size: 0.875rem;
}

.dato:last-child { border-bottom: 0; }

.dato dt { color: var(--theme-text-secondary); }

.dato dd { margin: 0; font-weight: var(--font-medium); text-align: right; }

/* -----------------------------------------------------------------------------
   Launcher (index)
   -------------------------------------------------------------------------- */
.hero {
  padding: 2.5rem 1.5rem;
  border-radius: 0.5rem;
  background: var(--theme-bg-elevated);
  border: 0.0625rem solid var(--theme-border);
  margin-bottom: 1.25rem;
}

.hero .eyebrow {
  font-family: var(--monospace-font), ui-monospace, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--app-primary);
  font-weight: var(--font-semibold);
}

.hero h1 {
  font-size: clamp(1.625rem, 4vw, 2.5rem);
  margin: 0.5rem 0 0.75rem;
  max-width: 26ch;
}

.hero p {
  margin: 0;
  max-width: 52ch;
  color: var(--theme-text-secondary);
  text-wrap: pretty;
}

.pantallas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19.74rem), 1fr));
  gap: 1rem;
}

.pantalla {
  display: block;
  padding: 1.25rem;
  border-radius: 0.5rem;
  border: 0.0625rem solid var(--theme-border);
  background: var(--theme-bg-elevated);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.pantalla:hover {
  border-color: var(--app-primary);
  box-shadow: 0 0.375rem 1rem color-mix(in srgb, var(--app-primary) 16%, transparent);
}

.pantalla__n {
  font-family: var(--monospace-font), ui-monospace, monospace;
  font-size: 0.75rem;
  color: var(--app-primary);
  font-weight: var(--font-semibold);
}

.pantalla h2 { font-size: 1.0625rem; margin: 0.375rem 0 0.375rem; }

.pantalla p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--theme-text-secondary);
  text-wrap: pretty;
}

.familia {
  display: grid;
  grid-template-columns: var(--gallery-pic-width);
  gap: 0.75rem;
}

.familia a {
  display: grid;
  justify-items: center;
  gap: 0.125rem;
  padding: 1rem 0.5rem 0.875rem;
  border: 0.0625rem solid var(--theme-border);
  border-radius: 0.5rem;
  background: var(--theme-bg-elevated);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.familia a:hover {
  border-color: var(--app-primary);
  box-shadow: 0 0.375rem 1rem color-mix(in srgb, var(--app-primary) 16%, transparent);
}

.familia svg {
  width: 100%;
  max-width: 5.5rem;
  height: auto;
  margin-bottom: 0.5rem;
}

.familia b { font-size: 0.9375rem; font-weight: var(--font-medium); }

.familia span { font-size: 0.75rem; color: var(--theme-text-secondary); }

.familia em {
  font-style: normal;
  font-size: 0.6875rem;
  font-weight: var(--font-semibold);
  margin-top: 0.375rem;
  padding: 0.0625rem 0.5rem;
  border-radius: 2rem;
  background: var(--result-failure-bg);
  color: var(--result-failure-text);
}

.familia em[data-tipo='bajo'] { background: var(--result-timeout-bg); color: var(--result-timeout-text); }

.familia em[data-tipo='ok'] { background: var(--result-success-bg); color: var(--result-success-text); }

.nota {
  margin-top: 1.25rem;
  padding: 1rem 1.125rem;
  border-radius: 0.5rem;
  border: 0.0625rem solid var(--theme-border);
  border-left: 0.25rem solid var(--app-tertiary);
  background: var(--theme-bg-elevated);
  font-size: 0.875rem;
  color: var(--theme-text-secondary);
  text-wrap: pretty;
}

.nota strong { color: var(--theme-text); }

/* -----------------------------------------------------------------------------
   Pantalla de datos: backup, importación y borrado
   -------------------------------------------------------------------------- */
.dt-cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: 0.75rem;
}

.dt-cifra {
  padding: 0.875rem 1rem;
  border-radius: 0.5rem;
  background: var(--theme-bg-surface);
  border: 0.0625rem solid var(--theme-border);
}

.dt-cifra b {
  display: block;
  font-family: var(--monospace-font), ui-monospace, monospace;
  font-size: 1.5rem;
  font-weight: var(--font-semibold);
  line-height: 1.1;
}

.dt-cifra span {
  font-size: 0.75rem;
  color: var(--theme-text-secondary);
  text-wrap: pretty;
}

/* El bloque destructivo se lee distinto antes de tocarlo, no después. */
.dt-peligro { border-color: color-mix(in srgb, var(--app-error) 45%, var(--theme-border)); }

.dt-peligro .card__head h2 { color: var(--app-error); }

.btn--peligro {
  background: var(--app-error);
  border-color: var(--app-error);
  color: var(--app-on-error);
}

.btn--peligro:hover {
  background: color-mix(in srgb, var(--app-error) 82%, black);
  border-color: color-mix(in srgb, var(--app-error) 82%, black);
}

.btn--peligro[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* -----------------------------------------------------------------------------
   Talles: sugerencia editable y tablas de equivalencia
   -------------------------------------------------------------------------- */
.campo__ayuda {
  font-size: 0.75rem;
  color: var(--theme-text-secondary);
  min-height: 1.1rem;
  text-wrap: pretty;
}

.campo__ayuda b {
  font-family: var(--monospace-font), ui-monospace, monospace;
  font-weight: var(--font-semibold);
  color: var(--app-primary-dark);
}

.paises {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.pais {
  min-height: 2.75rem;
  padding: 0 0.875rem;
  border: 0.0625rem solid var(--theme-border);
  border-radius: 2rem;
  background: var(--theme-bg-elevated);
  font-size: 0.8125rem;
  font-weight: var(--font-medium);
  color: var(--theme-text-secondary);
  transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.pais:hover { border-color: var(--app-primary); color: var(--theme-text); }

.pais[aria-pressed='true'] {
  background: var(--app-primary);
  border-color: var(--app-primary);
  color: var(--app-on-primary);
}

.tt-scroll {
  overflow-x: auto;
  border: 0.0625rem solid var(--theme-border);
  border-radius: 0.5rem;
}

.tt-tabla {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.tt-tabla th,
.tt-tabla td {
  padding: 0.625rem 0.75rem;
  text-align: left;
  border-bottom: 0.0625rem solid var(--theme-divider);
  white-space: nowrap;
}

.tt-tabla thead th {
  position: sticky;
  top: 0;
  background: var(--theme-bg-surface);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--theme-text-secondary);
  font-weight: var(--font-semibold);
}

.tt-tabla tbody td {
  font-family: var(--monospace-font), ui-monospace, monospace;
  font-weight: var(--font-medium);
}

.tt-tabla tbody td:last-child {
  font-family: var(--secondary-font), "Segoe UI", system-ui, sans-serif;
  font-weight: var(--font-regular);
  color: var(--theme-text-secondary);
  white-space: normal;
}

.tt-tabla tbody tr:last-child td { border-bottom: 0; }

.tt-tabla th[data-destacado='true'],
.tt-tabla td[data-destacado='true'] { background: color-mix(in srgb, var(--app-primary) 8%, transparent); }

.tt-tabla tr[data-actual='true'] td {
  background: var(--app-primary-container);
  color: var(--app-primary-dark);
}

.tt-tabla tr[data-actual='true'] td:first-child { box-shadow: inset 0.1875rem 0 0 var(--app-primary); }

.tt-marcas { display: grid; gap: 0.5rem; }

.tt-marca {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.875rem;
  border: 0.0625rem solid var(--theme-border);
  border-radius: 0.5rem;
  background: var(--theme-bg-surface);
}

.tt-marca__nombre { font-weight: var(--font-medium); }

.tt-marca__meta { font-size: 0.8125rem; color: var(--theme-text-secondary); }

.tt-marca__talle {
  font-family: var(--monospace-font), ui-monospace, monospace;
  font-size: 1.125rem;
  font-weight: var(--font-semibold);
}

.tt-tend {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: var(--font-semibold);
  padding: 0.125rem 0.5rem;
  border-radius: 2rem;
  background: var(--result-success-bg);
  color: var(--result-success-text);
}

.tt-tend[data-t='talla chico'],
.tt-tend[data-t='talla algo chico'] { background: var(--result-timeout-bg); color: var(--result-timeout-text); }

.tt-tend[data-t='talla grande'] { background: var(--agent-ui-bg); color: var(--agent-ui-text); }

/* -----------------------------------------------------------------------------
   Onboarding de una persona
   -------------------------------------------------------------------------- */
.ob {
  width: min(100%, 60rem);
  margin: 0 auto;
}

.ob-progreso {
  display: flex;
  gap: 0.375rem;
  margin-bottom: 1.5rem;
}

.ob-progreso div {
  flex: 1 1 0;
  height: 0.25rem;
  border-radius: 2rem;
  background: color-mix(in srgb, var(--app-neutral) 24%, transparent);
  transition: background-color 0.2s ease-in-out;
}

.ob-progreso div[data-hecho='true'] { background: var(--app-primary); }

.ob-cuenta {
  font-family: var(--monospace-font), ui-monospace, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--app-primary);
  font-weight: var(--font-semibold);
  margin: 0 0 0.375rem;
}

.ob-paso { display: none; }

.ob-paso[data-activo='true'] { display: block; }

.ob-paso h1 {
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  margin: 0 0 0.5rem;
  text-wrap: balance;
}

.ob-paso > p {
  margin: 0 0 1.5rem;
  color: var(--theme-text-secondary);
  max-width: 46rem;
  text-wrap: pretty;
}

.ob-sub {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: var(--font-semibold);
  color: var(--theme-text-secondary);
  margin: 1.5rem 0 0.75rem;
}

/* Elección del cuerpo */
.ob-tipos {
  display: grid;
  grid-template-columns: var(--gallery-pic-width);
  gap: 0.75rem;
}

.ob-tipo {
  display: grid;
  justify-items: center;
  gap: 0.125rem;
  padding: 0.875rem 0.5rem 0.75rem;
  border: 0.125rem solid var(--theme-border);
  border-radius: 0.5rem;
  background: var(--theme-bg-elevated);
  color: inherit;
  text-align: center;
  transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.ob-tipo:hover { border-color: var(--app-primary); }

.ob-tipo[aria-pressed='true'] {
  border-color: var(--app-primary);
  background: var(--app-primary-container);
}

.ob-tipo svg { width: 100%; max-width: 4rem; height: auto; margin-bottom: 0.375rem; }

.ob-tipo b { font-size: 0.875rem; font-weight: var(--font-medium); }

.ob-tipo span { font-size: 0.6875rem; color: var(--theme-text-secondary); }

.ob-tipo[aria-pressed='true'] span { color: var(--app-primary-dark); }

/* Contextos */
.ob-contextos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ob-contexto {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 0.0625rem solid var(--theme-border);
  border-radius: 2rem;
  background: var(--theme-bg-elevated);
  font-size: 0.9375rem;
  transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.ob-contexto::before {
  content: "";
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 0.25rem;
  border: 0.125rem solid var(--app-neutral-outline);
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.ob-contexto[aria-pressed='true'] {
  border-color: var(--app-primary);
  background: var(--app-primary-container);
  color: var(--app-primary-dark);
}

.ob-contexto[aria-pressed='true']::before {
  background: var(--app-primary);
  border-color: var(--app-primary);
}

.ob-minimos {
  margin-top: 1.5rem;
  padding: 1rem 1.125rem;
  border-radius: 0.5rem;
  background: var(--theme-bg-surface);
  border: 0.0625rem solid var(--theme-border);
}

.ob-minimos h2 {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--theme-text-secondary);
  margin-bottom: 0.75rem;
}

.ob-minimos__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
  gap: 0.5rem 1rem;
}

.ob-min {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.25rem 0;
  font-size: 0.875rem;
  border-bottom: 0.0625rem solid var(--theme-divider);
}

.ob-min b {
  font-family: var(--monospace-font), ui-monospace, monospace;
  font-weight: var(--font-semibold);
  color: var(--app-primary-dark);
}

.ob-min[data-cero='true'] b { color: var(--theme-text-disabled); }

.ob-nota {
  margin: 0.875rem 0 0;
  font-size: 0.8125rem;
  color: var(--theme-text-secondary);
  text-wrap: pretty;
}

/* Alta de prendas dentro del onboarding */
.ob-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 0.875rem;
  padding: 1.125rem;
  border-radius: 0.5rem;
  border: 0.0625rem solid var(--theme-border);
  background: var(--theme-bg-elevated);
}

.ob-form__titulo {
  grid-column: 1 / -1;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--theme-text-secondary);
  font-weight: var(--font-semibold);
  margin: 0;
}

.ob-form__titulo + .campo { grid-column: 1 / -1; }

.ob-form__estado {
  grid-column: 1 / -1;
  padding-top: 0.875rem;
  border-top: 0.0625rem solid var(--theme-divider);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 0.875rem;
}

.campo output {
  font-family: var(--monospace-font), ui-monospace, monospace;
  font-size: 0.8125rem;
  font-weight: var(--font-semibold);
  color: var(--app-primary-dark);
}

.campo input[type='range'] {
  width: 100%;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  accent-color: var(--app-primary);
}

.ob-form__pie {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.ob-form__pie p {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--theme-text-secondary);
}

.ob-lista {
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

.ob-item {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  border: 0.0625rem solid var(--theme-border);
  background: var(--theme-bg-surface);
}

.ob-item__ph {
  width: 2.75rem;
  height: 3.25rem;
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--app-neutral) 12%, var(--theme-bg-elevated));
  border: 0.0625rem dashed color-mix(in srgb, var(--app-neutral-outline) 60%, transparent);
  display: grid;
  place-items: center;
}

.ob-item__ph svg {
  width: 1.375rem;
  height: 1.375rem;
  fill: none;
  stroke: color-mix(in srgb, var(--app-neutral) 88%, transparent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ob-item__nombre { font-weight: var(--font-medium); font-size: 0.9375rem; }

.ob-item__tags { display: flex; flex-wrap: wrap; gap: 0.3125rem; margin-top: 0.25rem; }

.ob-quitar {
  min-width: 2.75rem;
  min-height: 2.75rem;
  border: 0.0625rem solid var(--theme-border);
  border-radius: 0.5rem;
  background: transparent;
  color: var(--theme-text-secondary);
  display: grid;
  place-items: center;
  transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.ob-quitar:hover { border-color: var(--app-error); color: var(--app-error); }

.ob-quitar svg { width: 1.125rem; height: 1.125rem; }

/* Cierre */
.ob-final {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 1.75rem;
  align-items: start;
  padding: 1.5rem;
  border-radius: 0.5rem;
  border: 0.0625rem solid var(--theme-border);
  background: var(--theme-bg-elevated);
}

.ob-final .silueta { height: clamp(14rem, 32vh, 19rem); margin: 0 auto; }

.ob-final .zona { cursor: default; pointer-events: none; }

.ob-resumen { display: grid; gap: 0.75rem; }

.ob-resumen h2 { font-size: 1.125rem; }

.ob-cobertura {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: 0.5rem;
}

.ob-cob {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  background: var(--theme-bg-surface);
  border-left: 0.1875rem solid var(--app-neutral);
}

.ob-cob[data-estado='ok'] { border-left-color: var(--app-success); }
.ob-cob[data-estado='bajo'] { border-left-color: var(--app-warning); }
.ob-cob[data-estado='vacio'] { border-left-color: var(--app-error); }

.ob-cob b { font-family: var(--monospace-font), ui-monospace, monospace; }

/* Navegación del asistente */
.ob-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 0.0625rem solid var(--theme-border);
}

.ob-nav__spacer { flex: 1 1 auto; }

.ob-error {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  font-weight: var(--font-medium);
  color: var(--app-error);
}

.ob-error:empty { display: none; }

/* -----------------------------------------------------------------------------
   Responsive — rangos de BreakpointService (600 / 960 / 1280 / 1920)
   -------------------------------------------------------------------------- */
@media (max-width: 1279.98px) {
  .workspace { grid-template-columns: minmax(0, 17.5rem) minmax(0, 1fr); }
}

/* isSmallOrBelow: el sidenav pasa a overlay */
@media (max-width: 959.98px) {
  .layout { grid-template-columns: minmax(0, 1fr); }

  .sidenav {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 60;
    width: min(20rem, 86vw);
    height: 100vh;
    height: 100dvh;
    padding-top: 1.25rem;
    transform: translateX(-102%);
    transition: transform 0.2s ease-in-out;
    box-shadow: 0 0 2rem color-mix(in srgb, var(--app-neutral-dark) 34%, transparent);
  }

  .shell[data-nav='open'] .sidenav { transform: translateX(0); }

  .shell[data-nav='open'] .sidenav__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 50;
    border: 0;
    padding: 0;
    background: color-mix(in srgb, var(--app-neutral-dark) 52%, transparent);
  }

  .workspace { grid-template-columns: minmax(0, 1fr); }

  .content { padding: 1rem 1rem 3rem; }

  .solo-compacto { display: inline-flex; }

  /* En una sola columna sobra ancho: la silueta crece y sus áreas también. */
  .silueta { height: clamp(20rem, 52vh, 30rem); }
}

@media (max-width: 599.98px) {
  .topbar { padding: 0.625rem 0.75rem; }
  .topbar__sub { display: none; }
  .content { padding: 0.875rem 0.75rem 3rem; }
  .pagehead h1 { font-size: 1.25rem; }
  .panel__head { padding: 0.875rem 0.875rem; }
  .cobertura { margin-left: 0; width: 100%; }
  .filtros { padding: 0.625rem 0.875rem; }
  .grupo { padding: 0.875rem 0.875rem 0; }
  .prenda__link { grid-template-columns: 3.25rem minmax(0, 1fr); }
  .prenda__ph { width: 3.25rem; height: 4rem; }
  .switch { padding: 0 0.125rem; }
  .switch__txt { max-width: 4rem; }
  .hero { padding: 1.75rem 1.125rem; }
  .ob-form { padding: 0.875rem; }
  .ob-nav .btn { width: 100%; }
  .ob-nav__spacer { display: none; }
}

@media (max-width: 799.98px) {
  .ob-final { grid-template-columns: minmax(0, 1fr); }
}

/* -----------------------------------------------------------------------------
   Diálogo de alta rápida + snackbar
   -------------------------------------------------------------------------- */
.dlg {
  width: min(30rem, 92vw);
  padding: 0;
  border: 0;
  border-radius: 1rem;
  background: var(--theme-bg-elevated);
  color: var(--theme-text);
  box-shadow: 0 1.5rem 3rem color-mix(in srgb, var(--app-neutral-dark) 38%, transparent);
}

/* ::backdrop no hereda custom properties en todos los motores: primero el
   respaldo neutro, después el mismo scrim resuelto contra el token. */
.dlg::backdrop { background: rgba(0, 0, 0, 0.55); }
.dlg::backdrop { background: color-mix(in srgb, var(--app-neutral-dark) 58%, transparent); }

.dlg__head {
  padding: 1.25rem 1.25rem 0.25rem;
}

.dlg__head h2 { font-size: 1.125rem; }

.dlg__head p {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  color: var(--theme-text-secondary);
}

.dlg__body {
  padding: 1rem 1.25rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 0.875rem;
}

.campo { display: grid; gap: 0.25rem; }

.campo--ancho { grid-column: 1 / -1; }

.campo label {
  font-size: 0.75rem;
  font-weight: var(--font-medium);
  color: var(--theme-text-secondary);
}

.campo input,
.campo select {
  min-height: 2.75rem;
  padding: 0 0.75rem;
  border: 0.0625rem solid var(--theme-border);
  border-radius: 0.5rem;
  background: var(--theme-bg-surface);
  color: var(--mat-form-field-outlined-input-text-color);
  font: inherit;
  font-size: 0.9375rem;
}

.campo input:focus,
.campo select:focus {
  outline: 0.125rem solid var(--app-primary);
  outline-offset: 0.0625rem;
  border-color: var(--app-primary);
}

.dlg__foot {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.25rem 1.25rem 1.25rem;
}

.aviso {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  z-index: 80;
  transform: translate(-50%, 1.5rem);
  max-width: min(28rem, 92vw);
  padding: 0.875rem 1.125rem;
  border-radius: 0.5rem;
  background: var(--app-neutral-dark);
  color: var(--app-neutral-surface);
  font-size: 0.875rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.aviso[data-visible='true'] { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .prenda:hover { transform: none; }
}