/*
 * JCM: detalle de la ficha de producto (fase 7, opción B). Colores de css/tokens.css.
 * Reemplaza el efecto «cs-style-7» de la plantilla (sus reglas se quitaron de component.min.css):
 * el detalle va debajo de la foto, con alto automático, fondo rojo de marca y botones de cerrar arriba y abajo.
 */
.producto.cs-style-7 { margin: 0; padding: 0; list-style: none; }
/* !important: component.min.css fuerza .producto li { width: 45% !important } en celular (tarjetas relacionadas) */
.producto.cs-style-7 > li { position: relative; width: 100% !important; max-width: 600px; margin: 0 auto; padding: 0; text-align: left; }

/* Botón superior: Ver detalles / Ocultar detalles */
.producto.cs-style-7 .boton-ver {
  position: static; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0 0 12px; padding: 0 18px;
  border: 2px solid var(--color-tinta); border-radius: 4px; background: var(--color-fondo); color: var(--color-tinta);
  font: 700 15px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; cursor: pointer;
}
.producto.cs-style-7 .boton-ver::after {
  content: ""; width: 12px; height: 12px; background: currentColor; transition: transform .25s ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.producto.cs-style-7 .boton-ver[aria-expanded="true"]::after { transform: rotate(180deg); }
.producto.cs-style-7 .boton-ver:hover { background: var(--color-tinta); color: var(--color-texto-invertido); }
.producto.cs-style-7 .boton-ver:focus-visible { outline: 3px solid var(--color-tinta); outline-offset: 3px; }

/* Foto: proporción real, sin gris ni alturas fijas */
.producto.cs-style-7 figure {
  position: static; max-width: 600px; margin: 0 auto;
  transition: background-color .25s ease, box-shadow .25s ease;
}
.producto.cs-style-7 figure img {
  position: static; left: auto; transform: none; display: block;
  width: 100%; height: auto; aspect-ratio: 1; object-fit: contain;
  border: 1px solid var(--color-borde); background: var(--color-fondo); cursor: pointer;
}

/* Detalle: debajo de la foto, oculto hasta que se abre, alto automático */
.producto.cs-style-7 figcaption {
  position: static; display: none; width: auto; height: auto; overflow: visible;
  margin: 20px 0 0; padding: 20px 0 0; background: transparent; text-align: left;
  border-top: 2px solid color-mix(in srgb, var(--color-detalle-texto) 70%, transparent);
  color: var(--color-detalle-texto);
}
.producto.cs-style-7 > li.is-abierto figcaption { display: block; }

/* Fondo rojo que envuelve foto + detalle con aire alrededor, como el panel original
   (box-shadow con extensión: amplía el color sin mover el diseño). Pedido del usuario.
   Texto blanco: 5,9:1 sobre el rojo, 7:1 sobre la franja, 8,6:1 sobre la fila resaltada. */
.producto.cs-style-7 > li.is-abierto { margin-bottom: 36px; }   /* aire bajo el fondo antes de «Más …» */
.producto.cs-style-7 > li.is-abierto figure {
  background: var(--color-detalle-fondo);
  box-shadow: 0 0 0 20px var(--color-detalle-fondo);
}
.producto.cs-style-7 > li.is-abierto figure img { border-color: transparent; }

.producto.cs-style-7 table { width: 100%; margin: 0; border-collapse: collapse; font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: var(--color-detalle-texto); }
.producto.cs-style-7 caption { padding: 0 0 12px; text-align: left; color: var(--color-detalle-texto); }
.producto.cs-style-7 caption h2 { margin: 0; font: 800 20px/1.25 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; text-align: left; color: var(--color-detalle-texto); }
/* Cabecera «Especificación / Datos del equipo»: oculta a la vista como en el original (style.min.css le ponía
   display:none y su fila vacía dejaba 30 px), pero disponible para lectores de pantalla */
.producto.cs-style-7 thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.producto.cs-style-7 thead th { display: table-cell; }
.producto.cs-style-7 tfoot tr:not(:has(th:not(:empty))) { display: none; }   /* fila del pie sin texto */
.producto.cs-style-7 tbody td {
  padding: 9px 10px; border-bottom: 1px solid color-mix(in srgb, var(--color-detalle-texto) 22%, transparent);
  vertical-align: top; color: var(--color-detalle-texto); transition: background-color .15s ease;
}
.producto.cs-style-7 tbody td:first-child { width: 42%; font-weight: 600; }
.producto.cs-style-7 table tr, .producto.cs-style-7 table tfoot th { background-color: transparent; box-shadow: none; }   /* anula las franjas celestes de style.min.css */
.producto.cs-style-7 tbody tr:nth-child(even) td { background: var(--color-detalle-franja); }
.producto.cs-style-7 tbody tr:hover td { background: var(--color-detalle-resalte); }
.producto.cs-style-7 tfoot th:empty { display: none; }
.producto.cs-style-7 tfoot th { opacity: 1; padding: 12px 10px 0; font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--color-detalle-texto); text-align: left; }

/* Barra de acciones al final del detalle: el principal en blanco con texto rojo; los demás con borde blanco */
.producto.cs-style-7 figcaption .ficha-acciones {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--color-detalle-texto) 35%, transparent);
}
.producto.cs-style-7 figcaption .ficha-boton {
  position: static; transform: none; opacity: 1; text-align: center;
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 18px;
  border: 2px solid var(--color-detalle-texto); border-radius: 4px; background: transparent; color: var(--color-detalle-texto);
  font: 700 15px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; text-decoration: none; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.producto.cs-style-7 figcaption .ficha-boton:hover,
.producto.cs-style-7 figcaption .ficha-boton:focus-visible { background: var(--color-detalle-texto); color: var(--color-detalle-fondo); text-decoration: none; }
.producto.cs-style-7 figcaption .ficha-boton--primario { background: var(--color-detalle-texto); color: var(--color-detalle-fondo); }
.producto.cs-style-7 figcaption .ficha-boton--primario:hover,
.producto.cs-style-7 figcaption .ficha-boton--primario:focus-visible { background: var(--color-detalle-resalte); color: var(--color-detalle-texto); }
.producto.cs-style-7 figcaption .ficha-boton:focus-visible { outline: 3px solid var(--color-detalle-texto); outline-offset: 3px; }
.producto.cs-style-7 figcaption .ficha-cerrar { margin-left: auto; }

/* El WhatsApp flotante se oculta solo mientras el detalle abierto está en pantalla
   (la barra ya trae WhatsApp); al bajar a «Más …» vuelve a aparecer. Lo controla jcm-ficha.js. */
.whatsapp { transition: opacity .2s ease, visibility .2s; }
html.detalle-a-la-vista .whatsapp { opacity: 0; visibility: hidden; }

@media (max-width: 600px) {
  /* En el celular el rojo se extiende 10 px: queda un margen blanco hasta el borde de la pantalla */
  .producto.cs-style-7 > li.is-abierto figure { box-shadow: 0 0 0 10px var(--color-detalle-fondo); border-radius: 2px; }
  .producto.cs-style-7 figcaption { padding-top: 16px; }
  .producto.cs-style-7 table { font-size: 14px; }
  .producto.cs-style-7 tbody td { padding: 8px 6px; }
  .producto.cs-style-7 figcaption .ficha-acciones { flex-direction: column; }
  .producto.cs-style-7 figcaption .ficha-boton { width: 100%; }
  .producto.cs-style-7 figcaption .ficha-cerrar { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .producto.cs-style-7 figure, .producto.cs-style-7 tbody td, .producto.cs-style-7 .boton-ver::after,
  .producto.cs-style-7 figcaption .ficha-boton, .whatsapp { transition: none; }
}