/* ==========================================================================
   Cotizador - pantalla de solicitud (pagina 4907)
   Convierte la tabla de YITH y el formulario de Gravity Forms en dos
   tarjetas. Se aplica sobre el markup existente: no se sobrescribe
   ninguna plantilla, asi que una actualizacion de YITH no se lo lleva.
   ========================================================================== */

/* El enlace original va fuera del formulario; lo reubicamos por JS. */
.ywraq-wrapper .yith-ywraq-before-table { display: none; }

/* ---- Dos columnas ---- */
.ywraq-wrapper .ywraq-form-table-wrapper.wide {
    display: grid;
    grid-template-columns: minmax(260px, 340px) 1fr;
    gap: 24px;
    align-items: start;
    max-width: 1120px;
    margin: 0 auto;
}

.lm-card {
    background: #fff;
    border: 1px solid #e8ecf2;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 1px 3px rgba(16, 40, 70, .05);
}

/* ---- Tarjeta izquierda: tu cotizacion ---- */
.lm-card-titulo {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 700;
    color: #005199;
}

.lm-card-contador {
    margin: 0 0 16px;
    font-size: 14px;
    color: #6b7a90;
}

.lm-card-contador strong { color: #1f2b3d; }

#yith-ywrq-table-list { width: 100%; margin: 0; border: 0; }
#yith-ywrq-table-list thead { display: none; }

#yith-ywrq-table-list tbody tr.cart_item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid #eef1f6;
}

#yith-ywrq-table-list tbody tr.cart_item:last-child { border-bottom: 0; }

/* YITH y el tema pintan fondo propio en estas celdas: hay que forzar. */
#yith-ywrq-table-list td {
    border: 0 !important;
    padding: 0 !important;
    background: none !important;
}

#yith-ywrq-table-list td.product-name {
    flex: 1;
    font-size: 15px;
    line-height: 1.35;
    color: #1f2b3d;
}

#yith-ywrq-table-list td.product-name::before {
    content: "\2713";
    margin-right: 8px;
    color: #16a34a;
    font-weight: 700;
}

#yith-ywrq-table-list td.product-remove { order: 2; }

/* El enlace de quitar viene en rojo fuerte desde el tema. */
#yith-ywrq-table-list td.product-remove a {
    color: #9aa7b8 !important;
    font-size: 18px;
    text-decoration: none;
}

#yith-ywrq-table-list td.product-remove a:hover { color: #e0483d !important; }

.lm-agregar-otro {
    display: block;
    margin: 16px 0 0;
    padding: 12px;
    border: 1px dashed #cfd8e3;
    border-radius: 10px;
    background: #fff;
    color: #0066b4;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

.lm-agregar-otro:hover {
    border-color: #0066b4;
    background: #f7fbff;
}

/* YITH deja este bloque flotado y encogido, por eso no centraba. */
.ywraq-wrapper .update-list-wrapper {
    margin: 14px 0 0;
    display: block;
    width: 100%;
}

.ywraq-wrapper .after-table-right {
    float: none !important;
    width: 100% !important;
    text-align: center !important;
}

.ywraq-wrapper button.ywraq_clean_list {
    width: auto !important;
    padding: 4px !important;
    border: 0 !important;
    background: none !important;
    color: #e0483d !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    margin: 0 auto !important;
    display: inline-block !important;
}

.ywraq-wrapper button.ywraq_clean_list:hover { text-decoration: underline; }

/* ---- Tarjeta derecha: formulario ---- */
/* Gravity Forms pinta su propio titulo; el de YITH ya dice lo mismo. */
#ywraq-other-form .gform_heading { display: none; }

#ywraq-other-form .ywraq-form-title {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 700;
    color: #005199;
}

#ywraq-other-form .gform-body .gform_fields {
    display: grid;
    /* Gravity Forms coloca cada campo con "grid-column: span 6",
       asi que la rejilla tiene que ser de 12 columnas, no de 2. */
    grid-template-columns: repeat(12, 1fr);
    gap: 16px 20px;
}

#ywraq-other-form .gfield_label {
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #33415c;
}

#ywraq-other-form input[type=text],
#ywraq-other-form input[type=tel],
#ywraq-other-form input[type=email],
#ywraq-other-form input[type=number],
#ywraq-other-form select {
    width: 100%;
    padding: 12px 14px !important;
    border: 1px solid #dfe5ee !important;
    border-radius: 10px !important;
    background: #fff;
    font-size: 15px;
}

#ywraq-other-form input:focus,
#ywraq-other-form select:focus {
    border-color: #0066b4 !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 102, 180, .12);
}

#ywraq-other-form .gform-footer { margin-top: 20px; }

#ywraq-other-form .gform-footer input[type=submit] {
    width: 100%;
    padding: 15px 20px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #005199, #0088cc);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

#ywraq-other-form .gform-footer input[type=submit]:hover { filter: brightness(1.07); }

#ywraq-other-form .ywraq-required-description {
    margin: 14px 0 0 !important;
    text-align: center;
    font-size: 13px;
    color: #6b7a90;
}

/* ---- Movil ---- */
@media (max-width: 880px) {
    .ywraq-wrapper .ywraq-form-table-wrapper.wide { grid-template-columns: 1fr; }
    #ywraq-other-form .gform-body .gfield { grid-column: span 12 !important; }
}


/* El limite de 25 caracteres de "Identidad" se mantiene, pero el
   contador que pinta Gravity Forms no esta en el diseno. */
#ywraq-other-form .ginput_counter,
#ywraq-other-form .charleft { display: none !important; }

/* La descripcion del campo va bajo la etiqueta, antes del input. */
#ywraq-other-form .gfield_description {
    margin: 0 0 6px;
    padding: 0;
    font-size: 13px;
    color: #6b7a90;
}

/* --------------------------------------------------------------------
   Prefijo "+504" del telefono.
   Es solo visual: el valor guardado sigue sin el prefijo. Para que se
   almacene haria falta un campo real en Gravity Forms.
   -------------------------------------------------------------------- */
#ywraq-other-form .lm-tel-grupo {
    display: flex !important;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid #dfe5ee;
    border-radius: 10px;
    background: #fff;
}

#ywraq-other-form .lm-tel-grupo:focus-within {
    border-color: #0066b4;
    box-shadow: 0 0 0 3px rgba(0, 102, 180, .12);
}

#ywraq-other-form .lm-tel-prefijo {
    display: flex !important;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-right: 1px solid #e6ebf2;
    background: #f6f8fb;
    color: #33415c;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
}

#ywraq-other-form .lm-tel-grupo input[type=tel] {
    flex: 1;
    min-width: 0;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* --------------------------------------------------------------------
   Movil: el carrito flotante y el boton de WhatsApp van en position
   fixed sobre la esquina inferior derecha y tapaban el final del
   formulario. Se reserva aire por debajo para que nada quede oculto.
   -------------------------------------------------------------------- */
@media (max-width: 880px) {
    .ywraq-wrapper { padding-bottom: 150px; }

    #ywraq-other-form .ywraq-required-description,
    #ywraq-other-form .gform-footer { padding-right: 72px; }
}

/* ======================================================================
   Pantalla "cotizacion generada"
   Tres columnas: confirmacion, resumen y siguientes pasos.
   ====================================================================== */
.lm-generada {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
    max-width: 1220px;
    margin: 0 auto;
}

.lm-generada .lm-card { padding: 26px; }

/* ---- Confirmacion ---- */
.lm-generada-ok { text-align: center; }

.lm-check {
    width: 68px;
    height: 68px;
    margin: 0 auto 18px;
    border: 3px solid #d7f5e3;
    border-radius: 50%;
    background: #f2fdf7;
    color: #16a34a;
    font-size: 32px;
    line-height: 62px;
}

.lm-generada-ok h2 {
    margin: 0 0 10px;
    font-size: 24px;
    font-weight: 700;
    color: #005199;
}

.lm-numero {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 700;
    color: #0066b4;
}

.lm-fecha {
    margin: 0 0 16px;
    font-size: 14px;
    color: #6b7a90;
}

.lm-intro {
    margin: 0 0 18px;
    font-size: 15px;
    color: #4a5768;
}

.lm-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin: 0;
}

.lm-btn {
    display: inline-block;
    padding: 13px 22px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none !important;
}

.lm-btn--claro {
    border: 1px solid #bcd9f2;
    background: #f4faff;
    color: #0066b4 !important;
}

.lm-btn--claro:hover { background: #e8f4ff; }

.lm-btn--solido {
    border: 1px solid #005199;
    background: #005199;
    color: #fff !important;
}

.lm-btn--solido:hover { background: #00417c; }

.lm-aviso {
    margin: 18px 0 0;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
}

.lm-aviso--ok { background: #eafaf0; color: #1b7f3a; }
.lm-aviso--error { background: #fdeeee; color: #b00020; }

/* ---- Resumen ---- */
.lm-resumen h3,
.lm-siguiente h3 {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 700;
    color: #005199;
}

.lm-resumen table {
    width: 100%;
    margin: 0 0 16px;
    border-collapse: collapse;
}

.lm-resumen thead th {
    padding: 0 0 10px;
    border-bottom: 1px solid #e8ecf2;
    color: #6b7a90;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
}

/* Solo hay una columna: el nombre del examen. */

.lm-resumen tbody th {
    padding: 13px 0;
    border-bottom: 1px solid #f1f4f8;
    color: #1f2b3d;
    font-size: 15px;
    font-weight: 400;
    text-align: left;
}



.lm-nota {
    margin: 0 0 6px;
    font-size: 13px;
    color: #4a5768;
}

.lm-nota::before { content: "\24D8"; margin-right: 6px; color: #9aa7b8; }
.lm-nota--suave { color: #8a97a8; }

/* ---- Siguientes pasos ---- */
/* Banda inferior a lo ancho: titulo arriba y las cuatro tarjetas en fila. */
.lm-siguiente {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    align-items: stretch;
    background: #f7fbff;
}

.lm-siguiente h3 {
    grid-column: 1 / -1;
    margin: 0 0 4px;
}

.lm-accion {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 0;
    padding: 13px 15px;
    border: 1px solid #e2ecf6;
    border-radius: 10px;
    background: #fff;
    text-decoration: none !important;
}

.lm-accion:hover { border-color: #0066b4; }

.lm-accion-txt strong {
    display: block;
    color: #005199;
    font-size: 14px;
    font-weight: 700;
}

.lm-accion-txt em {
    display: block;
    color: #7b8798;
    font-size: 13px;
    font-style: normal;
}

.lm-ayuda {
    margin-top: 0;
    padding: 14px 15px;
    border: 1px solid #e2ecf6;
    border-radius: 10px;
    background: #fff;
    font-size: 13px;
    color: #7b8798;
}

.lm-ayuda strong {
    display: block;
    margin-bottom: 3px;
    color: #005199;
    font-size: 14px;
}

.lm-ayuda a { color: #0066b4; font-weight: 600; }

@media (max-width: 1080px) {
    .lm-siguiente { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
    .lm-generada { grid-template-columns: 1fr; }
    .lm-siguiente { grid-template-columns: 1fr; }
    .lm-botones .lm-btn { flex: 1 1 100%; text-align: center; }
}

/* ======================================================================
   Vista de una cotizacion dentro de Mi cuenta.
   El cliente entra a ver su cotizacion, no a administrar su cuenta:
   el menu lateral solo despista, sobre todo si su usuario tiene rol de
   administrador y le aparecen opciones que no le corresponden.
   ====================================================================== */
body.lm-vista-cotizacion .woocommerce-MyAccount-navigation { display: none !important; }

body.lm-vista-cotizacion .woocommerce-MyAccount-content {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* El tema pone los h2 en mayusculas; aqui el diseno los quiere normales. */
.lm-generada-ok h2 {
    text-transform: none !important;
    letter-spacing: normal;
}

/* Que los dos botones quepan en una linea dentro de la tarjeta. */
.lm-generada .lm-btn {
    padding: 13px 16px;
    font-size: 14px;
}

/* Iconos de la banda "que deseas hacer ahora". */
.lm-accion-ico {
    display: flex;
    flex: 0 0 26px;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    color: #0066b4;
}

.lm-accion-ico svg {
    width: 24px;
    height: 24px;
    display: block;
}

.lm-ico-wa { color: #25d366; }

.lm-ayuda {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lm-ayuda .lm-accion-txt em {
    display: block;
    color: #7b8798;
    font-size: 13px;
    font-style: normal;
    line-height: 1.45;
}

.lm-ayuda .lm-accion-txt strong { color: #005199; font-size: 14px; }

/* El tema pinta borde exterior y filas alternas en las tablas; aqui el
   resumen va sin recuadro, solo con las lineas finas de cada fila. */
.lm-resumen table,
.lm-resumen thead,
.lm-resumen tbody,
.lm-resumen tr,
.lm-resumen th,
.lm-resumen td {
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.lm-resumen table { border: 0 !important; }

.lm-resumen thead th { border-bottom: 1px solid #e8ecf2 !important; }
.lm-resumen tbody th { border-bottom: 1px solid #f1f4f8 !important; }
.lm-resumen tbody tr:last-child th { border-bottom: 0 !important; }


/* ----------------------------------------------------------------------
   Banda "que deseas hacer ahora".
   Antes las cuatro piezas eran hijas directas de la tarjeta y la de
   ayuda, mas alta que las demas, ocupaba varias filas: eso empujaba las
   acciones a una sola columna y dejaba media banda vacia. Ahora van en
   su propia rejilla, cuatro tarjetas iguales en una sola fila.
   ---------------------------------------------------------------------- */
.lm-siguiente {
    display: block;
    grid-column: 1 / -1;
    background: #f7fbff;
}

.lm-siguiente h3 { margin: 0 0 14px; }

.lm-siguiente-items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    align-items: stretch;
}

.lm-siguiente-items > * {
    margin: 0;
    height: 100%;
}

.lm-siguiente-items .lm-accion,
.lm-siguiente-items .lm-ayuda {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px;
    border: 1px solid #e2ecf6;
    border-radius: 12px;
    background: #fff;
}

.lm-siguiente-items .lm-accion-txt em,
.lm-siguiente-items .lm-ayuda em { line-height: 1.4; }

@media (max-width: 1080px) {
    .lm-siguiente-items { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
    .lm-siguiente-items { grid-template-columns: 1fr; }
}

/* WordPress pasa esta salida por wpautop y deja parrafos vacios entre
   los bloques. Dentro de una rejilla cada uno ocupa una celda: eran
   ellos los que descolocaban la fila de acciones. */
.lm-generada p:empty,
.lm-siguiente-items p:empty { display: none !important; }

/* ======================================================================
   Card del listado de examenes (/cotizador/).
   Categoria viene de la taxonomia; ayuno y tiempo de entrega los extrae
   el shortcode [lm_examen_datos] del texto de la descripcion.
   ====================================================================== */
.examen-info .lm-examen-datos {
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
}

.examen-info .lm-examen-datos li {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 0 0 3px;
    padding: 0;
    font-size: 14px;
    line-height: 1.35;
    color: #4a5768;
}

.examen-info .lm-examen-datos li:last-child { margin-bottom: 0; }

.examen-info .lm-dato-ico {
    flex: 0 0 15px;
    margin-top: 2px;
    color: #8fa1b5;
}

.examen-info .lm-dato-ico svg { display: block; }

.examen-info .lm-examen-datos b {
    color: #1f2b3d;
    font-weight: 600;
}

/* La linea de categoria es una lista de iconos de Elementor sin icono:
   se alinea con las otras dos para que las tres lean igual. */
.examen-info .elementor-widget-icon-list .elementor-icon-list-item {
    font-size: 14px;
    line-height: 1.35;
    color: #4a5768;
}

/* ---- Fila inferior: "Ver informacion" y el boton de agregar ---- */
.examen-card .elementor-widget-n-accordion .e-n-accordion-item-title {
    padding: 0;
    color: #0066b4;
    font-size: 14px;
    font-weight: 600;
}

.examen-card .elementor-widget-n-accordion .e-n-accordion-item-title:hover {
    text-decoration: underline;
}


/* fila-inferior-card: "Ver informacion" y "Agregar" en la misma linea.
   El contenedor venia en columna y aplastaba la cabecera del acordeon
   hasta dejarla de un caracter de ancho. */
.examen-card .e-con:has(> .elementor-widget-n-accordion) {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 14px;
}

.examen-card .elementor-widget-n-accordion {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
}

.examen-card .elementor-widget-n-accordion .e-n-accordion,
.examen-card .elementor-widget-n-accordion .e-n-accordion-item { width: auto; }

.examen-card .elementor-widget-n-accordion .e-n-accordion-item-title {
    justify-content: flex-start;
    gap: 6px;
    white-space: nowrap;
}

/* Abierto, el detalle necesita el ancho entero y empuja el boton. */
.examen-card .elementor-widget-n-accordion:has(details[open]) {
    flex: 1 1 100%;
    width: 100%;
}

.examen-card .e-con:has(> .elementor-widget-n-accordion) > .elementor-widget-shortcode {
    flex: 0 0 auto;
    width: auto;
}


/* quinto-paso: en movil la rejilla es de dos columnas y el paso 5 se
   quedaba solo en la fila, con un hueco al lado. Ocupa las dos. */
@media (max-width: 767px) {
    .elementor-element-eead3e7 > .elementor-widget:last-child {
        grid-column: 1 / -1;
    }
}


/* boton-card-redondeado: en la propuesta el boton tiene las esquinas
   suaves, no rectas. */
.examen-card .add-request-quote-button,
.examen-card a.button,
.examen-card .elementor-widget-shortcode a.button {
    border-radius: 8px;
}


/* boton-continuar: el enlace que pinta YITH cuando el examen ya esta
   en la lista no lleva clase, asi que hay que alcanzarlo por posicion. */
.examen-card .e-con:has(> .elementor-widget-n-accordion) .elementor-widget-shortcode a {
    border-radius: 8px;
}


/* hueco-al-expandir: cerrado, la cabecera va centrada junto al boton y
   eso deja 23px de aire arriba. Abierto pasa a ocupar la fila entera y
   se pegaba a la linea de "Resultados". Se repone ese aire. */
.examen-card .elementor-widget-n-accordion:has(details[open]) {
    margin-top: 20px;
}


/* ----------------------------------------------------------------------
   "Como funciona?" plegable.
   Los cinco pasos ocupaban 404px en movil y empujaban el buscador hasta
   los 742px de una pantalla de 812: se llegaba al cotizador sin ver lo
   principal. Ahora vienen cerrados y el propio titulo hace de
   interruptor, que ademas ya estaba puesto ahi.
   ---------------------------------------------------------------------- */
.elementor-element-3a9a256 {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.elementor-element-3a9a256 .elementor-heading-title::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .3s ease;
}

body.lm-pasos-abiertos .elementor-element-3a9a256 .elementor-heading-title::after {
    transform: translateY(2px) rotate(-135deg);
}

.elementor-element-d4356a9 {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding-top: 0 !important;
    transition: max-height .35s ease, opacity .3s ease, padding-top .35s ease;
}

body.lm-pasos-abiertos .elementor-element-d4356a9 {
    max-height: 640px;
    opacity: 1;
    padding-top: 24px !important;
}