/* ═══════════════════════════════════════════════════════════════
   THEMIS · design system compartido — re-skin "Piel Tinta / mono folios"
   Drop-in de tinta-product.css. Mismos selectores y tokens del skeleton;
   solo cambian valores visuales. Todo color deriva de tokens de :root.
   ═══════════════════════════════════════════════════════════════ */
:root {
  color-scheme: light;
  --paper: #fbfbfc;
  --paper-2: #ffffff;
  --paper-3: #f6f5f0;
  --ink: #131416;
  --muted: #3f4146;
  --line: #e8e7e2;
  --line-dark: #d9d8d3;
  --accent: #131416;
  --accent-deep: #131416;
  --accent-soft: #efeee7;
  --support: #64748b;
  --success: #6e8b6d;
  --warning: #a8894e;
  --danger: #a4574b;
  --danger-soft: #f5ece9;
  --shadow: 0 1px 2px rgba(0, 0, 0, .05);
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, .04);
  --radius: 6px;
  --serif: Charter, 'Iowan Old Style', Palatino, Georgia, serif;
  --sans: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --on-ink: #ffffff;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --gray: #6b7280;
  /* rail de intake: papel claro con tinta normal (sigue los tokens del tema) */
  --rail-bg: var(--paper-3);
  --rail-elev: var(--paper-2);
  --rail-ink: var(--ink);
  --rail-muted: var(--muted);
  --rail-hair: var(--line);
  --rail-gray: var(--gray);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #141312;
  --paper-2: #1e1d1b;
  --paper-3: #1b1a18;
  --ink: #f3f1ec;
  --muted: #b7b3ab;
  --line: #2b2926;
  --line-dark: #3a3835;
  --accent: #f3f1ec;
  --accent-deep: #f3f1ec;
  --accent-soft: #24231f;
  --support: #8ba0bb;
  --success: #8fae8e;
  --warning: #c6a86a;
  --danger: #c47f71;
  --danger-soft: #2a201e;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, .35);
  --radius: 6px;
  --serif: Charter, 'Iowan Old Style', Palatino, Georgia, serif;
  --sans: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --on-ink: #141312;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --gray: #8f8a82;
  /* en noche el rail se separa por elevación, no por contraste */
  --rail-bg: var(--paper-3);
  --rail-elev: var(--paper-2);
  --rail-ink: var(--ink);
  --rail-muted: var(--muted);
  --rail-hair: var(--line);
  --rail-gray: var(--gray);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

/* transición suave de tema en cuerpo + superficies clave */
body,
.tm-header,
.tm-card,
.tm-intake-rail,
.tm-footer,
.tm-service,
.tm-evidence-panel {
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}

a { color: var(--accent-deep); }
button, input, textarea, select { font: inherit; letter-spacing: 0; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { color: var(--on-ink); background: var(--ink); }

h1, h2, h3, h4 {
  margin: 0 0 .65rem;
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: 0;
}
h1 { font-size: clamp(2.2rem, 5vw, 4.6rem); }
h2 { font-size: clamp(1.65rem, 3.4vw, 2.8rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1rem; }

.tm-shell { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; }
.tm-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 64px;
  padding: .7rem clamp(1rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.tm-brand { display: inline-flex; align-items: baseline; gap: .65rem; color: var(--ink); text-decoration: none; }
.tm-brand strong { font: 500 1.5rem/1 var(--serif); }
.tm-brand strong::after { content: "\00a7"; margin-left: .25rem; color: var(--accent); }
.tm-brand span { color: var(--muted); font-size: .75rem; }
.tm-nav { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }

/* toggle de tema (copiado de la referencia aprobada, tokens del sistema) */
.tm-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 5px 11px;
  color: var(--ink);
  font-size: 12px;
  border: 1px solid var(--line-dark);
  border-radius: 5px;
  background: var(--paper-2);
  box-shadow: var(--shadow);
  white-space: nowrap;
}
.tm-theme-toggle:hover { border-color: var(--gray); }
.tm-theme-toggle svg { width: 14px; height: 14px; flex: none; }
.tm-theme-toggle span { font-family: var(--sans); font-size: 12px; color: var(--muted); }

.tm-container { width: min(1180px, calc(100% - 2rem)); margin-inline: auto; padding: clamp(1.5rem, 4vw, 3.5rem) 0 4rem; }
.tm-narrow { width: min(820px, calc(100% - 2rem)); margin-inline: auto; }
.tm-section { margin-top: clamp(1.75rem, 5vw, 4rem); }
.tm-kicker { color: var(--accent-deep); font-family: var(--mono); font-size: .72rem; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; }
.tm-lede { max-width: 52rem; color: var(--muted); font: 400 clamp(1.05rem, 1.7vw, 1.35rem)/1.48 var(--sans); }
.tm-note { color: var(--muted); font-size: .86rem; }
.tm-rule { margin: 1.5rem 0; border: 0; border-top: 1px solid var(--line); }

.tm-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(250px, .75fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  padding: clamp(2rem, 6vw, 5.5rem) 0 2.5rem;
}
.tm-hero h1 { max-width: 12ch; }

.tm-card {
  min-width: 0;
  padding: clamp(.95rem, 2vw, 1.35rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-2);
  box-shadow: var(--shadow-soft);
}
.tm-card--raised { box-shadow: var(--shadow); }
/* Énfasis con hairline fuerte: la tabla de componentes Tinta no tiene "card de 3px". */
.tm-card--accent { border-top: 1px solid var(--line-dark); }
.tm-grid { display: grid; gap: .85rem; }
.tm-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tm-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tm-service-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tm-stack { display: grid; gap: .85rem; }
.tm-split { display: grid; grid-template-columns: minmax(220px, 290px) minmax(0, 1fr); gap: 1rem; align-items: start; }

.tm-service {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  min-height: 155px;
  padding: 1.1rem;
  color: var(--ink);
  text-align: left;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: var(--paper-2);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.tm-service:hover, .tm-service:focus-visible { border-color: var(--accent); box-shadow: var(--shadow); }
.tm-service strong { font: 500 1.2rem/1.15 var(--serif); }
.tm-service small { color: var(--muted); }

.tm-field { display: grid; gap: .4rem; margin-bottom: .9rem; }
.tm-field > span, .tm-field > label { color: var(--muted); font-family: var(--sans); font-size: 13px; font-weight: 500; }
.tm-field input, .tm-field textarea, .tm-field select,
.tm-input, .tm-select, .tm-textarea {
  width: 100%;
  min-width: 0;
  padding: .72rem .78rem;
  color: var(--ink);
  border: 1px solid var(--line-dark);
  border-radius: 4px;
  outline: 0;
  background: var(--paper-2);
}
.tm-field textarea, .tm-textarea { min-height: 108px; resize: vertical; }
.tm-field input:focus, .tm-field textarea:focus, .tm-field select:focus,
.tm-input:focus, .tm-select:focus, .tm-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 9%, transparent); }
.tm-field input[type="date"] { font-family: var(--mono); font-size: .86rem; }
.tm-check { display: flex; gap: .7rem; align-items: flex-start; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.tm-check input { flex: 0 0 auto; margin-top: .25rem; accent-color: var(--accent); }

.tm-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: 1.2rem; }
.tm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 40px;
  padding: .58rem .9rem;
  color: var(--on-ink);
  /* Receta literal de la guía Tinta (.btn): 12.5px peso 400. El 700 que había
     acá es de lo que Jose señaló como acabado tosco — en Tinta ningún control
     va en negrita. */
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid var(--ink);
  border-radius: 4px;
  background: var(--ink);
}
.tm-btn:hover { filter: brightness(1.12); }
.tm-btn--accent { border-color: var(--accent); background: var(--accent); }
.tm-btn--accent:hover { border-color: var(--accent-deep); background: var(--accent-deep); filter: brightness(1.12); }
:root[data-theme="dark"] .tm-btn:hover,
:root[data-theme="dark"] .tm-btn--accent:hover { filter: brightness(.92); }
.tm-btn--ghost { color: var(--ink); border-color: var(--line-dark); background: transparent; }
.tm-btn--ghost:hover { border-color: var(--accent); background: var(--paper-3); }
.tm-btn--danger { color: var(--danger); border-color: var(--danger); background: transparent; }
.tm-btn--danger:hover { color: var(--on-ink); background: var(--danger); }
.tm-btn--icon { width: 40px; padding: 0; }
/* .btn.sm de la guía: 12px, padding 4px 11px, radio 4px. Sin píldora de 999px. */
.tm-btn--sm { min-height: 30px; padding: .25rem .69rem; font-size: 12px; }

.tm-pill {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: .25rem .5rem;
  color: var(--muted);
  font-family: var(--mono);
  /* Receta de kicker de la guía Tinta: mono 10.5px, tracking .12em. La píldora
     de 999px era la única forma redonda de la piel y, cuando el rótulo caía en
     dos líneas dentro de una columna angosta, quedaba como una cápsula
     deformada. Tinta usa rectángulo de 4px como el resto de los controles. */
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: normal;
  border: 1px solid var(--line-dark);
  border-radius: 4px;
  background: var(--paper-3);
}
/* estado sobrio: punto semántico de 7px + texto humano (spec Tinta) */
.tm-state { display: inline-flex; align-items: center; gap: 7px; font-family: var(--sans); font-size: 12.5px; color: var(--muted); }
.tm-state .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--support); flex: none; }
.tm-state .dot.ok { background: var(--success); }
.tm-state .dot.med { background: var(--warning); }
.tm-state .dot.crit { background: var(--danger); }
.tm-state .dot.info { background: var(--support); }
.tm-pill--critical { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 42%, var(--line)); background: var(--danger-soft); }
.tm-pill--high { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 42%, var(--line)); background: color-mix(in srgb, var(--warning) 7%, var(--paper-2)); }
.tm-pill--ok { color: var(--success); border-color: color-mix(in srgb, var(--success) 42%, var(--line)); background: color-mix(in srgb, var(--success) 7%, var(--paper-2)); }
.tm-progress { height: 4px; overflow: hidden; background: var(--paper-3); }
.tm-progress > span { display: block; height: 100%; background: var(--accent); transition: width .25s ease; }
.tm-steps { display: flex; justify-content: space-between; gap: .45rem; margin: .75rem 0 1.5rem; color: var(--muted); font-family: var(--sans); font-size: 13px; }
.tm-steps [aria-current="step"] { color: var(--accent-deep); font-weight: 600; }

.tm-alert { margin: .8rem 0; padding: .9rem 1rem; border-left: 3px solid var(--warning); background: color-mix(in srgb, var(--warning) 6%, var(--paper-2)); }
.tm-alert--danger { border-left-color: var(--danger); background: var(--danger-soft); }
.tm-alert--success { border-left-color: var(--success); background: color-mix(in srgb, var(--success) 6%, var(--paper-2)); }
.tm-hidden { display: none !important; }
.tm-list { display: grid; gap: .45rem; }
.tm-list-button {
  width: 100%;
  padding: .85rem;
  color: var(--ink);
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper-2);
}
.tm-list-button[aria-current="true"] { background: var(--accent-soft); color: var(--ink); font-weight: 600; }
.tm-data { width: 100%; border-collapse: collapse; font-size: .86rem; }
.tm-data th, .tm-data td { padding: .7rem .5rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.tm-data th { color: var(--muted); font-size: .69rem; }
.tm-message { max-width: 83%; padding: .8rem .9rem; border: 1px solid var(--line); border-radius: 4px; background: var(--paper-2); }
.tm-message--client { margin-left: auto; border-color: var(--line-dark); background: var(--accent-soft); }
.tm-message small { display: block; margin-top: .45rem; color: var(--muted); }
.tm-empty { padding: 1.25rem; color: var(--muted); text-align: center; border: 1px dashed var(--line-dark); border-radius: 4px; }
.tm-footer { padding: 1.25rem clamp(1rem, 3vw, 2.5rem); color: var(--muted); font-size: .76rem; border-top: 1px solid var(--line); background: var(--paper-3); }
.tm-toast { position: fixed; right: 1rem; bottom: 1rem; z-index: 80; max-width: min(420px, calc(100% - 2rem)); padding: .9rem 1rem; color: var(--on-ink); border-radius: 4px; background: var(--ink); box-shadow: var(--shadow); }
.tm-login { width: min(450px, calc(100% - 2rem)); margin: clamp(2rem, 8vh, 6rem) auto; }
.tm-eyebrow-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }

/* Public intake shell */
.tm-intake-shell { min-height: calc(100vh - 64px); display: grid; grid-template-columns: minmax(220px, 310px) minmax(0, 1fr); }
.tm-intake-rail {
  position: sticky;
  top: 64px;
  align-self: start;
  height: calc(100vh - 64px);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  color: var(--rail-muted);
  background: var(--rail-bg);
  overflow: auto;
}
.tm-intake-rail h1 { margin: .7rem 0 1rem; color: var(--rail-ink); font-size: clamp(2.2rem, 4vw, 3.2rem); overflow-wrap: break-word; }
.tm-intake-rail p { color: var(--rail-muted); }
.tm-intake-rail .tm-kicker { color: var(--rail-gray); }
.tm-rail-steps { display: grid; gap: .35rem; margin-top: 2rem; }
.tm-rail-step { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: .55rem; padding: .5rem 0; color: var(--rail-gray); font-size: .78rem; }
.tm-rail-step::before { content: attr(data-number); color: var(--rail-gray); font-family: var(--mono); letter-spacing: .1em; }
.tm-rail-step[aria-current="step"] { color: var(--rail-ink); }
.tm-intake-main { min-width: 0; padding: clamp(1.25rem, 4vw, 4rem); }
.tm-intake-main-inner { width: min(940px, 100%); margin-inline: auto; }
.tm-intake-main h1 { max-width: 15ch; font-family: var(--serif); font-weight: 500; letter-spacing: -.01em; font-size: clamp(2.2rem, 5vw, 3.4rem); }
.tm-trust-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; margin: 1.25rem 0 2rem; }
.tm-trust-item { padding-top: .65rem; color: var(--muted); font-size: .78rem; border-top: 2px solid var(--line-dark); }
.tm-segmented { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper-3); }
.tm-segmented button { min-height: 44px; padding: .45rem .7rem; color: var(--muted); font-family: var(--sans); font-size: 13px; border: 0; border-radius: 4px; background: transparent; }
.tm-segmented button[aria-pressed="true"] { color: var(--ink); background: var(--paper-2); box-shadow: var(--shadow); }
.tm-sensitive { border-left: 3px solid var(--danger); background: var(--danger-soft); }
.tm-evidence-panel { margin-top: 1.25rem; padding: 1rem; border: 1px solid var(--line); border-left: 1px solid var(--line-dark); border-radius: 4px; background: var(--paper-3); }
.tm-evidence-panel .tm-card { box-shadow: none; }

/* Client room */
.tm-client-shell { width: min(1420px, calc(100% - 2rem)); margin-inline: auto; padding: 1.25rem 0 4rem; }
.tm-client-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 1rem; align-items: start; }
.tm-client-sidebar { position: sticky; top: 80px; }
.tm-client-tabs { display: flex; gap: .25rem; overflow-x: auto; padding: .65rem 0; border-bottom: 1px solid var(--line); }
.tm-client-tabs button { flex: 0 0 auto; padding: .55rem .7rem; color: var(--muted); font-size: .77rem; font-weight: 700; border: 0; border-bottom: 2px solid transparent; background: transparent; }
.tm-client-tabs button[aria-selected="true"] { color: var(--accent-deep); border-bottom-color: var(--accent); }
.tm-client-panel { display: none; padding-top: 1rem; }
.tm-client-panel.is-active { display: block; }
.tm-client-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(230px, .7fr); gap: .85rem; }
.tm-next-action { border-left: 1px solid var(--line-dark); }

@media (max-width: 980px) {
  .tm-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tm-intake-shell { grid-template-columns: 1fr; }
  .tm-intake-rail { position: static; height: auto; padding: 1.25rem; }
  .tm-intake-rail h1, .tm-intake-rail > p { display: none; }
  .tm-rail-steps { display: flex; gap: .75rem; margin: 0; overflow-x: auto; }
  .tm-rail-step { flex: 0 0 auto; }
  .tm-client-layout { grid-template-columns: 1fr; }
  .tm-client-sidebar { position: static; }
}

@media (max-width: 720px) {
  .tm-header { position: static; align-items: flex-start; }
  .tm-brand span { display: none; }
  .tm-theme-toggle span { display: none; }
  .tm-hero, .tm-split, .tm-client-hero { grid-template-columns: 1fr; }
  .tm-grid--2, .tm-grid--3, .tm-trust-strip { grid-template-columns: 1fr; }
  .tm-service { min-height: 125px; }
  .tm-intake-main { padding: 1rem .7rem 3rem; }
  .tm-actions > .tm-btn { flex: 1 1 auto; }
  .tm-message { max-width: 95%; }
  .tm-steps span:not([aria-current="step"]) { display: none; }
  .tm-client-shell > .tm-eyebrow-row { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 460px) {
  .tm-service-grid { grid-template-columns: 1fr; }
  .tm-client-shell { width: min(100% - .8rem, 1420px); }
  .tm-segmented { width: 100%; }
  .tm-segmented button { flex: 1 1 0; min-width: 0; }
}

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