/* ═══════════════════════════════════════════════════════════════
     THEMIS · /empezar/ — re-skin "mono folios / Piel Tinta"
     Todo color deriva de los tokens de :root — nada suelto.
     ═══════════════════════════════════════════════════════════════ */
  :root{
    color-scheme:light;
    --bg:#fbfbfc; --bg-alt:#f6f5f0; --elev:#ffffff;
    --ink:#131416; --ink-muted:#3f4146;
    --hair:#e8e7e2; --hair-strong:#d9d8d3; --gray:#6b7280;
    --crit:#a4574b; --med:#a8894e; --med-text:#765f2d; --ok:#6e8b6d; --ok-text:#4d684c; --info:#64748b;
    --shadow:0 1px 2px rgba(0,0,0,.04);
    --on-ink:#ffffff;
    --serif:Charter,'Iowan Old Style',Palatino,Georgia,serif;
    --sans:system-ui,-apple-system,'Segoe UI',sans-serif;
    --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
    /* piel del rail: papel claro con tinta normal (sigue los tokens del tema) */
    --rail-bg:var(--bg-alt); --rail-elev:var(--elev); --rail-ink:var(--ink); --rail-muted:var(--ink-muted);
    --rail-hair:var(--hair); --rail-hair-strong:var(--hair-strong); --rail-gray:var(--gray);
  }
  :root[data-theme="dark"]{
    color-scheme:dark;
    --bg:#141312; --bg-alt:#1b1a18; --elev:#1e1d1b;
    --ink:#f3f1ec; --ink-muted:#b7b3ab;
    --hair:#2b2926; --hair-strong:#3a3835; --gray:#8f8a82;
    --crit:#c47f71; --med:#c6a86a; --med-text:#c6a86a; --ok:#8fae8e; --ok-text:#8fae8e; --info:#8ba0bb;
    --shadow:0 1px 2px rgba(0,0,0,.35);
    --on-ink:#141312;
    /* en noche el rail se separa por elevación, no por contraste */
    --rail-bg:var(--bg-alt); --rail-elev:var(--elev); --rail-ink:var(--ink); --rail-muted:var(--ink-muted);
    --rail-hair:var(--hair); --rail-hair-strong:var(--hair-strong); --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(--bg);
    font-family:var(--sans); font-size:14px; line-height:1.5;
    -webkit-font-smoothing:antialiased; overflow-x:hidden;
  }
  a{color:var(--ink)}
  button,input,textarea,select{font:inherit; letter-spacing:0; color:inherit}
  button{cursor:pointer}
  button:disabled{cursor:not-allowed; opacity:.42}
  :focus-visible{outline:2px solid var(--ink); outline-offset:2px; border-radius:2px}
  ::selection{color:var(--on-ink); background:var(--ink)}

  /* cambio de tema suave (fallback si no hay View Transitions) */
  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;
  }

  h1,h2,h3,h4{margin:0 0 .65rem; color:var(--ink); font-weight:500; line-height:1.12; letter-spacing:-.01em}
  /* serif solo: H1 del rail + títulos de card (regla de la línea) */
  .tm-intake-rail h1, .tm-intake-rail .tm-rail-title, .tm-card h2, .tm-card h3, .tm-service strong{font-family:var(--serif); font-weight:500}
  h1{font-family:var(--serif); font-weight:500; letter-spacing:-.01em; font-size:clamp(2rem,4.4vw,3.2rem)}
  h2{font-size:clamp(1.35rem,2.6vw,1.7rem)}
  h3{font-size:1.1rem}
  h4{font-size:1rem}
  p{margin:0 0 1rem}

  .mono{font-family:var(--mono)}

  /* ── banner de propuesta ── */
  .tm-demo-banner{
    padding:6px clamp(1rem,3vw,2.5rem);
    color:var(--gray); font-family:var(--mono); font-size:10px;
    letter-spacing:.14em; text-transform:uppercase; text-align:center;
    background:var(--bg-alt); border-bottom:1px solid var(--hair);
  }

  /* ── shell / header ── */
  .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(--hair);
    background:var(--bg);
  }
  .tm-brand{display:inline-flex; align-items:baseline; gap:.65rem; color:var(--ink); text-decoration:none}
  .tm-brand strong{font:500 1.35rem/1 var(--serif); letter-spacing:.02em}
  .tm-brand strong::after{content:"\00a7"; margin-left:.35rem; color:var(--gray); font-size:.85rem; vertical-align:1px}
  .tm-brand span{color:var(--gray); font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase}
  .tm-nav{display:flex; align-items:center; justify-content:flex-end; gap:.5rem; flex-wrap:wrap}
  .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(--hair-strong); border-radius:5px;
    background:var(--elev); 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(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted)}

  .tm-kicker{
    display:flex; align-items:center; gap:8px;
    color:var(--gray); font-family:var(--mono); font-size:10.5px; font-weight:400;
    letter-spacing:.14em; text-transform:uppercase;
  }
  .tm-kicker::after{content:""; flex:1; height:1px; background:var(--hair)}
  .tm-lede{max-width:52rem; color:var(--ink-muted); font-size:15.5px; line-height:1.55}
  .tm-note{color:var(--gray); font-size:.84rem}

  /* ── cards ── */
  .tm-card{
    min-width:0; padding:clamp(1rem,2vw,1.4rem);
    border:1px solid var(--hair); border-radius:6px;
    background:var(--elev); box-shadow:var(--shadow);
  }
  .tm-card--raised{box-shadow:var(--shadow)}
  .tm-card--accent{border-top:1px solid var(--line-dark)}
  .tm-card h2{font-size:clamp(1.3rem,2.4vw,1.6rem); letter-spacing:-.01em; margin-top:.55rem}
  .tm-card .tm-kicker{margin-bottom:.2rem}
  .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)); counter-reset:svc}
  .tm-stack{display:grid; gap:.85rem}

  /* ── tarjetas de servicio: foliado 01…04 ── */
  .tm-service{
    counter-increment:svc; position:relative;
    display:flex; flex-direction:column; align-items:flex-start; gap:.55rem;
    min-height:172px; padding:1.05rem 1.1rem;
    color:var(--ink); text-align:left;
    border:1px solid var(--hair-strong); border-radius:6px;
    background:var(--elev); box-shadow:var(--shadow);
    transition:border-color .2s ease, box-shadow .2s ease;
  }
  .tm-service:hover,.tm-service:focus-visible{border-color:var(--gray); box-shadow:var(--shadow)}
  .tm-service strong{font-size:1.25rem; line-height:1.15; letter-spacing:-.01em}
  .tm-service small{color:var(--gray); font-size:.8rem; line-height:1.5; margin-top:auto}

  /* ── formularios ── */
  .tm-field{display:grid; gap:.4rem; margin-bottom:.9rem}
  .tm-field > span,.tm-field > label{
    color:var(--gray); font-size:10px; font-weight:600;
    letter-spacing:.11em; text-transform:uppercase;
  }
  .tm-field input,.tm-field textarea,.tm-field select{
    width:100%; min-width:0; padding:.7rem .78rem;
    color:var(--ink); border:1px solid var(--hair-strong); border-radius:4px;
    outline:0; background:var(--bg);
    transition:border-color .2s ease, box-shadow .2s ease, background .3s ease;
  }
  .tm-field input::placeholder,.tm-field textarea::placeholder{color:var(--gray)}
  .tm-field textarea{min-height:108px; resize:vertical}
  .tm-field input:focus,.tm-field textarea:focus,.tm-field select:focus{
    border-color:var(--ink);
    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:.7rem 0; border-bottom:1px solid var(--hair)}
  .tm-check input{flex:0 0 auto; margin-top:.25rem; accent-color:var(--ink)}
  .tm-check span{color:var(--ink-muted); font-size:.86rem}

  /* ── botones: el acento ES la tinta ── */
  .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:38px; padding:.52rem .95rem;
    color:var(--ink); font-size:.8rem; font-weight:500; text-decoration:none; white-space:nowrap;
    border:1px solid var(--hair-strong); border-radius:5px;
    background:var(--elev); box-shadow:var(--shadow);
    transition:box-shadow .2s ease, border-color .2s ease, filter .2s ease, background .2s ease;
  }
  .tm-btn:hover{border-color:var(--gray)}
  .tm-btn--accent{color:var(--on-ink); border-color:var(--ink); background:var(--ink)}
  .tm-btn--accent:hover{border-color:var(--ink); filter:brightness(1.12)}
  :root[data-theme="dark"] .tm-btn--accent:hover{filter:brightness(.92)}
  .tm-btn--ghost{color:var(--ink-muted); border-color:transparent; background:transparent; box-shadow:none}
  .tm-btn--ghost:hover{border-color:var(--hair-strong); background:var(--bg-alt); box-shadow:none}
  .tm-btn--danger{color:var(--crit); border-color:var(--hair-strong); background:transparent; box-shadow:none}
  .tm-btn--danger:hover{border-color:var(--crit)}

  /* ── pills: semánticos SOLO estados ── */
  .tm-pill{
    display:inline-flex; align-items:center; gap:5px; max-width:100%;
    padding:.2rem .55rem;
    color:var(--ink-muted); font-family:var(--mono); font-size:10px; font-weight:400;
    letter-spacing:.06em; text-transform:uppercase; white-space:normal;
    border:1px solid var(--hair-strong); border-radius:999px; background:var(--bg-alt);
  }
  .tm-pill--critical{color:var(--crit); border-color:color-mix(in srgb, var(--crit) 42%, var(--hair)); background:color-mix(in srgb, var(--crit) 7%, var(--elev))}
  .tm-pill--high{color:var(--med-text); border-color:color-mix(in srgb, var(--med) 42%, var(--hair)); background:color-mix(in srgb, var(--med) 7%, var(--elev))}
  .tm-pill--ok{color:var(--ok-text); border-color:color-mix(in srgb, var(--ok) 42%, var(--hair)); background:color-mix(in srgb, var(--ok) 7%, var(--elev))}

  /* ── progreso + pasos ── */
  .tm-progress{height:5px; overflow:hidden; border:1px solid var(--hair); border-radius:3px; background:var(--bg-alt)}
  .tm-progress > span{display:block; height:100%; background:var(--ink); transition:width .3s ease}
  .tm-steps{
    display:flex; justify-content:space-between; gap:.45rem; margin:.75rem 0 1.5rem;
    color:var(--gray); font-family:var(--mono); font-size:10px;
    letter-spacing:.09em; text-transform:uppercase;
  }
  .tm-steps [aria-current="step"]{color:var(--ink); font-weight:600}

  /* ── alertas documentales ── */
  .tm-alert{
    margin:.8rem 0; padding:.85rem 1rem;
    border:1px solid color-mix(in srgb, var(--med) 30%, var(--hair));
    border-left:3px solid var(--med); border-radius:0 4px 4px 0;
    background:color-mix(in srgb, var(--med) 6%, var(--elev));
    font-size:.86rem; color:var(--ink-muted);
  }
  .tm-alert strong{color:var(--ink)}
  .tm-alert p{margin:.35rem 0 0}
  .tm-alert small{display:block; margin-top:.35rem; color:var(--gray)}
  .tm-alert--danger{border-color:color-mix(in srgb, var(--crit) 34%, var(--hair)); border-left-color:var(--crit); background:color-mix(in srgb, var(--crit) 6%, var(--elev))}
  .tm-alert--success{border-color:color-mix(in srgb, var(--ok) 34%, var(--hair)); border-left-color:var(--ok); background:color-mix(in srgb, var(--ok) 6%, var(--elev))}
  .tm-hidden{display:none !important}

  .tm-footer{
    padding:1.25rem clamp(1rem,3vw,2.5rem);
    color:var(--gray); font-size:.76rem; border-top:1px solid var(--hair); background:var(--bg-alt);
  }
  .tm-footer [data-themis-release]{font-family:var(--mono); font-size:.68rem; letter-spacing:.06em}
  .tm-toast{
    position:fixed; right:1rem; bottom:1rem; z-index:80;
    max-width:min(420px,calc(100% - 2rem)); padding:.85rem 1rem;
    color:var(--on-ink); font-size:.82rem; border-radius:5px;
    background:var(--ink); box-shadow:var(--shadow);
  }

  /* ── shell del intake: rail izquierdo en tinta noche ── */
  .tm-intake-shell{min-height:calc(100vh - 64px); display:grid; grid-template-columns:minmax(230px,320px) minmax(0,1fr)}
  .tm-intake-rail{
    position:sticky; top:64px; align-self:start;
    height:calc(100vh - 64px); overflow:auto;
    padding:clamp(1.5rem,3vw,2.5rem);
    color:var(--rail-muted); background:var(--rail-bg);
    border-right:1px solid var(--rail-hair);
  }
  .tm-intake-rail .tm-kicker{color:var(--rail-gray)}
  .tm-intake-rail .tm-kicker::after{background:var(--rail-hair)}
  .tm-intake-rail h1,.tm-intake-rail .tm-rail-title{
    margin:.9rem 0 1rem; color:var(--rail-ink);
    font-size:clamp(1.6rem,2.8vw,2.2rem); font-weight:500; letter-spacing:-.015em;
    line-height:1.14;
    overflow-wrap:break-word;
  }
  .tm-intake-rail h1::after,.tm-intake-rail .tm-rail-title::after{content:""; display:block; width:56px; height:2px; margin-top:1rem; background:var(--rail-ink)}
  .tm-intake-rail p{color:var(--rail-muted); font-size:.86rem; line-height:1.6}

  /* pasos del rail: foliado mono 01–08 */
  .tm-rail-steps{display:grid; gap:0; margin-top:2rem; border-top:1px solid var(--rail-hair)}
  .tm-rail-step{
    position:relative;
    display:grid; grid-template-columns:34px minmax(0,1fr); gap:.55rem; align-items:baseline;
    padding:.6rem 0 .6rem .6rem;
    color:var(--rail-gray); font-size:.78rem;
    border-bottom:1px solid var(--rail-hair);
    transition:color .3s ease, background .3s ease;
  }
  .tm-rail-step::before{
    content:attr(data-number);
    color:var(--rail-gray); font-family:var(--mono); font-size:10.5px;
    letter-spacing:.1em;
  }
  .tm-rail-step::after{
    content:""; position:absolute; left:0; top:0; bottom:-1px; width:2px;
    background:var(--rail-ink); transform:scaleY(0); transform-origin:top;
    transition:transform .2s ease;
  }
  .tm-rail-step[aria-current]{color:var(--rail-ink); background:color-mix(in srgb, var(--rail-ink) 5%, transparent)}
  .tm-rail-step[aria-current]::before{color:var(--rail-ink); font-weight:600}
  .tm-rail-step[aria-current]::after{transform:scaleY(1)}

  .tm-intake-main{min-width:0; padding:clamp(1.25rem,4vw,3.5rem); background:var(--bg)}
  .tm-intake-main-inner{width:min(940px,100%); margin-inline:auto}
  .tm-intake-main h1{max-width:16ch; margin:.7rem 0 .8rem}

  .tm-trust-strip{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.85rem; margin:1.4rem 0 2rem}
  .tm-trust-item{
    padding-top:.7rem;
    color:var(--gray); font-size:.78rem; line-height:1.55;
    border-top:2px solid var(--hair-strong);
  }
  .tm-trust-item strong{color:var(--ink); font-weight:600}

  .tm-segmented{display:inline-flex; gap:2px; margin-bottom:.8rem; padding:3px; border:1px solid var(--hair); border-radius:6px; background:var(--bg-alt)}
  .tm-segmented button{
    min-height:44px; padding:.4rem .85rem;
    color:var(--gray); font-family:var(--sans); font-size:13px;
    border:0; border-radius:4px; background:transparent;
    transition:background .2s ease, color .2s ease, box-shadow .2s ease;
  }
  .tm-segmented button[aria-pressed="true"]{color:var(--ink); background:var(--elev); box-shadow:var(--shadow)}

  .tm-evidence-panel{
    margin-top:1.25rem; padding:1rem 1.1rem;
    border:1px solid var(--hair); border-left:1px solid var(--hair-strong); border-radius:0 6px 6px 0;
    background:var(--bg-alt);
  }
  .tm-evidence-panel h3{margin-top:.5rem}
  .tm-evidence-panel .tm-card{box-shadow:none}
  .tm-evidence-panel .tm-alert{background:var(--elev)}

  /* ═══ aparición sobria (sin springs ni staggers) ═══ */
  @media (prefers-reduced-motion: no-preference){
    #flow > section[data-step], #service-section, #resume-banner, .tm-alert{
      opacity:1;
      transition:opacity .25s ease, display .25s;
      transition-behavior:allow-discrete;
    }
    @starting-style{
      #flow > section[data-step], #service-section, #resume-banner, .tm-alert{opacity:0}
    }
  }

  /* ── responsive ── */
  @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:1rem 1.25rem; border-right:0; border-bottom:1px solid var(--rail-hair)}
    .tm-intake-rail h1,.tm-intake-rail .tm-rail-title,.tm-intake-rail > p{display:none}
    .tm-rail-steps{display:flex; gap:.15rem; margin:.6rem 0 0; overflow-x:auto; border-top:0}
    .tm-rail-step{flex:0 0 auto; grid-template-columns:auto minmax(0,1fr); gap:.4rem; padding:.45rem .6rem; border-bottom:0}
    .tm-rail-step::after{bottom:0; top:auto; height:2px; width:100%; transform:scaleX(0); transform-origin:left}
    .tm-rail-step[aria-current]::after{transform:scaleX(1)}
  }
  @media (max-width:720px){
    .tm-header{position:static; align-items:flex-start}
    .tm-brand span{display:none}
    .tm-theme-toggle span{display:none}
    .tm-grid--2,.tm-grid--3,.tm-trust-strip{grid-template-columns:1fr}
    .tm-service{min-height:130px}
    .tm-intake-main{padding:1rem .8rem 3rem}
    .tm-actions > .tm-btn{flex:1 1 auto}
    .tm-steps span:not([aria-current="step"]){display:none}
    .tm-intake-shell{min-height:0}
  }
  @media (max-width:460px){
    .tm-service-grid{grid-template-columns:1fr}
    .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}
    .tm-trust-item{opacity:1 !important; transform:none !important}
  }
  
/* === FIX HEADER (15-jul): esconder sello de versión dev (footer) === */
.ws-release,[data-themis-release]{display:none !important}

/* ═══ Rediseño Tinta (jul-30): estado punto+texto, plegables y aviso de datos ═══ */
.tm-state{display:inline-flex; align-items:center; gap:7px; font-family:var(--sans); font-size:12.5px; color:var(--ink-muted)}
.tm-state .dot{width:7px; height:7px; border-radius:50%; background:var(--info); flex:none}
.tm-state .dot.ok{background:var(--ok)}
.tm-state .dot.med{background:var(--med)}
.tm-state .dot.crit{background:var(--crit)}
.tm-state .dot.info{background:var(--info)}

/* bloque plegable con hairlines (patrón del spec) */
.tm-fold{margin-top:1rem; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair)}
.tm-fold + .tm-fold{border-top:0; margin-top:0}
.tm-fold > summary{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  min-height:44px; padding:.6rem 2px; cursor:pointer; list-style:none;
  color:var(--ink); font-family:var(--serif); font-size:1rem; font-weight:500;
}
.tm-fold > summary::-webkit-details-marker{display:none}
.tm-fold > summary::after{content:"\FF0B"; color:var(--gray); font-family:var(--sans); font-size:.9rem; flex:none}
.tm-fold[open] > summary::after{content:"\2212"}
.tm-fold > .tm-fold-body{padding:.2rem 2px 1rem}

/* aviso de tratamiento de datos: borde crítico por clase, sin color inline */
.tm-alert--privacy{border-left-color:var(--crit)}