/* 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); }


/* Controles periódicos (invitar a volver): la línea «Próximo control» de la ficha y la frecuencia editable de cada invitación. */
.person-next-control { margin-top: var(--sp-4); }
.person-next-control-line { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.react-rule-lead { display: block; color: var(--text-muted); font-size: var(--fs-meta); }
.react-rule-actions { white-space: nowrap; text-align: end; }
.react-controls .ui-seg { margin-bottom: var(--sp-3); }
.react-schedule-row { display: flex; align-items: center; gap: var(--sp-3); }
.react-schedule-row .ui-input { flex: 0 0 6.5rem; width: 6.5rem; }
.react-schedule-row .ui-select { flex: 0 0 8rem; width: 8rem; }
.react-schedule-unit { color: var(--text-muted); }

/* Formulario de persona: nombre completo / separado, documento y dirección plegados, y la lista de apoderados. */
.person-field-switch { justify-self: start; margin-top: var(--sp-1); padding-inline: 0; }
.person-more-open { justify-self: start; }
.person-guardian-row { display: grid; gap: var(--sp-3); padding: var(--sp-3); border: var(--border-w) solid var(--border-default); border-radius: var(--r-md); }
.person-guardian-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.person-guardian-add { justify-self: start; }

/* Ficha: Apoderados y A su cargo (nombre, teléfono o edad, y la frase del vínculo). */
.person-guardians, .person-dependents { margin-top: var(--sp-4); }
.person-link-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.person-link-list > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.person-link-copy { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3); min-width: 0; }
.person-link-name { padding-inline: 0; font-weight: var(--fw-medium); }
.person-link-sentence { flex-basis: 100%; color: var(--text-muted); font-size: var(--fs-meta); }
.person-guardian-primary { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-body); cursor: pointer; }

/* Ficha: de a dos desde 1024 px (contacto | datos personales, apoderados | a su cargo). Si falta uno de la pareja, el otro ocupa todo el ancho. */
.person-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); margin-top: var(--sp-4); align-items: start; }
.person-pair > .ui-card { margin-top: 0; min-width: 0; }
@media (min-width: 1024px) {
  .person-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .person-pair > :only-child { grid-column: 1 / -1; }
}

/* Formulario de persona: botones de «agregar» secundarios con borde (8 px) y enlaces de texto sin ícono ni botón. */
.person-more-open, .person-guardian-add { justify-self: start; border-radius: var(--r-md); }
.ui-btn.person-link { height: auto; padding: 0; border-radius: 0; text-decoration: underline; text-underline-offset: 2px; font-weight: var(--fw-regular, 400); }
.ui-btn.person-link:hover:not(:disabled) { background: transparent; }
.person-guardian-title { font-size: var(--fs-body); }
.person-kinship-sentence { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.person-kinship-sentence > .ui-select { flex: 0 1 auto; width: auto; min-width: 12rem; max-width: 100%; }

/* Formulario de persona (orden adaptativo): ninguna etiqueta rompe su «(opcional)» a otra fila; «Apoderados» es un bloque aparte (son datos de OTRAS personas vinculadas);
   «Documento y dirección» es un acordeón de una sola sección con su resumen junto al título. */
.person-form .ui-q-label, .person-form .ui-field-label { white-space: nowrap; }
/* «Tipo de {persona}» (directo | con apoderado): etiqueta con su ⓘ y el selector en una sola fila compacta. */
.person-form .person-kind { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); }
.person-form .person-more { margin-top: var(--sp-1); }
.person-more-summary { color: var(--text-muted); font-weight: var(--fw-regular); font-size: var(--fs-body); }
fieldset.ui-form-group.person-guardian { padding: var(--sp-4); border: var(--border-w) solid var(--border-strong); border-radius: var(--r-lg); background: var(--surface-2); }
.person-guardian .person-guardian-row { background: var(--surface-1); }
.person-guardian-primary-wrap { display: inline-flex; align-items: center; gap: var(--sp-2); }

/* Fila «Fecha de nacimiento · Edad · Sexo» (dueño 2026-11-08): la fecha ocupa lo que sobra, la edad un ancho de número y el sexo, compacto «F | M». */
.person-form .person-birth { grid-template-columns: minmax(0, 1fr) auto auto; align-items: start; }
.person-form .person-birth #person-form-age { width: 6.5rem; } /* la columna de la edad la ensancha su etiqueta «Edad (opcional) ⓘ», no el campo */
.person-form .person-sex .ui-pills label { min-width: 2.5rem; justify-content: center; }

/* La fecha solo necesita el ancho de «dd/mm/aaaa» + el ícono del calendario (dueño 2026-11-08: no tan ancha); lo que sobra queda libre al final de la fila. */
.person-form .person-birth { grid-template-columns: auto auto auto minmax(0, 1fr); }
.person-form .person-birth #person-form-birth { width: 10.5rem; }
/* La fecha toma exactamente el ancho de su etiqueta «Fecha nacimiento (opcional)» (dueño 2026-11-08). */
.person-form .person-birth #person-form-birth { width: 100%; min-width: 0; }
/* Fila de nacimiento: más aire entre fecha, edad y sexo, y el ⓘ pegado a su «(opcional)» (dueño 2026-11-08). */
.person-form .person-birth { column-gap: var(--sp-6); }

/* Un poco más angosto ahora que la fila de nacimiento se acomodó (dueño 2026-11-08). */
.ui-dialog.is-form:has(.person-form) { width: min(100%, 620px); }

/* Títulos de sección sencillos y aire vertical parejo (dueño 2026-11-08): «Contacto», «Documento y dirección» y «Apoderados» se leen como
   separadores neutros (no verdes como las etiquetas de campo, sin ícono grande ni franja de color), y cada etiqueta respira sobre su campo. */
.person-form { row-gap: var(--sp-5); }
.person-form fieldset.ui-form-group { row-gap: var(--sp-4); padding-top: var(--sp-4); }
.person-form fieldset.ui-form-group > legend { color: var(--text-strong); font-size: var(--fs-body); font-weight: var(--fw-medium); }
.person-form fieldset.ui-form-group > legend .ui-label-icon { display: none; }
.person-form .person-more { margin-top: 0; padding-top: var(--sp-4); border-top: var(--border-w) solid var(--border-default); }
.person-form .person-more .ui-acc-item { border: 0; background: transparent; border-radius: 0; }
.person-form .person-more .ui-acc-trigger { background: transparent; padding: 0; gap: var(--sp-2); }
.person-form .person-more .ui-acc-icon { display: none; }
.person-form .person-more .ui-acc-title { color: var(--text-strong); font-size: var(--fs-body); font-weight: var(--fw-medium); }
.person-form .person-more .ui-acc-panel { padding: var(--sp-4) 0 0; border: 0; }
.person-form .person-more-body { display: grid; row-gap: var(--sp-4); }
.person-form .person-more .ui-acc-item .ui-acc-trigger,
.person-form .person-more .ui-acc-item.is-open .ui-acc-trigger,
.person-form .person-more .ui-acc-item .ui-acc-trigger:hover { background: transparent; border: 0; padding: 0; min-height: 0; }
.person-form .person-more .ui-acc-trigger:hover .ui-acc-title { text-decoration: underline; text-underline-offset: 2px; }
.person-form .person-more .ui-acc-item .ui-acc-title,
.person-form fieldset.person-guardian > legend .ui-q-label { color: var(--text-strong); font-size: var(--fs-body); font-weight: var(--fw-medium); }
.person-form .person-more .ui-acc-item .ui-acc-chevron, .person-form .person-more .ui-acc-item .ui-acc-trigger > svg { color: var(--text-muted); }
/* Teléfono y correo sin título «Contacto» (dueño 2026-11-08): van como una fila más del formulario. */
.person-form .person-contact { display: grid; row-gap: var(--sp-4); }
/* Fila «Fecha nacimiento · Edad · Sexo» a todo el ancho y alineada con las demás filas de dos columnas (dueño 2026-11-08):
   la fecha ocupa la mitad izquierda, como «Nombres» y «Teléfono»; edad y sexo se reparten la mitad derecha. */
.person-form .person-birth { grid-template-columns: calc(50% - var(--sp-3) / 2) minmax(0, 1fr) auto; column-gap: var(--sp-3); }
.person-form .person-birth #person-form-birth, .person-form .person-birth #person-form-age { width: 100%; min-width: 0; }
/* La fecha y la edad conservan su ancho propio (el de su etiqueta); la columna se alinea con las demás filas, el campo no crece (dueño 2026-11-08). */
.person-form .person-birth > .ui-field:not(.person-sex) { width: max-content; max-width: 100%; }
/* Fila «Fecha nacimiento · Edad · Sexo» (dueño 2026-11-08): cada campo con su ancho propio y el espacio REPARTIDO por igual entre los tres, de borde a borde. */
.person-form .person-birth { grid-template-columns: auto auto auto; justify-content: space-between; }
/* Paciente con apoderado más liviano (dueño 2026-11-08): con un solo apoderado no hay caja dentro de la caja; «+ Agregar otro apoderado» es un enlace pequeño. */
.person-guardian .person-guardian-row.is-single { padding: 0; border: 0; background: transparent; }
.person-form .person-guardian-add.ui-btn-text { padding-inline: 0; height: auto; }
.person-form .person-guardian-add.ui-btn-text:hover:not(:disabled) { background: transparent; text-decoration: underline; text-underline-offset: 2px; }
/* «Apoderado» con su ícono de persona (dueño 2026-11-08). */
.person-form fieldset.person-guardian > legend .ui-label-icon { display: inline-flex; color: var(--text-strong); }