/* ==========================================================
   CATALOGO.CSS — Estilos del catálogo y del detalle de cada sistema
   Se carga en: catalogo/lista.html y catalogo/detalle.html (bloque extra_css)
   Bloques (mismo orden que las secciones):
   1. Migas y encabezado · 2. Buscador · 3. Filtros · 4. Resultados
   5. Tarjeta de sistema · 6. Sin resultados · 7. Franja final
   8. Detalle: cabecera · 9. Detalle: compra · 10. Detalle: vista del sistema
   11. Detalle: pestañas · 12. Detalle: cómo empezar · 13. Detalle: otros
   14. Detalle: barra móvil · 15. Responsive
   Usa las variables y clases globales de static/css/base.css
   (.estado, .enlace-flecha y el acordeón .faq viven en base.css)
   ========================================================== */


/* ========== 1. MIGAS Y ENCABEZADO DE PÁGINA ========== */
/* .migas y .pagina-head están en base.css: también los usan Servicios, Nosotros, Contacto y las páginas legales */


/* ========== 2. BUSCADOR ========== */
/* .sr-solo (texto solo para lectores de pantalla) está en base.css */
.buscador {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 560px;
  margin: 28px auto 0;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.buscador:focus-within {
  border-color: var(--sky);
}

.buscador__icono {
  width: 18px;
  height: 18px;
  margin-left: 10px;
  color: var(--muted);
}

.buscador__input {
  flex: 1;
  min-width: 0;
  padding: 8px 4px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.9rem;
  color: var(--navy);
  outline: none;
}

.buscador__btn {
  padding: 10px 18px;
  font-size: 0.85rem;
}


/* ========== 3. FILTROS ========== */
.filtros {
  padding: 24px 0 8px;
}

.filtros__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Categorías: pastillas-enlace */
.filtros__categorias {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filtros__pastilla {
  padding: 7px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--white);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
  transition: border-color var(--transition), color var(--transition);
}

.filtros__pastilla:hover {
  border-color: var(--sky);
  color: var(--sky);
}

.filtros__pastilla--activa,
.filtros__pastilla--activa:hover {
  border-color: var(--navy);
  background: var(--navy);
  color: var(--white);
}

/* Selects de disponibilidad y tipo de pago */
.filtros__selects {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.filtros__campo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filtros__etiqueta {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
}

.filtros__select {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  font: inherit;
  font-size: 0.85rem;
  color: var(--navy);
  cursor: pointer;
}

.filtros__select:focus-visible,
.filtros__pastilla:focus-visible,
.filtros__toggle:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 2px;
}

.filtros__aplicar {
  padding: 8px 16px;
  font-size: 0.8rem;
}

/* Botón "Filtros": solo en móvil (ver bloque 15) y solo si hay JS */
.filtros__toggle {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
}

.filtros__toggle svg {
  width: 16px;
  height: 16px;
}


/* ========== 4. RESULTADOS ========== */
.resultados {
  padding: 8px 0 64px;
}

.resultados__contador {
  margin-bottom: 20px;
  font-size: 0.8rem;
  color: var(--muted);
}

.resultados__contador strong {
  color: var(--navy);
}

/* Cuadrícula de tarjetas: 3 columnas (2 en tablet, 1 en móvil) */
.rejilla-sistemas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}


/* ========== 5. TARJETA DE SISTEMA ========== */
.tarjeta {
  display: flex;
  flex-direction: column;
}

.tarjeta__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.tarjeta__icono {
  width: 44px;
  height: 44px;
}

.tarjeta__icono svg {
  width: 22px;
  height: 22px;
}

/* Con imagen: la foto ocupa el ancho de la tarjeta y la disponibilidad flota encima */
.tarjeta__media {
  position: relative;
  margin: -24px -24px 20px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
}

.tarjeta__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tarjeta__estado-flotante {
  position: absolute;
  top: 12px;
  right: 12px;
}

.tarjeta__categoria {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sky);
}

.tarjeta__nombre {
  margin: 6px 0 8px;
  font-size: 1.15rem;
  font-weight: 700;
}

/* El espacio va debajo de la descripción para no pisar el margin-top: auto de la caja */
.tarjeta__descripcion {
  margin-bottom: 20px;
  font-size: 0.875rem;
  color: var(--muted);
}

/* Caja celeste de abajo: se empuja al fondo para alinear todas las tarjetas */
.tarjeta__compra {
  margin-top: auto;
  padding: 14px;
  border-radius: var(--radius);
  background: var(--sky-light);
}

.tarjeta__precio-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

/* Pastilla del tipo de pago (también se usa en la cabecera del detalle) */
.tarjeta__pago,
.pastilla-pago {
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--white);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--muted);
}

.tarjeta__precio {
  font-family: var(--font-title);
  font-size: 0.95rem;
  font-weight: 700;
}

.tarjeta__precio--pronto {
  font-family: var(--font-text);
  font-size: 0.85rem;
  font-style: italic;
  font-weight: 500;
  color: var(--muted);
}

.tarjeta__acciones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.tarjeta__btn {
  padding: 10px 12px;
  font-size: 0.8rem;
}

/* Próximamente: "Avísame cuando esté listo" es más largo, así que los botones se apilan */
.tarjeta__acciones--pronto {
  grid-template-columns: 1fr;
}

/* Botones deshabilitados (demo no disponible) en tarjetas y en la compra */
.tarjeta__btn:disabled,
.compra__demo:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.tarjeta__btn:disabled:hover,
.compra__demo:disabled:hover {
  border-color: var(--border);
  color: var(--navy);
}


/* ========== 6. SIN RESULTADOS ========== */
.sin-resultados {
  max-width: 560px;
  margin: 0 auto;
  padding: 48px 24px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  background: var(--sky-light);
  text-align: center;
}

.sin-resultados__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--white);
  color: var(--navy);
}

.sin-resultados__icono svg {
  width: 26px;
  height: 26px;
}

.sin-resultados__titulo {
  margin-top: 16px;
  font-size: 1.2rem;
  font-weight: 700;
}

.sin-resultados__texto {
  margin-top: 6px;
  font-size: 0.9rem;
  color: var(--muted);
}

.sin-resultados__acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

.sin-resultados__acciones svg {
  width: 16px;
  height: 16px;
}


/* ========== 7. FRANJA FINAL ========== */
.franja {
  padding-top: 0;
}

.franja__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.franja__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 40px;
  border-radius: var(--radius-lg);
}

.franja__card--navy {
  background: var(--navy);
  color: var(--white);
  box-shadow: var(--shadow-lg);
}

.franja__card--sky {
  border: 1px solid var(--sky-glow);
  background: var(--sky-light);
}

.franja__titulo {
  margin-top: 20px;
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  font-weight: 800;
}

.franja__texto {
  margin: 8px 0 24px;
  color: var(--muted);
}

.franja__card--navy .franja__texto {
  color: var(--on-navy-muted);
}

.franja__btn {
  margin-top: auto;
}

.franja__btn svg {
  width: 16px;
  height: 16px;
}


/* ========== 8. DETALLE: CABECERA ========== */
.detalle {
  padding: 32px 0 64px;
}

/* Escritorio: cabecera y contenido a la izquierda, compra a la derecha (ocupa las 2 filas) */
.detalle__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  grid-template-areas:
    "cabecera compra"
    "contenido compra";
  column-gap: 48px;
  row-gap: 40px;
}

.detalle__cabecera {
  grid-area: cabecera;
}

.detalle__compra {
  grid-area: compra;
}

.detalle__contenido {
  grid-area: contenido;
  min-width: 0;
}

.cabecera__marca {
  display: flex;
  align-items: center;
  gap: 14px;
}

.cabecera__icono {
  width: 52px;
  height: 52px;
  border-radius: var(--radius);
}

.cabecera__icono svg {
  width: 26px;
  height: 26px;
}

.cabecera__categoria {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sky);
}

.cabecera__pastillas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.cabecera__titulo {
  margin-top: 20px;
  font-size: clamp(2rem, 4.5vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.cabecera__texto {
  max-width: 640px;
  margin-top: 12px;
  font-size: 1.05rem;
  color: var(--muted);
}

.cabecera__vendedor {
  margin-top: 16px;
  font-size: 0.85rem;
  color: var(--muted);
}

.cabecera__vendedor strong {
  color: var(--navy);
}

/* Tres casillas: tipo de pago, acceso y demo */
.casillas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 28px;
}

.casillas__item {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
}

.casillas__etiqueta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.casillas__etiqueta svg {
  width: 14px;
  height: 14px;
  color: var(--sky);
}

.casillas__valor {
  margin-top: 6px;
  font-family: var(--font-title);
  font-weight: 700;
}

.casillas__nota {
  display: block;
  font-family: var(--font-text);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--muted);
}


/* ========== 9. DETALLE: COMPRA ========== */
/* La tarjeta queda fija mientras se baja por la página (en escritorio) */
.compra {
  position: sticky;
  top: calc(var(--header-height) + 24px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow);
}

.compra__precio {
  font-family: var(--font-title);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
}

.compra__checks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

.compra__check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--muted);
}

.compra__check svg {
  width: 16px;
  height: 16px;
  color: var(--sky);
}

.compra svg {
  width: 16px;
  height: 16px;
}

.compra__cambios {
  align-self: center;
  margin-top: 4px;
  font-size: 0.85rem;
}

/* Recuadro con usuario y contraseña de la demo */
.acceso {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: var(--radius);
  background: var(--sky-light);
}

.acceso__titulo {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.acceso__fila {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--white);
}

.acceso__etiqueta {
  font-size: 0.75rem;
  color: var(--muted);
}

.acceso__valor {
  overflow-wrap: anywhere;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
}

.acceso__copiar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 6px;
  background: var(--sky-light);
  color: var(--navy);
  cursor: pointer;
}

.acceso__copiar:hover,
.acceso__copiar--copiado {
  color: var(--sky);
}

.acceso__copiar:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 2px;
}


/* ========== 10. DETALLE: VISTA DEL SISTEMA ========== */
.vista__titulo {
  margin-bottom: 16px;
  font-size: 1.35rem;
  font-weight: 800;
}

/* Marco tipo ventana de navegador */
.vista__marco {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow);
}

.vista__barra {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--sky-light);
}

.vista__puntos {
  display: flex;
  gap: 6px;
}

.vista__puntos span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border);
}

.vista__direccion {
  flex: 1;
  max-width: 320px;
  margin: 0 auto;
  padding: 3px 12px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--white);
  font-size: 0.75rem;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.vista__imagen {
  display: block;
  width: 100%;
  height: auto;
}

/* Sin capturas: ilustración con el ícono grande */
.vista__vacia {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--sky-light), var(--sky-glow));
  color: var(--sky);
}

.vista__vacia-icono svg {
  width: 64px;
  height: 64px;
}

.vista__vacia-texto {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--navy);
}

/* Pestañas de capturas: una por captura, debajo del marco */
.vista__pestanas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.vista__pestana {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  transition: border-color var(--transition);
}

.vista__pestana:hover {
  border-color: var(--sky);
}

.vista__pestana:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 2px;
}

.vista__pestana--activa {
  border-color: var(--navy);
  box-shadow: var(--shadow-sm);
}

.vista__pestana-titulo {
  font-size: 0.85rem;
  font-weight: 700;
}

.vista__pestana-subtitulo {
  font-size: 0.75rem;
  color: var(--muted);
}


/* ========== 11. DETALLE: PESTAÑAS ========== */
.pestanas {
  margin-top: 40px;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
}

.pestanas__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.pestanas__boton {
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
}

.pestanas__boton[aria-selected="true"] {
  border-color: var(--navy);
  background: var(--navy);
  color: var(--white);
}

.pestanas__boton:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 2px;
}

/* Sin JS los paneles van uno debajo del otro, separados */
.pestanas__panel + .pestanas__panel {
  margin-top: 32px;
}

/* Con JS solo se ve el panel activo (catalogo.js pone el atributo hidden) */
.pestanas__panel[hidden] {
  display: none;
}

.pestanas--activas .pestanas__panel + .pestanas__panel {
  margin-top: 0;
}

.pestanas__titulo {
  margin-bottom: 16px;
  font-size: 1.2rem;
  font-weight: 800;
}

.pestanas__texto {
  color: var(--muted);
}

.pestanas__texto p + p {
  margin-top: 12px;
}

/* Funciones: 2 columnas con check */
.funciones {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.funciones__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border-radius: var(--radius);
  background: var(--sky-light);
}

.funciones__check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--sky);
  color: var(--white);
}

.funciones__check svg {
  width: 14px;
  height: 14px;
}

.funciones__titulo {
  font-size: 0.9rem;
  font-weight: 700;
}

.funciones__texto {
  margin-top: 2px;
  font-size: 0.8rem;
  color: var(--muted);
}

/* Qué incluye: tarjetas numeradas */
.incluye {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.incluye__item {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.incluye__numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--sky-light);
  font-size: 0.8rem;
  font-weight: 700;
}

.incluye__titulo {
  margin-top: 10px;
  font-size: 0.9rem;
  font-weight: 700;
}

.incluye__texto {
  margin-top: 4px;
  font-size: 0.8rem;
  color: var(--muted);
}


/* ========== 12. DETALLE: CÓMO EMPEZAR ========== */
.empezar__pasos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.empezar__numero {
  font-family: var(--font-title);
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1;
  color: var(--sky-glow);
}


/* ========== 13. DETALLE: OTROS SISTEMAS ========== */
.otros__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 32px;
}

.otros__titulo {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
}


/* ========== 14. DETALLE: BARRA MÓVIL ========== */
/* Precio y "Contratar" fijos abajo: solo en pantallas ≤ 960px (ver bloque 15) */
.barra-compra {
  display: none;
}


/* ========== 15. RESPONSIVE ========== */

/* Tablet grande: detalle en una columna (compra debajo de la cabecera) y 2 tarjetas por fila */
@media (max-width: 960px) {
  .rejilla-sistemas {
    grid-template-columns: repeat(2, 1fr);
  }

  .detalle__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "cabecera"
      "compra"
      "contenido";
  }

  /* En una columna la tarjeta de compra ya no queda fija */
  .compra {
    position: static;
  }

  .empezar__pasos {
    grid-template-columns: 1fr;
  }

  /* Barra fija abajo con precio y "Contratar" */
  .barra-compra {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 24px;
    border-top: 1px solid var(--border);
    background: var(--white);
    box-shadow: var(--shadow);
  }

  .barra-compra__precio {
    font-family: var(--font-title);
    font-size: 0.95rem;
    font-weight: 700;
  }

  .barra-compra__btn {
    flex-shrink: 0;
    padding: 10px 20px;
  }

  /* Espacio para que la barra no tape el final de la página */
  body:has(.barra-compra) {
    padding-bottom: 72px;
  }
}

/* Tablet: franja en una columna, categorías en fila deslizable y botón "Filtros" */
@media (max-width: 860px) {
  .franja__inner {
    grid-template-columns: 1fr;
  }

  .filtros__inner {
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: stretch;
  }

  /* Las categorías se deslizan de lado en vez de bajar a varias filas */
  .filtros__categorias {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .filtros__categorias::-webkit-scrollbar {
    display: none;
  }

  .filtros__toggle {
    display: inline-flex;
    align-self: flex-start;
  }

  .filtros__toggle[hidden] {
    display: none;
  }

  /* catalogo.js pliega los selects hasta que se toca "Filtros" */
  .filtros__selects--plegado {
    display: none;
  }

  .funciones,
  .incluye {
    grid-template-columns: 1fr;
  }
}

/* Móvil: todo a una columna */
@media (max-width: 600px) {
  .pagina-head {
    padding: 32px 0 28px;
  }

  .rejilla-sistemas,
  .casillas {
    grid-template-columns: 1fr;
  }

  .buscador__btn {
    padding: 10px 14px;
  }

  .franja__card {
    padding: 28px 24px;
  }

  .pestanas {
    padding: 20px;
  }

  .barra-compra {
    padding: 12px 16px;
  }
}