/* ===== Arreglos del panel de críticos (vuelta 4) ===== */

/* 1) Cifras: 2×2 cuando son cuatro (la regla ya no depende del style) */
@media (min-width:600px){.p-cifras[data-n="4"]{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1680px){.p-cifras[data-n="4"]{grid-template-columns:repeat(4,1fr)}}

/* 2) Productos altos completos: el área de la foto tiene tamaño fijo dentro del escenario */
.p-fotos{position:absolute;inset:0}
.p-foto{position:absolute;inset:0;width:auto;height:auto}
.p-foto img{width:80%;height:80%;object-fit:contain}

/* 3) Nunca partir una palabra: si no cabe, el código achica la letra */
.partir .palabra{white-space:nowrap}
.p-nombre{overflow-wrap:normal}
@media (max-width:699px){.portadilla h1{max-width:80%}}

/* 4) Fotos sin recuadro: el fondo va en el contenedor, no en la foto mezclada */
.comp-col img,.bus-fila img,.lista-item img,.bandeja-fotos img{background:transparent}
.lista-item>a{background:var(--suave);border-radius:12px;padding:4px;display:grid;place-items:center}
.comp-col>a{display:grid;place-items:center;background:var(--blanco);border-radius:var(--r2);box-shadow:var(--sombra);padding:8px}
.comp-col>a img{box-shadow:none;padding:0;border-radius:0}
.seccion img.plano{filter:none}

/* 6) Comparar en celular: se ven dos productos a la vez */
@media (max-width:600px){
  .tabla-comparar tbody th{min-width:92px;max-width:110px;font-size:12.5px;padding:9px 6px}
  .tabla-comparar th,.tabla-comparar td{min-width:124px;padding:9px 8px;font-size:13px}
  .comp-col img{width:100px;height:78px}
  .comp-col strong{font-size:14.5px}
}
.tabla-comparar td.empate::after{content:' ='}

/* 7) Celular: barra fija para agregar, bandeja sin tapar, botones con texto */
.p-fija{display:none}
@media (max-width:1023px){
  .p-fija{display:flex;align-items:center;gap:10px;position:fixed;z-index:38;left:10px;right:10px;bottom:calc(84px + var(--seg));padding:8px 8px 8px 14px;
    background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-radius:var(--r2);box-shadow:var(--sombra-alta);transform:translateY(160%);opacity:0;
    transition:transform .45s var(--curva),opacity .3s}
  .p-fija.ver{transform:none;opacity:1}
  .p-fija div{min-width:0;flex:1}
  .p-fija small{display:block;font-size:11px;font-weight:700;color:var(--gris);text-transform:uppercase;letter-spacing:.06em}
  .p-fija strong{display:block;font-size:15px;font-weight:800;color:var(--tinta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .p-fija .boton{height:44px;padding:0 16px;font-size:14.5px;flex:none}
  body.con-bandeja .vista{padding-bottom:calc(190px + var(--seg))}
}
@media (max-width:420px){.mini span.txt{display:inline}}

/* Carriles: margen al deslizar y flechas en PC */
.carril{scroll-padding-left:16px}
@media (min-width:768px){.carril{scroll-padding-left:32px}}
.cabeza-der{display:flex;align-items:center;gap:14px}
.carril-flechas{display:none}
@media (min-width:1024px){
  .carril-flechas{display:flex;gap:6px}
  .carril-flechas button{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--blanco);box-shadow:inset 0 0 0 1.5px var(--linea);transition:background .2s,color .2s,box-shadow .2s}
  .carril-flechas button:hover{background:var(--negro);color:#fff;box-shadow:none}
  .carril-flechas button:first-child .ico{transform:rotate(180deg)}
  .carril-flechas .ico{width:18px;height:18px}
}

/* Mosaico en celular: los tamaños no se montan sobre la foto */
@media (max-width:699px){.seccion span{display:none}}

/* 2b) foto del escenario con marco exacto (las alturas en porcentaje no se respetaban) */
.p-foto img{position:absolute;left:10%;top:10%;width:80%;height:80%;max-width:none;max-height:none}
/* la foto acompaña al bajar solo si la información es más larga que la foto */
@media (min-width:1024px){.p-escena{position:relative;top:auto}.producto.pegajosa .p-escena{position:sticky;top:92px}}

/* Luis (vuelta 5): nada que gire o deforme con el mouse; movimientos suaves */
.tarjeta.inclinada{transform:translateY(-6px)}
.tarjeta-foto .brillo{display:none}
.tarjeta:hover .tarjeta-foto img{transform:scale(1.04)}
.seccion:hover img{transform:scale(1.05)}
@media (min-width:1024px){.riel-item:hover img{transform:none}}
.p-foto img{transform:none!important}
.p-cifra b{min-width:0;overflow:hidden}

/* Ver la sección como tabla */
.cambio-vista{display:flex;flex:none;background:var(--blanco);border-radius:var(--r1);box-shadow:inset 0 0 0 1.5px var(--linea);padding:3px}
.cambio-vista button{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 10px;border-radius:7px;font-size:13.5px;font-weight:700;color:var(--gris);transition:background .2s,color .2s}
.cambio-vista button .ico{width:18px;height:18px}
.cambio-vista button.activo{background:var(--negro);color:#fff}
@media (max-width:520px){.cambio-vista button span:not(.ico){display:none}.cambio-vista button{padding:0 9px}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.tabla-sec-envoltura{overflow-x:auto;background:var(--blanco);border-radius:var(--r2);box-shadow:var(--sombra);margin-top:4px}
.tabla-sec{border-collapse:separate;border-spacing:0;width:100%;min-width:720px}
.tabla-sec th,.tabla-sec td{padding:10px 12px;text-align:left;font-size:14px;border-bottom:1px dotted #a8a39c;white-space:nowrap;vertical-align:middle}
.tabla-sec thead th{position:sticky;top:0;background:var(--negro);color:#fff;font-size:12px;letter-spacing:.06em;text-transform:uppercase;border-bottom:0;z-index:1}
.tabla-sec thead th:first-child{border-top-left-radius:var(--r2)}
.tabla-sec thead th:last-child{border-top-right-radius:var(--r2)}
.tabla-sec thead button{font-weight:700;color:inherit;text-transform:inherit;letter-spacing:inherit;font-size:inherit;display:inline-flex;gap:4px;align-items:center}
.tabla-sec thead button:hover{color:#ffb3b3}
.orden-flecha{font-style:normal;color:#ff6b6b;font-size:10px}
.tabla-sec td{font-weight:700;color:var(--tinta)}
.tabla-sec tbody tr{transition:background .15s}
.tabla-sec tbody tr:hover{background:#FBF4F3}
.tabla-sec .ts-ref{position:sticky;left:0;background:var(--blanco);z-index:1;min-width:210px;max-width:260px}
.tabla-sec thead .ts-ref{background:var(--negro);z-index:2}
.tabla-sec tbody tr:hover .ts-ref{background:#FBF4F3}
.tabla-sec .ts-ref a{display:flex;align-items:center;gap:10px;white-space:normal}
.ts-foto{flex:none;width:46px;height:46px;border-radius:10px;background:var(--suave);display:grid;place-items:center}
.ts-foto img{width:88%;height:88%;object-fit:contain;mix-blend-mode:multiply}
.ts-nombre strong{display:block;font-size:14.5px;font-weight:800;color:var(--tinta);line-height:1.15}
.ts-nombre small{display:block;font-size:11.5px;font-weight:600;color:var(--gris)}
.ts-nombre small b{color:var(--rojo)}
.ts-vacio{color:var(--gris-2);font-weight:500}
.tabla-sec .ts-acc{text-align:right;width:1%}
.tabla-sec .ts-acc .mini{display:inline-flex;width:36px;flex:none;margin-left:4px}
.ts-nombre strong{white-space:nowrap}
@media (max-width:699px){.tabla-sec .ts-ref{min-width:180px}.ts-foto{width:40px;height:40px}.tabla-sec th,.tabla-sec td{padding:9px 10px;font-size:13px}}

/* Barra lateral de PC: caben todas las secciones */
@media (min-width:1024px){
  .riel{padding-top:18px}
  .riel-logo{padding-bottom:12px}
  .riel-grupo{margin:12px 10px 4px}
  .riel-item{padding:6px 10px;font-size:14.5px;gap:10px}
  .riel-item img{width:30px;height:30px}
}