/*****
 * PRODUCT FORM FIELDS
 * 
 * Campos específicos de formularios de productos
 *****/

/* Campos de información de producto */
.field--name-field-mas-informacion {
  margin: 20px 0;
}

.field--name-field-mas-informacion .field--item,
.field--name-field-archivo-s-adjunto-s- .field--item {
  display: inline-block;
  width: auto;
  border: 0;
}

/* Estilos para archivos adjuntos */
.field--name-field-mas-informacion .field--item span.file,
.field--name-field-mas-informacion .field--item span.file *,
.field--name-field-archivo-s-adjunto-s- .field--item span.file,
.field--name-field-archivo-s-adjunto-s- .field--item span.file * {
  display: inline;
  background-color: var(--verde);
  color: var(--gris);
  display: inline-block;
  padding: 0;
  border: 0;
  border-radius: 5px;
}

.field--name-field-mas-informacion .field--item span.file span.file-link a,
.field--name-field-archivo-s-adjunto-s- .field--item span.file span.file-link a {
  border: 0;
  border-radius: 5px;
  padding: 5px 10px;
  margin: 0;
  font-size: 1.3em;
  text-decoration: none;
  font-weight: normal;
}

.field--name-field-mas-informacion .field--item span.file span.file-link a:hover,
.field--name-field-archivo-s-adjunto-s- .field--item span.file span.file-link a:hover {
  text-decoration: none;
  background-color: var(--gris);
  color: var(--blanco);
}

/* Campos de descripción de producto */
.field--name-field-dirigido-a,
.field--name-field-objetivos,
.field--name-field-contenidos,
.field--name-variations {
  padding: 10px 20px;
  border-radius: 20px;
  position: relative;
  margin: 10px 0;
  background-color: var(--gris-fondo);
}

.field--name-variations .select-wrapper select {
  border: 2px solid var(--verde);
  color: var(--negro);
  font-weight: bold;
  font-size: 1.1em;
}

.field--name-field-descripcion {
  padding: 20px 0px;
  border-radius: 20px;
  position: relative;
  margin: 10px 0;
}

/* Imagen del curso */
.field--name-field-imagen-del-curso img {
  border-radius: 20px;
  width: 400px;
  max-width: 100%;
  margin: 0 auto;
}

/* Campos de precios especiales */
.field.field--name-field-descripcion-precio {
  width: 100%;
  background-color: var(--verde-claro);
  padding: 0;
  margin: 0 0 16px 0;
  border-radius: 20px;
  font-weight: 800;
  text-align: left;
  margin-block: 16px;
}

.field.field--name-field-descripcion-precio .field--item{
  width: 100%;
  background-color: var(--verde-claro);
  padding: 10px 20px;
  margin: 0 0 16px 0;
  border-radius: 20px;
  font-weight: 800;
  text-align: left;
  margin-block: 16px;
  font-weight: normal;
}

.field.field--name-field-descripcion-precio::before {
  content: 'Otros precios';
  background-color: var(--verde);
  width: 100%;
  padding: 8px 24px;
  display: block;
  position: relative;
  border-radius: 20px 20px 0 0;
}

.field.field--name-field-detalles-precio{
  width: 100%;
  background-color: var(--verde-claro);
  margin: 0 0 16px 0;
  border-radius: 20px;
  text-align: left;
}

.field.field--name-field-detalles-precio div{
  padding: 16px 24px;
  font-size: 1em;
}

.field.field--name-field-detalles-precio .field--label{
  background-color: var(--verde);
  border-radius: 20px 20px 0 0;
  padding: 8px 24px;
}

/* Campo de fecha y hora de finalización */
.field.field--name-field-fecha-y-hora-de-finalizaci {
  position: absolute;
  left: 0;
  top: 0;
  width: 250px;
  background-color: var(--verde);
  padding: 10px 20px;
  margin: 0px 0 0 0;
  border-radius: 20px;
}

/* Responsive para fecha de finalización */
@media screen and (max-width: 768px) {
  #right-prod .field.field--name-field-fecha-y-hora-de-finalizaci {
    font-size: 1em;
    padding: 4px 16px;
    width: 100%;
    border-radius: 10px;
    margin: -52px 0 0 0;
  }
  
  .field.field.field--name-field-descripcion-precio,
  .field.field.field--name-field-detalles-precio {
    margin: 16px 0 36px 0;
  }
}