/* TITOFLIX - AJUSTE DE PANTALLA ESCRITORIO */

@media (min-width: 1000px) {
    html,
    body {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    body {
        min-width: 0 !important;
    }

    .app-shell {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: none !important;
        height: 100vh !important;
        min-height: 0 !important;
        padding: 10px 20px 12px !important;
        overflow: hidden !important;

        display: grid !important;
        grid-template-rows: 118px minmax(0, 1fr) !important;
    }

    .app-header {
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: 118px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .brand {
        min-width: 0 !important;
    }

    .brand-mark {
        width: 88px !important;
        height: 88px !important;
        min-width: 88px !important;

        display: grid !important;
        place-items: center !important;
        overflow: hidden !important;
    }

    .brand-mark img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center !important;
        margin: auto !important;
    }

    .brand h1 {
        margin: 0 0 6px !important;
        font-size: 39px !important;
        line-height: 1 !important;
    }

    .brand p {
        margin: 0 !important;
        font-size: 18px !important;
        line-height: 1.15 !important;
    }

    .secure-label {
        flex: 0 0 auto !important;
        padding: 11px 18px !important;
    }

    .main-layout {
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: 100% !important;
        margin: 0 !important;
        padding-top: 10px !important;
        gap: 24px !important;
        overflow: hidden !important;
        align-items: stretch !important;

        grid-template-columns:
            minmax(0, 1.58fr)
            minmax(470px, 1fr) !important;
    }

    .services-panel,
    .consult-panel {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: 100% !important;
        padding: 22px 24px !important;
        overflow: hidden !important;
    }

    .section-heading {
        margin-bottom: 15px !important;
    }

    .section-heading .eyebrow {
        display: block !important;
        margin: 0 0 7px !important;
        font-size: 13px !important;
        line-height: 1 !important;
    }

    .section-heading h2 {
        margin: 0 0 8px !important;
        font-size: clamp(30px, 2.25vw, 39px) !important;
        line-height: 1.04 !important;
    }

    .section-heading p {
        margin: 0 !important;
        font-size: 16px !important;
        line-height: 1.25 !important;
    }

    .platform-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin: 0 !important;
    }

    .platform-card {
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 78px !important;
        height: 78px !important;
        padding: 8px 14px !important;
        border-radius: 18px !important;

        display: grid !important;
        grid-template-columns:
            58px
            minmax(0, 1fr)
            32px !important;
        align-items: center !important;
        column-gap: 14px !important;
    }

    /* Centrado del rectángulo que contiene cada logo */

    .platform-icon {
        box-sizing: border-box !important;
        width: 58px !important;
        height: 58px !important;
        min-width: 58px !important;
        min-height: 58px !important;
        padding: 5px !important;
        margin: 0 !important;

        display: grid !important;
        place-items: center !important;
        align-self: center !important;
        justify-self: center !important;

        overflow: hidden !important;
        line-height: 0 !important;
    }

    /* Centrado de la imagen dentro de su rectángulo */

    .platform-logo,
    .platform-icon img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        margin: auto !important;
        padding: 0 !important;

        object-fit: contain !important;
        object-position: center center !important;
        transform: none !important;
    }

    .platform-icon span {
        width: 100% !important;
        text-align: center !important;
        line-height: 1 !important;
    }

    .platform-info {
        min-width: 0 !important;
        align-self: center !important;
    }

    .platform-info strong {
        display: block !important;
        margin: 0 !important;
        font-size: 20px !important;
        line-height: 1.08 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .platform-info small {
        display: block !important;
        margin-top: 4px !important;
        font-size: 13px !important;
        line-height: 1.08 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .platform-check {
        box-sizing: border-box !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        margin: 0 !important;

        display: grid !important;
        place-items: center !important;
        align-self: center !important;
        justify-self: end !important;
        line-height: 1 !important;
    }

    .help-card {
        box-sizing: border-box !important;
        min-height: 54px !important;
        margin-top: 10px !important;
        padding: 9px 14px !important;
    }

    .help-card strong {
        font-size: 14px !important;
        line-height: 1.15 !important;
    }

    .help-card p {
        margin: 2px 0 0 !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
    }

    .consult-panel .section-heading {
        margin-bottom: 13px !important;
    }

    .selected-service {
        box-sizing: border-box !important;
        min-height: 62px !important;
        margin-bottom: 13px !important;
        padding: 10px 16px !important;
    }

    .selected-service span {
        font-size: 12px !important;
    }

    .selected-service strong {
        font-size: 18px !important;
        line-height: 1.08 !important;
    }

    .selected-status {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .field-group {
        margin-bottom: 11px !important;
    }

    .field-group label {
        margin-bottom: 6px !important;
        font-size: 15px !important;
        line-height: 1.1 !important;
    }

    .input-shell {
        box-sizing: border-box !important;
        min-height: 56px !important;
        height: 56px !important;
    }

    .input-shell input {
        min-width: 0 !important;
        height: 54px !important;
        font-size: 16px !important;
    }

    .submit-btn {
        box-sizing: border-box !important;
        min-height: 56px !important;
        height: 56px !important;
        margin-top: 1px !important;
        font-size: 17px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .message-box {
        box-sizing: border-box !important;
        margin-top: 10px !important;
        padding: 10px 13px !important;
        font-size: 13px !important;
        line-height: 1.25 !important;
    }

    .privacy-note {
        margin-top: 9px !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
    }

    .result-panel {
        max-height: 285px !important;
        overflow-y: auto !important;
    }
}

/* Ajuste adicional para pantallas con poca altura */

@media (min-width: 1000px) and (max-height: 760px) {
    .app-shell {
        grid-template-rows: 102px minmax(0, 1fr) !important;
        padding-top: 8px !important;
    }

    .app-header {
        height: 102px !important;
    }

    .brand-mark {
        width: 76px !important;
        height: 76px !important;
        min-width: 76px !important;
    }

    .brand h1 {
        font-size: 34px !important;
    }

    .brand p {
        font-size: 16px !important;
    }

    .services-panel,
    .consult-panel {
        padding: 18px 22px !important;
    }

    .section-heading h2 {
        font-size: 31px !important;
    }

    .platform-card {
        height: 70px !important;
        min-height: 70px !important;

        grid-template-columns:
            52px
            minmax(0, 1fr)
            30px !important;
    }

    .platform-icon {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
    }

    .help-card {
        min-height: 48px !important;
    }

    .selected-service {
        min-height: 56px !important;
    }

    .input-shell {
        height: 50px !important;
        min-height: 50px !important;
    }

    .input-shell input {
        height: 48px !important;
    }

    .submit-btn {
        height: 50px !important;
        min-height: 50px !important;
    }
}

/* Evita desbordamiento horizontal */

.app-shell,
.main-layout,
.services-panel,
.consult-panel,
.platform-grid,
.platform-card,
.selected-service,
.input-shell {
    max-width: 100% !important;
    min-width: 0 !important;
}
/* =========================================================
   SCROLL DESPUÉS DE REALIZAR UNA CONSULTA
   ========================================================= */

@media (min-width: 1000px) {

    /*
     * Estado inicial:
     * la página permanece completamente dentro de la pantalla.
     *
     * Estado después de consultar:
     * se activa el scroll vertical solamente cuando sea necesario.
     */

    html.consulta-realizada,
    body.consulta-realizada {
        width: 100% !important;
        height: auto !important;
        min-height: 100% !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body.consulta-realizada .app-shell {
        width: 100% !important;
        height: auto !important;
        min-height: 100vh !important;

        padding-bottom: 28px !important;
        overflow: visible !important;

        grid-template-rows:
            118px
            auto !important;
    }

    body.consulta-realizada .main-layout {
        width: 100% !important;
        height: auto !important;

        min-height: calc(100vh - 140px) !important;

        overflow: visible !important;

        /*
         * Ambos paneles mantienen la misma altura visual.
         */
        align-items: stretch !important;
    }

    body.consulta-realizada .services-panel,
    body.consulta-realizada .consult-panel {
        width: 100% !important;
        height: auto !important;
        min-height: 100% !important;

        overflow: visible !important;
    }

    body.consulta-realizada .consult-panel {
        padding-bottom: 24px !important;
    }

    /*
     * Permite mostrar completo el resultado del código.
     */
    body.consulta-realizada .result-panel {
        max-height: none !important;
        overflow: visible !important;
    }

    /*
     * Mantiene una separación armoniosa entre mensajes,
     * resultados y la nota de privacidad.
     */
    body.consulta-realizada .message-box.show {
        margin-top: 12px !important;
        margin-bottom: 4px !important;
    }

    body.consulta-realizada .result-panel.show {
        margin-top: 14px !important;
        margin-bottom: 12px !important;
    }

    body.consulta-realizada .privacy-note {
        margin-top: 12px !important;
        padding-bottom: 4px !important;
    }
}

/*
 * Pantallas de escritorio con poca altura.
 */

@media (min-width: 1000px) and (max-height: 760px) {

    body.consulta-realizada .app-shell {
        grid-template-rows:
            102px
            auto !important;
    }

    body.consulta-realizada .main-layout {
        min-height: calc(100vh - 118px) !important;
    }
}

/*
 * Scroll suave al desplazarse hacia el resultado.
 */

html {
    scroll-behavior: smooth;
}