/* =====================================================

   CTI SOLUCIONES

   VALIDACIÓN PÚBLICA DE PERMISOS

===================================================== */

.permiso-validacion {

    position: relative;

    padding:

        70px

        24px

        85px;

    overflow: hidden;

    background:

        radial-gradient(

            circle at 50% 0%,

            rgba(17, 85, 204, 0.075),

            transparent 37%

        ),

        linear-gradient(

            180deg,

            #ffffff 0%,

            #f5f8fc 100%

        );

}

.permiso-validacion::before {

    content: "";

    position: absolute;

    width: 520px;

    height: 520px;

    top: -310px;

    right: -190px;

    border-radius: 50%;

    border:

        1px solid

        rgba(17, 85, 204, 0.07);

    box-shadow:

        0 0 0 50px rgba(17, 85, 204, 0.02),

        0 0 0 100px rgba(17, 85, 204, 0.012);

    pointer-events: none;

}

.permiso-validacion-contenedor {

    position: relative;

    z-index: 2;

    max-width: 1050px;

    margin: 0 auto;

}

/* =====================================================

   ENCABEZADO

===================================================== */

.permiso-validacion-encabezado {

    max-width: 730px;

    margin:

        0

        auto

        38px;

    text-align: center;

}

.permiso-validacion-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 15px;

    padding:

        7px

        15px;

    border-radius: 50px;

    color: #1155cc;

    background:

        rgba(17, 85, 204, 0.075);

    border:

        1px solid

        rgba(17, 85, 204, 0.16);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.6px;

}

.permiso-validacion-encabezado h1 {

    margin:

        0

        0

        12px;

    color: #07152b;

    font-family:

        'Sora',

        sans-serif;

    font-size:

        clamp(

            29px,

            4vw,

            42px

        );

    font-weight: 700;

    letter-spacing: -1px;

}

.permiso-validacion-encabezado p {

    margin: 0;

    color: #687891;

    font-size: 15px;

    line-height: 1.7;

}

/* =====================================================

   TARJETA

===================================================== */

.permiso-validacion-tarjeta {

    overflow: hidden;

    border-radius: 24px;

    background: #ffffff;

    border:

        1px solid

        rgba(13, 27, 46, 0.085);

    box-shadow:

        0 25px 70px

        rgba(6, 15, 32, 0.09);

}

/* =====================================================

   ESTADO

===================================================== */

.permiso-validacion-estado {

    display: flex;

    align-items: center;

    gap: 17px;

    padding:

        22px

        27px;

    border-bottom:

        1px solid

        rgba(13, 27, 46, 0.04);

}

.permiso-validacion-estado-icono {

    width: 50px;

    height: 50px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

}

.permiso-validacion-estado-icono svg {

    width: 23px;

    height: 23px;

}

.permiso-validacion-estado-texto {

    flex: 1;

}

.permiso-validacion-estado-texto > span {

    display: block;

    margin-bottom: 3px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.4px;

}

.permiso-validacion-estado-texto h2 {

    margin: 0;

    font-family:

        'Sora',

        sans-serif;

    font-size: 20px;

    font-weight: 700;

}

.permiso-validacion-estado-texto p {

    max-width: 610px;

    margin:

        4px

        0

        0;

    font-size: 13px;

    line-height: 1.5;

}

.permiso-validacion-autentica {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding:

        7px

        11px;

    border-radius: 50px;

    color: #176346;

    background:

        rgba(16, 185, 129, 0.08);

    border:

        1px solid

        rgba(16, 185, 129, 0.16);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .8px;

}

.permiso-validacion-autentica span {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #10b981;

    box-shadow:

        0 0 0 4px

        rgba(16, 185, 129, 0.11);

}

/* =====================================================

   VIGENTE

===================================================== */

.permiso-validacion--vigente

.permiso-validacion-estado {

    background:

        linear-gradient(

            90deg,

            rgba(16, 185, 129, 0.09),

            rgba(16, 185, 129, 0.02)

        );

}

.permiso-validacion--vigente

.permiso-validacion-estado-icono {

    color: #08795b;

    background: #dff8ef;

    border:

        1px solid

        rgba(16, 185, 129, 0.20);

}

.permiso-validacion--vigente

.permiso-validacion-estado-texto > span,

.permiso-validacion--vigente

.permiso-validacion-estado-texto h2 {

    color: #087557;

}

.permiso-validacion--vigente

.permiso-validacion-estado-texto p {

    color: #638177;

}

/* =====================================================

   SUSTITUIDA

===================================================== */

.permiso-validacion--sustituida

.permiso-validacion-estado {

    background:

        linear-gradient(

            90deg,

            rgba(112, 91, 166, 0.09),

            rgba(112, 91, 166, 0.02)

        );

}

.permiso-validacion--sustituida

.permiso-validacion-estado-icono {

    color: #68559a;

    background: #f0ebfb;

    border:

        1px solid

        rgba(112, 91, 166, 0.16);

}

.permiso-validacion--sustituida

.permiso-validacion-estado-texto > span,

.permiso-validacion--sustituida

.permiso-validacion-estado-texto h2 {

    color: #5e4d8b;

}

.permiso-validacion--sustituida

.permiso-validacion-estado-texto p {

    color: #756d89;

}

/* =====================================================

   VENCIDA

===================================================== */

.permiso-validacion--vencida

.permiso-validacion-estado {

    background:

        linear-gradient(

            90deg,

            rgba(222, 151, 49, 0.10),

            rgba(222, 151, 49, 0.02)

        );

}

.permiso-validacion--vencida

.permiso-validacion-estado-icono {

    color: #9d6722;

    background: #fff3de;

    border:

        1px solid

        rgba(222, 151, 49, 0.20);

}

.permiso-validacion--vencida

.permiso-validacion-estado-texto > span,

.permiso-validacion--vencida

.permiso-validacion-estado-texto h2 {

    color: #8f5b1c;

}

.permiso-validacion--vencida

.permiso-validacion-estado-texto p {

    color: #806f57;

}

/* =====================================================

   PENDIENTE

===================================================== */

.permiso-validacion--pendiente

.permiso-validacion-estado,

.permiso-validacion--neutral

.permiso-validacion-estado {

    background:

        linear-gradient(

            90deg,

            rgba(17, 85, 204, 0.09),

            rgba(26, 127, 212, 0.02)

        );

}

.permiso-validacion--pendiente

.permiso-validacion-estado-icono,

.permiso-validacion--neutral

.permiso-validacion-estado-icono {

    color: #1155cc;

    background: #eaf3ff;

    border:

        1px solid

        rgba(17, 85, 204, 0.17);

}

.permiso-validacion--pendiente

.permiso-validacion-estado-texto > span,

.permiso-validacion--pendiente

.permiso-validacion-estado-texto h2,

.permiso-validacion--neutral

.permiso-validacion-estado-texto > span,

.permiso-validacion--neutral

.permiso-validacion-estado-texto h2 {

    color: #145fb4;

}

.permiso-validacion--pendiente

.permiso-validacion-estado-texto p,

.permiso-validacion--neutral

.permiso-validacion-estado-texto p {

    color: #657992;

}

/* =====================================================

   CANCELADA / ERROR

===================================================== */

.permiso-validacion--revocada

.permiso-validacion-estado,

.permiso-validacion--error

.permiso-validacion-estado {

    background:

        linear-gradient(

            90deg,

            rgba(220, 38, 38, 0.085),

            rgba(220, 38, 38, 0.02)

        );

}

.permiso-validacion--revocada

.permiso-validacion-estado-icono,

.permiso-validacion--error

.permiso-validacion-estado-icono {

    color: #bd2929;

    background: #feecec;

    border:

        1px solid

        rgba(220, 38, 38, 0.18);

}

.permiso-validacion--revocada

.permiso-validacion-estado-texto > span,

.permiso-validacion--revocada

.permiso-validacion-estado-texto h2,

.permiso-validacion--error

.permiso-validacion-estado-texto > span,

.permiso-validacion--error

.permiso-validacion-estado-texto h2 {

    color: #a92525;

}

.permiso-validacion--revocada

.permiso-validacion-estado-texto p,

.permiso-validacion--error

.permiso-validacion-estado-texto p {

    color: #866868;

}

/* =====================================================

   CUERPO

===================================================== */

.permiso-validacion-cuerpo {

    display: grid;

    grid-template-columns:

        minmax(280px, .75fr)

        minmax(0, 1.25fr);

}

/* =====================================================

   IDENTIDAD

===================================================== */

.permiso-validacion-identidad {

    padding:

        40px

        33px;

    background:

        radial-gradient(

            circle at 50% 30%,

            rgba(17, 85, 204, 0.075),

            transparent 55%

        ),

        #f7faff;

    border-right:

        1px solid

        rgba(13, 27, 46, 0.065);

}

.permiso-validacion-etiqueta {

    display: block;

    margin-bottom: 10px;

    color: #1a7fd4;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.6px;

}

.permiso-validacion-identidad h3 {

    margin:

        0

        0

        11px;

    color: #08172d;

    font-family:

        'Sora',

        sans-serif;

    font-size:

        clamp(

            22px,

            3vw,

            30px

        );

    line-height: 1.2;

    font-weight: 700;

}

.permiso-validacion-identidad p {

    margin: 0;

    color: #687a91;

    font-size: 13px;

    line-height: 1.6;

}

.permiso-validacion-folio {

    margin-top: 28px;

    padding:

        15px

        16px;

    border-radius: 13px;

    background: #ffffff;

    border:

        1px solid

        rgba(17, 85, 204, 0.11);

}

.permiso-validacion-folio span {

    display: block;

    margin-bottom: 5px;

    color: #8999aa;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.2px;

}

.permiso-validacion-folio strong {

    display: block;

    color: #0c4b91;

    font-family:

        'Sora',

        sans-serif;

    font-size: 16px;

    word-break: break-word;

}

/* =====================================================

   DATOS

===================================================== */

.permiso-validacion-datos {

    padding:

        38px

        40px;

}

.permiso-validacion-grid {

    display: grid;

    grid-template-columns:

        repeat(2, minmax(0, 1fr));

    gap: 12px;

    margin-bottom: 20px;

}

.permiso-validacion-dato {

    min-height: 72px;

    padding:

        14px

        15px;

    border-radius: 12px;

    background: #f8fafc;

    border:

        1px solid

        rgba(13, 27, 46, 0.06);

}

.permiso-validacion-dato span {

    display: block;

    margin-bottom: 5px;

    color: #8190a5;

    font-size: 11px;

}

.permiso-validacion-dato strong {

    display: block;

    color: #12233d;

    font-size: 14px;

    font-weight: 700;

}

/* =====================================================

   TOTAL

===================================================== */

.permiso-validacion-total {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 18px;

    padding:

        18px

        20px;

    border-radius: 14px;

    background:

        linear-gradient(

            135deg,

            #071a37,

            #092b59

        );

    border:

        1px solid

        rgba(77, 179, 255, 0.15);

}

.permiso-validacion-total span {

    display: block;

    margin-bottom: 4px;

    color: #4db3ff;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.2px;

}

.permiso-validacion-total p {

    margin: 0;

    color:

        rgba(255, 255, 255, 0.55);

    font-size: 11px;

}

.permiso-validacion-total > strong {

    flex-shrink: 0;

    color: #ffffff;

    font-family:

        'Sora',

        sans-serif;

    font-size: 23px;

}

.permiso-validacion-total small {

    color: #73c5ff;

    font-size: 10px;

}

/* =====================================================

   CONFIRMACIÓN

===================================================== */

.permiso-validacion-confirmacion {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    padding:

        15px

        17px;

    border-radius: 12px;

    background:

        rgba(17, 85, 204, 0.045);

    border:

        1px solid

        rgba(17, 85, 204, 0.085);

}

.permiso-validacion-confirmacion-icono {

    width: 34px;

    height: 34px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #1468bd;

}

.permiso-validacion-confirmacion-icono svg {

    width: 24px;

    height: 24px;

}

.permiso-validacion-confirmacion strong {

    display: block;

    margin-bottom: 3px;

    color: #173754;

    font-size: 13px;

}

.permiso-validacion-confirmacion p {

    margin: 0;

    color: #6c7f92;

    font-size: 12px;

    line-height: 1.55;

}

/* =====================================================

   CANCELACIÓN

===================================================== */

.permiso-validacion-revocacion {

    padding:

        16px

        27px;

    color: #924047;

    background:

        rgba(204, 64, 73, 0.045);

    border-top:

        1px solid

        rgba(204, 64, 73, 0.08);

    font-size: 12px;

    line-height: 1.6;

}

.permiso-validacion-revocacion strong {

    display: block;

    margin-bottom: 3px;

    color: #a63139;

    font-size: 13px;

}

.permiso-validacion-revocacion span {

    display: block;

}

.permiso-validacion-revocacion p {

    margin:

        5px

        0

        0;

}

/* =====================================================

   ACCIONES

===================================================== */

.permiso-validacion-acciones {

    display: flex;

    justify-content: flex-end;

    gap: 10px;

    padding:

        17px

        25px;

    background: #fbfcfe;

    border-top:

        1px solid

        rgba(13, 27, 46, 0.055);

}

.permiso-validacion-boton {

    min-height: 44px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding:

        0

        17px;

    border-radius: 10px;

    font-family:

        'Inter',

        sans-serif;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .35px;

    cursor: pointer;

}

.permiso-validacion-boton svg {

    width: 16px;

    height: 16px;

}

.permiso-validacion-boton--principal {

    border: 0;

    color: #ffffff;

    background:

        linear-gradient(

            135deg,

            #105bb8,

            #148fe0

        ) !important;

    box-shadow:

        0 8px 20px

        rgba(17, 101, 196, 0.15);

}

.permiso-validacion-boton--secundario {

    color: #536d85;

    background: #ffffff;

    border:

        1px solid

        rgba(14, 47, 83, 0.12);

}

/* =====================================================

   BUSCADOR

===================================================== */

.permiso-validacion-buscador {

    padding:

        48px

        30px

        25px;

}

.permiso-validacion-buscador-encabezado {

    max-width: 560px;

    margin:

        0

        auto

        23px;

    text-align: center;

}

.permiso-validacion-buscador-encabezado > span {

    display: block;

    margin-bottom: 7px;

    color: #1a7fd4;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.7px;

}

.permiso-validacion-buscador-encabezado h3 {

    margin:

        0

        0

        8px;

    color: #07152b;

    font-family:

        'Sora',

        sans-serif;

    font-size: 22px;

}

.permiso-validacion-buscador-encabezado p {

    margin: 0;

    color: #75839a;

    font-size: 13px;

    line-height: 1.6;

}

.permiso-validacion-formulario {

    max-width: 560px;

    margin: 0 auto;

}

.permiso-validacion-campo {

    display: flex;

    align-items: center;

    gap: 12px;

    min-height: 58px;

    margin-bottom: 11px;

    padding:

        0

        17px;

    border-radius: 13px;

    background: #f7faff;

    border:

        1px solid

        rgba(17, 85, 204, 0.14);

}

.permiso-validacion-campo:focus-within {

    background: #ffffff;

    border-color:

        rgba(17, 85, 204, 0.38);

    box-shadow:

        0 0 0 3px

        rgba(17, 85, 204, 0.055);

}

.permiso-validacion-campo svg {

    width: 20px;

    height: 20px;

    flex-shrink: 0;

    color: #347ec1;

}

.permiso-validacion-campo input {

    width: 100%;

    border: 0;

    outline: none;

    background: transparent;

    color: #142a43;

    font-family:

        'Inter',

        sans-serif;

    font-size: 14px;

    font-weight: 600;

    text-transform: uppercase;

}

.permiso-validacion-formulario

.permiso-validacion-boton {

    width: 100%;

}

.permiso-validacion-error-folio {

    margin-top: 12px;

    padding:

        11px

        13px;

    border-radius: 9px;

    color: #a23239;

    background:

        rgba(220, 38, 38, 0.055);

    border:

        1px solid

        rgba(220, 38, 38, 0.10);

    font-size: 12px;

    text-align: center;

}

/* =====================================================

   SEPARADOR

===================================================== */

.permiso-validacion-separador {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    max-width: 600px;

    margin:

        23px

        auto;

}

.permiso-validacion-separador::before {

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    height: 1px;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(17, 85, 204, 0.16),

            transparent

        );

}

.permiso-validacion-separador span {

    position: relative;

    z-index: 2;

    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #8796aa;

    background: #ffffff;

    border:

        1px solid

        rgba(17, 85, 204, 0.10);

    font-size: 10px;

    font-weight: 700;

}

/* =====================================================

   QR AYUDA

===================================================== */

.permiso-validacion-qr-ayuda {

    max-width: 570px;

    margin:

        0

        auto;

    padding:

        8px

        25px

        38px;

    text-align: center;

}

.permiso-validacion-qr-ayuda > div {

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin:

        0

        auto

        14px;

    border-radius: 16px;

    color: #1268bd;

    background:

        rgba(17, 85, 204, 0.065);

    border:

        1px solid

        rgba(17, 85, 204, 0.11);

}

.permiso-validacion-qr-ayuda svg {

    width: 28px;

    height: 28px;

}

.permiso-validacion-qr-ayuda strong {

    display: block;

    margin-bottom: 7px;

    color: #172d45;

    font-size: 15px;

}

.permiso-validacion-qr-ayuda p {

    margin: 0;

    color: #75859a;

    font-size: 12px;

    line-height: 1.65;

}

/* =====================================================

   MENSAJES ERROR

===================================================== */

.permiso-validacion-mensaje {

    min-height: 270px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding:

        45px

        25px;

    text-align: center;

}

.permiso-validacion-mensaje strong {

    display: block;

    margin-bottom: 8px;

    color: #17243a;

    font-family:

        'Sora',

        sans-serif;

    font-size: 19px;

}

.permiso-validacion-mensaje p {

    max-width: 530px;

    margin:

        0

        0

        20px;

    color: #75839a;

    font-size: 13px;

    line-height: 1.65;

}

/* =====================================================

   PIE

===================================================== */

.permiso-validacion-pie {

    max-width: 720px;

    display: flex;

    align-items: flex-start;

    justify-content: center;

    gap: 9px;

    margin:

        24px

        auto

        0;

    color: #8390a2;

    text-align: center;

}

.permiso-validacion-pie svg {

    width: 17px;

    height: 17px;

    flex-shrink: 0;

    margin-top: 2px;

}

.permiso-validacion-pie p {

    margin: 0;

    font-size: 12px;

    line-height: 1.6;

}

/* =====================================================

   RESPONSIVE

===================================================== */

@media (max-width: 800px) {

    .permiso-validacion-cuerpo {

        grid-template-columns: 1fr;

    }

    .permiso-validacion-identidad {

        border-right: 0;

        border-bottom:

            1px solid

            rgba(13, 27, 46, 0.065);

    }

}

@media (max-width: 650px) {

    .permiso-validacion {

        padding:

            45px

            14px

            60px;

    }

    .permiso-validacion-encabezado {

        margin-bottom: 27px;

    }

    .permiso-validacion-encabezado h1 {

        font-size: 27px;

    }

    .permiso-validacion-encabezado p {

        font-size: 13px;

    }

    .permiso-validacion-tarjeta {

        border-radius: 19px;

    }

    .permiso-validacion-estado {

        align-items: flex-start;

        padding: 18px;

        gap: 13px;

    }

    .permiso-validacion-estado-icono {

        width: 43px;

        height: 43px;

    }

    .permiso-validacion-estado-texto h2 {

        font-size: 17px;

    }

    .permiso-validacion-estado-texto p {

        font-size: 12px;

    }

    .permiso-validacion-autentica {

        display: none;

    }

    .permiso-validacion-identidad {

        padding:

            29px

            21px;

    }

    .permiso-validacion-identidad h3 {

        font-size: 23px;

    }

    .permiso-validacion-datos {

        padding:

            27px

            20px;

    }

    .permiso-validacion-grid {

        grid-template-columns: 1fr;

        gap: 9px;

    }

    .permiso-validacion-total {

        align-items: flex-start;

        flex-direction: column;

    }

    .permiso-validacion-total > strong {

        font-size: 22px;

    }

    .permiso-validacion-acciones {

        flex-direction: column;

        padding: 15px;

    }

    .permiso-validacion-acciones

    .permiso-validacion-boton {

        width: 100%;

    }

    .permiso-validacion-buscador {

        padding:

            36px

            19px

            20px;

    }

    .permiso-validacion-qr-ayuda {

        padding:

            5px

            19px

            32px;

    }

}

/* =====================================================
   DATOS DE PERMISO: CAMPOS DE ANCHO COMPLETO
===================================================== */

.permiso-validacion-dato--ancho {
    grid-column: 1 / -1;
}

.permiso-validacion-dato--ancho strong {
    line-height: 1.5;
}

@media (max-width: 640px) {
    .permiso-validacion-dato--ancho {
        grid-column: auto;
    }
}

/* =====================================================
   AUTORIZACIÓN CTI
===================================================== */

.permiso-validacion-autorizacion {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    margin-top: 20px;
    padding: 15px 16px;

    border-radius: 13px;

    background: rgba(17, 85, 204, 0.045);

    border: 1px solid rgba(17, 85, 204, 0.10);
}

.permiso-validacion-autorizacion-icono {
    width: 36px;
    height: 36px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    color: #1468bd;

    background: rgba(17, 85, 204, 0.08);
}

.permiso-validacion-autorizacion-icono svg {
    width: 20px;
    height: 20px;
}

.permiso-validacion-autorizacion strong {
    display: block;

    margin-bottom: 5px;

    color: #173754;

    font-size: 12px;
    font-weight: 700;
}

.permiso-validacion-autorizacion p {
    margin: 0;

    color: #6c7f92;

    font-size: 11px;
    line-height: 1.55;
}


/* RESPONSIVE */

@media (max-width: 650px) {

    .permiso-validacion-autorizacion {
        margin-top: 17px;
        padding: 14px;
    }

    .permiso-validacion-autorizacion-icono {
        width: 34px;
        height: 34px;
    }

    .permiso-validacion-autorizacion p {
        font-size: 10.5px;
    }

}