/* ERTO v6.3 — Barra de navegación y pie comunes a todo el sitio.
   Una sola barra para el panel (Blade) y para las páginas estáticas
   (intake, diagnóstico, resultados, factura, pago exitoso, soporte, legales).
   Colores literales: este archivo no depende de las variables de cada página. */

/* ── Barra ────────────────────────────────────────────────── */
/* El hueco reserva el espacio mientras está vacío; una vez pintado "desaparece"
   (display:contents) para que la barra quede fija respecto a la página y no al hueco. */
[data-erto-nav]:empty{min-height:64px;background:#042536}
[data-erto-nav]:not(:empty){display:contents}
[data-erto-nav][hidden]{display:none}
.app-barra{background:#042536;position:sticky;top:0;z-index:50;font-family:'Figtree',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;line-height:1.3}
.app-barra *{box-sizing:border-box}
.app-barra-in{max-width:1180px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;gap:24px}
.app-logo{display:flex;flex-shrink:0}
.app-logo img{height:28px;display:block}
.app-nav{display:flex;gap:2px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.app-nav::-webkit-scrollbar{display:none}
.app-nav a{color:rgba(245,239,236,.72);text-decoration:none;font-size:14px;font-weight:600;padding:8px 12px;border-radius:8px;white-space:nowrap;transition:background .15s,color .15s}
.app-nav a:hover{color:#fff;background:rgba(255,255,255,.06)}
.app-nav a.activo{color:#fff;background:rgba(77,184,170,.18)}
.app-nav a:focus-visible,.app-salir:focus-visible,.app-usuario-nombre:focus-visible,.app-logo:focus-visible{outline:2px solid #4DB8AA;outline-offset:2px}
.app-usuario{display:flex;align-items:center;gap:10px;flex-shrink:0}
.app-avatar{position:relative;width:34px;height:34px;border-radius:50%;background:#0B7268;color:#fff;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;text-decoration:none}
.app-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.app-usuario-nombre{color:rgba(245,239,236,.85);font-size:13.5px;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none;border-radius:6px}
a.app-usuario-nombre:hover,a.app-usuario-nombre.activo{color:#fff;text-decoration:underline}
.app-salir{background:none;border:1px solid rgba(255,255,255,.22);color:#fff;border-radius:8px;padding:7px 12px;font:600 12.5px 'Figtree',system-ui,sans-serif;cursor:pointer;white-space:nowrap;text-decoration:none;display:inline-block}
.app-salir:hover{background:rgba(255,255,255,.08)}
.app-entrar{background:#0B7268;border-color:#0B7268}
.app-entrar:hover{background:#095E56}

/* ── Franja del modo demostración ─────────────────────────── */
.app-demo{background:#FFF1D6;color:#5C3B00;border-bottom:1px solid #EFCB85;font:500 13.5px/1.45 'Figtree',system-ui,sans-serif}
.app-demo div{max-width:1180px;margin:0 auto;padding:9px 24px}
.app-demo b{font-weight:700}

/* ── Regreso explícito ("← Volver a …") ───────────────────── */
.volver-a{display:inline-flex;align-items:center;gap:6px;font:600 14px 'Figtree',system-ui,sans-serif;color:#0B7268;text-decoration:none;background:none;border:0;padding:6px 0;cursor:pointer}
.volver-a:hover{text-decoration:underline}
.volver-a:focus-visible{outline:2px solid #0B7268;outline-offset:2px;border-radius:4px}

/* ── Pie ──────────────────────────────────────────────────── */
.app-pie{text-align:center;font:400 12.5px/1.6 'Figtree',system-ui,sans-serif;color:#56646E;padding:20px 16px 28px}
.app-pie a{color:#56646E;text-decoration:underline;text-underline-offset:2px}
.app-pie a:hover{color:#042536}

@media (max-width:1100px){
  .app-barra-in{gap:16px}
  .app-nav a{font-size:13.5px;padding:8px 10px}
  .app-usuario-nombre{max-width:120px}
}
@media (max-width:720px){
  [data-erto-nav]:empty{min-height:98px}
  .app-barra{position:static}          /* en el teléfono la barra ocupa dos renglones: no se queda fija */
  .app-barra-in{height:auto;flex-wrap:wrap;padding:10px 16px;gap:10px 16px}
  .app-nav{order:3;flex-basis:100%;margin:0 -8px}
  .app-usuario{margin-left:auto}
  .app-usuario-nombre{display:none}
  .app-demo div{padding:9px 16px}
}
@media print{.app-barra,.app-demo,.app-pie,[data-erto-nav]{display:none}}