/* =============== FICHA DE PRODUCTO =============== */
/* ===== Principal ===== */
.main-img{ aspect-ratio:1/1; object-fit:cover; width:100%; }

/* ===== Thumbs ===== */
.thumbs-viewport{ position:relative; }
.miniaturasSwiper{ height:auto; }
.miniaturasSwiper .swiper-slide{ cursor:pointer; }
.miniaturasSwiper .swiper-slide-thumb-active{ opacity:1; }
.thumb-img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; border-radius:.35rem; border:2px solid #fff; }
.miniaturasSwiper .swiper-slide-thumb-active .thumb-img{ border-color: var(--cdr-orange); }
.video-thumb{ position:relative; }
.video-play-icon{ position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:1.6rem; text-shadow:0 0 8px rgba(0,0,0,.7); pointer-events:none; }

/* Botones up/down del carril de thumbs */
.thumbs-btn{ position:absolute; z-index:5; width:100%; padding:.15rem 0; }
.thumbs-btn-up{ top:0; } .thumbs-btn-down{ bottom:0; }

/* Ocultar thumbs en móvil */
@media (max-width: 991.98px){ .miniaturasSwiper, .thumbs-btn{ display:none; } }

/* ===== Barra inferior ===== */
.bottom-actions__inner{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; max-width:min(100%, 720px); margin-inline:auto; }
.ba-btn{ flex:1 1 0; height:44px; border:1px solid rgba(0,0,0,.1); border-radius:.5rem; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.08); transition:box-shadow .2s, background-color .2s, border-color .2s; cursor:pointer; }
.ba-btn i{ font-size:1rem; }
.ba-btn:hover{ background:#f8f9fa; box-shadow:0 3px 10px rgba(0,0,0,.12); }
.ba-btn:focus-visible{ outline:2px solid rgba(0,0,0,.25); outline-offset:2px; }
.ba-btn[disabled]{ opacity:.45; cursor:not-allowed; box-shadow:none; }
@media (min-width:768px){ .ba-btn{ height:48px; } }

.principalSwiper .swiper-slide {
  border: 1px solid rgba(0,0,0,0.08);   /* borde muy suave */
  border-radius: 6px;
  overflow: hidden;                     /* mantiene la imagen dentro del borde */
  background: #fff;                     /* por si hay transparencias */
}
/* Ocultar flechas superpuestas del principal si tienes la barra inferior */
.principalSwiper .swiper-button-prev,
.principalSwiper .swiper-button-next{ display:none !important; }

/* ===== Modal + Zoom Swiper ===== */
#zoomModal .modal-dialog,
#zoomModal .modal-content,
#zoomModal .modal-body { height:100vh; }
#zoomModal .modal-dialog{ max-width:min(92vw, 900px); margin:0 auto; }
#zoomModal .modal-content{ background:transparent; }
#zoomModal .modal-body{ display:flex; align-items:center; justify-content:center; padding:0; }
#zoomModal .zoomSwiper{ width:100%; height:100%; }
#zoomModal .zoomSwiper .swiper-slide{ display:flex; align-items:center; justify-content:center; }
#zoomModal .swiper-zoom-container{ width:auto !important; height:auto !important; display:flex; align-items:center; justify-content:center; }
#zoomModal .swiper-zoom-container img{
  width:min(800px, 92vw); height:min(800px, 90vh); aspect-ratio:1/1; object-fit:contain;
  background:transparent !important; border:0 !important; border-radius:0 !important;
}
#zoomModal .swiper-button-prev, #zoomModal .swiper-button-next{
  width:44px; height:44px; border-radius:50%; background:rgba(0,0,0,.55);
}
#zoomModal .swiper-button-prev::after, #zoomModal .swiper-button-next::after{ color:#fff; font-size:16px; }
#zoomModal .swiper-pagination-bullet{ background:#fff; opacity:.6; }
#zoomModal .swiper-pagination-bullet-active{ opacity:1; }

/* Botón cerrar en modal zoom */
#zoomModal .btn-close{
  position:absolute; top:max(10px, env(safe-area-inset-top, 0) + 10px); right:max(10px, env(safe-area-inset-left, 0) + 10px);
  width:42px; height:42px; padding:0; background:var(--cdr-orange, #e6543a); border-radius:.35rem; opacity:1;
  display:flex; align-items:center; justify-content:center; background-image:none;
}
#zoomModal .btn-close::before{ content:"\00d7"; font-size:1.6rem; color:#fff; line-height:1; }
#zoomModal .btn-close:hover{ background:#c5442e; }
#zoomModal .btn-close:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* Respeta reduce motion */
@media (prefers-reduced-motion: reduce){
  .ba-btn, .swiper-wrapper{ transition:none !important; }
}

.product-price {
  font-size: 2.5rem;
}
.star-rating i {
  color: var(--cdr-orange);
}
#infoAccordion .accordion-button {
  background-color: #fff;
  color: inherit;
}
#infoAccordion .accordion-button:not(.collapsed) {
  background-color: #f8f9fa; /* gris claro al expandirse */
}

.typewriter-cursor::after {
  content: "|";
  margin-left: 2px;
  animation: blink 0.7s infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}


/* ========= LINK BANNER ========= */
.link-banner{
  background:#fdefec;
  color:#000;
  padding:.5rem 1rem;
  display:inline-block;
  font-weight:500;
  text-decoration:none;
  border-radius:.25rem;
}
.link-banner:hover{ text-decoration:underline; }

/* ========= PERSONALIZA (bloque visible) ========= */
.personaliza{
  border:1px solid #ececec;
  border-radius:.5rem;
  overflow:hidden;
  box-shadow:0 6px 14px rgba(0,0,0,.04);
  background:#fff;
}
.personaliza-title{
  margin:0;
  background:var(--cdr-orange);
  color:#fff;
  font-weight:800;
  font-size:1rem;
  padding:.75rem 1rem;
  letter-spacing:.2px;
}
.personaliza-body{ padding:1rem; }

/* Controles compactos dentro del bloque */
.personaliza .btn{
  height:42px;   /* compacto y consistente */
}
input[disabled] + label {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

/* ========= CONTADOR DE CARACTERES ========= */
.char-counter-wrapper{ position:relative; }
.form-control.with-counter{ padding-right:3rem; }
.char-counter{
  position:absolute; top:0; right:0;
  width:3rem; height:100%;
  border-left:1px solid #ddd;
  background:#f8f9fa;
  color:#666; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  border-top-right-radius:.375rem;
  border-bottom-right-radius:.375rem;
}

/* ========= OPCIONES CON IMAGEN ========= */
.option-image{
  border:2px solid #ddd;
  border-radius:6px;
  padding:.25rem;
  cursor:pointer;
  transition:border-color .15s ease;
  display: block;
  margin: 0 auto;
}
.option-image.selected{ border-color:var(--cdr-orange); }

.option-disabled img {
  opacity: .4;
  filter: grayscale(100%);
}

/* ========= BOTONES DE ACCIÓN ========= */
.btn-preview{
  background:#3d3d3d; color:#fff;
  font-weight:700; text-transform:uppercase;
  border:0; border-radius:.25rem;
}
.btn-preview:hover,
.btn-preview:focus,
.btn-preview:active,
.btn-preview:disabled,
.btn-preview:focus-visible{ background:#9c9c9c; }

.btn-add{
  background:#28a745; color:#fff;
  font-weight:700; text-transform:uppercase;
  border:0; border-radius:.25rem;
  height: 42px;
}
.btn-add:hover,
.btn-add:focus,
.btn-add:active,
.btn-add:disabled,
.btn-add:focus-visible{ background:#218838; color:#fff; }

/* ========= STICKY COLUMNA (solo desktop) ========= */
@media (min-width:992px){
  .sticky-col{ position:sticky; top:100px; align-self:flex-start; z-index:10; }
}
@media (max-width:991.98px){
  .sticky-col{ position:static !important; top:auto !important; align-self:auto !important; }
}
.opinion {
  border-top: 1px solid #ddd;
  padding-top: 1rem;
  margin-top: 1rem;
}

/* limitar tamaño del modal en escritorio */
#previewModal .modal-dialog {
    max-width: 900px;            /* ajusta si quieres más/menos ancho */
}
#previewModalCalendar .modal-dialog {
    max-width: 700px;            /* ajusta si quieres más/menos ancho */
}


/* limitar la altura de la imagen para que se vea siempre el botón */
#previewModalImg {
    width: 100%;
    height: auto;
    max-height: calc(100vh - 250px); /* espacio para header + footer del modal */
    object-fit: contain;
}

/* Mobile: 100% ancho SOLO en el modal */
#previewModalCalendar #botonComprar,
#previewModal #botonComprar {
    width: 100% !important;
    margin: 0 auto;
}

/* Desktop: 50% ancho SOLO en el modal */
@media (min-width: 992px) {
    #previewModalCalendar #botonComprar,
    #previewModal #botonComprar {
        width: 50% !important;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Altura máxima cuando está recortado */
.texto-colapsable {
  max-height: 96px; /* ajusta a tu gusto */
  overflow: hidden;
  position: relative;
}

/* Sombreado al final para indicar que hay más contenido */
.texto-colapsable::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30px;
  background: linear-gradient(transparent, white);
  pointer-events: none;
}

.texto-expandido {
  max-height: none !important;
}

.texto-expandido::after {
  display: none !important;
}

/* El contenedor del swiper de opciones (el que usas para tipografías) */
.swiper-opciones {
    padding-bottom: 18px;   /* crea espacio entre radios y barra */
}

/* Opcional: ajusta la posición vertical de la barra si quieres */
.swiper-opciones .swiper-scrollbar {
    bottom: 2px;            /* o 0, o 4... a tu gusto */
    height: 4px;
    max-width: 100%;
    margin: 0 auto;         /* centrada */
    opacity: .6;
}

.swiper-opciones .swiper-scrollbar-drag {
    border-radius: 999px;
}

/*previsualisation*/
/* CONTENEDOR DE PREVIEW (alineado a la derecha pero responsive) */
.div_preview {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
  height: 40px;
  position: relative;
}

/* IMÁGENES */
.div_preview img,
#div_left_prev_img img,
#div_left_prev_img2 img {
  vertical-align: top;
  display: inline-block;
  border: 1px solid #e9e3df;
  max-width: 100%;
  height: auto;
}

/* TEXTOS IZQUIERDOS */
.div_left_preview {
  margin: 20px 2px;
  color: #696260;
  font-weight: bold;
}

.div_left_preview img {
  margin: 2px 0;
}

/* TEXTOS DERECHOS (YA NO FIX 320px) */
.div_right_preview {
  margin-top: 20px;
  color: #727272;
  font-weight: normal;
  position: relative;   /* antes absolute = roto */
}

/* CAJA DE TEXTO */
.div_preview_txt,
#div_left_prev_txt,
#div_left_prev_txt2 {
  max-width: 100%;
  padding: 25px 15px;
  background-color: #f6f4f5;
  border: 1px solid #b6b6b6;
  margin-top: 5px;
  text-align: center;
}

#div_left_prev_txt,
#div_left_prev_txt2 {
  color: #fe8f00;
}

.div_preview_txt {
  padding: 10px;
  font-size: 11px;
  color: #727272;
  font-weight: normal;
}

/* LÍNEAS DE PREVIEW */
.div_prev {
  margin: 2px 0;
  color: #696260;
  font-size: 12px;
  font-weight: bold;
}

.img_prev {
  margin: 2px 0;
  border: 1px solid #e9e3df;
}

/* OPCIONES DE IMAGEN: FLEXBOX en vez de floats */
.div_optimg {
  font-size: 11px;
  text-align: center;
}

.div_optimg-container {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

/* LOADER */
#pending_preview {
  display: block;
  margin: 150px auto;
}

/* TÍTULO DE AFINADO */
.affinage {
  color: #afbccd;
  font-size: 1.4em;
  font-family: Comfortaa, sans-serif;
}

/*previsualisation photos*/
#canim_loading{
  display:none;
  position:absolute;
  inset:0;
  z-index:2;
  background:white;
  display:flex;
  align-items:center;
  justify-content:center;
}
#canim_loading img{
  position:static;
}
#cv_photoprev{cursor:move;margin:auto;position:absolute;}
#canvas_slider{width:70%;margin:0 auto;}
#canim_upload_bts{background:#e3e3e3;width:100%;margin:0.2em auto;padding:0.2em;}
#canim_upload_bts>span{display:inline-block;text-align:center;vertical-align:top;font-size:1em;}
#canim_upload_bts>span:first-line{padding:0.3em 0;color:#000000;}
#canim_upload_bts>span span.vmid{background:#fe8f00;color:#ffffff;font-weight:bold;width:.9em;height:.9em;line-height:.85em;padding:0.4em;margin:0 .2em;cursor:pointer;font-size:1.4em;
border:1px solid #727272;-webkit-border-radius:50%;-moz-border-radius:50%;-khtml-border-radius:50%;border-radius:50%;}
#canim_upload_bts.incanvas{max-width:250px;position:absolute;z-index:100;-ms-filter:"alpha(opacity=80)";opacity:0.8;}

/* FamilyCircus – Modal icons */

.fc-category-title {
    font-weight: 600;
    margin-top: 1rem;
    margin-bottom: .5rem;
}

.fc-category-title:first-of-type {
    margin-top: 0;
}

/* En vez de grid, usamos flex con items de tamaño fijo */
.fc-icon-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 1.25rem;
}

/* Cada botón ocupa un ancho fijo, no todo el modal */
.fc-icon-btn {
    border: none;
    padding: 0;
    background: transparent;
    cursor: pointer;
    width: 120px;          /* juega con 100–140px según lo que veas */
    flex: 0 0 auto;
    text-align: center;
}

.fc-icon-thumb {
    width: 100%;
    height: auto;
    max-height: 140px;     /* tope para que no se dispare en altura */
    border-radius: .75rem;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
    transition: transform .15s, box-shadow .15s;
    object-fit: contain;
}

.fc-icon-thumb:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 4px 14px rgba(0,0,0,.2);
}

.btn-divavatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border: none;
    padding: 0;
    cursor: pointer;
}

.btn-divavatar img {
    width: 90px;
    height: 90px;
    border-radius: 50%;           /* circular */
    object-fit: contain;
    background: #f8f8f8;          /* fondo suave */
    padding: 1px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-divavatar img:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.btn-divavatar u {
    margin-top: 5px;
    font-size: 13px;
    color: #444;
}


/* Hereda estética de inputs */
.form-check.opt-box{
  padding-left: 0;
  margin-bottom: .6rem;
  position: relative;
}

.form-check.opt-box .form-check-input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.form-check.opt-box .form-check-label{
  display: flex;
  align-items: center;
  width: 100%;

  /* “como .form-control” */
  padding: .375rem .75rem;                 /* igual que input */
  min-height: calc(1.5em + .75rem + 2px);  /* igual que input */
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: var(--bs-border-radius, .375rem);
  background-color: var(--bs-body-bg, #fff);
  color: var(--bs-body-color, #212529);

  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, background-color .15s;
  cursor: pointer;
}

/* Hover sutil */
.form-check.opt-box .form-check-label:hover{
  background-color: var(--bs-tertiary-bg, #f8f9fa);
}

.form-check.opt-box .form-check-input:checked + .form-check-label{
  border-color: var(--bs-primary, #0d6efd);
  background-color: #f2f7ff;                 /* azul muy light */
  box-shadow: inset 0 0 0 1px rgba(13,110,253,.25);
}

/* Focus con teclado (accesibilidad) */
.form-check.opt-box .form-check-input:focus + .form-check-label{
  border-color: var(--bs-primary, #0d6efd);
  box-shadow: 0 0 0 .15rem rgba(13,110,253,.25);
}

/* Compacto opcional (si quieres menos alto) */
/*
.form-check.opt-box .form-check-label{
  padding: .3rem .65rem;
}
*/




.form-check.opt-box .form-check-label{
  justify-content: space-between;
}
/* Precio por defecto */
.form-check.opt-box .opt-price{
  color: #6c757d;          /* gris Bootstrap secondary */
  font-weight: 500;
}

/* Precio cuando está seleccionado */
.form-check.opt-box .form-check-input:checked + .form-check-label .opt-price{
  color: #0d6efd;          /* primary, pero sin fondo */
}