/* ===== Blanco y Negro - Responsive Enhancements ===== */

:root {
  --bg-light: #ffffff;
  --bg-dark: #000000;
  --text-light: #ffffff;
  --text-dark: #000000;
  --primary: #1d4ed8;
  --primary-hover: #2563eb;
}

/* Base Styles */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: Arial, sans-serif;
  background-color: var(--bg-light);
  color: var(--text-dark);
}
body {
  display: flex;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

#appContentWrapper {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: var(--bg-dark);
  transition: padding-left 0.3s ease-in-out;
}

.chat-area {
  flex-grow: 1;
  overflow-y: auto;
  background-color: var(--bg-light);
  padding: 1rem;
}

.message-bubble {
  max-width: 80%;
  word-wrap: break-word;
  padding: 0.75rem;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  margin-bottom: 0.5rem;
}

.user-message .message-bubble {
  background-color: var(--bg-dark);
  color: var(--text-light);
  border: 1px solid var(--text-light);
  align-self: flex-end;
}

.bot-message .message-bubble {
  background-color: var(--bg-light);
  color: var(--text-dark);
  border: 1px solid var(--text-dark);
  align-self: flex-start;
}

header, footer {
  flex-shrink: 0;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--bg-dark);
  color: var(--text-light);
  padding: 1rem 1rem;
  border-bottom: 1px solid #333;
  flex-wrap: wrap;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header-left img {
  height: 4rem;
}

.model-selector-container {
  position: relative;
  width: 200px;
}

input,
.model-selector-button {
  background-color: var(--bg-light);
  color: #000000 !important;
  border: 1px solid var(--text-dark);
  padding: 0.5rem;
  border-radius: 0.375rem;
}

input:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--text-dark);
}

#sendButton {
  background-color: var(--bg-dark);
  color: var(--text-light);
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
 /* --- INICIO DE LA CORRECCIÓN CLAVE --- */
  /* Aplicamos Flexbox para controlar la alineación interna */
  display: flex;
  align-items: center;     /* Centra verticalmente el SVG y el texto */
  justify-content: center; /* Centra horizontalmente el contenido */
  /* --- FIN DE LA CORRECCIÓN CLAVE --- */
}

#sendButton svg {
  flex-shrink: 0;
}

#sendButton:hover {
  background-color: #333;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-light);
}
::-webkit-scrollbar-thumb {
  background: var(--bg-dark);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #333;
}

/* Buttons in footer */
footer {
  position: relative;
  padding: 1rem 0; /* Elimina padding lateral, solo vertical */
  background-color: var(--bg-dark);
  color: var(--text-light);
}

footer .container,
footer .footer-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
  gap: 1rem;
}

footer .footer-content > .text-center,
footer .footer-content > .footer-text {
  flex: 1 1 0;
  text-align: left;
}

footer .footer-content > #BtnAyuda,
footer .footer-content > .faq-button {
  flex-shrink: 0;
  margin-top: 0;
}

/* -------------------------------------------------------------------------- */
/*                      ESTILOS PARA LA BURBUJA DE CARGA                      */
/* -------------------------------------------------------------------------- */

.loading-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
padding: 10px 0; /* Espaciado para que no se vea apretado */
}
.loading-dots span {
  /* Estilo base de cada punto */
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #000000; /* Un color gris para los puntos */
  margin: 0 3px; /* Espacio entre los puntos */
  /* Aplicación de la animación */
  animation: dot-pulse 1s infinite ease-in-out both;
}

/* --- La magia del retraso en la animación --- */
/* El primer punto empieza la animación inmediatamente */
.loading-dots span:nth-child(1) {
  animation-delay: -0.32s;
}
/* El segundo punto empieza un poco después */
.loading-dots span:nth-child(2) {
  animation-delay: -0.16s;
}
/* El tercer punto empieza al final, creando el efecto de onda */
.loading-dots span:nth-child(3) {
  animation-delay: 0s;
}
/* --- Definición de la animación (Keyframes) --- */
@keyframes dot-pulse {
  0%, 80%, 100% {
    transform: scale(0); /* El punto es invisible */
  }
  40% {
    transform: scale(1.0); /* El punto aparece a su tamaño completo */
  }
}


@media (max-width: 600px) {
  footer .container,
  footer .footer-content {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  footer .footer-content > .text-center,
  footer .footer-content > .footer-text {
    text-align: center;
    margin-bottom: 0.25rem;
  }
  footer .footer-content > #BtnAyuda,
  footer .footer-content > .faq-button {
    align-self: center;
    width: 100%;
    min-width: 0;
    font-size: 1rem;
    padding: 0.6rem 0;
    margin-top: 0.25rem;
  }
}

/* Remove absolute positioning for BtnAyuda in all cases */
footer #BtnAyuda {
  position: static !important;
  right: unset !important;
  left: unset !important;
  bottom: unset !important;
  margin-top: 0 !important;
}

/* Animations */
@keyframes shine-glow {
  0%, 100% {
    box-shadow: 0px 10px 10px rgba(0,0,0,0.15), 0 0 5px rgba(200,200,255,0.3);
  }
  50% {
    box-shadow: 0px 10px 15px rgba(0,0,0,0.2), 0 0 15px rgba(220,220,255,0.6);
  }
}

/* Responsive Breakpoints */
/* Large screens */
@media (min-width: 1025px) {
  .chat-area { padding: 2rem; }
  .message-bubble { max-width: 60%; }
}

/* Medium screens */
@media (max-width: 1024px) {
  header { padding: 0.75rem 1rem; }
  .header-left img { height: 3.5rem; }
  .model-selector-container { width: 150px; }
  #sendButton, input { padding: 0.4rem 0.8rem; }
  .message-bubble { max-width: 75%; }
}

/* Small screens */
@media (max-width: 768px) {
  header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .header-left { margin-bottom: 0.5rem; }
  .model-selector-container { width: 100%; }
  footer { padding: 0.5rem; }
  footer #BtnAyuda,
  footer #BtnSugerencia { bottom: 0.75rem; }
  .chat-area { padding: 1rem 1.75rem; }
  .message-bubble { max-width: 90%; }
}

/* Extra small screens */
@media (max-width: 640px) {
  #sendButton { width: 20%; margin-top: 0.1rem; }
  input { width: 100%; }
  .chat-area { padding: 1rem 1.75rem; }
  .message-bubble { max-width: 95%; padding: 0.5rem; }
  pre, code { font-size: 0.85rem; }
}
/* Ultra small screens: menos de 600px */
@media (max-width: 600px) {
  header {
    padding: 0.5rem 0.75rem;
  }

  /* Logo */
  .header-left img {
    height: 2rem; /* antes 4rem */
    margin-right: 0.75rem;
  }

  /* Títulos */
  .header-left .text-3xl {
    font-size: 1.25rem; /* de ~1.875rem (3xl) a ~1.25rem */
    margin-top: 0.25rem;
  }
  #sede {
    font-size: 0.75rem; /* de text-s (~0.875rem) a ~0.75rem */
    padding: 0.25rem 0.5rem;
  }

  /* Imagen del vehículo */
  #vehicleImage {
    height: 2.5rem; /* antes 4rem/5rem dependiendo */
  }
  #vehicleImageContainer {
    padding: 0.5rem;
  }

  /* Selector de modelo */
  .model-selector-button {
    padding: 0.5rem 0.75rem; /* más compacto */
    font-size: 0.875rem;
  }
  .model-selector-container {
    width: 120px; /* antes 100% en <768px, ahora fijo más pequeño */
  }

  /* Ajuste general de espaciados */
  .flex.items-center.mb-4.sm\:mb-0 {
    margin-bottom: 0.25rem;
  }
  .flex.flex-col.sm\:flex-row.items-center.mt-4.sm\:mt-0 {
    margin-top: 0.25rem;
  }
}

/* Ultra small screens: menos de 600px */
@media (max-width: 600px) {
  footer {
    padding: 0.5rem 0.75rem; /* menos espacio interior */
  }

  footer .container {
    flex-direction: column;   /* apilar verticalmente */
    align-items: center;      /* centrar contenido */
    text-align: center;
    gap: 0.5rem;              /* espacio entre bloques */
    padding: 0;               /* container ya hereda del footer */
  }

  /* Texto del footer */
  footer .text-xs {
    font-size: 0.625rem;      /* de ~0.75rem a ~0.625rem */
    line-height: 1.2;
  }
  footer .sm\:text-sm {
    font-size: 0.75rem;       /* de ~0.875rem a ~0.75rem */
  }
  footer .space-y-1 > * + * {
    margin-top: 0.25rem;      /* menos espacio entre párrafos */
  }

  /* Botón de ayuda */
  #BtnAyuda {
    margin-top: 0.5rem;       /* de mt-3 a mt-2 */
    padding: 0.25rem 0.5rem;  /* más compacto */
    font-size: 0.75rem;       /* de 1rem a 0.75rem */
  }
  #BtnAyuda .shine-text {
    display: inline-block;
    line-height: 1;
  }
}
/* Ultra pequeños: menos de 600px */
@media (max-width: 600px) {
  header {
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between; /* o como prefieras distribuir */
  }

  /* Si antes tenías reglas que hacen wrap o column en <768px, asegúrate de sobreescribirlas */
  header {
    flex-wrap: nowrap !important;
  }
}

/* BtnAyuda: mantener fondo blanco y esquinas redondeadas en todos los tamaños */
#BtnAyuda {
  background: #fff !important;
  color: var(--text-dark) !important;
  border-radius: 2rem !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  font-weight: 600;
  transition: background 0.2s, color 0.2s, transform 0.15s;
}
#BtnAyuda:hover {
  background: #f3f3f3 !important;
  color: var(--primary) !important;
  transform: translateY(-2px) scale(1.04);
}

/* -------------------------------------------------------------------------- */
/*             ESTILOS PARA CONTENIDO HTML DENTRO DE LAS BURBUJAS             */
/* -------------------------------------------------------------------------- */

.bot-message .message-bubble {
  /* .bot-message is the container for title+bubble */
  background-color: #ffffff;
  color: #000000;
  border: 1px solid #000000;
}

.bot-message .message-bubble {
  font-family: sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #1f1f1f;
}

/* Párrafos */
.bot-message .message-bubble p {
  margin-bottom: 1em;
}

/* Encabezados */
.bot-message .message-bubble h1 {
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 0.5em;
}

.bot-message .message-bubble h2 {
  font-size: 1.15rem;
  font-weight: bold;
  margin-bottom: 0.5em;
}

.bot-message .message-bubble h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.4em;
}

/* Listas desordenadas */
.bot-message .message-bubble ul {
  list-style: disc;
  padding-left: 1.5em;
  margin-bottom: 1em;
}

.bot-message .message-bubble ul li::marker {
  font-weight: bold;
  color: #666;
}

/* Listas ordenadas */
.bot-message .message-bubble ol {
  list-style: decimal;
  padding-left: 1.5em;
  margin-bottom: 1em;
}

.bot-message .message-bubble ol li::marker {
  font-weight: bold;
  color: #444;
}

/* Elementos de lista */
.bot-message .message-bubble li {
  margin-bottom: 0.3em;
}

/* Enlaces */
.bot-message .message-bubble a {
  color: #1d4ed8;
  text-decoration: underline;
}

.bot-message .message-bubble a:hover {
  color: #2563eb;
}

/* Código inline */
.bot-message .message-bubble code {
  background-color: #f3f4f6;
  padding: 0.2em 0.4em;
  border-radius: 0.25em;
  font-family: monospace;
  font-size: 0.9em;
}

/* Bloques de código */
.bot-message .message-bubble pre {
  background-color: #f3f4f6;
  padding: 1em;
  border-radius: 0.5em;
  overflow-x: auto;
  font-family: monospace;
  font-size: 0.9em;
  line-height: 1.4;
  margin-bottom: 1em;
}

/* Citas */
.bot-message .message-bubble blockquote {
  border-left: 4px solid #ccc;
  padding-left: 1em;
  color: #555;
  font-style: italic;
  margin: 1em 0;
}

.bot-message .message-bubble hr {
  border: none;
  border-top: 1px dashed #9b9999;
  margin: 1.5em 0;
  opacity: 0.5;
}

/* -------------------------------------------------------------------------- */
/*             ESTILOS RESPONSIVOS PARA EL VISOR DE PDF (SWAL)                */
/* -------------------------------------------------------------------------- */

/* Estilos para el popup general del PDF */
.swal-pdf-popup {
  padding: 1em !important; /* Un poco de padding para que no se pegue a los bordes */
}

/* Contenedor del PDF (donde se renderizan los canvas) */
.pdf-swal-container {
  width: 80vw; /* Ocupa el 80% del ancho de la ventana */
  max-width: 1100px; /* Pero no más de 1100px en pantallas muy grandes */
  height: 85vh; /* Ocupa el 85% de la altura de la ventana */
  overflow-y: auto; /* Permite scroll vertical si el PDF es muy largo */
  border: 1px solid #444;
  border-radius: 5px;
  background-color: #333; /* Un fondo para el contenedor si es necesario */
}

/* --- MEDIA QUERY PARA PANTALLAS PEQUEÑAS (MÓVILES) --- */
@media screen and (max-width: 768px) {
  .swal-pdf-popup {
    /* En móvil, el popup ocupa casi toda la pantalla */
    width: 98vw !important;
    padding: 5px !important; /* Menos padding en móvil */
  }

  .pdf-swal-container {
    /* El contenedor interno se ajusta al popup */
    width: 100%;
    height: 88vh; /* Un poco más de altura en móvil */
    max-width: none; /* Quitamos el límite de ancho máximo */
    border: none; /* Quitamos el borde para un look más limpio */
  }
}

/* Estilos para el popup general de la tabla Excel */
.swal-excel-popup {
  padding: 1em !important;
}

/* Contenedor del div que envuelve la tabla */
.excel-swal-container {
  width: 90vw; /* Ocupa el 90% del ancho de la ventana */
  max-width: 1200px; /* Límite en pantallas muy grandes */
  height: 85vh; /* Ocupa el 85% de la altura de la ventana */
  overflow: auto; /* Permite scroll en ambas direcciones si la tabla es muy ancha o larga */
  border: 1px solid #e0e0e0;
  border-radius: 5px;
}

/* Estilos para la tabla generada por SheetJS */
#tblMantenimientoXlsx {
  border-collapse: collapse;
  width: 100%; /* La tabla siempre intenta ocupar el 100% de su contenedor */
  font-size: 0.85em;
  background-color: #fff; /* Fondo blanco para la tabla */
  color: #333;
}

#tblMantenimientoXlsx th,
#tblMantenimientoXlsx td {
  border: 1px solid #ddd;
  padding: 8px 10px; /* Un poco más de padding para legibilidad */
  text-align: left;
  white-space: nowrap; /* Evita que el texto de las celdas se parta en varias líneas */
}

/* Encabezados fijos (sticky headers) */
#tblMantenimientoXlsx th {
  background-color: #f2f2f2;
  font-weight: 600;
  position: sticky; /* ¡Magia! El encabezado se queda fijo al hacer scroll vertical */
  top: 0;
  z-index: 10; /* Se asegura de que esté por encima de las celdas */
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1); /* Sombra sutil para el header */
}

/* --- MEDIA QUERY PARA PANTALLAS PEQUEÑAS (MÓVILES) --- */
@media screen and (max-width: 768px) {
  .swal-excel-popup {
    /* En móvil, el popup ocupa casi toda la pantalla */
    width: 98vw !important;
    padding: 5px !important;
  }

  .excel-swal-container {
    /* El contenedor interno se ajusta al popup */
    width: 100%;
    height: 88vh;
    max-width: none;
    border: none;
  }

  /* Reducimos un poco el padding en móvil para ganar espacio */
  #tblMantenimientoXlsx th,
  #tblMantenimientoXlsx td {
    padding: 6px 8px;
  }
}