/* Estilos visuales seleccionables desde Admin → Agente y modelo → Apariencia.
   "clasico" = app.css tal cual. "onix" y "alba" comparten la capa .refined y cambian la paleta. */

/* ---------- Iconos: emoji en clásico, trazo fino en los refinados ---------- */
.ic-s { display: none; width: 15px; height: 15px; vertical-align: -2px; }
.refined .ic-e { display: none; }
.refined .ic-s { display: inline-block; }

/* ---------- Paletas ---------- */
html[data-theme='onix'] {
  --bg: #14111a;
  --bg-2: #1a1622;
  --panel: #201b2a;
  --panel-2: #282233;
  --line: #2f2939;
  --line-2: #3d3549;
  --text: #ece6da;
  --text-2: #b4acb9;
  --muted: #857d8e;
  --gold: #c2a05e;
  --gold-2: #d8bc80;
  --gold-3: #9c7e45;
  --accent: #c2a05e;
  --on-accent: #17131d;
  --title: #e6d3a6;
  --focus: rgba(194, 160, 94, 0.28);
  --shadow: 0 18px 50px rgba(5, 3, 10, 0.5);
}

html[data-theme='alba'] {
  --bg: #f2f3f0;
  --bg-2: #e9ebe7;
  --panel: #ffffff;
  --panel-2: #f0f1ee;
  --line: #dcdfda;
  --line-2: #c9cdc7;
  --text: #1c2230;
  --text-2: #4a5262;
  --muted: #7c8392;
  --gold: #8a6a2f;
  --gold-2: #75591f;
  --gold-3: #a88a4e;
  --accent: #1c2230;
  --on-accent: #f2f3f0;
  --title: #1c2230;
  --ok: #2f7a52;
  --warn: #8a6a12;
  --danger: #a23a31;
  --focus: rgba(28, 34, 48, 0.14);
  --shadow: 0 14px 40px rgba(28, 34, 48, 0.12);
}

/* ---------- Capa refinada (común a Ónix y Alba) ---------- */
.refined {
  --font: 'Albert Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Marcellus', 'Times New Roman', serif;
  --radius: 12px;
  --radius-sm: 8px;
}
.refined body { font-size: 15px; line-height: 1.62; }
.refined ::selection { background: var(--focus); }

.refined .gold-text { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--title); }
.refined .display { letter-spacing: 0.04em; }

.refined .btn { border-radius: 8px; font-weight: 500; }
.refined .btn-gold { background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent); }
.refined .btn-gold:hover { filter: none; opacity: 0.92; }
.refined .btn:hover { border-color: var(--gold-3); }
.refined .input:focus, .refined .textarea:focus, .refined .select:focus { border-color: var(--gold-3); box-shadow: 0 0 0 3px var(--focus); }
.refined :focus-visible { outline: 2px solid var(--gold-3); outline-offset: 2px; }

/* Acceso */
.refined .auth-page { background: var(--bg); }
.refined .auth-card { border-radius: 16px; box-shadow: none; backdrop-filter: none; background: var(--panel); padding: 34px 30px 26px; }
.refined .auth-logo { width: 150px; filter: none; }
.refined .auth-title { font-family: var(--display); font-size: 19px; letter-spacing: 0.03em; text-transform: none; color: var(--text); margin-bottom: 26px; }
.refined .auth-foot { border-top-color: var(--line); }

/* Barra lateral */
.refined .side-head .name { font-family: var(--display); letter-spacing: 0.06em; font-size: 16px; }
.refined .side-head .sub { text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.refined .conv-group { text-transform: none; letter-spacing: 0; font-size: 12.5px; padding-top: 16px; }
.refined .conv-item { border-radius: 8px; }
.refined .avatar { background: var(--accent); color: var(--on-accent); }
.refined .usage .bar > i { background: var(--gold); }
.refined .ivi-sign strong { text-transform: none; letter-spacing: 0; font-size: 12px; }
.refined .menu-pop { border-radius: 10px; }

/* Conversación */
.refined .main { background: var(--bg); }
.refined .topbar .title { color: var(--text); }
.refined .msg.user .bubble { border-radius: 14px 14px 4px 14px; background: var(--panel-2); }
.refined .msg.assistant .ico { background: transparent; border: 1px solid var(--line-2); }
.refined .body strong { color: var(--gold-2); }
.refined .body blockquote { border-left-color: var(--gold); background: transparent; }
.refined .typing i { background: var(--gold); }

.refined .empty { padding-top: 9vh; }
.refined .empty img { width: 108px; filter: none; }
.refined .empty h1 { font-family: var(--display); font-weight: 400; font-size: 34px; letter-spacing: 0.02em; margin: 22px 0 10px; color: var(--title); }
.refined .empty p { font-size: 16px; }
.refined .chips { gap: 8px; }
.refined .chip { background: transparent; border-radius: 10px; padding: 13px 15px; }
.refined .chip:hover { background: var(--panel); }

.refined .composer { border-radius: 14px; background: var(--panel); }
.refined .composer:focus-within { box-shadow: 0 0 0 3px var(--focus); }
.refined .send { border-radius: 10px; background: var(--accent); color: var(--on-accent); }
.refined .send:disabled { background: var(--panel-2); color: var(--muted); }

.refined .process-chip { border-radius: 10px; }
.refined .proposal { border-radius: 12px; border-color: var(--gold-3); background: transparent; }
.refined .pc-k { letter-spacing: 0; font-weight: 500; }
.refined .vote { filter: none; color: var(--muted); padding: 4px 6px; }
.refined .vote:hover { color: var(--text); }
.refined .vote.on { color: var(--gold-2); background: transparent; border-color: var(--line-2); }
.refined .modal { border-radius: 14px; }

/* Panel admin */
.refined .admin-head .brand { font-family: var(--display); }
.refined .admin-head .brand span { text-transform: none; letter-spacing: 0; font-size: 12px; }
.refined .tab.active { color: var(--text); border-bottom-color: var(--gold); }
.refined .stat .k, .refined th { text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.refined .chart .b { background: var(--gold); border-radius: 2px 2px 0 0; }
.refined .badge { border-radius: 6px; }

/* ---------- Ajustes de contraste para el tema claro ---------- */
html[data-theme='alba'] .input, html[data-theme='alba'] .textarea, html[data-theme='alba'] .select { background: var(--panel); }
html[data-theme='alba'] .alert-error { background: #fbeeec; border-color: #e7b9b3; color: #8c2f27; }
html[data-theme='alba'] .alert-ok { background: #ecf6f0; border-color: #b6d9c4; color: #24613f; }
html[data-theme='alba'] .alert-warn { background: #f8f3e6; border-color: #e3d3a8; color: #6e5512; }
html[data-theme='alba'] .badge-ok { color: #24613f; border-color: #b6d9c4; background: #ecf6f0; }
html[data-theme='alba'] .badge-warn { color: #6e5512; border-color: #e3d3a8; background: #f8f3e6; }
html[data-theme='alba'] .badge-danger { color: #8c2f27; border-color: #e7b9b3; background: #fbeeec; }
html[data-theme='alba'] .badge-gold { color: var(--gold-2); border-color: var(--gold-3); background: transparent; }
html[data-theme='alba'] .pc-done, html[data-theme='alba'] .msg-error { color: #24613f; }
html[data-theme='alba'] .msg-error { color: #8c2f27; }
html[data-theme='alba'] .copybox code { color: var(--gold-2); }
html[data-theme='alba'] .scrim, html[data-theme='alba'] .modal-back, html[data-theme='alba'] .drawer-back { background: rgba(28, 34, 48, 0.35); }
html[data-theme='alba'] .msg.assistant .ico { background: var(--panel); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}