.elementor-61022 .elementor-element.elementor-element-b9ef4aa{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for html, class: .elementor-element-e50360e *//**
 * Estilos CSS Personalizados para Ventura Training Institute en Elementor
 * -----------------------------------------------------------------
 * Pega en Apariencia > Personalizar > CSS Adicional
 * o en Elementor > Site Settings > Custom CSS.
 * 
 * Incluye mejoras de accesibilidad (focus visible), contraste alto
 * y “fallbacks” para los badges de estado si no está Tailwind.
 */

/* ===========================
   0) Mejores defaults / UX
   =========================== */
html:focus-within{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important; transition:none!important;}
  .vti-popup-btn:hover{transform:none!important;}
}

/* =========================================
   1) Títulos sobre fondo degradado azul
   ========================================= */
.gradient-bg h1.font-playfair,
.gradient-bg h2.font-playfair{
  color:#FFFFFF !important;
  font-family:'Playfair Display',serif !important;
}

/* =========================================
   2) Títulos dentro de tarjetas blancas
   ========================================= */
.program-card h3.font-playfair{
  font-family:'Playfair Display',serif !important;
}

/* =========================================
   3) Títulos en encabezados de tablas
   ========================================= */
.table-header h3.font-playfair{
  color:#FFFFFF !important;
  font-family:'Playfair Display',serif !important;
}

/* =========================================
   4) Botón “Request Info” (popup trigger)
   ========================================= */
.vti-popup-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .9rem; border-radius:999px;
  font-weight:700; font-size:.875rem;
  background:linear-gradient(90deg,#22c1c3,#1a9be6); color:#fff;
  box-shadow:0 8px 18px rgba(0,0,0,.18);
  transition:transform .15s ease, box-shadow .15s ease;
}
.vti-popup-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(0,0,0,.22);
}
.vti-popup-btn .fa-paper-plane{font-size:.85rem;}
/* Accesibilidad: foco visible teclado */
.vti-popup-btn:focus-visible{
  outline:3px solid #1E40AF; /* var(--vti-secondary) */
  outline-offset:2px;
}
/* Contraste alto para usuarios que lo prefieren */
@media (prefers-contrast: more){
  .vti-popup-btn{
    background:#1E40AF !important; color:#fff !important;
    box-shadow:0 0 0 3px rgba(255,255,255,.35);
  }
}

/* =========================================
   5) Columna “Action” en tablas (ancho/nowrap)
   ========================================= */
table.auto-status th:last-child{white-space:nowrap;}
table.auto-status td._vti-action{white-space:nowrap;}

/* =========================================
   6) Badges de estado (fallback sin Tailwind)
   - El JS añade clases: .status-open/.status-active/etc.
   - Aquí damos estilos propios por si no hay utilidades CSS.
   ========================================= */
.status-badge,
.status-open,
.status-inprogress,
.status-active,
.status-completed,
.status-tba{
  display:inline-flex; align-items:center; gap:.375rem;
  padding:.25rem .6rem; border-radius:9999px;
  font-size:.75rem; font-weight:700; line-height:1; letter-spacing:.01em;
  vertical-align:middle;
}
.status-badge i[class*="fa-"]{font-size:.8em; margin-right:.25rem;}
.status-open{      background:#DBEAFE; color:#1E40AF; border:1px solid #93C5FD;}   /* azul claro */
.status-inprogress{background:#DCFCE7; color:#166534; border:1px solid #86EFAC;}   /* verde */
.status-active{    background:#DCFCE7; color:#166534; border:1px solid #86EFAC;}   /* verde */
.status-completed{ background:#F3F4F6; color:#374151; border:1px solid #D1D5DB;}   /* gris */
.status-tba{       background:#FEF9C3; color:#92400E; border:1px solid #FDE68A;}   /* amarillo */

/* =========================================
   7) Accesibilidad: foco en enlaces/botones de tablas
   ========================================= */
table.auto-status a:focus-visible,
table.auto-status button:focus-visible{
  outline:3px solid #0A5DC2; /* var(--vti-primary) */
  outline-offset:2px;
}

/* =========================================
   8) Tipografía en tablas (ligero ajuste)
   ========================================= */
table.auto-status th,
table.auto-status td{font-size:.95rem;}
@media (max-width:640px){
  table.auto-status th,
  table.auto-status td{font-size:.875rem;}
}/* End custom CSS */