/* Recruiting BBVA · guía de estilos
   Tema por defecto: oscuro atenuado ("dim"). Tema claro opcional (botón sol/luna del menú).
   Colores con significado:
     --brand    acento morado: acciones principales, selección, arrastre
     --ok       verde: cubierta, seleccionado, disponible
     --warn     ámbar: entrevistas, atención
     --bad      rojo: cancelada, perdida, error
     --c-*      estados de candidatura en las flechas del mapa */

:root, :root[data-theme="oscuro"] {
  --bg: #15171e; --bg-2: #1a1d26; --panel: #1f232e; --panel-2: #262b38; --text: #e8eaf2; --muted: #8d94a8; --line: #2e3443; --line-2: #3a4152;
  --brand: #9d90ff; --brand-soft: rgba(157, 144, 255, .14); --brand-glow: rgba(157, 144, 255, .35); --field: #717a90;
  --ok: #3ddc97; --ok-soft: rgba(61, 220, 151, .13); --warn: #ffb547; --warn-soft: rgba(255, 181, 71, .14);
  --bad: #ff6b7a; --bad-soft: rgba(255, 107, 122, .14); --info: #4cc9f0; --info-soft: rgba(76, 201, 240, .13);
  --c-propuesto: #9d90ff; --c-enviado: #4cc9f0; --c-entrevista: #ffb547; --c-apagado: #5b6275; --c-sugerido: #f472b6;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .18); --shadow-up: 0 12px 32px rgba(0, 0, 0, .45);
  color-scheme: dark;
}
:root[data-theme="claro"] {
  --bg: #f3f4f8; --bg-2: #eceef4; --panel: #ffffff; --panel-2: #f6f7fb; --text: #1b1f2b; --muted: #575f73; --line: #e1e4ec; --line-2: #cfd4df;
  --brand: #4f42d8; --brand-soft: rgba(79, 66, 216, .09); --brand-glow: rgba(79, 66, 216, .25); --field: #80889c;
  --ok: #0b7a4d; --ok-soft: #e2f6ed; --warn: #8f5800; --warn-soft: #fdf1dc; --bad: #c0283a; --bad-soft: #fde7ea; --info: #0a6d93; --info-soft: #e1f3fa;
  --c-propuesto: #4f42d8; --c-enviado: #0a6d93; --c-entrevista: #b06c00; --c-apagado: #9aa1b0; --c-sugerido: #be185d;
  --shadow: 0 1px 2px rgba(20, 30, 50, .06), 0 4px 14px rgba(20, 30, 50, .05); --shadow-up: 0 12px 30px rgba(20, 30, 50, .16);
  color-scheme: light;
}
:root {
  --radius: 12px; --fill: linear-gradient(135deg, #6352f5, #4f3fe6); /* blanco sobre este relleno ≥ 5:1 */ --r-sm: 8px; --side: 232px; --ease: cubic-bezier(.2, .8, .2, 1);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px; color: var(--text); -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0 0 .6em; line-height: 1.25; letter-spacing: -.01em; }
h1 { font-size: 22px; font-weight: 700; } h2 { font-size: 16px; } h3 { font-size: 14px; }
.cargando { padding: 40px; color: var(--muted); }
::selection { background: var(--brand-glow); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }
kbd { font: 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 3px 5px; border-radius: 5px; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--muted); }

/* ---------- Estructura: menú lateral + vista ---------- */
.shell { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); min-height: 100vh; transition: grid-template-columns .25s var(--ease); }
.shell.corto { --side: 64px; }
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 6px; padding: 14px 10px; background: var(--bg-2); border-right: 1px solid var(--line); overflow: hidden; }
.marca { display: flex; align-items: center; gap: 10px; padding: 4px 6px 10px; white-space: nowrap; }
.logo-r { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #6352f5, #b4239f); box-shadow: 0 4px 14px var(--brand-glow); }
.side .buscar { display: flex; align-items: center; gap: 8px; width: 100%; color: var(--muted); background: var(--panel); margin-bottom: 6px; white-space: nowrap; }
.side .buscar kbd { margin-left: auto; }
.side nav { display: flex; flex-direction: column; gap: 2px; }
.side nav a { position: relative; display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: var(--r-sm); color: var(--muted); white-space: nowrap; transition: background .15s, color .15s; }
.side nav a:hover { text-decoration: none; background: var(--panel); color: var(--text); }
.side nav a.on { background: var(--brand-soft); color: var(--text); font-weight: 600; }
.side nav a.on::before { content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--brand); }
.side nav a.on svg { color: var(--brand); }
.side nav a em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: var(--bad-soft); color: var(--bad); }
.side svg { flex: none; }
.side .pie { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; border-top: 1px solid var(--line); padding-top: 10px; }
.side .yo { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; color: var(--text); padding: 4px; border-radius: var(--r-sm); white-space: nowrap; overflow: hidden; }
.side .yo:hover { background: var(--panel); text-decoration: none; }
.side .yo small { display: block; color: var(--muted); font-size: 11px; }
.avatar { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  color: var(--brand); background: var(--brand-soft); border: 1px solid var(--brand-glow); }
.shell.corto .side .marca b, .shell.corto .side nav a span, .shell.corto .side nav a em, .shell.corto .side .buscar span, .shell.corto .side .buscar kbd,
.shell.corto .side .yo > span:last-child { display: none; }
.shell.corto .side .pie { flex-direction: column; }
.shell.corto .side .buscar { justify-content: center; }
button.icono { padding: 7px; border: 0; background: transparent; color: var(--muted); display: grid; place-items: center; }
button.icono:hover { background: var(--panel); color: var(--text); }

main { padding: 22px 28px 70px; max-width: 1560px; width: 100%; margin: 0 auto; }
main.vista { animation: entra .28s var(--ease); }
@keyframes entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
main.auth { max-width: 400px; margin-top: 12vh; }
main.auth .panel { padding: 26px; box-shadow: var(--shadow-up); }
main.auth .marca { padding: 0 0 16px; }
.cabecera { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.cabecera p { margin: -4px 0 0; }

/* ---------- Piezas básicas ---------- */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); margin-bottom: 16px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 600; background: var(--brand-soft); color: var(--brand); white-space: nowrap; }
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.bad { background: var(--bad-soft); color: var(--bad); }
.badge.gris { background: var(--panel-2); color: var(--muted); }

button, .btn { font: inherit; font-weight: 500; border: 1px solid var(--field); background: var(--panel-2); color: var(--text); padding: 7px 13px; border-radius: var(--r-sm); cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s, box-shadow .15s; }
button:hover { border-color: var(--brand); }
button:active { transform: scale(.97); }
button.primary { background: var(--fill); border-color: transparent; color: #fff; box-shadow: 0 4px 14px var(--brand-glow); }
button.primary:hover { filter: brightness(1.08); }
button.danger { color: var(--bad); }
button.danger:hover { border-color: var(--bad); background: var(--bad-soft); }
button:disabled { opacity: .45; cursor: default; transform: none; }
button.mini { padding: 2px 8px; font-size: 11px; border-radius: 99px; }
button.mini.on { background: var(--c-sugerido); color: #fff; border-color: transparent; }
input, select, textarea { font: inherit; color: var(--text); background: var(--bg-2); border: 1px solid var(--field); border-radius: var(--r-sm); padding: 7px 10px; width: 100%; transition: border-color .15s, box-shadow .15s; }
textarea { min-height: 70px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }
::placeholder { color: var(--muted); opacity: 1; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
button:focus-visible, a:focus-visible, .nodo:focus-visible, .card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.saltar { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--panel); color: var(--text); padding: 10px 14px; border-radius: var(--r-sm); border: 2px solid var(--brand); }
.saltar:focus { top: 8px; }
.error { color: var(--bad); font-weight: 500; }
.stack { display: flex; flex-direction: column; gap: 12px; }
button.full { width: 100%; padding: 11px; }
button.ghost { background: transparent; border-color: transparent; color: var(--text); }
button.ghost:hover { border-color: var(--line-2); }
button svg { vertical-align: -4px; } button:has(svg) { display: inline-flex; align-items: center; gap: 6px; }
input.link { font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; margin: 4px 0 12px; }
.acciones { gap: 8px; }
.h-marca { font-size: 16px; margin: 0; }
.h-col { font-size: 13px; margin: 0; display: flex; gap: 8px; align-items: center; }
.aviso-sel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 12px; margin-bottom: 10px; border-radius: var(--r-sm); background: var(--brand-soft); border: 1px solid var(--brand-glow); font-size: 13px; }
.badge.rosa { background: color-mix(in srgb, var(--c-sugerido) 14%, var(--panel)); color: var(--c-sugerido); }
.lista-enlaces { margin-top: 14px; }
.lista-enlaces summary { cursor: pointer; font-weight: 600; }
.lista-enlaces table { margin-top: 10px; }
.lista-enlaces select { width: auto; }
input[type=checkbox] { width: auto; accent-color: var(--brand); }
label.f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
label.f.req > span::after { content: " *"; color: var(--bad); }
label.chk { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 14px; }
.grid .wide { grid-column: 1 / -1; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin: 0 0 14px; }
legend { font-weight: 600; padding: 0 6px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.dot.c-nueva, .dot.e-nueva { background: var(--info); }
.dot.c-con_candidatos, .dot.e-con_candidatos { background: var(--brand); }
.dot.c-en_curso, .dot.e-en_curso { background: var(--warn); }
.dot.c-cerrada { background: var(--ok); }

/* ---------- Kanban ---------- */
.filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; align-items: center; }
.filtros > * { width: auto; min-width: 170px; }
.kanban { display: grid; grid-template-columns: repeat(4, minmax(250px, 1fr)); gap: 14px; align-items: start; overflow-x: auto; padding-bottom: 6px; }
.col { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); min-height: 340px; display: flex; flex-direction: column; transition: border-color .15s, background .15s, box-shadow .15s; }
.col.drop { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 3px var(--brand-soft) inset; }
.col h3 { padding: 12px 14px; margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; }
.col h3 .badge { margin-left: auto; }
.col .cards { padding: 4px 10px 12px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.hueco { flex: 1; min-height: 80px; display: grid; place-items: center; border: 1.5px dashed var(--line-2); border-radius: var(--r-sm); color: var(--muted); font-size: 12px; }
.card { position: relative; border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px 10px 14px; background: var(--panel); cursor: grab; box-shadow: var(--shadow);
  transition: transform .15s var(--ease), box-shadow .15s, border-color .15s, opacity .15s; animation: entra .25s var(--ease); }
.card::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand); }
.card:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: var(--shadow-up); }
.card:active { cursor: grabbing; }
.card.levantada { opacity: .35; transform: scale(.98); }
.card.p-crítica::before { background: var(--bad); }
.card.p-alta::before { background: var(--warn); }
.card.p-baja::before { background: var(--line-2); }
.card .t { display: block; color: var(--text); font-weight: 600; margin-bottom: 5px; line-height: 1.3; }
.card select.mover { width: auto; font-size: 12px; padding: 3px 6px; color: var(--muted); background: transparent; }
.card .m { font-size: 12px; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.card .acc { display: flex; gap: 6px; margin-top: 8px; }
.card .acc button { padding: 2px 9px; font-size: 12px; }
.opciones-cierre { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px 0 16px; }
button.grande { padding: 16px; font-size: 15px; font-weight: 600; }
button.grande.ok { color: var(--ok); } button.grande.ok:hover { background: var(--ok-soft); border-color: var(--ok); }
button.grande.bad { color: var(--bad); } button.grande.bad:hover { background: var(--bad-soft); border-color: var(--bad); }
button.grande.warn { color: var(--warn); } button.grande.warn:hover { background: var(--warn-soft); border-color: var(--warn); }

/* ---------- Mapa de vínculos ---------- */
.leyenda { list-style: none; margin: 0; padding: 0; display: flex; gap: 14px; font-size: 12px; color: var(--muted); align-items: center; flex-wrap: wrap; }
.leyenda i { display: inline-block; width: 18px; height: 3px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }
.mapa { position: relative; display: grid; grid-template-columns: minmax(260px, 1fr) minmax(140px, .7fr) minmax(280px, 1.1fr); height: calc(100vh - 190px); min-height: 460px;
  background: radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 0) 0 0 / 22px 22px, var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); user-select: none; }
.mapa.arrastrando { cursor: grabbing; }
.mapa-col { display: flex; flex-direction: column; min-height: 0; position: relative; z-index: 2; }
.mapa-col .h-col { padding: 12px 14px 8px; }
.mapa-col .lista { flex: 1; overflow-y: auto; padding: 4px 14px 16px; display: flex; flex-direction: column; gap: 9px; }
.nodo { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; box-shadow: var(--shadow); cursor: grab; touch-action: none;
  transition: opacity .2s, transform .15s var(--ease), border-color .15s, box-shadow .15s; }
.nodo:hover { border-color: var(--line-2); }
.nodo.foco { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft), var(--shadow-up); }
.nodo.diana { border-color: var(--brand); transform: scale(1.03); box-shadow: 0 0 0 4px var(--brand-glow), var(--shadow-up); }
.nodo.sugerido { border-color: var(--c-sugerido); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-sugerido) 25%, transparent); }
.nodo.tenue { opacity: .38; }
.nodo .t { font-weight: 600; font-size: 13px; line-height: 1.3; margin-bottom: 4px; }
.nodo .m { font-size: 12px; color: var(--muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 3px; }
.nodo .m .mini { margin-left: auto; }
.nodo.cand { display: flex; gap: 10px; align-items: flex-start; }
.nodo.cand .cuerpo { min-width: 0; flex: 1; }
.nodo .skills { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.nodo .skills span { font-size: 10.5px; padding: 1px 7px; border-radius: 99px; background: var(--panel-2); color: var(--muted); border: 1px solid var(--line); }
.conector { position: absolute; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--panel); border: 2px solid var(--brand); opacity: 0; transition: opacity .15s, transform .15s; }
.conector.der { right: -7px; } .conector.izq { left: -7px; }
.nodo:hover .conector, .nodo.foco .conector, .mapa.arrastrando .conector { opacity: 1; }
.nodo:hover .conector { transform: scale(1.2); }
.vacio { padding: 20px 4px; }
svg.flechas { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: visible; }
svg.flechas .linea { fill: none; stroke-width: 2.2; transition: opacity .2s, stroke-width .15s; }
svg.flechas .hit { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: pointer; }
svg.flechas .enlace:hover .linea { stroke-width: 3.5; filter: drop-shadow(0 0 6px currentColor); }
svg.flechas .enlace.tenue .linea { opacity: .12; }
svg.flechas .enlace.fuera .linea { stroke-dasharray: 2 5; opacity: .35; }
svg.flechas .enlace.nuevo .linea { stroke-dasharray: 600; animation: traza .6s var(--ease); }
svg.flechas .linea.sug { stroke-dasharray: 6 6; opacity: .85; animation: hormigas 1s linear infinite; }
svg.flechas .linea.viva { stroke-width: 2.5; stroke-dasharray: 7 6; animation: hormigas .6s linear infinite; }
@keyframes traza { from { stroke-dashoffset: 600; } to { stroke-dashoffset: 0; } }
@keyframes hormigas { to { stroke-dashoffset: -24; } }
.popover { position: fixed; z-index: 60; width: 290px; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow-up); animation: entra .15s var(--ease); }
.popover .estados { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.chip { font-size: 12px; padding: 4px 10px; border-radius: 99px; border: 1px solid var(--line-2); background: transparent; }
.chip:hover { border-color: var(--c); }
.chip.on { background: color-mix(in srgb, var(--c) 18%, var(--panel)); border: 2px solid var(--c); color: var(--text); font-weight: 600; }
.chip.on::before { content: "✓ "; }

/* ---------- Buscador rápido (Cmd/Ctrl + K) ---------- */
.paleta-bg { position: fixed; inset: 0; z-index: 70; background: rgba(5, 6, 10, .55); backdrop-filter: blur(4px); display: flex; justify-content: center; padding-top: 14vh; animation: aparece .15s; }
@keyframes aparece { from { opacity: 0; } }
.paleta { width: min(620px, calc(100% - 32px)); max-height: 60vh; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: var(--shadow-up); overflow: hidden; animation: entra .18s var(--ease); }
.paleta-in { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--muted); }
.paleta-in input { border: 0; background: transparent; font-size: 16px; padding: 4px 0; box-shadow: none; }
.paleta-lista { overflow-y: auto; padding: 6px; }
.paleta-lista a { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: var(--r-sm); color: var(--text); cursor: pointer; }
.paleta-lista a svg { color: var(--muted); flex: none; }
.paleta-lista a .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paleta-lista a .s { font-size: 12px; color: var(--muted); white-space: nowrap; }
.paleta-lista a.on { background: var(--brand-soft); text-decoration: none; }
.paleta-lista a.on svg { color: var(--brand); }
.paleta-pie { display: flex; gap: 16px; padding: 8px 16px; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); flex-wrap: wrap; }
.paleta-pie kbd { margin-right: 3px; }

/* ---------- Tablas, fichas y otros ---------- */
table.t { width: 100%; border-collapse: collapse; }
table.t th, table.t td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.t th { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
table.t tr.click td { transition: background .12s; }
table.t tr.click:hover td { background: var(--brand-soft); cursor: pointer; }
.md { line-height: 1.55; max-height: 520px; overflow: auto; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-2); }
.md h1, .md h2, .md h3 { margin-top: .8em; }
mark { background: var(--warn-soft); color: inherit; border-radius: 3px; padding: 0 2px; }
.toast { position: fixed; bottom: 22px; right: 22px; background: var(--panel-2); color: var(--text); border: 1px solid var(--line-2); border-left: 3px solid var(--ok);
  padding: 11px 16px; border-radius: 10px; z-index: 80; max-width: 420px; box-shadow: var(--shadow-up); animation: entra .2s var(--ease); }
.toast.bad { border-left-color: var(--bad); }
.modal-bg { position: fixed; inset: 0; background: rgba(5, 6, 10, .55); backdrop-filter: blur(3px); display: flex; align-items: flex-start; justify-content: center; padding: 60px 16px; z-index: 40; overflow: auto; animation: aparece .15s; }
.modal { background: var(--panel); border: 1px solid var(--line-2); border-radius: 14px; padding: 20px; width: min(760px, 100%); box-shadow: var(--shadow-up); animation: entra .2s var(--ease); }
.modal.estrecho { width: min(480px, 100%); }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 16px; flex-wrap: wrap; }
.tabs a { padding: 9px 13px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s; }
.tabs a.on { color: var(--text); border-bottom-color: var(--brand); font-weight: 600; }
.tabs a:hover { text-decoration: none; color: var(--text); }
.aviso { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.evento { font-size: 12px; padding: 5px 0; border-bottom: 1px dashed var(--line); }
.cols2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 16px; }
pre.code { background: var(--bg-2); padding: 12px; border-radius: var(--r-sm); overflow: auto; white-space: pre-wrap; font-size: 12px; border: 1px solid var(--line); }

header.movil { display: none; }
.side .mas { display: none; }

/* ---------- Móvil (iPhone 15+, Android): barra inferior con pestañas ---------- */
@media (max-width: 900px) {
  :root { --side: 0px; }
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  header.movil { display: flex; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 30; padding: calc(8px + env(safe-area-inset-top)) 12px 8px; background: var(--bg-2); border-bottom: 1px solid var(--line); }
  header.movil .logo-r { width: 28px; height: 28px; }
  header.movil .yo { display: flex; padding: 4px; }
  .shell, .shell.corto { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 30; height: auto; flex-direction: row; padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    border-right: 0; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg-2) 92%, transparent); backdrop-filter: blur(10px); }
  .side .marca, .side .pie, .side > .spacer, .side .buscar, .side nav a.extra { display: none; }
  .side nav { flex-direction: row; width: 100%; justify-content: space-around; gap: 0; }
  .side nav a, .side .mas { flex: 1; flex-direction: column; gap: 3px; padding: 6px 2px; min-height: 52px; justify-content: center; font-size: 11px; border-radius: 10px; border: 0; background: transparent; color: var(--muted); display: flex; align-items: center; }
  .side nav a span, .side .mas span { display: block !important; }
  .side nav a.on { background: var(--brand-soft); color: var(--text); }
  .side nav a.on::before { display: none; }
  .side nav a em { position: absolute; top: 2px; right: calc(50% - 22px); margin: 0; font-size: 10px; padding: 0 5px; }
  main { padding: 16px 14px 24px; }
  main.auth { margin-top: 6vh; }
  h1 { font-size: 20px; }
  .cabecera { gap: 8px; }
  .filtros > * { min-width: 0; flex: 1 1 140px; }
  .cols2 { grid-template-columns: 1fr; }
  .grid { grid-template-columns: 1fr; }
  .kanban { grid-template-columns: repeat(4, 84vw); scroll-snap-type: x mandatory; gap: 10px; margin: 0 -14px; padding: 0 14px 8px; scroll-padding: 0 14px; }
  .kanban .col { scroll-snap-align: start; min-height: 55vh; }
  .mapa { grid-template-columns: 1fr 22px 1fr; height: 64vh; min-height: 380px; }
  .mapa-col .lista { padding: 4px 8px 12px; }
  .nodo { padding: 9px; }
  .nodo .skills, .nodo.cand .avatar { display: none; }
  .leyenda { gap: 10px; }
  .opciones-cierre { grid-template-columns: 1fr; }
  .modal-bg { padding: 0; align-items: flex-end; }
  .modal { border-radius: 16px 16px 0 0; padding-bottom: calc(20px + env(safe-area-inset-bottom)); max-height: 92vh; overflow: auto; }
  .paleta-bg { padding-top: 8vh; }
  .paleta-pie { display: none; }
  .toast { left: 12px; right: 12px; bottom: calc(80px + env(safe-area-inset-bottom)); max-width: none; }
  table.t { display: block; overflow-x: auto; }
  .popover { width: calc(100vw - 16px); left: 8px !important; }
}
/* Pantallas táctiles: objetivos de 44 px y textos de 16 px en campos (evita el zoom de iOS) */
@media (pointer: coarse) {
  button, .btn, select, input:not([type=checkbox]) { min-height: 44px; }
  button.mini { min-height: 36px; padding: 4px 12px; font-size: 13px; }
  input, select, textarea { font-size: 16px; }
  input[type=checkbox] { width: 22px; height: 22px; }
  .conector { display: none; }
  .nodo { touch-action: pan-y; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

.evento a, .aviso a, .md a, p a { text-decoration: underline; text-underline-offset: 2px; }
.card .autor { margin-top: 6px; font-size: 11px; }
.cargas { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 8px; }
.carga { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-2); }