/* ============================================================
   AKSTRATO CRM — Módulo Automatizaciones
   ============================================================ */

/* ── Layout ─────────────────────────────────────────────────── */
.auto-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding-bottom: 48px;
}

.auto-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}
.auto-header-text h1 {
  font-size: 20px;
  font-weight: 800;
  color: #0D1B2A;
  margin: 0 0 3px;
}
.auto-header-text p {
  font-size: 13px;
  color: #9CA3AF;
  margin: 0;
}

/* ── Estado vacío ───────────────────────────────────────────── */
.auto-empty {
  text-align: center;
  padding: 72px 20px;
  color: #9CA3AF;
}
.auto-empty-icon {
  font-size: 44px;
  margin-bottom: 14px;
  display: block;
}
.auto-empty h3 {
  font-size: 16px;
  font-weight: 700;
  color: #374151;
  margin: 0 0 8px;
}
.auto-empty p {
  font-size: 13px;
  max-width: 360px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ── Stats bar ──────────────────────────────────────────────── */
.auto-stats {
  display: flex;
  gap: 10px;
  margin-bottom: 22px;
}
.auto-stat {
  background: #fff;
  border: 1.5px solid #E8E8EC;
  border-radius: 12px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 120px;
}
.auto-stat-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.auto-stat-icon.active   { background: #DCFCE7; }
.auto-stat-icon.inactive { background: #F3F4F6; }
.auto-stat-icon.total    { background: #EEF2FF; }
.auto-stat-num {
  font-size: 22px;
  font-weight: 800;
  color: #0D1B2A;
  line-height: 1;
}
.auto-stat-lbl {
  font-size: 11px;
  color: #9CA3AF;
  margin-top: 2px;
}

/* ── Lista ──────────────────────────────────────────────────── */
.auto-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Tarjeta — diseño con borde izquierdo de color ──────────── */
.auto-card {
  background: #fff;
  border: 1.5px solid #E8E8EC;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  transition: box-shadow .18s, border-color .18s, transform .14s;
}
.auto-card:hover {
  box-shadow: 0 6px 22px rgba(0,0,0,.08);
  border-color: #D1D5DB;
  transform: translateY(-1px);
}
.auto-card.inactive { opacity: .55; }

/* Borde izquierdo de color según tipo de disparador */
.auto-card-accent {
  width: 4px;
  flex-shrink: 0;
  border-radius: 0;
  align-self: stretch;
}
.auto-card-accent.trigger-lead    { background: #6366F1; }
.auto-card-accent.trigger-message { background: #10B981; }
.auto-card-accent.trigger-time    { background: #F59E0B; }
.auto-card-accent.trigger-task    { background: #F97316; }
.auto-card-accent.trigger-default { background: #9CA3AF; }

/* Cuerpo principal */
.auto-card-body {
  flex: 1;
  min-width: 0;
  padding: 16px 18px;
}

/* Fila superior: nombre + badge + toggle */
.auto-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.auto-card-name {
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  color: #0D1B2A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.auto-card-status {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  flex-shrink: 0;
}
.auto-card-status.active   { background: #DCFCE7; color: #16A34A; }
.auto-card-status.inactive { background: #F3F4F6; color: #6B7280; }

/* Toggle switch */
.auto-toggle {
  width: 36px;
  height: 20px;
  border-radius: 10px;
  position: relative;
  cursor: pointer;
  transition: background .2s;
  flex-shrink: 0;
}
.auto-toggle.on  { background: #2B2BFF; }
.auto-toggle.off { background: #D1D5DB; }
.auto-toggle-knob {
  position: absolute;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: left .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.auto-toggle.on  .auto-toggle-knob { left: 18px; }
.auto-toggle.off .auto-toggle-knob { left: 2px; }

/* ── Flujo visual CUANDO → ENTONCES ─────────────────────────── */
.auto-flow {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.auto-flow-step {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.auto-flow-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
}
.auto-flow-step.when  .auto-flow-label { color: #D97706; }
.auto-flow-step.then  .auto-flow-label { color: #065F46; }
.auto-flow-step.cond  .auto-flow-label { color: #1D4ED8; }

.auto-flow-val {
  font-size: 12px;
  color: #374151;
  background: #F8F8FB;
  border-radius: 7px;
  padding: 5px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
  border: 1px solid #EBEBF0;
}
.auto-flow-step.when .auto-flow-val  { background: #FFFBEB; border-color: #FDE68A; color: #92400E; }
.auto-flow-step.then .auto-flow-val  { background: #F0FDF4; border-color: #BBF7D0; color: #065F46; }
.auto-flow-step.cond .auto-flow-val  { background: #EEF2FF; border-color: #C7D2FE; color: #3730A3; }

.auto-flow-arr {
  color: #D1D5DB;
  font-size: 16px;
  margin-top: 18px;
  flex-shrink: 0;
}

.auto-flow-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.auto-flow-action-chip {
  font-size: 11px;
  font-weight: 600;
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  color: #065F46;
  border-radius: 6px;
  padding: 4px 9px;
  white-space: nowrap;
}

/* Fila inferior: meta + botones */
.auto-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid #F3F4F6;
}
.auto-card-meta {
  font-size: 11px;
  color: #9CA3AF;
}

/* Botones de la tarjeta */
.auto-card-btns {
  display: flex;
  align-items: center;
  gap: 5px;
}
.auto-card-btn {
  background: #F5F5F7;
  border: none;
  border-radius: 7px;
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  color: #374151;
  transition: background .15s;
  white-space: nowrap;
}
.auto-card-btn:hover { background: #EBEBF0; }
.auto-card-btn.danger {
  background: none;
  color: #D1D5DB;
  padding: 5px 7px;
  font-size: 16px;
  line-height: 1;
  transition: color .15s, background .15s;
}
.auto-card-btn.danger:hover { color: #EF4444; background: #FEF2F2; }

/* Badges (legacy, aún usados en picker) */
.auto-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 6px;
}
.auto-badge.action        { background: #EEF2FF; color: #2B2BFF; }
.auto-badge.trigger-tag   { background: #FEF3C7; color: #D97706; }
.auto-badge.condition-tag { background: #F0F9FF; color: #0284C7; }

/* ── Sección del formulario (drawer) ────────────────────────── */
.auto-form { display: flex; flex-direction: column; gap: 18px; padding: 20px; }

.auto-form-field { display: flex; flex-direction: column; gap: 6px; }
.auto-form-label {
  font-size: 11px;
  font-weight: 700;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: .6px;
}
.auto-form-input {
  width: 100%;
  border: 1.5px solid #E8E8EC;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
  box-sizing: border-box;
  font-family: inherit;
  outline: none;
  transition: border-color .15s;
  background: #fff;
  color: #0D1B2A;
}
.auto-form-input:focus { border-color: #2B2BFF; }

/* Secciones CUANDO / SI / ENTONCES */
.auto-form-section {
  background: #F8F8FB;
  border-radius: 12px;
  padding: 14px 16px;
}
.auto-form-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.auto-section-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
  letter-spacing: .4px;
}
.auto-section-tag.when    { background: #FEF3C7; color: #D97706; }
.auto-section-tag.if      { background: #EEF2FF; color: #2B2BFF; }
.auto-section-tag.then    { background: #D1FAE5; color: #065F46; }

/* Fila de condición / acción */
.auto-row {
  background: #fff;
  border: 1.5px solid #E8E8EC;
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.auto-row select, .auto-row input {
  border: 1.5px solid #E5E7EB;
  border-radius: 7px;
  padding: 5px 9px;
  font-size: 12px;
  font-family: inherit;
  outline: none;
  background: #fff;
  transition: border-color .15s;
}
.auto-row select:focus, .auto-row input:focus { border-color: #2B2BFF; }
.auto-row-delete {
  background: none;
  border: none;
  cursor: pointer;
  color: #EF4444;
  font-size: 16px;
  padding: 0 2px;
  margin-left: auto;
  flex-shrink: 0;
}

/* Botón "+ Condición" / "+ Acción" */
.auto-add-btn {
  background: none;
  border: 1.5px dashed #D1D5DB;
  border-radius: 7px;
  padding: 5px 14px;
  font-size: 11px;
  cursor: pointer;
  color: #6B7280;
  font-family: inherit;
  transition: border-color .15s, color .15s;
}
.auto-add-btn:hover { border-color: #2B2BFF; color: #2B2BFF; }

/* Estado vacío de condiciones */
.auto-empty-section {
  font-size: 12px;
  color: #9CA3AF;
  text-align: center;
  padding: 12px;
  background: #F5F5F7;
  border-radius: 8px;
}

/* ── Selector de acciones estilo Kommo ──────────────── */
.auto-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(3px);
}
.auto-picker-modal {
  background: #0F172A;
  border-radius: 18px;
  width: 500px;
  max-width: 95vw;
  padding: 22px;
  box-shadow: 0 28px 64px rgba(0,0,0,.6);
}
.auto-picker-title {
  font-size: 15px;
  font-weight: 700;
  color: #F1F5F9;
  margin-bottom: 14px;
}
.auto-picker-search {
  width: 100%;
  background: #1E293B;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 9px;
  padding: 9px 13px;
  font-size: 13px;
  color: #F1F5F9;
  margin-bottom: 16px;
  outline: none;
  box-sizing: border-box;
  font-family: inherit;
  transition: border-color .15s;
}
.auto-picker-search::placeholder { color: #475569; }
.auto-picker-search:focus { border-color: rgba(59,130,246,.6); }
.auto-picker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
}
.auto-picker-card {
  background: #1E293B;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 11px;
  padding: 14px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .12s;
  user-select: none;
}
.auto-picker-card:hover {
  background: #1D4ED8;
  border-color: #3B82F6;
  transform: translateY(-1px);
}
.auto-picker-card:active { transform: translateY(0); }
.auto-picker-card-icon {
  width: 38px;
  height: 38px;
  background: rgba(255,255,255,.09);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
}
.auto-picker-card:hover .auto-picker-card-icon {
  background: rgba(255,255,255,.15);
}
.auto-picker-card-label {
  font-size: 10px;
  font-weight: 500;
  color: #94A3B8;
  text-align: center;
  line-height: 1.35;
}
.auto-picker-card:hover .auto-picker-card-label { color: #E2E8F0; }
.auto-picker-cancel {
  width: 100%;
  margin-top: 14px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 9px;
  padding: 9px;
  font-size: 12px;
  color: #64748B;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, color .15s;
}
.auto-picker-cancel:hover { background: rgba(255,255,255,.05); color: #94A3B8; }

/* Tarjeta de acción ya seleccionada (en el formulario) */
.auto-action-selected {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #EEF2FF;
  border: 1.5px solid #C7D2FE;
  border-radius: 9px;
  padding: 9px 12px;
  margin-bottom: 10px;
}
.auto-action-selected-icon {
  font-size: 18px;
  flex-shrink: 0;
}
.auto-action-selected-label {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: #1E40AF;
}
.auto-action-change-btn {
  background: none;
  border: none;
  font-size: 11px;
  color: #6366F1;
  cursor: pointer;
  font-family: inherit;
  padding: 3px 7px;
  border-radius: 5px;
  transition: background .15s;
  flex-shrink: 0;
  font-weight: 500;
}
.auto-action-change-btn:hover { background: #C7D2FE; }

/* Botón "Elegir acción" cuando no hay tipo seleccionado */
.auto-action-pick-btn {
  width: 100%;
  background: #F8F8FB;
  border: 1.5px dashed #C7D2FE;
  border-radius: 9px;
  padding: 12px;
  font-size: 12px;
  font-weight: 600;
  color: #6366F1;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, border-color .15s;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.auto-action-pick-btn:hover {
  background: #EEF2FF;
  border-color: #818CF8;
}