/* ia_chat/chat_styles.css (REMAKE — estética + fixes de layout)
   Cambios clave:
   - Scroll interno fiable (#chat-box) con min-height:0 para contenedores flex
   - Modo expandido real (ocupa viewport); resize deshabilitado en expandido
   - Minimizado funcional incluso en expandido via :has()
   - Estilo para IDs correctos: #chat-user-input y #chat-send-btn
   - Tema dark-blue modernizado y pulido visual
*/

/* --- Widget base --- */
.chat-widget {
  position: fixed;
  bottom: 25px;
  right: 25px;
  width: 380px;
  max-width: 92vw;
  height: 540px;                /* altura base para permitir scroll interno */
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  border-radius: 16px;
  overflow: hidden;
  background: #0f172a;          /* slate-900 */
  border: 1px solid rgba(120,144,180,0.25);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  transition: opacity .25s, transform .25s, width .2s, height .2s;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  /* redimensión por defecto */
  resize: both;
}

.chat-widget.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Cuando el cuerpo está oculto (minimizado) el widget se contrae */
.chat-widget:has(#chat-body[style*="display: none"]) {
  height: auto;
  resize: none;
}

/* --- Header --- */
#chat-header {
  background: linear-gradient(135deg, #1f6feb, #4f8df7 60%, #7ec8ff);
  color: #ecf3ff;
  padding: 12px 14px;
  cursor: pointer;
  font-weight: 700;
  font-size: 1.05rem;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  letter-spacing: .2px;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.08);
}

/* Botón expandir/contraer */
#chat-expand-btn {
  background: rgba(255,255,255,0.12);
  border: none;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  transition: background .2s;
}
#chat-expand-btn:hover { background: rgba(255,255,255,0.22); }
#chat-expand-btn svg { width: 18px; height: 18px; fill: #e7f0ff; opacity: .9; }
#chat-expand-btn:hover svg { opacity: 1; }

/* --- Cuerpo del chat --- */
#chat-body {
  display: none;                /* inicia cerrado según tu JS */
  flex-direction: column;
  flex: 1;
  min-height: 0;                /* crítico para que #chat-box pueda scrollear dentro de flex */
  background: radial-gradient(1200px 600px at 100% 100%, rgba(18,49,99,.25), transparent),
              linear-gradient(#0b1224, #0f172a);
}

/* Caja de mensajes con scroll interno */
#chat-box {
  flex: 1;
  min-height: 0;                /* imprescindible para que el overflow funcione dentro de flex */
  padding: 14px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: thin;
  scrollbar-color: #5a86ff #0f172a;
}
/* Scrollbar WebKit */
#chat-box::-webkit-scrollbar { width: 10px; }
#chat-box::-webkit-scrollbar-track { background: transparent; }
#chat-box::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #5a86ff, #2c4bd8);
  border-radius: 6px;
  border: 2px solid #0f172a;
}

/* Mensajes */
.message {
  padding: 10px 14px;
  border-radius: 14px;
  max-width: 85%;
  line-height: 1.45;
  word-wrap: break-word;
  font-size: .95rem;
}
.user-message {
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  color: #eef4ff;
  align-self: flex-end;
  box-shadow: 0 2px 12px rgba(37,99,235,.35);
}
.ai-message {
  background: rgba(148,163,184,0.12);
  color: #cbd5e1;
  align-self: flex-start;
  border: 1px solid rgba(148,163,184,0.18);
}

/* Input + enviar (IDs correctos) */
#input-container {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-top: 1px solid rgba(120,144,180,0.25);
  background: rgba(11,18,36,0.85);
  backdrop-filter: blur(4px);
}

#chat-user-input, /* id usado por tu JS */
#user-input {     /* compat: estilos previos */
  flex: 1;
  border: 1px solid rgba(148,163,184,0.28);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: .95rem;
  background: #0b1224;
  color: #e5edff;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
#chat-user-input::placeholder { color: #7b8baa; }
#chat-user-input:focus {
  border-color: #5a86ff;
  box-shadow: 0 0 0 3px rgba(90,134,255,.18);
}

#chat-send-btn, /* id usado por tu JS */
#send-btn {     /* compat: estilos previos */
  background: linear-gradient(135deg, #2f6dff, #4b8bff);
  color: white;
  border: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 1rem;
  display: grid;
  place-items: center;
  transition: transform .06s ease, filter .2s ease;
}
#chat-send-btn:hover { filter: brightness(1.05); }
#chat-send-btn:active { transform: scale(.98); }

/* Animación "pensando..." */
.loading-dots {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 0;
}
.loading-dots .dot {
  animation: dot-bounce 1.4s infinite ease-in-out both;
  background: #93a9ff;
  border-radius: 50%;
  height: 8px;
  width: 8px;
  opacity: .9;
}
.loading-dots .dot:nth-of-type(2){ animation-delay: -.32s; }
.loading-dots .dot:nth-of-type(3){ animation-delay: -.16s; }
@keyframes dot-bounce { 0%,80%,100%{ transform: scale(0);} 40%{ transform: scale(1); } }

/* Botones de elección */
.choice-buttons { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.choice-btn {
  background: linear-gradient(135deg, #2158d3, #3f7bff);
  color: #f0f6ff;
  border: none;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 700;
  letter-spacing: .2px;
  box-shadow: 0 6px 20px rgba(63,123,255,.18);
}
.choice-btn:hover { filter: brightness(1.07); }

/* --- Tabla del Dashboard: interacción con sort --- */
#dashboard-table th.sortable {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 20px;
}
#dashboard-table th.sortable:hover {
  background-color: rgba(255,255,255,0.05);
}
#dashboard-table th .sort-indicator {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .9em;
  color: #7aa2ff;
}

/* Tarjetas de resumen / detalles */
.summary-card {
  background: rgba(30,41,59,.6);
  border-radius: 10px;
  border: 1px solid rgba(148,163,184,.25);
  overflow: hidden;
  margin-top: 8px;
}
.summary-header { background: rgba(30,64,175,.35); padding: 10px 12px; }
.summary-header h3 { margin: 0; font-size: 1rem; color: #e8eeff; }
.summary-body { padding: 12px; }
.summary-section h4 {
  margin: 0 0 10px 0;
  font-size: .9rem;
  color: #a8c0ff;
  text-transform: uppercase;
  border-bottom: 1px dashed rgba(148,163,184,.35);
  padding-bottom: 6px;
}
.summary-section:not(:last-child){ margin-bottom: 14px; }
.summary-field { display: flex; justify-content: space-between; font-size: .95rem; margin-bottom: 6px; }
.summary-label { color: #c0d0ff; }
.summary-value { color: #ffffff; font-weight: 700; }
.summary-section ul,
.summary-items-list { list-style: none; padding-left: 6px; margin: 10px 0 0 0; }
.summary-section li,
.summary-items-list li {
  font-size: .93rem; padding: 4px 0; border-bottom: 1px dashed rgba(148,163,184,.25);
}
.summary-section li:last-child,
.summary-items-list li:last-child { border-bottom: none; }
.details-container-title {
  font-size: 1.05rem; font-weight: 700; color: #e0e8ff; margin-bottom: 10px;
  padding-bottom: 8px; border-bottom: 1px solid rgba(148,163,184,.3);
}
.detail-item-card { margin-bottom: 10px; }

/* --- Estado expandido (pantalla completa) --- */
.chat-widget.expanded {
  width: min(92vw, 1000px);
  height: min(86vh, 900px);
  max-width: 1000px;
  max-height: 900px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20000;
  resize: none;  /* desactiva el grip en expandido para evitar conflicto con fullscreen */
}

/* Si el cuerpo está oculto en expandido, comportarse como minimizado a esquina */
.chat-widget.expanded:has(#chat-body[style*="display: none"]) {
  top: auto; left: auto; transform: none;
  bottom: 25px; right: 25px;
  width: 320px; height: auto;
}

/* Responsivo */
@media (max-width: 520px) {
  .chat-widget { right: 16px; bottom: 16px; width: calc(100vw - 32px); height: 70vh; }
  .chat-widget.expanded { width: 96vw; height: 86vh; }
}
/* ia_chat/chat_styles.css (código para añadir al final) */

/* --- Selector de Proveedor de IA --- */
#ai-provider-selector {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(11,18,36,0.7);
  border-bottom: 1px solid rgba(120,144,180,0.25);
  font-size: 0.85rem;
}

.selector-label {
  color: #a8c0ff;
  font-weight: 600;
}

.provider-options {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Oculta el botón de radio por defecto */
.provider-options input[type="radio"] {
  display: none;
}

/* Estilo de los labels para que parezcan botones */
.provider-options label {
  padding: 4px 12px;
  border: 1px solid rgba(148,163,184,0.3);
  border-radius: 8px;
  cursor: pointer;
  color: #cbd5e1;
  background-color: rgba(148,163,184,0.1);
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
  font-weight: 500;
}

/* Estilo cuando un botón está seleccionado (activo) */
.provider-options input[type="radio"]:checked + label {
  background-color: #3b82f6; /* Azul brillante */
  border-color: #5a86ff;
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(59,130,246,0.3);
}

/* Efecto hover para los botones no seleccionados */
.provider-options input[type="radio"]:not(:checked) + label:hover {
  background-color: rgba(148,163,184,0.2);
  border-color: rgba(148,163,184,0.4);
}