/* ============================================================================
   LAYOUT — armazón de las pantallas: login y app (chat).
   ============================================================================ */

/* ===== LOGIN =============================================================== */
.login {
  min-height: 100vh;
  min-height: 100dvh; /* en móvil, descuenta la barra del navegador (evita corte/scroll) */
  display: grid;
  place-items: center;
  padding: var(--space-6);
  background:
    radial-gradient(1200px 480px at 50% -10%, color-mix(in srgb, var(--color-accent) 10%, transparent), transparent 60%),
    var(--color-bg);
}
.login__card {
  width: min(var(--login-card), 100%);
  padding: var(--space-8);
  display: grid;
  gap: var(--space-6);
}
.login__head { display: grid; gap: var(--space-3); justify-items: center; text-align: center; }
.login__title { font-size: var(--fs-2xl); }
.login__subtitle { color: var(--color-text-secondary); font-size: var(--fs-sm); }
.login__form { display: grid; gap: var(--space-4); }
.login__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--fs-sm);
}
.login__footer { text-align: center; color: var(--color-text-muted); font-size: var(--fs-xs); }

/* Aviso de error reutilizable (estado danger). Oculto por defecto. */
.alert {
  display: none;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  border: 1px solid transparent;
}
.alert.is-visible { display: block; }
.alert--danger { color: var(--color-danger); background: var(--color-danger-bg); border-color: var(--color-danger-border); }

/* ===== APP SHELL (CHAT) ==================================================== */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  /* Una sola fila acotada a la altura del viewport: si fuese `auto` crecería con el contenido y
     se desbordaría (recortada por overflow:hidden) en vez de dejar scrollar la conversación. */
  grid-template-rows: minmax(0, 1fr);
  height: 100vh;
  height: 100dvh; /* en móvil, altura real del viewport (sin la barra del navegador) */
  overflow: hidden;
}

/* ---- Barra lateral: historial de propuestas ----------------------------- */
.sidebar {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  min-height: 0;
  z-index: var(--z-sidebar);
}
.sidebar__head { padding: var(--space-4); border-bottom: 1px solid var(--color-border); }
.sidebar__title {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-text-muted);
  padding: 0 var(--space-2) var(--space-2);
}
.sidebar__list { flex: 1; min-height: 0; padding: var(--space-2); display: grid; gap: 2px; align-content: start; }
.sidebar__foot {
  padding: var(--space-3);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Cada conversación del historial. Activa = acento dorado de borde izquierdo. */
.conv-item {
  display: grid;
  gap: 2px;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: background var(--t-fast);
}
.conv-item:hover { background: var(--color-surface-2); }
.conv-item.is-active {
  background: var(--color-accent-soft);
  border-left-color: var(--color-accent);
}
.conv-item__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conv-item__meta { font-size: var(--fs-xs); color: var(--color-text-muted); }

.user-chip { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.user-chip__name { font-size: var(--fs-sm); font-weight: var(--fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-chip__role { font-size: var(--fs-xs); color: var(--color-text-muted); }

/* ---- Columna principal: cabecera + conversación + entrada --------------- */
.main {
  display: grid;
  /* `minmax(0, 1fr)` en la fila de la conversación: su mínimo automático sería el contenido, lo
     que impide encoger y activar el scroll. Con min 0, la zona de mensajes se acota a la altura
     disponible (cabecera + entrada fuera) y SÍ scrollea hasta el final (se ven todos los huecos). */
  grid-template-rows: var(--header-h) minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  background: var(--color-bg);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0 var(--space-5);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  z-index: var(--z-header);
}
.topbar__left { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.topbar__title { font-size: var(--fs-md); font-weight: var(--fw-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__right { display: flex; align-items: center; gap: var(--space-2); }

/* Botón de menú (solo visible en móvil para abrir la barra lateral). */
.menu-btn { display: none; }

/* Conversación: scroll vertical, contenido centrado y limitado en ancho. */
.conversation { min-height: 0; padding: var(--space-6) var(--space-5); }
.conversation__inner {
  width: min(var(--content-max), 100%);
  margin: 0 auto;
  display: grid;
  gap: var(--space-6);
}

/* Estado vacío (sin conversación todavía). */
.empty-state {
  text-align: center;
  display: grid;
  gap: var(--space-3);
  justify-items: center;
  padding: var(--space-12) var(--space-4);
  color: var(--color-text-secondary);
}
.empty-state h2 { color: var(--color-text); }

/* Entrada (composer): adjuntar + textarea + enviar. */
.composer { background: var(--color-surface); border-top: 1px solid var(--color-border); padding: var(--space-4) var(--space-5); }
.composer__inner { width: min(var(--composer-max), 100%); margin: 0 auto; }

/* Planos adjuntos a la espera de "Analizar" (subida deliberada; uno o varios). */
.pending-file { margin-bottom: var(--space-3); }
.pending-lista { display: grid; gap: var(--space-2); }
.pending-plano { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.pending-plano__name { max-width: 40%; min-width: 120px; overflow: hidden; }
.pending-plano__file { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pending-plano__nota { flex: 1; min-width: 160px; }
.pending-acciones { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-1); }

/* Formularios de respuesta a un hueco (dentro de una tarjeta del chat). */
.hueco-form { display: grid; gap: var(--space-2); }
.hueco-form .row-2 { flex-wrap: wrap; align-items: flex-end; }
.hueco-form .field { flex: 1; min-width: 120px; }
.hueco-form .input { padding: var(--space-2) var(--space-3); }
.composer__box {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.composer__box:focus-within { border-color: var(--color-accent-strong); box-shadow: var(--focus-ring); }
.composer__input {
  flex: 1;
  border: none;
  background: transparent;
  padding: var(--space-2) var(--space-2);
  max-height: 180px;
  line-height: var(--lh-base);
}
.composer__input:focus-visible { outline: none; box-shadow: none; }
.composer__hint { margin-top: var(--space-2); text-align: center; font-size: var(--fs-xs); color: var(--color-text-muted); }

/* Botón de envío: dorado de acción (icono oscuro encima). */
.send-btn { background: var(--color-accent); color: var(--color-on-accent); }
.send-btn:hover { background: var(--color-accent-strong); }
.send-btn:focus-visible { box-shadow: var(--focus-ring-dark); }

/* Overlay para el drawer de la barra lateral en móvil. */
.overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(34, 34, 34, .4);
  z-index: var(--z-overlay);
}
.overlay.is-visible { display: block; }

/* ===== RESPONSIVE ========================================================= */
@media (max-width: 880px) {
  .app { grid-template-columns: 1fr; }

  /* La barra lateral pasa a ser un cajón deslizante. */
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(var(--sidebar-w), 86vw);
    transform: translateX(-100%);
    transition: transform var(--t-base);
    box-shadow: var(--shadow-lg);
  }
  .sidebar.is-open { transform: translateX(0); }

  .menu-btn { display: inline-flex; }
}

@media (max-width: 560px) {
  .msg__body,
  .msg__body--wide { max-width: 92%; }
  .login__card { padding: var(--space-6); }
  /* En pantallas estrechas: concepto + subtotal (se ocultan unidades y precio unitario).
     El badge "pendiente" vive dentro del concepto, así que SE MANTIENE visible. */
  .linea { grid-template-columns: 1fr auto; }
  .linea__ud,
  .linea__pu { display: none; }
}