/*
 * EVOLUTIVOS — ÍNDICE DE ESTILOS
 *
 * 01. part-01-seccion1-evolutivos.php — estructura visual y contenido principal de Evolutivos
 * 02. sidebar-evolutivo.php — sidebar, filtros y contenido dinámico de Evolutivos
 *
 * Sin CSS embebido:
 * - carpeta data (archivos PHP) — contenido dinámico por plazo y estado
 */

/* ==========================================================================
   01. part-01-seccion1-evolutivos.php — estructura visual y contenido principal de Evolutivos
   ========================================================================== */

  @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap');

  .evolutivos-hero-banner * {
    box-sizing: border-box;
  }

  /* Contenedor principal */
  .evolutivos-hero-banner.unified-cover {
    position: relative;
    width: 100%;
    max-width: 1398px;
    min-height: 590px;
    margin: 40px auto;
    border-radius: 67px;
    overflow: hidden;
    font-family: 'Ubuntu', sans-serif;
  }

  /* Fondo */
  .general-cover-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
  }
  .general-cover-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  
  .mobile-gradient-overlay {
    display: none;
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(82, 34, 166, 0.9) 0%, rgba(82, 34, 166, 0.4) 50%, rgba(0, 0, 0, 0) 100%);
    z-index: 2;
  }

  /* Layout principal */
  .hero-content-wrapper.left-layout {
    position: relative;
    width: 100%;
    min-height: 590px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    z-index: 3;
  }

  .text-and-cards-content {
    width: 100%;
    max-width: 650px;
    padding: 40px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .header-titulos {
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 30px;
    width: 100%;
  }

  .h1-evolutivo {
    color: #FFF;
    font-size:  50px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    margin: 0;
  }

  .p-evolutivo {
    color: #FFF;
    font-size: clamp(20px, 2.5vw, 32px);
    font-weight: 400;
    line-height: 1.2; 
    margin: 10px 0 0 0;
  }

  /* Grilla Escritorio */
  .progress-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 100%;
    max-width: 480px;
    margin-top: -20px;
    
  }

  .progress-card {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    padding: 20px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    width: 100%;
    min-height: 195px;
    transition: transform 0.3s ease;
  }

  .chart-container {
    width: 97px; 
    height: 97px;
    margin: 0 auto 10px;
  }

  .circular-chart {
    display: block;
  }

  .circle-bg { 
    fill: none; 
    stroke: rgba(255, 255, 255, 0.2); 
    stroke-width: 9.7;
  }
  
  .circle {
    fill: none;
    stroke-width: 9.7;
    stroke-linecap: round;
    stroke: #00CDCD;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
  }

  @keyframes progress-anim-100 { 0% { stroke-dasharray: 0 274; } 100% { stroke-dasharray: 274, 274; } }
  @keyframes progress-anim-75 { 0% { stroke-dasharray: 0 274; } 100% { stroke-dasharray: 205.5, 274; } }
  @keyframes progress-anim-50 { 0% { stroke-dasharray: 0 274; } 100% { stroke-dasharray: 137, 274; } }
  @keyframes progress-anim-25 { 0% { stroke-dasharray: 0 274; } 100% { stroke-dasharray: 68.5, 274; } }

  .animated-path-100 { animation: progress-anim-100 1.5s ease-out forwards; }
  .animated-path-75 { animation: progress-anim-75 1.5s ease-out forwards; }
  .animated-path-50 { animation: progress-anim-50 1.5s ease-out forwards; }
  .animated-path-25 { animation: progress-anim-25 1.5s ease-out forwards; }

  .percentage {
    fill: #fff;
    font-size: 20px !important;
    font-weight: 700;
    text-anchor: middle;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  }

  .progress-card .label {
    color: #FFF;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 6px;
  }

  .progress-card .labelfinal {
    color: #FFF;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 5px;
  }

  .sub-label {
    color: #FFF;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: inline-block;
  }

  .bg-cyan { border-radius: 5px; background: #00CDCD; padding: 4px 10px; }
  .bg-purple { border-radius: 5px; background: #6A00A7; padding: 4px 10px; }
  .bg-darkblue { border-radius: 5px; background: #002955; padding: 4px 10px; }

  /* ====================================
     MEDIA QUERIES (Móvil tipo Captura)
     ==================================== */
     
  @media (max-width: 992px) {
    .text-and-cards-content {
      padding: 40px;
    }
  }

  @media (max-width: 768px) {
    .evolutivos-hero-banner.unified-cover {
      min-height: auto;
      border-radius: 35px;
      margin: 20px 15px; /* Margen a los costados para que respire */
      width: auto;
    }
    
    .mobile-gradient-overlay {
      display: block; /* Activa el degradado morado superior para mejorar la lectura */
    }

    .hero-content-wrapper.left-layout {
      justify-content: center;
      min-height: auto;
    }

    .text-and-cards-content {
      padding: 40px 15px 50px 15px;
      align-items: center;
      max-width: 100%;
    }
    
    .header-titulos {
      align-items: center;
      text-align: center;
      margin-bottom: 40px;
    }

    .h1-evolutivo {
      font-size: 28px;
      text-shadow: 0px 2px 4px rgba(0,0,0,0.3);
    }
    
    .p-evolutivo {
      font-size: 18px;
      text-shadow: 0px 2px 4px rgba(0,0,0,0.3);
    }

    /* Grilla estricta de 2x2 para móvil */
    .progress-grid {
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 12px;
      max-width: 100%;
    }

    .progress-card {
      min-height: 140px;
      padding: 15px 5px;
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.2); /* Un poco más opaco para destacar del fondo */
    }

    /* Reducción proporcional de los círculos para que entren de a dos */
    .chart-container {
      width: 65px;
      height: 65px;
      margin-bottom: 8px;
    }
    
    .percentage {
      font-size: 24px !important; /* Adaptado visualmente al nuevo tamaño del SVG */
      transform: translateY(2px);
    }

    .progress-card .labelfinal {
      font-size: 16px;
      letter-spacing: 0.5px;
    }

    .progress-card .label {
      font-size: 11px;
      letter-spacing: 0.5px;
      margin-bottom: 4px;
    }

    .sub-label {
      font-size: 14px;
      padding: 3px 6px;
      letter-spacing: 0.5px;
    }
  }
  
  /* Ajuste extremo para teléfonos muy finos (ej. iPhone SE) */
  @media (max-width: 360px) {
    .progress-grid {
      gap: 8px;
    }
    .chart-container {
      width: 55px;
      height: 55px;
    }
    .percentage {
      font-size: 26px !important;
    }
    .progress-card .labelfinal { font-size: 12px; }
    .progress-card .label { font-size: 9px; }
    .sub-label { font-size: 9px; padding: 2px 4px;}
  }

/* ==========================================================================
   02. sidebar-evolutivo.php — sidebar, filtros y contenido dinámico de Evolutivos
   ========================================================================== */

    /* =========================================
   ESTRUCTURA PRINCIPAL Y SIDEBAR
========================================= */
.evolutivo-layout-wrapper { display: flex; gap: 25px; align-items: flex-start; width: 1300px; max-width: 100%; margin-bottom: 93px !important; margin: auto; box-sizing: border-box; }
.evolutivo-layout-wrapper .app-sidebar { 
    width: 291px; 
    flex-shrink: 0; 
    position: sticky; /* Cambiamos a sticky */
    top: 120px; /* Ajusta este valor dependiendo de cuánto mida el menú superior de tu web (header) */
    z-index: 55; 
    align-self: flex-start; /* Clave para que el sticky no se estire */
}
.evolutivo-layout-wrapper .app-content { flex-grow: 1; width: 100%;  }

.app-sidebar .sidebar-menu-card { padding: 20px 15px; border-radius: 15px; border: 0.8px solid rgba(106, 0, 167, 0.70); background: #FFF; }
.app-sidebar .sidebar-title { color: #6A00A7; font-size: 25px; font-weight: 700; line-height: 16px; letter-spacing: 0.3px; text-transform: uppercase; }

.verticales-menu { list-style: none; padding: 0; margin: 25px 0 0 0; }
.verticales-menu li { margin-bottom: 8px; }
.verticales-menu .menu-item { color: #002955; font-size: 18px; font-weight: 500; line-height: 16px; text-transform: uppercase; text-decoration: none; display: flex; align-items: center; padding: 12px 15px; border-radius: 10px; transition: all 0.3s ease; }
.verticales-menu .menu-item:hover { color: #4A0E78; }
.verticales-menu .menu-item .icon { display: inline-flex; margin-right: 12px; }
.verticales-menu .menu-item .icon img { width: 20px; height: 20px; object-fit: contain; transition: filter 0.3s ease; }
.verticales-menu .menu-item.active { background-color: #6A00A7; color: #FFFFFF; font-weight: 700; }
.verticales-menu .menu-item.active .icon img { filter: brightness(0) invert(1); }

.app-sidebar .btn-descargar-ruta {
    display: flex; text-decoration: none; margin-top: 20px; border-radius: 10px;
    background: linear-gradient(270deg, #00CDCD -107.23%, #6A00A7 99.93%);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25); width: 100%; height: 45px;
    justify-content: center; align-items: center; gap: 10px; color: #FFF; font-size: 20px; font-weight: 700;
}
.app-sidebar .btn-descargar-ruta .icono-btn-descarga { width: 24px; height: 24px; object-fit: contain; }

/* Ocultar móvil en Escritorio */
.mobile-dropdown-container, .bottom-sheet-overlay, .bottom-sheet-menu { display: none; }

/* =========================================
   EMPTY STATE Y BANNERS
========================================= */
.app-content .empty-state { border-radius: 15px; border: 0.8px solid rgba(106, 0, 167, 0.70); background: #F9F9FB; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 480px; height: 100%; padding-top: 40px; padding-bottom: 150px; position: relative; box-sizing: border-box;}
.empty-state-top { display: flex; flex-direction: column; align-items: center; text-align: center; }
.empty-icon-wrapper { border-radius: 50%; width: 75px; height: 75px; display: flex; align-items: center; justify-content: center; margin-bottom: 25px; }
.empty-icon-wrapper img { width: 60px; object-fit: contain; }
.empty-state-top h2 { color: #6A00A7; font-size: 43px; font-weight: 700; margin: 0; line-height: 1.3; }

.vertical-cta-banner { border-radius: 32px; border: 0 solid #002955; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); background: url(https://zeuserp.tech/wp-content/themes/zeus-2023/img-verticales/vector-fondo.svg) bottom left / 200px auto no-repeat, var(--ZEUS, linear-gradient(97deg, #6A00A7 -0.71%, #00CDCD 100.1%)); display: flex; justify-content: center; align-items: center; margin-top: 20px; margin-bottom: -120px; position: relative; z-index: 10; overflow: hidden; min-height: 240px; width: 85%; max-width: 805px; box-sizing: border-box; padding: 30px 50px;}
.banner-cta-content { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; max-width: 450px; }
.banner-cta-content p, .banner-cta-content h3 { color: #FFF; font-size: 22px; font-weight: 700; margin: 0; line-height: 1.4; width: 500px; }
.banner-cta-content a { background: #FFF; color: #6A00A7; font-size: 22px; font-weight: 700; text-decoration: none; padding: 12px 40px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.banner-cta-content a:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0,0,0,0.15); }
.timeline-banner-custom { margin-left: auto; margin-right: auto; margin-top: 60px; }
.empty-state .vertical-cta-banner { position: absolute; bottom: -71px; left: 50%; transform: translateX(-50%); margin-bottom: 0; }

/* =========================================
   LÍNEA DE TIEMPO (Escritorio)
========================================= */
.timeline-loaded-container { border-radius: 15px; border: 0.8px solid rgba(106, 0, 167, 0.70); background: #F7F7F7; padding: 40px; width: 100%; box-sizing: border-box; }
.timeline-header { margin-bottom: 50px; padding-left: 20px; }
.timeline-main-title { color: #6A00A7; font-size: 32px; font-style: normal; font-weight: 700; line-height: normal; letter-spacing: 0.3px; text-transform: uppercase; margin:0;}
.timeline-sub-title { color: #002955; font-size: 22px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: 1.76px; text-transform: uppercase; margin: 10px 0 0 0;}
.timeline-wrapper { position: relative; padding-left: 20px; }
.timeline-scroll-line { position: absolute; top: 62px; left: 58px; width: 50px; height: 0%; background: linear-gradient(180deg, #6A00A7 0%, #00CDCD 100%); -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='50' height='100' viewBox='0 0 50 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 25 0 Q 45 25 25 50 T 25 100' fill='none' stroke='black' stroke-width='8' stroke-linecap='square'/%3E%3C/svg%3E"); -webkit-mask-repeat: repeat-y; -webkit-mask-size: 50px 100px; mask-image: url("data:image/svg+xml,%3Csvg width='50' height='100' viewBox='0 0 50 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 25 0 Q 45 25 25 50 T 25 100' fill='none' stroke='black' stroke-width='8' stroke-linecap='square'/%3E%3C/svg%3E"); mask-repeat: repeat-y; mask-size: 50px 100px; z-index: 1; transition: height 0.1s ease-out; }

@keyframes fadeInScale { 0% { opacity: 0; transform: scale(0.6); } 100% { opacity: 1; transform: scale(1); } }
.timeline-item { display: flex; align-items: flex-start; margin-bottom: 50px; position: relative; z-index: 2; width: 100%; box-sizing: border-box; }
.timeline-item:last-child { margin-bottom: 0; }
.timeline-left { flex-shrink: 0; width: 125px; text-align: center; }

.icon-gradient-border { display: inline-flex; border-radius: 50%; background: transparent; padding: 0; }
.timeline-full-icon { width: 125px; height: 125px; object-fit: contain; position: relative; z-index: 5; background: transparent; border-radius: 50%; opacity: 0; transform: scale(0.6); }
.timeline-full-icon.animate-in { animation: fadeInScale 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }

.timeline-arrow { width: 23px; height: 25px; background-image: url('/wp-content/themes/zeus-2023/assets/imgevoutivos/arrow_right.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; border: none; margin-top: 50px; margin-left: 5px; margin-right: 15px; flex-shrink: 0; }
.timeline-content { flex-grow: 1; display: flex; flex-direction: column; align-items: flex-start; padding-right: 20px; font-family: 'Ubuntu', sans-serif; box-sizing: border-box; max-width: 100%; }
.timeline-title-pill { color: #FFF; padding: 10px 15px; font-size: 22px; font-style: normal; font-weight: 700; line-height: normal; border-radius: 11px; background: #002955; position: relative; z-index: 2; margin-bottom: 11px; margin-top: 22px; box-sizing: border-box;}
.timeline-desc-box { background-color: #FFF; border: 3px solid #6A00A7; border-radius: 22px; padding: 25px 20px; width: 100%; max-width: 647px; box-sizing: border-box; position: relative; z-index: 1; }
.timeline-desc-box p { color: #002955; text-align: justify; font-size: 20px; font-style: normal; font-weight: 400; width: 100%; margin: 0; }
.timeline-desc-box p strong { font-weight: 700; }
.timeline-tags { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 15px; width: 100%; max-width: 677px; margin-top: 5px; padding-right: 30px; box-sizing: border-box; position: relative; z-index: 2; }
.timeline-tags .badge { padding: 5px 15px; border-radius: 23px; font-size: 20px; font-weight: 700; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); }
.tag-testing { background-color: #6A00A7; color: #FFF;}
.tag-production { background-color: #00CDCD; color: #002955 !important;}


/* =========================================
   MEDIA QUERIES - DISEÑO MÓVIL Y SOLUCIÓN DE BUGS
========================================= */
@media (max-width: 991px) { 
    .evolutivo-layout-wrapper { flex-direction: column; padding: 0 15px; box-sizing: border-box;} 
    
    .evolutivo-layout-wrapper .app-sidebar { 
        width: 100%; 
        position: relative; /* Desactiva el sticky en móviles */
        top: 0; 
    }
    
    .desktop-menu, .desktop-btn { display: none !important; }

    /* Contenedor del Selector Custom Móvil */
    .mobile-dropdown-container { display: flex; flex-direction: column; align-items: center; margin-bottom: 25px; width: 100%; }
    .mobile-sidebar-title { color: #002955; font-size: 18px; font-weight: 700; margin: 0 0 15px 0; text-transform: uppercase; font-family: 'Ubuntu', sans-serif; letter-spacing: 0.5px;}
    
    /* El Selector Idéntico a la captura */
    .mobile-custom-select {
        width: 100%; max-width: 400px; background: #FFF; border: 1px solid #002955; border-radius: 12px;
        padding: 16px 20px; display: flex; justify-content: space-between; align-items: center;
        font-size: 20px; color: #002955; font-weight: 700; cursor: pointer; box-sizing: border-box;
        font-family: 'Ubuntu', sans-serif; box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    }
    
    .mobile-select-left { display: flex; align-items: center; gap: 12px; }
    .selected-icon-wrapper { display: inline-flex; align-items: center; justify-content: center; }
    .selected-icon-wrapper img { 
        width: 24px; height: 24px; object-fit: contain; 
        filter: invert(15%) sepia(85%) saturate(5432%) hue-rotate(278deg) brightness(78%) contrast(113%); 
    }

    /* Modal Bottom Sheet */
    .bottom-sheet-overlay { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 999998; opacity: 0; visibility: hidden; transition: all 0.3s ease; }
    .bottom-sheet-overlay.show { opacity: 1; visibility: visible; }

    .bottom-sheet-menu { display: flex; flex-direction: column; position: fixed; bottom: -100%; left: 0; width: 100%; background: #FFF; border-radius: 20px 20px 0 0; z-index: 999999; padding: 15px 25px 40px 25px; box-sizing: border-box; transition: bottom 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); max-height: 85vh; box-shadow: 0 -5px 25px rgba(0,0,0,0.1); }
    .bottom-sheet-menu.show { bottom: 0; }
    .bs-handle { width: 45px; height: 5px; background: #D9D9D9; border-radius: 3px; margin: 0 auto 20px auto; flex-shrink: 0; }
    .bs-scroll-area { overflow-y: auto; width: 100%; padding-right: 5px; }
    
    .bs-list { list-style: none; padding: 0; margin: 0; }
    .bs-list li { border-bottom: 1px solid #F0F0F0; }
    .bs-list li:last-child { border-bottom: none; }
    .bs-item { display: flex; align-items: center; padding: 20px 0; color: #002955; font-size: 20px; font-weight: 700; text-decoration: none; font-family: 'Ubuntu', sans-serif;}
    .bs-item .icon { margin-right: 18px; display: flex; align-items: center; justify-content: center; width: 30px;}
    .bs-item .icon img { width: 24px; height: 24px; object-fit: contain; filter: invert(15%) sepia(85%) saturate(5432%) hue-rotate(278deg) brightness(78%) contrast(113%); }
}

@media (max-width: 768px) {
    /* CONTENCIÓN ESTRICTA PARA EVITAR DESFASE EN FINALIZADOS */
    .timeline-loaded-container { padding: 25px 15px; border: none; background: transparent; width: 100%; }
    .timeline-header { text-align: center; margin-bottom: 40px; padding-left: 0; width: 100%; }
    .timeline-scroll-line { display: none !important; }
    .timeline-wrapper { padding-left: 0; width: 100%; box-sizing: border-box; }
    
    .timeline-item { flex-direction: column; align-items: center; margin-bottom: 60px; width: 100%; max-width: 100%; overflow-x: hidden; }
    .timeline-arrow { display: none; }
    
    .timeline-content { 
        padding-right: 0; padding-left: 0; width: 100%; max-width: 100%;
        display: flex; flex-direction: column; align-items: center; 
        box-sizing: border-box; 
    }
    .timeline-left { width: 100%; display: flex; justify-content: center; z-index: 10; margin-bottom: 15px;}
    
    .timeline-title-pill { 
        width: auto; max-width: 95%; text-align: center; 
        margin: 0 auto; 
        font-size: 18px; padding: 12px 25px; z-index: 11;
        border-radius: 8px; box-sizing: border-box;
        white-space: normal; word-wrap: break-word; line-height: 1.3;
    }
    
    .timeline-desc-box {
        width: 100%; max-width: 100%; background: transparent; border: none;
        border-left: 2px solid #6A00A7; border-bottom: 2px solid #6A00A7; 
        border-radius: 0 0 0 15px; 
        padding: 30px 15px 25px 15px; margin-top: -20px; 
        box-sizing: border-box;
    }
    
    .timeline-desc-box * {
        max-width: 100% !important;
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }

    .timeline-desc-box p { text-align: center; font-size: 18px; line-height: 1.5; color: #002955; width: 100%; }
    
    .timeline-tags { justify-content: center; flex-wrap: wrap; padding: 0; margin-top: 20px; width: 100%; max-width: 100%; gap: 10px;}
    .timeline-tags .badge { font-size: 20px; padding: 5px 15px; white-space: normal; text-align: center; }
    
    .empty-state .vertical-cta-banner { position: absolute; bottom: -164px; left: 50%; transform: translateX(-50%); margin-bottom: 0; }
}

/* =========================================
   FIX BANNER MOBILE (Evitar superposición footer)
========================================= */
@media (max-width: 768px) {
    .app-content .empty-state {
        margin-bottom: 110px !important; 
        padding-bottom: 60px !important; 
        min-height: auto !important;
    }

    .app-content .empty-state .vertical-cta-banner,
    .empty-state .vertical-cta-banner {
        position: absolute !important;
        top: auto !important;
        bottom: -186px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 90% !important;
        height: auto !important;
        min-height: auto !important;
        padding: 30px 20px !important;
        border-radius: 24px !important;
    }

    .app-content .empty-state .vertical-cta-banner .banner-cta-content p {
        font-size: 20px !important;
        line-height: 1.4 !important;
        margin-bottom: -10px !important;
        width: 315px;
    }

    .app-content .empty-state .vertical-cta-banner .banner-cta-content a.btn-solicitar {
        font-size: 18px !important;
        padding: 12px 25px !important;
        width: 85% !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }
}

/* =========================================
   FIX BANNER TIMELINE MOBILE
========================================= */
@media (max-width: 768px) {
    .timeline-loaded-container .vertical-cta-banner.timeline-banner-custom {
        margin-bottom: 40px !important; 
        margin-top: 40px !important; 
        width: 100% !important;
        padding: 30px 20px !important;
        border-radius: 24px !important;
        min-height: auto !important;
        position: relative !important;
        bottom: auto !important;
    }

    .timeline-loaded-container .vertical-cta-banner.timeline-banner-custom .banner-cta-content h3 {
        font-size: 18px !important;
        line-height: 1.4 !important;
        margin-bottom: 15px !important;
        padding: 0 10px !important;
    }

    .timeline-loaded-container .vertical-cta-banner.timeline-banner-custom .banner-cta-content a.btn-banner {
        font-size: 16px !important;
        padding: 12px 25px !important;
        width: 65% !important;
        box-sizing: border-box !important;
        text-align: center !important;
        display: inline-block !important;
    }
}


/* Contenedor del título y el botón */
.timeline-title-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Esto empuja el botón al extremo derecho */
    width: 647px; /* Igualamos al ancho exacto de la caja de descripción */
    max-width: 100%; 
    margin-bottom: 11px;
    margin-top: 22px;
    position: relative;
    z-index: 2;
    flex-wrap: wrap; 
}

/* Le quitamos los márgenes verticales al pill porque ahora los controla el wrapper */
.timeline-title-wrapper .timeline-title-pill {
    margin: 20px;
}

/* Estilos idénticos a tu captura para el botón del instructivo */
.timeline-instructivo-btn {
    color: #FFF;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    border-radius: 11px;
    background: var(--Linear, linear-gradient(354deg, #6A00A7 -6.64%, #00CDCD 132.51%));
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    padding: 9px 13px;
}

.timeline-instructivo-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
     color: #FFF;
}

/* Ajuste móvil para centrar ambos elementos si la pantalla es muy chica */
@media (max-width: 768px) {
    .timeline-title-wrapper {
        justify-content: center;
        margin-top: -15px;
    }
    
    .empty-state-top h2 {
     color: #6A00A7;
    font-size: 26px;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}
}