/* CareMargin · tema "deep space ops" heredado de SOLO / NeuroThrottle */
:root {
  --bg: #04060d;
  --bg1: #080c18;
  --bg2: #0c1220;
  --bg3: #101828;
  --glass: rgba(255, 255, 255, .03);
  --glass2: rgba(255, 255, 255, .06);
  --border: rgba(100, 180, 255, .12);
  --border2: rgba(100, 180, 255, .24);
  --border3: rgba(100, 180, 255, .40);
  --cyan: #00d4ff;
  --cyan2: #7aeeff;
  --violet: #a855f7;
  --violet2: #d4aaff;
  --green: #00ffa3;
  --red: #ff4d6d;
  --yellow: #ffd166;
  --orange: #ff8c42;
  --white: #e8f0fe;
  --text: #c9d6ee;
  --muted: #7389aa;
  --dim: #3f5070;
  --sans: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --r: 8px;
  --header: 64px;
  --header-bg: rgba(4, 6, 13, .88);
  --header-bg-solid: rgba(4, 6, 13, .97);
  --toast-bg: rgba(8, 12, 24, .95);
  --err-text: #ffc2cd;
  --track: rgba(255, 255, 255, .07);
  --needle: rgba(255, 255, 255, .55);
  --stars: 1;
  color-scheme: dark;
}

/* Tema claro: para consultas con mucha luz o pantallas al sol */
:root[data-theme="light"] {
  --bg: #f4f6fb;
  --bg1: #ffffff;
  --bg2: #eef2f8;
  --bg3: #e6ebf3;
  --glass: #ffffff;
  --glass2: #f1f4f9;
  --border: rgba(30, 70, 130, .14);
  --border2: rgba(30, 70, 130, .24);
  --border3: rgba(30, 70, 130, .40);
  --cyan: #0073a8;
  --cyan2: #005a85;
  --violet: #7a3fd1;
  --violet2: #6a2fc4;
  --green: #0b8457;
  --red: #c8283f;
  --yellow: #946000;
  --orange: #b9581d;
  --white: #101a2e;
  --text: #26344e;
  --muted: #56657f;
  --dim: #8592a8;
  --header-bg: rgba(255, 255, 255, .90);
  --header-bg-solid: rgba(255, 255, 255, .98);
  --toast-bg: rgba(16, 26, 46, .95);
  --err-text: #9b1c30;
  --track: rgba(16, 26, 46, .10);
  --needle: rgba(16, 26, 46, .55);
  --stars: 0;
  color-scheme: light;
}
:root[data-theme="light"] .card { box-shadow: 0 1px 2px rgba(16,26,46,.04), 0 4px 16px rgba(16,26,46,.04); }
:root[data-theme="light"] #toast { color: #f4f6fb; }
:root[data-theme="light"] .plan-tag { color: #fff; }

/* Fondo cálido: crema/papel, menos luz azul y menos brillo que el claro (lectura prolongada) */
:root[data-theme="light"][data-tone="warm"] {
  /* Blanco hueso: cálido y mate, sin el brillo del blanco puro */
  --bg: #f1ede5;
  --bg1: #f9f7f2;
  --bg2: #ebe6dc;
  --bg3: #e3ddd1;
  --glass: #f9f7f2;
  --glass2: #eee9e0;
  --border: rgba(95, 80, 60, .15);
  --border2: rgba(95, 80, 60, .26);
  --border3: rgba(95, 80, 60, .42);
  --cyan: #1b6264;
  --cyan2: #144c4e;
  --violet: #6f4583;
  --violet2: #5f3971;
  --green: #2e6b37;
  --red: #a3332a;
  --yellow: #85570a;
  --orange: #9e4f19;
  --white: #27211a;
  --text: #39322a;
  --muted: #645a4d;
  --dim: #938a7c;
  --header-bg: rgba(249, 247, 242, .92);
  --header-bg-solid: rgba(249, 247, 242, .98);
  --toast-bg: rgba(39, 33, 26, .95);
  --err-text: #8a2a22;
  --track: rgba(60, 50, 35, .12);
  --needle: rgba(60, 50, 35, .55);
}
:root[data-theme="light"][data-tone="warm"] .card { box-shadow: 0 1px 2px rgba(60,50,35,.05), 0 4px 16px rgba(60,50,35,.05); }
:root[data-theme="light"][data-tone="warm"] #toast { color: #f9f7f2; }
:root[data-theme="light"][data-tone="warm"] input, :root[data-theme="light"][data-tone="warm"] textarea, :root[data-theme="light"][data-tone="warm"] select { background: #fcfbf8; }

/* Botón de tema */
.theme-btn { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 1px solid var(--border2); background: var(--glass2); color: var(--white); cursor: pointer; font-size: 16px; line-height: 1; display: grid; place-items: center; }
.theme-btn:hover { border-color: var(--cyan); color: var(--cyan); }
.theme-float { position: fixed; top: calc(14px + env(safe-area-inset-top)); right: 14px; z-index: 150; }
.header-right { display: flex; align-items: center; gap: 10px; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  overflow-x: hidden;
  background: var(--bg); color: var(--white); font-family: var(--sans); font-size: 14px; line-height: 1.5;
  min-height: 100vh; overflow-x: hidden; padding-bottom: env(safe-area-inset-bottom);
}
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: var(--stars);
  background-image:
    radial-gradient(1px 1px at 15% 22%, rgba(255,255,255,.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 73% 8%, rgba(255,255,255,.25) 0%, transparent 100%),
    radial-gradient(1px 1px at 42% 55%, rgba(255,255,255,.20) 0%, transparent 100%),
    radial-gradient(1px 1px at 88% 44%, rgba(255,255,255,.30) 0%, transparent 100%),
    radial-gradient(1px 1px at 6% 80%, rgba(255,255,255,.22) 0%, transparent 100%),
    radial-gradient(1px 1px at 58% 91%, rgba(255,255,255,.18) 0%, transparent 100%),
    radial-gradient(1px 1px at 31% 3%, rgba(255,255,255,.28) 0%, transparent 100%),
    radial-gradient(1px 1px at 96% 72%, rgba(255,255,255,.20) 0%, transparent 100%),
    radial-gradient(420px 420px at 15% 60%, rgba(0,212,255,.05) 0%, transparent 100%),
    radial-gradient(520px 520px at 85% 25%, rgba(168,85,247,.05) 0%, transparent 100%);
}
[hidden] { display: none !important; }
a { color: var(--cyan); text-decoration: none; }
a:hover { color: var(--cyan2); }
p { margin-bottom: 8px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.mono { font-family: var(--mono); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── Header ───────────────────────────── */
.header {
  position: sticky; top: 0; z-index: 100; height: var(--header);
  padding: 0 20px; padding-top: env(safe-area-inset-top);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--header-bg); border-bottom: 1px solid var(--border); backdrop-filter: blur(14px);
}
/* Logo (opción A): el caso en la esquina, los médicos como nodos; «Care» y «Margin» en dos colores */
:root { --logo-care: #6CB4EE; --logo-margin: #FF8A5C; }
:root[data-theme="light"] { --logo-care: #0F4C81; --logo-margin: #E8643C; }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo-mark { width: 44px; height: 44px; flex: none; display: block; }
.logo-mark .lm-links line { stroke: var(--logo-care); stroke-width: 2.6; stroke-linecap: round; }
.logo-mark .lm-nodes circle { fill: var(--logo-margin); }
.logo-mark .lm-core { fill: var(--logo-care); }
.wm { font-family: 'Sora', 'Space Grotesk', sans-serif; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; text-transform: none; }
.wm-care { color: var(--logo-care); }
.wm-margin { color: var(--logo-margin); }
.logo .txt { display: flex; flex-direction: column; gap: 4px; }
.logo .wm { font-size: 25px; line-height: 1; }
.logo-sub { font-family: var(--mono); font-size: 9px; color: var(--muted); letter-spacing: .14em; font-weight: 500; text-transform: uppercase; }
.nav { display: flex; height: var(--header); }
.nav-tab {
  display: flex; align-items: center; gap: 6px; padding: 0 16px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap;
}
.nav-tab:hover { color: var(--white); }
.nav-tab.active { color: var(--cyan); border-bottom-color: var(--cyan); }
.nav-tab .ico { font-size: 14px; line-height: 1; }
.client-pill { display: flex; align-items: center; gap: 8px; padding: 5px 12px; background: var(--glass2); border: 1px solid var(--border); border-radius: var(--r); max-width: 260px; }
.client-name { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: pulse 2s ease-in-out infinite; flex: none; }
.pulse-dot.off { background: var(--yellow); box-shadow: 0 0 8px var(--yellow); }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.8); } }
.plan-tag { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; font-weight: 700; padding: 2px 7px; border-radius: 3px; background: linear-gradient(135deg, var(--cyan), var(--violet)); color: #000; text-transform: uppercase; }

/* ── Layout ───────────────────────────── */
.body { position: relative; z-index: 1; padding: 20px; max-width: 1480px; margin: 0 auto; }
.stack { display: grid; gap: 16px; align-content: start; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.grid-main { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.ctrl-layout { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 16px; align-items: start; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

/* ── Cards ───────────────────────────── */
.card { background: var(--glass); border: 1px solid var(--border); border-radius: var(--r); padding: 16px; position: relative; }
.auth .card, .grid-main > .card { animation: fadeIn .3s ease both; }
.card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, rgba(255,255,255,.02) 0%, transparent 60%); pointer-events: none; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.card-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; font-weight: 600; color: var(--cyan); text-transform: uppercase; margin-bottom: 14px; }
.card-title .line { flex: 1; height: 1px; background: var(--border); }
.card-title .aside { color: var(--muted); font-weight: 400; letter-spacing: .08em; }
h1 { font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
h2 { font-size: 16px; font-weight: 600; }

/* ── Metric strip ───────────────────────────── */
.metric-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.m-tile { background: var(--glass2); border: 1px solid var(--border); border-radius: var(--r); padding: 12px 14px; position: relative; overflow: hidden; }
.m-tile::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--accent, var(--cyan)); opacity: .7; }
.m-label { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; margin-bottom: 6px; }
.m-value { font-family: var(--mono); font-size: 22px; font-weight: 500; color: var(--accent, var(--cyan)); line-height: 1; }
.m-sub { font-family: var(--mono); font-size: 10px; color: var(--dim); margin-top: 5px; }

/* ── Forms ───────────────────────────── */
.field { display: grid; gap: 5px; }
.field + .field { margin-top: 12px; }
label, .label { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }
.hint { text-transform: none; letter-spacing: 0; color: var(--dim); font-family: var(--sans); font-size: 11px; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=search], select, textarea {
  width: 100%; background: var(--glass2); border: 1px solid var(--border); border-radius: var(--r); color: var(--white);
  font-family: var(--sans); font-size: 14px; padding: 10px 12px; outline: none; transition: border-color .2s, box-shadow .2s;
}
textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
input:focus, select:focus, textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,212,255,.10); }
select option { background: var(--bg2); }
::placeholder { color: var(--dim); }
.check { display: flex; gap: 10px; align-items: flex-start; font-family: var(--sans); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--text); cursor: pointer; }
.check input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--cyan); flex: none; }

/* ── Buttons ───────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 16px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  color: var(--white); background: var(--glass2); border: 1px solid var(--border2); border-radius: var(--r); cursor: pointer; transition: all .2s; text-decoration: none;
}
.btn:hover { border-color: var(--cyan); color: var(--cyan); }
.btn:disabled { opacity: .4; pointer-events: none; }
.btn-sm { min-height: 32px; padding: 5px 10px; font-size: 10px; }
.btn-primary, .run-btn {
  background: linear-gradient(135deg, rgba(0,212,255,.16), rgba(168,85,247,.16)); border-color: var(--cyan); color: var(--cyan);
}
.btn-primary:hover, .run-btn:hover { background: linear-gradient(135deg, rgba(0,212,255,.28), rgba(168,85,247,.28)); box-shadow: 0 0 24px rgba(0,212,255,.2); color: var(--cyan2); }
.run-btn { width: 100%; min-height: 46px; font-size: 12px; letter-spacing: .12em; }
.btn-danger { color: var(--red); border-color: rgba(255,77,109,.35); }
.btn-danger:hover { color: var(--red); border-color: var(--red); background: rgba(255,77,109,.08); }
.btn-wa { color: #25d366; border-color: rgba(37,211,102,.4); }
.btn-wa:hover { color: #5dfc93; border-color: #25d366; background: rgba(37,211,102,.08); }
.btn-face { width: 100%; min-height: 48px; font-size: 12px; color: var(--green); border-color: rgba(0,255,163,.45); background: rgba(0,255,163,.06); }
.btn-face:hover { color: var(--green); border-color: var(--green); box-shadow: 0 0 22px rgba(0,255,163,.15); }
.linkbtn { background: none; border: none; color: var(--cyan); cursor: pointer; font: inherit; padding: 0; }

/* Segmented control (extensión, vistas móviles) */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--border2); border-radius: var(--r); overflow: hidden; }
.seg button { background: transparent; border: none; color: var(--muted); font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding: 9px 6px; cursor: pointer; border-right: 1px solid var(--border); line-height: 1.3; }
.seg button:last-child { border-right: none; }
.seg button small { display: block; font-size: 9px; color: var(--dim); letter-spacing: .04em; }
.seg button.on { background: rgba(0,212,255,.12); color: var(--cyan); }
.seg button.on small { color: var(--cyan2); }

/* ── Badges ───────────────────────────── */
.badges { display: flex; gap: 6px; flex-wrap: wrap; }
.badge { font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 3px; border: 1px solid var(--border2); color: var(--muted); background: var(--glass); white-space: nowrap; }
.badge.cyan { color: var(--cyan); border-color: rgba(0,212,255,.35); background: rgba(0,212,255,.08); }
.badge.violet { color: var(--violet2); border-color: rgba(168,85,247,.4); background: rgba(168,85,247,.10); }
.badge.green, .badge.ok, .badge.score-correcto, .badge.level-baja { color: var(--green); border-color: rgba(0,255,163,.35); background: rgba(0,255,163,.07); }
.badge.warn, .badge.score-parcial, .badge.level-media { color: var(--yellow); border-color: rgba(255,209,102,.35); background: rgba(255,209,102,.08); }
.badge.red, .badge.score-incorrecto, .badge.level-alta { color: var(--red); border-color: rgba(255,77,109,.4); background: rgba(255,77,109,.08); }

.notice { border: 1px solid rgba(255,209,102,.3); background: rgba(255,209,102,.06); color: var(--yellow); border-radius: var(--r); padding: 10px 12px; font-size: 13px; }
.notice.info { border-color: rgba(0,212,255,.25); background: rgba(0,212,255,.05); color: var(--cyan2); }
.notice.err { border-color: rgba(255,77,109,.35); background: rgba(255,77,109,.07); color: var(--err-text); }
.notice.ok { border-color: rgba(0,255,163,.3); background: rgba(0,255,163,.06); color: var(--green); }
.notice ul { margin: 6px 0 0 18px; }
.findings mark { background: rgba(255,209,102,.15); color: var(--yellow); border-radius: 3px; padding: 0 3px; }
.empty { text-align: center; padding: 36px 16px; color: var(--muted); }

/* ── Case list ───────────────────────────── */
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 14px; overflow-x: auto; }
.tabs a { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 10px 14px; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a.active { color: var(--cyan); border-bottom-color: var(--cyan); }
.case-list { display: grid; gap: 10px; }
.case-row { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px; color: inherit; }
.case-row:hover { border-color: var(--border3); color: inherit; }
.case-row .thumb { width: 88px; height: 64px; border-radius: 6px; background: var(--bg3); overflow: hidden; display: grid; place-items: center; color: var(--dim); font-family: var(--mono); font-size: 9px; }
.case-row .thumb img { width: 100%; height: 100%; object-fit: cover; }
.case-row h3 { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.case-row .meta { font-family: var(--mono); font-size: 10px; color: var(--muted); }
.case-row .counts { display: grid; gap: 4px; justify-items: end; }

/* ── Dropzones ───────────────────────────── */
.dropzone { border: 1px dashed var(--border2); border-radius: var(--r); padding: 18px; text-align: center; background: rgba(0,212,255,.02); cursor: pointer; transition: all .2s; display: grid; gap: 6px; justify-items: center; }
.dropzone:hover, .dropzone.over { border-color: var(--cyan); background: rgba(0,212,255,.06); }
.dropzone .big { font-size: 22px; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.thumbs figure { position: relative; margin: 0; }
.thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); display: block; cursor: zoom-in; }
.thumbs .x { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--border2); background: rgba(4,6,13,.85); color: #e8f0fe; cursor: pointer; font-size: 12px; }
.thumbs .pick { position: absolute; left: 4px; bottom: 4px; display: flex; gap: 4px; align-items: center; padding: 2px 6px; border-radius: 4px; background: rgba(4,6,13,.85); font-family: var(--mono); font-size: 9px; color: #00d4ff; }
.doc-list { display: grid; gap: 6px; }
.doc { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--glass); }
.doc .ico { font-family: var(--mono); font-size: 9px; color: var(--violet2); border: 1px solid rgba(168,85,247,.4); border-radius: 3px; padding: 2px 5px; }
.doc .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }

/* ── Case workspace ───────────────────────────── */
.case-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; }
.case-head .meta { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 4px; }
.media-strip { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
.media-strip .thumbs { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.casetext { font-size: 14px; color: var(--text); white-space: pre-wrap; }
.casetext + .label { margin-top: 10px; display: block; }

.workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 340px; gap: 0; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; background: var(--glass); min-height: 460px; }
.col { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--border); }
.col:last-child { border-right: none; }
.col-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); min-height: 48px; }
.col-head .lbl { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; font-weight: 700; text-transform: uppercase; }
.col-head .meta { margin-left: auto; font-family: var(--mono); font-size: 9px; color: var(--muted); white-space: nowrap; }
.col.anthropic .col-head { background: rgba(168,85,247,.07); border-bottom-color: rgba(168,85,247,.25); }
.col.anthropic .lbl { color: var(--violet2); }
.col.openai .col-head { background: rgba(0,212,255,.06); border-bottom-color: rgba(0,212,255,.22); }
.col.openai .lbl { color: var(--cyan); }
.col.people .col-head { background: rgba(0,255,163,.05); border-bottom-color: rgba(0,255,163,.18); }
.col.people .lbl { color: var(--green); }
.col-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; max-height: 64vh; }
.col-foot { border-top: 1px solid var(--border); padding: 10px; }

.bubble { border-radius: 12px; padding: 10px 12px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; border: 1px solid var(--border); background: var(--glass2); }
.bubble-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-family: var(--mono); font-size: 9px; color: var(--muted); letter-spacing: .06em; margin-bottom: 4px; text-transform: uppercase; }
.col.anthropic .bubble { background: rgba(168,85,247,.08); border-color: rgba(168,85,247,.22); border-bottom-left-radius: 4px; }
.col.openai .bubble { background: rgba(0,212,255,.07); border-color: rgba(0,212,255,.2); border-bottom-left-radius: 4px; }
.ai-msg.old { opacity: .55; }
.ai-msg.old:hover { opacity: 1; }
.thinking { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.thinking::after { content: ''; animation: dots 1.4s steps(4, end) infinite; }
@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }

.chat-row { display: flex; }
.chat-row.mine { justify-content: flex-end; }
.chat-row .bubble { max-width: 88%; white-space: normal; }
.bubble .txt { white-space: pre-wrap; }
.chat-row.mine .bubble { background: rgba(0,255,163,.08); border-color: rgba(0,255,163,.22); border-bottom-right-radius: 4px; }
.chat-row.theirs .bubble { border-bottom-left-radius: 4px; }
.chat-row .who { font-family: var(--mono); font-size: 9px; color: var(--green); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 3px; }
.composer { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: end; }
.composer textarea { min-height: 44px; max-height: 160px; font-size: 14px; }
.send { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--green); background: rgba(0,255,163,.1); color: var(--green); cursor: pointer; font-size: 16px; }
.send:hover { box-shadow: 0 0 18px rgba(0,255,163,.25); }

.mobile-tabs { display: none; }

/* Panel de control de IA */
.ai-ctrl { display: grid; grid-template-columns: minmax(0, 1fr) 260px 220px; gap: 14px; align-items: end; }
.pending { color: var(--yellow); }

/* Discrepancia (gauge tipo POSM) */
.synth { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; align-items: center; }
.gauge text { font-family: var(--mono); }
.synth ul { margin: 4px 0 8px 18px; }
.synth li { margin: 2px 0; }
.synth .lbl { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }

/* Gestión */
.manage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.consent-box { border: 1px solid var(--border); border-radius: var(--r); padding: 12px; background: var(--glass); display: grid; gap: 8px; font-size: 13px; color: var(--text); }
details summary { cursor: pointer; color: var(--cyan); font-family: var(--mono); font-size: 11px; }
.eval-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px; border: 1px solid var(--border); border-radius: 6px; }
.eval-row select { width: auto; min-width: 130px; padding: 6px 10px; font-size: 13px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border2); background: var(--glass); font-size: 12px; color: var(--text); cursor: pointer; }
.chip:hover { border-color: var(--cyan); color: var(--cyan); }
.chip .v { color: var(--green); font-size: 10px; }

/* Contactos */
.contact { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.contact:last-child { border-bottom: none; }
.avatar { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; font-family: var(--mono); font-size: 12px; font-weight: 700; color: #000; background: linear-gradient(135deg, var(--cyan), var(--violet)); }
.avatar.ext { background: var(--bg3); color: var(--muted); border: 1px solid var(--border2); }
.contact .nm { font-size: 14px; font-weight: 500; }
.contact .sub { font-family: var(--mono); font-size: 10px; color: var(--muted); }

/* Auth */
.auth { max-width: 460px; margin: 6vh auto 0; }
.auth .hero { text-align: center; margin-bottom: 18px; }
.auth .hero .logo-mark { width: 88px; height: 88px; margin: 0 auto 10px; }
.auth .brand { font-size: 40px; line-height: 1.1; margin-bottom: 4px; }
.auth .tag { color: var(--muted); font-size: 13px; }
.divider { display: flex; align-items: center; gap: 10px; color: var(--dim); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; margin: 14px 0; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.purpose { font-size: 12px; color: var(--muted); border-left: 2px solid var(--cyan); padding-left: 10px; }

#toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 200; background: var(--toast-bg); color: #e8f0fe; border: 1px solid var(--border3); padding: 10px 16px; border-radius: var(--r); font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .2s; max-width: calc(100% - 32px); box-shadow: 0 8px 32px rgba(0,0,0,.5); }
#toast.show { opacity: 1; }
dialog { border: 1px solid var(--border2); border-radius: 12px; background: var(--bg1); color: var(--white); padding: 12px; max-width: 96vw; max-height: 96vh; }
dialog img { max-width: 92vw; max-height: 82vh; display: block; margin-bottom: 10px; border-radius: 6px; }
dialog::backdrop { background: rgba(0,0,0,.75); }
.spinner { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; display: inline-block; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

/* ── Responsive ───────────────────────────── */
@media (max-width: 1200px) {
  .workspace { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 300px; }
  .ai-ctrl { grid-template-columns: 1fr 1fr; }
  .ai-ctrl .run-wrap { grid-column: 1 / -1; }
}
@media (max-width: 1000px) {
  .grid-main, .ctrl-layout, .media-strip, .manage { grid-template-columns: minmax(0, 1fr); }
  .metric-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Vista tipo WhatsApp: una columna cada vez */
  .mobile-tabs { display: block; margin-bottom: 10px; }
  .workspace { grid-template-columns: 1fr; min-height: 0; }
  .workspace .col { display: none; border-right: none; }
  .workspace[data-view="anthropic"] .col.anthropic,
  .workspace[data-view="openai"] .col.openai,
  .workspace[data-view="people"] .col.people { display: flex; }
  .col-body { max-height: none; min-height: 280px; }
  .synth { grid-template-columns: 1fr; justify-items: center; }
}
@media (max-width: 760px) {
  /* sin backdrop-filter: si no, la barra inferior fija quedaría atrapada dentro de la cabecera */
  .header { padding: 0 12px; backdrop-filter: none; background: var(--header-bg-solid); }
  .logo-sub, .client-pill .client-name, .client-pill .plan-tag { display: none; }
  .logo-mark { width: 36px; height: 36px; }
  .logo .wm { font-size: 21px; }
  /* Barra inferior de navegación, como en las apps de mensajería */
  .nav { position: fixed; left: 0; right: 0; bottom: 0; height: calc(60px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--header-bg-solid); border-top: 1px solid var(--border); backdrop-filter: blur(14px); z-index: 120; }
  .nav-tab { flex: 1; flex-direction: column; justify-content: center; gap: 3px; padding: 0 4px; font-size: 9px; border-bottom: none; border-top: 2px solid transparent; }
  .nav-tab.active { border-top-color: var(--cyan); }
  .nav-tab .ico { font-size: 18px; }
  .body { padding: 14px 12px calc(84px + env(safe-area-inset-bottom)); }
  h1 { font-size: 19px; }
  .case-head { grid-template-columns: 1fr; }
  .case-row { grid-template-columns: 64px minmax(0, 1fr); }
  .case-row .thumb { width: 64px; height: 52px; }
  .case-row .counts { grid-column: 1 / -1; justify-items: start; grid-auto-flow: column; justify-content: start; }
  .ai-ctrl { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  #toast { bottom: calc(80px + env(safe-area-inset-bottom)); }
}

:root[data-theme="light"] .btn-wa { color: #128c4a; border-color: rgba(18,140,74,.4); }

/* Archivos arrastrados sobre la página: se aceptan en cualquier punto */
body.drag-files::after {
  content: "Suelta aquí para añadir al caso";
  position: fixed; inset: 10px; z-index: 900; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  border: 2px dashed var(--cyan); border-radius: 16px;
  background: color-mix(in srgb, var(--cyan) 8%, transparent);
  color: var(--cyan); font: 600 15px/1.2 "JetBrains Mono", monospace; letter-spacing: .08em;
}

/* ── Visor de imágenes con zoom ── */
.thumbs .zoom-hint { position: absolute; right: 4px; bottom: 4px; width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--border2); background: rgba(4,6,13,.85); color: #e8f0fe; cursor: zoom-in; font-size: 13px; line-height: 1; }
dialog.viewer { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: #020309; color: #e8f0fe; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; }
dialog.viewer::backdrop { background: #000; }
dialog.viewer:not([open]) { display: none; }
.vw-stage { position: relative; overflow: hidden; touch-action: none; cursor: zoom-in; user-select: none; -webkit-user-select: none; }
.vw-stage.zoomed { cursor: grab; }
.vw-stage.zoomed:active { cursor: grabbing; }
.vw-stage img { position: absolute; left: 0; top: 0; max-width: none; max-height: none; margin: 0; border-radius: 0; transform-origin: 0 0; will-change: transform; image-rendering: auto; }
.vw-bar { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(8,12,24,.96); border-top: 1px solid rgba(100,180,255,.18); }
.vw-btn { min-width: 44px; height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(100,180,255,.24); background: rgba(255,255,255,.04); color: #e8f0fe; font: 600 16px/1 var(--sans); cursor: pointer; }
.vw-btn:hover:not(:disabled) { border-color: #00d4ff; color: #7aeeff; }
.vw-btn:disabled { opacity: .35; cursor: default; }
.vw-btn.vw-txt { font: 600 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.vw-zoom, .vw-count { min-width: 64px; text-align: center; font: 500 13px/1 var(--mono); color: #9fb2d0; }
.vw-sep { width: 1px; height: 26px; background: rgba(100,180,255,.18); margin: 0 4px; }
.vw-caption { padding: 0 16px 10px; text-align: center; font-size: 13px; color: #9fb2d0; background: rgba(8,12,24,.96); min-height: 4px; }
@media (max-width: 560px) { .vw-sep { display: none; } .vw-btn { min-width: 40px; height: 40px; padding: 0 9px; } }

/* ── Comentarios: menú, respuestas, privados, dictado ── */
.chat-row .bubble.chat { position: relative; padding-right: 30px; }
.msg-menu-btn { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 6px; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 12px; opacity: .55; }
.bubble.chat:hover .msg-menu-btn, .msg-menu-btn:focus-visible { opacity: 1; background: var(--glass2); color: var(--text); }
@media (hover: none) { .msg-menu-btn { opacity: .9; } }
.msg-menu { position: fixed; z-index: 1000; min-width: 230px; display: flex; flex-direction: column; padding: 6px; border-radius: 10px; border: 1px solid var(--border2); background: var(--bg2); box-shadow: 0 12px 32px rgba(0,0,0,.45); }
.msg-menu button { text-align: left; padding: 10px 12px; min-height: 40px; border: 0; border-radius: 6px; background: transparent; color: var(--text); font: 500 13px/1.2 var(--sans); cursor: pointer; }
.msg-menu button:hover, .msg-menu button:focus-visible { background: var(--glass2); color: var(--white); }
.msg-menu button.danger { color: var(--red); }
.quote { display: block; width: 100%; text-align: left; margin: 2px 0 6px; padding: 6px 8px; border: 0; border-left: 3px solid var(--violet); border-radius: 6px; background: rgba(168,85,247,.08); color: var(--muted); font: 12px/1.35 var(--sans); cursor: pointer; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.quote .q-who, .reply-bar .q-who { display: block; font: 600 10px/1.2 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--violet2); margin-bottom: 2px; }
.priv { font: 600 10px/1.2 var(--mono); letter-spacing: .05em; color: var(--yellow); margin-bottom: 4px; }
.bubble.chat.private { border-style: dashed; border-color: rgba(255,209,102,.45); }
.txt.deleted { font-style: italic; color: var(--muted); }
.chat-row.flash .bubble { box-shadow: 0 0 0 2px var(--cyan); transition: box-shadow .3s; }
.reply-bar { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; padding: 8px 10px; border-left: 3px solid var(--violet); border-radius: 8px; background: rgba(168,85,247,.08); }
.reply-bar.private { border-left-color: var(--yellow); background: rgba(255,209,102,.07); }
.reply-bar .q-txt { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mic { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border2); background: var(--glass); color: var(--text); cursor: pointer; font-size: 17px; }
.mic:hover { border-color: var(--cyan); }
.mic.rec, .btn.rec { border-color: var(--red); color: var(--red); background: rgba(255,77,109,.1); animation: recPulse 1.2s ease-in-out infinite; }
@keyframes recPulse { 50% { box-shadow: 0 0 0 6px rgba(255,77,109,.15); } }
@media (prefers-reduced-motion: reduce) { .mic.rec, .btn.rec { animation: none; } }
.ai-ctrl > .field:first-child { align-self: start; }
.ai-ctrl > .field:first-child textarea { min-height: 96px; }

/* ── Ir al final, búsqueda y reacciones ── */
.col { position: relative; }
.jump { position: absolute; right: 14px; bottom: 76px; z-index: 5; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border3); background: var(--bg2); color: var(--cyan); font-size: 18px; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.col.anthropic .jump, .col.openai .jump { bottom: 14px; }
.jump:hover { border-color: var(--cyan); }
.icon-btn { margin-left: auto; min-width: 32px; height: 32px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--border2); background: var(--glass); color: var(--text); cursor: pointer; font-size: 13px; }
.chat-search .icon-btn { margin-left: 0; }
.icon-btn:disabled { opacity: .35; cursor: default; }
.chat-search { display: flex; gap: 6px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.chat-search input { flex: 1; min-width: 0; height: 34px; font-size: 13px; }
.chat-row.hit .bubble { box-shadow: 0 0 0 1px rgba(255,209,102,.55); }
.chat-row.hit-current .bubble { box-shadow: 0 0 0 2px var(--yellow); }
.reacts { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.react { padding: 2px 8px; min-height: 26px; border-radius: 999px; border: 1px solid var(--border2); background: var(--glass); color: var(--text); font-size: 12px; cursor: pointer; }
.react.on { border-color: var(--cyan); background: rgba(0,212,255,.1); }
.emoji-row { display: flex; justify-content: space-between; gap: 2px; padding: 2px 2px 6px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.emoji-row button { min-width: 38px; min-height: 38px; padding: 0; text-align: center; font-size: 19px; }
@media (max-width: 760px) { .col-body { max-height: 62vh; } }

/* ── Código del caso, referencia, búsqueda de casos, pregunta de cada ronda ── */
.badge.code { font-family: var(--mono); color: var(--cyan); border-color: var(--border3); }
.badge.ref { color: var(--violet2); border-color: rgba(168,85,247,.35); }
.code-tag { font-family: var(--mono); color: var(--cyan); }
.case-search { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0 12px; }
.case-search input { flex: 1 1 240px; min-width: 0; }
.ai-q { margin-bottom: 6px; padding: 6px 9px; border-left: 3px solid var(--cyan); border-radius: 6px; background: rgba(0,212,255,.06); font-size: 12px; color: var(--muted); white-space: pre-wrap; }
.ai-q .q-who { display: block; font: 600 10px/1.2 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--cyan); margin-bottom: 2px; }
.chat-row.sending { opacity: .6; }
.ai-q.pending { opacity: .6; border-left-style: dashed; }
.notice.sent { animation: sentIn .25s ease-out; }
@keyframes sentIn { from { opacity: 0; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .notice.sent { animation: none; } }

/* ── Resumen final ── */
.summary-card { border-color: rgba(0,212,255,.3); }
.summary-doc { padding: 16px 18px; border-radius: 10px; background: var(--bg1); border: 1px solid var(--border); color: var(--text); line-height: 1.55; }
.summary-doc h3 { font-size: 14px; color: var(--white); margin: 14px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.summary-doc h3:first-child { margin-top: 0; }
.summary-doc ul { margin: 4px 0 8px 20px; }
.summary-doc li { margin: 2px 0; }
.summary-doc p { margin: 4px 0; }

/* ── Modo rápido: consenso arriba, texto en directo, gestión plegada ── */
.consensus { border-color: rgba(0,255,163,.35); background: linear-gradient(0deg, rgba(0,255,163,.035), rgba(0,255,163,.035)), var(--glass); }
.consensus .card-title { color: var(--green); }
.consensus.none { border-color: rgba(255,209,102,.4); }
.consensus.none .card-title { color: var(--yellow); }
.cons-list { margin: 2px 0 4px 20px; font-size: 16px; line-height: 1.5; color: var(--white); }
.cons-list li { margin: 4px 0; }
.diffs { margin-top: 8px; }
.diffs > summary, .manage-wrap > summary { cursor: pointer; font: 600 12px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 8px 0; list-style: none; }
.diffs > summary::before, .manage-wrap > summary::before { content: "▸ "; }
.diffs[open] > summary::before, .manage-wrap[open] > summary::before { content: "▾ "; }
.diffs > summary::-webkit-details-marker, .manage-wrap > summary::-webkit-details-marker { display: none; }
.manage-wrap { margin-top: 6px; }
.manage-wrap > summary { color: var(--cyan); font-size: 12px; padding: 12px 0; }
.manage-wrap > summary .small { text-transform: none; letter-spacing: 0; font-family: var(--sans); font-weight: 400; }
.bubble.live:empty { display: none; }
.bubble.live { border-style: dashed; }

/* ---------- Consola del equipo (/admin) ---------- */
body.staff .nav { overflow-x: auto; scrollbar-width: none; }
.page-h { font-size: 20px; font-weight: 600; margin: 0; }
.staff-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.staff-row .grow { flex: 1 1 260px; min-width: 0; }
.staff-row + .staff-row { margin-top: 8px; }
.bars { display: grid; gap: 6px; }
.bar-row { display: grid; grid-template-columns: minmax(90px, 38%) 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.bar-k { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.bar-track { height: 8px; border-radius: 4px; background: var(--glass2); overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 4px; background: var(--cyan); min-width: 2px; }
.bar-v { font-family: var(--mono); font-size: 12px; min-width: 2ch; text-align: right; }
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th, .tbl td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.tbl th { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; white-space: nowrap; }
.tbl td:first-child { white-space: nowrap; }
.tbl tr.warn-row td { background: color-mix(in srgb, var(--red) 9%, transparent); }
.secret-box { font-family: var(--mono); font-size: 17px; letter-spacing: .08em; padding: 12px 14px; border: 1px dashed var(--border3); border-radius: var(--r); background: var(--glass2); word-break: break-all; user-select: all; margin: 10px 0; }
.steps-list { margin: 0 0 8px; padding-left: 20px; display: grid; gap: 4px; }
.role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin: 8px 0; }
.role-check { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r); background: var(--glass); cursor: pointer; }
.role-check input { margin-top: 3px; flex: none; }
.role-check.locked { opacity: .5; cursor: not-allowed; }
dialog.case-dialog { width: min(860px, 96vw); max-height: 90vh; overflow: auto; padding: 18px; margin: auto; }
.msg-line { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.45; padding: 6px 0; border-bottom: 1px solid var(--border); white-space: pre-wrap; word-break: break-word; }
.msg-line .badge { flex: none; }
@media (max-width: 600px) {
  .bar-row { grid-template-columns: minmax(70px, 34%) 1fr auto; }
  body.staff .header-right .client-pill { display: none; }
}

/* ---------- Selector con buscador ---------- */
.combo { position: relative; }
.combo input { padding-right: 36px; }
.combo-btn { position: absolute; right: 1px; top: 1px; bottom: 1px; width: 34px; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 12px; border-radius: 0 var(--r) var(--r) 0; }
.combo-btn:hover { color: var(--cyan); }
.combo-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60; max-height: 280px; overflow-y: auto; margin: 0; padding: 4px; list-style: none;
  background: var(--bg1); border: 1px solid var(--border3); border-radius: var(--r); box-shadow: 0 12px 32px rgba(0,0,0,.35); overscroll-behavior: contain; }
.combo-list li { padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 14px; line-height: 1.3; }
.combo-list li.on { background: var(--glass2); color: var(--cyan); }
.combo-list li.sel::after { content: " ✓"; color: var(--green); }
.combo-list li.none { color: var(--muted); cursor: default; font-size: 13px; }
.combo-list mark { background: transparent; color: var(--cyan); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
:root[data-theme="light"] .combo-list { box-shadow: 0 8px 24px rgba(16,26,46,.12); }

/* ---------- Diálogo de consentimiento (piloto IA de CareMargin) ---------- */
dialog.consent-dialog { width: min(520px, 92vw); padding: 20px; margin: auto; }
dialog.consent-dialog .consent-box { max-height: 40vh; overflow: auto; }

/* Campo trampa para bots: invisible para personas y lectores de pantalla */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Atajo entre las dos especialidades del médico en «Nuevo caso» */
.spec-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip-btn { border: 1px solid var(--border2); background: var(--glass2); color: var(--text); border-radius: 999px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
.chip-btn:hover { border-color: var(--cyan); color: var(--cyan); }

/* Selector de idioma */
.lang-sel { width: auto; height: 38px; padding: 0 28px 0 10px; border-radius: 999px; border: 1px solid var(--border2); background: var(--glass2); color: var(--white); font-size: 13px; cursor: pointer; flex: none; }
.lang-float { position: fixed; top: calc(14px + env(safe-area-inset-top)); right: 62px; z-index: 150; }
.lang-sel[data-short="1"] { padding: 0 22px 0 12px; font-weight: 600; letter-spacing: .04em; }

/* Invitar con regalo: birras o bombones */
.gift-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.gift-opt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border: 1px solid var(--border2); border-radius: var(--r); background: var(--glass); color: var(--white); cursor: pointer; font-weight: 600; font-size: 14px; }
.gift-opt:hover, .gift-opt.on { border-color: var(--logo-margin); background: var(--glass2); }
.gift-art { width: 96px; height: 72px; }
.gift-banner { display: flex; gap: 12px; align-items: center; padding: 10px 12px; margin: 12px 0 4px; border: 1px solid var(--logo-margin); border-radius: var(--r); background: var(--glass2); }
.gift-banner .gift-art { width: 72px; height: 54px; flex: none; }

/* Cómo usar */
.help-steps { margin: 0; padding-left: 22px; display: grid; gap: 14px; }
.help-steps li::marker { color: var(--cyan); font-weight: 700; }
.help-steps .help-t { display: block; margin-bottom: 2px; }

/* Visor de cristales completos */
.notice.warn { border-color: rgba(255,170,60,.4); background: rgba(255,170,60,.08); color: var(--orange); }
.wsv-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.wsv-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.wsv-wrap { position: relative; border: 1px solid var(--border2); border-radius: 12px; overflow: hidden; background: #f4f2ee; }
.wsv-osd { width: 100%; height: calc(100vh - 290px); min-height: 420px; }
.wsv-wrap:fullscreen .wsv-osd, .wsv-wrap:-webkit-full-screen .wsv-osd { height: 100vh; }
.wsv-scale { position: absolute; left: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 3px; padding: 6px 9px; border-radius: 8px;
  background: rgba(255,255,255,.85); color: #111; font: 600 12px var(--mono); pointer-events: none; }
.wsv-scale-bar { height: 5px; border: 2px solid #111; border-top: none; }
.wsv-mag { position: absolute; right: 12px; bottom: 12px; padding: 5px 9px; border-radius: 8px; background: rgba(15,76,129,.85); color: #fff;
  font: 600 13px var(--mono); pointer-events: none; }
.wsv-mag:empty { display: none; }
@media (max-width: 720px) { .wsv-osd { height: calc(100vh - 330px); min-height: 360px; } }

/* Cristales completos en el caso */
.media-strip > #slidesCard { grid-column: 1 / -1; }
.slide-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); }
.slide-row:first-of-type { border-top: none; }
.slide-ico { font-size: 22px; width: 28px; text-align: center; flex: none; }
.slide-txt { flex: 1; min-width: 0; }
.upbar .bar { height: 8px; border-radius: 6px; background: var(--track, rgba(255,255,255,.08)); overflow: hidden; }
.upbar .bar span { display: block; height: 100%; background: var(--cyan); transition: width .3s; }
.upbar.err .bar span { background: var(--red); }
.upbar .txt { margin-top: 5px; }
.upbar.err .txt { color: var(--err-text, var(--red)); }

/* Nuevo caso: cristal completo (WSI), lo distintivo de CareMargin */
.wsi-card { border-color: rgba(0,212,255,.28); }
.wsi-lead { margin: 2px 0 12px; font-weight: 600; color: var(--white); }
.wsi-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wsi-tile { display: flex; flex-direction: column; gap: 6px; padding: 14px; text-align: left; font: inherit; color: var(--text); text-decoration: none;
  cursor: pointer; border: 1px solid var(--border2); border-radius: var(--r); background: var(--glass); transition: border-color .15s, background .15s; }
.wsi-tile:hover { text-decoration: none; background: var(--glass2); }
.wsi-tile-anon:hover { border-color: var(--logo-margin); }
.wsi-tile-view:hover { border-color: var(--cyan); }
.wsi-step { font: 600 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.wsi-tile-head { display: flex; align-items: center; gap: 8px; }
.wsi-tile-ico { font-size: 18px; }
.wsi-tile-title { font-weight: 700; font-size: 16px; color: var(--white); }
.wsi-tile-anon .wsi-tile-title { color: var(--logo-margin); }
.wsi-tile-view .wsi-tile-title { color: var(--cyan); }
.wsi-tile-text { font-size: 13px; line-height: 1.45; }
.wsi-tile-go { margin-top: auto; padding-top: 4px; font-size: 12px; color: var(--muted); }
.wsi-upload { margin-top: 14px; }
.or-divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; }
.or-divider::before, .or-divider::after { content: ""; flex: 1; height: 1px; background: var(--border2); }
@media (max-width: 560px) { .wsi-pair { grid-template-columns: 1fr; } }

/* Visor WSI encima de la pantalla (Nuevo caso y caso) */
body.wsi-ov-open { overflow: hidden; }
.wsi-ov { position: fixed; inset: 0; z-index: 900; display: flex; flex-direction: column; gap: 8px; padding: 12px 16px 14px;
  background: var(--bg); }
.wsi-ov-head { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; }
.wsi-ov-title { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; min-width: 0; }
.wsi-ov-title strong { font-size: 17px; }
.wsi-ov .wsi-shot { font-size: 13px; padding: 9px 14px; }
.wsi-ov-pick { max-width: 720px; width: 100%; margin: 40px auto 0; }
.wsi-ov-stage { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.wsi-ov-stage[hidden] { display: none; }
.wsi-ov .wsv-wrap { flex: 1; min-height: 0; }
.wsi-ov .wsv-osd { height: 100%; min-height: 0; }
.wsi-ov-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.wsi-ov-tray { display: flex; gap: 6px; align-items: center; }
.wsi-ov-tray img { width: 56px; height: 40px; object-fit: cover; border-radius: 6px; border: 2px solid var(--green); }
.wsi-ov-tray[data-n]::before { content: "✓ " attr(data-n); font: 600 13px var(--mono); color: var(--green); margin-right: 4px; }
button.wsi-btn { width: 100%; text-align: left; font: inherit; cursor: pointer; }
@media (max-width: 720px) { .wsi-ov { padding: 8px 8px 10px; } .wsi-ov .wsv-tools .btn { padding: 7px 9px; } }

/* Interconsulta */
.consult-card { border-color: rgba(168,85,247,.35); }
.consult-banner { display: flex; gap: 14px; align-items: center; padding: 12px 14px; margin-bottom: 14px; border-radius: 12px;
  background: linear-gradient(120deg, rgba(168,85,247,.16), rgba(0,212,255,.06)); border: 1px solid rgba(168,85,247,.4); }
.consult-code { font: 800 15px var(--mono); color: var(--violet); white-space: nowrap; padding: 6px 10px; border: 1px solid currentColor; border-radius: 8px; }
.op-list { display: grid; gap: 12px; }
.opinion { border: 1px solid var(--border2); border-radius: 12px; padding: 12px 14px; background: var(--glass); }
.opinion.mine { border-color: rgba(168,85,247,.45); }
.op-head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-bottom: 6px; }
.op-head .v { color: var(--green); }
.op-field { margin-top: 8px; }
.op-field .label { display: block; margin-bottom: 2px; }
.op-reply { margin-top: 10px; padding: 9px 12px; border-left: 3px solid var(--cyan); border-radius: 0 8px 8px 0; background: rgba(0,212,255,.06); }
.op-reply.agree { border-color: var(--green); background: rgba(0,255,163,.06); }
.op-reply.partial { border-color: var(--yellow); background: rgba(255,214,0,.06); }
.op-reply.disagree { border-color: var(--red); background: rgba(255,77,109,.06); }
.op-reply-who { display: block; margin-bottom: 4px; }
.op-reply-form { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border2); }
.op-reply-seg { flex-wrap: wrap; margin-top: 6px; }
.op-form { padding: 12px 14px; border: 1px dashed rgba(168,85,247,.5); border-radius: 12px; margin-bottom: 14px; }
.consult-invite { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; }
.consult-invite summary { cursor: pointer; font-weight: 700; color: var(--violet); }
.gift-mano { display: flex; gap: 14px; align-items: flex-start; margin-top: 14px; padding: 12px; border-radius: 12px; border: 1px solid rgba(255,138,92,.4);
  background: linear-gradient(120deg, rgba(255,138,92,.12), transparent); }
.gift-mano .gift-art { width: 90px; height: auto; flex: none; }
.gift-opt small { display: block; font-size: 11px; opacity: .75; }

/* Zonas del cristal que miró una IA */
.wsi-mark { border: 2px solid var(--violet); border-radius: 3px; box-sizing: border-box; pointer-events: none; box-shadow: 0 0 0 1px rgba(255,255,255,.6); }
.wsi-mark.openai { border-color: var(--cyan); }
.wsi-mark span { position: absolute; top: -2px; left: -2px; padding: 1px 6px; font: 600 12px var(--mono); color: #fff; background: var(--violet); border-radius: 3px 0 3px 0; }
.wsi-mark.openai span { background: var(--cyan); }
.nav-legend { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 0; }
.nav-see { margin-top: 6px; }


/* Anotaciones del cristal */
.wsv-ann { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; touch-action: none; }
.wsi-ann-btn.on { border-color: var(--cyan); color: var(--cyan); }
.ann-panel { position: absolute; right: 12px; top: 150px; z-index: 5; width: 280px; max-height: calc(100% - 170px); overflow: auto;
  background: rgba(255,255,255,.97); color: #111; border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.25); padding: 10px; font-size: 13px; }
.ann-panel .muted { color: #555; }
.ann-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ann-x { background: none; border: 0; font-size: 16px; cursor: pointer; color: #b00; }
.ann-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.ann-tools button { height: 38px; font-size: 18px; border: 1px solid #ccc; border-radius: 6px; background: #fff; cursor: pointer; }
.ann-tools button.on { border: 2px solid #1f4fd8; background: #e8eefc; }
.ann-colors { display: flex; gap: 6px; margin: 8px 0 4px; }
.ann-colors button { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #999; cursor: pointer; }
.ann-colors button.on { box-shadow: 0 0 0 2px #111; }
.ann-hint { margin: 4px 0 6px; }
.ann-total { padding: 6px 8px; background: #eef3ff; border-radius: 6px; margin: 6px 0; }
.ann-noteb { display: flex; gap: 6px; margin: 6px 0; }
.ann-noteb input { flex: 1; min-width: 0; padding: 5px 8px; border: 1px solid #bbb; border-radius: 6px; background: #fff; color: #111; }
.ann-list { display: grid; gap: 2px; margin-top: 6px; }
.ann-row { display: grid; grid-template-columns: 12px auto 1fr auto auto; gap: 6px; align-items: center; padding: 4px 6px; border-radius: 6px; cursor: pointer; }
.ann-row:hover, .ann-row.on { background: #eef3ff; }
.ann-dot { width: 10px; height: 10px; border-radius: 50%; }
.ann-kind { font-weight: 600; }
.ann-m { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ann-who { color: #666; font-size: 11px; }
.ann-del { background: none; border: 0; cursor: pointer; }
.ann-nav { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.ann-nav .btn { color: #111; }
.ann-foot { margin-top: 8px; }
@media (max-width: 720px) { .ann-panel { top: auto; bottom: 10px; right: 10px; left: 10px; width: auto; max-height: 45%; } }
.ann-tools button { display: flex; align-items: center; justify-content: center; color: #1b2a44; }
.ann-panel .btn { color: #111; background: #fff; border: 1px solid #bbb; }
.ann-panel .btn:hover { border-color: #1f4fd8; }

/* Autoselección de zonas */
.wsi-auto-btn.on { border-color: var(--cyan); color: var(--cyan); }
.wsi-mark.auto { border: 3px solid #00a3c4; }
.wsi-mark.auto span { background: #00a3c4; }
.wsi-mark.auto.off { border-style: dashed; opacity: .55; }
.wsi-mark.auto.off span { background: #777; text-decoration: line-through; }
.auto-strip { border: 1px solid var(--border2); border-radius: 12px; padding: 8px 10px; background: var(--glass2, rgba(127,127,127,.08)); }
.auto-strip[hidden] { display: none; }
.auto-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.auto-n { width: auto; padding: 4px 8px; }
.auto-thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 8px 0 2px; }
.auto-th { position: relative; margin: 0; flex: 0 0 172px; cursor: pointer; border-radius: 8px; overflow: hidden; border: 2px solid #00a3c4; background: #fff; }
.auto-th img { display: block; width: 100%; height: 118px; object-fit: cover; }
.auto-th figcaption { font-size: 11.5px; padding: 3px 6px; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auto-th.off { border-color: #999; opacity: .5; }
.auto-ok { position: absolute; top: 5px; right: 5px; width: 28px; height: 28px; border-radius: 6px; border: 2px solid #fff; background: #00a3c4;
  color: #fff; font: 700 16px/1 system-ui; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.auto-th.off .auto-ok { background: rgba(255,255,255,.85); border-color: #777; }
.err-txt { color: var(--red); }