/* locampocam — visual system */
:root{
  /* Tokens canónicos — paleta vigente locampocam (light): blanca/gris neutra, sin dominante azul */
  --color-bg:#FFFFFF;
  --color-surface:#FFFFFF;
  --color-surface-muted:#F7F7F7;
  --color-surface-emphasis:#EAEAEA;
  --color-text:#2F2E2E;
  --color-text-secondary:#666666;
  --color-text-muted:#949494;
  --color-border:rgba(47,46,46,0.16);
  --color-border-strong:rgba(47,46,46,0.28);
  --color-overlay:rgba(47,46,46,0.45);
  --color-brand:#97DEFF;
  --color-brand-action:#32B8F2;
  --color-brand-text:#163A4C;

  --color-shell-bg:#2F2E2E;
  --color-shell-surface:#343333;
  --color-shell-border:rgba(255,255,255,0.14);
  --color-shell-text:#FFFFFF;
  --color-shell-text-secondary:#EAEAEA;
  --color-shell-text-muted:#949494;

  --color-nav-hover-bg:rgba(255,255,255,0.08);
  --color-nav-active-bg:rgba(151,222,255,0.18);
  --color-nav-active-text:#FFFFFF;
  --color-nav-active-icon:#97DEFF;

  --color-agent-panel-bg:#343333;
  --color-agent-panel-border:rgba(255,255,255,0.14);
  --color-control-bg:#FFFFFF;
  --color-control-border:rgba(47,46,46,0.28);

  /* Estados semánticos — sobrios, sin relación con el celeste de marca */
  --color-info:#2563EB;
  --color-success:#15803D;
  --color-warning:#F59E0B;
  --color-danger:#DC2626;
  --color-info-text:#1D4ED8;
  --color-success-text:#166534;
  --color-warning-text:#925B08;
  --color-danger-text:#B91C1C;
  --color-success-bg:#EAF5EE;
  --color-warning-bg:#FFF6E5;
  --color-danger-bg:#FDEEEE;
  --color-info-bg:#EFF5FF;
  --color-violet:#7C6FD1;
  --color-violet-text:#5B4FA8;
  --color-violet-bg:#F1EEFC;
  --color-slate:#64748B;
  --color-slate-text:#475569;
  --color-slate-bg:#EEF1F4;
  --color-selection-bg:var(--color-surface-emphasis);
  --color-selection-border:color-mix(in srgb, var(--color-brand-action) 42%, var(--color-border));
  --color-selection-text:var(--color-text);
  --color-code-bg:#2F2E2E;
  --color-code-text:#EAEAEA;
  --color-toast-bg:#2F2E2E;
  --color-toast-text:#FFFFFF;

  /* Marcas externas: usar únicamente dentro de su icono o marca. */
  --brand-whatsapp:#25D366;
  --brand-instagram:#E4405F;
  --brand-facebook:#1877F2;
  --brand-telegram:#26A5E4;
  --brand-shopify:#95BF47;
  --brand-mercadolibre:#FFE600;
  --brand-mercadolibre-ink:#2D3277;
  --brand-google-drive:#0F9D58;
  --brand-google-calendar:#1A73E8;
  --brand-zoom:#2D8CFF;
  --brand-wompi:#3F51B5;
  --brand-paypal:#00457C;
  --brand-stripe:#635BFF;

  /* Alias de compatibilidad — derivados de los tokens canónicos */
  --carbon:var(--color-shell-bg);
  --carbon-2:var(--color-shell-surface);
  --white:#FFFFFF; /* literal fijo: primer plano legible sobre color sólido de marca/estado, no una superficie */
  --accent:var(--color-brand-action);
  --accent-hover:color-mix(in srgb, var(--color-brand-action) 82%, black);
  --gray-light:var(--color-border);
  --gray-mid:var(--color-text-muted);
  --ink-on-accent:var(--color-brand-text);

  --bg:var(--color-bg);
  --bg-2:var(--color-surface-muted);
  --panel:var(--color-surface);
  --border:var(--color-border);
  --border-2:var(--color-border-strong);
  --text:var(--color-text);
  --text-2:var(--color-text-secondary);
  --text-3:var(--color-text-muted);
  --radius:10px;
  --radius-sm:6px;
  --font:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',Roboto,sans-serif;
  color-scheme: light;

  /* Elevación — sombras tonales derivadas del texto, no negro puro */
  --shadow-sm:0 2px 8px color-mix(in srgb, var(--color-text) 10%, transparent);
  --shadow-md:0 6px 20px color-mix(in srgb, var(--color-text) 16%, transparent);
  --shadow-lg:0 20px 60px color-mix(in srgb, var(--color-text) 22%, transparent);
  --focus-ring:0 0 0 3px color-mix(in srgb, var(--color-brand-action) 24%, transparent);
  --focus-ring-compact:0 0 0 2px color-mix(in srgb, var(--color-brand-action) 22%, transparent);

  /* Sidebar — siempre el shell carbón, en Light y en Dark */
  --side-bg:var(--color-shell-bg);
  --side-surface:var(--color-shell-surface);
  --side-border:var(--color-shell-border);
  --side-text:var(--color-shell-text);
  --side-text-2:var(--color-shell-text-secondary);
  --side-text-3:var(--color-shell-text-muted);
  --side-active-bg:var(--color-nav-active-bg);
}

/* DARK MODE */
[data-theme="dark"]{
  /* Tokens canónicos (dark): carbón cálido, sin negro puro ni azul marino */
  --color-bg:#2F2E2E;
  --color-surface:#3A3939;
  --color-surface-muted:#343333;
  --color-surface-emphasis:#3A3939;
  --color-text:#FFFFFF;
  --color-text-secondary:#EAEAEA;
  --color-text-muted:#949494;
  --color-border:rgba(255,255,255,0.14);
  --color-border-strong:rgba(255,255,255,0.24);
  --color-overlay:rgba(0,0,0,0.58);
  --color-brand:#97DEFF;
  --color-brand-action:#59C9FF;
  --color-brand-text:#163A4C;

  --color-shell-bg:#2F2E2E;
  --color-shell-surface:#343333;
  --color-shell-border:rgba(255,255,255,0.14);
  --color-shell-text:#FFFFFF;
  --color-shell-text-secondary:#EAEAEA;
  --color-shell-text-muted:#949494;

  --color-nav-hover-bg:rgba(255,255,255,0.08);
  --color-nav-active-bg:rgba(151,222,255,0.18);
  --color-nav-active-text:#FFFFFF;
  --color-nav-active-icon:#97DEFF;

  --color-agent-panel-bg:#343333;
  --color-agent-panel-border:rgba(255,255,255,0.14);
  --color-control-bg:#3A3939;
  --color-control-border:rgba(255,255,255,0.24);

  --color-info:#7AA8FF;
  --color-success:#65A879;
  --color-warning:#D3A24C;
  --color-danger:#D97979;
  --color-info-text:#9AB9FF;
  --color-success-text:#8BC39A;
  --color-warning-text:#E4B75F;
  --color-danger-text:#E99A9A;
  --color-success-bg:#1B3024;
  --color-warning-bg:#352A17;
  --color-danger-bg:#351F24;
  --color-info-bg:color-mix(in srgb, var(--color-info) 10%, var(--color-surface));
  --color-violet:#A597E0;
  --color-violet-text:#C4B8F0;
  --color-violet-bg:#2E2A45;
  --color-slate:#8B98AC;
  --color-slate-text:#B8C2D1;
  --color-slate-bg:#2A2E38;
  --color-selection-bg:var(--color-surface-emphasis);
  --color-selection-border:color-mix(in srgb, var(--color-brand-action) 40%, var(--color-border));
  --color-selection-text:var(--color-text);
  --color-code-bg:var(--color-shell-bg);
  --color-code-text:var(--color-shell-text-secondary);
  --color-toast-bg:var(--color-shell-surface);
  --color-toast-text:var(--color-shell-text);

  --accent:var(--color-brand-action);
  --accent-hover:color-mix(in srgb, var(--color-brand-action) 85%, white);
  --ink-on-accent:var(--color-brand-text);
  --bg:var(--color-bg);
  --bg-2:var(--color-surface-muted);
  --panel:var(--color-surface);
  --border:var(--color-border);
  --border-2:var(--color-border-strong);
  --text:var(--color-text);
  --text-2:var(--color-text-secondary);
  --text-3:var(--color-text-muted);
  color-scheme: dark;

  --shadow-sm:0 2px 8px rgba(24,22,22,0.28);
  --shadow-md:0 6px 20px rgba(24,22,22,0.36);
  --shadow-lg:0 20px 60px rgba(24,22,22,0.46);
  --focus-ring:0 0 0 3px color-mix(in srgb, var(--color-brand-action) 22%, transparent);
  --focus-ring-compact:0 0 0 2px color-mix(in srgb, var(--color-brand-action) 20%, transparent);

  --side-bg:var(--color-shell-bg);
  --side-surface:var(--color-shell-surface);
  --side-border:var(--color-shell-border);
  --side-text:var(--color-shell-text);
  --side-text-2:var(--color-shell-text-secondary);
  --side-text-3:var(--color-shell-text-muted);
}

body{transition:background-color 200ms ease,color 200ms ease}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);background:var(--bg-2);color:var(--text);font-size:13px;line-height:1.5;-webkit-font-smoothing:antialiased}
.app{display:flex;height:100vh;overflow:hidden;background:var(--bg)}

/* SIDEBAR — carbón de marca en Light; en Dark usa los tokens compartidos (ver bloque [data-theme="dark"]) */
.side{width:224px;min-width:224px;background:var(--side-bg);border-right:1px solid var(--side-border);display:flex;flex-direction:column}
.side-top{padding:14px 14px 12px;border-bottom:1px solid var(--side-border)}
.ws-pick{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:8px;cursor:pointer;border:1px solid transparent}
.ws-pick:hover{background:var(--color-nav-hover-bg);border-color:var(--side-border)}
.ws-logo{width:30px;height:30px;border-radius:7px;background:var(--accent);color:var(--ink-on-accent);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0}
.ws-info{flex:1;min-width:0}
.ws-name{font-size:13px;font-weight:600;color:var(--side-text);line-height:1.2}
.ws-sub{font-size:11px;color:var(--side-text-3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-caret{color:var(--side-text-3);font-size:10px}
.side-nav{flex:1;overflow-y:auto;padding:8px 0 16px;min-height:0}
.side-section{font-size:10px;font-weight:600;color:var(--side-text-3);text-transform:uppercase;letter-spacing:0.08em;padding:14px 16px 6px}
.nav-item{display:flex;align-items:center;gap:10px;padding:7px 16px;font-size:13px;color:var(--side-text-2);cursor:pointer;border-left:2px solid transparent;user-select:none}
.nav-item:hover{background:var(--color-nav-hover-bg);color:var(--side-text)}
.nav-item.active{background:var(--color-nav-active-bg);color:var(--color-nav-active-text);font-weight:500;border-left-color:var(--accent)}
.nav-item.active .nav-icon{color:var(--color-nav-active-icon)}
.nav-icon{width:16px;height:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:currentColor}
.nav-badge{margin-left:auto;font-size:10px;background:var(--accent);color:var(--ink-on-accent);border-radius:10px;padding:1px 7px;font-weight:600}
.nav-badge.gray{background:var(--side-surface);color:var(--side-text-3)}
.side-foot{background:var(--color-agent-panel-bg);border-top:1px solid var(--color-agent-panel-border);padding:10px 14px;display:flex;align-items:center;gap:9px;font-size:12px;color:var(--color-shell-text)}
.side-foot-av{width:28px;height:28px;border-radius:50%;background:var(--color-shell-surface);color:var(--color-nav-active-icon);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex-shrink:0}
.side-foot-av img,.ws-logo img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.side-foot > div > div{color:var(--color-shell-text)}
.agent-status{font-size:11px;color:var(--color-shell-text-muted)!important}
#agent-gear-btn{order:1}
#theme-quick-toggle{order:2}

/* MAIN */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg);min-height:0}
.topbar{height:54px;border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 24px;gap:12px;flex-shrink:0;background:var(--panel)}
.tb-title{font-size:15px;font-weight:600;color:var(--text);flex:1}
.tb-sub{font-size:12px;color:var(--text-3);font-weight:400;margin-left:8px}
.btn{font-size:12.5px;padding:7px 14px;border:1px solid var(--border-2);border-radius:7px;cursor:pointer;color:var(--text-2);background:var(--panel);font-family:inherit;font-weight:500;transition:all .12s}
.btn:hover{border-color:var(--text-3);color:var(--text)}
.btn.primary{background:var(--accent);color:var(--ink-on-accent);border-color:var(--accent);font-weight:600}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--ink-on-accent)}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:var(--bg-2)}
.btn.sm{padding:5px 10px;font-size:11.5px}
.btn.danger{color:var(--color-danger-text);border-color:color-mix(in srgb, var(--color-danger) 45%, var(--color-danger-bg))}
.btn:disabled,.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn:disabled:hover,.btn[disabled]:hover{border-color:var(--border-2);color:var(--text-2)}
.btn.primary:disabled:hover,.btn.primary[disabled]:hover{background:var(--accent);border-color:var(--accent);color:var(--ink-on-accent)}
.input:disabled{opacity:.6;cursor:not-allowed;background:var(--bg-2)}
.content{flex:1;overflow-y:auto;min-height:0}
.page{display:none;padding:24px 32px 60px;max-width:1280px;margin:0 auto;width:100%}
.page.active{display:block}
.page.full{max-width:none;padding:0}

/* SHARED COMPONENTS */
.h1{font-size:22px;font-weight:600;letter-spacing:-0.01em;margin-bottom:4px}
.subtle{color:var(--text-3);font-size:12.5px}
.section-h{font-size:13px;font-weight:600;color:var(--text);margin:24px 0 10px;text-transform:uppercase;letter-spacing:0.05em;font-size:11px;color:var(--text-3)}
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;margin-bottom:14px}
.card-h{font-size:14px;font-weight:600;margin-bottom:4px}
.card-d{font-size:12.5px;color:var(--text-3);margin-bottom:14px}
.divider{height:1px;background:var(--border);margin:14px 0}

.field{margin-bottom:14px}
.label{font-size:12.5px;font-weight:500;color:var(--text);margin-bottom:4px;display:block}
.hint{font-size:11.5px;color:var(--text-3);margin-bottom:6px}
.input,.textarea,.select{width:100%;padding:9px 11px;border:1px solid var(--border-2);border-radius:7px;font-size:13px;background:var(--panel);color:var(--text);font-family:inherit;transition:border-color .12s}
.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus-ring)}
.textarea{resize:vertical;line-height:1.55;min-height:60px}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}

.badge{display:inline-block;font-size:10.5px;padding:2px 9px;border-radius:20px;font-weight:500;line-height:1.5}
.badge.green{background:var(--color-success-bg);color:var(--color-success-text)}
.badge.orange{background:var(--color-selection-bg);color:var(--color-selection-text)}
.badge.blue{background:var(--color-info-bg);color:var(--color-info-text)}
.badge.yellow{background:var(--color-warning-bg);color:var(--color-warning-text)}
.badge.red{background:var(--color-danger-bg);color:var(--color-danger-text)}
.badge.gray{background:var(--bg-2);color:var(--text-2)}
.badge.violet{background:var(--color-violet-bg);color:var(--color-violet-text)}
.badge.slate{background:var(--color-slate-bg);color:var(--color-slate-text)}

.requires-backend{display:flex;align-items:flex-start;gap:8px;font-size:11.5px;line-height:1.5;color:var(--text-3);padding:10px 12px;margin-top:10px;border:1px dashed var(--border-2);border-radius:8px;background:var(--bg-2)}
.requires-backend .ic{flex-shrink:0;margin-top:1px;width:14px;height:14px}
.requires-backend strong{color:var(--text-2);font-weight:600}

.tag{display:inline-flex;align-items:center;font-size:11.5px;padding:4px 22px 4px 10px;border-radius:20px;background:var(--bg-2);border:1px solid var(--border);color:var(--text-2);cursor:pointer;user-select:none;position:relative;transition:background .12s,border-color .12s,color .12s}
.tag.active{background:var(--color-selection-bg);border-color:var(--color-selection-border);color:var(--color-selection-text);font-weight:600}
.tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center}

/* Tag: X eliminable — visible en hover de cualquier chip */
.tag-del{display:none;position:absolute;right:5px;top:50%;transform:translateY(-50%);width:14px;height:14px;border-radius:50%;background:var(--text-2);color:var(--white);border:none;cursor:pointer;font-size:10px;align-items:center;justify-content:center;line-height:1;padding:0;font-family:inherit;flex-shrink:0;transition:background .1s}
.tag:hover .tag-del{display:flex}
.tag-del:hover{background:var(--color-danger)}

/* Tag: botón "+" para agregar estilo */
.tag-add-btn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--bg-2);border:1.5px dashed var(--border-2);color:var(--text-3);cursor:pointer;font-size:15px;font-family:inherit;line-height:1;padding:0;transition:all .12s;flex-shrink:0}
.tag-add-btn:hover{background:var(--color-selection-bg);border-color:var(--accent);color:var(--color-selection-text)}

/* Tag: input inline al agregar */
.tag-input-wrap{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--color-selection-border);border-radius:20px;background:var(--color-selection-bg);padding:2px 5px 2px 10px}
.tag-input{border:none;background:transparent;font-size:11.5px;font-family:inherit;color:var(--color-selection-text);outline:none;width:120px}
.tag-input::placeholder{color:var(--color-selection-border)}
.tag-confirm-btn{width:18px;height:18px;border-radius:50%;background:var(--accent);color:var(--ink-on-accent);border:none;cursor:pointer;font-size:10px;display:flex;align-items:center;justify-content:center;font-family:inherit;flex-shrink:0;transition:background .1s;padding:0}
.tag-confirm-btn:hover{background:color-mix(in srgb, var(--color-brand) 55%, var(--color-brand-action))}

.suggest{background:var(--color-selection-bg);border:1px solid var(--color-selection-border);border-radius:8px;padding:12px 14px;display:flex;gap:11px;align-items:flex-start;margin-bottom:18px;overflow:hidden;transition:opacity .28s,transform .28s,max-height .35s .1s,margin-bottom .35s .1s,padding-top .35s .1s,padding-bottom .35s .1s;max-height:200px}
.suggest.dismissing{opacity:0;transform:translateY(-6px);max-height:0;margin-bottom:0;padding-top:0;padding-bottom:0}
.suggest-spark{font-size:14px;color:var(--color-selection-text);flex-shrink:0;margin-top:2px}
.suggest-body{flex:1;font-size:12.5px;color:var(--text);line-height:1.55}
.suggest-body strong{font-weight:600}
.suggest-act{display:flex;gap:6px;margin-top:8px}
.suggest-btn{font-size:11.5px;padding:5px 11px;border-radius:6px;cursor:pointer;border:1px solid;font-weight:500;font-family:inherit}
.suggest-btn.go{background:var(--accent);color:var(--ink-on-accent);border-color:var(--accent);font-weight:600}
.suggest-btn.no{background:transparent;color:var(--color-selection-text);border-color:var(--color-selection-border)}

table{width:100%;border-collapse:collapse;font-size:12.5px}
th{text-align:left;padding:10px 14px;font-size:11px;font-weight:600;color:var(--text-3);border-bottom:1px solid var(--border);text-transform:uppercase;letter-spacing:0.04em}
td{padding:11px 14px;border-bottom:1px solid var(--border);color:var(--text);vertical-align:middle}
tr:last-child td{border-bottom:none}
tr.clickable{cursor:pointer}
tr.clickable:hover{background:var(--bg-2)}
.table-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}

.metric{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px}
.metric-l{font-size:11.5px;color:var(--text-3);margin-bottom:4px;font-weight:500}
.metric-v{font-size:26px;font-weight:600;letter-spacing:-0.02em;color:var(--text);line-height:1}
.metric-s{font-size:11.5px;color:var(--text-3);margin-top:5px}
.metric-s.up{color:var(--color-success-text)}
.metric-s.down{color:var(--color-danger-text)}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:start}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;align-items:start}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:start}
@media (max-width:860px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr}}

input[type=range]{width:100%;accent-color:var(--accent)}
.slider-wrap{display:flex;align-items:center;gap:12px}
.slider-val{font-size:13px;font-weight:600;color:var(--color-selection-text);min-width:32px;text-align:right}

.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--text);color:var(--bg);padding:9px 18px;border-radius:24px;font-size:12.5px;z-index:9999;box-shadow:var(--shadow-md);animation:tin .25s ease-out}
@keyframes tin{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}

.kbd{font-family:ui-monospace,Menlo,monospace;font-size:11px;background:var(--bg-2);border:1px solid var(--border);border-radius:4px;padding:1px 5px;color:var(--text-2)}

/* DARK MODE — Native form controls */
input[type="text"],input[type="email"],input[type="number"],input[type="url"],input[type="password"],input[type="search"],input[type="tel"],textarea,select{
  background:var(--panel);
  color:var(--text);
  border:1px solid var(--border-2);
  border-radius:6px;
  padding:8px 10px;
  font-family:inherit;
  font-size:13px;
  transition:border-color .15s,background-color .15s;
}
input[type="text"]:focus,input[type="email"]:focus,input[type="number"]:focus,input[type="url"]:focus,input[type="password"]:focus,input[type="search"]:focus,input[type="tel"]:focus,textarea:focus,select:focus{
  outline:none;
  border-color:var(--accent);
  background:var(--bg-2);
}
input::placeholder,textarea::placeholder{color:var(--text-3)}

/* Sidebar nav icons (line) */
.ic{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* THEME TOGGLE (dark/light) — tokens de control, nunca ámbar */
.agent-gear-btn{
  width:34px;height:34px;
  display:grid;place-items:center;
  border:1px solid var(--color-control-border);
  background:var(--color-control-bg);
  color:var(--text-2);
  border-radius:8px;
  cursor:pointer;
  transition:all 180ms ease;
  flex-shrink:0;
}
.agent-gear-btn:hover{
  border-color:var(--accent);
  color:var(--accent);
}
.agent-gear-btn:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.agent-gear-btn .ic{width:16px;height:16px}
[data-theme="dark"] .agent-gear-btn .i-sun{display:block}
[data-theme="dark"] .agent-gear-btn .i-moon{display:none}
:root:not([data-theme="dark"]) .agent-gear-btn .i-sun{display:none}
:root:not([data-theme="dark"]) .agent-gear-btn .i-moon{display:block}

/* Selector de Apariencia (Preferencias) */
.theme-opt{flex:1 1 auto;min-width:110px;padding:9px 12px;border:1px solid var(--color-control-border);border-radius:7px;background:var(--color-control-bg);color:var(--text-2);font-size:12.5px;font-weight:500;cursor:pointer;font-family:inherit;transition:all .12s;text-align:center}
.theme-opt:hover{border-color:var(--accent);color:var(--text)}
.theme-opt:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Foco visible para controles no nativos (div/span con tabindex) */
.crm-tab:focus-visible,
#tags-estilo .tag:focus-visible,
.quick-card:focus-visible,
.quick-card-add:focus-visible,
.ws-card:focus-visible,
.pipeline-card:focus-visible,
.staff-type-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.theme-opt.on{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 14%, var(--color-control-bg));color:var(--text);font-weight:600}
@media (max-width:480px){.theme-opt{min-width:100%}}

.identity-preview{width:80px;height:80px;flex-shrink:0;border-radius:12px;background:var(--color-surface-muted);border:1px solid var(--color-border);color:var(--color-text-secondary);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:600;overflow:hidden}
.identity-preview.round{border-radius:50%}
.identity-preview img{width:100%;height:100%;object-fit:cover}
.identity-fields{margin-top:16px}
.form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px;flex-wrap:wrap}
.preview-lead{margin:0}
.preview-quote{display:block;margin-top:8px;padding:9px 11px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:7px;font-style:italic}
.preview-details{margin-top:8px;font-size:11.5px;color:var(--color-text-muted)}
.table-empty{text-align:center;padding:32px;color:var(--color-text-muted)}
.code-preview{background:var(--color-code-bg);color:var(--color-code-text);border-radius:8px;padding:14px 16px;position:relative;margin-bottom:14px}

/* Anti-flash: hide content until theme is applied */
html.preload,html.preload *{transition:none !important}