/* Copiloto PO — misma línea visual de ProductOwner.cl: tinta, cobre y papel. Sin fuentes externas (funciona sin conexión). */
:root {
  --tinta: #10213a;
  --tinta-2: #1d3557;
  --papel: #f5f7fa;
  --superficie: #ffffff;
  --niebla: #e3e9f1;
  --pizarra: #5a6b82;
  --cobre: #b8642e;
  --cobre-texto: #9a4f1d;
  --cobre-suave: #f6e9df;
  --bosque: #2f7d6b;
  --bosque-suave: #e2f1ec;
  --ambar-suave: #fbf1d9;
  --ambar-texto: #8a5a00;
  --alerta: #b42318;
  --alerta-suave: #fdeceb;
  --texto: #10213a;
  --f-display: "Bricolage Grotesque", "Segoe UI Variable Display", "SF Pro Display", system-ui, sans-serif;
  --f-texto: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --radio: 10px;
  --sombra: 0 1px 2px rgba(16, 33, 58, .06), 0 8px 24px -12px rgba(16, 33, 58, .18);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --papel: #0c1626;
    --superficie: #13213a;
    --niebla: #24344f;
    --pizarra: #9fb0c8;
    --texto: #e8eef7;
    --tinta-2: #c8d4e6;
    --cobre-texto: #f0b98f;
    --cobre-suave: #3a2618;
    --bosque-suave: #12352e;
    --ambar-suave: #3a2d10;
    --ambar-texto: #f3cf7a;
    --alerta-suave: #3c1714;
    --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -12px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papel); color: var(--texto); font: 16px/1.55 var(--f-texto); }
h1, h2, h3 { font-family: var(--f-display); line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 .5em; }
h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; margin-top: 1.4em; }
a { color: var(--cobre-texto); }
:focus-visible { outline: 3px solid var(--cobre); outline-offset: 2px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: -9999px; top: 8px; z-index: 10; background: var(--superficie); padding: 8px 12px; }
.saltar:focus { left: 8px; }
code, pre { font-family: var(--f-mono); font-size: .85rem; }
.ayuda code { overflow-wrap: anywhere; }
.tabla-scroll { overflow-x: auto; }
pre { background: var(--papel); border: 1px solid var(--niebla); border-radius: 6px; padding: 10px 12px; overflow-x: auto; }

/* Marco: barra lateral + contenido */
.marco { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; }
.lateral { background: var(--tinta); color: #dbe4ef; padding: 20px 16px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 20px; }
.marca { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font: 600 1.15rem var(--f-display); }
.marca b { color: #f0b98f; font-weight: 700; }
.version-app { align-self: flex-start; margin: -14px 0 0 38px; font: .72rem var(--f-mono); color: #9fb0c6; text-decoration: none; }
.version-app:hover { color: #fff; text-decoration: underline; }
.sitio-app { margin-top: -18px; }
#navegacion { display: flex; flex-direction: column; gap: 18px; flex: 1; }
.nav-proyecto select { width: 100%; background: rgba(255, 255, 255, .08); color: #fff; border: 1px solid rgba(255, 255, 255, .18); border-radius: 8px; padding: 8px 10px; font: inherit; }
.nav-proyecto option { color: var(--tinta); }
#navegacion ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
#navegacion nav a { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-radius: 8px; color: #dbe4ef; text-decoration: none; font-weight: 500; }
#navegacion nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
#navegacion nav a[aria-current="page"] { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 3px 0 0 #f0b98f; }
.nav-conteo { font: 500 .72rem var(--f-mono); padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: inherit; margin-left: 8px; }
.columna .nav-conteo { background: var(--niebla); color: var(--pizarra); }
.nav-estado { margin-top: auto; font: .75rem var(--f-mono); color: #8fa1b9; }
main { padding: 32px clamp(16px, 4vw, 48px) 64px; max-width: 1100px; width: 100%; outline: none; }

/* Recordatorio de respaldo */
.recordatorio { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; background: var(--ambar-suave); color: var(--ambar-texto); border-radius: var(--radio); padding: 12px 16px; margin: 0 0 24px; }
.recordatorio p { margin: 0; }
.recordatorio .acciones { margin: 0; }

/* Vistas */
.vista-cabecera { margin-bottom: 24px; }
.eyebrow { font: 500 .72rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cobre-texto); margin: 0 0 8px; }
.bajada { color: var(--pizarra); max-width: 44em; margin: 0; }
.panel { background: var(--superficie); border: 1px solid var(--niebla); border-radius: var(--radio); padding: 20px 22px; margin: 0 0 20px; }
.vacio { text-align: center; padding: 40px 16px; color: var(--pizarra); }
.ayuda { color: var(--pizarra); font-size: .88rem; margin: 6px 0 0; }
.etiqueta { display: block; font-weight: 600; margin-bottom: 6px; }

/* Formularios */
input[type="text"], input[type="search"], input[type="url"], input[type="password"], input[type="number"], input[type="date"], select, textarea {
  width: 100%; font: inherit; color: var(--texto); background: var(--superficie); border: 1px solid var(--niebla); border-radius: 8px; padding: 9px 11px;
}
textarea { resize: vertical; min-height: 5em; line-height: 1.5; }
#notas { min-height: 16em; font-size: 1rem; }
input:focus, select:focus, textarea:focus { border-color: var(--cobre); outline: 2px solid transparent; box-shadow: 0 0 0 3px var(--cobre-suave); }
.campo { display: grid; gap: 4px; margin: 0 0 14px; min-width: 0; }
.campo label { font-weight: 600; font-size: .9rem; }
.editor-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 14px; align-items: start; }
.editor-grilla { display: grid; grid-template-columns: 1fr 2fr 2fr; gap: 0 12px; }

/* Botones */
.btn, .btn--secundario, .btn-texto, .icono { font: 600 .92rem var(--f-texto); cursor: pointer; border-radius: 8px; }
.btn { background: var(--tinta); color: #fff; border: 1px solid var(--tinta); padding: 9px 16px; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.btn:hover { background: var(--tinta-2); }
.btn--cobre { background: var(--cobre); border-color: var(--cobre); }
.btn--cobre:hover { background: var(--cobre-texto); }
.btn--secundario { background: var(--superficie); color: var(--texto); border: 1px solid var(--niebla); padding: 9px 14px; }
.btn--secundario:hover { border-color: var(--texto); background: var(--superficie); }
.btn-texto { background: none; border: 0; color: var(--cobre-texto); text-decoration: underline; padding: 6px 4px; }
.btn-peligro { color: var(--alerta); }
button:disabled, .btn:disabled { opacity: .45; cursor: not-allowed; }
.icono { background: none; border: 1px solid transparent; width: 30px; height: 30px; color: var(--pizarra); font-size: 1rem; line-height: 1; }
.icono:hover:not(:disabled) { border-color: var(--niebla); color: var(--texto); }
.acciones-ia { display: contents; }
.acciones--compactas { margin: -6px 0 6px; gap: 4px 14px; }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
@media (prefers-color-scheme: dark) { .btn { background: #e8eef7; color: var(--tinta); border-color: #e8eef7; } .btn:hover { background: #fff; } .btn--cobre { background: var(--cobre); color: #fff; border-color: var(--cobre); } }

/* Chips, calidad e INVEST */
.chip { font: 500 .72rem var(--f-mono); padding: 2px 8px; border-radius: 999px; background: var(--niebla); color: var(--tinta-2); white-space: nowrap; }
.calidad { font: 600 .7rem var(--f-mono); letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.calidad--buena { background: var(--bosque-suave); color: var(--bosque); }
.calidad--media { background: var(--ambar-suave); color: var(--ambar-texto); }
.calidad--baja { background: var(--alerta-suave); color: var(--alerta); }
@media (prefers-color-scheme: dark) { .calidad--buena { color: #7fd1bd; } .calidad--baja { color: #ff9b91; } }
.invest { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.invest li { padding: 8px 12px 8px 34px; border-radius: 8px; font-size: .9rem; position: relative; }
.invest li::before { position: absolute; left: 12px; top: 8px; font-weight: 700; }
.invest--aviso { background: var(--ambar-suave); color: var(--ambar-texto); }
.invest--aviso::before { content: "!"; }
.invest--sugerencia { background: var(--papel); color: var(--pizarra); border: 1px dashed var(--niebla); }
.invest--sugerencia::before { content: "→"; }
.invest-ok { color: var(--bosque); font-weight: 600; font-size: .9rem; margin: 4px 0 0; }
.enunciado { font: 500 1.05rem/1.45 var(--f-display); margin: 0 0 16px; padding: 12px 14px; border-left: 3px solid var(--cobre); background: var(--papel); border-radius: 0 8px 8px 0; }
.nota-original { font-size: .82rem; color: var(--pizarra); margin: 12px 0 0; }
.nota-original span { font-family: var(--f-mono); text-transform: uppercase; font-size: .7rem; letter-spacing: .06em; }

/* Candidatas */
.candidatas { margin-top: 28px; }
.candidatas-cabecera { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.candidatas-cabecera h2 { margin: 0; }
.candidatas-cabecera .acciones { margin: 0; }
.lista-candidatas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.candidata details { background: var(--superficie); border: 1px solid var(--niebla); border-radius: var(--radio); }
.candidata summary { display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; list-style: none; }
.candidata summary::-webkit-details-marker { display: none; }
.candidata summary input { width: 18px; height: 18px; accent-color: var(--cobre); }
.candidata-titulo { font-weight: 600; flex: 1; min-width: 0; }
.candidata .editor { padding: 0 16px 16px; }

/* Backlog */
.cifras { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 0 20px; background: var(--superficie); border: 1px solid var(--niebla); border-radius: var(--radio); }
.cifra { padding: 12px 16px; }
.cifra + .cifra { border-left: 1px solid var(--niebla); }
.cifra dt { font: 500 .68rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--pizarra); }
.cifra dd { margin: 2px 0 0; font: 700 1.4rem var(--f-display); font-variant-numeric: tabular-nums; }
.barra-filtros { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.barra-filtros input { flex: 1 1 220px; width: auto; }
.barra-filtros select { flex: 0 1 220px; width: auto; }
.lista-tarjetas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tarjeta { background: var(--superficie); border: 1px solid var(--niebla); border-radius: var(--radio); transition: box-shadow .15s, border-color .15s; }
.tarjeta:hover, .tarjeta.is-abierta { border-color: var(--pizarra); }
.tarjeta.is-abierta { box-shadow: var(--sombra); }
.tarjeta.is-arrastrando { opacity: .5; }
.tarjeta.is-destino { box-shadow: 0 -3px 0 var(--cobre); }
.tarjeta[draggable="true"] .tarjeta-orden { cursor: grab; }
.tarjeta-cabecera { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 10px 8px 14px; }
.tarjeta-orden { font: 500 .78rem var(--f-mono); color: var(--pizarra); text-align: right; }
.tarjeta-abrir { background: none; border: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; padding: 4px 0; display: grid; gap: 2px; min-width: 0; }
.tarjeta-titulo { font-weight: 600; overflow-wrap: anywhere; }
.tarjeta-meta { font-size: .8rem; color: var(--pizarra); }
.tarjeta-mover { display: inline-flex; gap: 2px; }
.tarjeta-cuerpo { padding: 4px 18px 18px; border-top: 1px solid var(--niebla); }
.tarjeta-cuerpo .editor { padding-top: 16px; }

/* Pestañas y épicas */
.pestanas { display: inline-flex; gap: 4px; background: var(--niebla); padding: 4px; border-radius: 10px; margin: 0 0 18px; }
.pestana { background: none; border: 0; padding: 7px 14px; border-radius: 7px; font: 600 .9rem var(--f-texto); color: var(--pizarra); cursor: pointer; }
.pestana[aria-selected="true"] { background: var(--superficie); color: var(--texto); box-shadow: 0 1px 2px rgba(16, 33, 58, .12); }
.lista-epicas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.epica { background: var(--superficie); border: 1px solid var(--niebla); border-radius: var(--radio); padding: 14px 18px; display: grid; gap: 8px; }
.epica-cabecera { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.epica-nombre { background: none; border: 0; padding: 0; font: 600 1.05rem var(--f-display); color: var(--texto); cursor: pointer; text-align: left; }
.epica-nombre:hover:not(:disabled) { color: var(--cobre-texto); text-decoration: underline; }
.epica-nombre:disabled { cursor: default; color: var(--pizarra); }
.epica-avance { font: 700 1.1rem var(--f-display); font-variant-numeric: tabular-nums; }
.epica .tarjeta-meta { margin: 0; }

/* Estimar en equipo */
.participantes summary { cursor: pointer; font-weight: 600; }
.participantes input { margin-top: 6px; }
.criterios { margin: 0 0 18px; padding-left: 20px; color: var(--pizarra); font-size: .92rem; }
.votantes { list-style: none; margin: 0 0 6px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.votantes li { display: grid; justify-items: center; gap: 8px; padding: 14px 8px; border: 1px solid var(--niebla); border-radius: var(--radio); }
.votante-nombre { font-weight: 600; text-align: center; overflow-wrap: anywhere; }
.carta { width: 56px; height: 76px; border-radius: 10px; border: 2px solid var(--tinta); background: var(--superficie); color: var(--texto); font: 700 1.4rem var(--f-display); cursor: pointer; display: inline-grid; place-items: center; }
.carta:hover { transform: translateY(-2px); box-shadow: var(--sombra); }
.carta--boca-abajo { background: repeating-linear-gradient(45deg, var(--tinta), var(--tinta) 6px, var(--tinta-2) 6px, var(--tinta-2) 12px); color: #f0b98f; border-color: var(--tinta); }
.carta--revelada { cursor: default; border-color: var(--cobre); color: var(--cobre-texto); }
.carta--revelada:hover { transform: none; box-shadow: none; }
.carta--vacia { border-style: dashed; border-color: var(--niebla); color: var(--pizarra); }
.carta--mini { width: 36px; height: 44px; font-size: .95rem; margin: 0 3px 4px 0; border-width: 1.5px; vertical-align: middle; }
.mazo { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 14px; }
.eleccion { background: var(--papel); border-radius: var(--radio); padding: 16px 18px; }
.resultado { margin-top: 16px; padding: 14px 18px; border-radius: var(--radio); background: var(--bosque-suave); }
.resultado > p:first-child { margin: 0; font-weight: 600; }
.resultado--conversar { background: var(--ambar-suave); color: var(--ambar-texto); }
.resultado .acciones { margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .carta:hover { transform: none; } }

/* Taller: trivia */
.temas { border: 1px solid var(--niebla); border-radius: 8px; padding: 10px 14px; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.temas legend { font-weight: 600; font-size: .9rem; padding: 0 4px; }
.opcion { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.opcion input { width: 18px; height: 18px; accent-color: var(--cobre); }
.trivia-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.trivia-acciones { display: flex; gap: 8px; }
.trivia-barra { margin: 8px 0 20px; height: 10px; }
.trivia-barra span { background: var(--cobre); transition: width 1s linear; }
.trivia-pregunta { font-size: clamp(1.5rem, 3.4vw, 2.4rem); line-height: 1.2; margin: 0 0 24px; }
.trivia-opciones { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.opcion-trivia { display: flex; align-items: center; gap: 14px; padding: 20px 22px; border-radius: 12px; color: #fff; font: 600 clamp(1rem, 2vw, 1.3rem)/1.3 var(--f-texto); min-height: 84px; transition: opacity .3s, transform .3s; }
.opcion-trivia .forma { font-size: 1.6rem; line-height: 1; }
.opcion-trivia--0 { background: #c0392b; }
.opcion-trivia--1 { background: #1f5fa8; }
.opcion-trivia--2 { background: #a87200; }
.opcion-trivia--3 { background: #2f7d4b; }
.opcion-trivia.is-incorrecta { opacity: .3; }
.opcion-trivia.is-correcta { transform: scale(1.02); box-shadow: 0 0 0 4px var(--superficie), 0 0 0 7px var(--tinta); }
.trivia-pie { justify-content: space-between; }
.trivia-tiempo { font: 700 2.4rem var(--f-display); font-variant-numeric: tabular-nums; min-width: 2ch; }
.trivia-explicacion { font-size: 1.05rem; margin: 0 0 6px; }
.trivia-marcar h3 { margin-top: 12px; }
.equipos-marcar { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.ranking { list-style: none; counter-reset: rk; margin: 0; padding: 0; display: grid; gap: 6px; }
.ranking li { counter-increment: rk; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 8px; background: var(--papel); }
.ranking li::before { content: counter(rk); font: 700 1.2rem var(--f-display); color: var(--pizarra); }
.ranking li:first-child { background: var(--cobre-suave); }
.ranking li:first-child::before { content: "🏆"; }
.ranking-nombre { font-weight: 600; }
.ranking-puntos { font: 700 1.05rem var(--f-display); font-variant-numeric: tabular-nums; }
.podio h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
@media (max-width: 640px) { .trivia-opciones { grid-template-columns: 1fr; } }
:fullscreen main { max-width: none; padding: 32px 6vw; }
:fullscreen .lateral, :fullscreen .vista-cabecera, :fullscreen .pestanas { display: none; }
:fullscreen .marco { grid-template-columns: 1fr; }

/* Taller: ejercicios */
.casos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin: 0 0 18px; }
.caso { text-align: left; background: var(--superficie); border: 1px solid var(--niebla); border-radius: var(--radio); padding: 12px 14px; cursor: pointer; display: grid; gap: 4px; font: inherit; color: inherit; }
.caso:hover { border-color: var(--pizarra); }
.caso.is-activo { border-color: var(--cobre); box-shadow: inset 0 0 0 1px var(--cobre); }
.caso-nivel { font: 500 .68rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cobre-texto); }
.caso-titulo { font-weight: 600; }
.consigna { font-weight: 600; border-left: 3px solid var(--cobre); padding-left: 12px; }
.puntaje { font: 700 1.6rem var(--f-display); padding: 2px 12px; border-radius: 8px; }
.puntaje--alto { background: var(--bosque-suave); color: var(--bosque); }
.puntaje--medio { background: var(--ambar-suave); color: var(--ambar-texto); }
.puntaje--bajo { background: var(--alerta-suave); color: var(--alerta); }
.comentarios { margin: 0 0 8px; padding-left: 20px; display: grid; gap: 4px; }
.cobertura { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; color: var(--pizarra); }
.cobertura .is-cubierta { color: var(--bosque); font-weight: 600; }
.historia-evaluada { margin: 0; }
.historia-evaluada .enunciado { margin: 0; flex: 1; }

/* Retrospectiva */
.tablero-retro .columna { min-height: 260px; }
.columna-retro h2 { font-size: .8rem; }
.columna-retro--bien { border-top: 3px solid var(--bosque); }
.columna-retro--mejorar { border-top: 3px solid var(--cobre); }
.columna-retro--ideas { border-top: 3px solid #1f5fa8; }
.columna-retro textarea { min-height: 0; margin-bottom: 10px; font-size: .92rem; }
.nota-retro { cursor: default; }
.votos { display: inline-flex; align-items: center; gap: 4px; font: 600 .9rem var(--f-mono); }
.fila-accion { display: grid; grid-template-columns: minmax(0, 1fr) 180px auto; gap: 8px; margin-bottom: 12px; }
.acciones-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.is-hecha { text-decoration: line-through; color: var(--pizarra); }
.recordatorio-acciones { border-left: 3px solid var(--cobre); }
@media (max-width: 640px) { .fila-accion { grid-template-columns: 1fr; } }

/* Definition of Ready / Done */
.verificacion { margin: 12px 0 0; font-size: .9rem; }
.verificacion summary { cursor: pointer; font-weight: 600; display: inline-flex; gap: 8px; align-items: center; }
.verificacion ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.ficha .verificacion { margin: 0; font-size: .82rem; }
.chip--ok { background: var(--bosque-suave); color: var(--bosque); }
.chip--aviso { background: var(--ambar-suave); color: var(--ambar-texto); margin-left: 6px; }

/* Guía JQL */
.guia-jql { margin-top: 14px; }
.guia-jql summary { cursor: pointer; font-weight: 600; }
.guia-jql ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.guia-jql li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; }
.guia-para { grid-column: 1 / -1; font-size: .85rem; color: var(--pizarra); }
.guia-jql code { background: var(--papel); border: 1px solid var(--niebla); border-radius: 6px; padding: 6px 8px; overflow-x: auto; white-space: nowrap; }

/* Mapa de historias */
.mapa-scroll { overflow-x: auto; border: 1px solid var(--niebla); border-radius: var(--radio); background: var(--superficie); }
.mapa { border-collapse: separate; border-spacing: 0; min-width: 100%; }
.mapa th, .mapa td { border-bottom: 1px solid var(--niebla); border-right: 1px solid var(--niebla); vertical-align: top; padding: 10px; }
.mapa thead th { background: var(--tinta); color: #fff; font: 600 .9rem var(--f-display); text-align: left; min-width: 180px; position: sticky; top: 0; }
.mapa thead th:first-child { background: var(--tinta-2); min-width: 150px; }
.mapa tbody th { text-align: left; font-size: .85rem; background: var(--papel); display: table-cell; }
.mapa tbody th .tarjeta-meta { display: block; font-weight: 400; }
.mapa-fila--must th { box-shadow: inset 3px 0 0 var(--cobre); }
.mapa-fila--wont { opacity: .7; }
.mapa-celda { min-height: 60px; }
.mapa-celda.is-destino { background: var(--cobre-suave); }
.mapa-tarjeta { display: block; width: 100%; text-align: left; margin: 0 0 6px; padding: 8px 10px; border: 1px solid var(--niebla); border-left: 3px solid var(--ambar-texto); border-radius: 6px; background: var(--superficie); color: var(--texto); font: 500 .85rem var(--f-texto); cursor: grab; }
.mapa-tarjeta:hover { border-color: var(--pizarra); }
.mapa-tarjeta.is-hecha { border-left-color: var(--bosque); color: var(--pizarra); text-decoration: line-through; }

/* Compartir en Markdown */
.compartir { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; }
.compartir-md { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: .88rem; }
.compartir-etiqueta { color: var(--pizarra); }
.compartir-etiqueta::after { content: ":"; }
.tabla .compartir-md { display: flex; }

/* Revisión en dos voces */
.revision { margin: 16px 0 0; padding: 14px 16px; border: 1px solid var(--niebla); border-radius: var(--radio); background: var(--papel); }
.revision h3 { margin: 0 0 10px; }
.revision-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.revision-paso { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 2px 10px; align-items: baseline; }
.revision-paso > ul { grid-column: 2; margin: 2px 0 0; padding-left: 18px; font-size: .9rem; color: var(--pizarra); }
.revision-voz { font: 600 .72rem var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
.revision-paso--revisor .revision-voz { color: #1f5fa8; }
.revision-paso--redactor .revision-voz { color: var(--cobre-texto); }
.revision-paso--reglas .revision-voz { color: var(--ambar-texto); }
.revision-paso--pensando { color: var(--pizarra); animation: latido 1.2s ease-in-out infinite; }
@keyframes latido { 50% { opacity: .45; } }
.comparacion { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.comparacion ul { margin: 0; padding-left: 18px; font-size: .88rem; }
.comparacion > div:last-child .enunciado { border-left-color: var(--bosque); }
@media (max-width: 720px) { .comparacion { grid-template-columns: 1fr; } .revision-paso { grid-template-columns: 1fr; } .revision-paso > ul { grid-column: 1; } }
@media (prefers-reduced-motion: reduce) { .revision-paso--pensando { animation: none; } }

/* Priorizar */
.pestanas { flex-wrap: wrap; }
.pestanas--chicas { margin: 0; }
.tabla-priorizar th[scope="row"] { font: 600 .92rem var(--f-texto); text-transform: none; letter-spacing: 0; color: var(--texto); min-width: 200px; }
.tabla-priorizar select, .tabla-priorizar input { min-width: 70px; padding: 6px 8px; }
.tabla-priorizar thead th { white-space: normal; min-width: 90px; }
.puntaje-celda { font: 700 1.05rem var(--f-display); font-variant-numeric: tabular-nums; text-align: right; }
.matriz-panel { margin-top: 20px; }
.matriz { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: relative; padding: 0 0 22px 22px; }
.matriz-eje { position: absolute; font: 500 .72rem var(--f-mono); color: var(--pizarra); }
.matriz-eje--y { left: -4px; top: 0; writing-mode: vertical-rl; transform: rotate(180deg); }
.matriz-eje--x { right: 0; bottom: 0; }
.cuadrante { border-radius: var(--radio); padding: 12px 14px; min-height: 120px; border: 1px solid var(--niebla); }
.cuadrante h3 { margin: 0; display: flex; justify-content: space-between; align-items: center; font-size: .95rem; }
.cuadrante .ayuda { margin: 2px 0 8px; font-size: .8rem; }
.cuadrante ul { margin: 0; padding-left: 18px; font-size: .88rem; display: grid; gap: 2px; }
.cuadrante--rapida { background: var(--bosque-suave); }
.cuadrante--grande { background: var(--cobre-suave); }
.cuadrante--relleno { background: var(--papel); }
.cuadrante--trampa { background: var(--alerta-suave); }
@media (max-width: 640px) { .matriz { grid-template-columns: 1fr; } }

/* OKR e hipótesis */
.okr summary { cursor: pointer; display: flex; gap: 8px; align-items: center; }
.okr-titulo { font: 600 1.1rem var(--f-display); }
.okr-lista { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 12px; }
.okr-objetivo { border-left: 3px solid var(--cobre); padding: 4px 0 4px 12px; }
.okr-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.okr-objetivo > ul { list-style: none; margin: 6px 0 8px; padding: 0; display: grid; gap: 4px; }
.okr-kr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .92rem; }
.okr-kr::before { content: "→"; color: var(--pizarra); }
.fila-accion--dos { grid-template-columns: minmax(0, 1fr) auto; }
.hipotesis-campo { display: grid; gap: 2px; margin: 0 0 8px; font-size: .88rem; }
.hipotesis-campo span { color: var(--pizarra); }
.hipotesis-frase { font-style: italic; border-left: 3px solid var(--bosque); padding-left: 10px; margin: 8px 0 12px; }

/* Pronóstico */
.pronostico { border-left: 3px solid #1f5fa8; }
.pronostico h2 { margin-top: 0; }
.pronostico-linea { margin: 0; font-size: .9rem; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.pronostico-linea .eyebrow { margin: 0; }

/* Roadmap */
.roadmap textarea { min-height: 3em; }
.roadmap-columnas .columna { min-height: 200px; }
.roadmap-columnas .columna > .ayuda { margin: -4px 0 10px; font-size: .8rem; }
.roadmap-columna--ahora { border-top: 3px solid var(--cobre); }
.roadmap-columna--siguiente { border-top: 3px solid #1f5fa8; }
.roadmap-columna--despues { border-top: 3px solid var(--niebla); }
.roadmap-epica { background: var(--superficie); border: 1px solid var(--niebla); border-radius: 8px; padding: 10px 12px; display: grid; gap: 6px; }
.roadmap-epica .tarjeta-meta { margin: 0; }
.roadmap-mover { font-size: .82rem; padding: 4px 8px; }

.resultado-hipotesis { border-top: 1px dashed var(--niebla); padding-top: 10px; margin-top: 4px; }

.dependencias { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 4px; }
.dependencias li { display: flex; gap: 8px; align-items: center; }
.ficha .chip { white-space: normal; }

/* Kanban liviano */
.tablero.tablero--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cifras.cifras--5 { grid-template-columns: repeat(5, 1fr); }
.columna--review h2 { color: #1f5fa8; }
.wip-excedido { background: var(--alerta) !important; color: #fff !important; }
.ficha.is-bloqueada { border-color: var(--alerta); box-shadow: inset 3px 0 0 var(--alerta); }
.bloqueo { font-size: .8rem; color: var(--alerta); }
.ficha-bloqueo { font-size: .78rem; padding: 2px 4px; }
.aviso-bloqueos { background: var(--alerta-suave); color: var(--alerta); border-radius: var(--radio); padding: 10px 14px; margin: 0 0 14px; font-weight: 600; }
@media (max-width: 1000px) { .tablero.tablero--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cifras.cifras--5 { grid-template-columns: repeat(3, 1fr); } .cifras--5 .cifra:nth-child(4) { border-left: 0; } .cifras--5 .cifra:nth-child(n+4) { border-top: 1px solid var(--niebla); } }
@media (max-width: 640px) { .tablero.tablero--4 { grid-template-columns: 1fr; } .cifras.cifras--5 { grid-template-columns: 1fr 1fr; } .cifras--5 .cifra:nth-child(odd) { border-left: 0; } .cifras--5 .cifra:nth-child(4) { border-left: 1px solid var(--niebla); } .cifras--5 .cifra:nth-child(n+3) { border-top: 1px solid var(--niebla); } }

.clasificar { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 12px; }
.clasificar li { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 4px 12px; align-items: center; }
.clasificar li > p { grid-column: 1 / -1; margin: 0; font-size: .88rem; }
@media (max-width: 640px) { .clasificar li { grid-template-columns: 1fr; } }

/* Cliente */
.aviso-legal { margin-top: 24px; }
.aviso-suelto { padding: 10px 14px; border-radius: var(--radio); margin: 0 0 16px; }
.lista-hitos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.hito { border-left: 3px solid var(--niebla); }
.hito--aceptado { border-left-color: var(--bosque); }
.entregables { margin: 4px 0 0; padding-left: 20px; font-size: .92rem; }
.cambio--propuesto { border-left: 3px solid var(--ambar-texto); }
.cambio--aprobado { border-left: 3px solid var(--bosque); }
.cambio--rechazado { opacity: .7; }

/* Sprint */
.capacidad { margin: 4px 0 14px; }
.capacidad p { margin: 6px 0 0; font-size: .88rem; color: var(--pizarra); }
.capacidad-barra { height: 8px; border-radius: 999px; background: var(--niebla); overflow: hidden; }
.capacidad-barra span { display: block; height: 100%; background: var(--bosque); border-radius: inherit; }
.is-sobrecarga .capacidad-barra span { background: var(--alerta); }
.is-sobrecarga p { color: var(--alerta); }
.lista-elegir { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lista-elegir label { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 6px; border-radius: 6px; cursor: pointer; }
.lista-elegir label:hover { background: var(--papel); }
.lista-elegir input { width: 18px; height: 18px; accent-color: var(--cobre); }
.tablero { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0 0 20px; }
.columna { background: var(--papel); border: 1px solid var(--niebla); border-radius: var(--radio); padding: 12px; min-height: 180px; }
.columna.is-destino { border-color: var(--cobre); background: var(--cobre-suave); }
.columna h2 { font: 600 .78rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--pizarra); display: flex; justify-content: space-between; align-items: center; margin: 0 0 10px; }
.columna--done h2 { color: var(--bosque); }
.columna ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ficha { background: var(--superficie); border: 1px solid var(--niebla); border-radius: 8px; padding: 10px 12px; display: grid; gap: 6px; cursor: grab; }
.columna--done .ficha .ficha-titulo { color: var(--pizarra); text-decoration: line-through; text-decoration-color: var(--niebla); }
.ficha-titulo { font-weight: 600; font-size: .92rem; overflow-wrap: anywhere; }
.ficha-pie { display: flex; justify-content: space-between; align-items: center; }
.figura-burndown { margin: 0; }
.burndown { width: 100%; height: auto; display: block; }
.burndown .eje { stroke: var(--niebla); }
.burndown .etiqueta-eje { font: 11px var(--f-mono); fill: var(--pizarra); }
.burndown .linea-ideal { fill: none; stroke: var(--pizarra); stroke-width: 1.5; stroke-dasharray: 5 5; }
.burndown .linea-real { fill: none; stroke: var(--cobre); stroke-width: 2.5; stroke-linejoin: round; }
.burndown .punto-real { fill: var(--cobre); }
.leyenda { display: flex; gap: 18px; font-size: .82rem; color: var(--pizarra); margin-top: 6px; }
.leyenda span::before { content: ""; display: inline-block; width: 18px; height: 0; border-top: 2.5px solid var(--cobre); vertical-align: middle; margin-right: 6px; }
.leyenda .leyenda-ideal::before { border-top: 1.5px dashed var(--pizarra); }
.tabla-alternativa { margin-top: 8px; font-size: .88rem; }
.tabla, .tabla-alternativa table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabla th, .tabla td, .tabla-alternativa th, .tabla-alternativa td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--niebla); }
.tabla th { font: 500 .7rem var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--pizarra); }

/* Generar el ancho de barras sin estilos en línea */
.relleno-0 { width: 0; } .relleno-5 { width: 5%; } .relleno-10 { width: 10%; } .relleno-15 { width: 15%; } .relleno-20 { width: 20%; }
.relleno-25 { width: 25%; } .relleno-30 { width: 30%; } .relleno-35 { width: 35%; } .relleno-40 { width: 40%; } .relleno-45 { width: 45%; }
.relleno-50 { width: 50%; } .relleno-55 { width: 55%; } .relleno-60 { width: 60%; } .relleno-65 { width: 65%; } .relleno-70 { width: 70%; }
.relleno-75 { width: 75%; } .relleno-80 { width: 80%; } .relleno-85 { width: 85%; } .relleno-90 { width: 90%; } .relleno-95 { width: 95%; } .relleno-100 { width: 100%; }

.nota-tecnica { background: var(--papel); border-radius: 8px; padding: 12px 14px; font-size: .9rem; }
.nota-tecnica p { margin: 0 0 6px; }

/* Avisos flotantes */
.avisos { position: fixed; right: 16px; bottom: 16px; display: grid; gap: 8px; z-index: 20; max-width: min(420px, calc(100vw - 32px)); }
.aviso { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0; padding: 12px 16px; border-radius: 8px; background: var(--tinta); color: #fff; box-shadow: var(--sombra); font-size: .92rem; transition: opacity .4s, transform .4s; }
.aviso--error { background: var(--alerta); }
.aviso-accion { background: none; border: 1px solid rgba(255, 255, 255, .5); color: #fff; border-radius: 6px; padding: 4px 10px; font: 600 .85rem var(--f-texto); cursor: pointer; white-space: nowrap; }
.aviso-accion:hover { background: rgba(255, 255, 255, .12); }
.aviso.is-saliendo { opacity: 0; transform: translateY(8px); }

/* Celular: barra superior y navegación horizontal */
@media (max-width: 820px) {
  .marco { grid-template-columns: 1fr; }
  .lateral { position: sticky; top: 0; height: auto; z-index: 5; padding: 12px 16px; gap: 10px; }
  .version-app { margin-top: -8px; }
  .sitio-app { margin-top: -10px; }
  #navegacion { gap: 10px; }
  .marco > *, #navegacion, #navegacion nav { min-width: 0; }
  #navegacion ul { grid-auto-flow: column; justify-content: start; overflow-x: auto; scrollbar-width: thin; }
  #navegacion nav a { white-space: nowrap; }
  #navegacion nav a { padding: 7px 10px; }
  #navegacion nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 #f0b98f; }
  .nav-estado { display: none; }
  main { padding-top: 24px; }
  .cifras { grid-template-columns: 1fr 1fr; }
  .cifra:nth-child(3) { border-left: 0; }
  .cifra:nth-child(n+3) { border-top: 1px solid var(--niebla); }
  .editor-grilla { grid-template-columns: 1fr; }
  .tablero { grid-template-columns: 1fr; }
  .tarjeta-cabecera { grid-template-columns: minmax(0, 1fr) auto; }
  .tarjeta-orden { display: none; }
  .tarjeta-mover { grid-column: 2; grid-row: 1; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }
@media print { .lateral, .acciones, .barra-filtros, .avisos { display: none; } .marco { display: block; } }

/* Acerca de */
.privacidad { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 4px; }

/* Inicio (bienvenida) */
.bienvenida { display: grid; gap: 28px; }
.bienvenida-hero h1 { font-size: clamp(1.7rem, 4vw, 2.6rem); line-height: 1.12; max-width: 18em; margin: 0 0 12px; }
.bienvenida h2 { font-size: 1.15rem; margin: 0 0 12px; }
.caminos { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.camino { display: flex; flex-direction: column; gap: 8px; padding: 18px; border: 1px solid var(--niebla); border-radius: var(--radio); background: var(--superficie); }
.camino:first-child { border-color: var(--cobre); }
.camino h3 { margin: 0; font-size: 1.02rem; }
.camino p { margin: 0; color: var(--pizarra); flex: 1; }
.camino .btn, .camino .btn--secundario { align-self: flex-start; }
.bienvenida-columnas { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.bienvenida-columnas > .panel { margin: 0; }
.lista-check, .lista-no { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.lista-check li::before { content: '✓ '; color: var(--cobre-texto); font-weight: 700; }
.lista-no li::before { content: '✕ '; color: var(--pizarra); font-weight: 700; }
.invitacion { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.invitacion--comunidad { border-left: 4px solid var(--cobre); }

/* Ayudas: cajas informativas, recorrido y ejemplo */
.caja-info { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; border: 1px dashed var(--niebla); border-radius: var(--radio); padding: 10px 14px; margin: 0 0 20px; color: var(--pizarra); }
.caja-info strong { color: var(--texto); display: block; margin-bottom: 2px; }
.recorrido { border: 2px solid var(--cobre); border-radius: var(--radio); padding: 14px 18px; margin: 0 0 20px; background: var(--superficie); }
.recorrido p { margin: 0 0 8px; }
.recorrido .acciones { margin: 0; }
.aviso-ejemplo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; background: var(--ambar-suave); color: var(--ambar-texto); border-radius: var(--radio); padding: 12px 16px; margin: 0 0 20px; }
.aviso-ejemplo p { margin: 0; max-width: 60em; }
.aviso-ejemplo .acciones { margin: 0; }
.nav-comentar a { color: var(--cobre-texto); }

/* Comentar */
.encuesta { display: grid; gap: 18px; }
.encuesta fieldset { border: 0; padding: 0; margin: 0; }
.encuesta legend { font-weight: 600; margin-bottom: 8px; }
.opciones { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.bloque-texto { white-space: pre-wrap; font: .85rem var(--f-mono); background: var(--superficie); padding: 12px; border-radius: 8px; }

/* Ficha del sprint en diálogo */
button.ficha-titulo { background: none; border: 0; padding: 0; text-align: left; color: inherit; font-family: inherit; cursor: pointer; }
button.ficha-titulo:hover { text-decoration: underline; }
.dialogo-ficha { width: min(680px, calc(100vw - 32px)); max-height: calc(100vh - 48px); border: 1px solid var(--niebla); border-radius: var(--radio); padding: 20px 22px; background: var(--fondo, var(--superficie)); color: var(--texto); }
.dialogo-ficha::backdrop { background: rgb(10 20 35 / .55); }
.dialogo-cabecera { display: flex; justify-content: space-between; align-items: center; }
.ficha:focus-visible { outline: 2px solid var(--cobre); outline-offset: 2px; }
.tarjeta, .ficha { transition: box-shadow .15s; }
.ficha:hover { box-shadow: 0 2px 8px rgb(10 20 35 / .12); }

/* Diálogos propios (confirmar / pedir texto) */
.dialogo-pregunta { width: min(440px, calc(100vw - 32px)); border: 1px solid var(--niebla); border-radius: var(--radio); padding: 20px 22px; background: var(--superficie); color: var(--texto); }
.dialogo-pregunta::backdrop, .dialogo-ficha::backdrop { background: rgb(10 20 35 / .55); }
.dialogo-pregunta-texto { font-weight: 600; margin: 0 0 8px; }
.dialogo-pregunta input { width: 100%; margin: 8px 0 4px; }
.dialogo-pregunta .acciones { margin: 12px 0 0; }
.btn-peligro-solido { background: #b3261e; border-color: #b3261e; color: #fff; }
.btn-peligro-solido:hover { background: #8c1d17; }

/* Buscador y atajos */
.nav-buscar { display: flex; justify-content: space-between; align-items: center; width: 100%; margin: 0 0 12px; padding: 8px 12px; border-radius: 8px; border: 1px solid rgb(255 255 255 / .15); background: rgb(255 255 255 / .06); color: inherit; font: inherit; cursor: pointer; opacity: .85; }
.nav-buscar:hover { opacity: 1; }
kbd { font: .75rem var(--f-mono); border: 1px solid currentColor; border-radius: 4px; padding: 1px 5px; opacity: .7; }
.buscador { width: min(560px, calc(100vw - 32px)); margin-top: 12vh; border: 1px solid var(--niebla); border-radius: var(--radio); padding: 12px; background: var(--superficie); color: var(--texto); }
.buscador::backdrop { background: rgb(10 20 35 / .55); }
.buscador input { width: 100%; font-size: 1.05rem; }
.buscador-lista { list-style: none; margin: 8px 0 0; padding: 0; max-height: 50vh; overflow: auto; }
.buscador-lista li { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.buscador-lista li.is-elegido { background: var(--cobre-suave); }
.buscador-vacio { color: var(--pizarra); cursor: default; }
.buscador-pie { margin: 8px 4px 0; }
.atajos { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 8px 0; }
.atajos dd { margin: 0; }

.vacio-titulo { font-weight: 600; font-size: 1.05rem; margin: 0 0 4px; }
.vacio .acciones { justify-content: center; }

/* Backlog: edición rápida y selección múltiple */
@media (min-width: 821px) { .tarjeta-cabecera { grid-template-columns: auto minmax(0, 1fr) auto auto auto; } label.tarjeta-orden { display: inline-flex; } }
label.tarjeta-orden { align-items: center; gap: 6px; cursor: pointer; }
label.tarjeta-orden input { width: 16px; height: 16px; accent-color: var(--cobre); }
.tarjeta-rapido { display: inline-flex; gap: 4px; }
.tarjeta-rapido select { font-size: .8rem; padding: 3px 4px; max-width: 9.5em; }
.barra-seleccion { position: sticky; top: 8px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px; margin: 0 0 12px; border: 2px solid var(--cobre); border-radius: var(--radio); background: var(--superficie); }
@media (max-width: 820px) { .tarjeta-rapido { display: none; } }

/* Tablero: filtros y mover desde la ficha */
.filtros-tablero { margin: 0 0 12px; align-items: center; }
.mover-a { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--niebla); }

/* Avance del sprint en el menú */
#navegacion nav a { position: relative; }
.nav-avance { position: absolute; left: 12px; right: 12px; bottom: 3px; height: 3px; border-radius: 2px; background: rgb(255 255 255 / .12); overflow: hidden; }
.nav-avance > span { display: block; height: 100%; background: #f0b98f; }
.nav-avance-0 { width: 0%; } .nav-avance-1 { width: 10%; } .nav-avance-2 { width: 20%; } .nav-avance-3 { width: 30%; } .nav-avance-4 { width: 40%; } .nav-avance-5 { width: 50%; } .nav-avance-6 { width: 60%; } .nav-avance-7 { width: 70%; } .nav-avance-8 { width: 80%; } .nav-avance-9 { width: 90%; } .nav-avance-10 { width: 100%; } 

/* Barra inferior en celular */
#barra-inferior { display: none; }
@media (max-width: 640px) {
  #barra-inferior { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--tinta); border-top: 1px solid rgb(255 255 255 / .1); padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); }
  #barra-inferior a, #barra-inferior button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; color: #dbe4ef; text-decoration: none; font: 500 .7rem var(--f-texto); background: none; border: 0; border-radius: 8px; cursor: pointer; }
  #barra-inferior [aria-current="page"] { color: #fff; background: rgb(255 255 255 / .1); }
  .barra-icono { font-size: 1.15rem; line-height: 1; }
  body { padding-bottom: 64px; }
  .nav-buscar { display: none; }
}