/*
=====================================================
HOSPITAL DE TOMÉ
MINI APP DE BIENVENIDA
CSS CONSOLIDADO Y CORREGIDO
=====================================================
*/

/* =====================================================
   1. BASE
   ===================================================== */

html {
    scroll-behavior: smooth;
}

body.tic-bienvenida-app {
    margin: 0 !important;
    padding: 0 !important;
    background: #f5f9fc !important;
}

body.tic-bienvenida-app #page,
body.tic-bienvenida-app .site {
    margin: 0 !important;
    padding: 0 !important;
}

body.tic-bienvenida-app header,
body.tic-bienvenida-app footer {
    margin: 0;
}

#bienvenida-app {
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    background: #f5f9fc;
    color: #172033;
    scroll-behavior: smooth;
}

#bienvenida-app,
#bienvenida-app *,
#bienvenida-app *::before,
#bienvenida-app *::after {
    box-sizing: border-box;
}

#bienvenida-app img {
    max-width: 100%;
}

#bienvenida-app a {
    text-decoration: none;
}

#bienvenida-app button,
#bienvenida-app a {
    -webkit-tap-highlight-color: transparent;
}


/* =====================================================
   2. HERO / BIENVENIDA
   ===================================================== */

/* =====================================================
   CONTENIDO CENTRAL DEL HERO
   ===================================================== */

#bienvenida-hero .bienvenida-content {

    position: relative;

    background: rgba(255, 255, 255, 0.72);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    border: 1px solid rgba(255, 255, 255, 0.85);

    border-radius: 32px;

    padding: 38px 48px 42px;

    box-shadow:
        0 20px 50px rgba(30, 60, 100, 0.10);

}


/* =====================================================
   EYEBROW
   ===================================================== */

#bienvenida-hero .bienvenida-eyebrow {

    position: relative;
    z-index: 2;
}


/* =====================================================
   TITULO
   ===================================================== */

#bienvenida-hero h1 {

    position: relative;
    z-index: 2;

    margin-bottom: 22px;

}


/* =====================================================
   DESCRIPCIÓN
   ===================================================== */

#bienvenida-hero .bienvenida-description {

    position: relative;
    z-index: 2;

    max-width: 720px;

    margin-left: auto;
    margin-right: auto;

    line-height: 1.7;

    color: #52627a;

}


/* =====================================================
   BOTÓN
   ===================================================== */

#bienvenida-hero .btn-bienvenida {

    position: relative;
    z-index: 2;
}





#bienvenida-app .bienvenida-hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 120px 20px 80px;
    background: #f5f9fc;
}

#bienvenida-app .bienvenida-background {

    position: absolute;
    inset: 0;
    background-image: url('/wp-content/themes/base-wp/img/bg_section1.jpg');

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    z-index: 0;
}

/* Contenido sobre el fondo */

#bienvenida-app .bienvenida-hero .container {
    position: relative;
    z-index: 2;
}

#bienvenida-app .bienvenida-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 900px;
    text-align: center;
}


/* =====================================================
   3. ICONO HERO
   ===================================================== */

#bienvenida-app .bienvenida-icon {
    width: 95px;
    height: 95px;
    margin: 0 auto 30px;

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

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            #0d6efd,
            #0dcaf0
        );

    color: #ffffff;
    font-size: 43px;

    box-shadow:
        0 20px 45px rgba(13, 110, 253, 0.23);

    animation:
        bienvenida-float 4s ease-in-out infinite;
}


/* =====================================================
   4. HERO TEXTOS
   ===================================================== */

#bienvenida-app .bienvenida-eyebrow {
    margin-bottom: 15px;

    color: #667085;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}

#bienvenida-app .bienvenida-hero h1 {
    margin: 0 0 28px;

    color: #172033;

    font-size: clamp(42px, 6vw, 76px);
    line-height: 1.02;
    font-weight: 800;
    letter-spacing: -2px;
}

#bienvenida-app .bienvenida-hero h1 span {
    display: block;

    background:
        linear-gradient(
            90deg,
            #0d6efd,
            #0dcaf0
        );

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

#bienvenida-app .bienvenida-description {
    max-width: 680px;
    margin: 0 auto 38px;

    color: #667085;

    font-size: 18px;
    line-height: 1.7;
}


/* =====================================================
   5. BOTÓN PRINCIPAL
   ===================================================== */

#bienvenida-app .btn-bienvenida {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    padding: 15px 28px;

    border: none;
    border-radius: 50px;

    background: #0d6efd;

    color: #ffffff !important;

    font-size: 16px;
    font-weight: 600;

    text-decoration: none !important;

    box-shadow:
        0 12px 30px rgba(13, 110, 253, 0.25);

    cursor: pointer;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

#bienvenida-app .btn-bienvenida:hover,
#bienvenida-app .btn-bienvenida:focus {
    background: #0b5ed7;
    color: #ffffff !important;

    transform: translateY(-3px);

    box-shadow:
        0 18px 35px rgba(13, 110, 253, 0.30);
}

#bienvenida-app .btn-bienvenida:focus-visible {
    outline: 3px solid rgba(13, 110, 253, 0.25);
    outline-offset: 4px;
}

#bienvenida-app .btn-bienvenida i {
    transition: transform 0.25s ease;
}

#bienvenida-app .btn-bienvenida:hover i {
    transform: translateX(4px);
}


/* =====================================================
   6. PROGRESO HERO
   ===================================================== */

#bienvenida-app .bienvenida-progress {
    margin-top: 26px;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 7px 14px;

    background: rgba(255, 255, 255, 0.65);

    border: 1px solid rgba(255, 255, 255, 0.75);

    border-radius: 999px;

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

#bienvenida-app .progress-current {
    color: #0d6efd;
    font-weight: 700;
}

#bienvenida-app .progress-separator {
    margin: 0 5px;
}

#bienvenida-app .bienvenida-scroll {
    margin-top: 18px;

    color: #52627a;

    text-shadow:
        0 1px 3px rgba(255, 255, 255, 0.9);
}

#bienvenida-app .bienvenida-scroll i {
    animation:
        bienvenida-bounce 1.8s infinite;
}


/* =====================================================
   7. NAVEGACIÓN PRINCIPAL
   ===================================================== */

#bienvenida-app .app-navigation {
    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    z-index: 99999;

    height: 72px;

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

    gap: 30px;

    padding: 10px 28px;

    background: rgba(255, 255, 255, 0.96);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    border-bottom:
        1px solid rgba(16, 24, 40, 0.08);

    box-shadow:
        0 4px 20px rgba(16, 24, 40, 0.06);

    transform: translateY(-100%);
    opacity: 0;

    pointer-events: none;

    transition:
        transform 0.35s ease,
        opacity 0.35s ease;
}

#bienvenida-app .app-navigation.app-navigation-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}


/* =====================================================
   8. MARCA NAVIGATION
   ===================================================== */

#bienvenida-app .app-navigation-brand {
    display: flex;
    align-items: center;

    gap: 12px;

    min-width: 220px;
}

#bienvenida-app .app-navigation-logo {
    width: 42px;
    height: 42px;

    object-fit: contain;

    flex-shrink: 0;
}

#bienvenida-app .app-navigation-brand-text {
    line-height: 1.1;
}

#bienvenida-app .app-navigation-title {
    color: #172033;

    font-size: 14px;
    font-weight: 750;
}

#bienvenida-app .app-navigation-subtitle {
    margin-top: 4px;

    color: #98a2b3;

    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
}


/* =====================================================
   9. PROGRESO NAVIGATION
   ===================================================== */

#bienvenida-app .app-progress {
    width: min(500px, 45vw);

    display: flex;
    align-items: center;

    gap: 15px;
}

#bienvenida-app .app-progress-info {
    display: flex;
    align-items: baseline;

    gap: 3px;

    flex-shrink: 0;
}

#bienvenida-app .app-progress-info strong {
    color: #0d6efd;

    font-size: 15px;
    font-weight: 800;
}

#bienvenida-app .app-progress-info small {
    color: #98a2b3;

    font-size: 11px;
}

#bienvenida-app .app-progress-bar {
    position: relative;

    width: 100%;
    height: 5px;

    overflow: hidden;

    border-radius: 50px;

    background: #e9eef5;
}

#bienvenida-app .app-progress-fill {
    width: 16.66%;
    height: 100%;

    border-radius: 50px;

    background:
        linear-gradient(
            90deg,
            #0d6efd,
            #087ea4
        );

    transition:
        width 0.5s ease;
}


/* =====================================================
   10. BOTÓN SALIR
   ===================================================== */

#bienvenida-app .app-navigation-exit {
    min-width: 80px;

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

    gap: 7px;

    padding: 9px 14px;

    border-radius: 50px;

    color: #667085 !important;
    background: #f5f7fa;

    text-decoration: none !important;

    font-size: 12px;
    font-weight: 600;

    transition:
        color 0.25s ease,
        background 0.25s ease,
        transform 0.25s ease;
}

#bienvenida-app .app-navigation-exit:hover,
#bienvenida-app .app-navigation-exit:focus {
    color: #0d6efd !important;
    background: #eef5ff !important;
}

#bienvenida-app .app-navigation-exit:focus-visible {
    outline: 3px solid rgba(13, 110, 253, 0.20);
    outline-offset: 3px;
}


/* =====================================================
   11. RUTA DE INCORPORACIÓN
   ===================================================== */

#bienvenida-app .ruta-section {
    position: relative;

    padding: 120px 20px 110px;

    background: #ffffff;

    overflow: hidden;
}

#bienvenida-app .ruta-heading {
    max-width: 700px;

    margin: 0 auto 70px;

    text-align: center;
}

#bienvenida-app .ruta-eyebrow {
    margin-bottom: 12px;

    color: #0d6efd;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}

#bienvenida-app .ruta-heading h2 {
    margin: 0 0 18px;

    color: #172033;

    font-size: clamp(34px, 5vw, 52px);
    font-weight: 800;
    letter-spacing: -1px;
}

#bienvenida-app .ruta-heading p {
    margin: 0;

    color: #667085;

    font-size: 17px;
    line-height: 1.7;
}


/* =====================================================
   12. MAPA RUTA
   ===================================================== */

#bienvenida-app .ruta-map {
    max-width: 1100px; width: 100%; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative;
}


/* =====================================================
   13. TARJETAS RUTA
   ===================================================== */

#bienvenida-app .ruta-card {
    position: relative;

    min-height: 300px;

    padding: 30px;

    text-align: left;

    border:
        1px solid #e8edf3;

    border-radius: 24px;

    background: #ffffff !important;

    color: inherit !important;

    text-decoration: none !important;

    box-shadow:
        0 8px 30px rgba(16, 24, 40, 0.05);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;

    cursor: pointer;
}

#bienvenida-app .ruta-card:hover {
    transform: translateY(-8px);

    border-color:
        rgba(13, 110, 253, 0.30);

    box-shadow:
        0 20px 45px rgba(16, 24, 40, 0.10);
}

#bienvenida-app .ruta-card:focus-visible {
    outline: 3px solid rgba(13, 110, 253, 0.25);
    outline-offset: 4px;
}

#bienvenida-app .ruta-card-1, #bienvenida-app .ruta-card-2, #bienvenida-app .ruta-card-3, #bienvenida-app .ruta-card-4 { grid-column: auto; grid-row: auto; }


/* =====================================================
   14. CONTENIDO RUTA
   ===================================================== */

#bienvenida-app .ruta-number {
    position: absolute;

    top: 22px;
    right: 25px;

    color: #b7c0cd;

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

#bienvenida-app .ruta-icon {
    width: 60px;
    height: 60px;

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

    margin-bottom: 28px;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #eef5ff,
            #e5f8fc
        );

    color: #0d6efd;

    font-size: 27px;

    transition:
        transform 0.3s ease;
}

#bienvenida-app .ruta-card:hover .ruta-icon {
    transform: scale(1.08);
}

#bienvenida-app .ruta-title {
    display: block;

    margin-bottom: 12px;

    color: #172033;

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

#bienvenida-app .ruta-description {
    display: block;

    color: #667085;

    font-size: 14px;
    line-height: 1.6;
}

#bienvenida-app .ruta-arrow {
    position: absolute;

    bottom: 25px;
    right: 28px;

    width: 36px;
    height: 36px;

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

    border-radius: 50%;

    background: #f1f5f9;

    color: #667085;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

#bienvenida-app .ruta-card:hover .ruta-arrow {
    background: #0d6efd;
    color: #ffffff;

    transform: translateX(4px);
}


/* =====================================================
   15. CONOCE EL HOSPITAL
   ===================================================== */







#bienvenida-app .hospital-eyebrow {
    margin-bottom: 12px;

    color: #0d6efd;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}






/* =====================================================
   19. EQUIPO TIC
   ===================================================== */

#bienvenida-app .tic-team-section {
    position: relative;

    padding: 120px 20px 110px;

    background: #ffffff;
}

#bienvenida-app .tic-team-heading {
    max-width: 720px;

    margin: 0 auto 60px;

    text-align: center;
}

#bienvenida-app .tic-team-eyebrow {
    margin-bottom: 12px;

    color: #0d6efd;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}

#bienvenida-app .tic-team-heading h2 {
    margin: 0 0 18px;

    color: #172033;

    font-size: clamp(34px, 5vw, 52px);
    font-weight: 800;
    letter-spacing: -1px;
}

#bienvenida-app .tic-team-heading p {
    margin: 0;

    color: #667085;

    font-size: 17px;
    line-height: 1.7;
}


/* =====================================================
   20. INTRO TIC
   ===================================================== */

#bienvenida-app .tic-team-intro {
    max-width: 900px;

    margin: 0 auto 55px;

    padding: 28px 32px;

    display: flex;
    align-items: center;

    gap: 24px;

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            #eef5ff,
            #f3fbfd
        );

    border:
        1px solid #e1ebf8;
}

#bienvenida-app .tic-team-intro-icon {
    width: 64px;
    height: 64px;

    flex-shrink: 0;

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

    border-radius: 18px;

    background: #ffffff;

    color: #0d6efd;

    font-size: 28px;

    box-shadow:
        0 8px 20px rgba(13, 110, 253, 0.08);
}

#bienvenida-app .tic-team-intro h3 {
    margin: 0 0 7px;

    color: #172033;

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

#bienvenida-app .tic-team-intro p {
    margin: 0;

    color: #667085;

    font-size: 14px;
    line-height: 1.6;
}


/* =====================================================
   21. GRID EQUIPO
   ===================================================== */

#bienvenida-app .tic-team-grid {
    max-width: 1050px;

    margin: auto;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 20px;
}

#bienvenida-app .tic-team-card {
    position: relative;

    min-height: 300px;

    padding: 30px;

    border:
        1px solid #e8edf3;

    border-radius: 22px;

    background: #ffffff;

    box-shadow:
        0 8px 25px rgba(16, 24, 40, 0.04);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

#bienvenida-app .tic-team-card:hover {
    transform: translateY(-6px);

    border-color:
        rgba(13, 110, 253, 0.25);

    box-shadow:
        0 18px 40px rgba(16, 24, 40, 0.09);
}


/* =====================================================
   22. TARJETAS TIC
   ===================================================== */

#bienvenida-app .tic-team-card-icon {
    width: 55px;
    height: 55px;

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

    margin-bottom: 22px;

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #eef5ff,
            #e7f9fc
        );

    color: #0d6efd;

    font-size: 24px;

    transition:
        transform 0.3s ease;
}

#bienvenida-app .tic-team-card:hover .tic-team-card-icon {
    transform: scale(1.08);
}

#bienvenida-app .tic-team-card-number {
    position: absolute;

    top: 25px;
    right: 27px;

    color: #c1c8d2;

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

#bienvenida-app .tic-team-card h3 {
    margin: 0 0 12px;

    color: #172033;

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

#bienvenida-app .tic-team-card p {
    margin: 0 0 22px;

    color: #667085;

    font-size: 14px;
    line-height: 1.65;
}

#bienvenida-app .tic-team-card-help {
    display: flex;
    align-items: center;

    gap: 8px;

    padding-top: 15px;

    border-top:
        1px solid #edf0f3;

    color: #667085;

    font-size: 12px;
}

#bienvenida-app .tic-team-card-help i {
    color: #0d6efd;
    font-size: 15px;
}


/* =====================================================
   23. CARD DESTACADA
   ===================================================== */

#bienvenida-app .tic-team-card-featured {
    background:
        linear-gradient(
            145deg,
            #0d6efd,
            #087ea4
        );

    border: none;

    color: #ffffff;
}

#bienvenida-app .tic-team-card-featured h3 {
    color: #ffffff;
}

#bienvenida-app .tic-team-card-featured p {
    color: rgba(255, 255, 255, 0.82);
}

#bienvenida-app .tic-team-card-featured .tic-team-card-number {
    color: rgba(255, 255, 255, 0.55);
}

#bienvenida-app .tic-team-card-featured .tic-team-card-icon {
    background:
        rgba(255, 255, 255, 0.15);

    color: #ffffff;
}

#bienvenida-app .tic-team-card-featured .tic-team-card-help {
    border-color:
        rgba(255, 255, 255, 0.18);

    color: rgba(255, 255, 255, 0.85);
}

#bienvenida-app .tic-team-card-featured .tic-team-card-help i {
    color: #ffffff;
}


/* =====================================================
   24. FOOTER TIC
   ===================================================== */

#bienvenida-app .tic-team-footer {
    max-width: 900px;

    margin: 60px auto 0;

    padding: 28px 32px;

    display: flex;
    align-items: center;

    gap: 20px;

    border:
        1px solid #e8edf3;

    border-radius: 22px;

    background: #f8fafc;
}

#bienvenida-app .tic-team-footer-icon {
    width: 52px;
    height: 52px;

    flex-shrink: 0;

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

    border-radius: 15px;

    background: #ffffff;

    color: #0d6efd;

    font-size: 22px;
}

#bienvenida-app .tic-team-footer h3 {
    margin: 0 0 5px;

    color: #172033;

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

#bienvenida-app .tic-team-footer p {
    margin: 0;

    color: #667085;

    font-size: 13px;
    line-height: 1.5;
}

#bienvenida-app .tic-team-footer-button {
    margin-left: auto;

    flex-shrink: 0;

    display: inline-flex;
    align-items: center;

    gap: 8px;

    padding: 12px 20px;

    border-radius: 50px;

    background: #0d6efd;

    color: #ffffff !important;

    text-decoration: none !important;

    font-size: 13px;
    font-weight: 600;

    transition:
        background 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

#bienvenida-app .tic-team-footer-button:hover {
    background: #0b5ed7 !important;
    color: #ffffff !important;

    transform: translateY(-2px);
}

#bienvenida-app .tic-team-footer-button:focus-visible {
    outline: 3px solid rgba(13, 110, 253, 0.20);
    outline-offset: 3px;
}


/* =====================================================
   25. NAVEGACIÓN ENTRE ETAPAS
   ===================================================== */

#bienvenida-app .app-next-step {
    max-width: 900px;

    margin: 35px auto 0;
}

#bienvenida-app .app-next-line {
    width: 1px;
    height: 25px;

    margin: 0 auto 15px;

    background: #dce2e8;
}

#bienvenida-app .app-next-content {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    padding: 22px 25px;

    border:
        1px solid #e8edf3;

    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 8px 25px rgba(16, 24, 40, 0.04);
}

#bienvenida-app .app-next-text {
    display: flex;
    flex-direction: column;

    gap: 5px;
}

#bienvenida-app .app-next-text span {
    color: #98a2b3;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

#bienvenida-app .app-next-text strong {
    color: #172033;

    font-size: 18px;
}

#bienvenida-app .app-next-button {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    padding: 12px 21px;

    border-radius: 50px;

    background: #0d6efd;

    color: #ffffff !important;

    text-decoration: none !important;

    font-size: 13px;
    font-weight: 600;

    white-space: nowrap;

    transition:
        background 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

#bienvenida-app .app-next-button:hover {
    background: #0b5ed7 !important;
    color: #ffffff !important;

    transform: translateX(4px);

    box-shadow:
        0 8px 20px rgba(13, 110, 253, 0.20);
}

#bienvenida-app .app-next-button i {
    transition:
        transform 0.25s ease;
}

#bienvenida-app .app-next-button:hover i {
    transform: translateX(4px);
}


/* =====================================================
   26. HERRAMIENTAS / SEGURIDAD
   ===================================================== */

#bienvenida-app #herramientas,
#bienvenida-app #seguridad {
    position: relative;

    min-height: 600px;

    padding: 110px 20px;

    overflow: hidden;
}

#bienvenida-app #herramientas {
    background: #ffffff;
}

#bienvenida-app #seguridad {
    background: #f5f9fc;
}


/* =====================================================
   27. PLACEHOLDER
   ===================================================== */

#bienvenida-app .app-placeholder {
    min-height: 500px;

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

    padding: 40px;

    background: #ffffff;

    text-align: center;
}

#bienvenida-app .placeholder-number {
    color: #0d6efd;

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

#bienvenida-app .app-placeholder h2 {
    margin: 10px 0 0;

    color: #172033;

    font-weight: 700;
}

#bienvenida-app .app-placeholder p {
    color: #98a2b3;
}


/* =====================================================
   28. ANIMACIONES
   ===================================================== */

@keyframes bienvenida-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

@keyframes bienvenida-bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(6px);
    }
}

@keyframes hospitalPanelIn {

    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =====================================================
   29. DESKTOP GRANDE
   ===================================================== */

@media (min-width: 1400px) {







    #bienvenida-app .app-next-step {
        margin-top: 25px;
    }
}


/* =====================================================
   30. TABLET
   ===================================================== */

@media (max-width: 991px) {

    /* -----------------------------------------------
       RUTA
       ----------------------------------------------- */

    #bienvenida-app .ruta-map {
        grid-template-columns:
            repeat(2, 1fr);

        grid-template-rows: auto;
    }

    #bienvenida-app .ruta-card-1,
    #bienvenida-app .ruta-card-2,
    #bienvenida-app .ruta-card-3,
    #bienvenida-app .ruta-card-4,
    #bienvenida-app .ruta-card-5 {
        grid-column: auto;
        grid-row: auto;
    }


    /* -----------------------------------------------
       HOSPITAL
       ----------------------------------------------- */

   

   

  


    /* -----------------------------------------------
       EQUIPO
       ----------------------------------------------- */

    #bienvenida-app .tic-team-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    /* -----------------------------------------------
       NAVEGACIÓN
       ----------------------------------------------- */

    #bienvenida-app .app-navigation {
        gap: 18px;
        padding-left: 20px;
        padding-right: 20px;
    }

    #bienvenida-app .app-navigation-brand {
        min-width: 180px;
    }
}


/* =====================================================
   31. MOBILE
   ===================================================== */

@media (max-width: 767px) {

    /* -----------------------------------------------
       NAVIGATION
       ----------------------------------------------- */

    #bienvenida-app .app-navigation {
        height: 64px;

        padding: 8px 15px;

        gap: 15px;
    }

    #bienvenida-app .app-navigation-brand {
        min-width: auto;

        gap: 8px;
    }

    #bienvenida-app .app-navigation-logo {
        width: 36px;
        height: 36px;
    }

    #bienvenida-app .app-navigation-subtitle {
        display: none;
    }

    #bienvenida-app .app-navigation-title {
        font-size: 12px;
    }

    #bienvenida-app .app-progress {
        flex: 1;

        width: auto;

        gap: 8px;
    }

    #bienvenida-app .app-navigation-exit {
        width: 38px;
        min-width: 38px;
        height: 38px;

        padding: 0;
    }

    #bienvenida-app .app-navigation-exit span {
        display: none;
    }


    /* -----------------------------------------------
       HERO
       ----------------------------------------------- */

    #bienvenida-app .bienvenida-hero {
        padding: 110px 20px 60px;
    }

    #bienvenida-app .bienvenida-icon {
        width: 78px;
        height: 78px;

        font-size: 34px;

        border-radius: 22px;
    }

    #bienvenida-app .bienvenida-eyebrow {
        font-size: 10px;
        letter-spacing: 2px;
    }

    #bienvenida-app .bienvenida-hero h1 {
        font-size: 43px;
        letter-spacing: -1.5px;
    }

    #bienvenida-app .bienvenida-description {
        font-size: 16px;
        line-height: 1.65;
    }

    #bienvenida-app .bienvenida-progress {
        margin-top: 40px;
    }


    /* -----------------------------------------------
       RUTA
       ----------------------------------------------- */

    #bienvenida-app .ruta-section {
        padding: 80px 20px;
    }

    #bienvenida-app .ruta-heading {
        margin-bottom: 45px;
    }

    #bienvenida-app .ruta-map {
        grid-template-columns: 1fr;

        gap: 16px;
    }

    #bienvenida-app .ruta-card {
        min-height: 250px;

        padding: 25px;
    }


    /* -----------------------------------------------
       HOSPITAL
       ----------------------------------------------- */



 

  

   


    


    /* -----------------------------------------------
       EQUIPO
       ----------------------------------------------- */

    #bienvenida-app .tic-team-section {
        padding: 80px 20px;
    }

    #bienvenida-app .tic-team-heading {
        margin-bottom: 40px;
    }

    #bienvenida-app .tic-team-intro {
        align-items: flex-start;

        padding: 24px;

        gap: 18px;
    }

    #bienvenida-app .tic-team-grid {
        grid-template-columns: 1fr;
    }

    #bienvenida-app .tic-team-card {
        min-height: auto;
    }

    #bienvenida-app .tic-team-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    #bienvenida-app .tic-team-footer-button {
        margin-left: 0;
    }


    /* -----------------------------------------------
       NAVEGACIÓN ENTRE ETAPAS
       ----------------------------------------------- */

    #bienvenida-app .app-next-content {
        flex-direction: column;

        align-items: flex-start;

        gap: 18px;
    }

    #bienvenida-app .app-next-button {
        width: 100%;

        justify-content: center;
    }


    /* -----------------------------------------------
       HERRAMIENTAS / SEGURIDAD
       ----------------------------------------------- */

    #bienvenida-app #herramientas,
    #bienvenida-app #seguridad {
        min-height: 500px;

        padding: 80px 20px;
    }
}


/* =====================================================
   32. MOBILE PEQUEÑO
   ===================================================== */

@media (max-width: 576px) {

    #bienvenida-app .app-navigation {
        padding-left: 10px;
        padding-right: 10px;
    }

    #bienvenida-app .app-navigation-brand-text {
        max-width: 110px;
    }

    #bienvenida-app .app-navigation-title {
        overflow: hidden;

        white-space: nowrap;
        text-overflow: ellipsis;
    }

    #bienvenida-app .app-progress-info strong {
        font-size: 13px;
    }

    #bienvenida-app .app-progress-info small {
        font-size: 10px;
    }

    #bienvenida-app .bienvenida-hero h1 {
        font-size: 39px;
    }

 


    #bienvenida-app .tic-team-intro {
        flex-direction: column;
    }
}


/* =====================================================
   33. ACCESIBILIDAD
   ===================================================== */

@media (prefers-reduced-motion: reduce) {

    #bienvenida-app *,
    #bienvenida-app *::before,
    #bienvenida-app *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}



/* NUEVO MENU */

#bienvenida-app .app-navigation-controls {

    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;

}

#bienvenida-app .app-navigation-button {

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 38px;
    padding: 9px 14px;

    border: 1px solid #e4e9ef;
    border-radius: 50px;

    background: #ffffff;
    color: #667085;

    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;

    cursor: pointer;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;

}


#bienvenida-app .app-navigation-button:hover {

    background: #f5f9ff;
    color: #0d6efd;
    border-color: rgba(13, 110, 253, .20);

}


#bienvenida-app .app-navigation-button:focus-visible {

    outline: 3px solid rgba(13, 110, 253, .18);
    outline-offset: 2px;

}


#bienvenida-app .app-navigation-button i {

    font-size: 14px;

    transition:
        transform .25s ease;

}


#bienvenida-app .app-navigation-prev:hover i {

    transform: translateX(-3px);

}


#bienvenida-app .app-navigation-next {

    background: #0d6efd;
    border-color: #0d6efd;
    color: #ffffff;

    box-shadow:
        0 6px 18px rgba(13, 110, 253, .18);

}


#bienvenida-app .app-navigation-next:hover {

    background: #0b5ed7;
    border-color: #0b5ed7;
    color: #ffffff;

    transform: translateY(-1px);

    box-shadow:
        0 9px 22px rgba(13, 110, 253, .25);

}


#bienvenida-app .app-navigation-next:hover i {

    transform: translateX(3px);

}


#bienvenida-app .app-navigation-button:disabled {

    opacity: .35;
    cursor: not-allowed;

    transform: none !important;
    box-shadow: none !important;

}

#bienvenida-app .app-navigation-controls {

    gap: 5px;

}


#bienvenida-app .app-navigation-button {

    width: 36px;
    min-width: 36px;

    height: 36px;
    min-height: 36px;

    padding: 0;

    border-radius: 50%;

}


#bienvenida-app .app-navigation-button span {

    display: none;

}


#bienvenida-app .app-navigation-button i {

    font-size: 14px;

}


/* =====================================================
   NAVEGACIÓN ENTRE ETAPAS
   ===================================================== */

#bienvenida-app .app-progress {
    width: min(720px, 55vw);
    display: flex;
    align-items: center;
    gap: 12px;
}


/* =====================================================
   BOTONES ANTERIOR / SIGUIENTE
   ===================================================== */

#bienvenida-app .app-navigation-step-button {

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

    gap: 6px;

    flex-shrink: 0;

    padding: 8px 11px;

    border: none;
    border-radius: 50px;

    background: #f5f7fa;

    color: #667085;

    font-size: 11px;
    font-weight: 600;

    cursor: pointer;

    white-space: nowrap;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease,
        opacity .25s ease;
}


/* Hover */

#bienvenida-app .app-navigation-step-button:hover:not(:disabled) {

    background: #eef5ff;

    color: #0d6efd;

}


/* Flechas */

#bienvenida-app .app-navigation-step-button i {

    font-size: 13px;

    transition:
        transform .25s ease;

}


/* Hover flecha izquierda */

#bienvenida-app #app-navigation-prev:hover:not(:disabled) i {

    transform: translateX(-3px);

}


/* Hover flecha derecha */

#bienvenida-app #app-navigation-next:hover:not(:disabled) i {

    transform: translateX(3px);

}


/* =====================================================
   BOTONES DESHABILITADOS
   ===================================================== */

#bienvenida-app .app-navigation-step-button:disabled {

    opacity: .35;

    cursor: default;

    background: #f5f7fa;

    color: #98a2b3;

}


/* =====================================================
   INFORMACIÓN DE PROGRESO
   ===================================================== */

#bienvenida-app .app-progress-info {

    display: flex;

    align-items: baseline;

    gap: 3px;

    flex-shrink: 0;

}


/* =====================================================
   BARRA
   ===================================================== */

#bienvenida-app .app-progress-bar {

    position: relative;

    width: 100%;

    height: 5px;

    overflow: hidden;

    border-radius: 50px;

    background: #e9eef5;

}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 767px) {

    #bienvenida-app .app-progress {

        flex: 1;

        width: auto;

        gap: 7px;

    }


    #bienvenida-app .app-navigation-step-button {

        width: 34px;

        height: 34px;

        padding: 0;

        border-radius: 50%;

    }


    #bienvenida-app .app-navigation-step-button span {

        display: none;

    }


    #bienvenida-app .app-navigation-step-button i {

        font-size: 13px;

    }


    #bienvenida-app .app-progress-info strong {

        font-size: 13px;

    }


    #bienvenida-app .app-progress-info small {

        font-size: 10px;

    }

}


/* =====================================================
   MOBILE MUY PEQUEÑO
   ===================================================== */

@media (max-width: 400px) {

    #bienvenida-app .app-navigation-step-button {

        width: 30px;

        height: 30px;

    }


    #bienvenida-app .app-progress {

        gap: 5px;

    }

}


/* =====================================================
   INDICADOR INFERIOR - ETAPA HOSPITAL
   ===================================================== */






/* =====================================================
   ANIMACIÓN INDICADOR
   ===================================================== */

@keyframes hospital-stage-bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(5px);
    }

}


/* =====================================================
   MOBILE
   ===================================================== */



@media (min-width: 1400px) {










}



/* =====================================================
   FOOTER DE ETAPA - CONOCE EL HOSPITAL
   ===================================================== */










/* Flecha */




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

@keyframes hospital-stage-arrow {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(5px);
    }

}


/* =====================================================
   TABLET
   ===================================================== */

@media (max-width: 991px) {

   

}


/* =====================================================
   MOBILE
   ===================================================== */





/* =====================================================
   ETAPA 3 - CONOCE EL HOSPITAL
   CONTENEDOR GENERAL
   ===================================================== */




/* =====================================================
   CONTENEDOR INTERNO DE LA ETAPA
   ===================================================== */




/* =====================================================
   ENCABEZADO
   ===================================================== */




#bienvenida-app .hospital-eyebrow {

    margin-bottom: 10px;

    color: #0d6efd;

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

    letter-spacing: 3px;

}







#bienvenida-app .hospital-tab-icon {

    width: 38px;
    height: 38px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 10px;

    background: #ffffff;

    font-size: 17px;

}


#bienvenida-app .hospital-tab-text {

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 2px;

}


#bienvenida-app .hospital-tab-text strong {

    color: #172033;

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

}


#bienvenida-app .hospital-tab-text small {

    color: #98a2b3;

    font-size: 9px;

}















/* =====================================================
   INDICADOR DE CONTINUIDAD
   ===================================================== */










/* =====================================================
   TABLET
   ===================================================== */

@media (max-width: 991px) {














}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 767px) {

 








  





 
















}


/* =====================================================
   ETAPAS 5 Y 6
   HERRAMIENTAS TIC / SEGURIDAD
   ===================================================== */

#bienvenida-app .app-section {
    position: relative;
    width: 100%;
    padding: 110px 20px 100px;
    overflow: hidden;
}


/* =====================================================
   CONTENEDOR
   ===================================================== */

#bienvenida-app .app-section-inner {
    width: 100%;
    max-width: 1150px;
    margin: 0 auto;
}


/* =====================================================
   FONDOS
   ===================================================== */

#bienvenida-app .herramientas-section {
    background: #ffffff;
}

#bienvenida-app .seguridad-section {
    background: #f5f9fc;
}


/* =====================================================
   ENCABEZADO
   ===================================================== */

#bienvenida-app .app-section-heading {
    width: 100%;
    max-width: 720px;
    margin: 0 auto 60px;
    text-align: center;
}

#bienvenida-app .app-section-eyebrow {
    margin-bottom: 12px;

    color: #0d6efd;

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

    letter-spacing: 3px;
}

#bienvenida-app .app-section-heading h2 {
    margin: 0 0 18px;

    color: #172033;

    font-size: clamp(36px, 5vw, 52px);
    line-height: 1.08;

    font-weight: 800;
    letter-spacing: -1px;
}

#bienvenida-app .app-section-heading p {
    max-width: 680px;
    margin: 0 auto;

    color: #667085;

    font-size: 17px;
    line-height: 1.7;
}


/* =====================================================
   ETAPA 5 — HERRAMIENTAS TIC
   Explorador de categorías y herramientas
   ===================================================== */

#bienvenida-app .herramientas-section {
    background: #ffffff;
}


/* =====================================================
   GRID DE CATEGORÍAS
   ===================================================== */

#bienvenida-app .tic-tools-category-grid {

    width: 100%;
    max-width: 1120px;

    margin: 45px auto 0;

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(300px, 1fr));

    gap: 24px;
}


/* =====================================================
   TARJETA DE CATEGORÍA
   ===================================================== */

#bienvenida-app .tic-tools-category-card {

    position: relative;

    display: flex;
    align-items: flex-start;

    gap: 22px;

    min-height: 235px;

    padding: 28px;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f8fafc 100%
        );

    border: 1px solid #e5e7eb;

    border-radius: 22px;

    box-shadow:
        0 10px 28px rgba(15, 23, 42, 0.06);

    cursor: pointer;

    overflow: hidden;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}


/* brillo decorativo */

#bienvenida-app .tic-tools-category-card::before {

    content: "";

    position: absolute;

    top: -80px;
    right: -80px;

    width: 180px;
    height: 180px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(249, 115, 22, 0.10) 0%,
            rgba(249, 115, 22, 0) 70%
        );

    pointer-events: none;
}


#bienvenida-app .tic-tools-category-card:hover {

    transform: translateY(-6px);

    border-color: rgba(249, 115, 22, 0.35);

    box-shadow:
        0 18px 38px rgba(15, 23, 42, 0.11);
}


/* =====================================================
   ICONO DE CATEGORÍA
   ===================================================== */

#bienvenida-app .tic-tools-category-icon {

    position: relative;
    z-index: 1;

    flex: 0 0 64px;

    width: 64px;
    height: 64px;

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

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #fff7ed,
            #ffedd5
        );

    color: #ea580c;

    font-size: 28px;

    box-shadow:
        inset 0 0 0 1px rgba(249, 115, 22, 0.12);
}


#bienvenida-app .tic-tools-category-icon i {
    line-height: 1;
}


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

#bienvenida-app .tic-tools-category-content {

    position: relative;
    z-index: 1;

    flex: 1;

    min-width: 0;

    display: flex;
    flex-direction: column;
}


#bienvenida-app .tic-tools-category-label {

    display: block;

    margin-bottom: 7px;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.14em;

    color: #94a3b8;
}


#bienvenida-app .tic-tools-category-card h3 {

    margin: 0 0 10px;

    font-size: 20px;
    line-height: 1.25;

    font-weight: 750;

    color: #172033;
}


#bienvenida-app .tic-tools-category-card p {

    margin: 0;

    font-size: 14px;
    line-height: 1.65;

    color: #64748b;
}


/* =====================================================
   FOOTER TARJETA
   ===================================================== */

#bienvenida-app .tic-tools-category-footer {

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

    gap: 15px;

    margin-top: auto;
    padding-top: 22px;
}


#bienvenida-app .tic-tools-category-count {

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

    color: #94a3b8;
}


#bienvenida-app .tic-tools-category-arrow {

    width: 36px;
    height: 36px;

    flex: 0 0 36px;

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

    border-radius: 50%;

    background: #f8fafc;

    color: #64748b;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}


#bienvenida-app .tic-tools-category-card:hover
.tic-tools-category-arrow {

    background: #ea580c;

    color: #ffffff;

    transform: translateX(3px);
}


/* =====================================================
   MODAL
   ===================================================== */

#bienvenida-app #ticToolsExplorerModal
.modal-dialog {

    width: calc(100% - 30px);

    max-width: 1120px;

    margin: 15px auto;
}


#bienvenida-app .tic-tools-modal-content {

    height: 85vh;
    max-height: 85vh;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border: 0;

    border-radius: 24px;

    background: #ffffff;

    box-shadow:
        0 30px 80px rgba(15, 23, 42, 0.22);
}


/* =====================================================
   HEADER MODAL
   ===================================================== */

#bienvenida-app .tic-tools-modal-header {

    flex: 0 0 auto;

    display: flex;
    align-items: center;

    gap: 20px;

    padding: 24px 28px;

    border-bottom: 1px solid #e5e7eb;
}


#bienvenida-app .tic-tools-modal-heading {

    display: flex;
    align-items: center;

    gap: 16px;

    min-width: 0;
}


#bienvenida-app .tic-tools-modal-icon {

    width: 52px;
    height: 52px;

    flex: 0 0 52px;

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

    border-radius: 15px;

    background: #fff7ed;

    color: #ea580c;

    font-size: 23px;
}


#bienvenida-app .tic-tools-modal-eyebrow {

    display: block;

    margin-bottom: 4px;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.14em;

    color: #ea580c;
}


#bienvenida-app .tic-tools-modal-header h2 {

    margin: 0;

    font-size: 23px;
    line-height: 1.2;

    font-weight: 750;

    color: #172033;
}


#bienvenida-app .tic-tools-modal-header p {

    margin: 4px 0 0;

    font-size: 13px;

    color: #64748b;
}


/* =====================================================
   BODY MODAL
   ===================================================== */

#bienvenida-app .tic-tools-modal-body {

    flex: 1 1 auto;

    min-height: 0;

    padding: 0;

    overflow: hidden;
}


/* =====================================================
   LISTADO
   ===================================================== */

#bienvenida-app .tic-tools-list-view {

    height: 100%;

    min-height: 0;

    display: flex;
    flex-direction: column;
}


#bienvenida-app .tic-tools-list-toolbar {

    flex: 0 0 auto;

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

    gap: 20px;

    padding: 20px 28px 16px;

    background: #ffffff;
}


#bienvenida-app .tic-tools-search {

    position: relative;

    width: min(100%, 500px);
}


#bienvenida-app .tic-tools-search > i {

    position: absolute;

    left: 16px;
    top: 50%;

    transform: translateY(-50%);

    color: #94a3b8;

    pointer-events: none;

    z-index: 2;
}


#bienvenida-app .tic-tools-search input {

    height: 46px;

    padding:
        0 16px 0 44px;

    border: 1px solid #e2e8f0;

    border-radius: 13px;

    background: #f8fafc;

    font-size: 14px;

    box-shadow: none;
}


#bienvenida-app .tic-tools-search input:focus {

    border-color: rgba(249, 115, 22, 0.45);

    background: #ffffff;

    box-shadow:
        0 0 0 3px rgba(249, 115, 22, 0.10);
}


#bienvenida-app .tic-tools-result-count {

    flex: 0 0 auto;

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

    color: #94a3b8;

    white-space: nowrap;
}


/* =====================================================
   GRID DE HERRAMIENTAS
   ===================================================== */

#bienvenida-app .tic-tools-grid {

    flex: 1 1 auto;

    min-height: 0;

    overflow-y: auto;

    padding: 4px 28px 28px;

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(220px, 1fr));

    align-content: start;

    gap: 16px;

    scrollbar-width: thin;
}


/* =====================================================
   TARJETA DE HERRAMIENTA
   ===================================================== */

#bienvenida-app .tic-tools-tool-card {

    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 185px;

    padding: 20px;

    border: 1px solid #e5e7eb;

    border-radius: 17px;

    background: #ffffff;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


#bienvenida-app .tic-tools-tool-card:hover {

    transform: translateY(-3px);

    border-color:
        rgba(249, 115, 22, 0.35);

    box-shadow:
        0 10px 24px rgba(15, 23, 42, 0.08);
}


#bienvenida-app .tic-tools-tool-icon {

    width: 44px;
    height: 44px;

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

    margin-bottom: 16px;

    border-radius: 12px;

    background: #f8fafc;

    color: #ea580c;

    font-size: 19px;
}


#bienvenida-app .tic-tools-tool-card h3 {

    margin: 0 0 8px;

    font-size: 16px;
    line-height: 1.3;

    font-weight: 750;

    color: #172033;
}


#bienvenida-app .tic-tools-tool-card p {

    margin: 0;

    font-size: 13px;
    line-height: 1.55;

    color: #64748b;
}


#bienvenida-app .tic-tools-tool-arrow {

    margin-top: auto;
    padding-top: 15px;

    display: flex;
    justify-content: flex-end;

    color: #94a3b8;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}


#bienvenida-app .tic-tools-tool-card:hover
.tic-tools-tool-arrow {

    color: #ea580c;

    transform: translateX(3px);
}


/* =====================================================
   ESTADO VACÍO
   ===================================================== */

#bienvenida-app .tic-tools-empty {

    flex: 1 1 auto;

    min-height: 250px;

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

    padding: 40px;

    text-align: center;

    color: #94a3b8;
}


#bienvenida-app .tic-tools-empty > i {

    margin-bottom: 15px;

    font-size: 30px;
}


#bienvenida-app .tic-tools-empty h3 {

    margin: 0 0 7px;

    font-size: 18px;

    color: #334155;
}


#bienvenida-app .tic-tools-empty p {

    margin: 0;

    font-size: 13px;
}


/* =====================================================
   VISTA DETALLE
   ===================================================== */

#bienvenida-app .tic-tools-detail-view {

    height: 100%;

    overflow-y: auto;

    padding: 24px 28px 32px;
}


#bienvenida-app .tic-tools-back-button {

    display: inline-flex;
    align-items: center;

    gap: 8px;

    margin-bottom: 25px;

    padding: 0;

    border: 0;

    background: transparent;

    color: #64748b;

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;
}


#bienvenida-app .tic-tools-back-button:hover {

    color: #ea580c;
}


/* =====================================================
   DETALLE
   ===================================================== */

#bienvenida-app .tic-tools-detail {

    max-width: 850px;

    margin: 0 auto;
}


#bienvenida-app .tic-tools-detail-icon {

    width: 68px;
    height: 68px;

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

    margin-bottom: 20px;

    border-radius: 18px;

    background: #fff7ed;

    color: #ea580c;

    font-size: 29px;
}


#bienvenida-app .tic-tools-detail-category {

    display: block;

    margin-bottom: 6px;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.14em;

    color: #ea580c;
}


#bienvenida-app .tic-tools-detail h3 {

    margin: 0 0 12px;

    font-size: 30px;
    line-height: 1.2;

    font-weight: 800;

    color: #172033;
}


#bienvenida-app .tic-tools-detail-description {

    max-width: 760px;

    margin: 0;

    font-size: 16px;
    line-height: 1.7;

    color: #64748b;
}


/* =====================================================
   BLOQUES DE INFORMACIÓN
   ===================================================== */

#bienvenida-app .tic-tools-detail-sections {

    display: grid;

    gap: 15px;

    margin-top: 32px;
}


#bienvenida-app .tic-tools-detail-section {

    display: flex;

    gap: 15px;

    padding: 20px;

    border: 1px solid #e5e7eb;

    border-radius: 15px;

    background: #f8fafc;
}


#bienvenida-app .tic-tools-detail-section-icon {

    width: 40px;
    height: 40px;

    flex: 0 0 40px;

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

    border-radius: 11px;

    background: #ffffff;

    color: #ea580c;
}


#bienvenida-app .tic-tools-detail-section h4 {

    margin: 0 0 5px;

    font-size: 14px;
    font-weight: 750;

    color: #334155;
}


#bienvenida-app .tic-tools-detail-section p {

    margin: 0;

    font-size: 13px;
    line-height: 1.6;

    color: #64748b;
}


/* =====================================================
   ACCIONES
   ===================================================== */

#bienvenida-app .tic-tools-detail-actions {

    display: flex;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 30px;
}


#bienvenida-app .tic-tools-access-button,
#bienvenida-app .tic-tools-support-button {

    min-height: 44px;

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

    gap: 9px;

    padding: 0 18px;

    border-radius: 11px;

    font-size: 13px;
    font-weight: 750;

    text-decoration: none;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}


#bienvenida-app .tic-tools-access-button {

    border: 0;

    background: #ea580c;

    color: #ffffff;
}


#bienvenida-app .tic-tools-access-button:hover {

    background: #c2410c;

    color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 8px 18px rgba(234, 88, 12, 0.22);
}


#bienvenida-app .tic-tools-support-button {

    border: 1px solid #e2e8f0;

    background: #ffffff;

    color: #475569;
}


#bienvenida-app .tic-tools-support-button:hover {

    border-color: #cbd5e1;

    background: #f8fafc;

    color: #ea580c;
}


/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 900px) {

    #bienvenida-app .tic-tools-category-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }

    #bienvenida-app .tic-tools-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }

}


@media (max-width: 700px) {

    #bienvenida-app .tic-tools-category-grid {

        grid-template-columns: 1fr;

    }

    #bienvenida-app #ticToolsExplorerModal
    .modal-dialog {

        width: calc(100% - 16px);

        margin: 8px auto;
    }

    #bienvenida-app .tic-tools-modal-content {

        height: calc(100vh - 16px);

        max-height: calc(100vh - 16px);

        border-radius: 18px;
    }

    #bienvenida-app .tic-tools-modal-header {

        padding: 18px;

    }

    #bienvenida-app .tic-tools-modal-icon {

        width: 45px;
        height: 45px;

        flex-basis: 45px;

        font-size: 20px;
    }

    #bienvenida-app .tic-tools-modal-header h2 {

        font-size: 19px;
    }

    #bienvenida-app .tic-tools-modal-header p {

        display: none;
    }

    #bienvenida-app .tic-tools-list-toolbar {

        align-items: stretch;
        flex-direction: column;

        padding: 15px 18px 12px;

        gap: 10px;
    }

    #bienvenida-app .tic-tools-search {

        width: 100%;
    }

    #bienvenida-app .tic-tools-result-count {

        font-size: 11px;
    }

    #bienvenida-app .tic-tools-grid {

        grid-template-columns: 1fr;

        padding:
            3px 18px 20px;
    }

    #bienvenida-app .tic-tools-detail-view {

        padding:
            20px 18px 25px;
    }

    #bienvenida-app .tic-tools-detail h3 {

        font-size: 25px;
    }

}


@media (max-width: 480px) {

    #bienvenida-app .tic-tools-category-card {

        min-height: 0;

        padding: 22px;

        gap: 17px;
    }

    #bienvenida-app .tic-tools-category-icon {

        width: 52px;
        height: 52px;

        flex-basis: 52px;

        font-size: 23px;

        border-radius: 15px;
    }

    #bienvenida-app .tic-tools-category-card h3 {

        font-size: 18px;
    }

    #bienvenida-app .tic-tools-detail-actions {

        flex-direction: column;
    }

    #bienvenida-app .tic-tools-access-button,
    #bienvenida-app .tic-tools-support-button {

        width: 100%;
    }

}


/* =====================================================
   MENSAJE FINAL
   ===================================================== */

#bienvenida-app .app-final-message {
    width: 100%;
    max-width: 900px;

    margin: 60px auto 0;

    padding: 30px 35px;

    display: flex;
    align-items: center;
    gap: 24px;

    border:
        1px solid #e1ebf8;

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            #eef5ff,
            #f3fbfd
        );

    box-shadow:
        0 8px 25px rgba(16, 24, 40, .04);
}


/* =====================================================
   ICONO FINAL
   ===================================================== */

#bienvenida-app .app-final-icon {
    width: 62px;
    height: 62px;

    flex-shrink: 0;

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

    border-radius: 18px;

    background: #ffffff;

    color: #0d6efd;

    font-size: 26px;

    box-shadow:
        0 8px 20px rgba(13, 110, 253, .08);
}


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

#bienvenida-app .app-final-message span {
    display: block;

    margin-bottom: 6px;

    color: #0d6efd;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2px;
}

#bienvenida-app .app-final-message h3 {
    margin: 0 0 7px;

    color: #172033;

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

#bienvenida-app .app-final-message p {
    margin: 0;

    color: #667085;

    font-size: 14px;
    line-height: 1.6;
}


/* =====================================================
   OCULTAR ANTIGUOS "SIGUIENTE ETAPA"

   La navegación ahora está en el header.
   ===================================================== */

#bienvenida-app .app-next-step {
    display: none !important;
}


/* =====================================================
   DESKTOP GRANDE
   ===================================================== */

@media (min-width: 1400px) {

    #bienvenida-app .app-section {
        padding-top: 100px;
        padding-bottom: 90px;
    }

    #bienvenida-app .app-section-heading {
        margin-bottom: 50px;
    }

    #bienvenida-app .app-tool-card,
    #bienvenida-app .app-security-card {
        min-height: 260px;
    }

    #bienvenida-app .app-final-message {
        margin-top: 50px;
    }
}


/* =====================================================
   TABLET
   ===================================================== */

@media (max-width: 991px) {

    #bienvenida-app .app-tools-grid,
    #bienvenida-app .app-security-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 767px) {

    #bienvenida-app .app-section {
        padding: 80px 20px;
    }

    #bienvenida-app .app-section-heading {
        margin-bottom: 40px;
    }

    #bienvenida-app .app-section-heading h2 {
        font-size: 36px;
    }

    #bienvenida-app .app-section-heading p {
        font-size: 16px;
    }

    #bienvenida-app .app-tools-grid,
    #bienvenida-app .app-security-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    #bienvenida-app .app-tool-card,
    #bienvenida-app .app-security-card {
        min-height: auto;
        padding: 25px;
    }

    #bienvenida-app .app-final-message {
        flex-direction: column;
        align-items: flex-start;

        padding: 25px;
        margin-top: 40px;
    }

}


/* =====================================================
   MOBILE PEQUEÑO
   ===================================================== */

@media (max-width: 576px) {

    #bienvenida-app .app-section-heading h2 {
        font-size: 32px;
    }

    #bienvenida-app .app-section-heading p {
        font-size: 15px;
    }

}


/* =====================================================
33. ETAPA FINAL - RECORRIDO COMPLETADO
===================================================== */

#bienvenida-app .app-final-section {


position: relative;

min-height: 100vh;

padding: 110px 20px 80px;

display: flex;

align-items: center;

justify-content: center;

background:
    radial-gradient(
        circle at 50% 35%,
        rgba(13, 110, 253, .10),
        transparent 38%
    ),
    linear-gradient(
        180deg,
        #f5f9fc 0%,
        #ffffff 100%
    );

overflow: hidden;


}

/* =====================================================
CONTENEDOR PRINCIPAL
===================================================== */

#bienvenida-app .app-final-stage {


width: 100%;

max-width: 850px;

margin: 0 auto;

padding: 65px 60px 50px;

display: flex;

flex-direction: column;

align-items: center;

text-align: center;

background: rgba(255, 255, 255, .94);

border: 1px solid #e5ebf2;

border-radius: 30px;

box-shadow:
    0 25px 70px rgba(16, 24, 40, .08);


}

/* =====================================================
ICONO FINAL
===================================================== */

#bienvenida-app .app-final-icon {


width: 90px;

height: 90px;

display: flex;

align-items: center;

justify-content: center;

margin-bottom: 30px;

border-radius: 28px;

background:
    linear-gradient(
        135deg,
        #0d6efd,
        #087ea4
    );

color: #ffffff;

font-size: 40px;

box-shadow:
    0 18px 40px rgba(13, 110, 253, .22);

animation:
    final-icon-float 4s ease-in-out infinite;


}

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

#bienvenida-app .app-final-content {


max-width: 650px;


}

#bienvenida-app .app-final-eyebrow {


display: block;

margin-bottom: 15px;

color: #0d6efd;

font-size: 11px;

font-weight: 800;

letter-spacing: 2.5px;


}

#bienvenida-app .app-final-content h2 {


margin: 0 0 20px;

color: #172033;

font-size: clamp(32px, 5vw, 48px);

line-height: 1.1;

font-weight: 800;

letter-spacing: -1.2px;


}

#bienvenida-app .app-final-content p {


max-width: 620px;

margin: 0 auto 12px;

color: #667085;

font-size: 16px;

line-height: 1.75;


}

#bienvenida-app .app-final-content p:last-child {


margin-bottom: 0;


}

/* =====================================================
ACCIONES
===================================================== */

#bienvenida-app .app-final-actions {


display: flex;

align-items: center;

justify-content: center;

gap: 12px;

margin-top: 35px;


}

#bienvenida-app .app-final-button {


display: inline-flex;

align-items: center;

justify-content: center;

gap: 9px;

min-width: 155px;

padding: 12px 21px;

border-radius: 50px;

font-size: 13px;

font-weight: 600;

text-decoration: none !important;

transition:
    transform .25s ease,
    background .25s ease,
    box-shadow .25s ease,
    color .25s ease;


}

#bienvenida-app .app-final-button i {


font-size: 15px;

transition:
    transform .25s ease;


}

/* =====================================================
BOTÓN PRINCIPAL
===================================================== */

#bienvenida-app .app-final-button-primary {


background: #0d6efd;

color: #ffffff !important;

box-shadow:
    0 10px 25px rgba(13, 110, 253, .20);


}

#bienvenida-app .app-final-button-primary:hover {


background: #0b5ed7;

color: #ffffff !important;

transform: translateY(-2px);

box-shadow:
    0 15px 30px rgba(13, 110, 253, .25);


}

#bienvenida-app .app-final-button-primary:hover i {


transform: translateY(-2px);


}

/* =====================================================
BOTÓN SECUNDARIO
===================================================== */

#bienvenida-app .app-final-button-secondary {


background: #f1f5f9;

color: #667085 !important;

border: 1px solid #e5eaf0;


}

#bienvenida-app .app-final-button-secondary:hover {

background: #eef5ff;

color: #0d6efd !important;

border-color: #d8e6fb;

transform: translateY(-2px);


}

#bienvenida-app .app-final-button-secondary:hover i {


transform: translateY(-1px);


}

/* =====================================================
PIE FINAL
===================================================== */

#bienvenida-app .app-final-footer {


width: 100%;

max-width: 580px;

margin-top: 42px;

padding-top: 22px;

display: flex;

align-items: center;

justify-content: center;

gap: 8px;

border-top: 1px solid #edf0f3;

color: #98a2b3;

font-size: 12px;


}

#bienvenida-app .app-final-footer i {

color: #0d6efd;
font-size: 14px;

}

/* =====================================================
ANIMACIÓN ICONO
===================================================== */

@keyframes final-icon-float {


0%,
100% {

    transform: translateY(0);

}

50% {

    transform: translateY(-6px);

}


}

/* =====================================================
RESPONSIVE TABLET
===================================================== */

@media (max-width: 991px) {


#bienvenida-app .app-final-section {

    padding: 100px 20px 70px;

}


#bienvenida-app .app-final-stage {

    padding: 55px 45px 45px;

}


}

/* =====================================================
RESPONSIVE MOBILE
===================================================== */

@media (max-width: 767px) {


#bienvenida-app .app-final-section {

    min-height: 100vh;

    padding: 90px 20px 60px;

}


#bienvenida-app .app-final-stage {

    padding: 45px 25px 35px;

    border-radius: 24px;

}


#bienvenida-app .app-final-icon {

    width: 75px;

    height: 75px;

    margin-bottom: 25px;

    border-radius: 22px;

    font-size: 33px;

}


#bienvenida-app .app-final-eyebrow {

    font-size: 10px;

    letter-spacing: 2px;

}


#bienvenida-app .app-final-content h2 {

    font-size: 32px;

    letter-spacing: -0.8px;

}


#bienvenida-app .app-final-content p {

    font-size: 15px;

    line-height: 1.7;

}


#bienvenida-app .app-final-actions {

    width: 100%;

    flex-direction: column;

    gap: 10px;

}


#bienvenida-app .app-final-button {

    width: 100%;

    max-width: 300px;

}


#bienvenida-app .app-final-footer {

    margin-top: 30px;

    font-size: 11px;

}


}

/* =====================================================
MOBILE PEQUEÑO
===================================================== */

@media (max-width: 576px) {


#bienvenida-app .app-final-section {

    padding-left: 15px;

    padding-right: 15px;

}


#bienvenida-app .app-final-stage {

    padding: 40px 20px 30px;

    border-radius: 22px;

}


#bienvenida-app .app-final-content h2 {

    font-size: 29px;

}


#bienvenida-app .app-final-content p {

    font-size: 14px;

}


}






/* ========================================================= INFORMACIÓN COMPLEMENTARIA DE LA RUTA ========================================================= */ #bienvenida-app .ruta-info { width: 100%; max-width: 1100px; margin: 42px auto 0; padding: 26px 30px 22px; border: 1px solid #e8edf3; border-radius: 24px; background: linear-gradient( 135deg, #ffffff 0%, #f8fbff 100% ); box-shadow: 0 8px 30px rgba(16, 24, 40, 0.05); } /* HEADER */ #bienvenida-app .ruta-info-header { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; } #bienvenida-app .ruta-info-icon { width: 44px; height: 44px; flex: 0 0 44px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: rgba(13, 110, 253, 0.08); color: #0d6efd; font-size: 20px; } #bienvenida-app .ruta-info-eyebrow { display: block; margin-bottom: 3px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: #0d6efd; } #bienvenida-app .ruta-info-header h3 { margin: 0; font-size: 18px; font-weight: 700; color: #172033; } /* ITEMS */ #bienvenida-app .ruta-info-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } #bienvenida-app .ruta-info-item { display: flex; align-items: flex-start; gap: 13px; padding: 17px; border-radius: 16px; background: #ffffff; border: 1px solid #edf1f5; } #bienvenida-app .ruta-info-item-icon { width: 38px; height: 38px; flex: 0 0 38px; display: flex; align-items: center; justify-content: center; border-radius: 11px; background: #f2f7ff; color: #0d6efd; font-size: 17px; } #bienvenida-app .ruta-info-item strong { display: block; margin-bottom: 4px; font-size: 14px; color: #172033; } #bienvenida-app .ruta-info-item p { margin: 0; font-size: 12px; line-height: 1.55; color: #667085; } /* FOOTER */ #bienvenida-app .ruta-info-footer { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 20px; font-size: 12px; font-weight: 600; color: #98a2b3; } #bienvenida-app .ruta-info-footer i { color: #0d6efd; animation: rutaInfoArrow 1.8s ease-in-out infinite; } @keyframes rutaInfoArrow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 991px) { #bienvenida-app .ruta-info-items { grid-template-columns: 1fr; } } @media (max-width: 576px) { #bienvenida-app .ruta-info { padding: 22px 18px 18px; border-radius: 20px; } #bienvenida-app .ruta-info-header h3 { font-size: 16px; } #bienvenida-app .ruta-info-item { padding: 14px; } }





/* =====================================================
ETAPA 3 - CONOCE EL HOSPITAL
===================================================== */





/* -----------------------------------------------------
ENCABEZADO
----------------------------------------------------- */



#bienvenida-app .hospital-eyebrow {
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.14em;
color: #1677c8;
}









/* -----------------------------------------------------
INFORMACIÓN
----------------------------------------------------- */



/* INTRO */

#bienvenida-app .hospital-info-intro {
display: flex;
gap: 16px;
margin-bottom: 28px;
}

#bienvenida-app .hospital-info-icon {
flex: 0 0 46px;
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 14px;
background: #eaf4fc;
color: #1677c8;
font-size: 21px;
}

#bienvenida-app .hospital-info-eyebrow {
display: block;
margin-bottom: 7px;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.12em;
color: #1677c8;
}

#bienvenida-app .hospital-info-intro h3 {
margin: 0 0 9px;
font-size: 25px;
line-height: 1.18;
font-weight: 800;
color: #17344d;
}

#bienvenida-app .hospital-info-intro p {
margin: 0;
font-size: 14px;
line-height: 1.6;
color: #738594;
}

/* -----------------------------------------------------
BOTONES
----------------------------------------------------- */






#bienvenida-app .hospital-tab-icon {
flex: 0 0 43px;
width: 43px;
height: 43px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 13px;
background: #edf6fd;
color: #1677c8;
font-size: 19px;
}

#bienvenida-app .hospital-tab-text {
min-width: 0;
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
}

#bienvenida-app .hospital-tab-text strong {
font-size: 14px;
font-weight: 750;
color: #17344d;
}

#bienvenida-app .hospital-tab-text small {
font-size: 12px;
color: #81919e;
}

#bienvenida-app .hospital-tab-arrow {
flex: 0 0 auto;
color: #9aabb8;
font-size: 16px;
transition: transform 0.2s ease, color 0.2s ease;
}

#bienvenida-app .hospital-tab-arrow {
color: #1677c8;
transform: translate(2px, -2px);
}

/* -----------------------------------------------------
INDICADOR
----------------------------------------------------- */


/* -----------------------------------------------------
FOOTER ETAPA
----------------------------------------------------- */















/* =========================================================
   RED ASISTENCIAL
   ========================================================= */

#bienvenida-app .hospital-network-flow {
    display: flex;

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

    gap: 18px;

    padding: 20px 0 5px;
}


#bienvenida-app .hospital-network-node {
    width: 210px;

    padding: 20px;

    text-align: center;

    border: 1px solid #e8edf3;

    border-radius: 18px;

    background: #f9fbfd;
}


#bienvenida-app .hospital-network-node.active {
    border-color: rgba(13, 110, 253, 0.3);

    background: rgba(13, 110, 253, 0.05);

    box-shadow:
        0 8px 25px rgba(13, 110, 253, 0.08);
}


#bienvenida-app .hospital-network-node span {
    width: 46px;
    height: 46px;

    margin: 0 auto 10px;

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

    border-radius: 14px;

    background: #ffffff;

    color: #0d6efd;

    font-size: 21px;
}


#bienvenida-app .hospital-network-node strong {
    display: block;

    margin-bottom: 4px;

    font-size: 13px;

    color: #172033;
}


#bienvenida-app .hospital-network-node small {
    font-size: 11px;

    color: #667085;
}


#bienvenida-app .hospital-network-arrow {
    color: #98a2b3;

    font-size: 18px;
}





/* =========================================================
   TABS
   ========================================================= */




#bienvenida-app .hospital-tab-arrow {
    margin-left: auto;

    width: 30px;
    height: 30px;

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

    border-radius: 50%;

    background: rgba(13, 110, 253, 0.07);

    color: #0d6efd;

    font-size: 12px;

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}


#bienvenida-app .hospital-tab-arrow {
    transform: translate(2px, -2px);

    background: rgba(13, 110, 253, 0.13);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 767px) {



    #bienvenida-app .hospital-network-flow {
        flex-direction: column;
    }

    #bienvenida-app .hospital-network-arrow {
        transform: rotate(90deg);
    }

    #bienvenida-app .hospital-network-node {
        width: 100%;
    }



}








/* =========================================================
   ETAPA 3 — CONOCE EL HOSPITAL
   CSS LIMPIO
   ========================================================= */


/* =========================================================
   CONTENEDOR PRINCIPAL
   ========================================================= */

#bienvenida-app .hospital-section {
    width: 100%;
    min-height: 100vh;
    padding: 90px 40px 65px;

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

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(0, 123, 255, 0.07),
            transparent 32%
        ),
        #f7fafd;

    box-sizing: border-box;
}


#bienvenida-app .hospital-stage {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}


/* =========================================================
   ENCABEZADO
   ========================================================= */

#bienvenida-app .hospital-heading {
    max-width: 760px;
    margin: 0 auto 38px;
    text-align: center;
}


#bienvenida-app .hospital-eyebrow {
    display: inline-block;
    margin-bottom: 10px;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;

    color: #0877b9;
}


#bienvenida-app .hospital-heading h2 {
    margin: 0 0 12px;

    font-size: clamp(32px, 4vw, 46px);
    line-height: 1.08;
    font-weight: 700;

    color: #17344d;
}


#bienvenida-app .hospital-heading p {
    max-width: 680px;
    margin: 0 auto;

    font-size: 16px;
    line-height: 1.7;

    color: #607487;
}


/* =========================================================
   EXPLORADOR PRINCIPAL
   ========================================================= */

#bienvenida-app .hospital-explorer {
    width: 100%;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 26px;
    align-items: stretch;
}


/* =========================================================
   IMAGEN
   ========================================================= */

#bienvenida-app .hospital-image {
    position: relative;

    min-height: 450px;

    overflow: hidden;

    border-radius: 28px;
    background: #dfeaf2;

    box-shadow:
        0 18px 45px rgba(25, 65, 95, 0.12);
}


#bienvenida-app .hospital-image img {
    display: block;

    width: 100%;
    height: 100%;

    min-height: 450px;

    object-fit: cover;

    transition: transform 0.5s ease;
}


#bienvenida-app .hospital-image:hover img {
    transform: scale(1.025);
}


/* =========================================================
   CAPTION DE LA IMAGEN
   ========================================================= */

#bienvenida-app .hospital-image-caption {
    position: absolute;

    top: 20px;
    left: 20px;

    z-index: 3;

    display: inline-flex;
    align-items: center;

    padding: 8px 12px;

    border-radius: 999px;

    background: rgba(23, 52, 77, 0.82);

    backdrop-filter: blur(8px);

    color: #ffffff;

    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.12);

    box-sizing: border-box;
}


#bienvenida-app .hospital-image-caption span {
    display: inline-flex;

    align-items: center;
    gap: 6px;

    font-size: 11px;
    line-height: 1;
    font-weight: 600;

    color: #ffffff;
}


#bienvenida-app .hospital-image-caption span i {
    font-size: 12px;
    color: #8edcff;
}


#bienvenida-app .hospital-image-caption small {
    display: none;
}


/* =========================================================
   PANEL DE INFORMACIÓN
   ========================================================= */

#bienvenida-app .hospital-info {
    min-height: 450px;

    padding: 34px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid rgba(25, 70, 105, 0.07);
    border-radius: 28px;

    box-shadow:
        0 18px 45px rgba(25, 65, 95, 0.08);
}


/* =========================================================
   INTRO DEL PANEL
   ========================================================= */

#bienvenida-app .hospital-info-intro {
    display: flex;
    align-items: flex-start;
    gap: 15px;

    margin-bottom: 28px;
}


#bienvenida-app .hospital-info-icon {
    flex: 0 0 auto;

    width: 48px;
    height: 48px;

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

    border-radius: 14px;

    background: #eaf5fb;
    color: #0877b9;

    font-size: 22px;
}


#bienvenida-app .hospital-info-eyebrow {
    display: block;

    margin-bottom: 7px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;

    color: #0877b9;
}


#bienvenida-app .hospital-info-intro h3 {
    margin: 0 0 8px;

    font-size: clamp(23px, 2.5vw, 30px);
    line-height: 1.18;
    font-weight: 700;

    color: #17344d;
}


#bienvenida-app .hospital-info-intro p {
    margin: 0;

    font-size: 14px;
    line-height: 1.6;

    color: #687b8b;
}


/* =========================================================
   BOTONES / TABS
   ========================================================= */

#bienvenida-app .hospital-tabs {
    width: 100%;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 10px;

    margin-top: 5px;
}


/* =========================================================
   BOTÓN INDIVIDUAL
   ========================================================= */

#bienvenida-app .hospital-tab {
    position: relative;

    min-width: 0;
    min-height: 112px;

    padding: 16px 14px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;

    border: 1px solid #e3ebf1;
    border-radius: 17px;

    background: #ffffff;

    color: #17344d;

    text-align: left;

    cursor: pointer;

    box-shadow: 0 4px 14px rgba(25, 65, 95, 0.04);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}


#bienvenida-app .hospital-tab:hover {
    transform: translateY(-3px);

    border-color: rgba(8, 119, 185, 0.28);

    background: #fafdff;

    box-shadow:
        0 10px 24px rgba(25, 65, 95, 0.10);
}


#bienvenida-app .hospital-tab:focus-visible {
    outline: 3px solid rgba(8, 119, 185, 0.20);
    outline-offset: 2px;
}


/* =========================================================
   ICONO DEL TAB
   ========================================================= */

#bienvenida-app .hospital-tab-icon {
    width: 38px;
    height: 38px;

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

    border-radius: 11px;

    background: #edf7fc;
    color: #0877b9;

    font-size: 18px;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}


#bienvenida-app .hospital-tab:hover .hospital-tab-icon {
    background: #0877b9;
    color: #ffffff;
}


/* =========================================================
   TEXTO DEL TAB
   ========================================================= */

#bienvenida-app .hospital-tab-text {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 3px;
}


#bienvenida-app .hospital-tab-text strong {
    display: block;

    font-size: 14px;
    line-height: 1.2;
    font-weight: 700;

    color: #17344d;
}


#bienvenida-app .hospital-tab-text small {
    display: block;

    font-size: 11px;
    line-height: 1.3;

    color: #8293a0;
}


/* =========================================================
   FLECHA
   ========================================================= */

#bienvenida-app .hospital-tab-arrow {
    position: absolute;

    top: 13px;
    right: 13px;

    width: 26px;
    height: 26px;

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

    border-radius: 50%;

    background: #f1f6f9;
    color: #658091;

    font-size: 12px;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}


#bienvenida-app .hospital-tab:hover .hospital-tab-arrow {
    background: #0877b9;
    color: #ffffff;

    transform: translate(2px, -2px);
}


/* =========================================================
   AYUDA
   ========================================================= */

#bienvenida-app .hospital-info-hint {
    margin-top: 20px;

    display: flex;
    align-items: center;
    gap: 8px;

    font-size: 12px;
    color: #81919e;
}


#bienvenida-app .hospital-info-hint i {
    color: #0877b9;
    font-size: 14px;
}


/* =========================================================
   PIE DE LA ETAPA
   ========================================================= */

#bienvenida-app .hospital-stage-footer {
    margin-top: 28px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    font-size: 12px;
    color: #81919e;
}


#bienvenida-app .hospital-stage-footer i {
    color: #0877b9;
}


/* =========================================================
   MODAL
   ========================================================= */

#bienvenida-app .hospital-explorer-modal .modal-dialog {
    width: calc(100% - 30px);
    max-width: 1050px;

    margin: 1.75rem auto;
}


#bienvenida-app .hospital-explorer-modal .modal-content {
    overflow: hidden;

    border: 0;
    border-radius: 28px;

    background: #ffffff;

    box-shadow:
        0 30px 80px rgba(16, 47, 72, 0.25);
}


/* =========================================================
   HERO DEL MODAL
   ========================================================= */

#bienvenida-app .hospital-modal-hero {
    position: relative;

    height: 300px;

    overflow: hidden;

    background: #17344d;
}


#bienvenida-app .hospital-modal-hero img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


#bienvenida-app .hospital-modal-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(10, 35, 52, 0.88) 0%,
            rgba(10, 35, 52, 0.58) 48%,
            rgba(10, 35, 52, 0.18) 100%
        );
}


#bienvenida-app .hospital-modal-hero-content {
    position: absolute;

    left: 40px;
    bottom: 34px;

    z-index: 2;

    max-width: 650px;

    color: #ffffff;
}


#bienvenida-app .hospital-modal-eyebrow {
    display: block;

    margin-bottom: 8px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.78);
}


#bienvenida-app .hospital-modal-hero-content h2 {
    margin: 0;

    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.05;
    font-weight: 700;

    color: #ffffff;
}


/* =========================================================
   BOTÓN CERRAR
   ========================================================= */

#bienvenida-app .hospital-modal-close {
    position: absolute;

    top: 20px;
    right: 20px;

    z-index: 5;

    width: 42px;
    height: 42px;

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

    padding: 0;

    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;

    background: rgba(10, 35, 52, 0.55);

    color: #ffffff;

    cursor: pointer;

    backdrop-filter: blur(6px);

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}


#bienvenida-app .hospital-modal-close:hover {
    background: rgba(10, 35, 52, 0.82);

    transform: rotate(4deg);
}


/* =========================================================
   CUERPO DEL MODAL
   ========================================================= */

#bienvenida-app .hospital-modal-body {
    display: flex;
    align-items: flex-start;
    gap: 25px;

    padding: 32px 40px 30px;

    background: #ffffff;
}


#bienvenida-app .hospital-modal-number {
    flex: 0 0 auto;

    width: 48px;
    height: 48px;

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

    border-radius: 14px;

    background: #edf7fc;
    color: #0877b9;
}


#bienvenida-app .hospital-modal-number span {
    font-size: 16px;
    font-weight: 800;
}


#bienvenida-app .hospital-modal-main {
    min-width: 0;
    flex: 1;
}


#bienvenida-app .hospital-modal-main h3 {
    margin: 0 0 8px;

    font-size: 25px;
    line-height: 1.2;
    font-weight: 700;

    color: #17344d;
}


#bienvenida-app .hospital-modal-main > p {
    max-width: 800px;

    margin: 0;

    font-size: 14px;
    line-height: 1.7;

    color: #687b8b;
}


/* =========================================================
   TARJETAS DEL MODAL
   ========================================================= */

#bienvenida-app .hospital-modal-cards {
    margin-top: 25px;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 12px;
}


#bienvenida-app .hospital-modal-card {
    min-width: 0;

    padding: 18px;

    border: 1px solid #e6edf2;
    border-radius: 16px;

    background: #fbfcfe;
}


#bienvenida-app .hospital-modal-card-icon {
    width: 36px;
    height: 36px;

    margin-bottom: 13px;

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

    border-radius: 10px;

    background: #edf7fc;
    color: #0877b9;

    font-size: 16px;
}


#bienvenida-app .hospital-modal-card strong {
    display: block;

    margin-bottom: 6px;

    font-size: 14px;
    line-height: 1.3;

    color: #17344d;
}


#bienvenida-app .hospital-modal-card p {
    margin: 0;

    font-size: 12px;
    line-height: 1.55;

    color: #718390;
}


/* =========================================================
   PIE DEL MODAL
   ========================================================= */

#bienvenida-app .hospital-modal-footer {
    min-height: 70px;

    padding: 16px 40px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    border-top: 1px solid #edf1f4;

    background: #fbfcfd;

    box-sizing: border-box;
}


#bienvenida-app .hospital-modal-footer > span {
    display: flex;
    align-items: center;
    gap: 8px;

    font-size: 12px;
    color: #81919e;
}


#bienvenida-app .hospital-modal-footer > span i {
    color: #0877b9;
}


/* =========================================================
   BOTÓN CONTINUAR
   ========================================================= */

#bienvenida-app .hospital-modal-button {
    flex: 0 0 auto;

    min-height: 42px;

    padding: 10px 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    border: 0;
    border-radius: 11px;

    background: #0877b9;
    color: #ffffff;

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


#bienvenida-app .hospital-modal-button:hover {
    background: #06689f;

    transform: translateY(-1px);

    box-shadow:
        0 6px 16px rgba(8, 119, 185, 0.20);
}


#bienvenida-app .hospital-modal-button i {
    font-size: 13px;
}


/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 991px) {

    #bienvenida-app .hospital-section {
        padding: 80px 25px 55px;
    }


    #bienvenida-app .hospital-explorer {
        grid-template-columns: 1fr;
    }


    #bienvenida-app .hospital-image,
    #bienvenida-app .hospital-info {
        min-height: auto;
    }


    #bienvenida-app .hospital-image,
    #bienvenida-app .hospital-image img {
        min-height: 400px;
    }


    #bienvenida-app .hospital-info {
        padding: 30px;
    }


    #bienvenida-app .hospital-modal-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}


/* =========================================================
   RESPONSIVE — MÓVIL
   ========================================================= */

@media (max-width: 767px) {

    #bienvenida-app .hospital-section {
        min-height: auto;

        padding: 70px 18px 45px;
    }


    #bienvenida-app .hospital-heading {
        margin-bottom: 28px;
    }


    #bienvenida-app .hospital-heading h2 {
        font-size: 32px;
    }


    #bienvenida-app .hospital-heading p {
        font-size: 14px;
    }


    #bienvenida-app .hospital-image,
    #bienvenida-app .hospital-image img {
        min-height: 300px;
    }


    #bienvenida-app .hospital-image-caption {
        left: 14px;
        right: 14px;
        bottom: 14px;

        padding: 12px 14px;
    }


    #bienvenida-app .hospital-image-caption small {
        display: none;
    }


    #bienvenida-app .hospital-info {
        padding: 25px 20px;
    }


    /*
       En móvil sí apilamos los tres botones.
       En escritorio permanecen horizontales.
    */

    #bienvenida-app .hospital-tabs {
        grid-template-columns: 1fr;
    }


    #bienvenida-app .hospital-tab {
        min-height: 82px;

        padding: 14px;

        display: grid;
        grid-template-columns: 38px minmax(0, 1fr) 26px;
        align-items: center;

        gap: 12px;
    }


    #bienvenida-app .hospital-tab-icon {
        grid-column: 1;
        grid-row: 1;
    }


    #bienvenida-app .hospital-tab-text {
        grid-column: 2;
        grid-row: 1;
    }


    #bienvenida-app .hospital-tab-arrow {
        position: static;

        grid-column: 3;
        grid-row: 1;
    }


    /* MODAL */

    #bienvenida-app .hospital-explorer-modal .modal-dialog {
        width: calc(100% - 20px);

        margin: 10px auto;
    }


    #bienvenida-app .hospital-explorer-modal .modal-content {
        border-radius: 20px;
    }


    #bienvenida-app .hospital-modal-hero {
        height: 240px;
    }


    #bienvenida-app .hospital-modal-hero-content {
        left: 24px;
        right: 60px;
        bottom: 25px;
    }


    #bienvenida-app .hospital-modal-hero-content h2 {
        font-size: 30px;
    }


    #bienvenida-app .hospital-modal-close {
        top: 15px;
        right: 15px;
    }


    #bienvenida-app .hospital-modal-body {
        flex-direction: column;
        gap: 15px;

        padding: 25px 22px;
    }


    #bienvenida-app .hospital-modal-number {
        width: 42px;
        height: 42px;
    }


    #bienvenida-app .hospital-modal-main h3 {
        font-size: 22px;
    }


    #bienvenida-app .hospital-modal-cards {
        grid-template-columns: 1fr;
    }


    #bienvenida-app .hospital-modal-footer {
        padding: 14px 22px;

        align-items: stretch;
        flex-direction: column;
    }


    #bienvenida-app .hospital-modal-button {
        width: 100%;
    }

}


/* =========================================================
   RESPONSIVE — MÓVIL PEQUEÑO
   ========================================================= */

@media (max-width: 480px) {

    #bienvenida-app .hospital-section {
        padding-left: 14px;
        padding-right: 14px;
    }


    #bienvenida-app .hospital-info-intro {
        gap: 11px;
    }


    #bienvenida-app .hospital-info-icon {
        width: 42px;
        height: 42px;

        font-size: 18px;
    }


    #bienvenida-app .hospital-info-intro h3 {
        font-size: 22px;
    }


    #bienvenida-app .hospital-image,
    #bienvenida-app .hospital-image img {
        min-height: 260px;
    }


    #bienvenida-app .hospital-modal-hero {
        height: 220px;
    }


    #bienvenida-app .hospital-modal-hero-content {
        left: 20px;
        bottom: 20px;
    }


    #bienvenida-app .hospital-modal-hero-content h2 {
        font-size: 26px;
    }

}




/* =====================================================
   EQUIPO TIC — NUEVO DISEÑO
   -----------------------------------------------------
   Este bloque reemplaza visualmente el diseño anterior.
   No eliminar todavía el CSS antiguo de Equipo TIC.
   ===================================================== */

#bienvenida-app .tic-team-section {
    position: relative;
    overflow: hidden;

    padding: 110px 20px 100px;

    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(13, 110, 253, 0.06),
            transparent 32%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(8, 126, 164, 0.06),
            transparent 32%
        ),
        #ffffff;
}


/* -----------------------------------------------------
   DECORACIÓN TECNOLÓGICA
   ----------------------------------------------------- */

#bienvenida-app .tic-team-section::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    top: -250px;
    right: -220px;

    border-radius: 50%;

    border: 1px solid rgba(13, 110, 253, 0.08);

    pointer-events: none;
}


#bienvenida-app .tic-team-section::after {
    content: "";

    position: absolute;

    width: 320px;
    height: 320px;

    bottom: -180px;
    left: -160px;

    border-radius: 50%;

    border: 1px solid rgba(8, 126, 164, 0.08);

    pointer-events: none;
}


/* -----------------------------------------------------
   ENCABEZADO
   ----------------------------------------------------- */

#bienvenida-app .tic-team-heading {
    position: relative;
    z-index: 2;

    max-width: 760px;

    margin: 0 auto 55px;

    text-align: center;
}


#bienvenida-app .tic-team-eyebrow {
    display: inline-flex;
    align-items: center;

    margin-bottom: 16px;

    color: #0d6efd;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 3px;
    text-transform: uppercase;
}


#bienvenida-app .tic-team-eyebrow::before,
#bienvenida-app .tic-team-eyebrow::after {
    content: "";

    width: 24px;
    height: 1px;

    margin: 0 10px;

    background: rgba(13, 110, 253, 0.35);
}


#bienvenida-app .tic-team-heading h2 {
    margin: 0 0 18px;

    color: #172033;

    font-size: clamp(34px, 5vw, 52px);
    font-weight: 800;

    letter-spacing: -1.5px;
}


#bienvenida-app .tic-team-intro {
    max-width: 680px;

    margin: 0 auto;

    color: #667085;

    font-size: 16px;
    line-height: 1.7;
}


/* -----------------------------------------------------
   GRID
   ----------------------------------------------------- */

#bienvenida-app .tic-team-grid {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1120px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 20px;
}


/* -----------------------------------------------------
   TARJETAS
   ----------------------------------------------------- */

#bienvenida-app .tic-team-card {
    position: relative;

    display: block;

    width: 100%;
    min-height: 330px;

    padding: 0;

    overflow: hidden;

    border: 0;
    border-radius: 22px;

    background: #172033;

    box-shadow:
        0 12px 35px rgba(16, 24, 40, 0.08);

    color: #ffffff;

    text-align: left;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


#bienvenida-app .tic-team-card:hover {
    transform: translateY(-7px);

    box-shadow:
        0 22px 50px rgba(16, 24, 40, 0.16);
}


#bienvenida-app .tic-team-card:focus-visible {
    outline: 3px solid rgba(13, 110, 253, 0.35);
    outline-offset: 4px;
}


/* -----------------------------------------------------
   IMAGEN
   ----------------------------------------------------- */

#bienvenida-app .tic-team-card-image {
    position: absolute;

    inset: 0;

    overflow: hidden;
}


#bienvenida-app .tic-team-card-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.6s ease;
}


#bienvenida-app .tic-team-card:hover
.tic-team-card-image img {
    transform: scale(1.07);
}


/* -----------------------------------------------------
   CAPA OSCURA
   ----------------------------------------------------- */

#bienvenida-app .tic-team-card-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(12, 24, 42, 0.10) 0%,
            rgba(12, 24, 42, 0.22) 35%,
            rgba(12, 24, 42, 0.92) 100%
        );

    transition:
        background 0.35s ease;
}


#bienvenida-app .tic-team-card:hover
.tic-team-card-overlay {
    background:
        linear-gradient(
            180deg,
            rgba(13, 110, 253, 0.08) 0%,
            rgba(12, 24, 42, 0.28) 35%,
            rgba(12, 24, 42, 0.95) 100%
        );
}


/* -----------------------------------------------------
   CONTENIDO TARJETA
   ----------------------------------------------------- */

#bienvenida-app .tic-team-card-content {
    position: relative;
    z-index: 2;

    min-height: 330px;

    padding: 25px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


/* -----------------------------------------------------
   PARTE SUPERIOR
   ----------------------------------------------------- */

#bienvenida-app .tic-team-card-top {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;
}


#bienvenida-app .tic-team-card-number {
    position: static;

    color: rgba(255, 255, 255, 0.55);

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

    letter-spacing: 1px;
}


#bienvenida-app .tic-team-card-icon {
    width: 48px;
    height: 48px;

    margin: 0;

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

    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 15px;

    background: rgba(255, 255, 255, 0.12);

    color: #ffffff;

    font-size: 21px;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    transition:
        transform 0.35s ease,
        background 0.35s ease;
}


#bienvenida-app .tic-team-card:hover
.tic-team-card-icon {
    transform: translateY(-2px) scale(1.06);

    background:
        rgba(13, 110, 253, 0.65);
}


/* -----------------------------------------------------
   INFORMACIÓN
   ----------------------------------------------------- */

#bienvenida-app .tic-team-card-info {
    max-width: 95%;
}


#bienvenida-app .tic-team-card-label {
    display: block;

    margin-bottom: 8px;

    color: rgba(255, 255, 255, 0.62);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1.8px;

    text-transform: uppercase;
}


#bienvenida-app .tic-team-card h3 {
    margin: 0 0 10px;

    color: #ffffff;

    font-size: 22px;
    line-height: 1.2;

    font-weight: 750;

    letter-spacing: -0.3px;
}


#bienvenida-app .tic-team-card p {
    margin: 0 0 18px;

    color: rgba(255, 255, 255, 0.76);

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


/* -----------------------------------------------------
   ACCIÓN
   ----------------------------------------------------- */

#bienvenida-app .tic-team-card-action {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #ffffff;

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

    letter-spacing: 0.2px;
}


#bienvenida-app .tic-team-card-action i {
    transition:
        transform 0.25s ease;
}


#bienvenida-app .tic-team-card:hover
.tic-team-card-action i {
    transform: translateX(5px);
}


/* -----------------------------------------------------
   MESA DE AYUDA — DESTACADA
   ----------------------------------------------------- */

#bienvenida-app .tic-team-card-featured {
    background:
        linear-gradient(
            145deg,
            #0d6efd,
            #087ea4
        );

    box-shadow:
        0 16px 40px rgba(13, 110, 253, 0.20);
}


#bienvenida-app .tic-team-card-featured
.tic-team-card-overlay {
    background:
        linear-gradient(
            180deg,
            rgba(7, 41, 74, 0.05),
            rgba(7, 41, 74, 0.75)
        );
}


#bienvenida-app .tic-team-card-featured:hover {
    box-shadow:
        0 25px 55px rgba(13, 110, 253, 0.28);
}


#bienvenida-app .tic-team-card-featured
.tic-team-card-icon {
    background:
        rgba(255, 255, 255, 0.16);

    border-color:
        rgba(255, 255, 255, 0.25);
}


/* -----------------------------------------------------
   FOOTER
   ----------------------------------------------------- */

#bienvenida-app .tic-team-footer {
    position: relative;
    z-index: 2;

    max-width: 900px;

    margin: 50px auto 0;

    padding: 22px 26px;

    display: flex;
    align-items: center;

    gap: 18px;

    border:
        1px solid #e5eaf0;

    border-radius: 18px;

    background:
        rgba(248, 250, 252, 0.88);
}


#bienvenida-app .tic-team-footer-icon {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

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

    border-radius: 14px;

    background: #ffffff;

    color: #0d6efd;

    font-size: 20px;

    box-shadow:
        0 5px 15px rgba(16, 24, 40, 0.05);
}


#bienvenida-app .tic-team-footer strong {
    display: block;

    margin-bottom: 3px;

    color: #172033;

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


#bienvenida-app .tic-team-footer span {
    display: block;

    color: #667085;

    font-size: 12px;
    line-height: 1.5;
}


/* =====================================================
   MODAL EQUIPO TIC
   ===================================================== */

#bienvenida-app .tic-team-modal {
    overflow: hidden;

    border: 0;
    border-radius: 24px;

    background: #ffffff;

    box-shadow:
        0 30px 80px rgba(16, 24, 40, 0.22);
}


/* -----------------------------------------------------
   HERO MODAL
   ----------------------------------------------------- */

#bienvenida-app .tic-team-modal-hero {
    position: relative;

    height: 330px;

    overflow: hidden;

    background: #172033;
}


#bienvenida-app .tic-team-modal-hero img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


#bienvenida-app .tic-team-modal-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(12, 24, 42, 0.08) 0%,
            rgba(12, 24, 42, 0.30) 45%,
            rgba(12, 24, 42, 0.90) 100%
        );
}


#bienvenida-app .tic-team-modal-hero-content {
    position: absolute;

    left: 42px;
    right: 42px;
    bottom: 34px;
}


#bienvenida-app .tic-team-modal-eyebrow {
    display: block;

    margin-bottom: 9px;

    color: rgba(255, 255, 255, 0.72);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2.5px;

    text-transform: uppercase;
}


#bienvenida-app .tic-team-modal-hero h2 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(30px, 4vw, 44px);

    line-height: 1.1;

    font-weight: 800;

    letter-spacing: -1px;
}


/* -----------------------------------------------------
   CERRAR
   ----------------------------------------------------- */

#bienvenida-app .tic-team-modal-close {
    position: absolute;

    top: 22px;
    right: 22px;

    width: 42px;
    height: 42px;

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

    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;

    background:
        rgba(12, 24, 42, 0.38);

    color: #ffffff;

    font-size: 15px;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    cursor: pointer;

    transition:
        background 0.25s ease,
        transform 0.25s ease;
}


#bienvenida-app .tic-team-modal-close:hover {
    background:
        rgba(12, 24, 42, 0.70);

    transform: rotate(90deg);
}


/* -----------------------------------------------------
   CUERPO
   ----------------------------------------------------- */

#bienvenida-app .tic-team-modal-body {
    position: relative;

    padding: 40px 42px 35px;
}


#bienvenida-app .tic-team-modal-number {
    position: absolute;

    top: 38px;
    right: 42px;

    color: #d7dde6;

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

    letter-spacing: 1px;
}


#bienvenida-app .tic-team-modal-main {
    width: 100%;
    max-width: none;
}


#bienvenida-app .tic-team-modal-section {
    display: block;

    margin-bottom: 8px;

    color: #0d6efd;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;
}


#bienvenida-app .tic-team-modal-main h3 {
    margin: 0 0 15px;

    color: #172033;

    font-size: 27px;
    line-height: 1.25;

    font-weight: 750;
}


#bienvenida-app .tic-team-modal-main p {
    margin: 0;

    color: #667085;

    font-size: 15px;
    line-height: 1.75;
}


/* -----------------------------------------------------
   INFORMACIÓN DINÁMICA
   ----------------------------------------------------- */

#bienvenida-app .tic-team-modal-info {
    margin-top: 28px;

    padding-top: 25px;

    border-top:
        1px solid #edf0f3;

    color: #667085;

    font-size: 13px;
    line-height: 1.65;
}


#bienvenida-app .tic-team-modal-info-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;
}


#bienvenida-app .tic-team-modal-info-item {
    padding: 17px 18px;

    border:
        1px solid #e8edf3;

    border-radius: 15px;

    background: #f8fafc;
}


#bienvenida-app .tic-team-modal-info-item strong {
    display: block;

    margin-bottom: 5px;

    color: #172033;

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


#bienvenida-app .tic-team-modal-info-item span {
    color: #667085;

    font-size: 12px;
    line-height: 1.5;
}


/* -----------------------------------------------------
   FOOTER MODAL
   ----------------------------------------------------- */

#bienvenida-app .tic-team-modal-footer {
    padding: 17px 42px;

    border-top:
        1px solid #edf0f3;

    background: #f8fafc;

    color: #98a2b3;

    font-size: 11px;
}


#bienvenida-app .tic-team-modal-footer i {
    margin-right: 5px;

    color: #0d6efd;
}


/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 991px) {

    #bienvenida-app .tic-team-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 767px) {

    #bienvenida-app .tic-team-section {
        padding: 85px 18px 80px;
    }


    #bienvenida-app .tic-team-heading {
        margin-bottom: 40px;
    }


    #bienvenida-app .tic-team-heading h2 {
        font-size: 34px;
    }


    #bienvenida-app .tic-team-intro {
        font-size: 14px;
    }


    #bienvenida-app .tic-team-grid {
        grid-template-columns: 1fr;

        gap: 16px;
    }


    #bienvenida-app .tic-team-card {
        min-height: 300px;
    }


    #bienvenida-app .tic-team-card-content {
        min-height: 300px;

        padding: 22px;
    }


    #bienvenida-app .tic-team-card h3 {
        font-size: 21px;
    }


    #bienvenida-app .tic-team-modal-hero {
        height: 270px;
    }


    #bienvenida-app .tic-team-modal-hero-content {
        left: 25px;
        right: 25px;
        bottom: 25px;
    }


    #bienvenida-app .tic-team-modal-body {
        padding: 30px 25px;
    }


    #bienvenida-app .tic-team-modal-number {
        top: 29px;
        right: 25px;
    }


    #bienvenida-app .tic-team-modal-info-grid {
        grid-template-columns: 1fr;
    }


    #bienvenida-app .tic-team-modal-footer {
        padding: 15px 25px;
    }


    #bienvenida-app .tic-team-footer {
        align-items: flex-start;

        padding: 20px;
    }

}


@media (max-width: 576px) {

    #bienvenida-app .tic-team-section {
        padding-left: 15px;
        padding-right: 15px;
    }


    #bienvenida-app .tic-team-heading h2 {
        font-size: 31px;
    }


    #bienvenida-app .tic-team-card {
        min-height: 280px;

        border-radius: 19px;
    }


    #bienvenida-app .tic-team-card-content {
        min-height: 280px;

        padding: 20px;
    }


    #bienvenida-app .tic-team-card-icon {
        width: 44px;
        height: 44px;

        border-radius: 13px;

        font-size: 19px;
    }


    #bienvenida-app .tic-team-card h3 {
        font-size: 20px;
    }


    #bienvenida-app .tic-team-modal-hero {
        height: 240px;
    }


    #bienvenida-app .tic-team-modal-close {
        top: 15px;
        right: 15px;
    }

}









/* =========================================================
   MISIÓN SEGURIDAD TIC
   EXPERIENCIA GAMIFICADA
   DISEÑO INSTITUCIONAL CLARO
   ========================================================= */


/* =========================================================
   VARIABLES
   ========================================================= */

#seguridad {

    --sec-primary: #005b8f;
    --sec-primary-dark: #00476f;
    --sec-primary-light: #eaf5fa;

    --sec-orange: #f5a623;
    --sec-orange-dark: #dc8d0c;
    --sec-orange-light: #fff4df;

    --sec-bg: #f4f7fa;
    --sec-surface: #ffffff;
    --sec-surface-soft: #f8fafc;

    --sec-border: #dfe6ec;
    --sec-border-light: #e9eef2;

    --sec-text: #263746;
    --sec-text-soft: #526473;
    --sec-muted: #7b8995;

    --sec-green: #198754;
    --sec-green-bg: #eaf7f0;

    --sec-red: #dc3545;
    --sec-red-bg: #fff0f1;

    --sec-shadow:
        0 12px 35px rgba(35, 58, 75, .08);

    --sec-shadow-hover:
        0 16px 40px rgba(35, 58, 75, .13);


    position: relative;

    width: 100% !important;

    /*
     * Ocupa como mínimo toda la pantalla disponible.
     * Evita que aparezca inmediatamente la siguiente etapa.
     */
    min-height: calc(100vh - 66px) !important;
    min-height: calc(100dvh - 66px) !important;

    margin: 0 !important;

    padding: 0 24px !important;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(0, 91, 143, .045),
            transparent 40%
        ),
        linear-gradient(
            180deg,
            #f8fafc 0%,
            #f2f6f9 100%
        ) !important;

    color: var(--sec-text) !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
}


/* =========================================================
   CONTENEDOR PRINCIPAL
   ========================================================= */

#seguridad .app-section-inner {

    width: 100% !important;

    max-width: 1180px !important;

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

    margin: 0 auto !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    position: relative !important;

    box-sizing: border-box !important;
}


/* =========================================================
   PANTALLAS
   ========================================================= */

#seguridad .security-screen {

    width: 100% !important;

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

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: center !important;

    box-sizing: border-box !important;
}


/* =========================================================
   PANTALLA INICIAL
   ========================================================= */

#seguridad .security-start {

    text-align: center !important;

    max-width: 1000px !important;

    margin: auto !important;

    padding: 45px 20px !important;

    background: transparent !important;
}


#seguridad .security-start-content {

    position: relative !important;

    z-index: 2 !important;
}


/* =========================================================
   EYEBROW
   ========================================================= */

#seguridad .app-section-eyebrow {

    margin-bottom: 14px !important;

    color: var(--sec-primary) !important;

    font-size: .78rem !important;

    font-weight: 800 !important;

    letter-spacing: 2px !important;

    text-transform: uppercase !important;
}


/* =========================================================
   ETIQUETA MISIÓN
   ========================================================= */

#seguridad .security-mission-label {

    display: inline-flex !important;

    align-items: center !important;

    gap: 7px !important;

    margin-bottom: 18px !important;

    padding: 7px 13px !important;

    border-radius: 999px !important;

    background: var(--sec-primary-light) !important;

    border: 1px solid #d6e9f2 !important;

    color: var(--sec-primary) !important;

    font-size: .78rem !important;

    font-weight: 700 !important;
}


#seguridad .security-mission-label i {

    font-size: .9rem !important;
}


/* =========================================================
   TÍTULO PRINCIPAL
   ========================================================= */

#seguridad .security-start h2 {

    margin: 0 0 18px !important;

    font-size: clamp(2.25rem, 4vw, 3.5rem) !important;

    line-height: 1.05 !important;

    font-weight: 800 !important;

    letter-spacing: -1.5px !important;

    color: #1d2b36 !important;
}


#seguridad .security-start h2 span {

    color: var(--sec-orange) !important;
}


/* =========================================================
   DESCRIPCIÓN
   ========================================================= */

#seguridad .security-start p {

    max-width: 680px !important;

    margin: 0 auto 28px !important;

    font-size: 1.05rem !important;

    line-height: 1.65 !important;

    color: var(--sec-text-soft) !important;
}


/* =========================================================
   BOTÓN PRINCIPAL
   ========================================================= */

#seguridad .security-start-button {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 9px !important;

    min-height: 52px !important;

    padding: 0 30px !important;

    border-radius: 12px !important;

    border: 1px solid var(--sec-orange-dark) !important;

    background: var(--sec-orange) !important;

    color: #ffffff !important;

    font-size: .95rem !important;

    font-weight: 800 !important;

    cursor: pointer !important;

    box-shadow:
        0 8px 22px rgba(245, 166, 35, .22) !important;

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease !important;
}


#seguridad .security-start-button:hover {

    background: var(--sec-orange-dark) !important;

    transform: translateY(-2px) !important;

    box-shadow:
        0 12px 28px rgba(245, 166, 35, .28) !important;
}


/* =========================================================
   INFORMACIÓN BAJO BOTÓN
   ========================================================= */

#seguridad .security-start-note {

    display: flex !important;

    justify-content: center !important;

    align-items: center !important;

    gap: 6px !important;

    margin-top: 11px !important;

    color: var(--sec-muted) !important;

    font-size: .82rem !important;
}


/* =========================================================
   ESCUDO
   ========================================================= */

#seguridad .security-start-shield {

    position: relative !important;

    width: 180px !important;

    height: 180px !important;

    margin: 26px auto 0 !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;
}


#seguridad .security-main-shield {

    position: relative !important;

    z-index: 2 !important;

    width: 112px !important;

    height: 112px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    border-radius: 30px !important;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #eef5f8
        ) !important;

    border: 1px solid #d8e5eb !important;

    box-shadow:
        0 12px 35px rgba(0, 91, 143, .12) !important;
}


#seguridad .security-main-shield i {

    font-size: 55px !important;

    color: var(--sec-primary) !important;
}


/* =========================================================
   ÓRBITAS
   ========================================================= */

#seguridad .security-orbit {

    position: absolute !important;

    border: 1px solid rgba(0, 91, 143, .12) !important;

    border-radius: 50% !important;

    pointer-events: none !important;
}


#seguridad .security-orbit-1 {

    width: 150px !important;

    height: 150px !important;
}


#seguridad .security-orbit-2 {

    width: 180px !important;

    height: 180px !important;

    border-color: rgba(245, 166, 35, .14) !important;
}


/* =========================================================
   XP BADGE
   ========================================================= */

#seguridad .security-xp-badge {

    position: absolute !important;

    right: -2px !important;

    bottom: 8px !important;

    z-index: 4 !important;

    min-width: 65px !important;

    padding: 7px 10px !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    border-radius: 10px !important;

    background: #ffffff !important;

    border: 1px solid var(--sec-border) !important;

    box-shadow:
        0 7px 20px rgba(35, 58, 75, .12) !important;
}


#seguridad .security-xp-badge strong {

    color: var(--sec-primary) !important;

    font-size: .9rem !important;

    line-height: 1 !important;
}


#seguridad .security-xp-badge span {

    margin-top: 3px !important;

    color: var(--sec-muted) !important;

    font-size: .65rem !important;

    font-weight: 700 !important;
}


/* =========================================================
   JUEGO
   ========================================================= */

#seguridad .security-game {

    width: 100% !important;

    max-width: 1060px !important;

    min-height: 0 !important;

    margin: auto !important;

    padding: 30px 0 45px !important;

    background: transparent !important;

    justify-content: flex-start !important;

    overflow: visible !important;
}


/* =========================================================
   HEADER DEL JUEGO
   ========================================================= */

#seguridad .security-game-header {

    width: 100% !important;

    display: grid !important;

    grid-template-columns: 1fr auto 1fr !important;

    align-items: center !important;

    gap: 20px !important;

    margin-bottom: 20px !important;
}


#seguridad .security-game-kicker {

    display: block !important;

    margin-bottom: 3px !important;

    color: var(--sec-primary) !important;

    font-size: .7rem !important;

    font-weight: 800 !important;

    letter-spacing: 1.4px !important;
}


#seguridad .security-game-header strong {

    color: #263746 !important;

    font-size: 1rem !important;
}


/* =========================================================
   PROGRESO
   ========================================================= */

#seguridad .security-progress {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 7px !important;
}


#seguridad .security-progress-step {

    width: 48px !important;

    height: 5px !important;

    border-radius: 999px !important;

    background: #dce4e9 !important;

    transition:
        background .25s ease,
        transform .25s ease !important;
}


#seguridad .security-progress-step.active {

    background: var(--sec-orange) !important;

    transform: scaleY(1.25) !important;
}


#seguridad .security-progress-step.completed {

    background: var(--sec-primary) !important;
}


/* =========================================================
   SCORE
   ========================================================= */

#seguridad .security-score {

    justify-self: end !important;

    display: flex !important;

    align-items: center !important;

    gap: 6px !important;

    padding: 7px 11px !important;

    border-radius: 9px !important;

    background: #ffffff !important;

    border: 1px solid var(--sec-border) !important;

    color: var(--sec-primary) !important;

    font-size: .85rem !important;

    font-weight: 800 !important;
}


#seguridad .security-score i {

    color: var(--sec-orange) !important;
}


/* =========================================================
   TARJETA DE MISIÓN
   ========================================================= */

#seguridad .security-mission {

    width: 100% !important;

    padding: 30px !important;

    border-radius: 22px !important;

    background: #ffffff !important;

    border: 1px solid var(--sec-border) !important;

    box-shadow: var(--sec-shadow) !important;

    box-sizing: border-box !important;
}


/* =========================================================
   ENCABEZADO DE MISIÓN
   ========================================================= */

#seguridad .security-mission-intro {

    display: flex !important;

    align-items: center !important;

    gap: 15px !important;

    margin-bottom: 22px !important;
}


#seguridad .security-mission-icon {

    width: 52px !important;

    height: 52px !important;

    flex: 0 0 52px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    border-radius: 14px !important;

    background: var(--sec-primary-light) !important;

    border: 1px solid #d6e9f2 !important;
}


#seguridad .security-mission-icon i {

    font-size: 24px !important;

    color: var(--sec-primary) !important;
}


#seguridad .security-mission-intro span {

    display: block !important;

    margin-bottom: 3px !important;

    color: var(--sec-orange-dark) !important;

    font-size: .7rem !important;

    font-weight: 800 !important;

    letter-spacing: 1.2px !important;
}


#seguridad .security-mission-intro h2 {

    margin: 0 !important;

    color: #1d2b36 !important;

    font-size: clamp(1.45rem, 2.3vw, 2rem) !important;

    line-height: 1.15 !important;

    font-weight: 800 !important;
}


/* =========================================================
   ESCENARIO GENERAL
   ========================================================= */

#seguridad .security-scenario,
#seguridad .security-desktop-scenario,
#seguridad .security-chat-scenario {

    width: 100% !important;

    margin-bottom: 24px !important;

    border-radius: 16px !important;

    background: var(--sec-surface-soft) !important;

    border: 1px solid var(--sec-border-light) !important;

    box-sizing: border-box !important;
}


/* =========================================================
   CORREO FALSO
   ========================================================= */

#seguridad .security-email-window {

    width: 100% !important;

    overflow: hidden !important;

    border-radius: 16px !important;

    background: #ffffff !important;

    border: 1px solid #dce4e9 !important;

    box-shadow:
        0 8px 25px rgba(35, 58, 75, .07) !important;
}


#seguridad .security-email-top {

    height: 42px !important;

    padding: 0 16px !important;

    display: flex !important;

    align-items: center !important;

    gap: 12px !important;

    background: #f2f5f7 !important;

    border-bottom: 1px solid var(--sec-border) !important;

    color: var(--sec-text-soft) !important;

    font-size: .78rem !important;

    font-weight: 600 !important;
}


#seguridad .security-email-dots {

    display: flex !important;

    gap: 5px !important;
}


#seguridad .security-email-dots span {

    width: 7px !important;

    height: 7px !important;

    border-radius: 50% !important;

    background: #b7c2ca !important;
}


#seguridad .security-email-body {

    padding: 22px !important;
}


#seguridad .security-email-from {

    display: flex !important;

    align-items: center !important;

    gap: 11px !important;

    margin-bottom: 18px !important;
}


#seguridad .security-avatar {

    width: 40px !important;

    height: 40px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    border-radius: 50% !important;

    background: var(--sec-primary) !important;

    color: #ffffff !important;

    font-size: .72rem !important;

    font-weight: 800 !important;
}


#seguridad .security-email-from strong {

    display: block !important;

    color: #263746 !important;

    font-size: .9rem !important;
}


#seguridad .security-email-from small {

    display: block !important;

    margin-top: 2px !important;

    color: var(--sec-muted) !important;

    font-size: .72rem !important;
}


#seguridad .security-email-subject {

    margin-bottom: 12px !important;

    color: #263746 !important;

    font-size: .95rem !important;

    font-weight: 800 !important;
}


#seguridad .security-email-body p {

    margin: 0 0 11px !important;

    color: var(--sec-text-soft) !important;

    font-size: .88rem !important;

    line-height: 1.55 !important;
}


#seguridad .security-fake-button {

    margin-top: 5px !important;

    padding: 10px 18px !important;

    border: 0 !important;

    border-radius: 7px !important;

    background: #f0a020 !important;

    color: #ffffff !important;

    font-size: .75rem !important;

    font-weight: 800 !important;
}


/* =========================================================
   ESCENARIO COMPUTADOR / RCE
   ========================================================= */

#seguridad .security-desktop-scenario {

    min-height: 220px !important;

    padding: 28px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 45px !important;

    overflow: hidden !important;
}


#seguridad .security-monitor {

    width: 360px !important;

    max-width: 60% !important;

    padding: 9px !important;

    border-radius: 12px !important;

    background: #263746 !important;

    box-shadow:
        0 12px 25px rgba(35, 58, 75, .18) !important;
}


#seguridad .security-monitor-screen {

    position: relative !important;

    min-height: 175px !important;

    overflow: hidden !important;

    border-radius: 7px !important;

    background: #f7fafc !important;

    border: 1px solid #cad5dc !important;
}


#seguridad .security-rce-header {

    height: 34px !important;

    padding: 0 11px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    background: var(--sec-primary) !important;

    color: #ffffff !important;

    font-size: .68rem !important;

    font-weight: 700 !important;
}


#seguridad .security-patient-data {

    padding: 17px !important;
}


#seguridad .security-patient-data small {

    display: block !important;

    color: var(--sec-muted) !important;

    font-size: .6rem !important;

    font-weight: 800 !important;

    letter-spacing: 1px !important;
}


#seguridad .security-patient-data strong {

    display: block !important;

    margin-top: 4px !important;

    color: var(--sec-text) !important;

    font-size: .85rem !important;
}


#seguridad .security-data-lines {

    margin-top: 13px !important;
}


#seguridad .security-data-lines span {

    display: block !important;

    width: 75% !important;

    height: 6px !important;

    margin-bottom: 7px !important;

    border-radius: 4px !important;

    background: #dce5ea !important;
}


#seguridad .security-data-lines span:nth-child(2) {

    width: 60% !important;
}


#seguridad .security-data-lines span:nth-child(3) {

    width: 70% !important;
}


#seguridad .security-mouse-cursor {

    position: absolute !important;

    right: 24% !important;

    bottom: 22% !important;

    color: var(--sec-primary) !important;

    font-size: 17px !important;
}


#seguridad .security-person-leaving {

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    gap: 9px !important;

    color: var(--sec-text-soft) !important;

    text-align: center !important;
}


#seguridad .security-person-leaving i {

    font-size: 46px !important;

    color: var(--sec-orange) !important;
}


#seguridad .security-person-leaving span {

    max-width: 150px !important;

    font-size: .78rem !important;

    font-style: italic !important;
}


/* =========================================================
   CHAT
   ========================================================= */

#seguridad .security-chat-scenario {

    padding: 22px !important;

    display: flex !important;

    flex-direction: column !important;

    gap: 12px !important;

    background:
        linear-gradient(
            180deg,
            #f3f7fa,
            #edf3f7
        ) !important;
}


#seguridad .security-chat-bubble {

    display: flex !important;

    align-items: flex-start !important;

    gap: 10px !important;

    max-width: 75% !important;

    padding: 12px 15px !important;

    border-radius: 14px !important;

    background: #ffffff !important;

    border: 1px solid #dce5ea !important;

    box-shadow:
        0 4px 12px rgba(35, 58, 75, .05) !important;
}


#seguridad .security-chat-avatar {

    width: 32px !important;

    height: 32px !important;

    flex: 0 0 32px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    border-radius: 50% !important;

    background: var(--sec-primary-light) !important;

    color: var(--sec-primary) !important;
}


#seguridad .security-chat-bubble small {

    display: block !important;

    margin-bottom: 3px !important;

    color: var(--sec-muted) !important;

    font-size: .67rem !important;

    font-weight: 700 !important;
}


#seguridad .security-chat-bubble p {

    margin: 0 !important;

    color: var(--sec-text) !important;

    font-size: .83rem !important;

    line-height: 1.45 !important;
}


/* =========================================================
   PREGUNTA
   ========================================================= */

#seguridad .security-question {

    margin-top: 4px !important;
}


#seguridad .security-question h3 {

    margin: 0 0 12px !important;

    color: #263746 !important;

    font-size: 1.05rem !important;

    font-weight: 800 !important;
}


/* =========================================================
   RESPUESTAS
   ========================================================= */

#seguridad .security-answers {

    display: flex !important;

    flex-direction: column !important;

    gap: 9px !important;
}


#seguridad .security-answer {

    width: 100% !important;

    min-height: 54px !important;

    margin: 0 !important;

    padding: 12px 16px !important;

    display: flex !important;

    align-items: center !important;

    gap: 13px !important;

    border-radius: 11px !important;

    border: 1px solid var(--sec-border) !important;

    background: #ffffff !important;

    color: var(--sec-text) !important;

    text-align: left !important;

    font-size: .86rem !important;

    line-height: 1.35 !important;

    cursor: pointer !important;

    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease,
        box-shadow .18s ease !important;
}


#seguridad .security-answer:hover {

    background: #f8fbfd !important;

    border-color: #b8ceda !important;

    transform: translateX(3px) !important;

    box-shadow:
        0 4px 12px rgba(35, 58, 75, .06) !important;
}


#seguridad .security-answer > span {

    width: 28px !important;

    height: 28px !important;

    flex: 0 0 28px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    border-radius: 8px !important;

    background: #edf2f5 !important;

    color: var(--sec-primary) !important;

    font-size: .75rem !important;

    font-weight: 800 !important;
}


/* =========================================================
   RESPUESTA CORRECTA
   ========================================================= */

#seguridad .security-answer.correct {

    background: var(--sec-green-bg) !important;

    border-color: #8bd2ad !important;

    color: #155d3a !important;
}


#seguridad .security-answer.correct > span {

    background: var(--sec-green) !important;

    color: #ffffff !important;
}


/* =========================================================
   RESPUESTA INCORRECTA
   ========================================================= */

#seguridad .security-answer.incorrect {

    background: var(--sec-red-bg) !important;

    border-color: #efabb2 !important;

    color: #8d2530 !important;
}


#seguridad .security-answer.incorrect > span {

    background: var(--sec-red) !important;

    color: #ffffff !important;
}


/* =========================================================
   FEEDBACK
   ========================================================= */

#seguridad .security-feedback {

    position: fixed !important;

    right: 25px !important;

    bottom: 25px !important;

    z-index: 99999 !important;

    width: min(430px, calc(100vw - 40px)) !important;

    padding: 17px 20px !important;

    display: flex !important;

    align-items: flex-start !important;

    gap: 13px !important;

    border-radius: 14px !important;

    background: #ffffff !important;

    border: 1px solid var(--sec-border) !important;

    box-shadow:
        0 15px 45px rgba(35, 58, 75, .16) !important;

    animation:
        securityToastIn .3s ease-out !important;

    overflow: hidden !important;
}


#seguridad .security-feedback-icon {

    flex: 0 0 38px !important;

    width: 38px !important;

    height: 38px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    border-radius: 10px !important;

    background: #f1f4f6 !important;
}


#seguridad .security-feedback-icon i {

    font-size: 19px !important;
}


#seguridad .security-feedback strong {

    display: block !important;

    margin-bottom: 3px !important;

    color: #263746 !important;

    font-size: .9rem !important;
}


#seguridad .security-feedback span {

    display: block !important;

    color: var(--sec-text-soft) !important;

    font-size: .82rem !important;

    line-height: 1.45 !important;
}


#seguridad .security-feedback.success {

    border-color: #9bd6b8 !important;
}


#seguridad .security-feedback.success
.security-feedback-icon {

    background: var(--sec-green-bg) !important;
}


#seguridad .security-feedback.success
.security-feedback-icon i {

    color: var(--sec-green) !important;
}


#seguridad .security-feedback.warning {

    border-color: #efb0b6 !important;
}


#seguridad .security-feedback.warning
.security-feedback-icon {

    background: var(--sec-red-bg) !important;
}


#seguridad .security-feedback.warning
.security-feedback-icon i {

    color: var(--sec-red) !important;
}


/* =========================================================
   BARRA DE TIEMPO
   ========================================================= */

#seguridad .security-feedback::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    height: 3px;

    background: var(--sec-orange);

    transform-origin: left;

    animation:
        securityToastProgress 4.5s linear forwards;
}


/* =========================================================
   RESULTADO FINAL
   ========================================================= */

#seguridad .security-result {

    width: 100% !important;

    max-width: 700px !important;

    margin: auto !important;

    padding: 42px !important;

    text-align: center !important;

    border-radius: 22px !important;

    background: #ffffff !important;

    border: 1px solid var(--sec-border) !important;

    box-shadow: var(--sec-shadow) !important;
}


#seguridad .security-result-icon {

    width: 70px !important;

    height: 70px !important;

    margin: 0 auto 18px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    border-radius: 20px !important;

    background: var(--sec-primary-light) !important;
}


#seguridad .security-result-icon i {

    font-size: 34px !important;

    color: var(--sec-primary) !important;
}


#seguridad .security-result-label {

    display: inline-block !important;

    margin-bottom: 8px !important;

    color: var(--sec-orange-dark) !important;

    font-size: .7rem !important;

    font-weight: 800 !important;

    letter-spacing: 1.5px !important;
}


#seguridad .security-result h2 {

    margin: 0 0 10px !important;

    color: #1d2b36 !important;

    font-size: 2rem !important;

    font-weight: 800 !important;
}


#seguridad .security-result > p {

    max-width: 520px !important;

    margin: 0 auto 22px !important;

    color: var(--sec-text-soft) !important;

    line-height: 1.6 !important;
}


/* =========================================================
   PUNTAJE FINAL
   ========================================================= */

#seguridad .security-final-score {

    display: inline-flex !important;

    align-items: baseline !important;

    gap: 6px !important;

    margin: 5px auto 24px !important;

    padding: 12px 25px !important;

    border-radius: 13px !important;

    background: var(--sec-primary-light) !important;

    border: 1px solid #d6e9f2 !important;
}


#seguridad .security-final-score strong {

    color: var(--sec-primary) !important;

    font-size: 2rem !important;

    line-height: 1 !important;
}


#seguridad .security-final-score span {

    color: var(--sec-primary) !important;

    font-size: .8rem !important;

    font-weight: 800 !important;
}


/* =========================================================
   MENSAJE FINAL
   ========================================================= */

#seguridad .security-final-message {

    max-width: 520px !important;

    margin: 0 auto 25px !important;

    padding: 15px 17px !important;

    display: flex !important;

    align-items: flex-start !important;

    gap: 12px !important;

    text-align: left !important;

    border-radius: 12px !important;

    background: var(--sec-orange-light) !important;

    border: 1px solid #f5dfb7 !important;
}


#seguridad .security-final-message > i {

    margin-top: 2px !important;

    color: var(--sec-orange-dark) !important;
}


#seguridad .security-final-message strong {

    display: block !important;

    margin-bottom: 3px !important;

    color: #694b14 !important;

    font-size: .82rem !important;
}


#seguridad .security-final-message span {

    color: #765f34 !important;

    font-size: .78rem !important;

    line-height: 1.45 !important;
}


/* =========================================================
   BOTONES FINALES
   ========================================================= */

#seguridad .security-final-actions {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 10px !important;

    flex-wrap: wrap !important;
}


#seguridad .security-secondary-button,
#seguridad .security-report-button {

    min-height: 44px !important;

    padding: 0 17px !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 7px !important;

    border-radius: 9px !important;

    font-size: .8rem !important;

    font-weight: 700 !important;

    text-decoration: none !important;

    cursor: pointer !important;

    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease !important;
}


#seguridad .security-secondary-button {

    border: 1px solid var(--sec-primary) !important;

    background: var(--sec-primary) !important;

    color: #ffffff !important;
}


#seguridad .security-secondary-button:hover {

    background: var(--sec-primary-dark) !important;

    transform: translateY(-1px) !important;
}


#seguridad .security-report-button {

    border: 1px solid var(--sec-border) !important;

    background: #ffffff !important;

    color: var(--sec-text-soft) !important;
}


#seguridad .security-report-button:hover {

    border-color: #c5d2da !important;

    background: #f7fafc !important;
}


/* =========================================================
   HIDDEN
   ========================================================= */

#seguridad [hidden] {

    display: none !important;
}


/* =========================================================
   ANIMACIONES
   ========================================================= */

@keyframes securityToastIn {

    from {

        opacity: 0;

        transform: translateY(20px);
    }

    to {

        opacity: 1;

        transform: translateY(0);
    }
}


@keyframes securityToastProgress {

    from {

        transform: scaleX(1);
    }

    to {

        transform: scaleX(0);
    }
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

    #seguridad {

        padding: 0 18px !important;
    }


    #seguridad .security-game-header {

        grid-template-columns: 1fr auto !important;
    }


    #seguridad .security-progress {

        grid-column: 1 / -1 !important;

        grid-row: 2 !important;
    }


    #seguridad .security-score {

        grid-column: 2 !important;

        grid-row: 1 !important;
    }


    #seguridad .security-desktop-scenario {

        gap: 25px !important;
    }
}


@media (max-width: 700px) {

    #seguridad {

        min-height: 100dvh !important;

        padding: 0 12px !important;

        overflow: visible !important;
    }


    #seguridad .app-section-inner {

        min-height: 100dvh !important;
    }


    #seguridad .security-screen {

        min-height: 100dvh !important;
    }


    #seguridad .security-start {

        padding: 35px 10px !important;
    }


    #seguridad .security-start h2 {

        font-size: 2rem !important;
    }


    #seguridad .security-start p {

        font-size: .92rem !important;
    }


    #seguridad .security-start-shield {

        transform: scale(.82) !important;

        margin-top: 10px !important;
    }


    #seguridad .security-game {

        padding: 22px 0 35px !important;
    }


    #seguridad .security-game-header {

        grid-template-columns: 1fr !important;

        gap: 10px !important;
    }


    #seguridad .security-score {

        grid-column: 1 !important;

        grid-row: auto !important;

        justify-self: start !important;
    }


    #seguridad .security-progress {

        grid-column: 1 !important;

        grid-row: auto !important;

        justify-content: flex-start !important;
    }


    #seguridad .security-mission {

        padding: 21px !important;

        border-radius: 17px !important;
    }


    #seguridad .security-mission-intro {

        gap: 11px !important;
    }


    #seguridad .security-mission-icon {

        width: 45px !important;

        height: 45px !important;

        flex-basis: 45px !important;
    }


    #seguridad .security-mission-intro h2 {

        font-size: 1.35rem !important;
    }


    #seguridad .security-email-body {

        padding: 17px !important;
    }


    #seguridad .security-desktop-scenario {

        flex-direction: column !important;

        padding: 20px !important;

        gap: 20px !important;
    }


    #seguridad .security-monitor {

        width: 100% !important;

        max-width: 100% !important;
    }


    #seguridad .security-chat-bubble {

        max-width: 92% !important;
    }


    #seguridad .security-answer {

        min-height: 52px !important;

        padding: 11px 12px !important;

        font-size: .8rem !important;
    }


    #seguridad .security-feedback {

        right: 12px !important;

        bottom: 12px !important;

        width: calc(100vw - 24px) !important;
    }


    #seguridad .security-result {

        padding: 30px 20px !important;
    }
}



/* =========================================================
   ETAPA 7 BLOQUEADA
   ========================================================= */

#seguridad ~ #final-recorrido {
    transition:
        opacity .3s ease,
        filter .3s ease;
}


.security-final-locked {

    opacity: .45 !important;

    cursor: not-allowed !important;

    filter: grayscale(.35) !important;

}


/* =========================================================
   RESULTADO — APRENDIZAJE
   ========================================================= */

#seguridad .security-result-learning
.security-result-icon {

    background: var(--sec-orange-light) !important;

    border-color: #f5dfb7 !important;
}


#seguridad .security-result-learning
.security-result-icon i {

    color: var(--sec-orange-dark) !important;
}


#seguridad .security-result-learning
.security-result-label {

    color: var(--sec-orange-dark) !important;
}


/* =========================================================
   RESULTADO — APROBADO
   ========================================================= */

#seguridad .security-result-success
.security-result-icon {

    background: var(--sec-green-bg) !important;

    border-color: #a9dbbf !important;
}


#seguridad .security-result-success
.security-result-icon i {

    color: var(--sec-green) !important;
}


#seguridad .security-result-success
.security-result-label {

    color: var(--sec-green) !important;
}