/* Variables de color */
:root {
  --k-primary: #001633;
  --k-secondary: #2746a8;
  --k-accent: #5f7eff;
}

body {
  font-family: 'Inter', sans-serif;
}

.bg-primary-gradient {
  background: linear-gradient(120deg, var(--k-primary) 0%, var(--k-secondary) 100%);
}

/* HERO */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.4);
}
.hero-content {
  position: relative;
  z-index: 2;
  padding: 2rem;
}

/* SERVICIOS */
.service-icon {
  width: 64px;
  height: 64px;
}
.service-card {
  transition: transform .2s;
}
.service-card:hover {
  transform: translateY(-4px);
}

/* ABOUT */
.about-img {
  max-width: 100%;
  height: auto;
}

/* FOOTER */
.brand-logo {
  height: 55px;
  aspect-ratio: 1/1;
  object-fit: contain;
  filter: brightness(0) invert(1);
  transition: transform .2s ease;
}
.brand-logo:hover {
  transform: scale(1.08);
}

/* GLASS (Login Modal) */
.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  border-radius: 1rem;
  color: #fff;
}

/* RESPONSIVE ADJUSTMENTS */
@media (max-width: 992px) {
  .hero {
    min-height: 60vh;
  }
  .hero .display-4 {
    font-size: 2.5rem;
  }
  .hero .lead {
    font-size: 1rem;
  }
}

@media (max-width: 768px) {
  .service-icon {
    width: 48px;
    height: 48px;
  }
  .hero-content {
    padding: 1rem;
  }
}

@media (max-width: 576px) {
  .service-card {
    padding: 1rem;
  }
  .brand-logo {
    height: 45px;
  }
  footer {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

/* --- Chatbot --- */
/* Modal del chat más ancho en pantallas grandes */
@media (min-width: 576px) {
  .modal-dialog.chat-modal{
    width: 100%;
    max-width: 1000px;        /* AJUSTA ESTE VALOR: 900, 1000, 1100... */
    margin: 1.75rem auto;     /* centrado vertical/horizontal */
  }

  #chatModal .modal-content{
    height: 70vh;             
  }

  #chatModal .modal-body{
    overflow-y: auto;
    max-height: calc(80vh - 3.5rem);
  }
}

.chat-bubble{
  position:fixed;bottom:20px;right:24px;z-index:1080;
  background:#022b68;border:none;width:50px;height:50px;
  border-radius:50%;box-shadow:0 0 12px rgba(0,0,0,.3);
  display:flex;align-items:center;justify-content:center
}
.chat-bubble img{filter:invert(1)}
.chat-log{  max-height: none;      /* que crezca todo lo que quiera */
  overflow-y: visible;   /* sin scroll interno */
  font-size: .9rem;
  padding-right: 0;
}
.chat-msg-user{text-align:right}
.chat-msg-ai{color:#023475}
/* --- Formato de mensajes IA --- */
.chat-msg-ai {
  font-size: .9rem;
  line-height: 1.5;
  color: var(--k-accent);   /* azul Kolabora */
}
.chat-msg-ai h3,
.chat-msg-ai h4,
.chat-msg-ai h5{
  font-weight: 700;
  margin: 0.6rem 0 0.4rem;
}
.chat-msg-ai p{
  margin-bottom: .5rem;
}
.chat-msg-ai strong{
  font-weight: 700;
}
.chat-msg-ai code{
  font-family: "JetBrains Mono", monospace;
  background: #00163322;
  padding: 2px 4px;
  border-radius: 4px;
}

/* style.css  – al final del archivo */
/* Garantiza que ni la tarjeta ni la imagen agreguen fondo */
.sara-card,
.sara-card .card-img-top{
  background-color: transparent !important;
}

/* Garantiza que ni la tarjeta ni la imagen agreguen fondo */
.card.bg-transparent,
.card.bg-transparent .card-img-top{
  background-color: transparent !important;
}
/* Tablas dentro de las respuestas de la IA */
.chat-msg-ai .chat-table-wrapper{
  overflow-x: auto;
  margin: 0.5rem 0 0.75rem;
}

.chat-msg-ai .chat-table-wrapper table{
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.chat-msg-ai .chat-table-wrapper th,
.chat-msg-ai .chat-table-wrapper td{
  border: 1px solid #e5e7eb;
  padding: 6px 8px;
  vertical-align: top;
}

.chat-msg-ai .chat-table-wrapper th{
  background: #f8fafc;
  font-weight: 600;
}

/* Separadores --- del markdown */
.chat-msg-ai hr{
  border: 0;
  border-top: 1px solid #e5e7eb;
  margin: 0.75rem 0;
}
/* Hacer que la tarjeta de texto use todo el ancho disponible */
.chat-msg-ai .chat-card{
  max-width: 100% !important;
}