/* Pantalla Pacientes/Clientes/Socios (lista de tarjetas, buscador) y formulario de alta/edición de una persona.
   Se carga después de styles.css: reemplaza la rejilla fija de 2 columnas por una que aprovecha todo el ancho. */

/* Buscador: ancho razonable junto a su botón (no se estira a todo el panel). */
.people-search { justify-content: flex-start; }
.people-search > .ui-search { flex: 0 1 420px; min-width: 200px; }
.people-search > .ui-btn { flex: 0 0 auto; }

/* Tarjetas en rejilla: 3 columnas en escritorio ancho, 2 en pantallas medianas, 1 en celular (nunca más angostas que 300 px). */
.patient-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); margin-top: var(--sp-4); }
.patient-card { align-items: start; align-content: start; min-width: 0; }
.patient-card > div:last-child { min-width: 0; }
.patient-card h3 { overflow-wrap: anywhere; }
.patient-card p { margin-bottom: var(--sp-2); }
.patient-card .tag-row { margin-bottom: var(--sp-2); }
.patient-card .ui-btn-text { margin-inline-end: var(--sp-3); }

/* Formulario de persona: la fecha de nacimiento y su enlace para cambiar a edad aproximada. */
.person-birth .person-birth-switch { justify-self: start; margin-top: var(--sp-1); padding-inline: 0; }
.person-guardian > .ui-field-hint { margin: 0; }
.person-personal { margin-top: var(--sp-4); }