/* ══════════════════════════════════════════════════════
   css/chatbot-estilos.css
   BotLLIKA — Filtro Interactivo de Propiedades
   Sin dependencias de IA externa
══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700&family=DM+Sans:wght@400;500;600&display=swap');

/* ── Variables ─────────────────────────────────────── */
:root {
  --llk-gold      : #bf840b;
  --llk-gold-dk   : #9a6a08;
  --llk-gold-lt   : #f5e6c4;
  --llk-dark      : #181311;
  --llk-surface   : #ffffff;
  --llk-muted     : #8a8a8a;
  --llk-border    : #ebebeb;
  --llk-radius    : 20px;
  --llk-shadow    : 0 24px 60px rgba(0,0,0,0.18);
  --llk-transition: 0.3s cubic-bezier(.4,0,.2,1);
}

/* ── Trigger button ─────────────────────────────────── */
#llk-trigger {
  position     : fixed;
  bottom       : 24px;
  right        : 24px;
  z-index      : 9990;
  width        : 62px;
  height       : 62px;
  border-radius: 50%;
  border       : none;
  padding      : 0;
  cursor       : pointer;
  background   : linear-gradient(135deg, var(--llk-dark) 0%, var(--llk-gold) 100%);
  box-shadow   : 0 6px 24px rgba(191,132,11,.45);
  transition   : transform var(--llk-transition), box-shadow var(--llk-transition);
  overflow     : visible;
}

#llk-trigger:hover {
  transform : scale(1.08);
  box-shadow: 0 10px 32px rgba(191,132,11,.6);
}

#llk-trigger img {
  width        : 62px;
  height       : 62px;
  border-radius: 50%;
  display      : block;
  object-fit   : cover;
}

/* Pulse ring */
.llk-pulse {
  position      : absolute;
  inset         : -6px;
  border-radius : 50%;
  border        : 2px solid var(--llk-gold);
  animation     : llkPulse 2.4s ease-out infinite;
  pointer-events: none;
}

@keyframes llkPulse {
  0%       { transform: scale(1);    opacity: .6; }
  70%, 100%{ transform: scale(1.25); opacity: 0;  }
}

/* Badge */
#llk-badge {
  position        : absolute;
  top             : -4px;
  right           : -4px;
  background      : #e53e3e;
  color           : #fff;
  font-size       : 11px;
  font-weight     : 700;
  width           : 20px;
  height          : 20px;
  border-radius   : 50%;
  align-items     : center;
  justify-content : center;
  font-family     : 'DM Sans', sans-serif;
  border          : 2px solid #fff;
  animation       : llkBounce .4s ease;
}

@keyframes llkBounce {
  0%, 100%{ transform: scale(1);   }
  50%     { transform: scale(1.4); }
}

/* Mobile */
@media (max-width: 768px) {
  #llk-trigger { bottom: 80px; right: 16px; }
}

/* ── Panel ──────────────────────────────────────────── */
#llk-panel {
  position        : fixed;
  bottom          : 100px;
  right           : 24px;
  z-index         : 9991;
  width           : 400px;
  max-width       : calc(100vw - 32px);
  height          : 600px;
  max-height      : calc(100vh - 140px);
  background      : var(--llk-surface);
  border-radius   : var(--llk-radius);
  box-shadow      : var(--llk-shadow);
  display         : flex;
  flex-direction  : column;
  overflow        : hidden;
  transform       : translateY(30px) scale(.95);
  opacity         : 0;
  pointer-events  : none;
  transition      : transform var(--llk-transition), opacity var(--llk-transition);
  font-family     : 'DM Sans', sans-serif;
}

#llk-panel.llk-panel--open {
  transform     : translateY(0) scale(1);
  opacity       : 1;
  pointer-events: all;
}

@media (max-width: 768px) {
  #llk-panel {
    bottom       : 0;
    right        : 0;
    left         : 0;
    width        : 100%;
    max-width    : 100%;
    height       : 100dvh;
    max-height   : 100dvh;
    border-radius: var(--llk-radius) var(--llk-radius) 0 0;
  }
}

/* ── Header ─────────────────────────────────────────── */
.llk-head {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding        : 16px 20px;
  background     : linear-gradient(135deg, var(--llk-dark) 0%, #3a2810 100%);
  flex-shrink    : 0;
}

.llk-head-info {
  display    : flex;
  align-items: center;
  gap        : 12px;
}

.llk-head-avatar {
  width        : 40px;
  height       : 40px;
  border-radius: 50%;
  border       : 2px solid rgba(255,255,255,.25);
  object-fit   : cover;
}

.llk-head-name {
  display     : block;
  font-family : 'Syne', sans-serif;
  font-size   : 15px;
  font-weight : 700;
  color       : #fff;
  line-height : 1.2;
}

.llk-head-status {
  display    : flex;
  align-items: center;
  gap        : 5px;
  font-size  : 11px;
  color      : rgba(255,255,255,.7);
}

.llk-dot {
  width        : 7px;
  height       : 7px;
  border-radius: 50%;
  background   : #48bb78;
  flex-shrink  : 0;
  animation    : llkBlink 2s ease infinite;
}

@keyframes llkBlink {
  0%, 100%{ opacity: 1;  }
  50%     { opacity: .4; }
}

#llk-close {
  background      : rgba(255,255,255,.1);
  border          : none;
  border-radius   : 50%;
  width           : 34px;
  height          : 34px;
  display         : flex;
  align-items     : center;
  justify-content : center;
  cursor          : pointer;
  transition      : background var(--llk-transition), transform var(--llk-transition);
  color           : #fff;
  font-size       : 18px;
  flex-shrink     : 0;
  line-height     : 1;
}

#llk-close:hover { background: rgba(255,255,255,.25); transform: rotate(90deg); }

/* ── Tab bar ─────────────────────────────────────────── */
.tab-bar {
  display     : flex;
  border-bottom: 1px solid var(--llk-border);
  flex-shrink : 0;
}

.llk-tab {
  flex           : 1;
  padding        : 10px;
  font-size      : 12px;
  font-weight    : 600;
  cursor         : pointer;
  border         : none;
  background     : transparent;
  color          : var(--llk-muted);
  border-bottom  : 2px solid transparent;
  transition     : all .2s;
  font-family    : 'DM Sans', sans-serif;
}

.llk-tab.llk-tab--active {
  color       : var(--llk-gold);
  border-bottom-color: var(--llk-gold);
}

#tab-count {
  font-weight: 700;
  color      : var(--llk-gold);
}

/* ── Panel interior ──────────────────────────────────── */
#llk-panel-inner {
  display       : flex;
  flex-direction: column;
  flex          : 1;
  overflow      : hidden;
}

.llk-pane {
  display: none;
  flex   : 1;
  overflow: hidden;
}

.llk-pane.llk-pane--active {
  display       : flex;
  flex-direction: column;
}

/* ── Filtros ─────────────────────────────────────────── */
.llk-filters {
  padding   : 14px 16px;
  overflow-y: auto;
  flex      : 1;
}

.llk-filters::-webkit-scrollbar { width: 4px; }
.llk-filters::-webkit-scrollbar-thumb {
  background   : var(--llk-gold);
  border-radius: 4px;
}

.llk-label {
  font-size     : 10px;
  font-weight   : 700;
  color         : var(--llk-muted);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom : 8px;
  margin-top    : 14px;
}

.llk-label:first-child { margin-top: 0; }

/* Chips */
.llk-chips {
  display    : flex;
  flex-wrap  : wrap;
  gap        : 6px;
  margin-bottom: 4px;
}

.llk-chip {
  background   : #f7f7f7;
  color        : var(--llk-muted);
  border       : 1px solid var(--llk-border);
  border-radius: 50px;
  padding      : 5px 13px;
  font-size    : 12px;
  font-weight  : 600;
  cursor       : pointer;
  transition   : all .2s;
  font-family  : 'DM Sans', sans-serif;
}

.llk-chip:hover {
  background  : var(--llk-gold-lt);
  color       : var(--llk-gold-dk);
  border-color: var(--llk-gold);
}

.llk-chip.llk-chip--active {
  background  : var(--llk-gold);
  color       : #fff;
  border-color: var(--llk-gold);
}

/* Grid de inputs */
.llk-row-2 {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : 8px;
  margin-bottom        : 4px;
}

.llk-field label {
  display     : block;
  font-size   : 11px;
  color       : var(--llk-muted);
  margin-bottom: 4px;
}

.llk-field input,
.llk-field select {
  width        : 100%;
  padding      : 7px 10px;
  border       : 1px solid var(--llk-border);
  border-radius: 8px;
  font-size    : 12px;
  font-family  : 'DM Sans', sans-serif;
  background   : #fafafa;
  color        : var(--llk-dark);
  outline      : none;
  transition   : border-color .2s, box-shadow .2s;
}

.llk-field input:focus,
.llk-field select:focus {
  border-color: var(--llk-gold);
  box-shadow  : 0 0 0 3px rgba(191,132,11,.12);
  background  : #fff;
}

/* Botones de acción */
#btn-buscar {
  width        : 100%;
  padding      : 10px;
  background   : linear-gradient(135deg, var(--llk-gold) 0%, var(--llk-gold-dk) 100%);
  color        : #fff;
  border       : none;
  border-radius: 10px;
  font-size    : 13px;
  font-weight  : 600;
  cursor       : pointer;
  transition   : transform .2s, box-shadow .2s;
  box-shadow   : 0 4px 12px rgba(191,132,11,.35);
  font-family  : 'DM Sans', sans-serif;
  margin-top   : 16px;
}

#btn-buscar:hover  { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(191,132,11,.5); }
#btn-buscar:active { transform: scale(.97); }

#btn-limpiar {
  width        : 100%;
  padding      : 8px;
  background   : transparent;
  color        : var(--llk-muted);
  border       : 1px solid var(--llk-border);
  border-radius: 10px;
  font-size    : 12px;
  cursor       : pointer;
  margin-top   : 8px;
  transition   : all .2s;
  font-family  : 'DM Sans', sans-serif;
}

#btn-limpiar:hover { background: #f5f5f5; color: var(--llk-dark); }

/* ── Resultados ──────────────────────────────────────── */
#llk-results {
  flex      : 1;
  overflow-y: auto;
  padding   : 12px 14px;
}

#llk-results::-webkit-scrollbar { width: 4px; }
#llk-results::-webkit-scrollbar-thumb {
  background   : var(--llk-gold);
  border-radius: 4px;
}

#llk-pane-resultados {
  overflow: hidden;
}

.llk-results-head {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  margin-bottom  : 10px;
}

.llk-results-count {
  font-size: 12px;
  color    : var(--llk-muted);
}

.llk-results-count strong {
  color      : var(--llk-gold);
  font-size  : 14px;
}

/* Estado vacío */
.llk-empty {
  text-align: center;
  padding   : 40px 20px;
  color     : var(--llk-muted);
}

.llk-empty-icon {
  font-size    : 36px;
  display      : block;
  margin-bottom: 10px;
}

.llk-empty p {
  font-size  : 13px;
  line-height: 1.6;
}

/* Loading */
.llk-loading {
  display        : flex;
  align-items    : center;
  justify-content: center;
  padding        : 40px;
  gap            : 6px;
}

.llk-loading span {
  width        : 8px;
  height       : 8px;
  border-radius: 50%;
  background   : var(--llk-gold);
  animation    : llkDot 1.4s ease infinite;
}

.llk-loading span:nth-child(2) { animation-delay: .2s; }
.llk-loading span:nth-child(3) { animation-delay: .4s; }

@keyframes llkDot {
  0%, 60%, 100%{ transform: translateY(0);   opacity: .5; }
  30%          { transform: translateY(-8px); opacity: 1;  }
}

/* ── Cards de propiedades ─────────────────────────────── */
.llk-card {
  display        : flex;
  gap            : 10px;
  border         : 1px solid var(--llk-border);
  border-radius  : 12px;
  overflow       : hidden;
  text-decoration: none;
  color          : inherit;
  transition     : border-color var(--llk-transition), box-shadow var(--llk-transition), transform var(--llk-transition);
  margin-bottom  : 10px;
  background     : #fff;
  animation      : llkMsgIn .3s ease both;
}

@keyframes llkMsgIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

.llk-card:hover {
  border-color: var(--llk-gold);
  box-shadow  : 0 4px 16px rgba(191,132,11,.12);
  transform   : translateY(-2px);
}

.llk-card-img {
  position  : relative;
  width     : 88px;
  flex-shrink: 0;
}

.llk-card-img img {
  width     : 100%;
  height    : 100%;
  object-fit: cover;
  display   : block;
}

.llk-card-badge {
  position      : absolute;
  top           : 5px;
  left          : 5px;
  background    : var(--llk-gold);
  color         : #fff;
  font-size     : 9px;
  font-weight   : 700;
  padding       : 2px 7px;
  border-radius : 20px;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.llk-card-info {
  padding       : 9px 10px 9px 0;
  display       : flex;
  flex-direction: column;
  gap           : 3px;
  min-width     : 0;
  flex          : 1;
}

.llk-card-type {
  font-family  : 'Syne', sans-serif;
  font-size    : 13px;
  font-weight  : 700;
  color        : var(--llk-dark);
  white-space  : nowrap;
  overflow     : hidden;
  text-overflow: ellipsis;
  margin       : 0;
}

.llk-card-loc {
  font-size    : 11px;
  color        : var(--llk-muted);
  white-space  : nowrap;
  overflow     : hidden;
  text-overflow: ellipsis;
  margin       : 0;
}

.llk-card-feats {
  display  : flex;
  gap      : 8px;
  flex-wrap: wrap;
}

.llk-card-feats span {
  font-size: 11px;
  color    : var(--llk-muted);
}

.llk-card-price {
  font-size  : 14px;
  font-weight: 700;
  color      : var(--llk-gold);
  margin     : 0;
  margin-top : 2px;
}