/* ============================================================
   Fissy Agents Portal — agents.css
   ============================================================ */

:root {
  --bg:        #f1f5f9;
  --surface:   #ffffff;
  --surface2:  #f8fafc;
  --border:    #e2e8f0;
  --text:      #1e293b;
  --text-muted:#64748b;
  --accent:    #6366f1;
  --accent-h:  #4f46e5;
  --accent-lt: #eef2ff;
  --success:   #10b981;
  --warn:      #f59e0b;
  --danger:    #ef4444;
  --sidebar-w: 280px;
  --header-h:  60px;
  --radius:    10px;
  --shadow:    0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.10);
}

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', system-ui, sans-serif; background: var(--bg); color: var(--text); font-size: 14px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ─── Layout ──────────────────────────────────────────────────── */
.app-layout   { display: flex; height: 100vh; overflow: hidden; }
.app-sidebar  { width: var(--sidebar-w); min-width: var(--sidebar-w); background: #1e293b; color: #e2e8f0; display: flex; flex-direction: column; overflow: hidden; }
.app-main     { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.app-topbar   { height: var(--header-h); background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; box-shadow: var(--shadow); }
.app-content  { flex: 1; overflow-y: auto; padding: 24px; }

/* ─── Topbar ──────────────────────────────────────────────────── */
.topbar-left  { display: flex; align-items: center; gap: 12px; }
.topbar-logo  { height: 28px; }
.topbar-sep   { width: 1px; height: 22px; background: var(--border); }
.topbar-title { font-weight: 600; font-size: .9rem; color: var(--text-muted); }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.topbar-agent { font-size: .85rem; color: var(--text-muted); }
.topbar-agent strong { color: var(--text); }
.btn-logout   { font-size: .8rem; color: var(--text-muted); cursor: pointer; border: 1px solid var(--border); background: none; padding: 5px 12px; border-radius: 6px; }
.btn-logout:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-admin    { font-size: .8rem; background: var(--accent-lt); color: var(--accent); border: none; padding: 5px 12px; border-radius: 6px; cursor: pointer; font-weight: 600; }
.btn-admin:hover { background: var(--accent); color: #fff; }

/* ─── Sidebar ─────────────────────────────────────────────────── */
.sidebar-header  { padding: 18px 16px 12px; border-bottom: 1px solid #334155; }
.sidebar-header h3 { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: #94a3b8; font-weight: 600; margin-bottom: 10px; }
.sidebar-search  { width: 100%; background: #0f172a; border: 1px solid #334155; border-radius: 8px; padding: 8px 12px; color: #e2e8f0; font-size: .85rem; outline: none; }
.sidebar-search::placeholder { color: #64748b; }
.sidebar-search:focus { border-color: var(--accent); }

.sidebar-clients { flex: 1; overflow-y: auto; padding: 8px 8px; }
.sidebar-clients::-webkit-scrollbar { width: 4px; }
.sidebar-clients::-webkit-scrollbar-track { background: transparent; }
.sidebar-clients::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }

.client-item  { display: flex; align-items: center; gap: 10px; padding: 10px 10px; border-radius: 8px; cursor: pointer; margin-bottom: 2px; transition: background .15s; }
.client-item:hover  { background: #334155; }
.client-item.active { background: var(--accent); }
.client-item.active .ci-name { color: #fff; }
.client-item.active .ci-email { color: rgba(255,255,255,.7); }
.client-item.active .ci-score { background: rgba(255,255,255,.2); color: #fff; }

.ci-avatar    { width: 34px; height: 34px; border-radius: 50%; background: #334155; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; color: #94a3b8; flex-shrink: 0; }
.client-item.active .ci-avatar { background: rgba(255,255,255,.2); color: #fff; }
.ci-info      { flex: 1; min-width: 0; }
.ci-name      { font-size: .85rem; font-weight: 600; color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci-email     { font-size: .73rem; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci-score     { font-size: .72rem; font-weight: 700; padding: 2px 7px; border-radius: 12px; flex-shrink: 0; }
.score-green  { background: #052e16; color: #4ade80; }
.score-yellow { background: #2d1d00; color: #fbbf24; }
.score-red    { background: #2d0707; color: #f87171; }
.score-none   { background: #1e293b; color: #64748b; }

.sidebar-footer { padding: 12px 10px; border-top: 1px solid #334155; }
.btn-add-client { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px; border-radius: 8px; background: var(--accent); color: #fff; border: none; font-size: .85rem; font-weight: 600; cursor: pointer; transition: background .15s; }
.btn-add-client:hover { background: var(--accent-h); }

/* ─── Cards de métricas ───────────────────────────────────────── */
.metrics-grid   { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 20px; }
.metric-card    { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.mc-label       { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 6px; }
.mc-value       { font-size: 1.4rem; font-weight: 700; color: var(--text); }
.mc-sub         { font-size: .75rem; color: var(--text-muted); margin-top: 4px; }
.mc-pos         { color: var(--success); }
.mc-neg         { color: var(--danger); }

/* ─── Panel de cliente ────────────────────────────────────────── */
.empty-state    { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; min-height: 400px; color: var(--text-muted); gap: 12px; }
.empty-state svg { opacity: .25; }
.empty-state p  { font-size: 1rem; font-weight: 500; }

.client-header  { display: flex; align-items: flex-start; justify-content: space-between; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 24px; margin-bottom: 18px; box-shadow: var(--shadow); }
.ch-info        { display: flex; align-items: center; gap: 16px; }
.ch-avatar      { width: 52px; height: 52px; border-radius: 50%; background: var(--accent-lt); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 700; flex-shrink: 0; }
.ch-name        { font-size: 1.1rem; font-weight: 700; color: var(--text); }
.ch-meta        { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.ch-badge       { font-size: .75rem; background: var(--surface2); border: 1px solid var(--border); border-radius: 20px; padding: 2px 10px; color: var(--text-muted); }
.ch-code        { font-size: .75rem; background: var(--accent-lt); color: var(--accent); border-radius: 20px; padding: 2px 10px; font-weight: 700; font-family: monospace; letter-spacing: .1em; }
.ch-actions     { display: flex; gap: 8px; flex-shrink: 0; }

/* ─── Score + Camino ──────────────────────────────────────────── */
.diagnostics-row { display: grid; grid-template-columns: 200px 1fr; gap: 16px; margin-bottom: 20px; }
.score-card      { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; text-align: center; box-shadow: var(--shadow); }
.score-title     { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 12px; }
.score-circle    { position: relative; width: 90px; height: 90px; margin: 0 auto; }
.score-svg       { transform: rotate(-90deg); }
.score-number    { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 800; }
.score-label     { font-size: .75rem; color: var(--text-muted); margin-top: 8px; }

.camino-card     { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.camino-title    { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 12px; }
.camino-stage    { font-size: 1.15rem; font-weight: 700; margin-bottom: 6px; }
.camino-desc     { font-size: .82rem; color: var(--text-muted); line-height: 1.5; }
.camino-stages   { display: flex; gap: 4px; margin-top: 14px; flex-wrap: wrap; }
.cs-dot          { width: 26px; height: 6px; border-radius: 3px; background: var(--border); }
.cs-dot.active   { background: var(--accent); }
.cs-dot.done     { background: var(--success); }

/* ─── Tabs ────────────────────────────────────────────────────── */
.tab-bar        { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 20px; }
.tab-btn        { padding: 10px 18px; font-size: .85rem; font-weight: 600; color: var(--text-muted); background: none; border: none; border-bottom: 3px solid transparent; cursor: pointer; margin-bottom: -2px; }
.tab-btn:hover  { color: var(--text); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-pane       { display: none; }
.tab-pane.active{ display: block; }

/* ─── Formulario de edición ───────────────────────────────────── */
.edit-section   { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 24px; margin-bottom: 16px; box-shadow: var(--shadow); }
.edit-section h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 16px; font-weight: 600; }
.fields-grid    { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.field-group    { display: flex; flex-direction: column; gap: 5px; }
.field-group label { font-size: .78rem; font-weight: 600; color: var(--text-muted); }
.field-input    { border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; font-size: .85rem; color: var(--text); background: var(--surface2); outline: none; }
.field-input:focus { border-color: var(--accent); background: #fff; }
.field-input[readonly] { background: var(--bg); color: var(--text-muted); cursor: not-allowed; }
.field-prefix-wrap { position: relative; }
.field-prefix    { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: .85rem; pointer-events: none; }
.field-prefix-wrap .field-input { padding-left: 22px; }
.save-bar        { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.save-status     { font-size: .82rem; color: var(--text-muted); flex: 1; }
.save-status.ok  { color: var(--success); }
.save-status.err { color: var(--danger); }

/* ─── Notas ───────────────────────────────────────────────────── */
.notes-area     { width: 100%; min-height: 160px; border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; font-size: .85rem; font-family: inherit; line-height: 1.6; resize: vertical; outline: none; background: var(--surface2); color: var(--text); }
.notes-area:focus { border-color: var(--accent); background: #fff; }
.notes-meta     { font-size: .75rem; color: var(--text-muted); margin-top: 6px; }

/* ─── Botones ─────────────────────────────────────────────────── */
.btn-primary    { background: var(--accent); color: #fff; border: none; padding: 9px 20px; border-radius: 7px; font-size: .85rem; font-weight: 600; cursor: pointer; }
.btn-primary:hover { background: var(--accent-h); }
.btn-secondary  { background: var(--surface); color: var(--text); border: 1px solid var(--border); padding: 9px 20px; border-radius: 7px; font-size: .85rem; font-weight: 600; cursor: pointer; }
.btn-secondary:hover { background: var(--bg); }
.btn-sm         { padding: 5px 12px; font-size: .78rem; }
.btn-full       { width: 100%; }
.btn-danger     { background: var(--danger); color: #fff; border: none; }
.btn-danger:hover { background: #dc2626; }

/* ─── Modal agregar cliente ───────────────────────────────────── */
.modal-overlay  { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 100; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .2s; }
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal-box      { background: var(--surface); border-radius: var(--radius); padding: 28px; width: 420px; max-width: 95vw; box-shadow: var(--shadow-md); transform: translateY(12px); transition: transform .2s; }
.modal-overlay.open .modal-box { transform: translateY(0); }
.modal-title    { font-size: 1rem; font-weight: 700; margin-bottom: 6px; }
.modal-sub      { font-size: .82rem; color: var(--text-muted); margin-bottom: 20px; line-height: 1.5; }
.modal-form     { display: flex; flex-direction: column; gap: 14px; }
.modal-actions  { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; }
.modal-error    { font-size: .82rem; color: var(--danger); background: #fff1f1; border: 1px solid #fecaca; border-radius: 6px; padding: 8px 12px; display: none; }
.modal-error.show { display: block; }

/* ─── Login ───────────────────────────────────────────────────── */
.login-body     { background: var(--bg); display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-card     { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 36px 40px; width: 400px; max-width: 96vw; box-shadow: var(--shadow-md); }
.login-logo     { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }
.login-portal-label { font-size: .8rem; background: var(--accent-lt); color: var(--accent); border-radius: 20px; padding: 3px 10px; font-weight: 600; }
.login-title    { font-size: 1.4rem; font-weight: 800; margin-bottom: 4px; }
.login-sub      { font-size: .85rem; color: var(--text-muted); margin-bottom: 24px; }
.login-form     { display: flex; flex-direction: column; gap: 16px; }
.form-group     { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: .82rem; font-weight: 600; color: var(--text); }
.form-group input { border: 1px solid var(--border); border-radius: 7px; padding: 10px 12px; font-size: .9rem; outline: none; }
.form-group input:focus { border-color: var(--accent); }
.login-footer   { font-size: .78rem; color: var(--text-muted); margin-top: 20px; text-align: center; }

/* ─── Alerts ──────────────────────────────────────────────────── */
.alert          { padding: 10px 14px; border-radius: 7px; font-size: .83rem; margin-bottom: 14px; }
.alert-error    { background: #fff1f1; border: 1px solid #fecaca; color: #b91c1c; }
.alert-success  { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; }

/* ─── Admin panel ─────────────────────────────────────────────── */
.admin-header   { margin-bottom: 24px; }
.admin-header h1 { font-size: 1.3rem; font-weight: 800; }
.admin-header p  { font-size: .85rem; color: var(--text-muted); margin-top: 4px; }
.data-table     { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.data-table th  { background: var(--surface2); text-align: left; padding: 10px 14px; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 600; border-bottom: 1px solid var(--border); }
.data-table td  { padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: .85rem; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--surface2); }
.status-active  { display: inline-block; background: #f0fdf4; color: #15803d; border-radius: 12px; padding: 2px 10px; font-size: .75rem; font-weight: 600; }
.status-inactive{ display: inline-block; background: #fef2f2; color: #b91c1c; border-radius: 12px; padding: 2px 10px; font-size: .75rem; font-weight: 600; }
.badge-admin    { display: inline-block; background: var(--accent-lt); color: var(--accent); border-radius: 12px; padding: 2px 10px; font-size: .73rem; font-weight: 700; }
.badge-agent    { display: inline-block; background: #f8fafc; color: var(--text-muted); border-radius: 12px; padding: 2px 10px; font-size: .73rem; font-weight: 600; border: 1px solid var(--border); }
.page-header    { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.page-header h2 { font-size: 1.05rem; font-weight: 700; }

/* ─── Toast ───────────────────────────────────────────────────── */
.toast          { position: fixed; bottom: 24px; right: 24px; background: #1e293b; color: #fff; padding: 12px 18px; border-radius: 8px; font-size: .85rem; box-shadow: var(--shadow-md); z-index: 200; transform: translateY(80px); transition: transform .25s; }
.toast.show     { transform: translateY(0); }
.toast.ok       { background: var(--success); }
.toast.err      { background: var(--danger); }

/* ─── Spinner ─────────────────────────────────────────────────── */
.spinner        { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .app-sidebar { position: fixed; left: -100%; top: 0; height: 100%; z-index: 50; transition: left .25s; }
  .app-sidebar.open { left: 0; }
  .diagnostics-row { grid-template-columns: 1fr; }
  .fields-grid { grid-template-columns: 1fr 1fr; }
}