:root{
  --naranjo:#F37021;
  --naranjo-hover:#FF8B3D;
  --carbon:#151515;
  --marfil:#F1EFED;
  --gris:#D9D7D5;
  --blanco:#fff;
}

.detalle-prod{
  background: var(--marfil);
  padding: 24px;
  border-radius: 12px;
  margin-top: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  font-family: 'Montserrat', sans-serif;
  color: var(--carbon);
}
.detalle-prod .prod-header{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.detalle-prod h1{
  margin:0; font-size:1.6rem; font-weight:700; border-left:6px solid var(--naranjo); padding-left:10px;
}
.detalle-prod .rating-promedio .placeholder{ color:#666; font-style:italic; }

.prod-body{ display:grid; grid-template-columns: 320px 1fr; gap:24px; margin-top:18px; }
.prod-media img{ width:100%; border-radius:12px; border:1px solid var(--gris); background:#fff; object-fit:cover; }
.img-placeholder{ display:flex; align-items:center; justify-content:center; height:240px; border:1px dashed var(--gris); border-radius:12px; color:#777; background:#fff; }

.prod-info .precio{ font-size:1.4rem; font-weight:700; color:var(--naranjo); margin-bottom:8px; }
.prod-info .descripcion{ margin:8px 0 16px; }
.btn.primario{ background:var(--naranjo); color:var(--blanco); border:none; padding:10px 16px; border-radius:8px; cursor:pointer; font-weight:600; }
.btn.primario:hover{ background:var(--naranjo-hover); }

/* separador */
.separador{ border:0; border-top:1px solid var(--gris); margin:24px 0; }

/* sección reviews (se completa en paso 2) */
.reviews h2{ font-size:1.2rem; font-weight:700; margin:0 0 8px; }
.reviews .hint{ color:#666; margin:0 0 8px; }
.lista-reviews{ list-style:none; padding:0; margin:0; }
@media (max-width: 900px){
  .prod-body{ grid-template-columns: 1fr; }
}

/* Reviews */
.lista-reviews {
  list-style: none;
  padding: 0;
  margin: 0;
}
.item-review {
  background: var(--blanco);
  border: 1px solid var(--gris);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.header-review {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-review strong {
  color: var(--carbon);
}
.estrellas {
  color: var(--naranjo);
  font-size: 1.1rem;
}
.comentario {
  margin: 6px 0 4px;
  color: #333;
}
.fecha {
  color: #777;
  font-size: 0.85rem;
}
.vacio {
  color: #666;
  font-style: italic;
  padding: 10px;
}

.paginacion {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 15px;
}

.paginacion span {
  color: #333;
  font-size: 0.95rem;
}

.btn-pag {
  background: var(--naranjo);
  color: var(--blanco);
  padding: 6px 12px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.2s;
}
.btn-pag:hover {
  background: var(--naranjo-hover);
}






/* ===============================
   CONTENEDOR PRINCIPAL
================================= */
.preguntas-container {
    max-width: 850px;
    width: 100%;
    margin: 45px auto;
    background: #ffffff;
    padding: 30px 35px;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}

/* ===============================
   TÍTULO DE SECCIÓN
================================= */
.titulo-seccion {
    font-size: 24px;
    font-weight: 700;
    color: #151515;
    margin-bottom: 20px;
    text-align: left;
}

.titulo-seccion span {
    font-size: 14px;
    color: #777;
    font-weight: 400;
}

/* ===============================
   FORMULARIO
================================= */
.preguntas-container label {
    font-weight: 600;
    margin-top: 12px;
    color: #333;
}

.form-control {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-top: 6px;
    margin-bottom: 12px;
    font-size: 15px;
    transition: .2s;
}

.form-control:focus {
    border-color: #F37021;
    box-shadow: 0 0 4px rgba(243,112,33,0.3);
}

/* BOTÓN ENVIAR */
.btn-enviar-pregunta {
    background: #F37021;
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: 0.25s;
    margin-top: 10px;
}

.btn-enviar-pregunta:hover {
    background: #d85e1c;
}

/* ===============================
   ALERTAS
================================= */
.alert-ok {
    background: #DFF6E0;
    color: #2E7D32;
    padding: 12px 18px;
    border-radius: 8px;
    margin-bottom: 20px;
    border-left: 4px solid #2E7D32;
    font-weight: 600;
}

.alert-error {
    background: #FFE2E0;
    color: #C62828;
    padding: 12px 18px;
    border-radius: 8px;
    margin-bottom: 20px;
    border-left: 4px solid #C62828;
    font-weight: 600;
}

/* ===============================
   TARJETAS DE PREGUNTAS
================================= */
.pregunta-item {
    background: #F1EFED;                 /* marfil claro de la paleta */
    border-left: 5px solid #F37021;       /* borde naranjo institucional */
    padding: 18px 22px;
    border-radius: 10px;
    margin-bottom: 22px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.08);
}

/* Separación entre líneas */
.pregunta-item p {
    margin: 6px 0;
    color: #151515;   /* gris carbón */
}

/* Fecha al final */
.pregunta-item small {
    font-size: 12px;
    color: #777;
    display: block;
    margin-top: 10px;
}

/* Titulares de pregunta / respuesta */
.pregunta-item strong {
    color: #151515;
    font-weight: 600;
}

/* LÍNEA SEPARADORA */
.pregunta-item hr {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin-top: 12px;
}

.pregunta-item .respuesta-vendedor {
    background: #ffffff;
    padding: 6px 10px;
    border-radius: 6px;
}

/* BOTÓN PRINCIPAL */
.btn-toggle-pregunta {
    background: #F37021;
    color: #fff;
    padding: 10px 18px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    margin-bottom: 15px;
    transition: 0.3s;
}

.btn-toggle-pregunta:hover {
    background: #d85e1c;
}

/* CONTENEDOR OCULTO */
.form-oculto {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s ease;
}

/* CUANDO SE ABRE */
.form-oculto.mostrar {
    max-height: 800px; /* suficientemente grande */
    opacity: 1;
    margin-top: 15px;
}
/* BLOQUES INTERNOS DE PREGUNTAS Y RESPUESTAS */
.pregunta-bloque {
    background: #ffffff;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 12px;
    border-left: 4px solid #F37021;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* TÍTULOS INDIVIDUALES */
.pregunta-bloque strong {
    font-weight: 700;
    color: #151515;
}

/* SEPARACIÓN DE SECCIONES */
.pregunta-item {
    background: #F1EFED;
    border-left: 6px solid #F37021;
    padding: 22px;
    border-radius: 12px;
    margin-bottom: 25px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.08);
}

/* FECHA */
.pregunta-item small {
    display: block;
    margin-top: 12px;
    font-size: 12px;
    color: #555;
}

/* SI QUIERES UN ÍCONO FLECHA */
.pregunta-bloque::before {
    content: "➤";
    color: #F37021;
    margin-right: 8px;
    font-size: 13px;
}
/* Título dentro de cada tarjeta de preguntas */
.pregunta-titulo {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: #151515;
    margin-bottom: 15px;
    padding: 8px 0;
    border-bottom: 2px solid #F37021; /* línea naranjo institucional */
    letter-spacing: 0.5px;
}

/* Opción adicional con badge */
.pregunta-titulo .badge {
    background: #F37021;
    color: #fff;
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 12px;
    margin-left: 8px;
}