/**
 * ------------------------------------------------------------
 * DISEÑO PÚBLICO DEL PLUGIN TRÁMITES MÉXICO
 * ------------------------------------------------------------
 * Versión visual 2.5.0.
 *
 * Objetivos principales:
 * - mejorar legibilidad y jerarquía visual;
 * - transmitir claridad y confianza;
 * - reducir el exceso de bordes y cajas;
 * - convertir los CTA superiores en navegación interna;
 * - concentrar las salidas externas en una sección final;
 * - mantener espacios publicitarios claramente separados;
 * - ofrecer una experiencia responsive y ligera.
 * ------------------------------------------------------------
 */


/**
 * ------------------------------------------------------------
 * DESPLAZAMIENTO SUAVE ENTRE ANCLAS
 * ------------------------------------------------------------
 * Los CTA internos llevan al usuario hasta la zona final de
 * enlaces oficiales sin provocar un salto brusco en la página.
 * ------------------------------------------------------------
 */
html {
    scroll-behavior: smooth;
}


/**
 * ------------------------------------------------------------
 * VARIABLES VISUALES DEL COMPONENTE
 * ------------------------------------------------------------
 */
.tmx-publico {
    --tmx-texto: #1f2937;
    --tmx-texto-suave: #5f6f82;
    --tmx-titulo: #162033;
    --tmx-borde: #d9e2ec;
    --tmx-borde-suave: #e9eef4;
    --tmx-fondo: #ffffff;
    --tmx-fondo-suave: #f6f8fb;
    --tmx-fondo-acento: #edf6ff;
    --tmx-fondo-acento-fuerte: #e1f0ff;
    --tmx-acento: #1769c2;
    --tmx-acento-oscuro: #0e4f94;
    --tmx-exito: #18794e;
    --tmx-aviso: #9a6700;
    --tmx-radio: 16px;
    --tmx-sombra: 0 10px 30px rgba(15, 23, 42, 0.065);
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    color: var(--tmx-texto);
    font-size: 17px;
    line-height: 1.72;
}


/**
 * ------------------------------------------------------------
 * PÁGINA A ANCHO COMPLETO
 * ------------------------------------------------------------
 */
body.tmx-pagina-publica #right-sidebar,
body.tmx-pagina-publica #left-sidebar,
body.tmx-pagina-publica .widget-area {
    display: none;
}

body.tmx-pagina-publica #primary,
body.tmx-pagina-publica .content-area {
    width: 100%;
    float: none;
}

body.tmx-pagina-publica .site-content {
    display: block;
}

body.tmx-pagina-publica .entry-content {
    margin-top: 1.35em;
}

body.tmx-pagina-publica .entry-header h1,
body.tmx-pagina-publica .entry-title {
    color: var(--tmx-titulo, #162033);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.12;
    letter-spacing: -0.025em;
}


/**
 * ------------------------------------------------------------
 * INTRODUCCIÓN
 * ------------------------------------------------------------
 */
.tmx-publico__intro {
    margin: 0 0 30px;
}

.tmx-publico__eyebrow,
.tmx-publico__seccion-kicker,
.tmx-publico__variante-numero,
.tmx-publico__fuente-etiqueta {
    display: block;
    margin-bottom: 7px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.075em;
    text-transform: uppercase;
    color: var(--tmx-acento);
}

.tmx-publico__resumen {
    max-width: 920px;
    color: #35445a;
    font-size: 1.12rem;
    line-height: 1.72;
}

.tmx-publico__resumen p:last-child {
    margin-bottom: 0;
}


/**
 * ------------------------------------------------------------
 * AVISO DE VISTA PREVIA
 * ------------------------------------------------------------
 */
.tmx-publico__aviso {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin: 0 0 28px;
    padding: 16px 19px;
    border: 1px solid #efd47c;
    border-radius: 12px;
    background: #fff9df;
    color: #644d00;
}

.tmx-publico__aviso-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #f6d96f;
    font-weight: 900;
}

.tmx-publico__aviso strong,
.tmx-publico__aviso span {
    display: block;
}


/**
 * ------------------------------------------------------------
 * CABECERAS DE SECCIÓN
 * ------------------------------------------------------------
 */
.tmx-publico__seccion-cabecera {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 22px;
}

.tmx-publico__seccion-cabecera h2 {
    margin: 0;
    color: var(--tmx-titulo);
    font-size: clamp(1.55rem, 2.6vw, 2.05rem);
    line-height: 1.2;
    letter-spacing: -0.015em;
}

.tmx-publico__seccion-cabecera > p {
    max-width: 500px;
    margin: 0;
    color: var(--tmx-texto-suave);
    font-size: 0.98rem;
}


/**
 * ------------------------------------------------------------
 * PANEL DE DATOS PRINCIPALES
 * ------------------------------------------------------------
 */
.tmx-publico__rapido {
    margin: 0 0 38px;
    padding: 27px;
    border: 1px solid #cfe0f0;
    border-radius: var(--tmx-radio);
    background: linear-gradient(135deg, #ffffff 0%, #f5faff 100%);
    box-shadow: var(--tmx-sombra);
}

.tmx-publico__datos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
    gap: 14px;
    margin: 0;
}

.tmx-publico__dato {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    padding: 17px 15px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.86);
}

.tmx-publico__dato--destacado {
    background: rgba(255, 255, 255, 0.86);
}

.tmx-publico__dato-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #ddecfb;
    color: var(--tmx-acento-oscuro);
    font-size: 0.84rem;
    font-weight: 900;
}

.tmx-publico__dato-etiqueta {
    display: block;
    margin-bottom: 4px;
    color: var(--tmx-texto-suave);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.tmx-publico__dato-valor {
    display: block;
    color: var(--tmx-titulo);
    font-size: 1.03rem;
    font-weight: 800;
    line-height: 1.4;
}


/**
 * ------------------------------------------------------------
 * BLOQUE DEL ORGANISMO RESPONSABLE
 * ------------------------------------------------------------
 */
.tmx-publico__oficial {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 30px;
    margin: 38px 0 50px;
    padding: 28px 30px;
    border-left: 5px solid var(--tmx-acento);
    border-radius: 0 var(--tmx-radio) var(--tmx-radio) 0;
    background: #f4f9ff;
}

.tmx-publico__oficial h2 {
    margin: 0 0 8px;
    color: var(--tmx-titulo);
    font-size: 1.34rem;
    line-height: 1.35;
}

.tmx-publico__oficial p {
    margin: 0;
    color: var(--tmx-texto-suave);
}


/**
 * ------------------------------------------------------------
 * SECCIONES GENERALES
 * ------------------------------------------------------------
 */
.tmx-publico__seccion {
    margin-top: 54px;
}

#tmx-enlaces-oficiales,
#tmx-fuentes-oficiales {
    scroll-margin-top: 34px;
}


/**
 * ------------------------------------------------------------
 * MODALIDADES / VARIANTES
 * ------------------------------------------------------------
 */
.tmx-publico__variantes {
    display: grid;
    gap: 28px;
}

.tmx-publico__variante {
    overflow: hidden;
    border: 1px solid var(--tmx-borde);
    border-radius: var(--tmx-radio);
    background: var(--tmx-fondo);
    box-shadow: 0 6px 22px rgba(15, 23, 42, 0.05);
}

.tmx-publico__variante-cabecera {
    padding: 27px 28px 20px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
}

.tmx-publico__variante-cabecera h3 {
    margin: 0 0 9px;
    color: var(--tmx-titulo);
    font-size: 1.42rem;
    line-height: 1.3;
}

.tmx-publico__variante-cabecera p {
    max-width: 900px;
    margin: 0;
    color: #4b596b;
}

.tmx-publico__datos--variante {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: 0 28px;
    padding: 18px 0;
    border-top: 1px solid var(--tmx-borde-suave);
    border-bottom: 1px solid var(--tmx-borde-suave);
}

.tmx-publico__dato-plano {
    min-width: 0;
    padding: 5px 18px;
    border-right: 1px solid var(--tmx-borde-suave);
}

.tmx-publico__dato-plano:first-child {
    padding-left: 0;
}

.tmx-publico__dato-plano:last-child {
    border-right: 0;
}

.tmx-publico__dato-plano strong {
    display: block;
    color: var(--tmx-titulo);
    font-size: 0.98rem;
    line-height: 1.45;
}


/**
 * ------------------------------------------------------------
 * REQUISITOS EN FORMATO CHECKLIST
 * ------------------------------------------------------------
 */
.tmx-publico__subbloque {
    padding: 6px 28px 25px;
}

.tmx-publico__subbloque h4 {
    margin: 17px 0 15px;
    color: var(--tmx-titulo);
    font-size: 1.14rem;
}

.tmx-publico__checklist {
    display: grid;
    gap: 11px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tmx-publico__checklist li {
    display: flex;
    gap: 13px;
    align-items: flex-start;
    padding: 13px 4px;
    border-bottom: 1px solid var(--tmx-borde-suave);
}

.tmx-publico__checklist li:last-child {
    border-bottom: 0;
}

.tmx-publico__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    margin-top: 1px;
    border-radius: 50%;
    background: #e8f7ef;
    color: var(--tmx-exito);
    font-size: 0.86rem;
    font-weight: 900;
}

.tmx-publico__checklist strong,
.tmx-publico__checklist span,
.tmx-publico__checklist em {
    display: block;
}

.tmx-publico__checklist strong {
    margin-bottom: 3px;
    color: var(--tmx-titulo);
    font-size: 1rem;
}

.tmx-publico__checklist li > div > span {
    color: #526071;
    font-size: 0.96rem;
}

.tmx-publico__checklist em {
    margin-top: 4px;
    color: var(--tmx-texto-suave);
    font-size: 0.88rem;
}


/**
 * ------------------------------------------------------------
 * CTA INTERNOS
 * ------------------------------------------------------------
 * En la parte media de la página los botones NO abandonan el
 * sitio. Su única función es llevar al usuario a la sección final
 * de enlaces oficiales mediante anclas internas.
 * ------------------------------------------------------------
 */
.tmx-publico__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 5px 28px 24px;
    padding: 18px 20px;
    border-radius: 12px;
    background: #f2f7fc;
}

.tmx-publico__cta strong,
.tmx-publico__cta span {
    display: block;
}

.tmx-publico__cta strong {
    margin-bottom: 3px;
    color: var(--tmx-titulo);
}

.tmx-publico__cta > div > span {
    color: var(--tmx-texto-suave);
    font-size: 0.94rem;
}

.tmx-publico a.tmx-publico__boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 11px 18px;
    border: 1px solid var(--tmx-acento);
    border-radius: 9px;
    color: var(--tmx-acento);
    font-weight: 800;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tmx-publico a.tmx-publico__boton:hover,
.tmx-publico a.tmx-publico__boton:focus {
    transform: translateY(-1px);
    background: #eaf4ff;
    color: var(--tmx-acento-oscuro);
}

.tmx-publico a.tmx-publico__boton--ancla {
    border-color: #a9caea;
    background: #ffffff;
}

.tmx-publico a.tmx-publico__boton--primario {
    border-color: var(--tmx-acento);
    background: var(--tmx-acento);
    color: #ffffff;
}

.tmx-publico a.tmx-publico__boton--primario:hover,
.tmx-publico a.tmx-publico__boton--primario:focus {
    border-color: var(--tmx-acento-oscuro);
    background: var(--tmx-acento-oscuro);
    color: #ffffff;
}


/**
 * ------------------------------------------------------------
 * FUENTE ESPECÍFICA DE UNA MODALIDAD
 * ------------------------------------------------------------
 */
.tmx-publico__fuente-variante {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 14px;
    align-items: center;
    padding: 0 28px 27px;
    color: var(--tmx-texto-suave);
    font-size: 0.92rem;
}

.tmx-publico__fuente-variante .tmx-publico__fuente-etiqueta {
    width: 100%;
    margin-bottom: 0;
}

.tmx-publico__fuente-variante a {
    font-weight: 700;
}


/**
 * ------------------------------------------------------------
 * PROCEDIMIENTO / TEXTO LARGO
 * ------------------------------------------------------------
 */
.tmx-publico__texto-largo {
    max-width: 940px;
    padding: 25px 28px;
    border-left: 4px solid #a9caea;
    border-radius: 0 12px 12px 0;
    background: var(--tmx-fondo-suave);
}

.tmx-publico__texto-largo > *:last-child {
    margin-bottom: 0;
}


/**
 * ------------------------------------------------------------
 * ZONA FINAL DE ENLACES EXTERNOS OFICIALES
 * ------------------------------------------------------------
 * Es el único bloque de acción donde los botones principales
 * pueden abrir páginas externas de la administración.
 * ------------------------------------------------------------
 */
.tmx-publico__salida-oficial {
    padding: 30px;
    border: 1px solid #c8dff5;
    border-radius: var(--tmx-radio);
    background: linear-gradient(180deg, #f7fbff 0%, #ffffff 100%);
    box-shadow: var(--tmx-sombra);
}

.tmx-publico__salida-aviso {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 22px;
    padding: 15px 17px;
    border-radius: 11px;
    background: #edf7f1;
    color: #315844;
}

.tmx-publico__salida-aviso > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #d8f0e1;
    color: var(--tmx-exito);
    font-weight: 900;
}

.tmx-publico__salida-aviso p {
    margin: 0;
}

.tmx-publico__enlaces-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.tmx-publico__enlace-oficial {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    padding: 22px;
    border: 1px solid var(--tmx-borde);
    border-radius: 13px;
    background: #ffffff;
}

.tmx-publico__enlace-oficial h3 {
    margin: 0 0 7px;
    color: var(--tmx-titulo);
    font-size: 1.2rem;
}

.tmx-publico__enlace-oficial p {
    margin: 0;
    color: var(--tmx-texto-suave);
    font-size: 0.95rem;
}

.tmx-publico__enlace-oficial .tmx-publico__boton {
    align-self: flex-start;
}


/**
 * ------------------------------------------------------------
 * FUENTES OFICIALES GENERALES
 * ------------------------------------------------------------
 */
.tmx-publico__fuentes {
    padding-top: 4px;
}

.tmx-publico__fuentes-lista {
    display: grid;
    gap: 10px;
}

.tmx-publico__fuente {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 4px;
    border-bottom: 1px solid var(--tmx-borde-suave);
}

.tmx-publico__fuente:last-child {
    border-bottom: 0;
}

.tmx-publico__fuente a {
    display: block;
    overflow-wrap: anywhere;
    font-weight: 700;
}

.tmx-publico__fuente-fecha {
    flex: 0 0 auto;
    color: var(--tmx-texto-suave);
    font-size: 0.87rem;
}


/**
 * ------------------------------------------------------------
 * ESPACIOS PREPARADOS PARA ADSENSE
 * ------------------------------------------------------------
 * Solo aparecen cuando más adelante conectemos un anuncio real.
 * Los márgenes amplios mantienen distancia respecto a botones,
 * enlaces internos y acciones externas.
 * ------------------------------------------------------------
 */
.tmx-publico__anuncio {
    clear: both;
    margin: 48px 0;
    padding: 18px 0;
    border-top: 1px solid var(--tmx-borde-suave);
    border-bottom: 1px solid var(--tmx-borde-suave);
    text-align: center;
}

.tmx-publico__anuncio-etiqueta {
    display: block;
    margin-bottom: 11px;
    color: #7b8794;
    font-size: 0.7rem;
    letter-spacing: 0.065em;
    text-transform: uppercase;
}

.tmx-publico__anuncio-contenido {
    min-height: 1px;
}


/**
 * ------------------------------------------------------------
 * PIE DE REVISIÓN
 * ------------------------------------------------------------
 */
.tmx-publico__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 46px;
    padding: 19px 4px;
    border-top: 1px solid var(--tmx-borde);
    color: var(--tmx-texto-suave);
    font-size: 0.92rem;
}

.tmx-publico__meta-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background: #e8f7ef;
    color: var(--tmx-exito);
    font-weight: 900;
}


/**
 * ------------------------------------------------------------
 * TABLET
 * ------------------------------------------------------------
 */
@media (max-width: 900px) {
    .tmx-publico__datos--variante {
        grid-template-columns: 1fr 1fr;
        gap: 14px 0;
    }

    .tmx-publico__dato-plano:nth-child(2n) {
        border-right: 0;
    }

    .tmx-publico__oficial {
        grid-template-columns: 1fr;
    }

    .tmx-publico__seccion-cabecera {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .tmx-publico__seccion-cabecera > p {
        max-width: 760px;
    }
}


/**
 * ------------------------------------------------------------
 * MÓVIL
 * ------------------------------------------------------------
 */
@media (max-width: 640px) {
    .tmx-publico {
        font-size: 16px;
    }

    .tmx-publico__rapido,
    .tmx-publico__oficial,
    .tmx-publico__salida-oficial {
        padding: 21px;
        border-radius: 12px;
    }

    .tmx-publico__datos,
    .tmx-publico__datos--variante {
        grid-template-columns: 1fr;
    }

    .tmx-publico__variante-cabecera,
    .tmx-publico__subbloque {
        padding-left: 20px;
        padding-right: 20px;
    }

    .tmx-publico__datos--variante {
        margin-left: 20px;
        margin-right: 20px;
    }

    .tmx-publico__dato-plano,
    .tmx-publico__dato-plano:first-child {
        padding: 7px 0 13px;
        border-right: 0;
        border-bottom: 1px solid var(--tmx-borde-suave);
    }

    .tmx-publico__dato-plano:last-child {
        border-bottom: 0;
    }

    .tmx-publico__cta {
        align-items: stretch;
        flex-direction: column;
        margin-left: 20px;
        margin-right: 20px;
    }

    .tmx-publico a.tmx-publico__boton {
        width: 100%;
    }

    .tmx-publico__fuente-variante {
        padding-left: 20px;
        padding-right: 20px;
    }

    .tmx-publico__fuente {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .tmx-publico__fuente-fecha {
        flex: auto;
    }

    .tmx-publico__enlace-oficial .tmx-publico__boton {
        align-self: stretch;
    }

    .tmx-publico__anuncio {
        margin: 38px 0;
    }
}


/* ========================================================================== */
/* VERSIÓN 2.6.0 - DOCUMENTACIÓN Y PASOS                                     */
/* ========================================================================== */
/* Estos estilos presentan la documentación y el procedimiento como contenido
 * editorial útil, manteniendo una lectura clara y separada de los CTA. */
.tmx-content-guide { margin: 2.25rem 0; }
.tmx-guide-group { margin-top: 1.25rem; padding: 1.35rem; border: 1px solid #d7e1ec; border-radius: 12px; background: #fff; }
.tmx-guide-group > h3 { margin: 0 0 1rem; font-size: 1.2rem; }
.tmx-guide-block + .tmx-guide-block { margin-top: 1.6rem; }
.tmx-guide-block h4 { margin: 0 0 .9rem; font-size: 1.05rem; }
.tmx-document-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .65rem; }
.tmx-document-list li { display: flex; gap: .75rem; padding: .8rem .9rem; background: #f8fafc; border-radius: 9px; }
.tmx-document-list p, .tmx-step-list p { margin: .25rem 0 0; color: #52606d; }
.tmx-check { flex: 0 0 1.55rem; height: 1.55rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #e7f7ee; color: #137a43; font-weight: 700; }
.tmx-optional { display: inline-block; margin-left: .55rem; padding: .12rem .42rem; border-radius: 999px; background: #eef2f7; color: #52606d; font-size: .75rem; font-weight: 600; }
.tmx-step-list { margin: 0; padding: 0; list-style: none; counter-reset: tmx-step; display: grid; gap: .8rem; }
.tmx-step-list li { counter-increment: tmx-step; display: grid; grid-template-columns: 2rem 1fr; gap: .8rem; align-items: start; }
.tmx-step-list li::before { content: counter(tmx-step); width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: #0b63ce; color: #fff; font-weight: 700; }
.tmx-step-content { padding-top: .25rem; }
@media (max-width: 640px) { .tmx-guide-group { padding: 1rem; } }

/* ========================================================================== */
/* VERSIÓN 2.7.0 - REFINAMIENTO DE DOCUMENTACIÓN Y PROCEDIMIENTO             */
/* ========================================================================== */
/* Este bloque mejora únicamente la presentación visual de las nuevas
 * secciones de documentación y pasos. No modifica datos ni comportamiento. */

/* -------------------------------------------------------------------------- */
/* CONTENEDOR GENERAL DE LA GUÍA                                              */
/* -------------------------------------------------------------------------- */
/* Damos más aire al bloque completo para separarlo visualmente de las
 * modalidades anteriores y de los enlaces oficiales posteriores. */
.tmx-content-guide {
    margin: 3rem 0 3.25rem;
}

/* -------------------------------------------------------------------------- */
/* CABECERA DE LA GUÍA                                                        */
/* -------------------------------------------------------------------------- */
/* Aumentamos ligeramente el espacio inferior del encabezado para que el
 * contenido no quede pegado al título "Documentación y cómo realizar...". */
.tmx-content-guide > .tmx-section-heading {
    margin-bottom: 1.4rem;
}

/* -------------------------------------------------------------------------- */
/* TARJETA DE CADA MODALIDAD                                                  */
/* -------------------------------------------------------------------------- */
/* Reducimos la sensación de "caja dentro de caja" usando un borde más suave,
 * una sombra muy ligera y más espacio interior. */
.tmx-guide-group {
    margin-top: 1.4rem;
    padding: 1.65rem 1.75rem;
    border: 1px solid #dce5ef;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 7px 22px rgba(15, 23, 42, .045);
}

/* -------------------------------------------------------------------------- */
/* TÍTULO DE LA MODALIDAD                                                     */
/* -------------------------------------------------------------------------- */
/* El nombre de la modalidad funciona como cabecera real del bloque y gana
 * peso visual frente a los subtítulos internos. */
.tmx-guide-group > h3 {
    margin: 0 0 1.45rem;
    padding-bottom: .9rem;
    border-bottom: 1px solid #e7edf4;
    font-size: 1.28rem;
    line-height: 1.35;
    font-weight: 650;
    color: #172033;
}

/* -------------------------------------------------------------------------- */
/* SEPARACIÓN ENTRE DOCUMENTACIÓN Y PASOS                                     */
/* -------------------------------------------------------------------------- */
/* Hacemos más evidente que son dos bloques distintos sin introducir otra
 * tarjeta exterior adicional. */
.tmx-guide-block + .tmx-guide-block {
    margin-top: 2.25rem;
    padding-top: 1.9rem;
    border-top: 1px solid #e7edf4;
}

/* -------------------------------------------------------------------------- */
/* SUBTÍTULOS INTERNOS                                                        */
/* -------------------------------------------------------------------------- */
/* "Documentación necesaria" y "Cómo realizar el trámite" se muestran con
 * mayor jerarquía y mejor separación respecto al contenido. */
.tmx-guide-block h4 {
    margin: 0 0 1.1rem;
    font-size: 1.12rem;
    line-height: 1.4;
    font-weight: 650;
    color: #172033;
}

/* -------------------------------------------------------------------------- */
/* LISTA DE DOCUMENTOS                                                        */
/* -------------------------------------------------------------------------- */
/* Simplificamos cada documento: desaparece el aspecto de tarjeta pesada y
 * usamos una franja suave con mayor altura de línea. */
.tmx-document-list {
    gap: .7rem;
}

.tmx-document-list li {
    align-items: flex-start;
    gap: .85rem;
    padding: .95rem 1rem;
    border: 1px solid #edf1f5;
    border-radius: 10px;
    background: #f8fafc;
}

/* -------------------------------------------------------------------------- */
/* MARCA DE DOCUMENTO                                                         */
/* -------------------------------------------------------------------------- */
/* Centramos el check respecto a la primera línea del nombre del documento. */
.tmx-check {
    flex: 0 0 1.6rem;
    width: 1.6rem;
    height: 1.6rem;
    margin-top: .05rem;
    font-size: .96rem;
    line-height: 1;
}

/* -------------------------------------------------------------------------- */
/* TEXTO DE DOCUMENTOS Y PASOS                                                */
/* -------------------------------------------------------------------------- */
/* Mejoramos legibilidad de las explicaciones y evitamos que queden demasiado
 * pegadas al título principal de cada elemento. */
.tmx-document-list strong,
.tmx-step-content strong {
    display: block;
    line-height: 1.45;
    color: #172033;
}

.tmx-document-list p,
.tmx-step-list p {
    margin: .35rem 0 0;
    line-height: 1.65;
    color: #536174;
}

/* -------------------------------------------------------------------------- */
/* LISTA DE PASOS                                                             */
/* -------------------------------------------------------------------------- */
/* Aumentamos la separación vertical y reservamos una columna estable para la
 * numeración, consiguiendo una línea visual continua y fácil de escanear. */
.tmx-step-list {
    gap: 1.15rem;
}

.tmx-step-list li {
    grid-template-columns: 2.15rem minmax(0, 1fr);
    gap: .95rem;
    align-items: start;
    position: relative;
}

/* -------------------------------------------------------------------------- */
/* CÍRCULO NUMERADO DE CADA PASO                                              */
/* -------------------------------------------------------------------------- */
/* Corregimos la alineación vertical para que el número coincida con la
 * primera línea del título y tenga el mismo tamaño en todos los pasos. */
.tmx-step-list li::before {
    width: 2.15rem;
    height: 2.15rem;
    margin-top: 0;
    font-size: .98rem;
    line-height: 1;
    box-shadow: 0 3px 9px rgba(11, 99, 206, .14);
}

/* -------------------------------------------------------------------------- */
/* CONTENIDO DEL PASO                                                         */
/* -------------------------------------------------------------------------- */
/* Eliminamos el desplazamiento superior anterior para alinear título y número
 * desde la misma línea de referencia. */
.tmx-step-content {
    padding-top: .08rem;
}

/* -------------------------------------------------------------------------- */
/* VERSIÓN MÓVIL                                                              */
/* -------------------------------------------------------------------------- */
/* En pantallas pequeñas reducimos márgenes y relleno, pero conservamos la
 * separación necesaria para que documentos y pasos sigan siendo cómodos. */
@media (max-width: 640px) {
    .tmx-content-guide {
        margin: 2.4rem 0 2.7rem;
    }

    .tmx-guide-group {
        padding: 1.2rem 1.05rem;
        border-radius: 12px;
    }

    .tmx-guide-group > h3 {
        font-size: 1.18rem;
        margin-bottom: 1.2rem;
    }

    .tmx-guide-block + .tmx-guide-block {
        margin-top: 1.8rem;
        padding-top: 1.55rem;
    }

    .tmx-document-list li {
        padding: .85rem .8rem;
    }

    .tmx-step-list li {
        grid-template-columns: 1.95rem minmax(0, 1fr);
        gap: .75rem;
    }

    .tmx-step-list li::before {
        width: 1.95rem;
        height: 1.95rem;
        font-size: .9rem;
    }
}


/**
 * ------------------------------------------------------------
 * REFINAMIENTO 2.9.1: TARIFAS MÚLTIPLES
 * ------------------------------------------------------------
 * Cuando una modalidad ofrece varias vigencias y precios,
 * mostramos cada combinación en su propia línea. Esto evita
 * comprimir cuatro tarifas dentro de una sola frase.
 * ------------------------------------------------------------
 */
.tmx-publico__costes-lista {
    display: grid;
    gap: 3px;
}

.tmx-publico__costes-lista strong {
    font-size: 0.9rem;
    line-height: 1.35;
}


/**
 * ------------------------------------------------------------
 * REFINAMIENTO 2.9.1: DATOS DE LAS MODALIDADES
 * ------------------------------------------------------------
 * Damos algo más de espacio a cada columna para mejorar la
 * lectura cuando vigencia o modalidad contienen textos largos.
 * ------------------------------------------------------------
 */
.tmx-publico__datos--variante {
    align-items: stretch;
}

.tmx-publico__dato-plano {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 2px;
}


/**
 * ------------------------------------------------------------
 * REFINAMIENTO 2.9.1: ENLACES OFICIALES
 * ------------------------------------------------------------
 * Igualamos la altura visual de las tarjetas finales para que el
 * bloque de salida resulte más ordenado cuando hay dos o más
 * portales oficiales.
 * ------------------------------------------------------------
 */
.tmx-publico__enlace-oficial {
    min-height: 190px;
}


/**
 * ------------------------------------------------------------
 * AJUSTE PARA PANTALLAS PEQUEÑAS
 * ------------------------------------------------------------
 * En móvil las tarifas recuperan un tamaño cómodo y las tarjetas
 * de enlaces no necesitan una altura mínima fija.
 * ------------------------------------------------------------
 */
@media (max-width: 680px) {
    .tmx-publico__costes-lista strong {
        font-size: 0.96rem;
    }

    .tmx-publico__enlace-oficial {
        min-height: 0;
    }
}

/**
 * ------------------------------------------------------------
 * MARCADOR DE PUBLICIDAD PARA LA VISTA DEL ADMINISTRADOR
 * ------------------------------------------------------------
 * Cuando un administrador revisa una ficha, el plugin no carga
 * anuncios reales de AdSense. Este bloque permite comprobar la
 * ubicación reservada sin generar impresiones ni clics propios.
 * ------------------------------------------------------------
 */
.tmx-publico__anuncio-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 110px;
    padding: 22px;
    border: 1px dashed #9db9dc;
    border-radius: 12px;
    background: #f7fbff;
    color: #4d6075;
    text-align: center;
}

.tmx-publico__anuncio-preview strong {
    color: #173b67;
    font-size: 0.95rem;
}

.tmx-publico__anuncio-preview span {
    font-size: 0.82rem;
    line-height: 1.5;
}


/* ========================================================================== */
/* VERSIÓN 2.15.1 - REFINAMIENTO DE FICHAS LARGAS                            */
/* ========================================================================== */
/* Este bloque compacta la lectura de fichas con muchas modalidades sin       */
/* ocultar información. Refuerza la separación entre variantes y coloca       */
/* documentación y pasos en dos columnas en escritorio para reducir altura.   */
/* ========================================================================== */

/**
 * ------------------------------------------------------------
 * SEPARACIÓN GENERAL ENTRE MODALIDADES
 * ------------------------------------------------------------
 * Reducimos ligeramente el espacio vertical entre tarjetas y
 * damos a cada modalidad una línea superior azul muy discreta.
 * ------------------------------------------------------------
 */
.tmx-publico__variantes {
    gap: 20px;
}

.tmx-publico__variante {
    position: relative;
    border-color: #d9e3ee;
    border-radius: 15px;
    box-shadow: 0 5px 18px rgba(15, 23, 42, 0.045);
}

.tmx-publico__variante::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, #0b63ce 0%, #68a8e8 55%, transparent 100%);
}

/**
 * ------------------------------------------------------------
 * CABECERA MÁS COMPACTA DE CADA MODALIDAD
 * ------------------------------------------------------------
 */
.tmx-publico__variante-cabecera {
    padding: 22px 24px 16px;
}

.tmx-publico__variante-cabecera h3 {
    margin-bottom: 6px;
    font-size: 1.34rem;
}

.tmx-publico__variante-cabecera p {
    line-height: 1.55;
}

.tmx-publico__variante-numero {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border-radius: 999px;
    background: #edf5ff;
    color: #0b63ce;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .04em;
}

/**
 * ------------------------------------------------------------
 * DATOS DE COSTE, VIGENCIA, MODALIDAD Y CITA
 * ------------------------------------------------------------
 */
.tmx-publico__datos--variante {
    margin: 0 24px;
    padding: 14px 0;
}

.tmx-publico__dato-plano {
    padding-top: 3px;
    padding-bottom: 3px;
}

/**
 * ------------------------------------------------------------
 * REQUISITOS MÁS ESCANEABLES
 * ------------------------------------------------------------
 */
.tmx-publico__subbloque {
    padding: 4px 24px 19px;
}

.tmx-publico__subbloque h4 {
    margin: 14px 0 10px;
}

.tmx-publico__checklist {
    gap: 0;
}

.tmx-publico__checklist li {
    gap: 11px;
    padding: 10px 3px;
}

.tmx-publico__checklist strong {
    margin-bottom: 2px;
    font-size: .97rem;
}

.tmx-publico__checklist li > div > span {
    font-size: .92rem;
    line-height: 1.5;
}

/**
 * ------------------------------------------------------------
 * CTA Y FUENTE DE CADA MODALIDAD
 * ------------------------------------------------------------
 * Reducimos el peso vertical sin acercar el CTA a publicidad.
 * ------------------------------------------------------------
 */
.tmx-publico__cta {
    margin-top: 3px;
    padding-top: 14px;
    padding-bottom: 14px;
}

.tmx-publico__fuente-variante {
    padding-top: 13px;
    padding-bottom: 13px;
}

/**
 * ------------------------------------------------------------
 * GUÍA DE DOCUMENTACIÓN Y PASOS EN DOS COLUMNAS
 * ------------------------------------------------------------
 * En escritorio, documentación y procedimiento se muestran lado
 * a lado. Esto reduce mucho la longitud de fichas con 4 o más
 * modalidades sin esconder ningún contenido al usuario.
 * ------------------------------------------------------------
 */
.tmx-content-guide {
    margin-top: 2.6rem;
}

.tmx-guide-group {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: 0 1.45rem;
    margin-top: 1.15rem;
    padding: 1.35rem 1.45rem;
    border-radius: 13px;
}

.tmx-guide-group > h3 {
    grid-column: 1 / -1;
    margin-bottom: 1.15rem;
    padding-bottom: .75rem;
    font-size: 1.18rem;
}

.tmx-guide-block {
    min-width: 0;
}

.tmx-guide-block + .tmx-guide-block {
    margin-top: 0;
    padding-top: 0;
    padding-left: 1.45rem;
    border-top: 0;
    border-left: 1px solid #e7edf4;
}

.tmx-guide-block h4 {
    margin-bottom: .8rem;
    font-size: 1.04rem;
}

.tmx-document-list {
    gap: .5rem;
}

.tmx-document-list li {
    gap: .68rem;
    padding: .72rem .78rem;
    border-radius: 9px;
}

.tmx-document-list strong,
.tmx-step-content strong {
    font-size: .94rem;
    line-height: 1.38;
}

.tmx-document-list p,
.tmx-step-list p {
    margin-top: .22rem;
    font-size: .87rem;
    line-height: 1.48;
}

.tmx-check {
    flex-basis: 1.42rem;
    width: 1.42rem;
    height: 1.42rem;
    font-size: .82rem;
}

.tmx-step-list {
    gap: .72rem;
}

.tmx-step-list li {
    grid-template-columns: 1.82rem minmax(0, 1fr);
    gap: .68rem;
}

.tmx-step-list li::before {
    width: 1.82rem;
    height: 1.82rem;
    font-size: .82rem;
    box-shadow: 0 2px 6px rgba(11, 99, 206, .12);
}

.tmx-step-content {
    padding-top: .03rem;
}

/**
 * ------------------------------------------------------------
 * TABLET Y MÓVIL
 * ------------------------------------------------------------
 * Volvemos a una sola columna cuando falta ancho para evitar que
 * los textos queden comprimidos.
 * ------------------------------------------------------------
 */
@media (max-width: 860px) {
    .tmx-guide-group {
        grid-template-columns: 1fr;
    }

    .tmx-guide-group > h3 {
        grid-column: 1;
    }

    .tmx-guide-block + .tmx-guide-block {
        margin-top: 1.35rem;
        padding-top: 1.25rem;
        padding-left: 0;
        border-top: 1px solid #e7edf4;
        border-left: 0;
    }
}

@media (max-width: 640px) {
    .tmx-publico__variantes {
        gap: 17px;
    }

    .tmx-publico__variante-cabecera {
        padding: 20px 20px 14px;
    }

    .tmx-publico__datos--variante {
        margin-left: 20px;
        margin-right: 20px;
        padding: 11px 0;
    }

    .tmx-publico__subbloque {
        padding: 3px 20px 17px;
    }

    .tmx-guide-group {
        padding: 1rem;
    }
}