/* ============================================================
   VETRO V2 — Agent Workspace (Slice 2, BL-007/008/009)
   Reutiliza los tokens de v2.css (single source of truth) —
   este archivo solo agrega los componentes propios del workspace.
   Prototipo aprobado por el Board Product/UX Gate (BL-016, AUTO_GO):
   https://claude.ai/code/artifact/d62db3f0-6e41-4e5a-805d-93cd22699aca
   ============================================================ */

.wk-app { max-width: 1180px; margin: 0 auto; padding: 0 1.25rem 4rem; }

.wk-topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.25rem 0 1.5rem;
}
.wk-logo { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .32em; color: var(--fg); }
.wk-agent-chip { display: flex; align-items: center; gap: .6rem; font-size: .8rem; color: var(--muted); }
.wk-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--pulse), var(--insight));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-size: .65rem; font-weight: 600; color: #0d1220;
}
.wk-logout { font-family: var(--f-mono); font-size: .68rem; color: var(--muted); text-decoration: underline; }
.wk-logout:hover { color: var(--fg); }

/* ── Mode tabs (Leads / Siniestros) ── */
.wk-mode-tabs {
  display: flex; align-items: center; gap: .2rem; background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius-pill); padding: .2rem;
}
.wk-mode-tab {
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .04em; color: var(--muted);
  padding: .4rem .9rem; border-radius: var(--radius-pill); background: transparent; border: none; cursor: pointer;
  transition: background .15s, color .15s;
}
.wk-mode-tab:hover { color: var(--fg); }
.wk-mode-tab--active { background: var(--aurora); color: var(--aurora-ink); font-weight: 600; }
@media (max-width: 640px) { .wk-mode-tab { padding: .4rem .65rem; } }

.wk-screen { display: none; }
.wk-screen--active { display: block; animation: wk-fadein .35s ease; }
@keyframes wk-fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── Greeting ── */
.wk-greeting { margin-bottom: 1.75rem; }
.wk-greeting h1 {
  font-family: var(--f-display); font-weight: 300; font-size: clamp(1.5rem, 3vw, 2.1rem);
  letter-spacing: -.02em; margin-bottom: .4rem; text-wrap: balance;
}
.wk-greeting p { font-size: .9rem; color: var(--muted); max-width: 60ch; }
.wk-highlight { color: var(--insight); font-weight: 600; }
.wk-urgent-count { color: var(--attention); font-weight: 600; }

/* ── State blocks: vacío / cargando / error ── */
.wk-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 5rem 1rem; gap: 1rem;
}
.wk-orb { width: 64px; height: 64px; border-radius: 50%; }
.wk-orb--idle {
  background: radial-gradient(circle at 35% 30%, #e8f4ff, var(--aurora) 55%, #2a8f6e 100%);
  box-shadow: 0 0 40px rgba(127, 227, 196, .3);
}
.wk-orb--loading {
  background: radial-gradient(circle at 35% 30%, #eef4ff, var(--pulse) 55%, #3a5fb0 100%);
  box-shadow: 0 0 40px rgba(143, 180, 255, .35); animation: wk-pulse 1.6s ease-in-out infinite;
}
@keyframes wk-pulse { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.12); opacity: 1; } }
.wk-orb--error {
  background: radial-gradient(circle at 35% 30%, #fff0ee, #ff8a8a 55%, #a03d3d 100%);
  box-shadow: 0 0 40px rgba(255, 138, 138, .3);
}
.wk-state-title { font-family: var(--f-display); font-size: 1.3rem; font-weight: 300; color: var(--fg); }
.wk-state-desc { font-size: .85rem; color: var(--muted); max-width: 38ch; line-height: 1.6; }
.wk-retry {
  margin-top: .5rem; font-family: var(--f-mono); font-size: .72rem; padding: .55rem 1.2rem;
  border-radius: var(--radius-pill); background: var(--card); border: 1px solid var(--border-2); color: var(--fg);
}

/* ── Queue groups ── */
.wk-groups { display: flex; flex-direction: column; gap: 1.75rem; }
.wk-group-header { display: flex; align-items: center; gap: .65rem; margin-bottom: .75rem; }
.wk-group-title { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.wk-group-title--urgent { color: var(--attention); font-weight: 700; }
.wk-group-count {
  font-family: var(--f-mono); font-size: .68rem; color: var(--fg); background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius-pill); padding: .1rem .55rem;
}
.wk-group-line { flex: 1; height: 1px; background: var(--border); }
.wk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: .75rem; }

/* ── Case card ── */
.wk-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 1rem;
  padding: 1.1rem 1.2rem; cursor: pointer; transition: all .18s; position: relative; overflow: hidden;
}
.wk-card:hover { background: rgba(255,255,255,.06); border-color: var(--border-2); transform: translateY(-1px); }
.wk-card--urgent { border-color: rgba(255, 178, 122, .35); background: linear-gradient(180deg, rgba(255, 178, 122, .06), var(--card)); }
.wk-card--urgent::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--attention); }
.wk-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; margin-bottom: .6rem; }
.wk-card-customer { font-size: .95rem; font-weight: 600; color: var(--fg); }
.wk-card-ramo { display: flex; align-items: center; gap: .35rem; font-family: var(--f-mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: .2rem; }
.wk-card-age { font-family: var(--f-mono); font-size: .68rem; color: var(--muted); white-space: nowrap; flex-shrink: 0; }
.wk-card-age--warn { color: var(--attention); }
.wk-card-age--critical { color: #ff8a8a; font-weight: 600; }
.wk-vera-badge {
  display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem;
  background: var(--insight-dim); color: var(--insight); border-radius: var(--radius-pill);
  padding: .25rem .6rem .25rem .5rem; margin-bottom: .75rem;
}
.wk-vera-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--insight); box-shadow: 0 0 8px var(--insight); }

/* ── Claims (Siniestros) ── */
.wk-card--claim-urgent { border-color: rgba(255, 138, 138, .4); background: linear-gradient(180deg, rgba(255, 138, 138, .08), var(--card)); }
.wk-card--claim-urgent::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #ff8a8a; }
.wk-urgent-badge {
  display: inline-flex; align-items: center; gap: .35rem; font-size: .68rem; font-weight: 700;
  color: #ff8a8a; background: rgba(255, 138, 138, .12); border: 1px solid rgba(255, 138, 138, .3);
  border-radius: var(--radius-pill); padding: .25rem .6rem; margin-bottom: .6rem; letter-spacing: .03em; text-transform: uppercase;
}
.wk-claim-desc { font-size: .78rem; color: var(--muted); line-height: 1.5; margin-top: .4rem; }
.wk-field-select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='%23ffffff' fill-opacity='.5' d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat; background-position: right .8rem center; background-size: .65rem;
}
.wk-card-bottom { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.wk-card-context { font-family: var(--f-mono); font-size: .64rem; color: var(--muted); letter-spacing: .03em; }
.wk-next-action {
  font-family: var(--f-mono); font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: .4rem .85rem; border-radius: var(--radius-pill); white-space: nowrap; background: var(--aurora); color: var(--aurora-ink);
}

/* ── Case View ── */
.wk-case-view { display: grid; grid-template-columns: 1.1fr .9fr; gap: 1.5rem; }
@media (max-width: 860px) { .wk-case-view { grid-template-columns: 1fr; } }
.wk-back { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--f-mono); font-size: .72rem; color: var(--muted); margin-bottom: 1.25rem; }
.wk-back:hover { color: var(--fg); }
.wk-cv-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; }
.wk-cv-name { font-family: var(--f-display); font-size: 1.6rem; font-weight: 300; letter-spacing: -.02em; }
.wk-cv-meta { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
.wk-meta-chip { font-family: var(--f-mono); font-size: .66rem; color: var(--muted); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: .2rem .6rem; }
.wk-meta-chip--origin { color: var(--pulse); border-color: rgba(143, 180, 255, .3); }

.wk-section { background: var(--card); border: 1px solid var(--border); border-radius: 1rem; padding: 1.2rem 1.3rem; margin-bottom: 1rem; }
.wk-section-label { font-family: var(--f-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .85rem; }
.wk-dl { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; font-size: .82rem; }
.wk-dl dt { color: var(--muted); }
.wk-dl dd { color: var(--fg); font-family: var(--f-mono); font-size: .8rem; }

.wk-timeline { display: flex; flex-direction: column; gap: 0; }
.wk-tl-item { display: flex; gap: .85rem; padding: .55rem 0; position: relative; }
.wk-tl-item:not(:last-child)::after { content: ''; position: absolute; left: 5px; top: 22px; bottom: -8px; width: 1px; background: var(--border); }
.wk-tl-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--card); border: 2px solid var(--muted); flex-shrink: 0; margin-top: 3px; }
.wk-tl-dot--done { background: var(--aurora); border-color: var(--aurora); }
.wk-tl-dot--current { background: var(--pulse); border-color: var(--pulse); box-shadow: 0 0 0 3px var(--pulse-dim); }
.wk-tl-title { font-size: .8rem; color: var(--fg); font-weight: 500; }
.wk-tl-time { font-family: var(--f-mono); font-size: .66rem; color: var(--muted); }

.wk-quote-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: .625rem; padding: 1rem 1.1rem; margin-bottom: .6rem; }
.wk-quote-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .3rem; }
.wk-quote-plan { font-family: var(--f-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--aurora); }
.wk-quote-price { font-family: var(--f-display); font-size: 1.3rem; font-weight: 300; }
.wk-quote-cov { list-style: none; font-size: .76rem; color: var(--muted); display: grid; gap: .2rem; margin-top: .5rem; }
.wk-internal-flag { display: flex; align-items: center; gap: .4rem; font-size: .68rem; color: var(--insight); background: var(--insight-dim); border-radius: var(--radius-pill); padding: .25rem .6rem; width: fit-content; margin-bottom: .75rem; }
.wk-missing { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--attention); padding: .3rem 0; }

/* ── Decision panel ── */
.wk-decision {
  background: linear-gradient(180deg, rgba(127, 227, 196, .06), var(--card));
  border: 1px solid rgba(127, 227, 196, .25); border-radius: 1rem; padding: 1.25rem 1.35rem; position: sticky; top: 1.5rem;
}
.wk-decision-title { font-family: var(--f-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--aurora); margin-bottom: .9rem; }
.wk-field-label { font-size: .78rem; color: var(--muted); margin-bottom: .35rem; display: block; }
.wk-field-input {
  width: 100%; font-size: .85rem; padding: .6rem .75rem; border-radius: .5rem; border: 1px solid var(--border-2);
  background: var(--bg-2); color: var(--fg); margin-bottom: .9rem; font-family: inherit;
}
.wk-field-textarea {
  width: 100%; font-size: .82rem; padding: .6rem .75rem; border-radius: .5rem; border: 1px solid var(--border-2);
  background: var(--bg-2); color: var(--fg); margin-bottom: .9rem; resize: vertical; min-height: 64px; font-family: inherit;
}
/* AUTO Quote-to-Issuance continuity — formulario de cotización en Case View */
.wk-quote-form-hint { font-size: .78rem; color: var(--muted); line-height: 1.5; margin-bottom: .9rem; }
.wk-field-file {
  width: 100%; font-size: .8rem; padding: .55rem .7rem; border-radius: .5rem;
  border: 1px dashed var(--border-2); background: var(--bg-2); color: var(--muted); margin-bottom: .9rem;
}
.wk-firm-upload {
  padding: .8rem .9rem .1rem; margin-bottom: 1rem; background: var(--bg-2);
  border-radius: .6rem; border: 1px solid var(--aurora);
}
.wk-firm-upload .wk-field-file { border-style: solid; }
.wk-opt-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: .7rem;
  padding: .7rem; background: var(--bg-2); border-radius: .5rem; border: 1px solid var(--border);
}
.wk-opt-row .wk-field-input { margin-bottom: 0; font-size: .8rem; padding: .5rem .6rem; }
.wk-opt-row-label {
  grid-column: 1 / -1; font-family: var(--f-mono); font-size: .6rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--aurora); margin-bottom: .1rem;
}

.wk-decision-actions { display: flex; flex-direction: column; gap: .5rem; }
.wk-dbtn { font-size: .84rem; font-weight: 600; padding: .75rem; border-radius: var(--radius-pill); text-align: center; }
.wk-dbtn--approve { background: var(--aurora); color: var(--aurora-ink); }
.wk-dbtn--modify { background: var(--card); border: 1px solid var(--border-2); color: var(--fg); }
.wk-dbtn--reject { background: transparent; color: #ff8a8a; border: 1px solid rgba(255, 138, 138, .3); }
.wk-dbtn--send { background: var(--pulse); color: #0d1220; }
.wk-dbtn[disabled] { opacity: .5; cursor: not-allowed; }
.wk-disclosure { font-size: .68rem; color: var(--muted); line-height: 1.5; margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--border); }
.wk-decision-status { font-size: .78rem; color: var(--muted); margin-top: .7rem; min-height: 1.2em; }

@media (max-width: 640px) {
  .wk-app { padding: 0 .9rem 3rem; }
  .wk-cards { grid-template-columns: 1fr; }
  .wk-decision { position: static; }
}