/* Auto-S2D — modal de historico de mensajes automaticos (2 paneles).
   Reusa .modal-overlay/.modal-container/.admin-* del dashboard; solo define
   el layout de 2 columnas y el estilo de la lista/preview. El preview hereda
   la tipografia de .rag-message-content (rag-chat.css). */

/* El Dashboard S2D es el mismo un .modal-overlay (#dashboardS2DModal, z-index 1000)
   y va DESPUES en el DOM, asi que taparia este modal si compartieran z-index. Los
   modales admin resuelven esto en admin.css (#adminModal/#conceptosModal/#promptsModal/
   #auditLogModal -> z-index 1100); #autoS2DModal NO esta en esa lista, asi que lo
   elevamos aqui al mismo tier. Sin esto el modal se abre pero queda DETRAS del dashboard. */
#autoS2DModal.modal-overlay {
  z-index: 1100;
}

.autos2d-modal-container {
  max-width: 1100px;
  width: 92vw;
}

.autos2d-subtitle {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--color-text-secondary, #6b7280);
}

/* Barra de filtro por fechas (propia del modal). */
.autos2d-filters-bar {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border, rgba(0,0,0,0.08));
}

.autos2d-filter-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.autos2d-filter-group > label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary, #6b7280);
}

.autos2d-date-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
}

.autos2d-date-input {
  padding: 6px 10px;
  font-size: 13px;
}

.autos2d-date-sep {
  color: var(--color-text-secondary, #9ca3af);
}

/* ── Combobox de usuario: input con autocompletado + lista desplegable ──
   Un solo control que hace de buscador (escribe y filtra) y de select (despliega la
   lista completa). El desplegable va position:absolute dentro de .autos2d-combo; cabe
   sobre .autos2d-body (que viene despues) con z-index alto sin recortarse. */
.autos2d-combo {
  position: relative;
  width: 220px;
  max-width: 100%;
}

.autos2d-combo-input {
  width: 100%;
  height: 36px;
  padding: 0 56px 0 12px;   /* hueco derecho para los botones limpiar + flecha */
  border: 1px solid var(--color-border, rgba(0,0,0,0.12));
  border-radius: var(--radius-base, 8px);
  background: var(--color-bg-primary, #fff);
  color: var(--color-text-primary, #111827);
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.autos2d-combo-input::placeholder { color: var(--color-text-tertiary, #9ca3af); }

.autos2d-combo-input:focus {
  border-color: var(--color-blue, #3b82f6);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.14);
}

.autos2d-combo-caret,
.autos2d-combo-clear {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text-tertiary, #9ca3af);
  cursor: pointer;
  transition: color 0.12s ease, background 0.12s ease;
}

.autos2d-combo-caret { right: 8px; width: 20px; height: 20px; }
.autos2d-combo-caret:hover { color: var(--color-text-secondary, #6b7280); }

.autos2d-combo-clear {
  right: 32px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
}
.autos2d-combo-clear:hover {
  color: var(--color-text-primary, #111827);
  background: var(--color-bg-hover, rgba(0,0,0,0.06));
}

.autos2d-combo-caret svg,
.autos2d-combo-clear svg { width: 13px; height: 13px; }

/* Desplegable */
.autos2d-combo-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 60;
  margin: 0;
  padding: 4px;
  list-style: none;
  max-height: 260px;
  overflow-y: auto;
  background: var(--color-bg-primary, #fff);
  border: 1px solid var(--color-border, rgba(0,0,0,0.1));
  border-radius: 12px;
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.18), 0 3px 10px rgba(15, 23, 42, 0.08);
}

.autos2d-combo-opt {
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 13px;
  color: var(--color-text-primary, #111827);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.autos2d-combo-opt-active { background: rgba(59, 130, 246, 0.13); }

/* Opcion "Todos los usuarios": separada arriba, discreta */
.autos2d-combo-opt-all {
  color: var(--color-text-secondary, #6b7280);
  font-style: italic;
  border-radius: 0;
  padding-bottom: 8px;
  margin-bottom: 3px;
  border-bottom: 1px solid var(--color-border, rgba(0,0,0,0.08));
}
.autos2d-combo-opt-all.autos2d-combo-opt-active {
  background: rgba(59, 130, 246, 0.10);
  border-radius: 7px 7px 0 0;
}

.autos2d-combo-empty {
  padding: 9px 10px;
  font-size: 13px;
  font-style: italic;
  color: var(--color-text-tertiary, #9ca3af);
}

/* Resaltado del fragmento coincidente al escribir */
.autos2d-combo-mark {
  background: transparent;
  color: var(--color-blue, #3b82f6);
  font-weight: 700;
}

.autos2d-filter-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.autos2d-filter-actions .btn {
  padding: 6px 14px;
  font-size: 13px;
}

/* Cuerpo: lista (izq) + preview (der). En pantallas chicas se apila. */
.autos2d-body {
  display: flex;
  gap: 18px;
  margin-top: 14px;
  height: min(66vh, 620px);
}

.autos2d-list-panel {
  flex: 0 0 42%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border, rgba(0,0,0,0.08));
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-surface, #fff);
}

.autos2d-list-shell {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}

/* table-layout fixed: la tabla NUNCA puede hacerse mas ancha que el panel
   (.autos2d-list-panel tiene overflow:hidden y recortaria la columna Usuario
   sin scroll ni aviso, que es justo lo que pasaba en telefono). Las columnas
   ID y Fecha llevan ancho fijo; Usuario absorbe el resto con ellipsis. */
.autos2d-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 13px;
}

.autos2d-table thead th:nth-child(2) { width: 122px; }

.autos2d-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-surface-alt, #f8fafc);
  text-align: left;
  padding: 9px 12px;
  font-weight: 600;
  font-size: 12px;
  color: var(--color-text-secondary, #6b7280);
  border-bottom: 1px solid var(--color-border, rgba(0,0,0,0.08));
  white-space: nowrap;
}

.autos2d-row {
  cursor: pointer;
  transition: background 0.12s ease;
}

.autos2d-row td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--color-border, rgba(0,0,0,0.05));
  vertical-align: middle;
}

.autos2d-row:hover {
  background: var(--color-surface-alt, rgba(99,102,241,0.06));
}

.autos2d-row-selected,
.autos2d-row-selected:hover {
  background: rgba(99,102,241,0.14);
}

.autos2d-col-id {
  color: var(--color-text-secondary, #9ca3af);
  font-variant-numeric: tabular-nums;
  width: 56px;
}

.autos2d-col-fecha {
  white-space: nowrap;
  overflow: hidden;
}

.autos2d-col-usuario {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.autos2d-list-footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border-top: 1px solid var(--color-border, rgba(0,0,0,0.08));
  background: var(--color-surface-alt, #f8fafc);
}

.autos2d-count {
  font-size: 12px;
  color: var(--color-text-secondary, #6b7280);
}

.autos2d-more-btn {
  padding: 5px 12px;
  font-size: 12px;
}

/* Panel de preview */
.autos2d-preview-panel {
  flex: 1 1 58%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border, rgba(0,0,0,0.08));
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-surface, #fff);
}

.autos2d-preview-header {
  flex: 0 0 auto;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border, rgba(0,0,0,0.08));
  background: var(--color-surface-alt, #f8fafc);
}

.autos2d-preview-meta {
  font-size: 13px;
  color: var(--color-text, #111827);
}

.autos2d-preview-date {
  margin-top: 2px;
  font-size: 12px;
  color: var(--color-text-secondary, #6b7280);
}

.autos2d-preview-dest {
  font-variant-numeric: tabular-nums;
  color: var(--color-text-secondary, #6b7280);
}

.autos2d-preview-placeholder {
  font-size: 13px;
  color: var(--color-text-secondary, #9ca3af);
  font-style: italic;
}

.autos2d-preview-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  padding: 8px 18px 18px;
}

/* El contenido usa .rag-message-content (heredado). Ajustes finos para el modal. */
.autos2d-preview-content.rag-message-content {
  padding: 8px 0;
  background: transparent;
  font-size: 14px;
}

/* Responsive: apilar en pantallas chicas */
@media (max-width: 820px) {
  .autos2d-body {
    flex-direction: column;
    height: auto;
  }
  .autos2d-list-panel { flex: none; height: 40vh; }
  .autos2d-preview-panel { flex: none; height: 46vh; }
  .autos2d-combo { width: 100%; }
  .autos2d-filter-group { flex: 1 1 100%; }
}

/* ── Telefono (<=768px): admin.css convierte .admin-users-table en tarjetas y
   OCULTA td:nth-child(3) (regla pensada para la columna "Proyectos" del modal
   de usuarios). Aqui la 3a columna es Usuario y es imperativo verla. Se scopea
   con .autos2d-list-panel para ganar en especificidad a admin.css sin depender
   del orden de carga. Layout de tarjeta resultante:
     usuario (negrita, linea completa)
     #ID              fecha            */
@media (max-width: 768px) {
  /* En tarjeta el padding lo pone el tr (admin.css); sin esto, el padding y
     border-bottom de celda del modo tabla se cuelan y ensucian la tarjeta */
  .autos2d-list-panel .autos2d-table .autos2d-row td {
    padding: 0;
    border-bottom: none;
  }

  .autos2d-list-panel .autos2d-table td.autos2d-col-usuario {
    display: block;
    order: -1;              /* usuario primero, aunque en el DOM va tercero */
    flex: 1 1 100%;
    min-width: 0;
    font-weight: 600;
    font-size: 13px;
    color: var(--color-text-primary, #111827);
  }

  .autos2d-list-panel .autos2d-table td.autos2d-col-id {
    width: auto;
    flex: 1;
    font-size: 12px;
  }
  /* En tarjeta el numero suelto no se lee como ID; el prefijo lo aclara */
  .autos2d-list-panel .autos2d-table td.autos2d-col-id::before { content: "#"; }

  .autos2d-list-panel .autos2d-table td.autos2d-col-fecha {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--color-text-secondary, #6b7280);
  }

  /* admin.css pinta las tarjetas con background propio (mas especifico que
     .autos2d-row-selected): re-declarar la seleccion para que se note */
  .autos2d-list-panel .autos2d-table tbody tr.autos2d-row-selected {
    background: rgba(99, 102, 241, 0.14);
    border-color: rgba(99, 102, 241, 0.45);
  }
}