/* ==========================================================================
   Finde · Editor de personas (D-18)

   Portado de finde-chatbot/css/personas.css. Los 24 tokens que usa existen
   igual en este prototipo (se verificaron uno por uno antes de copiar), así
   que el bloque viaja sin traducir nada.

   Ojo con los nombres: acá ya existe un `.person` (columna angosta de 60px:
   avatar + nombre + edad, la de los chips de "quiénes van"). Este editor usa
   `.persona`, en castellano. Que no choquen es una casualidad afortunada, no
   un plan — si alguien renombra uno de los dos, que lo haga sabiendo esto.
   ========================================================================== */

.personas { display: flex; flex-direction: column; gap: var(--space-3); }

/* D-166 · Jerson: "esta pantalla merece un rediseño" — de una línea plana con
   borde de 1px a una tarjeta con su propia sombra (--shadow-card, la misma
   que ya usan las tarjetas de plan en el resto de la app): más peso visual
   sin agregar color nuevo. */
.persona {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  border: var(--border-width) solid var(--border-subtle);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur-fast) var(--ease);
}
/* "Tú" ya no es un borde rojo de 2px (se leía como advertencia) — un anillo
   fino + fondo tibio, el mismo lenguaje que --accent-soft usa en el resto de
   la app para "esto está elegido", no "esto está mal". */
.persona--yo { background: var(--coral-50); border-color: var(--coral-100); box-shadow: 0 0 0 1px var(--coral-600) inset, var(--shadow-card); }
.persona__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.persona__nombre {
  width: 100%;
  border: none;
  background: none;
  outline: none;
  padding: 0;
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--text-title);
}
.persona__nombre::placeholder { color: var(--text-placeholder); }
/* En el onboarding tu propia fila es un dato ya dado, no un campo. */
.persona__nombre--fijo { display: block; }

/* El botón de edad muestra el valor y abre el selector. Mientras no haya
   edad se ve como un hueco por llenar, no como un dato ya puesto. */
.persona__edad {
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  border: 1px dashed var(--ink-400);
  background: none;
  font-size: var(--text-xs);
  color: var(--text-muted);
  cursor: pointer;
}
.persona__edad--puesta {
  border-style: solid;
  border-color: var(--border-subtle);
  background: var(--bg-sunken);
  color: var(--text-body);
  font-weight: var(--weight-bold);
}
.persona__quitar { flex: none; color: var(--ink-400); }
@media (hover: hover) and (pointer: fine) { .persona__quitar:hover { color: var(--text-title); } } /* D-146: sin hover en celular */
.persona__tu {
  flex: none;
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  color: var(--coral-700);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* D-91 · el avatar como botón para marcar quién eres tú (hoja de
   configuración). Es el elemento que representa a la persona y en un
   teléfono es un blanco cómodo, así que no se agrega un control más. */
.persona__soyyo {
  flex: none;
  padding: 0;
  border: none;
  background: none;
  border-radius: 50%;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease);
}
.persona__soyyo:active { transform: scale(.92); }
.persona__soyyo:focus-visible { outline: 2px solid var(--coral-600); outline-offset: 2px; }

/* Selector de edad: una fila que se desliza, sin teclado. Llega hasta 17 y
   cierra con "Adulto" — la edad exacta solo importa para los menores (es la
   que filtra por edad_min en finde-brain); de un adulto no hace falta. */
.edades {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-bottom: var(--space-2);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.edades::-webkit-scrollbar { display: none; }

/* D-93: que se sienta que hay más números. Los del lado por donde la fila
   sigue se desvanecen (no se ocultan: siguen leyéndose a medias, que es
   justamente lo que invita a deslizar). Las clases las pone y las quita
   js/personas-editor.js al desplazar, así el desvanecido del final
   desaparece cuando ya no queda nada para ese lado. */
.edades--sigue-der {
  -webkit-mask-image: linear-gradient(to right, #000 0 78%, rgba(0, 0, 0, .15) 100%);
          mask-image: linear-gradient(to right, #000 0 78%, rgba(0, 0, 0, .15) 100%);
}
.edades--sigue-izq {
  -webkit-mask-image: linear-gradient(to left, #000 0 78%, rgba(0, 0, 0, .15) 100%);
          mask-image: linear-gradient(to left, #000 0 78%, rgba(0, 0, 0, .15) 100%);
}
.edades--sigue-izq.edades--sigue-der {
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, .15) 0, #000 18%, #000 82%, rgba(0, 0, 0, .15) 100%);
          mask-image: linear-gradient(to right, rgba(0, 0, 0, .15) 0, #000 18%, #000 82%, rgba(0, 0, 0, .15) 100%);
}
.edad {
  flex: none;
  min-width: 40px;
  min-height: 40px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  border: var(--border-width) solid var(--border-subtle);
  background: var(--bg-surface);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text-body);
  scroll-snap-align: start;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.edad:active { transform: scale(.92); }
.edad--on {
  background: var(--coral-600);
  border-color: var(--coral-600);
  color: #fff;
}

/* --- D-109 · Editor por turnos ---------------------------------------------
   La familia es una lista compacta; una sola persona abierta a la vez, en una
   ficha que hace una pregunta por turno. Los roles aparecen solo al agregar. */

/* La línea compacta: tocable entera (abre la ficha). D-166: el chevron ahora
   se mueve al tacto (un gesto más, no solo un cambio de fondo) y la línea
   entra con un asentamiento corto cada vez que reaparece — al cerrar una
   ficha, o al cargar la pantalla (ver .personas--entra en perfil.html). Es
   la misma filosofía que ya usa .ficha__fila más abajo: un nodo del DOM
   recién puesto en pantalla, que se asienta en vez de aparecer de golpe. */
.persona--linea { cursor: pointer; animation: persona-asienta var(--dur-base) var(--ease) both; }
.persona--linea:active { background: var(--bg-sunken); box-shadow: none; transform: scale(.99); }
.persona--linea:active .persona__abrir { transform: rotate(-45deg) translate(1px, 1px); }
.persona--linea:focus-visible { outline: 2px solid var(--coral-600); outline-offset: 2px; }
.persona__meta { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.persona__abrir { flex: none; width: 8px; height: 8px; border-right: 1.5px solid var(--ink-400); border-bottom: 1.5px solid var(--ink-400); transform: rotate(-45deg); margin-right: 4px; transition: transform var(--dur-fast) var(--ease); }
@keyframes persona-asienta { from { opacity: 0; transform: translateY(6px); } }

/* La ficha abierta: se despliega con el mismo resorte que ya usa el resto de
   la app para lo que "se acomoda" (--spring-suave, ver tokens.css) — un
   poco de sobrepaso, nada mecánico. */
.persona--ficha {
  flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-4);
  border-color: var(--border-strong);
  animation: ficha-despliega var(--dur-slow) var(--spring-suave) both;
  transform-origin: top center;
}
@keyframes ficha-despliega { from { opacity: 0; transform: scaleY(.94) translateY(-6px); } }
.ficha__cab { display: flex; align-items: center; gap: var(--space-3); }
.ficha__quien { flex: 1; font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.ficha__fila { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-4); animation: ficha-baja var(--dur-base) var(--ease) both; }
.ficha__fila + .ficha__fila { margin-top: var(--space-2); border-top: var(--border-width) solid var(--border-subtle); }
.ficha__label { font-size: var(--text-xs); color: var(--text-muted); }
.ficha__fila--activa .ficha__label { font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--text-title); }
.ficha__valor {
  align-self: flex-start;
  padding: 4px 10px; border-radius: var(--radius-pill);
  border: var(--border-width) solid var(--border-subtle); background: var(--bg-sunken);
  font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--text-body);
  cursor: pointer; text-align: left;
}
.ficha__valor--vacio { border-style: dashed; background: none; color: var(--text-muted); font-weight: var(--weight-regular); }
.ficha__control { display: flex; flex-direction: column; gap: var(--space-3); }
.ficha__input {
  width: 100%; padding: 10px 12px; border-radius: var(--radius-md);
  border: var(--border-width) solid var(--border-strong); background: var(--bg-surface);
  font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--text-title); outline: none;
}
.ficha__input:focus { border-color: var(--coral-600); }
.ficha__input::placeholder { color: var(--text-placeholder); font-weight: var(--weight-regular); }
.ficha__siguiente {
  align-self: flex-end;
  min-height: 36px; padding: 0 14px; border-radius: var(--radius-pill);
  background: var(--coral-600); color: #fff;
  font-size: var(--text-sm); font-weight: var(--weight-bold); cursor: pointer;
}
.ficha__siguiente:active { transform: scale(.97); }
.ficha__listo { margin-top: var(--space-4); }
.ficha__omitir { align-self: flex-end; font-size: var(--text-xs); color: var(--text-muted); text-decoration: underline; cursor: pointer; background: none; border: none; padding: 2px 0; }
@keyframes ficha-baja { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Los roles: un botón en reposo, la pregunta con los chips mientras se agrega. */
.roles { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); }
.roles:empty { display: none; }
.roles__agregar {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  width: 100%; min-height: 44px; border-radius: var(--radius-lg);
  border: 1px dashed var(--ink-400); background: none;
  font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--text-body); cursor: pointer;
}
.roles__agregar:active { background: var(--bg-sunken); }
.roles__mas { font-size: var(--text-lg); line-height: 1; color: var(--coral-600); }
.roles__pregunta { font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--text-title); }
.roles__lista { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.roles .chip { cursor: pointer; }
.roles .chip:active { transform: scale(.96); }
.roles__cancelar { align-self: flex-start; font-size: var(--text-xs); color: var(--text-muted); text-decoration: underline; background: none; border: none; padding: 0; cursor: pointer; }

/* Cada persona que se suma entra con un pop: ver la familia armarse es el
   momento del paso 2 del onboarding, y ahora también el de la hoja. */
.persona--nueva { animation: persona-pop var(--dur-base) var(--ease) both; }
@keyframes persona-pop {
  from { opacity: 0; transform: scale(.9); }
  to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .persona--nueva, .ficha__fila, .persona--linea, .persona--ficha { animation: none; }
}

/* --- Necesidades (D-20) ---------------------------------------------------
   Alergias, sensibilidades y demás, por integrante. El cerebro ya las aceptaba
   (`restricciones` en guardar_familia) y las usa como restricción dura al
   armar un plan; lo que faltaba era dónde decirlas.

   Misma mecánica que la fila de edades: una fila que se desliza, un toque por
   opción, sin teclado salvo que se quiera escribir una propia. La diferencia
   es que acá se pueden marcar varias, así que la fila no se cierra al elegir.
   -------------------------------------------------------------------------- */
.persona__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
/* La píldora de necesidades puede llevar una frase entera ("sensible a ruidos
   fuertes"), así que se recorta en vez de empujar la fila a lo ancho. */
.persona__nec {
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.necesidades {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-bottom: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
}
.necesidades::-webkit-scrollbar { display: none; }

.necesidad {
  flex: none;
  min-height: 34px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  border: var(--border-width) solid var(--border-subtle);
  background: var(--bg-surface);
  font-size: var(--text-xs);
  color: var(--text-body);
  white-space: nowrap;
  cursor: pointer;
}
.necesidad:active { transform: scale(.96); }
.necesidad--on {
  background: var(--coral-50);
  border-color: var(--coral-600);
  color: var(--coral-700);
  font-weight: var(--weight-bold);
}

/* El campo abierto: el schema del cerebro acepta texto libre, y lo específico
   ("alergia al maní") sirve mucho más que una categoría. */
.necesidad-otra {
  flex: none;
  min-width: 110px;
  min-height: 34px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px dashed var(--ink-400);
  background: none;
  font-size: var(--text-xs);
  color: var(--text-body);
  outline: none;
}
.necesidad-otra::placeholder { color: var(--text-placeholder); }
.necesidad-otra:focus { border-style: solid; border-color: var(--coral-600); }