/* ==========================================================================
   FICHA DE TRÁMITE NOTARIAL ONLINE (TNO) — hoja de estilos aislada
   ==========================================================================

   POR QUÉ ESTE ARCHIVO EXISTE
   Los estilos de esta ficha vivían dentro del LESS del theme
   (_catalog-product-view.less), mezclados con las reglas del sitio actual.
   Eso significó pelear una y otra vez contra estilos heredados y muy
   sobrescritos: el `position:absolute` de .mask-actions-content, el
   `margin: 0 0 30px` de .box-tocart, el `float:left` de .product.media,
   el `padding-bottom:44px` de .price-box... Cada uno costó varias vueltas
   de depuración.

   Este archivo se carga ÚNICAMENTE en fichas de trámite (ver
   Observer/AddTramiteLayoutHandle.php + layout catalog_product_view_tno_tramite.xml),
   así que:
     - Nada de aquí afecta al resto del catálogo.
     - No compite con la cascada del LESS del theme (se carga después).
     - No depende de variables LESS del theme: usa sus propias custom
       properties, con los mismos valores del diseño original de Camila.

   ORGANIZACIÓN
     1. Variables
     2. Reset dirigido (solo lo que causó problemas)
     3. Layout de 2 columnas
     4. Tabs
     5. Opciones (firmantes / certificación notarial)
     6. Precio + botón Comprar
     7. Links inferiores
     8. Modales (¿Cómo funciona? / Ventajas / Notarización / PDF)
     9. Ocultamiento de bloques nativos redundantes
    10. Responsive

   NOTA SOBRE LOS MODALES: Magento_Ui/js/modal mueve los modales al <body>
   al abrirlos, o sea que quedan FUERA de .tno-ficha-layout. Por eso sus
   reglas van scopeadas por su propia clase (.modal-tno-info) y no
   anidadas bajo el wrapper de la ficha.
   ========================================================================== */

/* ---------- 1. Variables (mismos valores del diseño original) ---------- */
:root {
    --tno-primario: #BD0F47;
    --tno-secundario: #E33C4B;
    --tno-acento: #215166;
    --tno-texto-neutro: #434343;
    --tno-texto-suave: #797979;
    --tno-gris-caja: #F3F3F3;
    --tno-gris-info: #6D8792;
    --tno-blanco: #FFFFFF;
    --tno-borde: #DDDDDD;
    --tno-gradiente-btn: linear-gradient(90deg, #E33C4B 0%, #B12C54 100%);
    /* Alto compartido por el precio y el botón "Comprar", para que queden
       alineados sin depender de que sus tamaños naturales coincidan. */
    --tno-alto-fila-precio: 46px;
    /* Ancho de la columna de la imagen en desktop. */
    --tno-ancho-media: 10%;
}

/* ---------- 2. Reset dirigido ----------
   No se usa un reset total (`all: initial` o similar): rompería Fotorama,
   los modales y los controles de formulario, que son componentes nativos
   de Magento que necesitamos conservar funcionando. Se resetean solo las
   propiedades que efectivamente causaron problemas de layout. */
.tno-ficha-layout,
.tno-ficha-layout .product.media,
.tno-ficha-layout .product-info-price,
.tno-ficha-layout .product-add-form,
.tno-ficha-layout .box-tocart,
.tno-ficha-layout .mask-actions-content,
.tno-ficha-layout .price-box,
.tno-ficha-form,
.tno-ficha-opciones,
.tno-ficha-compra {
    float: none;
    position: static;
    box-sizing: border-box;
}

/* El contenedor padre nativo trae ancho/float/márgenes pensados para el
   layout viejo (galería como hermano flotado).

   OJO CON LA ESPECIFICIDAD: la regla del theme es
   `.catalog-product-view > .page-wrapper > .page-main .product-info-main`
   (4 clases). Un selector corto como `.product-info-main:has(...)` NO le
   gana, aunque este archivo cargue después — la especificidad manda sobre
   el orden de carga. Por eso acá se replica la misma profundidad y se usa
   !important en el ancho: es una anulación deliberada de una regla del
   theme que no podemos eliminar porque la usa el resto del catálogo. */
.catalog-product-view > .page-wrapper > .page-main .product-info-main:has(.tno-ficha-layout),
.catalog-product-view .product-info-main:has(.tno-ficha-layout) {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
}

/* ---------- 3. Layout de 3 columnas ---------- */
.tno-ficha-layout {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    font-family: 'Roboto', sans-serif;
    color: var(--tno-texto-neutro);
}

/* Columna 1: Media (10%) */
.tno-ficha-col-media {
    flex: 0 0 var(--tno-ancho-media);
    max-width: var(--tno-ancho-media);
    width: 10%;
    min-width: 0;
    box-sizing: border-box;
}

/* Columna 2: Content (65%) */
.tno-ficha-col-content {
    flex: 0 0 65%;
    max-width: 65%;
    width: 65%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0 48px; /* Opcional: padding interno para separación */
}

/* Columna 3: Form Sticky (25%) */
.tno-ficha-col-form {
    flex: 0 0 25%;
    max-width: 25%;
    width: 25%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0;

    /* Propiedades Sticky */
    position: -webkit-sticky; /* Soporte para Safari */
    position: sticky !important;
    top: 20px !important; /* Distancia desde la parte superior del navegador donde se fija */
    align-self: flex-start; /* Evita que el contenedor se estire a la altura del padre */
    z-index: 10;
}
/* `position: sticky` deja de funcionar si CUALQUIER ancestro tiene
   overflow distinto de visible. Hay que liberar esa cadena, pero SOLO los
   ancestros reales de la columna sticky.

   La versión original de esta regla incluía `div` (todos los divs de la
   página) y `header`/`section`. Eso rompe cosas que dependen de recortar
   su contenido: el modal del PDF, la galería Fotorama, los menús
   desplegables del header y el propio `.tno-pdf-viewer`. Por eso se
   acotó a la cadena de contenedores que efectivamente envuelve la ficha. */
.catalog-product-view,
.catalog-product-view .page-wrapper,
.catalog-product-view .page-main,
.catalog-product-view .columns,
.catalog-product-view .column.main,
.catalog-product-view .product-info-main,
.catalog-product-view .tno-ficha-layout {
    overflow: visible !important;
}

.tno-ficha-col-media .product.media {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

/* Fotorama escribe width/height INLINE sobre estos elementos cuando mide
   su contenedor. Un estilo inline solo se puede vencer con !important, y
   hace falta en TODOS los breakpoints (no solo móvil): si midió un
   contenedor angosto antes de que aplicara nuestro layout, la imagen
   queda como una franja delgada. */
.tno-ficha-col-media .fotorama,
.tno-ficha-col-media .fotorama__wrap,
.tno-ficha-col-media .fotorama__stage,
.tno-ficha-col-media .fotorama__stage__shaft,
.tno-ficha-col-media .gallery-placeholder,
.tno-ficha-col-media .fotorama-item {
    width: 100% !important;
    max-width: 100% !important;
}

.tno-ficha-col-media .fotorama__stage__frame .fotorama__img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    position: relative !important;
}

.tno-ficha-col-content {
    flex: 1 1 0;
    min-width: 0;
}

.tno-ficha-col-content > * {
    float: none;
    width: auto;
    max-width: none;
}


/* ---------- Adaptación Responsive ---------- */

/* 1. TABLETS (Pantallas entre 768px y 1024px) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    /* Ocultar la primera columna */
    .tno-ficha-col-media {
        display: none !important;
    }

    /* Redistribuir espacio entre content y form (ej. 65% y 35% para sumar 100%) */
    .tno-ficha-col-content {
        flex: 0 0 65%;
        max-width: 65%;
        width: 65%;
        padding: 0 24px; /* Reducimos padding para pantallas medianas */
    }

    .tno-ficha-col-form {
        flex: 0 0 35%;
        max-width: 35%;
        width: 35%;
    }
}

/* 2. TELÉFONOS (Pantallas menores a 768px) */
@media screen and (max-width: 767px) {
    /* Ocultar la primera columna */
    .tno-ficha-col-media {
        display: none !important;
    }

    /* Forzar a content y form a ocupar el 100% de ancho (se apilan verticalmente) */
    .tno-ficha-col-content,
    .tno-ficha-col-form {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }

    .tno-ficha-col-content {
        padding: 0 16px; /* Ajuste de padding para pantallas pequeñas */
        margin-bottom: 24px; /* Separación antes de que empiece el form */
    }

    /* Desactivar sticky en móviles para evitar problemas de scroll */
    .tno-ficha-col-form {
        position: static !important;
    }
}

 

/* ---------- 3b. Secciones de la columna de contenido ---------- */
.tno-ficha-titulo .page-title-wrapper,
.tno-ficha-titulo .page-title {
    margin: 0;
    text-transform: capitalize !important;
}

.tno-ficha-tabs:empty,
.tno-ficha-titulo:empty,
.tno-ficha-form:empty,
.tno-ficha-links:empty {
    display: none;
}

/* ---------- 4. Tabs (¿Qué es? / ¿Para qué sirve? / Importante / Ver documento) ---------- */
.tno-tabs-block {
    margin: 15px 0 20px;
}

.tno-tabs-block .tno-tab-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 0;
    margin: 0 0 15px;
    list-style: none;
}

.tno-tabs-block .tno-tab-buttons li {
    display: flex;
    align-items: center;
    margin: 0;
}

/* inline-flex + align-items:center hace que se vean igual sea <button> o
   <a> (tenían alturas distintas por defecto y se desalineaban). */
.tno-tabs-block .tno-tab-button {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    padding: 6px 18px;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.6;
    color: var(--tno-primario);
    background: var(--tno-blanco);
    border: 1px solid var(--tno-primario);
    border-radius: 20px;
    text-decoration: none;
    cursor: pointer;
    transition: 0.2s ease-in-out;
}

.tno-tabs-block .tno-tab-button:hover,
.tno-tabs-block .tno-tab-button.tno-active-tab {
    color: var(--tno-blanco);
    background: var(--tno-gradiente-btn);
    border-color: transparent;
}

.tno-tabs-block .tno-eye-icon {
    margin-right: 4px;
}

.tno-tabs-block .tno-tab-panel {
    display: none;
    font-size: 14px;
    line-height: 1.4;
    text-align: left;
}

.tno-tab-panel :is(h1, h2, h3, h4, h5, h6) {
    color: #bd0f47;
    font-family: Roboto, sans-serif;
    font-size: 20px;
    font-weight: 600;
    text-align: left;
}

.tno-tabs-block .tno-tab-panel.tno-active-tab {
    display: block;
}

/* ---------- 5. Opciones: firmantes / certificación notarial ---------- */
.tno-ficha-opciones .tno-option-title {
    color: var(--tno-primario);
}

.tno-ficha-opciones .tno-field-help, .tno-field-important {
    margin: 4px 0px;;
    padding: 0px;
    font-size: 13px;
    text-align: left;
    line-height: 1.2;
    color: var(--tno-texto-neutro);
}

.tno-field-important {
    border: 1px solid var(--tno-primario);
    /* Sin fondo: solo borde (confirmado por diseño). */
    background-color: transparent;
    border-radius: 4px;
    padding: 8px 10px;
    margin: 2px 0px 12px 0px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--tno-primario);
}

/* El contenido viene de un bloque CMS (WYSIWYG): se normalizan los
   márgenes de los <p> para que no descuadren el recuadro. */
.tno-field-important p {
    margin: 0;
}

.tno-field-important p + p {
    margin-top: 6px;
}

.tno-ficha-opciones .tno-field-help a {
    color: var(--tno-primario);
    text-decoration: underline;
    cursor: pointer;
}

/* Checkbox de certificación notarial.
   Reemplaza al <select> anterior: mientras haya una sola notaría, es una
   decisión de sí/no en vez de una lista de una sola opción. */
/* Grupo de opciones notariales: puede tener uno o varios valores, según
   lo configurado en el admin. */
.tno-certificar-group {
    margin: 8px 0 4px;
}

.tno-certificar-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 6px;
}

.tno-certificar-check:last-child {
    margin-bottom: 0;
}

.tno-certificar-check .tno-certificar-input {
    /* accent-color pinta el check con el color de marca sin tener que
       reconstruir el control entero (que rompería accesibilidad). */
    accent-color: var(--tno-primario);
    width: 16px;
    height: 16px;
    margin: 1px 0 0;
    flex: 0 0 auto;
    cursor: pointer;
}

.tno-certificar-check label {
    font-size: 13px;
    line-height: 1.3;
    color: var(--tno-texto-neutro);
    cursor: pointer;
    margin: 0;
}

.tno-ficha-opciones select.tno-select-input {
    display: block;
    width: 100%;
    height: 36px;
    box-sizing: border-box;
    /* OJO CON EL ALTO DISPONIBLE
       Con box-sizing: border-box, el espacio real para el texto es
       height − padding vertical − bordes. Antes: 36 − 24 − 2 = 10px, contra
       una fuente de 14px, así que las letras salían cortadas por la mitad
       (reportado en QA en los 39 trámites).
       Ahora: 36 − 12 − 2 = 22px, suficiente para 14px × 1.4 = 19.6px.
       Si se cambia la altura o la tipografía, rehacer esta cuenta. */
    padding: 6px 30px 6px 12px;
    margin-bottom: 0px;
    font-family: Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: var(--tno-texto-neutro);
    background-color: #f8f9fa;
    border: 1px solid var(--tno-texto-neutro);
    border-radius: 4px;
    cursor: pointer;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.tno-ficha-opciones select.tno-select-input:focus {
    outline: none;
    border-color: var(--tno-acento);
}

.tno-ficha-opciones select.tno-select-input:hover {
    border-color: #000;
}

/* ---------- 6. Secciones del formulario ----------
   Las opciones (firmantes / certificación notarial) y el bloque de compra
   (precio + botón) son secciones hermanas e independientes dentro del
   <form>. Antes todo colgaba del contenedor del precio, lo que impedía
   reordenarlas o adaptarlas por separado. */

.tno-ficha-form {
    margin-top: 10px;
}

/* --- Opciones --- */
.tno-ficha-opciones {
    margin-bottom: 20px;
}

/* Clearfix por si los .field nativos usan float. */
.tno-ficha-opciones::after {
    content: "";
    display: table;
    clear: both;
}

.tno-ficha-opciones > .field {
    margin-bottom: 15px;
}

.tno-ficha-opciones > .field:last-child {
    margin-bottom: 0;
}

/* --- Compra (precio + botón) ---
   Ambos comparten --tno-alto-fila-precio y centran su contenido, para
   quedar alineados sin depender de sus alturas naturales. */
.tno-ficha-compra {
    clear: both;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 20px 0 15px;
}

.tno-ficha-compra .price-box,
.tno-ficha-compra .price-final_price {
    margin: 0;
    padding: 0;
    height: var(--tno-alto-fila-precio);
    display: flex;
    align-items: center;
    color:  var(--tno-texto-neutro);
}

.tno-ficha-compra .price-container,
.tno-ficha-compra .price-wrapper {
    display: flex;
    align-items: center;
    height: 100%;
    margin: 0;
}

.tno-ficha-compra .price-container > span,
.tno-ficha-compra .price-wrapper > span {
    margin: 0;
}

.tno-ficha-compra .price {
    font-size: 28px;
    font-weight: 600;
}

/* Contenedor del botón: se anula el margin nativo de .box-tocart
   (`margin: 0 0 30px`) y el position:absolute de .mask-actions-content,
   que descuadraban la fila. */
.tno-ficha-compra .box-tocart {
    height: var(--tno-alto-fila-precio);
    margin: 0;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.tno-ficha-compra .box-tocart .fieldset,
.tno-ficha-compra .box-tocart .mask-actions-content,
.tno-ficha-compra .box-tocart .actions {
    height: 100%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
}

.tno-ficha-compra .box-tocart .action.tocart {
    height: var(--tno-alto-fila-precio);
    width: 100% !important;
    min-width: 150px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 10px 30px;
    font-size: 15px;
    color: var(--tno-blanco);
    background: var(--tno-gradiente-btn);
    border: 0;
    border-radius: 25px;
    cursor: pointer;
}

.tno-ficha-compra .box-tocart .action.tocart span {
    text-transform: none;
    font-family: 'Roboto', Sans Serif;
}

/* ---------- 7. Links inferiores ---------- */
.tno-ficha-links .tno-links-row {
    clear: both;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 25px;
    margin: 15px 0 10px;
}

.tno-ficha-links .tno-links-row a {
    font-size: 13px;
    font-weight: 500;
    color: var(--tno-acento);
    text-decoration: underline;
    cursor: pointer;
}

/* ---------- 8. Modales ----------
   Scopeados por su propia clase porque Magento los mueve al <body> al
   abrirlos (quedan fuera de .tno-ficha-layout). */
.modal-tno-info {
    z-index: 999;
}

.modal-tno-info .modal-title {
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    color: var(--tno-primario);
    font-size: 20px;
    text-align: left;
    border: none;
}

.modal-tno-info .modal-content {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    text-align: justify;
    color: var(--tno-texto-neutro);
    padding: 0;
}

.modal-tno-info .modal-footer {
    display: none;
}

.modal-tno-info .modal-buttons {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.modal-tno-info .modal-buttons .action {
    padding: 8px 40px;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    border: none;
    border-radius: 25px;
    color: var(--tno-blanco);
    background: var(--tno-gradiente-btn);
    cursor: pointer;
}

.modal-tno-info .modal-buttons .action:hover {
    background: var(--tno-primario);
}

.modal-tno-info .modal-inner-wrap {
    max-width: 650px;
    border-radius: 10px;
    padding: 30px 40px;
}

.modal-tno-info .modal-inner-wrap .modal-header {
    padding: 0;
}

/* Modales anchos (¿Cómo funciona? / Ventajas y beneficios) */
.modal-tno-info .modal-inner-wrap:has(.tno-modal-with-image),
.modal-tno-info .modal-inner-wrap:has(.tno-modal-wide) {
    width: 1152px;
    max-width: 95vw;
    min-height: 267px;
}

.modal-tno-info .tno-modal-with-image .modal-title {
    margin-bottom: 15px;
}

.modal-tno-info .tno-modal-subtitle {
    color: var(--tno-primario);
    font-size: 16px;
    font-weight: 600;
    margin: 15px 0 10px;
}

.modal-tno-info .tno-importante-text {
    color: var(--tno-primario);
}

/* Modal con foto a la izquierda (Ventajas y beneficios) */
.tno-modal-body {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.tno-modal-image {
    flex: 0 0 140px;
}

.tno-modal-image img {
    display: block;
    width: 140px;
    height: 140px;
    object-fit: cover;
    border-radius: 8px;
}

/* Pasos del modal "¿Cómo funciona?" */
.tno-steps-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 15px 0;
}

.tno-steps-grid .tno-step-box {
    flex: 1 1 130px;
    padding: 12px;
    text-align: center;
    background: var(--tno-gris-caja);
    border-radius: 5px;
}

.tno-steps-grid .tno-step-box img {
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 auto 8px;
    object-fit: contain;
}

.tno-steps-grid .tno-step-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--tno-primario);
    margin-bottom: 4px;
}

.tno-steps-grid .tno-step-description {
    font-size: 13px;
    margin: 0;
}

.tno-alert-info-box {
    margin: 10px 0 15px;
    padding: 12px 16px;
    border-radius: 6px;
    background-color: var(--tno-gris-info);
    color: var(--tno-blanco);
}

.tno-alert-info-box p {
    margin: 0;
}

/* Sección "Ventajas y beneficios" dentro del modal "¿Cómo funciona?".
   Se separa del contenido de arriba con una línea, para que se lea como
   dos secciones y no como un solo bloque corrido. */
.tno-modal-seccion-ventajas {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--tno-borde);
}

.tno-advantages .tno-advantage-title {
    font-weight: 600;
    color: var(--tno-primario);
}

/* Modal del PDF: más alto que el resto, acá importa leer el documento. */
.modal-tno-pdf .modal-inner-wrap {
    height: 90vh;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

/* CADENA DE ALTURA
   Entre `.modal-inner-wrap` y el <iframe> hay varios contenedores: los que
   agrega Magento al abrir el modal (`.modal-content`, y el div propio del
   modal que se mueve al <body>) más los nuestros (`.modal-inner`,
   `.modal-content`). En flexbox la altura NO se hereda sola: basta con que
   uno de esos niveles no sea flex para que la cadena se corte y el iframe
   colapse a su alto mínimo, dejando el resto del modal en blanco.
   (Este bloque corrige el bug de "se ve solo media página del PDF".) */
.modal-tno-pdf .modal-inner-wrap > .modal-content,
.modal-tno-pdf .modal-inner-wrap > .modal-content > div,
.modal-tno-pdf .tno-modal-wide,
.modal-tno-pdf .tno-modal-wide > .modal-content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Elementos de alto fijo: no deben estirarse ni encogerse. */
.modal-tno-pdf .modal-title,
.modal-tno-pdf .tno-pdf-fallback,
.modal-tno-pdf .modal-buttons {
    flex: 0 0 auto;
}

.tno-pdf-viewer {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 15px;
    border: 1px solid var(--tno-borde);
    border-radius: 6px;
    overflow: hidden;
    background: #f8f9fa;
}

.tno-pdf-frame {
    display: block;
    width: 100%;
    height: 100%;
    /* Sin min-height fijo: con la cadena de altura de arriba, el iframe ya
       ocupa todo el espacio disponible. Un mínimo en px lo desbordaría en
       pantallas bajas. */
    border: 0;
}

.tno-pdf-fallback {
    flex: 0 0 auto;
    margin: 10px 0 0;
    font-size: 13px;
    text-align: center;
    color: var(--tno-texto-suave);
}

.tno-pdf-fallback a {
    color: var(--tno-primario);
    text-decoration: underline;
}

/* ---------- 9. Bloques nativos redundantes ----------
   Su contenido ya se muestra en las tabs; sin ocultarlos aparecen
   duplicados y sin estilo. Este archivo solo se carga en fichas de
   trámite, así que no afecta al resto del catálogo. */
.product.media .float_box_product,
.page-main-description,
.product.attribute.overview,
a.pdf {
    display: none;
}

/* Asterisco rojo de "campo obligatorio" que Magento agrega solo a los
   custom options requeridos — el diseño no lo contempla. */
#product-options-wrapper .field.required > .label:before,
#product-options-wrapper .field.required > .label:after,
#product-options-wrapper .field._required > .label:before,
#product-options-wrapper .field._required > .label:after,
#product-options-wrapper .field.required > label:before,
#product-options-wrapper .field.required > label:after {
    display: none;
    content: none;
}

/* ---------- 10. Responsive ---------- */
@media (max-width: 768px) {
    .tno-ficha-layout {
        gap: 20px;
    }

    .tno-ficha-col-media,
    .tno-ficha-col-content {
        flex: 1 1 100%;
        max-width: 100%;
        width: 100%;
    }

    /* Fotorama escribe medidas inline al inicializarse; en una sola
       columna deben ocupar todo el ancho, no el 40% del layout desktop. */
    .tno-ficha-col-media .product.media,
    .tno-ficha-col-media .fotorama__stage,
    .tno-ficha-col-media .fotorama__wrap {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Las 3 pills no caben en una fila con el tamaño de desktop. */
    .tno-tabs-block .tno-tab-button {
        padding: 6px 14px;
        font-size: 12px;
    }

    .tno-ficha-opciones select.tno-select-input {
        width: 100%;
    }

    .tno-ficha-compra {
        gap: 15px;
    }

    .tno-modal-body {
        flex-direction: column;
    }

    .tno-modal-image {
        flex: 0 0 auto;
        margin: 0 auto;
    }
}

/* En pantallas chicas el documento necesita todo el alto disponible. */
@media (max-width: 768px) {
    .modal-tno-pdf .modal-inner-wrap {
        height: 95vh;
        max-height: 95vh;
        padding: 20px;
    }
}

/*UX UI STYLE*/
.tno-ficha-col-form {
    /*! border: 1px solid red; */
}

.tno-ficha-form {
    /*! border: 1px solid pink; */
    margin: 0;
    padding: 16px 16px;
    border-radius: 16px;
    background-color: #F3F3F3;
}

.tno-option-title {
    font-size: 18px;
    margin:0;
}

.field .label {
    margin: 0 !important;
}

/* precio */

/* Contenedor principal: alinea precio y botón al centro */
.tno-ficha-compra {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
}

/* Bloque del precio: alinea la cifra y el "+ IVA" horizontalmente */
.tno-ficha-compra .price-box .price-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px; /* Espacio entre $4.390 y + IVA */
}

/* "+ IVA": lo agrega el JS de tno-layout.phtml junto al precio (ver ahí
   por qué no se resuelve con la configuración de moneda de Magento).
   Va más chico y en peso normal para que la cifra siga siendo lo que
   destaca. */
.tno-ficha-compra .tno-price-iva {
    font-size: 13px;
    font-weight: 400;
    color: var(--tno-texto-neutro);
    white-space: nowrap;
}

/* Bloque del botón: asegura que ocupe todo el ancho o se alinee al centro */
.tno-ficha-compra .tno-box-tocart,
.tno-ficha-compra .tno-box-tocart .fieldset,
.tno-ficha-compra .tno-box-tocart .actions {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Estilo para asegurar que el botón se centre */
.tno-ficha-compra #product-addtocart-button {
    margin: 0 auto;
}