:root{
  --primary-color:#C5D9F0;
  --terciario-color:#343460;
  --secundario-color:#e9337f;
  /* Altura aproximada del navbar fijo (ajústala si es necesario) */
  --navbar-height: 90px;
}

/* Fuentes */
@font-face{
  font-family:'PoppinsL';
  font-style:normal;
  font-weight:300;  /* Cambiado de 900 a 300 */
  src:url(Poppins-Light.ttf) format("truetype");
}
@font-face{
  font-family:'PoppinsR';
  font-style:normal;
  font-weight:400;  /* Cambiado de 900 a 400 */
  src:url(Poppins-Regular.ttf) format("truetype");
}
@font-face{
  font-family:'PoppinsSB';
  font-style:normal;
  font-weight:600;  /* Cambiado de 900 a 600 */
  src:url(Poppins-SemiBold.ttf) format("truetype");
}
@font-face{
  font-family:'PoppinsB';
  font-style:normal;
  font-weight:700;  /* Cambiado de 900 a 700 */
  src:url(Poppins-Bold.ttf) format("truetype");
}

/* Reset básico */
*{ margin:0; padding:0; box-sizing:border-box; }
body,html{
  height:100%;
  font-family:'PoppinsR',sans-serif;
  scroll-behavior:smooth;
  overflow-x:hidden;
}

/***  CONTENEDOR GENERAL     **/
.custom-container { width: 100%; margin: auto; background-color: white; }
.custom-container-interno { width: 65%; border: 0px solid #000; margin-left: auto; margin-right: auto; text-align: center; }

@media (max-width: 1366px) {
  .custom-container { width: 100%; padding: 1rem; max-width: 1366px; }
  .custom-container-interno { width: 90%; border: 0px solid #000; margin-left: auto; margin-right: auto; }
}
@media (max-width: 1600px) {
  .custom-container-interno { width: 90%; border: 0px solid #000; margin-left: auto; margin-right: auto; }
}

/* Títulos */
h2 { margin: 0; color: var(--secundario-color) !important; font-size: 1.8rem; letter-spacing: 0px; font-family: 'PoppinsSB'; }
h3 { margin: 0 20px 10px 0px; color: var(--secundario-color) !important; font-size: 2.5rem; letter-spacing: -2px; font-family: 'PoppinsSB'; }
h4 { margin: 0 20px 10px 0px; font-size: 1.6rem; letter-spacing: 0px; font-family: 'PoppinsB'; color: #343460; }
@media (max-width: 768px) { h2 { font-size: 1.2rem; } }

.espacioTop{ margin-top:90px; }

.separadormenuI,
.separadormenuAg,
.separadormenuB,
.separadormenuT,
.separadormenuD{ scroll-margin-top:120px!important; }
.separadormenuE{ scroll-margin-top:400px!important; }

/***************************/
/* ESRTILOS BANNER Y MENU */
.custom-navbar
{ 
  background-color:white; 
  padding: 0.5rem 1.5rem; 
  border-bottom:none!important; 
}

/* Logo navbar */
.logo-iess {
  max-width: 60% !important; /* corrige “6  0%” del original */
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.3s ease;
}
.logo-iess:hover { transform: scale(1.05); }

/* Aplicar estilos del logo al navbar-brand img */
.navbar-brand img {
  max-width: 90px;
  max-height: 90px;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.3s ease;
}
.navbar-brand img:hover { transform: scale(1.05); }

/* Layout del chatbot (base/desktop) */
.chatbot-section .container {
  padding: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  display: flex;
  align-items: stretch;
  gap: 20px;
  
}
.chatbot-right {
  flex: 0 0 30%;
  max-width: 30%;
  height: 100% !important;
  min-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

/* El padding puede ser modificado mediante la línea 125 */
.chatbot-left {
  flex: 0 0 70%;
  max-width: 70%;
  height: 100% !important;
  min-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 2rem 4rem 3rem 0;
}

/* Asegurar que el contenedor interno del chatbot ocupe toda la altura disponible */
.chatbot-placeholder {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* El webchat debe expandirse para llenar el espacio vertical */
#webchat {
  flex: 1 1 auto;
  height: 100%;
}

/* Estilos móviles navbar y ajuste caja chatbot */
@media (max-width:767px){
  .custom-navbar .navbar-brand{ display:none!important; }
  .custom-navbar{ padding:8px 10px!important; }
  .custom-navbar .navbar-nav .nav-link,
  .navbar-collapse .navbar-nav .nav-link{
    font-size:0.9rem!important;
    line-height:1.3!important;
    padding-left:1rem!important;
    padding-right:1rem!important;
    padding-top:0.4rem!important;
    padding-bottom:0.4rem!important;
    transition:all 0.3s ease!important;
    font-weight:500!important;
    text-align: center !important; /* Centrar el texto del menú en móviles */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .custom-navbar .navbar-nav .nav-link:active,
  .custom-navbar .navbar-nav .nav-link:hover,
  .navbar-collapse .navbar-nav .nav-link:active,
  .navbar-collapse .navbar-nav .nav-link:hover{
    background-color:#ebf7fc!important;
    color:#002654!important;
    border-radius:8px!important;
    transform:scale(1.05)!important;
  }
  .navbar-nav .nav-item{ 
    margin:0!important; 
    display: flex !important;
    align-items: center !important; /* Alinear verticalmente en móviles */
  }

  /* Ajuste de caja del chatbot en móvil - COMENTADO para evitar conflicto con regla de línea 862 */
  /* Esta regla está siendo sobrescrita por la regla más específica en @media (max-width: 768px) */
  /*
  .chatbot-placeholder {
    width: 98% !important;
    height: calc(100vh - 62px) !important;
    margin: 1px auto !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15) !important;
  }
  */

  /* Sección del chatbot en móviles */
  /* COMENTADO: Esta regla con height: 100vh estaba bloqueando el funcionamiento del placeholder */
  /*
  .chatbot-section {
    padding-top: 50px !important;
    padding-bottom: 0 !important;
    height: 100vh !important;
  }
  */

  /* (layout del chatbot ya definido en base/desktop) */

  /* Tarjetas de guías PDF en móviles */
  .guia-card { width: 90% !important; max-width: 90% !important; margin: 0 auto 20px auto !important; }

  /* Scroll-margin de secciones en móviles */
  .separadormenuI,
  .separadormenuAg,
  .separadormenuT,
  .separadormenuD { scroll-margin-top: 56px !important; }

  /* Imágenes de botones más pequeñas en móviles */
  a.botFacebook, a.botWhatsapp, a.botTutoriales, a.botCitasMedicas, a.botEmergencia, a.botConsulta {
    background-size: 45px auto !important;
  }
}

/* Botón flotante back-to-top */
.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background-color: #5bc0de;
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: 0 4px 12px rgba(91, 192, 222, 0.3);
  transition: all 0.3s ease;
  z-index: 1000;
}
.back-to-top:hover { background-color: #4a9bc7; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(91, 192, 222, 0.4); }
.back-to-top.show { display: flex; }

@media (max-width: 768px) {
  .back-to-top { bottom: 20px; right: 20px; width: 45px; height: 45px; font-size: 16px; }
  .chatbot-welcome-section { padding: 15px; gap: 12px; }
  .bot-avatar-round { width: 50px; height: 50px; }
  .welcome-text { font-size: 0.9rem; }
}

/* Nav */
.navbar-nav { 
  margin-left: 0 !important; 
  display: flex !important;
  align-items: center !important; /* Alinear verticalmente todos los items */
}
.navbar-nav .nav-item {
  display: flex !important;
  align-items: center !important; /* Alinear verticalmente el contenido de cada item */
}
.navbar-nav .nav-link {
  color: #3F3E3E;
  position: relative;
  transition: color 0.3s ease-in-out;
  font-family: 'PoppinsR';
  font-size: 0.9rem !important; /* Reducido de 1.1rem a 0.9rem */
  padding-left: 2rem !important;
  padding-right: 2rem !important;
  padding-top: 0.5rem !important; /* Padding superior para alineación vertical */
  padding-bottom: 0.5rem !important; /* Padding inferior para alineación vertical */
  font-weight: 600 !important;
  text-align: center !important; /* Centrar el texto del menú */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 3rem !important; /* Altura mínima para que todos tengan la misma altura */
  line-height: 1.4 !important; /* Line-height para mejor alineación con texto de dos líneas */
}
.navbar-nav .nav-link::after{
  content: "";
  position: absolute;
  left: 0; bottom: -3px; width: 0; height: 3px;
  background-color: #002654;
  transition: width 0.3s ease-in-out;
}
.navbar-expand-lg .navbar-nav .nav-link{ padding-right: 20px; padding-left: 20px; }
.navbar-nav .nav-link:hover{ color: #7167d0; }
.navbar-nav .nav-link:hover::after{ width:100%; }
.custom-toggler{ border:none; }
.navbar-toggler-icon{ filter: invert(0); }

/* Banner, textos generales */
.container-fluid { padding-right: 0; padding-left: 0; }
.custom-section { background-color: var(--primary-color); padding: 2rem; }
.text-success { color: var(--terciario-color) !important; font-size: 5rem; font-family: 'PoppinsB'; }
.text-white { color: var(--secundario-color) !important; font-size: 5rem; font-family: 'PoppinsSB'; }
.text-resumen { color: #454544 !important; font-size: 1.2rem; letter-spacing: 2px; line-height: 25px; font-family: 'PoppinsL'; }
.centar_resumen { max-width: 80%; }

@media (min-width: 768px) { .custom-section { padding: 4rem 4rem 2rem 4rem; } }

@media (max-width: 768px) {
  .espacioTop{ margin-top:180px; }
  .separadorI { scroll-margin-top: 500px; }
  .separadormenuAg { scroll-margin-top: 360px; }
  .separadormenuB { scroll-margin-top: 350px; }
  .separadormenuE { scroll-margin-top: 450px !important; }
  .separadormenuT { scroll-margin-top: 370px; }
  .separadormenuD { scroll-margin-top: 380px; }
  .text-success { font-size: 3.0rem; }
  .text-white { color: var(--secundario-color) !important; font-size: 3.0rem; font-family: 'PoppinsSB'; }
  .text-resumen { font-size: 1.0rem; letter-spacing: 2px; line-height: 25px; font-family: 'PoppinsL'; }
  .centar_resumen { max-width: 100%; }
}

/* (Secciones requerimientos/montos etc. – se mantienen) */
.fondomontos {
  background-color: rgba(197, 217, 240, 0.5);
  min-height: 500px;
  display: flex; flex-direction: column; justify-content: center
}
.fondomontosborder {
  flex-grow: 1; max-width: calc(100% - 10px); margin: 0 auto;
  justify-content: center; border-top: 1px dashed #1D1D1B; border-bottom: 1px dashed #1D1D1B;
  padding: 0px; text-align: center; width: 95%;
}
.containerM { display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; }
.leftM { display: flex; align-items: center; }
.imageM { width: 80px; height: auto; margin-right: 10px; }
.titleM { margin: 0; font-size: 1.5em; }
.separatorM { width: 2px; height: 50px; background-color: #000; margin: 0 20px; }
.rightM { max-width: 800px; }
.summaryM { margin: 0; text-align: left; color: #343460; }
.h4M { font-size: 1.2em; letter-spacing: 0px; font-family: 'PoppinsB'; color: #343460; }
.linea-redondeada { width: 100; height: 10px; background-color: #343460; border-radius: 50px; }

@media (max-width: 768px) {
  .containerM { flex-direction: column; align-items: flex-start; }
  .separatorM { width: 100%; height: 2px; margin: 10px 0; }
  .rightM { max-width: 100%; margin-top: 10px; }
}

.h4CABold { font-size: 1.1em; letter-spacing: 0px; font-family: 'PoppinsSB'; color: #fff; }
.imgCA { width: 28px; height: 100%; }
.separadorImg { line-height: 40px }

@media (max-width: 768px) {
  .seccionCA { width: 110%; }
  .imagen-superior { width: 70%; height: auto; }
  .h5CA { font-size: 0.9em; letter-spacing: 0px; font-family: 'PoppinsR'; color: #fff; text-decoration: none; }
  .h5CA:hover { color: #C5D9F0; }
  .h4CABold { font-size: 0.9em; letter-spacing: 0px; font-family: 'PoppinsSB'; color: #fff; }
  .h4CABold:hover { color: #C5D9F0; }
  .contenidoB { width: 280px; margin-bottom: 5px; }
  .imgCA { width: 25px; height: 100%; }
  .imagen-superior { left: 12%; width: 80%; }
  .h3CA { font-size: 2.5em; letter-spacing: 0px; font-family: 'PoppinsB'; color: #fff; display: block; padding-top: 10px; line-height: 55px; text-align: center }
  .separadorImg { line-height: 200px }
}

/* FINALIZACION */
.containerF { display: flex; align-items: center; justify-content: flex-start; margin-left: 100px; }
.contenedorSC { overflow-y: scroll; max-height: 145px; }
.contenedorSC::-webkit-scrollbar { width: 15px; height: 15px; }
.contenedorSC::-webkit-scrollbar-thumb { background-color: #525B64; border-radius: 10px; border: 3px solid #EDEFEF; }
.contenedorSC::-webkit-scrollbar-track { background-color: #EDEFEF; border-radius: 10px; }

@media (max-width: 768px) {
  .containerF { display: flex; align-items: center; justify-content: flex-start; margin-left: 0px; margin-top: 20px }
}

/* DATOS CURIOSOS */
.imagen-superiorD { position: absolute; top: 10px; right: -40px; width: 25%; height: auto; z-index: 1; }
.imagen-inferiorD { position: absolute; bottom: 50px; right: 40px; width: 25%; height: auto; z-index: 3 }
.h3F { font-size: 2.5em; letter-spacing: 0px; font-family: 'PoppinsB'; color: #fff; display: block; padding-right: 100px; padding-top: 50px; line-height: 55px; }
.separadorImgF { line-height: 100px }

@media (max-width: 768px) {
  .imagen-inferiorD { bottom: 50px; right: 40px; width: 80%; }
  .h3F { font-size: 1.8em; letter-spacing: -2px; line-height: 30px; }
  .separadorImgF { line-height: 450px }
}

/* DATOS CURIOSOS layout */
.datos-curiosos { background: linear-gradient(to bottom, rgba(228, 236, 246, 1), 50%, rgba(244, 247, 251, 1) 50%); text-align: center; }
.espacioTituloDC { top: -4%; }
@media (min-width: 769px) and (max-width: 1366px) { .espacioTituloDC { top: -3%; } }

.custom-list { list-style: none; padding: 50px 200px; margin: 0; }
.custom-list li { padding: 20px 20px 20px 30px; position: relative; display: flex; align-items: center; gap: 10px; }
.custom-list li::before{
  content:""; width:8px; height:8px; background-color:#7167D0; border-radius:50%;
  position:absolute; left:10px; top:32px; transform:translateY(-50%);
}
.custom-list li span { display:block; padding-left:20px; }
.custom-list li::after{
  content:""; position:absolute; left:30px; bottom:0; width:calc(100% - 30px); height:2px; border-bottom:2px dashed rgba(113,103,208,0.4);
}

@media (max-width: 768px) {
  .custom-list { padding: 20px 40px; }
  .custom-list li { padding: 15px 10px 15px 20px; gap: 8px; }
  .custom-list li::before { width: 6px; height: 6px; }
  .custom-list li::after { width: calc(100% - 20px); }
}
@media (max-width: 480px) {
  .custom-list { padding: 10px 10px; }
  .custom-list li { padding: 10px 5px 10px 20px; gap: 5px; }
  .custom-list li::before { width: 5px; height: 5px; top: 20px; }
  .custom-list li::after { width: calc(100% - 15px); }
}
@media (max-width: 767px) { .espacioTituloDC { top: -4%; } }

/* Preguntas Frecuentes */
.contenedorPF { background-color: var(--secundario-color); }
.tituloPF { color: #fff; font-family: 'PoppinsB'; font-size: 1.6rem; letter-spacing: -1px; }

.accordion-button{
  background-color: transparent !important; border: none !important; box-shadow: none !important; padding: 10px 0;
  color: black; font-weight: bold;
}
.accordion-item { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; border-left: none; border-right: none; }
.accordion-button::after { transform: rotate(0deg); transition: transform 0.3s ease; }
.accordion-button:not(.collapsed)::after { transform: rotate(180deg); }
.contAcordeon { width: 60%; }
@media (max-width: 767px) { .contAcordeon { width: 90%; } }

/*****************/
/*  BOTONES      */
/*****************/

.fade-in { opacity: 0; transform: scale(0.98); visibility: hidden; }
.fade-in.visible { visibility: visible; animation: subtleFadeIn 0.8s ease-out forwards; }
@keyframes subtleFadeIn { 0%{opacity:0.4;} 100%{opacity:1;} }

@keyframes fadeFromLeft { 0%{opacity:0.2; transform: translateX(-30px);} 100%{opacity:1; transform: translateX(0);} }
@keyframes fadeFromRight{ 0%{opacity:0.2; transform: translateX(30px);} 100%{opacity:1; transform: translateX(0);} }

.fade-in{ opacity:0.4; }
.fade-from-left{ opacity:0; transform:translateX(-30px); transition: opacity 1.2s ease-out, transform 1.2s ease-out; }
.fade-from-right{ opacity:0; transform:translateX(30px); transition: opacity 1.2s ease-out, transform 1.2s ease-out; }
.fade-in.visible{ animation: subtleFadeIn 1.2s ease-in-out forwards; }
.fade-from-left.visible{ opacity:1; transform:translateX(0); }
.fade-from-right.visible{ opacity:1; transform:translateX(0); }

.delay-100.visible{ animation-delay: 0.2s; }
.delay-200.visible{ animation-delay: 0.6s; }
.delay-300.visible{ animation-delay: 1.0s; }
.delay-400.visible{ animation-delay: 1.4s; }

a.botFacebook:hover,
a.botWhatsapp:hover,
a.botConsulta:hover,
a.botCitasMedicas:hover { transform: translateY(-5px); transition: all 0.3s ease-out; }

.botones-grid{
  display:flex; flex-wrap:nowrap; gap:25px; justify-content:center; align-items:stretch;
}
a.botFacebook,a.botWhatsapp,a.botConsulta,a.botCitasMedicas,a.botEmergencia{
  background-color:#f5f5f4; color:#002654; border-radius:15px;
  flex:1 1 0; min-width:180px; max-width:250px; min-height:130px;
  display:flex; align-items:center; transition:all 0.3s ease; padding:20px 20px;
  text-decoration:none; box-shadow:0 4px 15px rgba(0,0,0,0.2); overflow:hidden; box-sizing:border-box;
  background-repeat:no-repeat; background-position:right 15px center; background-size:60px auto;
}
.bot-content{ width:70%; }
a.botEmergencia{ background-image:url('../images/bot_emergencia.png'); }
a.botCitasMedicas{ background-image:url('../images/bot_citas.png'); }
a.botWhatsapp{ background-image:url('../images/bot_whatsapp.png'); }
a.botFacebook{ background-image:url('../images/bot_facebook.png'); }
a.botConsulta{ background-image:url('../images/bot_consulta.png'); }
a.botFacebook:hover,a.botWhatsapp:hover,a.botConsulta:hover,a.botCitasMedicas:hover,a.botEmergencia:hover{
  background-color:#ebf7fc; transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}
a.botFacebook:active, a.botWhatsapp:active, a.botConsulta:active, a.botCitasMedicas:active, a.botEmergencia:active {
  transform: translateY(0px) scale(0.98) !important; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2) !important;
}
/* Texto de botones */
.bot-text { text-align:left; font-family:'PoppinsR', sans-serif; font-weight:400; font-size:1rem; line-height:1.3; }
.bot-text .first-word { font-weight:400; display:block; margin-bottom:3px; }
.bot-text .second-line { font-family:'PoppinsSB'; font-size:1.0rem; display:block; }
.bot-text .tercer-line { font-family:'PoppinsSB'; font-size:1.4rem; display:block; }

/* ========== SECCIÓN GUÍAS PASO A PASO ========== */
.guias-titulo, h2.guias-titulo{
  font-size: 2.5rem !important; font-weight: bold !important; color: #002654 !important;
  font-family: 'PoppinsB', sans-serif !important; margin-bottom: 50px;
}
.guias-grid{ display:flex; flex-wrap:wrap; gap:40px; justify-content:center; align-items:stretch; }
.guia-card{
  background-color:#ffffff; border:3px solid #002654; border-radius:20px;
  flex:1 1 300px; min-width:280px; max-width:350px; padding:40px 30px; text-decoration:none;
  transition:all 0.3s ease; box-shadow:0 4px 10px rgba(0,0,0,0.1); display:flex; flex-direction:column; align-items:center; text-align:center;
}
.guia-card:hover{ transform:translateY(-5px); box-shadow:0 8px 20px rgba(0,0,0,0.15); border-color:#004080; }
.guia-imagen{ margin-bottom:25px; display:flex; justify-content:center; align-items:center; }
.guia-imagen img{ width:120px; height:120px; object-fit:contain; }
.guia-texto{
  font-size:1.3rem; font-weight:600; color:#002654; font-family:'PoppinsSB',sans-serif; line-height:1.4;
}
@media (max-width: 768px) {
  .guias-grid{ gap:25px; }
  .guia-card{ flex:1 1 100%; max-width:100%; padding:30px 25px; }
  .guia-imagen img{ width:100px; height:100px; }
  .guia-texto{ font-size:1.15rem; }
}

/* Media queries botones */
@media (max-width: 1200px) {
  .botones-grid{ gap:12px; }
  a.botFacebook, a.botWhatsapp, a.botConsulta, a.botCitasMedicas, a.botEmergencia{
    min-width:160px; max-width:220px; min-height:120px; padding:18px 15px; background-size:55px auto;
  }
  .bot-text{ font-size:0.8rem; }
  .bot-text .second-line{ font-size:0.95rem; }
}
@media (max-width: 768px) {
  .botones-grid{ flex-wrap:wrap; gap:12px; }
  a.botFacebook, a.botWhatsapp, a.botConsulta, a.botCitasMedicas, a.botEmergencia{
    flex:1 1 calc(50% - 12px); min-width:150px; max-width:100%;
    min-height:110px; padding:16px 18px; background-size:55px auto; background-position:right 12px center;
  }
  .bot-text{ font-size:0.8rem; }
  .bot-text .second-line{ font-size:0.95rem; }
  .bot-content{ width:65%; }
}
@media (max-width: 480px) {
  .botones-grid{ flex-direction:column; gap:12px; }
  a.botFacebook, a.botWhatsapp, a.botConsulta, a.botCitasMedicas, a.botEmergencia{
    flex:1 1 100%; min-width:100%; max-width:100%; min-height:100px; padding:16px 18px;
    background-size:55px auto; background-position:right 15px center;
  }
  .bot-text{ font-size:0.85rem; }
  .bot-text .second-line{ font-size:1.0rem; }
  .bot-content{ width:65%; }
}

/*****  TITULOS *****/
.cel1{ width: 18%; padding-left: 10px; }
.cel2{ width: 82%; padding-left: 10px; }
@media (max-width: 768px) {
  .cel1{ width: 5%; padding-left: 10px; }
  .cel2{ width: 90%; padding-left: 10px; }
}

/* Banner superior del chatbot */
.banner-images{
  display:flex; justify-content:space-between; align-items:center; width:100%; height:100%;
}
.logo-img-left, .logo-img-right{
  width: 170px !important; height: 100px !important;
}
.logo-img-left{ margin-left:30px; }
.logo-img-right{ margin-right:30px; }

/* Lista beneficios */
.lista-beneficios{ list-style:none; padding:0; margin:0; margin-left:50px; }
.lista-beneficios li{
  position:relative; padding:0px 0 0px 20px; margin-bottom:10px; color:#343460;
  font-family:'PoppinsR'; font-size:1.4em; text-align:left;
}
.lista-beneficios li:before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:8px; height:8px; background-color:#261f47; border-radius:50%;
}
@media (max-width: 768px) {
  .lista-beneficios{ padding:0 15px; }
  .lista-beneficios li{ font-size:1em; padding:8px 0 8px 25px; }
  .lista-beneficios li:before{ width:6px; height:6px; }
}

/* Especialidades médicas (se mantiene) */
.especialidades-medicas{
  background-color:#2D2B4E; color:white; overflow:hidden; min-height:800px; padding-top:60px;
  display:flex; align-items:flex-start; position:relative; z-index:1;
}
.especialidades-medicas .container-fluid{ padding-top:40px; }
.especialidades-medicas h2{ font-size:2.5rem; line-height:1.3; color:white !important; }
.text-accent{ color:#e9337f !important; }
.floating-image{ max-width:45%; animation: float 3s ease-in-out infinite; margin-top:1rem; margin-left:auto; margin-right:2rem; }
@keyframes float { 0%{transform:translateY(0)} 50%{transform:translateY(-20px)} 100%{transform:translateY(0)} }

.floatig_image_chat
{
  max-width:100%; 
  animation: float1 3s ease-in-out infinite; 
  margin-top:2rem; /* Bajar el logo un poco */
  margin-left: 3rem; /* Mover el logo a la derecha para alinear el sombrero con el texto */
}
@keyframes float1 { 0%{transform:translateY(0)} 50%{transform:translateY(-20px)} 100%{transform:translateY(0)} }

.especialidades-lista{ list-style:none; padding:0; margin:0; }
.especialidades-lista li{
  position:relative; padding:2px 0 2px 30px; font-size:1.4rem; margin-bottom:1.2rem; line-height:1.2;
}
.especialidades-lista li::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:15px; height:15px; background-color:#002654; background-size:contain;
}

@media (max-width: 768px) {
  .especialidades-medicas h2{ font-size:2rem; text-align:center; }
  .floating-image{ max-width:35%; margin:0.5rem auto; }
  .especialidades-lista{ padding:0 20px; margin-bottom:2rem; }
  .especialidades-lista li{ font-size:1.1rem; padding:2px 0 2px 25px; margin-bottom:2px; }
  .especialidades-lista li::before{ width:8px; height:8px; }
  .chatbot-placeholder, .chatbot-left
  { 
    animation:none !important; 
    transform:none !important; 
    opacity:1 !important; 
    transition:none !important; 
  }
  .banner-images{ display:flex; justify-content:space-between; align-items:center; width:100%; height:100%; }
  .logo-img-left, .logo-img-right{ width:80px !important; height:40px !important; object-fit:contain; }
  .logo-img-left{ margin-left:30px; }
  .logo-img-right{ margin-right:30px; }
}

/* ===== SECCIÓN CHATBOT ===== */

/* Sección base: ocupa viewport, dejando espacio a navbar fijo */
.chatbot-section{
  background:#002654 !important;
  min-height: 100vh !important;
  height: 100vh !important;
  padding-top: var(--navbar-height);
  padding-bottom:0;
  box-sizing:border-box;
  display:flex;
  position:relative;
}

/* Grid interno a toda altura */
.chatbot-section .container,
.chatbot-section .row
{ 
  height: 100% !important;
  min-height: 100% !important;
  display: flex !important;
  align-items: stretch !important;
}

/* Caja del chatbot: UNICA definición */
.chatbot-placeholder{
  display: flex !important;
  flex-direction: column !important;
  background-color:#ffffff;
  width:100%;
  height: 100% !important;
  min-height: 100% !important;
  flex: 1 1 auto !important;
  box-shadow:0 8px 25px rgba(0,0,0,0.2);
  transition:all 0.3s ease;
  overflow:hidden;
  border-radius:8px;
  margin-top:0 !important;        /* neutraliza el inline -20px si existiera */
  position: relative;
  border: 2px solid #ffffff;      /* borde visible sobre el fondo azul */
}

/* EXCEPCIÓN: En móviles, la altura se controla desde el media query específico */
@media (max-width: 768px) {
  .chatbot-placeholder {
    height: auto !important; /* Permitir que el media query de móviles controle la altura */
    min-height: auto !important;
  }
}
.chatbot-placeholder:hover{ box-shadow:0 12px 35px rgba(0,0,0,0.25); transform:none !important; }

/* Banner interno del chatbot */
#chatbot-banner{
  flex:0 0 auto;
  border-bottom:1px solid rgba(0,0,0,.06);
  background:#f9fafb;
}
#chatbot-banner .banner-images{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}


/* Área WebChat: ocupa TODO el espacio restante */
#webchat{
  flex: 1 1 auto !important;   /* ocupa el resto */
  min-height: 0 !important;    /* evita colapso de flex-hijo */
  display: flex !important;    /* permite estirar su hijo interno */
  overflow: hidden !important; /* scroll lo maneja el hijo */
}
/* Web Chat interno a 100% */
#webchat > *{ 
  height:100%;
  overflow: auto !important;
}

/* Lado derecho (imagen+textos) */
.chatbot-right{
  display:flex; 
  flex-direction:column; 
  align-items:center; 
  justify-content: center;
  gap:2rem; 
  margin-top:0;
}

/* ============================================================
   MEDIA QUERIES DEL CHATBOT - ORGANIZADAS POR RESOLUCIÓN/ALTURA
   ============================================================
   Orden lógico:
   1. Móviles (max-width: 768px)
   2. Tablets (max-width: 1024px)
   3. Desktop/PC (min-width: 769px)
   4. Por altura específica (max-height: 768px, min-height: 901px)
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   RESOLUCIÓN: 1366x768 (Tablets/Laptops - Altura 768px)
   Ajustes de altura, padding y tamaño del logo/texto
   ──────────────────────────────────────────────────────────── */
@media screen and (min-width:768px) and (max-width:1366px) and (max-height:768px){
  /* Sección del chatbot - Altura y padding */
  .chatbot-section {
    min-height: 100vh !important;
    height: 100vh !important;
    padding-top: 90px !important;
    padding-bottom: 1rem !important;
  }
  
  /* Contenedor del chatbot - Altura máxima */
  .chatbot-section .container {
    max-height: calc(100vh - 90px - 1rem) !important;
    height: 100% !important;
    min-height: calc(100vh - 90px - 1rem) !important;
    display: flex !important;
    align-items: stretch !important;
    padding-top: 0 !important;
  }
  
  /* Paneles izquierdo y derecho - Altura completa */
  .chatbot-left,
  .chatbot-right {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* Placeholder del chatbot - Altura completa */
  /* COMENTADO: Esta regla entra en conflicto con la regla específica de móviles (max-width: 768px) */
  /*
  .chatbot-placeholder {
    height: 100% !important;
    flex: 1 1 auto !important;
  }
  */
  
  /* Ajustes de texto - Tamaños reducidos para altura 768px */
  .chatbot-text-bienvenido{ font-size:2.5rem!important; margin-bottom:5px!important; }
  .chatbot-text-organizar{ font-size:1.4rem!important; margin:5px 0!important; }
  .chatbot-text-aqui{ font-size:2rem!important; margin:10px 0 0 0!important; }
  .chatbot-text-overlay{ 
    margin-bottom:15px!important; 
    text-align:center !important; 
  }
  
  /* Ajustes del contenedor de imagen - Centrado */
  .chatbot-image-container{ 
    align-items:center !important; 
    justify-content:center !important; 
    width: 100% !important;
  }
  
  /* Ajustes del logo Izy - Tamaño y posición */
  .floatig_image_chat{ 
    max-width:100% !important; 
    width: auto !important;
    height: auto !important;
    margin-top:2rem !important; /* Bajar el logo un poco */
    margin-left:3rem !important; /* Mover el logo a la derecha para alinear el sombrero con el texto */
    margin-right:auto !important; 
    display: block !important;
  }
}

/* ────────────────────────────────────────────────────────────
   RESOLUCIÓN: Desktop/PC (min-width: 769px)
   Padding superior e inferior del contenedor del chatbot
   ──────────────────────────────────────────────────────────── */
@media screen and (min-width: 769px) {
  .chatbot-section .container {
    padding-top: 1rem !important;
    padding-bottom: 2rem !important;
  }
  
  .chatbot-placeholder {
    margin-top: 0.5rem !important;
    margin-bottom: 1.5rem !important;
  }
}

/* ────────────────────────────────────────────────────────────
   RESOLUCIÓN: Altura mayor a 900px (Pantallas altas)
   Padding superior e inferior más grande para que no se vea tan alto
   ──────────────────────────────────────────────────────────── */
@media screen and (min-height: 901px) {
  .chatbot-section {
    padding-top: calc(var(--navbar-height) + 6rem) !important;
    padding-bottom: 6rem !important;
    min-height: auto !important;
    height: auto !important;
  }
  
  .chatbot-section .container {
    max-height: calc(100vh - var(--navbar-height) - 12rem) !important;
    height: auto !important;
    min-height: calc(100vh - var(--navbar-height) - 12rem) !important;
  }
}

/* Contenedores auxiliares del chatbot */
.chatbot-container{ width:100%; max-width:1200px; margin:0 auto; padding:8rem; }
.chatbot-content{ display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.chat-window{ border-radius:10px; padding:1rem; }
.logo-izybot{ max-width:300px; margin-bottom:0rem; }
.chatbot-image{ width:10% !important; display:block; height:auto; position:relative; }

/* Textos sobre la imagen del bot */
.chatbot-image-container
{ 
  position:relative; 
  display:flex; 
  flex-direction:column; 
  align-items:center;
  width: 100%; 
}
.chatbot-text-overlay{ 
  position:relative; 
  text-align:center; 
  z-index:10; 
  margin-bottom:20px; 
}
.chatbot-text-bienvenido{ font-size:3rem; font-weight:bold; color:#b1d8e5; margin:0; line-height:1.2; font-family:'PoppinsB',sans-serif; }
.chatbot-text-organizar{ font-size:1.6rem; font-weight:500; color:white; margin:10px 0; line-height:1.3; font-family:'PoppinsR',sans-serif; }
.chatbot-text-aqui{ font-size:2.5rem; font-weight:bold; color:#fff800; margin:15px 0 0 0; line-height:1.2; font-family:'PoppinsB',sans-serif; text-transform:uppercase; }
.info-image{ max-width:80%; height:auto; margin-top:-2rem; }

/* ────────────────────────────────────────────────────────────
   RESOLUCIÓN: Móviles (max-width: 768px)
   Ajustes específicos para dispositivos móviles
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  body{ overflow-x:hidden; }

  .chatbot-section{
    background:#261f47;
    padding-top:50px !important; /* Ajustado a 50px para un espacio superior más compacto */
    padding-bottom:0; margin:0; position:relative;
    min-height:auto; height:auto; width:100%; overflow:visible; border-bottom:none;
  }

  .chatbot-right, .logo-izybot{ display:none !important; }

  /* Eliminar padding lateral del contenedor del chatbot para reducir espacios azules */
  .chatbot-section .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0.5rem !important; /* Agregar pequeño padding superior para evitar corte */
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Eliminar padding lateral del chatbot-left para reducir espacios azules */
  .chatbot-left {
    padding: 0 !important; /* Eliminar todo el padding lateral */
    flex: 0 0 100% !important;
    max-width: 100% !important;
    height: auto !important; /* Permitir que el contenido controle la altura */
    min-height: auto !important;
  }

  /* Asegurar que el placeholder ocupe todo el ancho disponible y tenga espacio arriba */
  .chatbot-placeholder{
    border-radius: 1rem !important;
    width: 100% !important;
    margin: 0 !important;
    height: 80vh !important;
    min-height: 80vh !important; /* Forzar altura mínima también */
    max-height: 80vh !important; /* Limitar altura máxima también */
    margin-top: 0.5rem !important; /* Agregar pequeño margen superior para evitar corte del banner */
     /* Borde de prueba - agregado punto y coma */
    border: 0px solid red !important; /* Borde de prueba - agregado punto y coma */
     display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important; /* Evitar que se desborde */
  }

  /* La ventana del chat debe ocupar toda la altura del placeholder en móviles */
  .chat-window{
    height: 100% !important; /* Cambiar a 100% para que ocupe todo el placeholder */
    min-height: 0 !important; /* Permitir que flex controle la altura */
    width:100%;
    padding:0;
    margin:0;
    border:none;
    border-radius:0;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* Asegurar que el webchat ocupe el espacio disponible */
  .chatbot-placeholder #webchat {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
  }

  .container, .container-fluid{ padding:0; margin:0; max-width:100%; }
  .row{ margin:0; width:100%; }

  /* Sección de botones pegada al chatbot */
  .botones-section, section[style*="background: #cbcadd"]{
    padding:15px 0; margin:0; background:#cbcadd !important; border-top:none;
  }
  section[style*="background: #cbcadd"] .container{ padding:0 15px !important; }

  .botFacebook, .botWhatsapp, .botConsulta, .botCitasMedicas{ margin:5px auto; background-size:contain !important; }

  #requisitos, #montos, #comoAplicar, #finalizacion, #datosCuriosos, #PF, #documentos{
    margin-top:0 !important; padding-top:20px !important;
  }
}

/* ────────────────────────────────────────────────────────────
   RESOLUCIÓN: Tablets/iPad (max-width: 1024px)
   Asegurar que el chat ocupe el 100% cuando el panel derecho está oculto
   ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .chatbot-section .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .chatbot-left {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Ocultar panel derecho en tablets para evitar "hueco" de 2 columnas */
  .chatbot-right { display: none !important; }
}

/* Especialidades: anclas */
#especialidades{ scroll-margin-top:180px; scroll-behavior:smooth; padding-top:120px; }
@media (max-width: 768px) { #especialidades{ scroll-margin-top:200px; padding-top:150px; } }

/* Web Chat ocupa toda la caja blanca (refuerzo final) */
/* COMENTADO: La altura de 10px estaba limitando el webchat - ahora se maneja en media queries móviles */
/*
.chatbot-placeholder #webchat{ width:100%; height:10px; margin-bottom: 0px }
.chatbot-placeholder #webchat > *{ height:100%;  }
*/

/* Regla específica para móviles - webchat debe ocupar el espacio disponible */
@media (max-width: 768px) {
  .chatbot-placeholder #webchat{ 
    width:100% !important; 
    height: calc(100% - 60px) !important; /* Restar altura del banner */
    margin-bottom: 0px !important;
    flex: 1 1 auto !important;
  }
  .chatbot-placeholder #webchat > *{ 
    height:100% !important; 
  }
}

.chatbot-placeholder > #chatbot-banner{
  position: static !important;   /* o relative; static evita offsets */
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  inset: auto !important;

  width: 100% !important;        
  height: auto !important;       /* toma alto natural del contenido */
  margin: 0 !important;          /* sin 1px que desalinean */
  display: flex !important;      /* mantiene layout interno */
  align-items: center !important;
  justify-content: space-between !important;

  background-color: #f9fafb !important;  /* o #002654 si lo quieres oscuro */
  box-shadow: 0 1px 0 rgba(0,0,0,.06) !important;
  z-index: auto !important;       /* deja de sobreponerse al chat */
  background-color: #002654 !important;

}
#chatbot-banner .banner-images{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
}
/* =============== STACKED/LIST LAYOUT =============== */
/* 1) Espaciado vertical entre attachments del layout list */
#webchat .webchat__stacked-layout {
  display: flex;
  flex-direction: column;
}

/* 2) Quitar “fondo de burbuja” en los ATTACHMENTS para no duplicar estilos */
#webchat .webchat__stacked-layout__attachment.webchat__bubble {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
#webchat .webchat__stacked-layout__attachment .webchat__bubble__content {
  padding: 0 !important; /* que la card controle su propio padding */
}

#webchat .webchat__stacked-layout__attachment .ac-pushButton:hover  
{
  background: rgba(10, 42, 94, 0.08) !important;
}

#webchat .webchat__stacked-layout__attachment .ac-pushButton:active { filter: brightness(0.90); }
#webchat .webchat__stacked-layout__attachment .ac-pushButton[disabled] {
  background: #9CA3AF !important;
}
/* Accesible: focus visible (teclado) */
#webchat .webchat__stacked-layout__attachment .ac-pushButton:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(10,42,94,.25) !important; /* “ring” */
}

/* Separadores verticales entre botones (Adaptive Cards pone <div style="height:8px">) */
#webchat .webchat__stacked-layout__attachment .ac-actionSet > div[style*="height"] {
  height: 10px !important;
}

#webchat .webchat__stacked-layout__attachment .ac-pushButton {
  /* Full width + borde visible */
  width: 100% !important;
  box-sizing: border-box !important;
  border: 1.5px solid #0A2A5E !important;   /* cambia el color si deseas */
  border-radius: 15px !important;

  /* Fondo transparente y texto a la izquierda */
  background: transparent !important;
  color: #0A2A5E !important;
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  text-align: left !important;

  /* Padding interno (números alineados como en tu mock) */
  padding: 5px 14px !important;
  min-height: 20px !important;
  font-size: 15px;
}

/* El wrapper del texto que pone Adaptive Cards: forzamos left + ocupar todo */
#webchat .webchat__stacked-layout__attachment .ac-pushButton > div {
  width: 100% !important;
  text-align: left !important;
}

/* ====== MARCADA/SELECCIONADA (texto blanco + fondo azul) ====== */
#webchat .webchat__stacked-layout__attachment .ac-pushButton.is-active,
#webchat .webchat__stacked-layout__attachment .ac-pushButton[aria-pressed="true"],
#webchat .webchat__stacked-layout__attachment .ac-pushButton[aria-selected="true"] {
  background: #0A2A5E !important;
  color: #FFFFFF !important;
}
/* Asegurar que el wrapper interno hereda el color */
#webchat .webchat__stacked-layout__attachment .ac-pushButton.is-active > div,
#webchat .webchat__stacked-layout__attachment .ac-pushButton[aria-pressed="true"] > div,
#webchat .webchat__stacked-layout__attachment .ac-pushButton[aria-selected="true"] > div {
  color: inherit !important;
}



#webchat .webchat__adaptive-card-renderer .ac-actionSet .ac-pushButton {
  /* Full width + borde visible */
  width: 100% !important;
  box-sizing: border-box !important;
  border: 1.5px solid #0A2A5E !important;   /* cambia el color si deseas */
  border-radius: 15px !important;

  /* Fondo transparente y texto a la izquierda */
  background: transparent !important;
  color: #0A2A5E !important;
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  text-align: left !important;

  /* Padding interno (números alineados como en tu mock) */
  padding: 5px 14px !important;
  min-height: 20px !important;
  font-size: 15px;
}

/* El wrapper del texto que pone Adaptive Cards: forzamos left + ocupar todo */
#webchat .webchat__adaptive-card-renderer .ac-actionSet .ac-pushButton > div {
  width: 100% !important;
  text-align: left !important;
}

/* ====== MARCADA/SELECCIONADA (texto blanco + fondo azul) ====== */
#webchat .webchat__adaptive-card-renderer .ac-actionSet .ac-pushButton.is-active,
#webchat .webchat__adaptive-card-renderer .ac-actionSet .ac-pushButton[aria-pressed="true"],
#webchat .webchat__adaptive-card-renderer .ac-actionSet .ac-pushButton[aria-selected="true"] {
  background: #0A2A5E !important;
  color: #FFFFFF !important;
}
/* Asegurar que el wrapper interno hereda el color */
#webchat .webchat__adaptive-card-renderer .ac-actionSet .ac-pushButton.is-active > div,
#webchat .webchat__adaptive-card-renderer .ac-actionSet .ac-pushButton[aria-pressed="true"] > div,
#webchat .webchat__adaptive-card-renderer .ac-actionSet .ac-pushButton[aria-selected="true"] > div {
  color: inherit !important;
}





/* ESTILOS SOLO PARA MÓVILES (pantallas menores a 768px) */
@media (max-width: 768px) {
  /* Grid de 2 columnas en móviles */
  .webchat__carousel-filmstrip__attachments {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-content: start !important;
    gap: 1rem !important;
    padding: 12px;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  /* Grid de 2 columnas para la lista */
  .react-film__filmstrip__list {
    transform: none !important;
    transition: none !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-content: start !important;
    gap: 1rem !important;
  }
  /* Ocultar controles de navegación del carrusel en móvil */
  .webchat__carousel-filmstrip .webchat__carousel-button {
    display: none !important;
  }
  
  /* Ajuste específico en móvil: solo limitar altura máxima (el resto se define globalmente) */
  .webchat__carousel-filmstrip-attachment .ac-image {
    max-height: 200px !important;
  }

  /* Contenedor de la imagen en móvil */
  .webchat__carousel-filmstrip-attachment .ac-container.ac-adaptiveCard {
    width: 100%;
    padding: 8px !important;
  }

  /* Ajustar el texto debajo de las imágenes en móvil */
  .webchat__carousel-filmstrip-attachment .ac-textBlock {
    font-size: 13px !important;
    padding: 4px 0 !important;
  }
  /* LTR: elimina el padding-left del 1er item del carrusel (con o sin avatar) */
  #webchat .webchat__carousel-filmstrip-attachment.webchat__carousel-filmstrip-attachment--hide-avatar:first-child:not(.webchat__carousel-filmstrip-attachment--rtl),
  #webchat .webchat__carousel-filmstrip-attachment.webchat__carousel-filmstrip-attachment--show-avatar:first-child:not(.webchat__carousel-filmstrip-attachment--rtl) {
    padding-left: 10px !important;   /* ajusta a otro valor si quieres un gap, p.ej. 12px */
  }

  /* RTL (por si acaso): quita el padding-right del 1er item */
  #webchat .webchat__carousel-filmstrip-attachment.webchat__carousel-filmstrip-attachment--rtl:first-child {
    padding-right: 10px !important;
  }
  
}

/* =============================================================
   CARRUSEL – DOCUMENTACIÓN Y AJUSTES
   -------------------------------------------------------------
   Objetivo:
   - El contenedor del filmstrip y la lista interna (UL) usan grid
     para mostrar 5 columnas por defecto, sin solapamiento ni overflow.
   - Los breakpoints reducen columnas: 3 en ≤1080px y 2 en ≤768px.

   Cómo ajustar:
   - Cambia el número de columnas base en la regla de
     #webchat .webchat__carousel-filmstrip__attachments y
     #webchat .react-film__filmstrip__list.
   - Para modificar columnas por breakpoint, usa los bloques @media
     al final de esta sección.
   - Si se quiere volver al carrusel horizontal con scroll,
     reemplaza display:grid por display:flex y remueve white-space/transform.

   Consideraciones:
   - Evitamos min-width fijos en LI y en las tarjetas para que el grid
     distribuya correctamente los elementos.
   - Las imágenes (.ac-image) se ajustan globalmente: width 100%,
     height auto, object-fit cover y borde redondeado.
   - En móvil solo se limita max-height para evitar tarjetas demasiado altas.
   ============================================================= */
#webchat .webchat__carousel-filmstrip__attachments{
  width:100% !important;
  max-width:100% !important;
  display:grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)); /* 5 columnas iguales (base) */
  gap:12px !important;            /* separación entre tarjetas */
  overflow:hidden !important;     /* evita scroll y que sobresalga */
  padding:0 !important;
  margin-left: 0 !important;
}

/* Separación vertical entre el mensaje del carrusel y la sección complementaria (navegación/indicadores) */
#webchat .webchat__carousel-filmstrip__message{
  margin-bottom: 0.6rem !important;
}
#webchat .webchat__carousel-filmstrip__complimentary{
  margin-top: 0 !important;
}

/* CORRECCIÓN: apuntar al UL real del componente filmstrip (react-film__filmstrip__list)
   y desactivar el layout interno de carrusel para usar un grid de 5 columnas */
#webchat .webchat__carousel-filmstrip__attachments .react-film__filmstrip__list,
#webchat .react-film__filmstrip__list{
  width:100% !important;
  max-width:100% !important;
  display:grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important; /* base 5 columnas */
  gap:12px !important;
  white-space: normal !important;   /* evita una sola fila por nowrap */
  transform: none !important;       /* neutraliza transform del carrusel */
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
/* Asegurar que cada LI se ajuste a su celda del grid y no tenga min-width fijo */
#webchat .react-film__filmstrip__list > li,
#webchat li.react-film__filmstrip__item,
#webchat .webchat__carousel-filmstrip__attachments > .webchat__carousel-filmstrip-attachment{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  box-sizing:border-box !important;
  display:block !important;
}
#webchat .webchat__carousel-filmstrip-attachment .ac-container,
#webchat .webchat__carousel-filmstrip-attachment .ac-adaptiveCard{
  width:100% !important;
  max-width:100% !important;
}
#webchat .webchat__carousel-filmstrip-attachment{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  flex:0 0 auto !important;       /* neutraliza el comportamiento flex del carrusel */
  overflow:hidden !important;
  display:block !important;       /* asegura el comportamiento de bloque dentro del grid */
}
#webchat .webchat__carousel-filmstrip-attachment .ac-image{
  display:block !important;
  width:100% !important;
  height:auto !important;
  object-fit:cover !important;    /* cubre toda la tarjeta manteniendo aspecto */
  border-radius: 8px !important;
}

/* En pantallas pequeñas puedes reducir el número de columnas para que no se comprima demasiado */
@media (max-width: 1080px){
  #webchat .webchat__carousel-filmstrip__attachments,
  #webchat .react-film__filmstrip__list{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 768px){
  #webchat .webchat__carousel-filmstrip__attachments,
  #webchat .react-film__filmstrip__list{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}