/* Área de pacientes (27-09-2026).
   Nathalie: «¿no sería lógico y fácil que el paciente abriera la web y viera un
   botón llamado algo así como "Área de usuario"?». Va en la cabecera, junto a
   «Pedir cita», y en el menú. Lleva a su espacio (/espacio/), donde el
   paciente entra con su correo y su contraseña.
   Donde hay sitio se lee «Área de pacientes» (desde 1700 px, y entre 801 y
   1250, cuando el menú de arriba se recoge en su botón); donde no, es un botón
   redondo con la silueta de una persona (el nombre va en su etiqueta y sale al
   pasar el ratón). En el móvil se aprietan un poco los huecos para que quepan
   los cuatro botones sin tocar el logo; por debajo de 360 px queda solo en el
   menú. */
.area-pacientes{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;flex:0 0 auto;
  min-height:52px;min-width:52px;padding:0 20px 0 16px;border-radius:999px;
  border:1px solid #08676c47;background:#ffffff5c;color:var(--pine);
  font-size:15px;font-weight:600;line-height:1;white-space:nowrap;
  transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.area-pacientes:hover{background:#08676c14;border-color:#08676c8c;transform:translateY(-1px)}
.area-pacientes svg{width:21px;height:21px;flex:0 0 auto}
@media(min-width:1251px) and (max-width:1699px),(max-width:800px){
  .area-pacientes{padding:0;width:52px}
  .area-pacientes__texto{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
/* Con el menú de arriba a la vista y poco ancho, la música se queda en su icono. */
@media(min-width:1251px) and (max-width:1340px){ .sound-label{display:none} }
@media(max-width:800px){ .area-pacientes{min-height:46px;min-width:46px;width:46px} }
/* «Pedir cita» nunca se parte en dos líneas ni se encoge (con un botón más, en el móvil lo hacía). */
.header-actions>.button{white-space:nowrap;flex-shrink:0}
@media(max-width:450px){
  .header-actions{gap:7px}
  .area-pacientes{min-height:44px;min-width:44px;width:44px}
  .area-pacientes svg{width:19px;height:19px}
}
@media(max-width:359px){ .area-pacientes{display:none} }
@media(prefers-reduced-motion:reduce){ .area-pacientes,.area-pacientes:hover{transition:none;transform:none} }