:root {
  --llyasa-azul: #0652CA;
  --llyasa-azul-hover: #0543A6;
  --llyasa-azul-active: #043889;
  --llyasa-amarillo: #EAAE29;
  --llyasa-amarillo-hover: #D89A1E;
  --llyasa-amarillo-active: #C48A15;
  --llyasa-amarillo-texto: #412402;
  --llyasa-azul-marino: #042C53;
  --llyasa-azul-claro: #85B7EB;
}

/* Header/nav de marca */
.navbar-llyasa {
  background-color: var(--llyasa-azul) !important;
}

.navbar-llyasa .nav-link {
  color: rgba(255, 255, 255, 0.9);
}

.navbar-llyasa .nav-link:hover,
.navbar-llyasa .nav-link:focus,
.navbar-llyasa .nav-link.active {
  color: var(--llyasa-amarillo);
}

.navbar-llyasa .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.5);
}

.navbar-llyasa .navbar-toggler-icon {
  filter: invert(1) grayscale(100%) brightness(200%);
}

.navbar-llyasa .navbar-brand img {
  height: 44px;
  width: auto;
}

/* Botones de marca */
.btn-llyasa {
  background-color: var(--llyasa-azul);
  border-color: var(--llyasa-azul);
  color: #fff;
}

.btn-llyasa:hover,
.btn-llyasa:focus {
  background-color: var(--llyasa-azul-hover);
  border-color: var(--llyasa-azul-hover);
  color: #fff;
}

.btn-llyasa:active {
  background-color: var(--llyasa-azul-active) !important;
  border-color: var(--llyasa-azul-active) !important;
  color: #fff;
}

/* Variante amarilla — acción de contexto distinto al azul primario (ej. búsqueda por vehículo) */
.btn-llyasa-amarillo {
  background-color: var(--llyasa-amarillo);
  border-color: var(--llyasa-amarillo);
  color: var(--llyasa-amarillo-texto);
}

.btn-llyasa-amarillo:hover,
.btn-llyasa-amarillo:focus {
  background-color: var(--llyasa-amarillo-hover);
  border-color: var(--llyasa-amarillo-hover);
  color: var(--llyasa-amarillo-texto);
}

.btn-llyasa-amarillo:active {
  background-color: var(--llyasa-amarillo-active) !important;
  border-color: var(--llyasa-amarillo-active) !important;
  color: var(--llyasa-amarillo-texto) !important;
}

/* Pestañas con corte diagonal — estilo compartido por el selector de Línea (Auto y Camioneta / Camión)
   y el de Método de búsqueda (Busco por medida / No conozco mi medida). Un solo lugar para el
   clip-path/colores: ambos selectores deben verse idénticos, y un ajuste aquí los afecta a los dos.
   El estado activo/inactivo se resuelve con el selector nativo :checked del radio oculto (btn-check),
   sin depender de ningún JS. */
.tabs-pestanas {
  display: flex;
}

.pestana-diagonal {
  position: relative;
  padding: 0.55rem 1.75rem;
  background-color: var(--llyasa-azul-marino);
  color: var(--llyasa-azul-claro);
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.pestana-diagonal--izquierda {
  clip-path: polygon(0 0, 100% 0, calc(100% - 1.5rem) 100%, 0 100%);
  padding-right: 3rem;
  margin-right: -1.5rem;
  z-index: 1;
}

.pestana-diagonal--derecha {
  clip-path: polygon(1.5rem 0, 100% 0, 100% 100%, 0 100%);
  padding-left: 3rem;
}

.btn-check:checked + .pestana-diagonal {
  background-color: var(--llyasa-azul);
  color: #fff;
  font-weight: 500;
}

/* Burbuja + cajón de LlyasaBot (widget flotante, siempre fijo sobre la página) */
#llyasabot-widget {
  position: fixed;
  z-index: 1040;
}

.llyasabot-burbuja {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 1040;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--llyasa-azul);
  border: none;
  border-radius: 999px;
  padding: 0.5rem 1.25rem 0.5rem 0.5rem;
  color: #fff;
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

.llyasabot-burbuja:hover,
.llyasabot-burbuja:focus {
  background-color: var(--llyasa-azul-hover);
  color: #fff;
}

/* Cajón amplio, siempre presente en el DOM (nunca se destruye/recrea) -- se desliza desde fuera de
   la pantalla con transform, así el historial de llyasabot-chat.js nunca se pierde al abrir/cerrar. */
.llyasabot-drawer {
  position: fixed;
  top: 1rem;
  right: 1rem;
  bottom: 1rem;
  width: min(420px, calc(100vw - 2rem));
  z-index: 1041;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  transform: translateX(calc(100% + 2rem));
  transition: transform 0.25s ease-in-out;
}

.llyasabot-drawer.llyasabot-drawer--abierto {
  transform: translateX(0);
}

.llyasabot-drawer-encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 1rem;
  background-color: var(--llyasa-azul-marino);
  color: #fff;
  border-radius: 0.75rem 0.75rem 0 0;
}

.llyasabot-drawer-encabezado p {
  color: var(--llyasa-azul-claro);
}

.llyasabot-cerrar {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.1rem;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}

.llyasabot-drawer-cuerpo {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

.llyasabot-transcripcion {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.25rem;
}

.llyasabot-mensaje {
  max-width: 80%;
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  white-space: pre-wrap;
  font-size: 0.95rem;
}

.llyasabot-mensaje--bot {
  align-self: flex-start;
  background-color: #f1f3f5;
  color: #212529;
  border-bottom-left-radius: 0.2rem;
}

.llyasabot-mensaje--usuario {
  align-self: flex-end;
  background-color: var(--llyasa-azul);
  color: #fff;
  border-bottom-right-radius: 0.2rem;
}

/* Badges de resultado -- azul/amarillo para los 4 slots prioritarios (color por slot, ver
   SlotsPrioritarios.ColorDelBadge), gris neutro sin cambios para las tarjetas "adicionales". */
.badge-azul {
  background-color: var(--llyasa-azul);
  color: #fff;
}

.badge-amarillo {
  background-color: var(--llyasa-amarillo);
  color: #212529;
}

.badge-adicional {
  background-color: #6c757d;
  color: #fff;
}

/* Tarjetas de resultado */
.card-resultado {
  border-top: 4px solid transparent;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.15s ease-in-out;
}

.card-resultado:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

.card-resultado--destacada {
  border-top-color: var(--llyasa-azul);
}

.card-resultado--adicional {
  border-top-color: #adb5bd;
}

/* Marco de imagen de producto: alto fijo en vez del ratio (%) que usaba antes -- las imágenes reales
   vienen en proporciones muy distintas (banners de marca vs. foto de llanta, y Joaquín sigue subiendo
   material nuevo sin control sobre su tamaño), así que un marco basado en % de ancho dejaba que una
   imagen alta empujara su fila del grid. Con alto fijo, todas las tarjetas quedan del mismo tamaño sin
   importar qué imagen carguen. Un solo lugar de tamaño para la imagen real Y el placeholder (Cambio 2):
   ambos son hijos directos de este marco y comparten la misma regla de posición/tamaño. */
.marco-imagen-producto {
  position: relative;
  width: 100%;
  height: 200px;
}

.marco-imagen-producto > img,
.marco-imagen-producto > .marco-imagen-producto-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.marco-imagen-producto > img {
  object-fit: contain;
  padding: 0.5rem;
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}