.cpd-inicio{

    width:100%;
    height:100%;

    background:#050B16 !important;

}
/*==================================================
COLOR DE TEXTOS
==================================================*/

.cpd-inicio{
    color:#D7DFEF;
}

.cpd-panel-izquierdo h1{
    color:#FFFFFF;
}

.cpd-panel-izquierdo h1 span{
    color:#2EA8FF;
}

.cpd-intro{
    color:#D7DFEF;
}

.cpd-texto{
    color:#D7DFEF;
}

.cpd-zona-indicador h2{
    color:#FFFFFF;
}

.cpd-zona-indicador p{
    color:#D7DFEF;
}
/*==================================================
ESTRUCTURA DE DOS COLUMNAS
==================================================*/

.cpd-inicio{

    position:relative;

}

.cpd-contenido-inicio{

    width:100%;
    height:100%;

    display:grid;

    grid-template-columns:65% 35%;

    box-sizing:border-box;

    padding:15px 20px;

}


/*==================================================
COLUMNA IZQUIERDA
==================================================*/

.cpd-panel-izquierdo{

    width:100%;

}


/*==================================================
COLUMNA DERECHA
==================================================*/

.cpd-panel-derecho{

    width:100%;
    height:100%;

    display:flex;

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

}
/*==================================================
INDICADOR DE GUÍA - LED
==================================================*/

.cpd-led-grande{

    width:55px;
    height:55px;

    margin:0 auto 15px;

    border-radius:50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #d8ffe4 0%,
            #74ff9a 20%,
            #22d967 48%,
            #087a3a 75%,
            #03331c 100%
        );

    box-shadow:
        0 0 8px rgba(88,255,138,.9),
        0 0 20px rgba(88,255,138,.6),
        0 0 35px rgba(88,255,138,.3);

    animation:cpdPulsoGuia 1.6s ease-in-out infinite;

}


/*==================================================
ANIMACIÓN LED
==================================================*/

@keyframes cpdPulsoGuia{

    0%,
    100%{

        transform:scale(1);

        opacity:.85;

    }

    50%{

        transform:scale(1.12);

        opacity:1;

    }

}
/*==================================================
PANEL DERECHO
TARJETA INDICADOR DE GUÍA
==================================================*/

.cpd-zona-indicador{

    width:82%;

    max-width:250px;

    padding:22px 18px;

    box-sizing:border-box;

    text-align:center;

    background:
        linear-gradient(
            145deg,
            rgba(12,32,58,.95),
            rgba(4,13,27,.95)
        );

    border:1px solid rgba(46,168,255,.35);

    border-radius:14px;

    box-shadow:
        inset 0 0 20px rgba(46,168,255,.05),
        0 0 15px rgba(0,0,0,.30);

}


/*==================================================
TÍTULO DEL INDICADOR
==================================================*/

.cpd-zona-indicador h2{

    margin:0 0 10px;

    color:#FFFFFF;

    font-size:20px;

    line-height:1.1;

    font-weight:700;

}


/*==================================================
TEXTO DEL INDICADOR
==================================================*/

.cpd-zona-indicador p{

    margin:0;

    color:#BFCDE0;

    font-size:13px;

    line-height:1.45;

}


/*==================================================
RESPLANDOR SUPERIOR
==================================================*/

.cpd-zona-indicador{

    position:relative;

}


.cpd-zona-indicador::before{

    content:"";

    position:absolute;

    top:-1px;
    left:20%;

    width:60%;
    height:1px;

    background:#2EA8FF;

    box-shadow:
        0 0 8px rgba(46,168,255,.9),
        0 0 15px rgba(46,168,255,.5);

}
/*==================================================
PRIMERA LÍNEA DEL TUTORIAL
==================================================*/

#linea1{

    width:100%;

    display:flex;

    align-items:center;

    gap:12px;

    margin-top:12px;

    padding:7px 10px;

    box-sizing:border-box;

    background:rgba(46,168,255,.04);

    border-left:2px solid #2EA8FF;

    border-radius:0 6px 6px 0;

}


/*==================================================
ICONO PRIMERA LÍNEA
==================================================*/

#linea1 .cpd-icono{

    width:26px;
    min-width:26px;
    height:26px;

    display:flex;

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

}


/*==================================================
TAMAÑO DEL ICONO SVG
==================================================*/

#linea1 .cpd-icono img{

    width:22px !important;
    height:22px !important;

    display:block;

    opacity:.90;

}


/*==================================================
TEXTO PRIMERA LÍNEA
==================================================*/

#linea1 .cpd-texto{

    color:#D7DFEF;

    font-size:14px;

    line-height:1.3;

}
/*==================================================
LÍNEAS 2 A 5 DEL TUTORIAL
==================================================*/

#linea2,
#linea3,
#linea4,
#linea5{

    width:100%;

    display:flex;

    align-items:center;

    gap:12px;

    padding:5px 10px;

    box-sizing:border-box;

    border-left:2px solid rgba(46,168,255,.35);

}


/*==================================================
ESPACIO PARA ICONOS
==================================================*/

#linea2 .cpd-icono,
#linea3 .cpd-icono,
#linea4 .cpd-icono,
#linea5 .cpd-icono{

    width:26px;
    min-width:26px;
    height:22px;

    display:flex;

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

}


/*==================================================
TEXTO
==================================================*/

#linea2 .cpd-texto,
#linea3 .cpd-texto,
#linea4 .cpd-texto,
#linea5 .cpd-texto{

    color:#D7DFEF;

    font-size:14px;

    line-height:1.25;

}
/*==================================================
AJUSTE VERTICAL DEL TUTORIAL
==================================================*/

.cpd-tutorial{

    margin-top:6px;

}

#linea2,
#linea3,
#linea4,
#linea5{

    padding-top:4px;
    padding-bottom:4px;

}

#linea5 .cpd-texto{

    line-height:1.15;

}
/*==================================================
INTELSYSNET GLOBAL SUPPORT
CPD INICIO
CONTROL RESPONSIVE DEL MONITOR
==================================================*/


/*==================================================
CONTENEDOR PRINCIPAL
MISMO PRINCIPIO DE CONFINAMIENTO QUE PHISHING
==================================================*/

.cpd-inicio{

    width:100%;
    height:100%;

    max-width:100%;
    max-height:100%;

    box-sizing:border-box;

    overflow:hidden;

    display:flex;
    flex-direction:column;

}


/*==================================================
CONTENIDO INTERIOR
==================================================*/

.cpd-contenido-inicio{

    flex:1;

    width:100%;
    height:100%;

    min-width:0;
    min-height:0;

    overflow:hidden;

    box-sizing:border-box;

}


/*==================================================
COLUMNAS
==================================================*/

.cpd-panel-izquierdo,
.cpd-panel-derecho{

    min-width:0;
    min-height:0;

    overflow:hidden;

}


/*==================================================
PANEL IZQUIERDO
==================================================*/

.cpd-panel-izquierdo{

    display:flex;

    flex-direction:column;

}


/*==================================================
TÍTULO RESPONSIVO SEGÚN ALTURA
==================================================*/

.cpd-panel-izquierdo h1{

    margin:0;

    font-size:clamp(24px, 4.5vh, 32px);

    line-height:1.05;

    flex-shrink:0;

}


/*==================================================
INTRODUCCIÓN RESPONSIVA
==================================================*/

.cpd-intro{

    margin:

        clamp(3px, .8vh, 7px)

        0

        0;

    font-size:clamp(12px, 2.1vh, 16px);

    line-height:1.18;

    flex-shrink:0;

}


/*==================================================
TUTORIAL
==================================================*/

.cpd-tutorial{

    flex:1;

    min-height:0;

    margin-top:clamp(4px, 1vh, 8px);

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    overflow:hidden;

}


/*==================================================
TODAS LAS LÍNEAS
==================================================*/

#linea1,
#linea2,
#linea3,
#linea4,
#linea5{

    flex-shrink:1;

    min-height:0;

}


/*==================================================
LÍNEA 1
==================================================*/

#linea1{

    margin-top:0;

    padding:

        clamp(3px, .7vh, 7px)

        10px;

}


/*==================================================
LÍNEAS 2 A 5
==================================================*/

#linea2,
#linea3,
#linea4,
#linea5{

    padding:

        clamp(2px, .55vh, 4px)

        10px;

}


/*==================================================
TEXTOS DEL TUTORIAL
==================================================*/

#linea1 .cpd-texto,
#linea2 .cpd-texto,
#linea3 .cpd-texto,
#linea4 .cpd-texto,
#linea5 .cpd-texto{

    font-size:clamp(11px, 1.9vh, 14px);

    line-height:1.15;

}


/*==================================================
ICONOS
==================================================*/

.cpd-icono{

    flex-shrink:0;

}


/*==================================================
PANEL DERECHO
==================================================*/

.cpd-panel-derecho{

    display:flex;

    align-items:center;

    justify-content:center;

}


/*==================================================
TARJETA INDICADOR
==================================================*/

.cpd-zona-indicador{

    max-height:92%;

    overflow:hidden;

    padding:

        clamp(12px, 2.5vh, 22px)

        18px;

}


/*==================================================
LED RESPONSIVO
==================================================*/

.cpd-led-grande{

    width:clamp(40px, 7vh, 55px);

    height:clamp(40px, 7vh, 55px);

    margin:

        0 auto

        clamp(8px, 1.8vh, 15px);

}


/*==================================================
TÍTULO INDICADOR
==================================================*/

.cpd-zona-indicador h2{

    font-size:clamp(16px, 2.7vh, 20px);

}


/*==================================================
TEXTO INDICADOR
==================================================*/

.cpd-zona-indicador p{

    font-size:clamp(11px, 1.8vh, 13px);

    line-height:1.4;

}
/*==================================================
MENSAJE FIN DE LA SIMULACIÓN
==================================================*/

#linea5 .cpd-texto{

    white-space:nowrap;

}

.cpd-fin{

    color:#2EA8FF;

    font-weight:700;

}
/*==================================================
INDICADOR DE GUÍA DEMOSTRATIVO
PUNTO VERDE ANIMADO
==================================================*/

.cpd-guia-demo{

    position:absolute;

    width:10px;
    height:10px;

    border-radius:50%;

    background:#22D967;

    box-shadow:
        0 0 5px #74FF9A,
        0 0 10px rgba(34,217,103,.9),
        0 0 18px rgba(34,217,103,.6);

    z-index:9999;

    pointer-events:none;

    opacity:1;

    display:block;

    transition:
        left .55s ease,
        top .55s ease,
        opacity .3s ease;

}