/* Shared article components. Registry: site-factory/docs/seo/ARTICLE_COMPONENTS_GUIDE.md */

        .listado_info_top{
            padding-left: 15px;
        }
        .blog-post-txt{
            color: #333;
        }
        .blog-post-txt{
            font-size: 16px;
            line-height: 1.6;
            font-family: verdana;
        }
        .blog-post-txt p{
            margin-bottom: 25px;
        }

        /* Native definition lists need no article-specific wrappers or classes. */
        .blog-post-txt dl{
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr);
            margin: 28px 0;
            padding: 0;
            border-bottom: 1px solid #dfe4e7;
            line-height: 1.65;
        }
        .blog-post-txt dl > dt,
        .blog-post-txt dl > dd{
            min-width: 0;
            margin: 0;
            padding: 20px 0;
            border-top: 1px solid #dfe4e7;
            overflow-wrap: anywhere;
        }
        .blog-post-txt dl > dt{
            grid-column: 1;
            padding-right: 24px;
            font-weight: 700;
            color: #292f34;
        }
        .blog-post-txt dl > dd{
            grid-column: 2;
            font-weight: 400;
        }
        @media (max-width: 640px){
            .blog-post-txt dl{
                grid-template-columns: minmax(0, 1fr);
            }
            .blog-post-txt dl > dt{
                grid-column: 1;
                padding: 20px 0 6px;
            }
            .blog-post-txt dl > dd{
                grid-column: 1;
                padding: 0 0 20px;
                border-top: 0;
            }
        }
        
        .blog-post-txt img{
            width: 100%;
            max-width: 100%;
        }
        .blog-post-txt figure.article-figure {
            margin: 0 0 30px;
        }
        .blog-post-txt figure.article-figure > img {
            display: block;
            width: 100%;
            height: auto;
        }
        .blog-post-txt figure.article-figure > figcaption {
            margin: 12px 0 0;
            text-align: left;
            font-size: 14px;
            line-height: 21px;
            font-style: italic;
            color: #333;
        }


        .blog-post-txt h2 {
            margin-top: 40px;
            margin-bottom: 30px;
            font-size: 26px;
            line-height: 1.4;
        }
        .blog-post-txt h3 {
            font-size: 19px;
            line-height: 1.5;
            margin: 25px 0px;
        }
        .blog-post-txt h4 {
            font-size: 17px ;
            line-height: 1.5;
        }
        .google-maps {
            position: relative;
            padding-bottom: 75%;
            height: 0;
            overflow: hidden;
            margin-top: 50px;
            margin-bottom: 80px;
        }
        .google-maps iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100% !important;
            height: 100% !important;
        }
        .table-wrapper > .text_tabla {
            border-collapse: collapse;
            width: 100%;
            border: 1px solid #ccc;
        }
        .table-wrapper > .text_tabla th,
        .table-wrapper > .text_tabla td {
            padding: 10px;
            text-align: left;
            border: 1px solid #ddd;
            white-space: nowrap; /* Evita que el texto se divida en columnas pequeñas */
            line-height: 20px;
        }
        .table-wrapper > .text_tabla th{
            text-align: center;
            background-color: #eaeaea;
            color: #333333e8 !important;
            padding: 10px;
            border: 1px solid #ddd;
            white-space: nowrap;
            line-height: 20px;
        }
        .table-wrapper .text_tabla td:first-child {
           font-weight: bold;
            background-color: #c49df321;
        }

        .table-wrapper > .text_tabla tr:nth-child(even) {
            background-color: white;
        }

        .table-wrapper > .text_tabla td{
            color: #333333e8 !important;
        }
        .table-wrapper > .text_tabla tr.text_tabla_total > td {
            background-color: #e8f5e9;
            border-top: 2px solid #333;
            font-weight: bold;
        }
        /* Contenedor que permite scroll horizontal */
        .table-wrapper {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            margin-bottom: 32px;
        }


/* ============================================================
   TIPOS DE TABLA (clases que se ponen en la <table>)

   1) .text_tabla                  -> ancho fijo, nunca corta texto.
                                      Si no cabe, scroll horizontal SIEMPRE.
   2) .text_tabla .text_tabla_adaptable
                                   -> envuelve el texto mientras quepa; el
                                      scroll horizontal aparece SOLO si la
                                      tabla no cabe ni con sus anchos mínimos
                                      (sin breakpoint, decide el contenido).
   3) .text_tabla .text_tabla_fluida
                                   -> SIEMPRE salto de línea en las dos
                                      columnas, a cualquier tamaño. NUNCA scroll.
   4) .text_tabla .text_tabla_ficha
                                   -> en desktop, 2 columnas (etiqueta estrecha
                                      / contenido ancho). En móvil cada fila se
                                      APILA: la etiqueta pasa a mini-cabecera a
                                      ancho completo y el contenido va debajo,
                                      también a ancho completo. NUNCA scroll.
                                      Ideal para "etiqueta corta + lista de
                                      bullets" (fichas).

   En 2, 3 y 4 la 1ª columna es estrecha (etiquetas) y el resto reparte el
   espacio, así que con 3 columnas sigue funcionando (con >3 ya no tiene
   mucho sentido un layout de etiqueta/valor).
   ============================================================ */

/* --- 2) text_tabla_adaptable: envuelve mientras quepa, scroll SOLO si no cabe ---
   No usa breakpoint. El navegador reparte el ancho según el contenido y
   respeta un min-width legible por columna. Mientras la suma de mínimos
   cabe en pantalla -> envuelve sin scroll; si no cabe (tablas anchas, móvil
   muy estrecho) -> el wrapper hace scroll horizontal de forma automática. */
.table-wrapper > .text_tabla.text_tabla_adaptable {
    table-layout: auto;
    width: 100%;
}

.table-wrapper > .text_tabla.text_tabla_adaptable th,
.table-wrapper > .text_tabla.text_tabla_adaptable td {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    vertical-align: top;
    min-width: 170px; /* ancho mínimo legible de una celda de contenido */
}

/* La 1ª columna (etiquetas) puede quedar más estrecha que las de contenido */
.table-wrapper > .text_tabla.text_tabla_adaptable th:first-child,
.table-wrapper > .text_tabla.text_tabla_adaptable td:first-child {
    min-width: 100px;
}

/* --- 3) text_tabla_fluida: salto de línea siempre, nunca scroll --- */
.table-wrapper > .text_tabla.text_tabla_fluida {
    table-layout: fixed;
    width: 100%;
}

.table-wrapper > .text_tabla.text_tabla_fluida th,
.table-wrapper > .text_tabla.text_tabla_fluida td {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    vertical-align: top;
}

/* 1ª columna estrecha (etiquetas), el resto ancho (contenido) */
.table-wrapper > .text_tabla.text_tabla_fluida th:first-child,
.table-wrapper > .text_tabla.text_tabla_fluida td:first-child {
    width: 34%;
}

@media (max-width: 640px) {
    /* En pantallas pequeñas damos algo más de aire a la etiqueta
       y bajamos un poco el padding para que respire */
    .table-wrapper > .text_tabla.text_tabla_fluida th:first-child,
    .table-wrapper > .text_tabla.text_tabla_fluida td:first-child {
        width: 40%;
    }

    .table-wrapper > .text_tabla.text_tabla_fluida th,
    .table-wrapper > .text_tabla.text_tabla_fluida td {
        padding: 8px;
        line-height: 18px;
    }
}
.table-wrapper > .text_tabla.text_tabla_ficha {
    table-layout: fixed;
    width: 100%;
}

.table-wrapper > .text_tabla.text_tabla_ficha th,
.table-wrapper > .text_tabla.text_tabla_ficha td {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    vertical-align: top;
}

/* Desktop: 1ª columna estrecha (etiqueta), el resto ancho (contenido) */
.table-wrapper > .text_tabla.text_tabla_ficha th:first-child,
.table-wrapper > .text_tabla.text_tabla_ficha td:first-child {
    width: 30%;
}

@media (max-width: 640px) {
    .table-wrapper > .text_tabla.text_tabla_ficha {
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        border-collapse: separate;
        border-spacing: 0;
    }

    /* Ocultamos la fila de cabecera: con thead o con una fila de <th> sueltos */
    .table-wrapper > .text_tabla.text_tabla_ficha thead,
    .table-wrapper > .text_tabla.text_tabla_ficha tr:has(th) {
        display: none;
    }

    .table-wrapper > .text_tabla.text_tabla_ficha tbody {
        display: block;
        width: 100%;
    }

    /* Apilamos las filas sin crear un segundo recuadro ni separación extra. */
    .table-wrapper > .text_tabla.text_tabla_ficha tr {
        display: block;
        width: 100%;
        margin: 0;
        border: 0;
        box-sizing: border-box;
    }

    /* Las celdas pasan a ancho completo, una debajo de otra */
    .table-wrapper > .text_tabla.text_tabla_ficha td {
        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        border: none;
        padding: 10px 12px;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    /* La etiqueta (1ª celda) hace de cabecera de la tarjeta.
       width:100% es necesario aquí porque la regla de desktop
       (td:first-child { width:30% }) tiene la misma especificidad y, sin
       esto, ganaría y dejaría la etiqueta estrecha también en móvil. */
    .table-wrapper > .text_tabla.text_tabla_ficha td:first-child {
        width: 100%;
        border-bottom: 1px solid #ddd;
    }

    /* Separa el encabezado de cada ficha salvo el primero. */
    .table-wrapper > .text_tabla.text_tabla_ficha tr:not(:has(th)) + tr:not(:has(th)) td:first-child {
        border-top: 1px solid #ddd;
    }

    /* Las listas no añaden hueco antes de la siguiente ficha. */
    .table-wrapper > .text_tabla.text_tabla_ficha td > ul,
    .table-wrapper > .text_tabla.text_tabla_ficha td > ol {
        margin-top: 0;
        margin-bottom: 0;
        padding-left: 1.25em;
    }

    .table-wrapper > .text_tabla.text_tabla_ficha td > :first-child {
        margin-top: 0;
    }

    .table-wrapper > .text_tabla.text_tabla_ficha td > :last-child {
        margin-bottom: 0;
    }
}



        p.landing_tabla_deslizar{
            text-align: right;
            font-size: 14px !important;
            font-style: oblique !important;
            color: rgba(228, 11, 59, 0.95) !important;
            font-weight: bold;

        }
        .table_color_1{
            background-color: #ffeb004f;
            padding: 1px 2px;
            border-radius: 4px;
        }
        .table_color_2{
            background-color: #37ff004a;
            padding: 1px 2px;
            border-radius: 4px;
        }
        .table_color_3{
            background-color: #3000ff2b;
            padding: 1px 2px;
            border-radius: 4px;
        }

        .legenda_tabla_landing {
          margin-top: 20px;
          padding: 0px;
          font-size: 15px !important;
          line-height: 1.6;
          margin-bottom: 40px;
          font-style: oblique;
        }
        .legenda_tabla_landing ul {
          margin: 0px;
          padding-left: 5px;
          list-style-type: none;
        }
        .legenda_tabla_landing ul li {
          margin-bottom: 8px;
          font-size: 15px !important;
        }

.newlanding-bloque-consejo{
    background-color: #f0f8ff; 
    padding: 25px; 
    border-left: 5px solid #0073e6; 
    margin-top: 20px;
    margin-bottom: 30px;
}
.newlanding-bloque-alerta{
    background-color: #fff3cd; 
    border: 1px solid #ffeeba; 
    color: #856404; 
    padding: 20px; 
    border-radius: 8px; 
    margin-top: 30px;
    margin-bottom: 30px;
}
.newlanding-bloque-resumen{
    background-color: #eefbfb; 
    border: 1px solid #bce0e0; 
    padding: 20px; 
    border-radius: 8px; 
    margin-top: 30px;
    margin-bottom: 30px;
}
.newlanding-bloque-checklist{
    background-color: #f0fff0; 
    padding: 25px; 
    border-left: 5px solid #28a745;
    margin-top: 20px;
    margin-bottom: 30px;
}


.text_tabla td ul,
.text_tabla th ul {
    margin: 0;
    padding-left: 1.1em; /* ajusta a 0.9–1.3em según te guste */
}

.text_tabla td ul li,
.text_tabla th ul li {
    margin: 0.15em 0;     /* separación vertical suave */
    line-height: 1.35;    /* legibilidad */
}



/* Key facts: an opt-in summary-panel composition, not a new panel colour. */
.blog-post-txt .article-key-facts > h4 {
    margin: 0;
    font-size: 17px;
    line-height: 1.5;
}
.blog-post-txt .article-key-facts > dl {
    margin: 18px 0 0;
    border-bottom: 0;
}
.blog-post-txt .article-key-facts > dl > dt:first-of-type,
.blog-post-txt .article-key-facts > dl > dd:first-of-type {
    border-top: 0;
    padding-top: 0;
}
.blog-post-txt .article-key-facts > dl > dt:last-of-type,
.blog-post-txt .article-key-facts > dl > dd:last-of-type {
    padding-bottom: 0;
}