/* Skins de consolas — selector de la ficha. Todo bajo .sf-con para no pisar el tema.
   Misma estética que el de celulares (sf_celulares/ficha.css). */

.sf-con-oculta { display: none !important; }
.sf-con [hidden], .sf-con-escena[hidden] { display: none !important; }

.sf-con, .sf-con-escena {
	--sf-con-tinta: #1d1d1f; --sf-con-gris: #6e6e73; --sf-con-linea: #d9d9de;
	--sf-con-fondo: #f5f5f7; --sf-con-acento: #e4007c; --sf-con-ar: 1.6;
}
.sf-con { color: var(--sf-con-tinta); margin-bottom: 18px; }

/* ---- Vista previa: el diseño en el hueco y el PNG de la consola encima ---- */
.sf-con-escena { background: var(--sf-con-fondo); border-radius: 16px; padding: 28px 20px 18px; display: flex; flex-direction: column; align-items: center; margin-bottom: 18px; }
.sf-con-escena--galeria { position: sticky; top: 16px; margin-bottom: 14px; z-index: 2; }
.sf-con-equipo { width: min(100%, calc(56vh * var(--sf-con-ar))); }
/* Las sombras y los bordes los trae el PNG: acá no se agrega nada. */
.sf-con-vinilo { position: relative; display: block; width: 100%; overflow: hidden; background-color: #e3e3e8; }
.sf-con-hueco { position: absolute; display: block; }
.sf-con-dis { position: absolute; display: block; background-size: 100% 100%; background-repeat: no-repeat; }
.sf-con-marco { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; }
/* Tipo máscara: el PNG recorta (lo negro es lo que se ve), con sombra propia. */
.sf-con--mascara { -webkit-mask: var(--sf-con-m) center / 100% 100% no-repeat; mask: var(--sf-con-m) center / 100% 100% no-repeat; }
.sf-con--mascara .sf-con-marco { display: none; }
/* Con un marco (PNG con fondo blanco propio), la vista va en blanco para que
   no se note el recuadro de la foto. */
.sf-con-escena:has(.sf-con-vinilo:not(.sf-con--mascara)) { background: #fff; border: 1px solid #eee; }
.sf-con-escena .sf-con-vinilo:not(.sf-con--mascara) { background-color: #fff; }
.sf-con-equipo:has(.sf-con--mascara) { filter: drop-shadow(0 0 .6px rgba(0,0,0,.7)) drop-shadow(0 14px 22px rgba(0,0,0,.22)); }
.sf-con-pie { margin-top: 14px; text-align: center; font-size: 14px; color: var(--sf-con-gris); min-height: 40px; }
.sf-con-pie b { display: block; color: var(--sf-con-tinta); font-size: 16px; }
.sf-con-pie small { display: block; font-size: 12px; margin-top: 4px; opacity: .8; }

/* ---- Pasos ------------------------------------------------------------- */
.sf-con-paso { border-top: 1px solid var(--sf-con-linea); padding: 16px 0; }
.sf-con-paso-t { font-size: 15px; margin: 0 0 12px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.sf-con-paso-t span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--sf-con-tinta); color: #fff; font-size: 12px; margin-right: 8px; }
.sf-con input[type=search] { font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--sf-con-linea); border-radius: 10px; width: 100%; background: #fff; box-shadow: none; }
.sf-con input[type=search]:focus { outline: 2px solid var(--sf-con-tinta); outline-offset: 1px; }

.sf-con-botones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.sf-con-botones:first-of-type { margin-top: 0; }
.sf-con-botones button { font: inherit; font-size: 14px; padding: 8px 16px; border: 1px solid var(--sf-con-linea); border-radius: 999px; background: #fff; color: var(--sf-con-tinta); cursor: pointer; }
.sf-con-botones button[aria-pressed=true] { border-color: var(--sf-con-tinta); background: var(--sf-con-tinta); color: #fff; }
.sf-con-etiquetas { margin: 0 0 10px; }
.sf-con-falta { margin: 10px 0 0; font-size: 13px; color: var(--sf-con-gris); }
.sf-con-falta a { color: var(--sf-con-acento); }

.sf-con-contador { font-size: 13px; color: var(--sf-con-gris); margin: 8px 0 0; }
.sf-con-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-top: 10px; max-height: 560px; overflow: auto; padding: 4px; }
.sf-con-muestra { border: 0; background: none; padding: 8px 6px; border-radius: 10px; cursor: pointer; text-align: center; font: inherit; font-size: 11px; color: var(--sf-con-gris); min-width: 0; }
.sf-con-muestra:hover { background: var(--sf-con-fondo); }
.sf-con-muestra[aria-pressed=true] { background: var(--sf-con-fondo); outline: 2px solid var(--sf-con-acento); }
.sf-con-muestra .sf-con-vinilo { margin: 0 auto 6px; }
.sf-con-muestra-n { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sf-con-aviso { margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; background: #fdecef; color: #a3002f; font-size: 14px; }

@media (max-width: 767px) {
	.sf-con-escena--galeria { position: static; }
	.sf-con-equipo { width: min(100%, calc(40vh * var(--sf-con-ar))); }
	.sf-con-grilla { max-height: none; overflow: visible; }
}

/* ---- Compu: diseños a todo el ancho, debajo de la ficha ------------------ */
.sf-con-ancho { clear: both; margin: 10px 0 30px; }
.sf-con-ancho .sf-con-grilla { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; max-height: none; overflow: visible; }
.sf-con-ancho .sf-con-muestra { font-size: 12px; }
.sf-con-ancho input[type=search] { max-width: 420px; }
.sf-con-comprar { display: block; margin: 18px auto 0; min-width: 260px; padding: 13px 28px; border: 0; border-radius: 999px; background: var(--sf-con-tinta); color: #fff; font: inherit; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.sf-con-comprar:hover { opacity: .88; }

/* Paso 2 en la columna derecha (compu): atajo a la grilla de abajo. */
.sf-con-atajo-fila { display: flex; align-items: center; gap: 12px; }
.sf-con-atajo-fila .sf-con-vinilo { flex: none; width: 64px; border-radius: 3px; }
.sf-con-atajo-fila b { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-con-atajo-boton { font: inherit; font-size: 14px; font-weight: 600; padding: 10px 18px; border: 1px solid var(--sf-con-tinta); border-radius: 10px; background: #fff; color: var(--sf-con-tinta); cursor: pointer; }
.sf-con-atajo-fila b[hidden] + .sf-con-atajo-boton { width: 100%; }
.sf-con-atajo-boton:hover { background: var(--sf-con-tinta); color: #fff; }

/* Celu: barra fija con "Añadir al carrito". Va afuera de #sf-con: los
   colores van escritos. El botón de WhatsApp sube para no quedar tapado. */
.sf-con-barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 890; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -4px 16px rgba(0,0,0,.12); }
.sf-con-barra[hidden] { display: none !important; }
.sf-con-barra button { display: block; width: 100%; padding: 14px 20px; border: 0; border-radius: 999px; background: #111; color: #fff; font: inherit; font-size: 15px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
body.sf-con-barra-on { padding-bottom: 76px; }
html body.sf-con-barra-on a.sf-wafab { bottom: calc(84px + env(safe-area-inset-bottom)); }
@media (min-width: 992px) { .sf-con-barra { display: none !important; } }