*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }

/* Aprendido de la iteración anterior: cualquier regla que fije display:flex/grid
   explícito gana sobre el display:none por defecto del navegador para [hidden],
   sin importar especificidad, porque los estilos de autor superan al user-agent
   independientemente de la especificidad calculada. Esta regla va PRIMERO y con
   !important para que ningún componente futuro pueda romperla por accidente. */
[hidden]{ display: none !important; }

body{
  font-family: var(--font);
  background: var(--gris-claro);
  color: var(--gris-oscuro);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4{ margin:0 0 4px; color: var(--gris-oscuro); font-weight:700; text-wrap: balance; }
h2{ font-size: 1.15rem; }
h3{ font-size: .98rem; }
h4{ font-size: .88rem; margin-top: 14px; }
p{ margin: 0 0 8px; max-width: 70ch; }
button{ font-family: inherit; }
input, select, textarea{ font-family: inherit; font-size: 1rem; }

:focus-visible{ outline: 2px solid var(--azul-secundario); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

#app{
  padding: 16px 16px calc(var(--bottomnav-h) + 24px);
  max-width: 640px;
  margin: 0 auto;
}

.app-header{
  position: sticky; top:0; z-index: var(--z-sticky);
  height: var(--header-h);
  background: var(--azul-principal);
  color: var(--blanco);
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 14px;
}
.app-header__brand{ display:flex; align-items:center; gap:8px; }
.app-header__titles{ display:flex; flex-direction:column; line-height:1.15; }
.app-header__name{ font-weight:700; font-size:.98rem; }
.app-header__sub{ font-size:.68rem; opacity:.85; }
.app-header__role{ display:flex; align-items:center; gap:8px; }
.icon-btn{
  background: rgba(255,255,255,.15); border:none; border-radius: 8px;
  width:32px; height:32px; display:flex; align-items:center; justify-content:center; cursor:pointer;
}

.case-progress{
  position: sticky; top: var(--header-h); z-index: var(--z-sticky);
  background: var(--blanco); border-bottom: 1px solid var(--gris-linea);
  overflow-x:auto;
}
.case-progress::after{
  content:""; position: absolute; top:0; right:0; bottom:0; width: 28px;
  background: linear-gradient(to right, transparent, var(--blanco));
  pointer-events: none;
}
.case-progress ol{
  list-style:none; display:flex; gap:0; margin:0; padding: 10px 14px; min-width: max-content;
}
.case-progress li{
  display:flex; align-items:center; gap:6px;
  font-size:.72rem; color: var(--gris-medio); white-space:nowrap; padding-right:16px;
}
.case-progress li .dot{ width:8px; height:8px; border-radius:50%; background:var(--gris-borde); flex-shrink:0; }
.case-progress li.is-done .dot{ background: var(--verde); }
.case-progress li.is-current{ color: var(--azul-principal); font-weight:700; }
.case-progress li.is-current .dot{ background: var(--azul-secundario); }

.bottom-nav{
  position: fixed; bottom:0; left:0; right:0; height: var(--bottomnav-h);
  background: var(--blanco); border-top:1px solid var(--gris-linea);
  display:flex; z-index: var(--z-sticky);
}
.bottom-nav__btn{
  flex:1; border:none; background:none; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2px; color: var(--gris-medio);
  font-size:.68rem; cursor:pointer;
}
.bottom-nav__btn:hover{ color: var(--azul-principal); }

@media (min-width: 600px){
  #app{ padding: 24px 32px calc(var(--bottomnav-h) + 24px); max-width: 720px; }
}
@media (min-width: 1024px){
  body{ font-size:16px; }
  .app-header{ padding: 0 32px; }
  .bottom-nav{ display:none; }
  #app{ max-width: 720px; padding: 32px 32px 48px; }
  .case-progress ol{ padding: 10px 32px; }
}