/* frontend-manager.css - minimalista y responsive */
:root {
  --primary: #4D8AA7;
  --bg: #f8f9fb;
  --card: #ffffff;
  --muted: #6b7280;
  --radius: 10px;
  --transition: 0.22s;
  font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

.ssa-fm-root {
  max-width: 1100px;
  margin: 20px auto;
  padding: 18px;
  background: var(--bg);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(17,24,39,0.04);
}

/* Header */
.ssa-fm-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.ssa-fm-header h2 {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:20px;
  margin:0;
  color:#0f172a;
}
.ssa-fm-icon { font-size:20px; }

/* Buttons */
.ssa-fm-btn {
  padding:8px 12px;
  border-radius:8px;
  border:1px solid rgba(15,23,42,0.06);
  background: #4D8AA7;
  cursor:pointer;
  transition: transform var(--transition), box-shadow var(--transition);
  font-weight:500;
}
.ssa-fm-btn:active { transform: translateY(1px); }
.ssa-fm-btn-primary {
  background: var(--primary);
  color: #fff;
  border: none;
}

/* Toolbar & stats */
.ssa-fm-toolbar {
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom: 18px;
  flex-wrap:wrap;
}
.ssa-fm-toolbar input[type="text"]{
  padding:8px 12px;
  border-radius:10px;
  border:1px solid rgba(15,23,42,0.06);
  min-width:220px;
}
.ssa-fm-stats { display:flex; gap:12px; margin-left:auto; align-items:center; }
.ssa-fm-stat { background:var(--card); padding:8px 12px; border-radius:8px; text-align:center; min-width:74px; box-shadow: 0 2px 6px rgba(15,23,42,0.03); }
.ssa-fm-stat-number { font-size:18px; font-weight:700; color:#0f172a; }
.ssa-fm-stat-label { font-size:12px; color:var(--muted); }

/* List & cards */
.ssa-fm-list { display:flex; flex-direction:column; gap:12px; margin-top:6px; }
.ssa-fm-card {
  background: var(--card);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(17,24,39,0.04);
  transition: transform var(--transition), box-shadow var(--transition);
}
.ssa-fm-card:hover { transform: translateY(-3px); }

/* card header */
.ssa-fm-card-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px;
  background: var(--primary);
  color:#fff;
}
.ssa-fm-card-meta { display:flex; gap:8px; align-items:center; font-weight:600; }
.ssa-fm-badge { background: rgba(255,255,255,0.12); padding:6px 10px; border-radius:999px; font-size:13px; text-transform:uppercase; }

/* card body */
.ssa-fm-card-body { padding:12px 14px; display:flex; justify-content:space-between; gap:12px; align-items:center; flex-wrap:wrap; }
.ssa-fm-summary { color:#0f172a; }
.ssa-fm-contact { color:var(--muted); font-size:13px; }
.ssa-fm-actions { display:flex; gap:8px; }

/* details (expandable) */
.ssa-fm-details { max-height:0; overflow:hidden; transition: max-height var(--transition) ease, padding var(--transition) ease; padding:0 14px; background: #fbfcfe;}
.ssa-fm-details.open { padding:12px 14px; max-height:420px; }

/* empty state */
.ssa-fm-empty { padding:30px; text-align:center; color:var(--muted); background:linear-gradient(180deg, rgba(255,255,255,0.6), transparent); border-radius:8px; }

/* modal */
.ssa-fm-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(3px);
  z-index: 9999;
}
.ssa-fm-modal[aria-hidden="false"] { display:flex; }
.ssa-fm-modal-inner {
  width: 100%;
  max-width: 720px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(2,6,23,0.2);
  overflow: hidden;
  transform: translateY(6px);
}
.ssa-fm-modal-header { display:flex; justify-content:space-between; align-items:center; padding:14px 18px; border-bottom:1px solid #f1f5f9;}
.ssa-fm-modal-close { background:transparent; border:none; font-size:18px; cursor:pointer; }
.ssa-fm-form { padding:16px; display:flex; flex-direction:column; gap:10px; }
.ssa-fm-row label { font-size:13px; color:var(--muted); display:block; margin-bottom:6px; }
.ssa-fm-row input, .ssa-fm-row select { padding:10px; border-radius:8px; border:1px solid rgba(15,23,42,0.06); width:100%; }

/* toast */
.ssa-fm-toast { position: fixed; top: 18px; right: 18px; z-index: 99999; display:flex; flex-direction:column; gap:8px; }
.ssa-fm-toast .toast { background: #111827; color:#fff; padding:10px 14px; border-radius:8px; box-shadow: 0 8px 20px rgba(2,6,23,0.2); opacity:0; transform:translateY(-8px); transition: opacity .18s, transform .18s; }
.ssa-fm-toast .toast.show { opacity:1; transform:translateY(0); }

/* spinner */
.ssa-fm-spinner {
  display:none;
  position:fixed;
  right:18px;
  top:18px;
  width:40px;
  height:40px;
  border-radius:50%;
  border:4px solid rgba(77,138,167,0.18);
  border-top-color: var(--primary);
  animation: spin 1s linear infinite;
  z-index:99998;
}
.ssa-fm-spinner.show { display:block; }

@keyframes spin { to { transform: rotate(360deg); } }

/* responsive */
@media (max-width:720px) {
  .ssa-fm-stats { display:none; }
  .ssa-fm-header { flex-direction:column; align-items:flex-start; gap:10px; }
  .ssa-fm-card-body { flex-direction:column; align-items:flex-start; }
}