/* Punto Medig · página «Recorrido de la demo» (/demo/). Usa los tokens de /css/base.css (claro y oscuro).
   Pensada primero para el teléfono del dueño: una columna, tarjetas grandes y botones de app (≈ 40–44 px). */

body.demo { background: var(--fondo); }
.saltar { position: absolute; left: -9999px; top: 0; z-index: 50; background: var(--superficie); color: var(--azul); padding: 0.6rem 1rem; border-radius: var(--r-md); font-weight: 700; }
.saltar:focus { left: var(--gutter); top: 0.5rem; }
.demo .btn { min-height: 42px; }
.demo .btn-sm { min-height: 36px; }
.demo h2 { font-size: clamp(1.35rem, 4.6vw, 1.75rem); }
.demo h3 { font-size: var(--t-lg); }

/* Cabecera */
.demo-cab { background: var(--superficie); border-bottom: 1px solid var(--linea); padding-block: 1.25rem 1rem; }
.demo-cab .contenedor { display: grid; gap: 0.75rem; }
.demo-cab h1 { font-size: clamp(1.75rem, 7vw, 2.6rem); line-height: 1.1; margin-top: 0.25rem; }
.demo-intro { font-size: var(--t-md); color: var(--tinta-2); max-width: 62ch; }
.demo-indice { display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.25rem; scrollbar-width: thin; }
.demo-indice a {
  flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 0.85rem; border-radius: var(--r-pill);
  border: 1px solid var(--linea); background: var(--superficie-2); color: var(--tinta); font-weight: 700; font-size: var(--t-sm); text-decoration: none;
}
.demo-indice a:hover { border-color: var(--azul); }

/* Secciones */
.demo-main { display: grid; gap: 2.25rem; padding-block: 1.5rem 3rem; outline: none; }
.demo-seccion { display: grid; gap: 0.9rem; scroll-margin-top: 1rem; min-width: 0; }
.demo-seccion > p { color: var(--tinta-2); max-width: 70ch; }
.demo-grid { display: grid; gap: 0.9rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .demo-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.demo-roles { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); align-items: start; }

/* Tarjeta-enlace grande (pacientes) */
.demo-tarjeta {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.4rem 0.9rem; align-items: start; padding: 1.1rem;
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-lg); color: var(--tinta); text-decoration: none;
  box-shadow: var(--sombra-1); transition: border-color 0.15s, transform 0.1s;
}
.demo-tarjeta:hover { border-color: var(--azul); }
.demo-tarjeta:active { transform: translateY(1px); }
.demo-tarjeta-texto { display: grid; gap: 0.25rem; }
.demo-tarjeta-texto strong { font-family: var(--f-titulo); font-size: var(--t-lg); }
.demo-tarjeta-texto span { color: var(--tinta-2); font-size: var(--t-sm); }
.demo-ir { grid-column: 2; color: var(--azul); font-weight: 700; font-size: var(--t-sm); }
.demo-ir::after { content: " →"; }
.demo-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--azul-suave); color: var(--azul); }
.demo-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Qué probar */
.demo-probar { display: grid; gap: 0.3rem; }
.demo-probar .etiqueta { font-size: 0.68rem; }
.demo-probar ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.25rem; font-size: var(--t-sm); color: var(--tinta-2); }

/* Tarjetas por rol */
.demo-rol { display: grid; gap: 0.75rem; padding: 1.1rem; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-lg); box-shadow: var(--sombra-1); min-width: 0; }
.demo-rol-director { border-top: 4px solid var(--oro); }
.demo-rol-cab { display: flex; gap: 0.75rem; align-items: center; min-width: 0; }
.demo-rol-cab > div { min-width: 0; }
.demo-rol-cab .etiqueta { font-size: 0.68rem; }
.demo-rol-cab h3 { overflow-wrap: anywhere; }
.demo-rol-cab .tenue { font-size: var(--t-sm); }
.demo-rol > p { font-size: var(--t-sm); color: var(--tinta-2); }
.demo-avatar {
  width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--azul-suave); color: var(--azul); font-weight: 700; font-size: 0.9rem;
}
.demo-rol-director .demo-avatar { background: var(--oro-suave); color: var(--oro-texto); box-shadow: inset 0 0 0 1.5px var(--oro); }
.demo-vivo { display: flex; align-items: center; gap: 0.5rem; font-size: var(--t-sm); font-weight: 700; color: var(--tinta) !important; background: var(--superficie-2); border-radius: var(--r-md); padding: 0.45rem 0.7rem; }
.demo-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }
.demo-rol-acc { display: grid; gap: 0.4rem; justify-items: start; }
.demo-rol-acc .btn { width: 100%; }
.demo-enlace { font-weight: 700; font-size: var(--t-sm); padding-block: 0.35rem; }
.demo-cred { font-size: var(--t-xs); color: var(--tenue); overflow-wrap: anywhere; }
.demo-nota { font-size: var(--t-sm); color: var(--tenue) !important; }

/* Recorrido completo */
.demo-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; counter-reset: paso; }
.demo-pasos li {
  counter-increment: paso; position: relative; display: grid; gap: 0.25rem; justify-items: start;
  padding: 0.9rem 1rem 0.9rem 3.4rem; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-lg);
}
.demo-pasos li::before {
  content: counter(paso); position: absolute; left: 1rem; top: 0.95rem; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--azul); color: var(--superficie); font-family: var(--f-dato); font-size: 0.8rem;
}
.demo-pasos li > span:not(.demo-paso-quien) { font-size: var(--t-sm); color: var(--tinta-2); }
.demo-paso-quien { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--oro-texto); }
.demo-pasos .btn { margin-top: 0.3rem; }

/* Instalar */
.demo-caja { display: grid; gap: 0.6rem; align-content: start; padding: 1.1rem; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-lg); }
.demo-caja-panel { border-top: 4px solid var(--azul); }
.demo-caja > p { font-size: var(--t-sm); color: var(--tinta-2); }
.demo-caja > .btn { justify-self: start; }
.demo-pasos-inst { border-top: 1px solid var(--linea); }
.demo-pasos-inst summary { cursor: pointer; font-weight: 700; min-height: 42px; display: flex; align-items: center; font-size: var(--t-sm); }
.demo-pasos-inst ol { margin: 0 0 0.6rem; padding-left: 1.2rem; display: grid; gap: 0.3rem; font-size: var(--t-sm); color: var(--tinta-2); }

/* Reiniciar */
.demo-reiniciar { padding: 1.1rem; border: 1px dashed var(--linea); border-radius: var(--r-lg); background: var(--superficie); }
.demo-fila { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; }
.demo-estado { font-size: var(--t-sm); color: var(--tinta-2); flex: 1 1 240px; }
.demo-estado:empty { display: none; }

.demo-pie { border-top: 1px solid var(--linea); padding-block: 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0px)); font-size: var(--t-xs); color: var(--tenue); }
.demo-pasos-inst summary::-webkit-details-marker { display: none; }
.demo-pasos-inst summary::after { content: "+"; margin-left: auto; font-size: 1.2rem; color: var(--tenue); }
.demo-pasos-inst[open] summary::after { content: "−"; }
.demo-paso-acc { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.3rem; }
.demo-pasos .demo-paso-acc .btn { margin-top: 0; }

/* Médicos por especialidad */
.demo-medicos { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); align-items: start; }
.demo-medico { display: grid; gap: 0.6rem; padding: 0.9rem 1rem; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-lg); min-width: 0; }
.demo-medico h3 { font-size: var(--t-md); overflow-wrap: anywhere; }
.demo-foto { object-fit: cover; }
.demo-medico-hoy { font-size: var(--t-xs); color: var(--tinta-2); }
.demo-medico-hoy .demo-punto { display: inline-block; vertical-align: middle; margin: 0 0.35rem 2px 0; }
.demo-punto-off { background: var(--neutro); }
.demo-medico-probar { font-size: var(--t-sm); color: var(--tinta-2); }
.demo-medico-probar .etiqueta { display: block; font-size: 0.66rem; margin-bottom: 0.1rem; }
.demo-medico-acc { display: flex; flex-wrap: wrap; gap: 0.3rem 0.75rem; align-items: center; }
.demo-medico-acc .demo-cred { font-size: var(--t-xs); color: var(--tenue); overflow-wrap: anywhere; }