/* ============================================================
   El armario de Diana — estilos del módulo de prendas y muebles.
   Se apoya en los tokens y las clases de styles.css; aquí solo va
   lo que es propio del armario.
   ============================================================ */

/* ---------------- Pestañas (Tomas | Armario) ---------------- */
.pestanas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--surface-2);
}
.pestana {
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 99px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.pestana.is-on {
  background: var(--surface);
  border-color: var(--line);
  color: var(--accent-btn);
  font-weight: 700;
  box-shadow: var(--sh-sm);
}

/* La vista es un div suelto dentro del grid de .app, así que el gap de
   .app no llega a sus tarjetas: se lo damos aquí. */
#vistaArmario {
  display: grid;
  gap: 14px;
  align-content: start;
}

/* ---------------- Cabecera del armario ---------------- */
.card--armario {
  display: grid;
  gap: 12px;
  padding: 18px 16px;
}
.arm__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.arm__cuenta {
  flex: none;
  padding: 3px 10px;
  border-radius: 99px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: .76rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* input[type=search] no entra en los selectores de styles.css y hay que
   vestirlo entero; el appearance quita el estilo nativo de iOS. */
.arm__buscar {
  width: 100%;
  min-height: 44px;
  padding: 11px 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-size: .95rem;
  font-weight: 500;
  -webkit-appearance: none;
  appearance: none;
}
.arm__buscar::placeholder { color: var(--muted); }
.arm__buscar::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Tres botones en una fila que tiene que caber en 320px de pantalla. */
.arm__acciones {
  display: flex;
  gap: 8px;
}
.arm__acciones > * {
  flex: 1 1 auto;
  min-width: 0;
  padding-inline: 10px;
  font-size: .85rem;
  white-space: nowrap;
}

/* Chips de los filtros activos */
.arm__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.arm__chips:empty { display: none; }

.chip-filtro {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  min-height: 44px;
  padding: 0 0 0 12px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--accent-sf);
  color: var(--ink);
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}
/* La × ocupa los 44px de alto del chip para que se pueda pulsar de verdad. */
.chip-filtro__x {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}
.chip-filtro__x:hover { color: var(--ink); }

/* ---------------- Rejilla de prendas ---------------- */
/* En móvil va a una columna con la tarjeta tumbada: lo que se busca aquí es
   dónde está la prenda, y ese texto no cabe en media pantalla. Desde 480px
   entran dos columnas y la tarjeta se pone de pie. */
.rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.prenda {
  display: flex;
  flex-direction: row;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
  box-shadow: var(--sh-sm);
  cursor: pointer;
  transition: transform .12s ease, border-color .15s ease;
}
.prenda:active { transform: scale(.98); }

.prenda__foto {
  position: relative;
  flex: none;
  width: 108px;
  aspect-ratio: 1;
  background: var(--surface-2);
}
/* La foto va fuera de flujo: si contara como contenido, una imagen más alta
   que ancha estiraría el marco y se perdería el cuadrado. */
.prenda__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.prenda__sinfoto {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 8px;
  color: var(--muted);
  font-size: .72rem;
  text-align: center;
  /* Rayado muy suave para que el hueco sin foto no parezca un fallo de carga. */
  background:
    repeating-linear-gradient(45deg,
      color-mix(in srgb, var(--line) 45%, transparent) 0 6px,
      transparent 6px 12px);
}

/* Tumbada la foto son 108px: la insignia se queda pequeña para no taparla. */
.prenda__talla {
  position: absolute;
  top: 5px;
  right: 5px;
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--surface);
  color: var(--ink);
  font-size: .66rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: var(--sh-sm);
}

.prenda__cuerpo {
  flex: 1;
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 10px 12px;
}
.prenda__titulo {
  font-size: .84rem;
  font-weight: 700;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.prenda__sub {
  font-size: .74rem;
  color: var(--muted);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* El sitio es el dato que se viene a buscar, así que fluye en varias líneas
   en vez de recortarse; por eso deja de ser una píldora de una sola línea.
   Tumbada caben tres, que es lo que pide una ubicación larga a 320px. */
.prenda__sitio {
  justify-self: start;
  max-width: 100%;
  margin-top: 2px;
  padding: 3px 8px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--muted);
  font-size: .7rem;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Ya no le queda: se apaga la imagen y se tacha el nombre. La opacidad va
   solo en la foto, nunca en el texto ni en la talla: ahí dejaría de leerse. */
.prenda.es-pequena { border-style: dashed; box-shadow: none; }
.prenda.es-pequena .prenda__foto img { opacity: .45; }
.prenda.es-pequena .prenda__titulo {
  color: var(--muted);
  text-decoration: line-through;
}

/* En la lavadora: franja de "agua" al pie de la foto. */
.prenda.es-lavadora { border-color: var(--warm); }
.prenda.es-lavadora .prenda__foto::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 7px;
  background:
    repeating-linear-gradient(-45deg,
      var(--warm) 0 5px,
      color-mix(in srgb, var(--warm) 30%, transparent) 5px 10px);
}

@media (min-width: 480px) {
  .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prenda { flex-direction: column; }
  .prenda__foto { width: auto; }
  .prenda__cuerpo { align-content: start; padding: 8px 10px 10px; }
  .prenda__talla { top: 6px; right: 6px; padding: 2px 8px; font-size: .7rem; }
  /* De pie la columna es más ancha y con dos líneas ya entra la ubicación. */
  .prenda__sitio { -webkit-line-clamp: 2; }
}

/* ---------------- Estado vacío ---------------- */
/* El estado iba antes solo en el color del borde. Ahora se dice con letras,
   que es lo único que sirve para quien no distingue ese color. */
.prenda__estado {
  align-self: start;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--accent-sf);
  color: var(--accent-btn);
  font-size: .7rem;
  font-weight: 700;
}

/* Rótulo de cada fila del mueble: antes solo lo oía un lector de pantalla. */
.mueble__rotulo {
  margin: 10px 0 4px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.mueble__rotulo:first-child { margin-top: 0; }

.vacio-armario {
  /* Suele pintarse dentro de .rejilla: sin esto ocuparía una sola columna. */
  grid-column: 1 / -1;
  padding: 30px 18px;
  border: 1.5px dashed var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--muted);
  font-size: .88rem;
  text-align: center;
}
.vacio-armario strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
  font-size: .96rem;
}
.vacio-armario .ghostbtn { margin-top: 12px; }

/* ---------------- Foto dentro del diálogo ---------------- */
.foto {
  display: grid;
  justify-items: center;
  gap: 10px;
}
.foto__marco {
  position: relative;
  width: min(100%, 220px);
  /* Vacío ocupaba 220px de alto y dejaba "Dónde está", el estado y las notas
     siempre por debajo del pliegue en un móvil. Solo se hace cuadrado
     cuando hay algo que enseñar. */
  min-height: 84px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1.5px dashed var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.foto__marco:has(img:not([hidden])) { aspect-ratio: 1; }

.foto__marco img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.foto__vacia {
  color: var(--muted);
  font-size: .85rem;
}
.foto__botones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

/* ---------------- Muebles ---------------- */
.mueble {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.mueble + .mueble { margin-top: 10px; }

.mueble__nombre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  color: var(--ink);
  font-size: .95rem;
  font-weight: 700;
}
.mueble__nombre > span { min-width: 0; }
.mueble__nombre .ghostbtn { flex: none; }

.mueble__filas { display: grid; gap: 8px; }
.mueble__fila {
  display: flex;
  align-items: stretch;
  gap: 6px;
}

/* Cada hueco se queda con la misma parte del ancho de su fila. */
.hueco {
  flex: 1 1 0;
  min-width: 0;
  min-height: 52px;
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 2px;
  padding: 8px 4px;
  border: 1.5px solid var(--track);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: .68rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .15s ease, background .15s ease;
}
.hueco:active { transform: scale(.97); }

.hueco__n {
  min-width: 22px;
  padding: 1px 6px;
  border-radius: 99px;
  background: var(--accent-sf);
  color: var(--ink);
  font-size: .9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.hueco.es-vacio {
  border-style: dashed;
  background: transparent;
}
.hueco.es-vacio .hueco__n {
  background: transparent;
  color: var(--muted);
  font-weight: 600;
}

/* El dibujo de cada hueco imita al mueble real. El data-tipo puede venir
   en el hueco o en la fila entera. */
.hueco[data-tipo="cajon"]::before,
.mueble__fila[data-tipo="cajon"] .hueco::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 42%;
  height: 3px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--muted) 45%, var(--track));
}
.hueco[data-tipo="cajon"],
.mueble__fila[data-tipo="cajon"] .hueco { padding-top: 14px; }

/* Balda: solo el estante de abajo. */
.hueco[data-tipo="balda"],
.mueble__fila[data-tipo="balda"] .hueco {
  border-width: 0 0 4px 0;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  border-color: color-mix(in srgb, var(--muted) 45%, var(--track));
  background: transparent;
}

/* Barra: la percha va arriba. */
.hueco[data-tipo="barra"],
.mueble__fila[data-tipo="barra"] .hueco {
  border-width: 4px 0 0 0;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  border-color: color-mix(in srgb, var(--muted) 45%, var(--track));
  background: transparent;
}

/* Zapatero: las bandejas se insinúan con dos listones al pie, por debajo
   del número, para no cruzarlo con rayas. */
.hueco[data-tipo="zapatero"],
.mueble__fila[data-tipo="zapatero"] .hueco {
  background:
    linear-gradient(180deg,
      transparent 0 66%,
      color-mix(in srgb, var(--muted) 45%, var(--track)) 66% 69%,
      transparent 69% 84%,
      color-mix(in srgb, var(--muted) 45%, var(--track)) 84% 87%,
      transparent 87%);
}

/* Caja: de quita y pon, por eso el trazo discontinuo. */
.hueco[data-tipo="caja"],
.mueble__fila[data-tipo="caja"] .hueco {
  border-style: dashed;
  border-radius: var(--r-md);
}

/* Los campos del diálogo de filtros cuelgan de un div sin hueco propio. */
#filtrosCampos { display: grid; gap: 12px; }

/* ---------------- Editor de filas de un mueble ---------------- */
.filaEditor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.filaEditor + .filaEditor { margin-top: 8px; }
.filaEditor > * { min-width: 0; }

.filaEditor select,
.filaEditor__tipo { flex: 1 1 116px; }
.filaEditor input[type="number"],
.filaEditor__cols { flex: 0 1 78px; }
.filaEditor input[type="text"],
.filaEditor__etiqueta { flex: 1 1 130px; }
/* Los campos que vengan envueltos en .field arrastran el ancho de su hijo. */
.filaEditor .field { flex: 1 1 116px; }

.filaEditor__x {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.filaEditor__x:hover { color: var(--accent-btn); border-color: var(--accent); }