/* Portal de Avance de Proyectos - Mide Ingeniería */
:root{
  --bg:#F4F6F8; --surface:#FFFFFF; --surface-2:#EDF1F5; --surface-3:#E4EAF0;
  --ink:#12171E; --ink-2:#57626F; --ink-3:#87919F;
  --line:#DCE2EA; --line-strong:#C2CBD6;
  --accent:#0E5273; --accent-ink:#0E5273; --accent-soft:#E1EEF6; --accent-on:#FFFFFF;
  --rojo:#C93A3A; --rojo-soft:#FAE7E7; --rojo-line:#EEC3C3;
  --ambar:#B67C09; --ambar-soft:#FBF0D8; --ambar-line:#EBD5A2;
  --verde:#17875A; --verde-soft:#E0F1E9; --verde-line:#B6DDCB;
  --shadow:0 1px 2px rgba(18,23,30,.06), 0 8px 24px -14px rgba(18,23,30,.28);
  --r:10px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0E1218; --surface:#161C24; --surface-2:#1E2630; --surface-3:#26303C;
    --ink:#E9EDF3; --ink-2:#9BA7B6; --ink-3:#6D7889;
    --line:#252E3A; --line-strong:#38434F;
    --accent:#5CB4DB; --accent-ink:#8ACCEB; --accent-soft:#15303E; --accent-on:#08161E;
    --rojo:#E97070; --rojo-soft:#2E1A1C; --rojo-line:#4E2A2C;
    --ambar:#E0A63C; --ambar-soft:#2C2416; --ambar-line:#4C3D1D;
    --verde:#45C08D; --verde-soft:#132A22; --verde-line:#22483A;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -16px rgba(0,0,0,.8);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0E1218; --surface:#161C24; --surface-2:#1E2630; --surface-3:#26303C;
  --ink:#E9EDF3; --ink-2:#9BA7B6; --ink-3:#6D7889;
  --line:#252E3A; --line-strong:#38434F;
  --accent:#5CB4DB; --accent-ink:#8ACCEB; --accent-soft:#15303E; --accent-on:#08161E;
  --rojo:#E97070; --rojo-soft:#2E1A1C; --rojo-line:#4E2A2C;
  --ambar:#E0A63C; --ambar-soft:#2C2416; --ambar-line:#4C3D1D;
  --verde:#45C08D; --verde-soft:#132A22; --verde-line:#22483A;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -16px rgba(0,0,0,.8);
  color-scheme:dark;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:"Archivo","Archivo Narrow","Segoe UI",system-ui,sans-serif; margin:0; text-wrap:balance; letter-spacing:-.012em}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
.mono{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-variant-numeric:tabular-nums}
.eyebrow{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3)}

/* ---------- shell ---------- */
.topbar{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:12px 20px; background:var(--surface); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:30;
}
.brand{display:flex; align-items:center; gap:13px; margin-right:auto}
.brand h1{font-size:17px; font-weight:700; padding-left:13px; border-left:1px solid var(--line-strong)}
.brand .logo{
  display:block; height:30px; width:auto; border-radius:5px;
  background:#FFFFFF; padding:3px 5px;
}
.whoami{display:flex; align-items:center; gap:8px}
.whoami label{font-size:11px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.08em; font-family:"IBM Plex Mono",monospace}

.layout{display:grid; grid-template-columns:262px minmax(0,1fr); gap:0; min-height:calc(100vh - 58px)}
.rail{
  border-right:1px solid var(--line); background:var(--surface);
  padding:16px 12px 40px; display:flex; flex-direction:column; gap:6px;
}
.rail-head{display:flex; align-items:center; justify-content:space-between; padding:0 6px 6px}
.main{padding:22px 26px 80px; min-width:0}

/* ---------- controls ---------- */
.btn{
  display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line-strong);
  background:var(--surface); color:var(--ink); padding:6px 11px; border-radius:8px;
  cursor:pointer; font-size:13px; font-weight:500; transition:background .13s, border-color .13s;
}
.btn:hover{background:var(--surface-2); border-color:var(--ink-3)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn-pri{background:var(--accent); border-color:var(--accent); color:var(--accent-on)}
.btn-pri:hover{background:var(--accent); border-color:var(--accent); filter:brightness(1.1)}
.btn-sm{padding:3px 8px; font-size:12px; border-radius:7px}
.btn-ghost{border-color:transparent; background:transparent; color:var(--ink-2)}
.btn-ghost:hover{background:var(--surface-2); border-color:var(--line)}
.inp{
  background:var(--surface); border:1px solid var(--line-strong); border-radius:8px;
  padding:6px 9px; font-size:13px; min-width:0;
}
.inp::placeholder{color:var(--ink-3)}
select.inp{cursor:pointer}

/* ---------- project rail items ---------- */
.proj{
  width:100%; text-align:left; border:1px solid transparent; background:transparent;
  border-radius:var(--r); padding:9px 10px; cursor:pointer; display:grid; gap:7px;
}
.proj:hover{background:var(--surface-2)}
.proj[aria-current="true"]{background:var(--accent-soft); border-color:var(--accent-soft)}
.proj-name{font-family:"Archivo",sans-serif; font-weight:600; font-size:13.5px; line-height:1.25}
.proj[aria-current="true"] .proj-name{color:var(--accent-ink)}
.proj-meta{display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:11px; color:var(--ink-3)}

/* ---------- segmented status bar ---------- */
.bar{display:flex; height:8px; border-radius:99px; overflow:hidden; background:var(--surface-3)}
.bar.thin{height:5px}
.bar span{display:block; transition:width .3s ease}
.seg-r{background:var(--rojo)} .seg-a{background:var(--ambar)} .seg-v{background:var(--verde)}

/* ---------- project header ---------- */
.phead{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:18px 20px; box-shadow:var(--shadow); margin-bottom:18px;
}
.phead-top{display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap}
.phead h2{font-size:24px; font-weight:700; letter-spacing:-.02em}
.phead-actions{margin-left:auto; display:flex; gap:6px; flex-wrap:wrap}
.pct{font-family:"Archivo",sans-serif; font-size:30px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums}
.progress-row{display:flex; align-items:center; gap:16px; margin-top:16px; flex-wrap:wrap}
.progress-row .bar{flex:1 1 260px}

.stats{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px}
.stat{
  display:flex; align-items:center; gap:8px; border:1px solid var(--line);
  background:var(--surface-2); border-radius:9px; padding:6px 11px;
}
.stat b{font-family:"IBM Plex Mono",monospace; font-size:15px; font-variant-numeric:tabular-nums}
.stat span{font-size:11.5px; color:var(--ink-2)}
.stat.s-r{background:var(--rojo-soft); border-color:var(--rojo-line)} .stat.s-r b{color:var(--rojo)}
.stat.s-a{background:var(--ambar-soft); border-color:var(--ambar-line)} .stat.s-a b{color:var(--ambar)}
.stat.s-v{background:var(--verde-soft); border-color:var(--verde-line)} .stat.s-v b{color:var(--verde)}

/* ---------- toolbar ---------- */
.toolbar{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:12px}
.toolbar .grow{flex:1 1 180px}

/* ---------- task list ---------- */
.tasks{display:flex; flex-direction:column; gap:9px}
.task{
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow); overflow:hidden;
}
.task.is-open{border-color:var(--line-strong)}
.row{display:grid; grid-template-columns:auto minmax(190px,1fr) auto; gap:12px; align-items:center; padding:11px 13px}
.row.sub{padding:8px 13px 8px 40px; border-top:1px solid var(--line); background:var(--surface-2)}
.twist{
  width:22px; height:22px; border-radius:6px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink-2); cursor:pointer; display:grid; place-items:center;
  font-size:10px; line-height:1; padding:0; transition:transform .16s ease;
}
.twist[aria-expanded="true"]{transform:rotate(90deg); color:var(--accent-ink); border-color:var(--accent-soft); background:var(--accent-soft)}
.twist.hollow{opacity:.32; cursor:default}
.title-cell{min-width:0; display:flex; flex-direction:column; gap:3px}
.title-line{display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0}
.tname{
  font-family:"Archivo",sans-serif; font-weight:600; font-size:14.5px; letter-spacing:-.008em;
  background:none; border:none; padding:2px 4px; margin:-2px -4px; border-radius:6px;
  cursor:text; text-align:left; min-width:0; overflow-wrap:anywhere;
}
.row.sub .tname{font-family:"IBM Plex Sans",sans-serif; font-weight:500; font-size:13.5px}
.tname:hover{background:var(--surface-3)}
.tname.done{color:var(--ink-3); text-decoration:line-through; text-decoration-color:var(--verde); text-decoration-thickness:1.5px}
.subline{display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-size:11.5px; color:var(--ink-3)}
.ctrl-cell{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end}

/* owner + date chips */
.chip{
  display:inline-flex; align-items:center; gap:5px; border:1px solid var(--line);
  background:var(--surface); border-radius:99px; padding:3px 9px 3px 4px;
  font-size:12px; cursor:pointer; max-width:190px;
}
.chip:hover{border-color:var(--ink-3)}
.chip .ini{
  width:19px; height:19px; border-radius:99px; display:grid; place-items:center; flex:none;
  font-family:"IBM Plex Mono",monospace; font-size:9.5px; font-weight:500; letter-spacing:.02em;
  background:var(--accent-soft); color:var(--accent-ink);
}
.chip .nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.chip.vacio{color:var(--ink-3); border-style:dashed; padding-left:9px}
.chip.vacio .ini{display:none}
.chip.fecha{padding:3px 9px; font-family:"IBM Plex Mono",monospace; font-size:11.5px; font-variant-numeric:tabular-nums}
.chip.fecha.atrasada{background:var(--rojo-soft); border-color:var(--rojo-line); color:var(--rojo); font-weight:500}
.chip.fecha.hoy{background:var(--ambar-soft); border-color:var(--ambar-line); color:var(--ambar); font-weight:500}

/* semaphore */
.sem{display:inline-flex; gap:3px; padding:2px; background:var(--surface-2); border:1px solid var(--line); border-radius:99px}
.sem button{
  width:24px; height:24px; border-radius:99px; border:1px solid transparent; background:transparent;
  cursor:pointer; display:grid; place-items:center; padding:0;
}
.sem button i{width:11px; height:11px; border-radius:99px; display:block; background:var(--line-strong); transition:background .15s, box-shadow .15s}
.sem button:hover i{background:var(--ink-3)}
.sem button[aria-pressed="true"]{border-color:var(--line-strong); background:var(--surface)}
.sem button[data-e="porhacer"][aria-pressed="true"] i{background:var(--rojo); box-shadow:0 0 0 3px var(--rojo-soft)}
.sem button[data-e="proceso"][aria-pressed="true"] i{background:var(--ambar); box-shadow:0 0 0 3px var(--ambar-soft)}
.sem button[data-e="hecha"][aria-pressed="true"] i{background:var(--verde); box-shadow:0 0 0 3px var(--verde-soft)}
.sem.auto{opacity:.9}

.estado-tag{
  font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.07em; text-transform:uppercase;
  padding:2px 7px; border-radius:99px; border:1px solid;
}
.e-porhacer{color:var(--rojo); background:var(--rojo-soft); border-color:var(--rojo-line)}
.e-proceso{color:var(--ambar); background:var(--ambar-soft); border-color:var(--ambar-line)}
.e-hecha{color:var(--verde); background:var(--verde-soft); border-color:var(--verde-line)}

/* comentarios */
.chip.coment{padding:3px 9px 3px 7px; gap:4px}
.chip.coment svg{width:13px; height:13px; flex:none; stroke:currentColor; fill:none; stroke-width:1.7; opacity:.75}
.chip.coment .n{font-family:"IBM Plex Mono",monospace; font-size:11px; font-variant-numeric:tabular-nums}
.chip.coment.tiene{border-color:var(--accent-soft); background:var(--accent-soft); color:var(--accent-ink)}
.chip.coment.tiene svg{opacity:1}

dialog#dlg, dialog#dlg2{
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink);
  border-radius:14px; padding:0; width:min(560px, calc(100vw - 32px)); max-height:min(80vh, 700px);
  box-shadow:0 24px 64px -20px rgba(0,0,0,.45); overflow:hidden;
}
dialog#dlg::backdrop, dialog#dlg2::backdrop{background:rgba(10,14,20,.55)}
.dlg-head{padding:16px 18px 13px; border-bottom:1px solid var(--line); display:flex; gap:12px; align-items:flex-start}
.dlg-head h3{font-size:16.5px; font-weight:600; letter-spacing:-.01em}
.dlg-head .cerrar{margin-left:auto; flex:none}
.hilo{padding:14px 18px; overflow-y:auto; max-height:min(46vh, 380px); display:flex; flex-direction:column; gap:13px}
.hilo .vacio-hilo{color:var(--ink-3); text-align:center; padding:22px 0; font-size:13px}
.com{display:grid; grid-template-columns:26px minmax(0,1fr); gap:10px}
.com .ini{
  width:26px; height:26px; border-radius:99px; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent-ink);
  font-family:"IBM Plex Mono",monospace; font-size:10px; font-weight:500;
}
.com-head{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.com-head b{font-size:12.5px; font-weight:600}
.com-head time{font-size:11px; color:var(--ink-3); font-family:"IBM Plex Mono",monospace}
.com-head .quitar{
  margin-left:auto; border:none; background:none; color:var(--ink-3); cursor:pointer;
  font-size:11px; padding:0 2px; text-decoration:underline; text-underline-offset:2px;
}
.com-head .quitar:hover{color:var(--rojo)}
.com p{margin:2px 0 0; font-size:13.5px; white-space:pre-wrap; overflow-wrap:anywhere}
.dlg-pie{padding:13px 18px 16px; border-top:1px solid var(--line); background:var(--surface-2); display:flex; flex-direction:column; gap:9px}
.dlg-pie textarea{
  width:100%; min-height:74px; resize:vertical; background:var(--surface);
  border:1px solid var(--line-strong); border-radius:9px; padding:9px 11px; font-size:13.5px;
}
.dlg-pie .fila{display:flex; align-items:center; gap:10px}
.dlg-pie .fila small{color:var(--ink-3); font-size:11.5px}
.dlg-pie .fila .btn-pri{margin-left:auto}

.mini{display:flex; align-items:center; gap:7px; min-width:112px}
.mini .bar{flex:1}
.mini .n{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--ink-3); font-variant-numeric:tabular-nums}

.addrow{padding:8px 13px 11px 40px; border-top:1px dashed var(--line); background:var(--surface-2); display:flex; gap:7px}
.addrow .inp{flex:1}

/* ---------- misc ---------- */
.empty{
  border:1px dashed var(--line-strong); border-radius:12px; padding:36px 24px; text-align:center;
  color:var(--ink-2); background:var(--surface);
}
.empty h3{font-size:16px; margin-bottom:6px; color:var(--ink)}
.empty p{margin:0 auto 14px; max-width:44ch; font-size:13px}
.banner{
  border:1px solid var(--ambar-line); background:var(--ambar-soft); color:var(--ambar);
  border-radius:10px; padding:10px 14px; margin-bottom:16px; font-size:13px;
}
.banner b{color:var(--ambar)}
#toast{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(12px);
  background:var(--ink); color:var(--bg); padding:9px 16px; border-radius:99px; font-size:13px;
  box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:60;
}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.skel{color:var(--ink-3); padding:40px 0; text-align:center; font-size:13px}
.leyenda{display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-top:14px; padding-top:13px; border-top:1px solid var(--line)}
.leyenda i{width:9px; height:9px; border-radius:99px; display:inline-block; margin-right:6px; vertical-align:middle}
.leyenda span{font-size:11.5px; color:var(--ink-2)}

/* Los controles bajan a su propia línea bastante antes de que se estreche el título. */
@media (max-width:1240px){
  .row{grid-template-columns:auto minmax(0,1fr); row-gap:9px}
  .ctrl-cell{grid-column:1 / -1; justify-content:flex-start; padding-left:34px}
  .row.sub .ctrl-cell{padding-left:0}
  .mini{min-width:96px}
}
@media (max-width:900px){
  .layout{grid-template-columns:1fr}
  .rail{border-right:none; border-bottom:1px solid var(--line); max-height:230px; overflow-y:auto}
  .main{padding:18px 14px 60px}
  .ctrl-cell{padding-left:0}
  .row.sub{padding-left:26px}
  .addrow{padding-left:26px}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}

/* ================= añadidos de la app con cuentas ================= */

.oculto{display:none !important}

/* ---- pantalla de ingreso ---- */
.acceso{min-height:100vh; display:grid; place-items:center; padding:24px; background:var(--bg)}
.acceso-caja{
  width:min(400px, 100%); background:var(--surface); border:1px solid var(--line);
  border-radius:16px; padding:30px 28px; box-shadow:var(--shadow);
}
.acceso-caja img{display:block; height:44px; width:auto; margin:0 auto 20px; background:#FFF; padding:5px 8px; border-radius:7px}
.acceso-caja h2{font-size:20px; text-align:center; margin-bottom:5px}
.acceso-caja .lead{text-align:center; color:var(--ink-2); font-size:13px; margin:0 0 22px}
.campo{display:flex; flex-direction:column; gap:5px; margin-bottom:14px}
.campo label{font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); font-family:"IBM Plex Mono",monospace}
.campo .inp{padding:9px 11px; font-size:14px}
.acceso-caja .btn-pri{width:100%; justify-content:center; padding:10px; font-size:14px}
.aviso{
  border-radius:9px; padding:9px 12px; font-size:13px; margin-bottom:14px;
  background:var(--rojo-soft); border:1px solid var(--rojo-line); color:var(--rojo);
}
.aviso.ok{background:var(--verde-soft); border-color:var(--verde-line); color:var(--verde)}
.aviso.info{background:var(--ambar-soft); border-color:var(--ambar-line); color:var(--ambar)}
.pie-acceso{margin-top:18px; text-align:center; font-size:11.5px; color:var(--ink-3)}

/* ---- identidad en la barra superior ---- */
.yo-chip{display:flex; align-items:center; gap:8px}
.yo-chip .ini{
  width:28px; height:28px; border-radius:99px; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent-ink);
  font-family:"IBM Plex Mono",monospace; font-size:10.5px; font-weight:500;
}
.yo-chip .quien{display:flex; flex-direction:column; line-height:1.25}
.yo-chip .quien b{font-size:12.5px; font-weight:600}
.yo-chip .quien span{font-size:10.5px; color:var(--ink-3); font-family:"IBM Plex Mono",monospace; text-transform:uppercase; letter-spacing:.06em}

/* ---- selector de encargado ---- */
select.sel-encargado{
  border:1px solid var(--line); background:var(--surface); border-radius:99px;
  padding:3px 8px; font-size:12px; max-width:180px; cursor:pointer;
}
select.sel-encargado:hover{border-color:var(--ink-3)}
select.sel-encargado.vacio{border-style:dashed; color:var(--ink-3)}

/* ---- panel de personas ---- */
.tabla{width:100%; border-collapse:collapse; font-size:13px}
.tabla th{
  text-align:left; font-family:"IBM Plex Mono",monospace; font-size:10.5px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3);
  padding:0 10px 8px; font-weight:400; white-space:nowrap;
}
.tabla td{padding:9px 10px; border-top:1px solid var(--line); vertical-align:middle}
.tabla tr.inactivo td{opacity:.5}
.tabla .acciones{display:flex; gap:5px; flex-wrap:wrap; justify-content:flex-end}
.tabla .correo{font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--ink-2); overflow-wrap:anywhere}
.rol-tag{
  font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.07em; text-transform:uppercase;
  padding:2px 7px; border-radius:99px; border:1px solid var(--line-strong); color:var(--ink-2);
}
.rol-tag.admin{color:var(--accent-ink); background:var(--accent-soft); border-color:var(--accent-soft)}
.tabla-envoltura{overflow-x:auto}

.miembros{display:flex; flex-direction:column; gap:2px; max-height:min(50vh,340px); overflow-y:auto; padding:2px}
.miembros label{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:9px; cursor:pointer;
  border:1px solid transparent;
}
.miembros label:hover{background:var(--surface-2)}
.miembros label.marcado{background:var(--accent-soft); border-color:var(--accent-soft)}
.miembros input{width:16px; height:16px; accent-color:var(--accent); flex:none}
.miembros .datos{display:flex; flex-direction:column; line-height:1.3; min-width:0}
.miembros .datos b{font-size:13px; font-weight:600}
.miembros .datos span{font-size:11px; color:var(--ink-3); font-family:"IBM Plex Mono",monospace; overflow-wrap:anywhere}

/* clave recién generada: se muestra una sola vez */
.clave-nueva{
  font-family:"IBM Plex Mono",monospace; font-size:19px; letter-spacing:.06em;
  background:var(--surface-2); border:1px dashed var(--line-strong); border-radius:10px;
  padding:13px 16px; text-align:center; user-select:all; margin:10px 0;
}

.dlg-cuerpo{padding:16px 18px; overflow-y:auto; max-height:min(60vh,460px)}
.dlg-cuerpo p{margin:0 0 12px; font-size:13.5px; color:var(--ink-2)}
.dlg-cuerpo p:last-child{margin-bottom:0}

/* la conexión se cayó */
.desconectado{
  position:fixed; left:50%; top:12px; transform:translateX(-50%); z-index:70;
  background:var(--ambar-soft); border:1px solid var(--ambar-line); color:var(--ambar);
  padding:7px 15px; border-radius:99px; font-size:12.5px; box-shadow:var(--shadow);
}

/* La barra superior se reacomoda en pantallas angostas en vez de desbordarse. */
@media (max-width:820px){
  .topbar{gap:10px 12px; padding:10px 14px}
  .brand{flex:1 1 100%; margin-right:0}
  .yo-chip{margin-right:auto}
}