/**
 * Campos de personalización (an_productfields). Lo carga el módulo como su CSS adicional (clave an_pf_code_css_custom
 * = custom.css) y PrestaShop toma este archivo del tema en lugar del de la carpeta del módulo.
 */
.ficha .an-pf-fields-wrap { margin: 0; }
.ficha .an-pf-fields-wrap > [class*="col-"] { padding: 0; display: flex; flex-direction: column; gap: 18px; }
.ficha .an-pf-field { position: relative; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; }
.ficha .an-pf-field .form-control { margin: 0; }
.ficha .an-pf-field .control-label { font-size: 15px; font-weight: 600; color: var(--ubm-tinta); }
.ficha .an-pf-field-red { color: var(--ubm-error); }
.ficha .an-pf-field textarea.form-control { min-height: 96px; padding: 14px 16px; border-color: var(--ubm-borde); border-radius: var(--ubm-radio-campo); font-size: 16px; line-height: 1.5; resize: vertical; }
.ficha .an-pf-field input.form-control { min-height: 52px; border-color: var(--ubm-borde); border-radius: var(--ubm-radio-campo); }
/* El módulo estira el contador a toda la altura con fondo blanco y tapa el borde derecho del campo: va en la línea de la etiqueta. */
.ficha .an-pf-field .anpf-field-counter-max_length { position: absolute; right: 0; top: 0; bottom: auto; display: block; height: auto; padding: 0; background: none; font-size: 14px; line-height: 22px; color: var(--ubm-texto-3); }
.ficha .an-pf-field:has(.anpf-field-counter-max_length:not(.hidden)) .control-label { padding-right: 76px; }
.ficha .an-pf-field-red { display: none; }
.ficha .an-pf-field [class*="an-pf-field-type-"][class$="-wrap"] { position: static; }
.ficha .an-pf-field .control-label { display: block; margin: 0; }
.ficha .control-label:has(.an-pf-field-red) .an-pf-field-label-title::after { content: ' (obligatorio)'; }
.ficha .anpf-select-dropdown-show { display: flex; align-items: center; min-height: 52px; padding: 0 44px 0 16px; border-color: var(--ubm-borde); border-radius: var(--ubm-radio-campo); cursor: pointer; }
.ficha .anpf-select-dropdown-list { border-radius: var(--ubm-radio-campo); box-shadow: 0 16px 32px -16px rgba(21, 48, 45, .35); }
.ficha .anpf-select-dropdown-item { min-height: 44px; padding: 10px 16px; }
.ficha .an-pf-field-descr { font-size: 15px; color: var(--ubm-texto-2); }
/* Preguntas cortas como botones (el desplegable del módulo queda oculto). */
.ficha .an-pf-field.is-pastillas .anpf-select-dropdown, .ficha .an-pf-field.is-pastillas select { display: none; }
.ficha__pastillas { display: flex; flex-wrap: wrap; gap: 10px; }
.ficha__pastilla { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; margin: 0; padding: 0 18px; border: 1px solid var(--ubm-borde); border-radius: 999px; background: #fff; font-size: 15px; font-weight: 500; cursor: pointer; }
.ficha__pastilla:has(input:checked) { padding: 0 17px; border: 2px solid var(--ubm-turquesa); background: var(--ubm-rubor); }
.ficha__pastilla input { width: 18px; height: 18px; margin: 0; accent-color: var(--ubm-turquesa-hondo); }
.ficha__pastilla:focus-within { outline: 2px solid var(--ubm-turquesa-hondo); outline-offset: 2px; }
.ficha .an-pf-field.an-pf-field-type-radio label, .ficha .an-pf-field.an-pf-field-type-checkbox label { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; margin: 0; padding: 0 18px; border: 1px solid var(--ubm-borde); border-radius: 999px; cursor: pointer; }
/* Opciones y casillas: el módulo pone cada una en su div (una por línea); aquí van en fila, como los botones Sí/No.
   Con .an-pf-field para ganar a la regla de columna aunque el navegador tenga guardado el custom.css antiguo del tema. */
.ficha .an-pf-field.an-pf-field-type-radio, .ficha .an-pf-field.an-pf-field-type-checkbox { flex-flow: row wrap; gap: 10px; }
.ficha .an-pf-field-type-radio > :not(.anfield-radio), .ficha .an-pf-field-type-checkbox > :not(.anfield-checkbox) { flex: 0 0 100%; }
.ficha .an-pf-field-type-radio > .control-label, .ficha .an-pf-field-type-checkbox > .control-label { margin-bottom: -4px; }
.ficha .anfield-radio, .ficha .anfield-checkbox { margin: 0; }
.ficha .anfield-radio:not(.anfield-radio-vertical) label:has(input:checked), .ficha .anfield-checkbox:not(.anfield-checkbox-vertical) label:has(input:checked) { padding: 0 17px; border: 2px solid var(--ubm-turquesa); background: var(--ubm-rubor); }
.ficha .anfield-radio input, .ficha .anfield-checkbox input { width: 18px; height: 18px; margin: 0; accent-color: var(--ubm-turquesa-hondo); }
.ficha .anfield-radio:not(.anfield-radio-vertical) label:focus-within, .ficha .anfield-checkbox:not(.anfield-checkbox-vertical) label:focus-within { outline: 2px solid var(--ubm-turquesa-hondo); outline-offset: 2px; }
.ficha .an-pf-fields-total { font-weight: 600; }
.ficha .an-pf-field.has-error textarea, .ficha .an-pf-field .is-invalid { border-color: var(--ubm-error); box-shadow: 0 0 0 1px var(--ubm-error); }
/* Obligatorio sin rellenar al añadir al carrito (themes/ubm/modules/an_productfields/views/js/custom.js). */
.ficha .an-pf-field--error .form-control, .ficha .an-pf-field--error .anpf-select-dropdown-show, .ficha .an-pf-field--error .ficha__pastilla,
.ficha .an-pf-field-type-radio.an-pf-field--error label, .ficha .an-pf-field-type-checkbox.an-pf-field--error label { border-color: var(--ubm-error); box-shadow: 0 0 0 1px var(--ubm-error); }
.an-pf-error { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 14px; font-weight: 500; line-height: 1.45; color: var(--ubm-error); }
.an-pf-error .icono { flex: none; margin-top: 2px; }
/* Error del servidor al añadir: lo pinta el módulo junto al botón; es el único aviso (sin el flotante). */
.ficha .ajax-error { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 12px 16px; border: 1px solid #f1c4bd; border-radius: var(--ubm-radio-campo); background: #fdf2f0; color: var(--ubm-error); font-size: 15px; font-weight: 500; line-height: 1.45; }
/* En error, el anillo de foco también es del color de error. */
.ficha .an-pf-field--error .form-control:focus { border-color: var(--ubm-error); box-shadow: 0 0 0 1px var(--ubm-error); }
.ficha .an-pf-field--error :focus-visible, .ficha .an-pf-field--error .ficha__pastilla:focus-within { outline-color: var(--ubm-error); }

/* Opciones y casillas en vertical: tarjetas (pensadas para opciones con foto). */
.ficha .anfield-radio-vertical-list, .ficha .anfield-checkbox-vertical-list { gap: 10px; }
.ficha .anfield-radio-vertical .anfield-radio-vertical-inner, .ficha .anfield-checkbox-vertical .anfield-checkbox-vertical-inner { width: 128px; gap: 8px; padding: 12px; border: 1px solid var(--ubm-borde); border-radius: 16px; background: #fff; }
.ficha .anfield-radio-vertical :checked + .anfield-radio-vertical-inner, .ficha .anfield-checkbox-vertical :checked + .anfield-checkbox-vertical-inner { padding: 11px; border: 2px solid var(--ubm-turquesa); background: var(--ubm-rubor); }
.ficha .anfield-radio-vertical label:focus-within .anfield-radio-vertical-inner, .ficha .anfield-checkbox-vertical label:focus-within .anfield-checkbox-vertical-inner { outline: 2px solid var(--ubm-turquesa-hondo); outline-offset: 2px; }
.ficha .anfield-radio-vertical-img-wrap, .ficha .anfield-checkbox-vertical-img-wrap, .ficha .anfield-radio-vertical-img-wrap a, .ficha .anfield-checkbox-vertical-img-wrap a { width: 100%; height: auto; aspect-ratio: 1; margin: 0; border-radius: 12px; }
.ficha .anfield-radio-vertical-img-wrap img, .ficha .anfield-checkbox-vertical-img-wrap img { max-width: 100%; max-height: 100%; border-radius: 12px; }
/* Sin foto, el módulo deja un cuadro gris vacío. */
.ficha .anfield-radio-vertical-no-img, .ficha .anfield-checkbox-vertical-no-img { display: none; }
.ficha .anfield-radio-vertical-text .title, .ficha .anfield-checkbox-vertical-text .title { padding-right: 26px; font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--ubm-tinta); }
.ficha .anfield-radio-vertical-text .label-price, .ficha .anfield-checkbox-vertical-text .label-price { font-size: 14px; color: var(--ubm-texto-2); }
/* El módulo dibuja el círculo y la casilla de las tarjetas en azul: con los colores de la tienda. */
.ficha .anfield-radio-vertical input, .ficha .anfield-checkbox-vertical input { top: 14px; right: 14px; width: 18px; height: 18px; border: 1.5px solid var(--ubm-borde); }
.ficha .anfield-radio-vertical input:checked, .ficha .anfield-checkbox-vertical input:checked { border-color: var(--ubm-turquesa-hondo); background-color: var(--ubm-turquesa-hondo); }
.ficha .anfield-radio-vertical input:hover:not(:disabled), .ficha .anfield-checkbox-vertical input:hover:not(:disabled), .ficha .anfield-checkbox-vertical input:focus { border-color: var(--ubm-turquesa-hondo); }
/* Selección múltiple: lista nativa con aire; la elegida en rubor (el degradado evita el azul del sistema). */
.ficha .an-pf-field-type-multiselect select[multiple] { padding: 6px; border-color: var(--ubm-borde); border-radius: var(--ubm-radio-campo); }
.ficha .an-pf-field-type-multiselect option { padding: 10px 12px; border-radius: 10px; color: var(--ubm-tinta); }
.ficha .an-pf-field-type-multiselect option:checked { background: var(--ubm-rubor) linear-gradient(var(--ubm-rubor), var(--ubm-rubor)); color: var(--ubm-turquesa-hondo); font-weight: 600; }
/* Deslizador (rangeslider.js del módulo). */
.ficha .anfield-slider-block { padding-top: 10px; }
.ficha .rangeslider, .ficha .rangeslider__fill { box-shadow: none; }
/* Barra en el gris de los bordes: en rubor casi no se ve sobre blanco. */
.ficha .rangeslider { background: var(--ubm-borde); }
.ficha .rangeslider--horizontal { height: 4px; }
.ficha .rangeslider__fill { background: var(--ubm-turquesa); }
.ficha .rangeslider--horizontal .rangeslider__handle { top: -10px; width: 24px; height: 24px; border: 2px solid var(--ubm-turquesa-hondo); background: #fff; box-shadow: 0 3px 8px -3px rgba(21, 48, 45, .45); }
.ficha .rangeslider__handle::after { display: none; }
.ficha .anfield-slider-head { margin-top: 14px; font-size: 14px; color: var(--ubm-texto-2); }
/* Fecha: icono de calendario y calendario de jQuery UI con el diseño (va fuera de la ficha, al final de la página). */
.ficha .an-pf-field-type-date .form-control { padding-right: 48px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2314958b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") no-repeat right 16px center / 20px; }
#ui-datepicker-div.ui-datepicker { width: 300px; padding: 12px; border: 1px solid var(--ubm-linea); border-radius: 16px; background: #fff; box-shadow: 0 16px 32px -16px rgba(21, 48, 45, .35); font-family: inherit; }
#ui-datepicker-div .ui-datepicker-header { padding: 0 0 8px; border: 0; background: none; }
#ui-datepicker-div .ui-datepicker-title { margin: 0 44px; line-height: 40px; font-family: var(--ubm-letra-titulos); font-weight: 600; font-size: 18px; color: var(--ubm-turquesa); }
#ui-datepicker-div .ui-datepicker-prev, #ui-datepicker-div .ui-datepicker-next { top: 0; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; cursor: pointer; }
#ui-datepicker-div .ui-datepicker-prev { left: 0; }
#ui-datepicker-div .ui-datepicker-next { right: 0; }
#ui-datepicker-div .ui-datepicker-prev:hover, #ui-datepicker-div .ui-datepicker-next:hover { background: var(--ubm-rubor); }
#ui-datepicker-div .ui-datepicker-prev .ui-icon, #ui-datepicker-div .ui-datepicker-next .ui-icon { left: 50%; top: 50%; width: 9px; height: 9px; margin: -4px 0 0 -3px; border: solid var(--ubm-turquesa-hondo); border-width: 0 0 2px 2px; background: none; transform: rotate(45deg); }
#ui-datepicker-div .ui-datepicker-next .ui-icon { margin-left: -6px; transform: rotate(-135deg); }
#ui-datepicker-div table { margin: 0; font-size: 15px; }
#ui-datepicker-div th { padding: 6px 0; font-size: 13px; font-weight: 600; color: var(--ubm-texto-3); }
#ui-datepicker-div td { padding: 2px; }
#ui-datepicker-div td a, #ui-datepicker-div td span { display: flex; align-items: center; justify-content: center; height: 36px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ubm-tinta); font-weight: 500; text-align: center; }
#ui-datepicker-div td a:hover { background: var(--ubm-rubor); color: var(--ubm-turquesa-hondo); }
#ui-datepicker-div td a.ui-state-highlight { box-shadow: inset 0 0 0 1.5px var(--ubm-turquesa); color: var(--ubm-turquesa-hondo); }
#ui-datepicker-div td a.ui-state-active { background: var(--ubm-turquesa-hondo); color: #fff; }
#ui-datepicker-div td.ui-state-disabled span { color: #b6c1bf; opacity: 1; }