/* Estudio 09 — estilos compartidos. Tokens de styles/tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 400 var(--text-base)/1.55 var(--font-ui); }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-editorial); font-weight: 400; margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }
button { font: inherit; color: inherit; }
.muted { color: var(--ink-muted); }
.caps { font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); font-weight: 500; }
:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }

/* ---------- Barra de estudio ---------- */
.study { background: var(--brand-950); color: #DCE5E1; font-size: var(--text-sm); position: sticky; top: 0; z-index: 900; }
.study-row { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-4); min-height: 46px; flex-wrap: wrap; }
.study-controls { border-top: 1px solid rgba(255,255,255,.08); padding-top: 8px; padding-bottom: 8px; justify-content: space-between; }
.study-brand { text-decoration: none; letter-spacing: .22em; font-weight: 600; color: #fff; }
.study-brand span { letter-spacing: 0; font-weight: 400; color: #9FB2AC; margin-left: 14px; }
.study-variants { display: flex; gap: 4px; margin-left: auto; }
.study-variants a { text-decoration: none; padding: 6px 12px; border-radius: var(--radius-sm); color: #B9C8C3; }
.study-variants a b { font-weight: 600; margin-right: 6px; color: #7F958F; }
.study-variants a[aria-current] { background: rgba(255,255,255,.1); color: #fff; }
.study-variants a[aria-current] b { color: #fff; }
.seg { display: inline-flex; border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-sm); overflow: hidden; }
.seg a { text-decoration: none; padding: 5px 14px; color: #B9C8C3; display: flex; align-items: baseline; gap: 6px; border-right: 1px solid rgba(255,255,255,.1); }
.seg a:last-child { border-right: 0; }
.seg a b { font-weight: 600; color: #fff; }
.seg a small { color: #7F958F; font-size: var(--text-xs); }
.seg a[aria-current] { background: #E7EFEC; color: var(--brand-950); }
.seg a[aria-current] b, .seg a[aria-current] small { color: var(--brand-700); }

/* ---------- Disponibilidad y confianza ---------- */
.av { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--ink-secondary); white-space: nowrap; }
.av i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.av-hoy i { background: var(--positive); }
.av-parcial i { background: transparent; border: 1.5px solid var(--positive); background: linear-gradient(90deg, var(--positive) 50%, transparent 50%); }
.av-proximo i { border: 1.5px solid var(--info); }
.av-futuro i { border: 1.5px dashed var(--ink-faint); }
.conf { font-size: var(--text-xs); padding: 1px 6px; border-radius: var(--radius-xs); background: var(--surface-muted); color: var(--ink-secondary); white-space: nowrap; }
.conf-confirmado { background: var(--positive-bg); color: var(--positive); }
.conf-probable { background: var(--brand-50); color: var(--brand-700); }
.conf-historico { background: var(--surface-muted); color: var(--ink-muted); }
.flag { display: block; font-size: var(--text-xs); color: var(--warning); margin-top: 2px; }
.pending { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); color: var(--ink-muted); font-size: var(--text-sm); background: var(--surface-subtle); }

/* ---------- Citas ---------- */
.cites { white-space: nowrap; margin-left: 3px; }
.cite { border: 0; background: none; padding: 0 2px; font-size: 10px; font-weight: 600; color: var(--brand-600); vertical-align: super; line-height: 1; cursor: pointer; text-decoration: underline; text-decoration-color: var(--brand-100); text-underline-offset: 2px; }
.cite:hover { color: var(--brand-900); }
.cite-off { color: var(--ink-faint); text-decoration-style: dashed; }
.pop { position: absolute; z-index: 1000; width: 300px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: 0 12px 32px rgba(17,25,24,.12); padding: 14px 16px; font-size: var(--text-sm); }
.pop-h { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.pop-n { background: var(--brand-900); color: #fff; font-size: var(--text-xs); font-weight: 600; min-width: 22px; height: 22px; display: grid; place-items: center; border-radius: var(--radius-xs); }
.pop dl { display: grid; grid-template-columns: 80px 1fr; gap: 4px 8px; margin: 0 0 10px; }
.pop dt { color: var(--ink-muted); }
.pop dd { margin: 0; }
.pop p { color: var(--ink-secondary); border-top: 1px solid var(--border); padding-top: 8px; }

/* ---------- Pares clave/valor ---------- */
.kv { display: grid; grid-template-columns: minmax(130px, 34%) 1fr; margin: 0; }
.kv dt, .kv dd { padding: 9px 0; border-bottom: 1px solid var(--border); margin: 0; }
.kv dt { color: var(--ink-muted); font-size: var(--text-sm); padding-right: 12px; }
.kv dd { font-weight: 450; }

/* ---------- Tablas ---------- */
.tbl { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.tbl th { text-align: left; font-weight: 500; color: var(--ink-muted); font-size: var(--text-xs); letter-spacing: .06em; text-transform: uppercase; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--border-strong); }
.tbl td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.tbl td strong { font-weight: 500; display: block; }
.tbl td small { color: var(--ink-muted); display: block; }
.tbl tr.warn td { background: var(--warning-bg); }
.tbl tr.warn td:first-child { box-shadow: inset 2px 0 0 var(--warning); padding-left: 8px; }
.tbl-wrap { overflow-x: auto; }

/* ---------- Fotografía ---------- */
.photo { margin: 0; position: relative; border-radius: var(--radius-xs); overflow: hidden; flex: none; }
.photo svg { width: 100%; height: 100%; display: block; }
.photo svg rect { fill: var(--surface-muted); }
.photo svg circle, .photo svg path { fill: var(--border-strong); }
.photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; font-size: 9.5px; text-align: center; padding: 2px 0; background: rgba(17,25,24,.55); color: #fff; letter-spacing: .04em; }

/* ---------- Mapa ---------- */
.mapw { display: grid; gap: 0; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-sm); overflow: hidden; }
.map-search { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.map-search svg { width: 15px; height: 15px; fill: none; stroke: var(--ink-muted); stroke-width: 1.5; }
.map-search input { border: 0; outline: 0; flex: 1; font: inherit; font-size: var(--text-sm); background: none; color: var(--ink); }
.map-canvas { background: var(--surface-subtle); z-index: 0; }
.map-off { display: grid; place-items: center; color: var(--ink-muted); font-size: var(--text-sm); }
.map-list { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow: auto; }
.map-list li { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: start; padding: 9px 12px; border-top: 1px solid var(--border); cursor: pointer; font-size: var(--text-sm); }
.map-list li:hover { background: var(--surface-subtle); }
.map-list li.on { background: var(--brand-50); box-shadow: inset 2px 0 0 var(--brand-700); }
.map-list strong { font-weight: 500; display: block; }
.map-list small { color: var(--ink-muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.map-list em { display: block; font-style: normal; color: var(--ink-secondary); margin-top: 2px; }
.pin { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 600; color: #fff; background: var(--brand-800); }
.pin-muted { background: var(--ink-muted); }
.pin-info { background: var(--info); }
.pin-warn { background: var(--warning); }
.pin-map { box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0,0,0,.25); }
.leaflet-popup-content { font: var(--text-sm)/1.4 var(--font-ui); }

/* ---------- Árbol ---------- */
.treew { display: grid; gap: 10px; }
.tree-scroll { overflow-x: auto; }
.tree-scroll svg { min-width: 720px; width: 100%; margin: 0 auto; height: auto; display: block; }
.t-edge, .t-marr { fill: none; stroke: var(--border-strong); stroke-width: 1.2; }
.t-marr { stroke: var(--brand-600); stroke-width: 1.5; stroke-dasharray: 0; }
.t-node rect { fill: var(--surface); stroke: var(--border-strong); }
.t-node { cursor: pointer; outline: none; }
.t-node:hover rect, .t-node:focus-visible rect { stroke: var(--brand-600); }
.t-node.on rect { stroke: var(--brand-700); stroke-width: 1.6; fill: var(--brand-50); }
.t-name { font: 400 14.5px var(--font-editorial); fill: var(--ink); }
.t-rel { font: 400 10.5px var(--font-ui); fill: var(--ink-muted); }
.t-subject { cursor: default; }
.t-subject rect { fill: var(--brand-900); stroke: var(--brand-900); }
.t-subject .t-name { fill: #fff; }
.t-subject .t-rel { fill: #A9C0B8; }
.t-phone { fill: var(--positive); }
.t-legend { margin-left: 10px; white-space: nowrap; }
.t-legend i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--positive); }
.tree-detail { min-height: 44px; font-size: var(--text-sm); }
.td { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; padding: 10px 12px; background: var(--surface-subtle); border-radius: var(--radius-sm); }
.td strong { font-family: var(--font-editorial); font-weight: 400; font-size: 17px; }
.td span { color: var(--ink-secondary); }
.td .td-ph { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.td em { font-style: normal; color: var(--warning); flex-basis: 100%; }

/* ---------- Fuera de nivel ---------- */
.upsell { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--border); font-size: var(--text-sm); color: var(--ink-muted); }
.upsell-k { color: var(--ink-secondary); font-weight: 500; margin-right: 6px; }
.upsell small { font-size: 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-xs); padding: 0 4px; margin-left: 2px; }

.fict { font-size: var(--text-xs); color: var(--ink-faint); text-align: center; padding: var(--space-4) 0 var(--space-5); }

@media print {
  .study, .map-search { display: none !important; }
  body { background: #fff; }
  .pop { display: none; }
}

/* ---------- Contenido de secciones ---------- */
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.note { font-size: var(--text-sm); color: var(--ink-muted); margin-top: 10px; }
.warnc { color: var(--warning); }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: grid; grid-template-columns: 96px 1fr auto; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); align-items: baseline; }
.r-k { color: var(--ink-muted); font-size: var(--text-sm); }
.r-v strong { font-weight: 500; }
.r-v small { display: block; color: var(--ink-muted); font-size: var(--text-sm); }
.r-m { font-size: var(--text-xs); color: var(--ink-muted); display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.jobs { list-style: none; margin: 0; padding: 0; }
.jobs li { display: grid; grid-template-columns: 96px 1fr auto; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); align-items: baseline; }
.j-p { font-size: var(--text-sm); color: var(--ink-secondary); font-variant-numeric: tabular-nums; }
.j-b strong { font-weight: 500; }
.j-b small { display: block; color: var(--ink-muted); font-size: var(--text-sm); }
.figs { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--border-strong); border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.figs div { padding: 10px 12px 10px 0; }
.figs div + div { padding-left: 12px; border-left: 1px solid var(--border); }
.figs span { display: block; font-size: var(--text-xs); color: var(--ink-muted); }
.figs b { font: 400 22px/1.2 var(--font-editorial); }
.reg { font-size: var(--text-sm); margin-top: 10px; }
.reg .caps { margin-right: 8px; }
.res { font-size: var(--text-xs); font-weight: 500; padding: 1px 7px; border-radius: var(--radius-xs); white-space: nowrap; }
.res-pos { background: var(--positive-bg); color: var(--positive); }
.res-warn { background: var(--warning-bg); color: var(--warning); }
.res-info { background: var(--info-bg); color: var(--info); }
.res-neutral { background: var(--surface-muted); color: var(--ink-secondary); }
.tbl.src tr.off td { color: var(--ink-faint); }
.tbl.src tr.off strong { color: var(--ink-muted); }
.fam { margin-top: 14px; }
.mapw.side .map-body { display: grid; grid-template-columns: 1.35fr 1fr; }
.mapw.side .map-list { max-height: none; border-left: 1px solid var(--border); }
.mapw.side .map-list li:first-child { border-top: 0; }
@media (max-width: 860px) { .mapw.side .map-body { grid-template-columns: 1fr; } .mapw.side .map-list { border-left: 0; } }
.leaflet-tile-pane { filter: grayscale(1) contrast(.92) brightness(1.04); }
@media (max-width: 700px) { .study-row { padding: 0 12px; } .seg { max-width: 100%; overflow-x: auto; } .seg a small { display: none; } .study-brand span { display: none; } }
.map-tiles-off { background: repeating-linear-gradient(0deg, transparent 0 39px, var(--border) 39px 40px), repeating-linear-gradient(90deg, transparent 0 39px, var(--border) 39px 40px), var(--surface-subtle); }
.mapw.side .map-canvas { height: auto !important; min-height: 330px; }