/* ============================================================
   CATÁLOGO ADMINISTRABLE — catalogo.css
   Extiende la paleta y tipografía de styles.css
   ============================================================ */

.contenedor-catalogo {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px 100px;
  min-height: 100vh;
}

.catalogo-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 0 8px;
  gap: 16px;
  flex-wrap: wrap;
}
.enlace-volver {
  color: var(--texto-secundario);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  transition: color 200ms ease;
}
.enlace-volver:hover {
  color: var(--dorado);
}

.catalogo-titulo-wrap {
  padding: 20px 0 32px;
  border-bottom: 1px solid var(--borde-suave);
  margin-bottom: 32px;
}
.catalogo-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dorado);
  margin: 0 0 12px;
}
.catalogo-titulo {
  font-family: var(--fuente-display);
  font-size: clamp(1.8rem, 4.5vw, 2.6rem);
  color: var(--crema);
  margin: 0 0 12px;
  font-weight: 600;
}
.catalogo-sub {
  color: var(--texto-secundario);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
  max-width: 62ch;
}

/* ============ PANEL DE AJUSTE GLOBAL ============ */
.panel-ajuste-global {
  background: var(--negro-panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  padding: 22px 24px;
  margin-bottom: 28px;
}
.panel-fila {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.panel-campo label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--texto-terciario);
  margin-bottom: 10px;
}
.panel-input-grupo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.panel-input-grupo select,
.panel-input-grupo input[type="number"] {
  font-family: var(--fuente-ui);
  background: var(--negro-fondo);
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-sm);
  color: var(--texto-principal);
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 600;
}
.panel-input-grupo select {
  cursor: pointer;
}
.panel-input-grupo input[type="number"] {
  width: 80px;
}
.panel-input-grupo select:focus,
.panel-input-grupo input:focus {
  outline: none;
  border-color: var(--dorado);
}
.panel-simbolo {
  color: var(--texto-secundario);
  font-weight: 700;
  font-size: 15px;
}
.panel-nota {
  font-size: 12.5px;
  color: var(--texto-terciario);
  margin: 16px 0 0;
}

/* ============ FILTROS ============ */
.filtros-barra {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.filtro-chip {
  font-family: var(--fuente-ui);
  font-weight: 700;
  font-size: 13px;
  background: transparent;
  border: 1.5px solid var(--borde);
  color: var(--texto-secundario);
  padding: 9px 16px;
  border-radius: 100px;
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
}
.filtro-chip:hover {
  border-color: var(--ambar);
  color: var(--texto-principal);
}
.filtro-chip.activo {
  background: linear-gradient(135deg, var(--dorado), var(--ambar));
  border-color: transparent;
  color: #1a1206;
}
.filtro-buscar {
  margin-left: auto;
  font-family: var(--fuente-ui);
  background: var(--negro-panel);
  border: 1.5px solid var(--borde);
  border-radius: 100px;
  color: var(--texto-principal);
  padding: 10px 18px;
  font-size: 13.5px;
  min-width: 220px;
}
.filtro-buscar:focus {
  outline: none;
  border-color: var(--dorado);
}
.filtro-buscar::placeholder {
  color: var(--texto-terciario);
}

/* ============ GRID DE CATÁLOGO ============ */
.grid-catalogo {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.fila-catalogo {
  display: grid;
  grid-template-columns: 88px 1fr 200px;
  gap: 20px;
  align-items: center;
  background: var(--negro-panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-md);
  padding: 16px 18px;
  transition: border-color 200ms ease, background 200ms ease;
}
.fila-catalogo:hover {
  border-color: var(--ambar);
  background: var(--negro-panel-2);
}
.fila-catalogo.oculta {
  display: none;
}

.fila-imagen-wrap {
  width: 88px;
  height: 88px;
  border-radius: var(--radio-sm);
  overflow: hidden;
  background: var(--negro-fondo);
  flex-shrink: 0;
}
.fila-imagen {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fila-info-cabecera {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.fila-tipo {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dorado-suave);
  background: rgba(255, 183, 3, 0.1);
  padding: 3px 9px;
  border-radius: 100px;
}
.fila-id {
  font-size: 11px;
  color: var(--texto-terciario);
  font-weight: 600;
}
.fila-nombre {
  font-family: var(--fuente-display);
  font-size: 16.5px;
  font-weight: 600;
  color: var(--texto-principal);
  margin: 0 0 4px;
  line-height: 1.3;
}
.fila-notas {
  font-size: 12px;
  color: var(--texto-terciario);
  margin: 0 0 8px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fila-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.fila-tag {
  font-size: 11px;
  color: var(--texto-secundario);
  background: var(--negro-fondo);
  border: 1px solid var(--borde-suave);
  padding: 3px 9px;
  border-radius: 100px;
}

.fila-imagen-subir-grupo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.fila-imagen-subir-boton {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fuente-ui);
  font-weight: 700;
  font-size: 12px;
  background: transparent;
  border: 1.5px solid var(--borde);
  color: var(--texto-secundario);
  padding: 8px 14px;
  border-radius: var(--radio-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 200ms ease, color 200ms ease;
}
.fila-imagen-subir-boton:hover {
  border-color: var(--dorado);
  color: var(--dorado);
}
.fila-imagen-subir-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.fila-imagen-quitar {
  font-family: var(--fuente-ui);
  font-weight: 600;
  font-size: 11.5px;
  background: transparent;
  border: none;
  color: var(--texto-terciario);
  cursor: pointer;
  text-decoration: underline;
  padding: 4px 0;
}
.fila-imagen-quitar:hover {
  color: var(--texto-secundario);
}
.fila-imagen-estado {
  font-size: 11.5px;
  color: var(--texto-terciario);
}
.fila-imagen-estado.guardada {
  color: var(--dorado-suave);
  font-weight: 600;
}

.fila-precio-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.fila-precio-etiqueta {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-terciario);
}
.fila-precio-input-grupo {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--negro-fondo);
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-sm);
  padding: 6px 10px;
  transition: border-color 200ms ease;
}
.fila-precio-input-grupo:focus-within {
  border-color: var(--dorado);
}
.fila-precio-signo {
  color: var(--dorado);
  font-weight: 700;
  font-size: 15px;
}
.fila-precio-input {
  font-family: var(--fuente-display);
  background: transparent;
  border: none;
  color: var(--texto-principal);
  font-size: 16px;
  font-weight: 600;
  width: 70px;
  text-align: right;
}
.fila-precio-input:focus {
  outline: none;
}
/* Quitar flechas del input number en distintos navegadores */
.fila-precio-input::-webkit-outer-spin-button,
.fila-precio-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.fila-precio-input[type="number"] {
  -moz-appearance: textfield;
}

.fila-precio-original {
  font-size: 11px;
  color: var(--texto-terciario);
}
.fila-precio-original.cambiado {
  color: var(--dorado-suave);
}
.fila-precio-categoria {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--texto-terciario);
  margin-top: 2px;
}

/* ============ TOGGLE ACTIVAR / DESACTIVAR ============ */
.fila-toggle-activo {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  cursor: pointer;
  user-select: none;
}
.fila-toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.fila-toggle-slider {
  position: relative;
  width: 34px;
  height: 19px;
  background: var(--borde);
  border-radius: 100px;
  transition: background 200ms ease;
  flex-shrink: 0;
}
.fila-toggle-slider::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 15px;
  height: 15px;
  background: var(--texto-terciario);
  border-radius: 50%;
  transition: transform 200ms ease, background 200ms ease;
}
.fila-toggle-input:checked + .fila-toggle-slider {
  background: rgba(255, 183, 3, 0.25);
}
.fila-toggle-input:checked + .fila-toggle-slider::before {
  transform: translateX(15px);
  background: var(--dorado);
}
.fila-toggle-input:focus-visible + .fila-toggle-slider {
  outline: 2px solid var(--dorado);
  outline-offset: 2px;
}
.fila-toggle-texto {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--texto-terciario);
  white-space: nowrap;
}
.fila-toggle-input:checked ~ .fila-toggle-texto {
  color: var(--dorado-suave);
}

/* Fila completa atenuada cuando el perfume está desactivado */
.fila-catalogo.desactivada {
  opacity: 0.45;
}
.fila-catalogo.desactivada .fila-imagen-wrap {
  filter: grayscale(1);
}
.fila-catalogo.desactivada:hover {
  opacity: 0.65;
}

.filtro-contador-activos {
  font-size: 12.5px;
  color: var(--texto-terciario);
  font-weight: 600;
}

/* Estado vacío tras filtrar/buscar */
.catalogo-vacio {
  text-align: center;
  padding: 60px 20px;
  color: var(--texto-terciario);
  font-size: 14.5px;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 860px) {
  .contenedor-catalogo { padding: 0 18px 80px; }
  .fila-catalogo {
    grid-template-columns: 64px 1fr;
    grid-template-areas:
      "img info"
      "precio precio";
  }
  .fila-imagen-wrap { width: 64px; height: 64px; grid-area: img; }
  .fila-info { grid-area: info; }
  .fila-precio-panel {
    grid-area: precio;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--borde-suave);
  }
}

@media (max-width: 640px) {
  .catalogo-cabecera { padding: 18px 0 4px; }
  .catalogo-titulo-wrap { padding: 14px 0 22px; margin-bottom: 22px; }
  .catalogo-sub { font-size: 13.5px; }

  .panel-ajuste-global { padding: 16px; }
  .panel-fila { flex-direction: column; align-items: stretch; gap: 16px; }
  .panel-input-grupo { width: 100%; }
  .panel-input-grupo select { flex: 1; }
  .panel-input-grupo input[type="number"] { flex: 1; width: auto; }
  #btn-aplicar-global { width: 100%; justify-content: center; margin-top: 6px; }
  #btn-reset-precios { width: 100%; justify-content: center; }

  .filtros-barra { gap: 8px; }
  .filtro-chip { padding: 7px 13px; font-size: 12px; }
  .filtro-contador-activos { width: 100%; order: 9; }
  .filtro-buscar { margin-left: 0; width: 100%; order: 10; }

  .fila-catalogo { padding: 12px; gap: 12px; }
  .fila-nombre { font-size: 14.5px; }
  .fila-notas { display: none; }
  .fila-imagen-subir-grupo { flex-direction: column; align-items: stretch; }
  .fila-imagen-subir-boton { justify-content: center; }
  .fila-toggle-activo { margin-top: 8px; }
}

@media (max-width: 420px) {
  .fila-tags { display: none; }
}