@font-face {
  font-family: 'Poppins';
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fuentes/poppins-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fuentes/poppins-500.woff2') format('woff2');
}
:root {
  --violeta: #662D7D;
  --magenta: #E9287F;
  --turquesa: #5DCCC6;
  --magenta-texto: #C11E6B;
  --turquesa-texto: #0F6E56;
  --texto: #2C2C2A;
  --texto-suave: #5F5E5A;
  --linea: #EFEBF1;
  --fondo: #FFFFFF;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Poppins', system-ui, sans-serif;
  color: var(--texto);
  background: var(--fondo);
}

.ficha {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  min-height: 44px;
  border: 1px solid var(--linea);
  border-radius: 22px;
  background: var(--fondo);
  font: inherit;
  font-size: 15px;
  color: var(--texto);
  cursor: pointer;
}
.ficha.seleccionada:not(.quitable) {
  border-color: var(--violeta);
  background: #F3E9F7;
  color: var(--violeta);
}
.ficha.seleccionada.sin-asignar::before { background: var(--fondo); }
.ficha.atenuada { opacity: 0.45; }
.pastilla {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  background: #F3E9F7;
  color: var(--violeta);
}
.boton {
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--violeta);
  border-radius: 10px;
  background: var(--fondo);
  color: var(--violeta);
  font: inherit;
  cursor: pointer;
}
.boton:disabled { opacity: 0.4; cursor: default; }

.encabezado-lista {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--linea);
}
.campo { display: flex; flex-direction: column; gap: 4px; }
.campo-rotulo { font-size: 12px; color: var(--texto-suave); }
.campo input {
  min-height: 44px;
  padding: 8px 12px;
  font: inherit;
  font-size: 15px;
  color: var(--texto);
  background: var(--fondo);
  border: 1px solid var(--linea);
  border-radius: 10px;
}
.campo input[type=text] { min-width: 140px; }
.fecha-larga { margin: 0 0 10px; font-size: 15px; color: var(--violeta); }

.barra { display: flex; gap: 8px; padding: 12px 16px; }
.grupo { padding: 8px 16px 24px; }
.grupo-encabezado h2 { font-size: 18px; font-weight: 500; margin: 0 0 4px; }
.pendientes { margin: 0 0 12px; font-size: 13px; color: var(--texto-suave); }
.columna { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ficha-detalle { font-size: 12px; color: var(--magenta-texto); }

/* Los voluntarios se dibujan una sola vez, debajo de los dos grupos. */
.voluntarios { padding: 8px 16px 24px; border-top: 1px solid var(--linea); }
.voluntarios h2 { font-size: 18px; font-weight: 500; margin: 0 0 12px; }
.columna-voluntarios { flex-direction: row; flex-wrap: wrap; align-items: center; }

/* Queda pegada al borde inferior mientras se elige el voluntario. */
.barra-seleccion {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--fondo);
  border-top: 1px solid var(--linea);
  box-shadow: 0 -2px 8px rgba(44, 44, 42, 0.08);
}
.barra-seleccion-texto { font-size: 15px; color: var(--violeta); }

.navegacion { display: flex; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--linea); }
.navegacion .activa { background: var(--violeta); color: var(--fondo); }
.seccion { padding: 16px; }
.seccion h2 { font-size: 18px; font-weight: 500; }
.formulario { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
.formulario input[type=text], .formulario select {
  min-height: 44px; padding: 8px 12px; font: inherit;
  border: 1px solid var(--linea); border-radius: 10px;
}
.fila-persona {
  display: flex; gap: 12px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--linea);
}
.fila-nombre { flex: 1; }

/* Esconde el control sin sacarlo del arbol de accesibilidad. */
.oculto-visualmente {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.boton-foto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
}
.boton-foto:focus-within { outline: 2px solid var(--violeta); outline-offset: 2px; }

.opciones-imagen { display: flex; flex-wrap: wrap; gap: 16px; padding: 16px; }
.opcion { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.info-imagen { padding: 0 16px 8px; font-size: 13px; color: var(--texto-suave); }
.aviso-recorte {
  margin: 0 16px 12px; padding: 12px; border-radius: 10px;
  background: #FAEEDA; color: #633806; font-size: 14px; line-height: 1.5;
}
.aviso {
  margin: 0 16px 12px; padding: 12px; border-radius: 10px;
  background: #F1EAF5; color: var(--violeta);
  font-size: 14px; line-height: 1.5;
}
.acciones-imagen { display: flex; gap: 8px; padding: 0 16px 16px; flex-wrap: wrap; }
.lienzo-vista-previa {
  display: block; width: calc(100% - 32px); height: auto; margin: 0 16px 24px;
  border: 1px solid var(--linea); border-radius: 12px;
}

/* Pantalla de ingreso. Una sola columna angosta: el telefono es el aparato
   principal y en escritorio queda centrada en vez de estirarse. */
.ingreso { max-width: 380px; margin: 0 auto; padding: 32px 16px 48px; }
.titulo-ingreso { margin: 0 0 8px; font-size: 22px; font-weight: 500; color: var(--violeta); }
.ayuda-ingreso { margin: 0 0 20px; font-size: 14px; line-height: 1.5; color: var(--texto-suave); }
.formulario-ingreso, .formulario-token { display: flex; flex-direction: column; gap: 14px; }
.formulario-ingreso .campo input, .formulario-token .campo input { width: 100%; }
.opcion input[type=checkbox] { width: 20px; height: 20px; }
.boton-principal { background: var(--violeta); color: var(--fondo); font-size: 16px; }
.error-ingreso { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--magenta-texto); }
.error-ingreso:empty { display: none; }
.ingreso-token { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--linea); }
.ingreso-token summary {
  display: flex; align-items: center; min-height: 44px;
  font-size: 15px; color: var(--violeta); cursor: pointer;
}
.ayuda-token { margin: 4px 0 14px; font-size: 13px; line-height: 1.5; color: var(--texto-suave); }

/* Pantalla de ajustes. */
.ajustes { padding: 16px 16px 48px; }
.ajustes h2 { font-size: 20px; font-weight: 500; margin: 0 0 4px; }
.ajustes h3 { font-size: 16px; font-weight: 500; margin: 0 0 10px; }
.ayuda-ajustes { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--texto-suave); }
.error-ajustes { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--magenta-texto); }
.error-ajustes:empty { display: none; }
.campo select {
  min-height: 44px; padding: 8px 12px; font: inherit; font-size: 15px;
  color: var(--texto); background: var(--fondo);
  border: 1px solid var(--linea); border-radius: 10px;
}
.fila-acceso {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--linea);
}
.fila-acceso .fila-nombre { flex: 1 1 auto; min-width: 100px; }
.fila-usuario { font-size: 13px; color: var(--texto-suave); }
.fila-acceso select {
  min-height: 44px; padding: 8px 12px; font: inherit; font-size: 14px;
  color: var(--texto); background: var(--fondo);
  border: 1px solid var(--linea); border-radius: 10px;
}
.formulario-agregar, .formulario-rotar { display: flex; flex-direction: column; gap: 12px; }
.aviso-admin {
  margin: 0; padding: 10px 12px; border-radius: 10px;
  background: #F1EAF5; color: var(--violeta); font-size: 13px; line-height: 1.5;
}
.aviso-rotar { margin: 0 0 12px; }

/* Recuadro de la contraseña recien generada. Se ve una sola vez. */
.contrasena-generada {
  margin: 0 0 20px; padding: 14px; border-radius: 12px;
  background: #FAEEDA; border: 1px solid #E4C892; color: #633806;
}
.contrasena-generada h3 { margin: 0 0 6px; color: #633806; }
.aviso-una-vez { margin: 0 0 12px; font-size: 14px; line-height: 1.5; font-weight: 500; }
.aviso-propagacion { margin: 12px 0; font-size: 13px; line-height: 1.5; }
.contrasena-entrada {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px;
}
.contrasena-persona { font-size: 13px; flex: 1 1 100%; }
.contrasena-valor {
  flex: 1 1 auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 17px; letter-spacing: 0.5px; word-break: break-all;
  padding: 10px 12px; border-radius: 8px; background: var(--fondo); color: var(--texto);
}
.sin-ingresar { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--linea); }
.sin-ingresar .ayuda-token { margin: 8px 0 0; }

/* Con ajustes y cierre de sesion la navegacion pasa de tres botones a cinco y
   en 375 px se salia de la pantalla. Envuelve en vez de esconder: en un
   telefono nadie descubre un boton que quedo fuera de un scroll horizontal. */
.navegacion { flex-wrap: wrap; }
.navegacion .boton { font-size: 14px; padding: 10px 14px; }

/* ---------------------------------------------------------------------------
   Pantalla ancha.

   Todo lo de arriba esta pensado para el telefono, que es donde se usa esto un
   viernes a la noche, y no cambia. Lo que sigue solo entra a partir de 900 px,
   donde el problema es el opuesto: sobra ancho y el contenido queda desangelado
   contra el borde izquierdo.

   El ancho maximo es 1080 px a proposito: es el mismo ancho que la imagen que
   la aplicacion exporta.
--------------------------------------------------------------------------- */

#app {
  max-width: 1080px;
  margin-inline: auto;
}

@media (min-width: 900px) {
  /* Armar lista pasa a dos columnas: los grupos a la izquierda y la paleta de
     voluntarios fija a la derecha, para no perderla de vista al desplazarse.
     El :has() acota la regla a esta pantalla; las demas siguen en una columna. */
  .cuerpo:has(.grupos) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    column-gap: 32px;
    align-items: start;
  }

  .cuerpo:has(.grupos) .encabezado-lista,
  .cuerpo:has(.grupos) .barra,
  .cuerpo:has(.grupos) .barra-seleccion {
    grid-column: 1 / -1;
  }

  .cuerpo:has(.grupos) .grupos { grid-column: 1; }

  .cuerpo:has(.grupos) .voluntarios {
    grid-column: 2;
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    border-top: none;
    border-left: 1px solid var(--linea);
    padding-left: 24px;
  }

  /* Las fichas de participante ya no compiten con los voluntarios por el ancho,
     asi que pueden acomodarse de a varias por fila. */
  .columna-participantes {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  /* Filas de texto: acotadas para que la vista no obligue a barrer la pantalla
     de lado a lado leyendo un nombre. */
  .seccion,
  .ajustes { max-width: 760px; }

  /* La imagen es vertical. Estirarla al ancho del monitor la vuelve una losa y
     deja de parecerse a lo que se va a ver en el telefono. */
  .lienzo-vista-previa {
    width: 420px;
    max-width: 100%;
  }
}

/* Zona de peligro: rotar el token deja afuera a todo el mundo a la vez, asi que
   va plegada y senalizada, no a un toque de las acciones de todos los dias.
   Contraste verificado con la funcion contraste() de js/imagen/tema.js:
   7,97 el texto y 7,46 el boton, ambos por encima de AA. */
.zona-peligro {
  border: 1px solid #F1B4AE;
  border-radius: 12px;
  background: #FDECEA;
  padding: 0 16px;
}
.zona-peligro[open] { padding-bottom: 16px; }
.zona-peligro-titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 0;
  cursor: pointer;
  font-weight: 500;
  color: #8C1D18;
  list-style: none;
}
.zona-peligro-titulo::-webkit-details-marker { display: none; }
.zona-peligro-titulo::after {
  content: '+';
  margin-left: auto;
  font-size: 20px;
  line-height: 1;
  color: #8C1D18;
}
.zona-peligro[open] .zona-peligro-titulo::after { content: '\2212'; }
.zona-peligro-marca {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 20px;
  background: #A3231C;
  color: #FFFFFF;
}
.aviso-rotar {
  background: transparent;
  color: #8C1D18;
  padding: 0 0 12px;
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
}
.boton-peligro {
  border-color: #A3231C;
  background: #A3231C;
  color: #FFFFFF;
}

/* Editar el rotulo de un grupo: el titulo, las edades y la cancha cambian una vez
   por año, asi que el bloque va plegado y en gris, sin recuadro de color. No es una
   zona de peligro, solo algo que casi nunca se toca y no tiene que competir con las
   fichas, que son lo que se usa cada sabado. */
.editar-grupo { margin: 0 0 12px; }
.editar-grupo-titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  cursor: pointer;
  font-size: 13px;
  color: var(--texto-suave);
  list-style: none;
}
.editar-grupo-titulo::-webkit-details-marker { display: none; }
.editar-grupo-titulo::after {
  content: '+';
  font-size: 18px;
  line-height: 1;
  color: var(--texto-suave);
}
.editar-grupo[open] .editar-grupo-titulo::after { content: '\2212'; }
.editar-grupo[open] {
  border-left: 2px solid var(--linea);
  padding-left: 12px;
}
.editar-grupo .campo { margin-bottom: 10px; max-width: 320px; }

/* Voluntario que ya acompaña al participante seleccionado. Se marca distinto de
   .seleccionada (violeta, que significa "este es el participante elegido") para
   que se entienda que el toque siguiente lo QUITA, no que lo agrega otra vez.
   El par #C11E6B sobre #FBEAF0 da 4,95 de contraste, verificado con contraste(). */
.ficha.quitable,
.ficha.quitable.seleccionada {
  border-color: var(--magenta-texto);
  background: #FBEAF0;
  color: var(--magenta-texto);
}
.ficha.quitable .ficha-detalle {
  color: var(--magenta-texto);
  font-size: 11px;
  opacity: 0.85;
}

/* Ausentes de la jornada. Van despues de los voluntarios, atenuados, porque son
   informacion de contexto y no lo que se toca todo el tiempo. */
.ausentes { padding: 8px 16px 24px; border-top: 1px solid var(--linea); }
.ausentes h2 { font-size: 18px; font-weight: 500; margin: 0 0 12px; }
.columna-ausentes { flex-direction: row; flex-wrap: wrap; align-items: center; }
.barra-seleccion-acciones { display: flex; gap: 8px; align-items: center; }

/* Nombre editable en la lista de personas. Se ve como texto hasta que lo tocás,
   para que la lista siga leyendose como una lista y no como un formulario. */
input.fila-nombre {
  flex: 1;
  min-width: 120px;
  min-height: 44px;
  padding: 8px 10px;
  font: inherit;
  font-size: 16px;
  color: var(--texto);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
}
input.fila-nombre:hover { border-color: var(--linea); }
input.fila-nombre:focus {
  background: var(--fondo);
  border-color: var(--violeta);
  outline: none;
}
.marca-nuevo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: 14px;
  color: var(--texto-suave);
  white-space: nowrap;
}
.marca-nuevo input { width: 20px; height: 20px; }

/* Saludo y despedida. Van entre los interruptores y la imagen, para que el
   efecto de lo que se escribe quede a la vista sin scrollear. */
.mensajes-imagen { display: flex; flex-direction: column; gap: 16px; padding: 0 16px 16px; }
.campo-mensaje textarea {
  width: 100%;
  min-height: 88px;
  padding: 10px 12px;
  font: inherit;
  font-size: 16px;
  line-height: 1.45;
  color: var(--texto);
  border: 1px solid var(--linea);
  border-radius: 10px;
  resize: vertical;
}
.campo-mensaje textarea:focus { border-color: var(--violeta); outline: none; }
.campo-ayuda { font-size: 12px; line-height: 1.45; color: var(--texto-suave); }

/* Correcciones tactiles medidas a 320 px.

   La fila de personas no envolvia, asi que en un telefono angosto el boton
   Quitar arrancaba en x=320 sobre un ancho de 320: quedaba entero fuera de la
   pantalla y no habia forma de dar de baja a nadie. Medido, no estimado.

   Y las casillas de los formularios median 24 px de alto, por debajo del
   minimo tactil de 44. */
.fila-persona { flex-wrap: wrap; row-gap: 4px; }
.formulario label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
}
.formulario label input[type=checkbox] { width: 20px; height: 20px; }

/* Directorio de Personas: un gesto abre el detalle, la lista se queda para buscar. */
.personas-cabecera, .personas-filtros, .personas-directorio, .persona-editor, .personas-personalizacion { padding: 16px; }
.personas-cabecera { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.personas-cabecera h2 { margin: 0 auto 0 0; }
.personas-resumen, .personas-deshacer, .personas-masivas { margin: 0 16px 12px; padding: 10px 12px; border-radius: 10px; background: #F1EAF5; color: var(--violeta); }
.personas-filtros input, .persona-formulario input:not([type=checkbox]), .persona-formulario select, .persona-formulario textarea, .personas-personalizacion select { box-sizing: border-box; width: 100%; min-height: 44px; padding: 9px 12px; font: inherit; border: 1px solid var(--linea); border-radius: 10px; }
.personas-chips { display: flex; gap: 8px; overflow-x: auto; padding: 12px 0 2px; }
.chip { flex: 0 0 auto; min-height: 36px; padding: 6px 10px; font-size: 14px; }
.chip.activa { background: var(--violeta); color: var(--fondo); }
.personas-directorio { padding-top: 0; }
.personas-directorio h3 { margin: 4px 0 8px; font-size: 14px; color: var(--texto-suave); }
.personas-resultados { display: grid; grid-template-columns: minmax(0, 1fr); }
.persona-tarjeta { display: flex; align-items: center; border-bottom: 1px solid var(--linea); }
.persona-abrir { display: flex; flex: 1; gap: 12px; align-items: center; min-width: 0; padding: 10px 0; color: var(--texto); background: transparent; border: 0; text-align: left; }
.persona-avatar { position: relative; display: grid; place-items: center; overflow: hidden; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; background: #F1EAF5; color: var(--violeta); font-size: 13px; font-weight: 700; }
.persona-avatar.participante { flex-basis: 64px; width: 64px; height: 64px; font-size: 15px; }
.persona-avatar.con-foto { background: var(--verde); color: white; }
.persona-tarjeta[data-grupo="1"] .persona-avatar { box-shadow: 0 0 0 3px #0F766E; }
.persona-tarjeta[data-grupo="2"] .persona-avatar { box-shadow: 0 0 0 3px #C21870; }
.persona-miniatura { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 220ms ease-out; }
.persona-miniatura.lista { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .persona-miniatura { transition: none; } }
.persona-texto { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 2px; }
.persona-texto strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.persona-detalle { font-size: 13px; color: var(--texto-suave); }
.persona-grupo { display: inline-block; padding: 2px 7px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.persona-grupo-1 { background: #DDF4F1; color: #0F766E; }
.persona-grupo-2 { background: #FBE3EF; color: #C21870; }
.persona-flecha { font-size: 24px; color: var(--texto-suave); }
.persona-seleccionar { width: 24px; height: 24px; margin: 10px; }
.persona-editor, .personas-personalizacion { position: fixed; z-index: 3; right: 0; bottom: 0; left: 0; max-height: 82vh; overflow: auto; border-radius: 18px 18px 0 0; background: var(--fondo); box-shadow: 0 -12px 36px rgba(41, 23, 58, .18); }
.persona-editor h2, .personas-personalizacion h2 { margin-top: 0; }
.persona-formulario, .personas-personalizacion { display: flex; flex-direction: column; gap: 12px; }
.persona-bio { display: grid; gap: 12px; margin: 4px 0 0; padding: 16px; border: 1px solid var(--linea); border-radius: 14px; background: #FAF8FB; }
.persona-bio legend { padding: 0 6px; color: var(--violeta); font-weight: 700; }
.persona-confirmacion { margin: 0 0 12px; padding: 10px 12px; border: 1px solid #A7DED8; border-radius: 10px; color: var(--turquesa-texto); background: #F1FAF8; font-weight: 700; }
.persona-edad { margin: -4px 0 0; color: var(--violeta); font-size: 14px; font-weight: 700; }
.persona-bio .campo { display: grid; gap: 6px; }
.persona-bio input, .persona-bio textarea { box-sizing: border-box; width: 100%; min-height: 44px; padding: 9px 12px; font: inherit; border: 1px solid var(--linea); border-radius: 10px; background: var(--fondo); }
.selector-fecha { position: relative; }
.selector-fecha-disparador { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; padding: 9px 12px; color: var(--texto); background: var(--fondo); border: 1px solid var(--linea); border-radius: 10px; font: inherit; text-align: left; }
.selector-fecha-disparador::after { content: '⌄'; color: var(--violeta); font-size: 22px; line-height: 1; }
.selector-fecha-disparador[aria-expanded=true] { border-color: var(--violeta); box-shadow: 0 0 0 3px #E9DBEF; }
.selector-fecha-panel { position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; width: min(340px, calc(100vw - 64px)); padding: 12px; border: 1px solid var(--linea); border-radius: 14px; background: var(--fondo); box-shadow: 0 12px 28px rgba(41, 23, 58, .18); }
.selector-fecha-cabecera { display: grid; grid-template-columns: 36px minmax(0, 1fr) minmax(86px, .7fr) 36px; gap: 6px; align-items: center; }
.selector-fecha-cabecera select, .selector-fecha-navegar { min-width: 0; min-height: 40px; padding: 6px; color: var(--texto); background: #FAF8FB; border: 1px solid var(--linea); border-radius: 8px; font: inherit; }
.selector-fecha-navegar { font-size: 26px; line-height: 1; color: var(--violeta); }
.selector-fecha-navegar:disabled { opacity: .4; }
.selector-fecha-semana, .selector-fecha-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; margin-top: 10px; text-align: center; }
.selector-fecha-semana { color: var(--texto-suave); font-size: 12px; font-weight: 700; }
.selector-fecha-dia { min-height: 36px; padding: 0; color: var(--texto); background: transparent; border: 0; border-radius: 8px; font: inherit; }
.selector-fecha-dia:hover, .selector-fecha-dia:focus-visible { color: var(--violeta); background: #F1EAF5; }
.selector-fecha-dia.seleccionado { color: var(--fondo); background: var(--violeta); }
@media (max-width: 480px) { .selector-fecha-panel { width: calc(100vw - 64px); } }
.vista-tarjeta-personal { display: grid; gap: 8px; margin-top: 18px; padding: 14px; border: 1px solid var(--linea); border-radius: 14px; background: #FAF8FB; }
.vista-tarjeta-personal h3 { margin: 0; color: var(--violeta); }
.vista-tarjeta-personal .ayuda-ajustes { margin: 0; }
.lienzo-tarjeta-personal { display: block; width: 100%; height: auto; border-radius: 10px; background: var(--fondo); box-shadow: 0 3px 14px rgba(41, 23, 58, .14); }
.personas-tarjetas { display: grid; gap: 14px; padding: 16px; }
.personas-tarjetas h3 { margin: 0; }
.personas-tarjetas select { box-sizing: border-box; width: 100%; min-height: 44px; padding: 9px 12px; font: inherit; border: 1px solid var(--linea); border-radius: 10px; background: var(--fondo); }
.personas-tarjetas > .boton { width: 100%; }
.persona-estado { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 10px; cursor: pointer; }
.persona-estado-texto { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--texto-suave); }
.persona-estado-texto strong { color: var(--texto); font-size: 15px; }
.persona-estado input[type=checkbox] { appearance: none; position: relative; flex: 0 0 auto; width: 44px; height: 26px; margin: 0; border: 1px solid var(--texto-suave); border-radius: 999px; background: var(--fondo); transition: background 160ms ease, border-color 160ms ease; }
.persona-estado input[type=checkbox]::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--texto-suave); transition: transform 160ms ease, background 160ms ease; }
.persona-estado input[type=checkbox]:checked { border-color: var(--violeta); background: var(--violeta); }
.persona-estado input[type=checkbox]:checked::after { transform: translateX(18px); background: var(--fondo); }
.persona-estado input[type=checkbox]:focus-visible { outline: 2px solid var(--violeta); outline-offset: 3px; }
.persona-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.persona-acciones .boton { flex: 1 1 148px; padding: 10px 14px; }
.personas-masivas { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.personas-masivas .boton { font-size: 14px; }

/* Personas es un directorio, no una planilla: en una pantalla grande dos
   columnas hacen que encontrar a alguien requiera menos desplazamiento sin
   alargar cada fila hasta volverla dificil de leer. */
@media (min-width: 1200px) {
  #app:has(.personas-directorio) { max-width: 1440px; }
  .personas-resultados { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .personas-filtros { display: grid; grid-template-columns: minmax(280px, 1fr) auto; column-gap: 20px; align-items: center; }
  .personas-chips { padding: 0 0 2px; }
}

@media (min-width: 900px) {
  .persona-editor {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    box-sizing: border-box;
    width: min(640px, calc(100vw - 48px));
    max-height: min(720px, calc(100vh - 64px));
    padding: 24px;
    border: 1px solid var(--linea);
    border-radius: 18px;
    transform: translate(-50%, -50%);
    box-shadow: 0 18px 48px rgba(41, 23, 58, .22);
  }
}

/* Selector de formato de la imagen. */
.campo-formato { padding: 16px 16px 0; }
.campo-formato select {
  min-height: 44px;
  padding: 8px 12px;
  font: inherit;
  font-size: 16px;
  color: var(--texto);
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: var(--fondo);
}

/* Rotulo del grupo con el lapiz al lado, para no gastar un renglon entero en
   algo que casi nunca se toca. */
.grupo-titulo { display: flex; align-items: center; gap: 4px; }
.grupo-titulo h2 { margin: 0 0 4px; }
.boton-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--texto-suave);
  cursor: pointer;
}
.boton-icono:hover { border-color: var(--linea); color: var(--violeta); }
.boton-icono.activo { border-color: var(--violeta); color: var(--violeta); background: #F3E9F7; }
.boton-icono:focus-visible { outline: 2px solid var(--violeta); outline-offset: 2px; }
.editar-grupo[hidden] { display: none; }

/* Apoyo del grupo: no acompaña a nadie en particular, esta para toda la cancha. */
.apoyo-grupo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--linea);
}
.apoyo-rotulo { font-size: 14px; color: var(--texto-suave); }
.boton.activo { background: var(--violeta); color: var(--fondo); }

/* Nada se sale de costado. El teléfono no debe poder moverse en horizontal:
   una barra fija que se pasa del ancho deja botones fuera de alcance. */
html, body { max-width: 100%; overflow-x: hidden; }
#app { overflow-x: clip; }

/* Barra de selección: entra en una línea. Con tres elementos y texto de 15 px
   se pasaba del ancho y Cancelar quedaba cortado contra el borde. */
.barra-seleccion { gap: 8px; padding: 10px 12px; }
.barra-seleccion-texto {
  font-size: 14px;
  line-height: 1.25;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.barra-seleccion-acciones { flex-shrink: 0; gap: 6px; }
.barra-seleccion-acciones .boton {
  padding: 8px 12px;
  font-size: 14px;
  white-space: nowrap;
}

/* El elegidor: la bandeja de voluntarios que se abre pegada a lo que se tocó.
   La barra magenta de la izquierda la ata visualmente a la ficha de arriba,
   para que se lea como parte de ella y no como otra sección de la página. */
.elegidor {
  align-self: stretch;
  flex-basis: 100%;
  margin: 2px 0 4px;
  padding: 10px 12px 12px;
  border: 1px solid var(--linea);
  border-left: 3px solid var(--magenta);
  border-radius: 4px 14px 14px 4px;
  background: #FBF8FC;
  animation: elegidor-aparece 150ms ease-out;
}
@keyframes elegidor-aparece {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .elegidor { animation: none; }
}
.elegidor-titulo {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.3;
  color: var(--texto-suave);
}

/* "Hoy no viene", al final de la bandeja de voluntarios. Es la unica respuesta
   que no es una persona, asi que va lleno y mas oscuro que todo el resto de la
   pantalla: no se toca por error creyendo que se elige a alguien, y de reojo
   marca donde termina la lista. Blanco sobre #4A1F5C da 12,8 de contraste. */
.boton-ausencia {
  border-color: #4A1F5C;
  background: #4A1F5C;
  color: var(--fondo);
  border-radius: 22px;
  padding: 10px 16px;
  font-size: 15px;
  white-space: nowrap;
}
.boton-ausencia:focus-visible { outline: 2px solid #4A1F5C; outline-offset: 2px; }

/* Navegación: cinco destinos entran en menos renglones si el texto no infla
   cada botón. Envuelve hacia abajo, nunca hacia el costado. */
.navegacion { flex-wrap: wrap; gap: 6px; padding: 10px 12px; }
.navegacion .boton {
  padding: 9px 14px;
  font-size: 14px;
  white-space: nowrap;
}

/* Sello de versión: discreto, pero siempre a la vista. Existe para contestar
   "¿ya llegó el cambio?" sin tener que abrir nada. */
.sello-version {
  margin: 0;
  padding: 14px 16px 20px;
  font-size: 11px;
  color: var(--texto-suave);
  opacity: .65;
  text-align: center;
}
/* Solo aparece cuando el servidor tiene otra versión que la cargada. */
.aviso-version {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: #F3E9F7;
  border-bottom: 1px solid var(--violeta-claro, #D7B9E4);
  font-size: 14px;
  color: var(--violeta);
}
.aviso-version .boton { padding: 8px 14px; font-size: 14px; white-space: nowrap; }

/* Editor de foto. Ocupa la pantalla entera en el teléfono, porque elegir el
   recorte con el dedo necesita todo el espacio que haya. */
.capa-editor {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
  background: rgba(28, 16, 36, .55);
}
.editor-foto {
  width: 100%;
  max-width: 420px;
  padding: 18px 16px 20px;
  border-radius: 18px;
  background: var(--fondo);
  box-shadow: 0 12px 40px rgba(28, 16, 36, .3);
}
.editor-titulo { margin: 0 0 4px; font-size: 18px; font-weight: 500; }
.editor-subtitulo { margin: 18px 0 8px; font-size: 13px; font-weight: 500; color: var(--texto-suave); }
.editor-ayuda { margin: 0 0 14px; font-size: 13px; line-height: 1.4; color: var(--texto-suave); }
.editor-lienzo {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  margin: 0 auto;
  border-radius: 12px;
  background: var(--linea);
  touch-action: none;      /* el arrastre es nuestro, no del scroll de la página */
  cursor: grab;
}
.editor-lienzo:active { cursor: grabbing; }
.editor-controles {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  margin-top: 14px;
}
.editor-zoom { flex: 1; display: flex; flex-direction: column; gap: 4px; }
/* Alto de sobra para el pulgar: el control nativo es de unos 20 px. */
.editor-zoom input[type=range] { width: 100%; height: 40px; accent-color: var(--violeta); }
.editor-previas {
  display: flex;
  gap: 12px;
  overflow-x: auto;        /* la tira scrollea sola, la página nunca */
  padding-bottom: 4px;
}
.previa { margin: 0; flex: 0 0 auto; }
.previa canvas { display: block; border-radius: 8px; background: var(--linea); }
.previa figcaption { margin-top: 5px; font-size: 11px; color: var(--texto-suave); text-align: center; }
.editor-acciones { display: flex; gap: 10px; margin-top: 18px; }
.editor-acciones .boton { flex: 1; }

/* Selector visual: cada opción se ve en vez de leerse. Los nombres de estas
   opciones no le dicen nada a nadie hasta que ve el resultado. */
.selector-visual { padding: 14px 16px 4px; }
.selector-rotulo { margin: 0 0 8px; font-size: 12px; color: var(--texto-suave); }
.selector-opciones {
  display: flex;
  gap: 10px;
  overflow-x: auto;        /* la tira scrollea sola, la página nunca */
  padding-bottom: 6px;
  scroll-snap-type: x proximity;
}
.bosquejo {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 92px;
  padding: 7px 5px 8px;
  border: 2px solid var(--linea);
  border-radius: 12px;
  background: var(--fondo);
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bosquejo:focus-visible { outline: 2px solid var(--violeta); outline-offset: 2px; }
.bosquejo.elegido { border-color: var(--violeta); background: #F8F2FB; }
.bosquejo-lienzo {
  display: block;
  width: 76px;
  height: auto;
  border-radius: 6px;
  background: var(--linea);
}
.bosquejo-vacio { min-height: 76px; }
.bosquejo-etiqueta {
  font-size: 10.5px;
  line-height: 1.25;
  color: var(--texto-suave);
  text-align: center;
}
.bosquejo.elegido .bosquejo-etiqueta { color: var(--violeta); font-weight: 500; }

/* Panel de formato: plegado por defecto. Abierto son cuatro tiras de bosquejos,
   que empujaban la vista previa fuera de la pantalla. */
.panel-formato { border-bottom: 1px solid var(--linea); }
.panel-formato-cabecera {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
}
.panel-formato-rotulo { font-size: 12px; color: var(--texto-suave); flex-shrink: 0; }
.panel-formato-resumen {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  color: var(--violeta);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.boton-cambiar-formato { flex-shrink: 0; padding: 8px 14px; font-size: 14px; white-space: nowrap; }

/* Registro de actividad. Solo administración. */
.registro-dia {
  margin: 20px 0 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--violeta);
}
.registro-lista { margin: 0; padding: 0; list-style: none; }
.registro-entrada {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--linea);
  font-size: 14px;
}
.registro-hora { flex-shrink: 0; font-variant-numeric: tabular-nums; color: var(--texto-suave); }
.registro-accion { flex: 1; min-width: 0; }
.registro-quien { flex-shrink: 0; color: var(--magenta-texto); font-size: 13px; }
.registro-entrada.sin-autor .registro-quien { color: var(--texto-suave); font-style: italic; }
/* Los cambios de acceso, resaltados: son los que más importa auditar. */
.registro-entrada.de-accesos { background: #FBF6FD; }
.registro-entrada.de-accesos .registro-accion { color: var(--violeta); font-weight: 500; }
/* Cuando el trabajador todavía no tomó el control, el sello lo dice: esa carga
   puede estar corriendo lo que quedó en la caché del navegador. */
.sello-version[data-trabajador="no"] .sello-estado { color: var(--magenta-texto); }
/* Girar, espejar y centrar: acciones de la foto, aparte del deslizante. */
.editor-herramientas { display: flex; gap: 8px; margin-top: 10px; }
.editor-herramientas .boton { flex: 1; padding: 10px 8px; font-size: 14px; white-space: nowrap; }
/* Selector de grupo en la fila de cada participante. */
.fila-grupo {
  flex-shrink: 0;
  padding: 9px 8px;
  font-family: inherit;
  font-size: 14px;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: var(--fondo);
  color: var(--texto);
}

/* Reporte de asistencia. La tabla puede tener cinco columnas de sabados mas el
   nombre, asi que scrollea sola adentro de su caja: la pagina nunca se mueve
   para el costado, que en el telefono es lo que rompe la lectura. */
.tabla-envoltorio { overflow-x: auto; margin: 12px 0; }
.tabla-reporte { border-collapse: collapse; font-size: 15px; }
.tabla-reporte th, .tabla-reporte td { padding: 8px 10px; text-align: left; white-space: nowrap; }
.tabla-reporte th.dia, .tabla-reporte td.casilla { text-align: center; min-width: 34px; }
.tabla-reporte thead th { font-weight: 500; color: var(--texto-suave); border-bottom: 1px solid var(--linea); }
.tabla-reporte .seccion-reporte { padding-top: 16px; font-weight: 500; color: var(--violeta); }
.tabla-reporte tbody tr:nth-child(even) { background: #FBF8FC; }
.tabla-reporte td[data-estado="vino"] { color: var(--turquesa-texto); }
.tabla-reporte td[data-estado="falto"] { color: var(--magenta-texto); }
.tabla-reporte .resumen-reporte { color: var(--texto-suave); font-size: 14px; }
.acciones-reporte { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* Corrección de asistencia. Filas anchas y tocables: se usan de a muchas
   seguidas y con el telefono en la mano. */
.columna-asistencia { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.subtitulo-asistencia { font-size: 15px; font-weight: 500; color: var(--texto-suave); margin: 12px 0 8px; }
.fila-asistencia {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--linea);
  border-radius: 12px;
  background: var(--fondo);
  font: inherit;
  font-size: 15px;
  color: var(--texto);
  cursor: pointer;
  text-align: left;
}
.marca-asistencia { font-size: 14px; }
.fila-asistencia[data-estado="vino"] { border-color: var(--turquesa); }
.fila-asistencia[data-estado="vino"] .marca-asistencia { color: var(--turquesa-texto); }
.fila-asistencia[data-estado="falto"] { border-color: var(--magenta); }
.fila-asistencia[data-estado="falto"] .marca-asistencia { color: var(--magenta-texto); }
.fila-asistencia[data-estado="no-estaba"] { opacity: 0.5; }

/* Aviso de faltas. Turquesa y no rojo: no es un error de la aplicacion ni una
   urgencia, es algo que alguien tiene que mirar cuando pueda. */
.franja-alerta {
  margin: 12px 16px 0;
  padding: 12px 14px;
  border: 1px solid var(--turquesa);
  border-left: 3px solid var(--turquesa);
  border-radius: 4px 12px 12px 4px;
  background: #F1FAF8;
}
.franja-alerta-titulo { margin: 0 0 8px; font-size: 15px; font-weight: 500; color: var(--turquesa-texto); }
.alerta-persona {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 8px;
}
.alerta-texto { font-size: 15px; }
.franja-alerta .boton { padding: 8px 14px; font-size: 14px; min-height: 40px; }

/* Las dos tablas del reporte, una al lado de la otra. En el telefono no entran
   y bajan sola: es preferible a achicar la letra o a un scroll horizontal que
   tape media tabla. */
.tablas-reporte { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }

/* ---------------------------------------------------------------------------
   Tablero de jornada.

   En el teléfono se priorizan las tres tareas de todos los sábados. Los otros
   destinos viven en Más. En pantalla ancha vuelve la navegación completa.
--------------------------------------------------------------------------- */

.navegacion-movil { display: none; }

.resumen-jornada { display: none; }
.campos-jornada {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.grupo {
  position: relative;
  margin: 8px 12px 16px;
  padding: 16px 16px 18px 20px;
  border: 1px solid var(--linea);
  border-radius: 16px;
  background: var(--fondo);
  overflow: hidden;
}
.grupo::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--turquesa);
}
.grupo-2::before { background: var(--magenta); }
.grupo-titulo h2 { line-height: 1.25; }
.estado-grupo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 14px;
}
.pastilla-estado {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 500;
}
.pastilla-estado[data-estado="pendiente"] { background: #FBEAF0; color: var(--magenta-texto); }
.pastilla-estado[data-estado="completo"] { background: #E6F7F4; color: var(--turquesa-texto); }
.voluntarios-libres { font-size: 12px; color: var(--texto-suave); }

.ficha.sin-asignar { border-color: #D7CDD9; }
.ficha.sin-asignar::before {
  content: '';
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--magenta);
}
.ficha.asignada {
  border-color: #A7DED8;
  background: #F1FAF8;
}
.ficha.seleccionada:not(.quitable) {
  border-color: var(--violeta);
  background: var(--violeta);
  color: var(--fondo);
}
.ficha.seleccionada:not(.quitable) .ficha-detalle { color: var(--fondo); opacity: .85; }
.ficha.atenuada { opacity: 1; color: var(--texto-suave); background: #F6F4F6; }

.boton:focus-visible,
.ficha:focus-visible,
.boton-navegacion:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(102, 45, 125, .32);
  outline-offset: 2px;
}

@media (max-width: 899px) {
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

  .navegacion-escritorio { display: none; }
  .navegacion-movil {
    position: fixed;
    z-index: 40;
    inset: auto 0 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--linea);
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 -4px 18px rgba(44, 44, 42, .08);
  }
  .navegacion-movil > .boton,
  .boton-navegacion {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 50px;
    padding: 7px 4px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--texto-suave);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    list-style: none;
  }
  .boton-navegacion::-webkit-details-marker { display: none; }
  .navegacion-movil .activa { background: #F3E9F7; color: var(--violeta); }
  .navegacion-mas { position: relative; }
  .menu-navegacion {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    display: grid;
    gap: 6px;
    width: max-content;
    min-width: 180px;
    padding: 8px;
    border: 1px solid var(--linea);
    border-radius: 14px;
    background: var(--fondo);
    box-shadow: 0 10px 32px rgba(44, 44, 42, .16);
  }
  .navegacion-mas:not([open]) .menu-navegacion { display: none; }
  .menu-navegacion .boton { width: 100%; text-align: left; }

  .encabezado-lista { display: block; padding: 12px 16px; }
  .resumen-jornada {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .resumen-jornada-texto { display: flex; flex-direction: column; min-width: 0; }
  .resumen-jornada-texto strong { font-size: 16px; font-weight: 500; color: var(--texto); }
  .resumen-jornada-texto span {
    overflow: hidden;
    font-size: 13px;
    color: var(--texto-suave);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .boton-editar-jornada { min-height: 40px; padding: 7px 12px; font-size: 13px; flex-shrink: 0; }
  .campos-jornada { display: none; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linea); }
  .encabezado-lista.abierta .campos-jornada { display: flex; }
  .campos-jornada .campo:last-child { flex: 1 1 100%; }
  .campos-jornada .campo:last-child input { width: 100%; }

  .grupo { margin-inline: 12px; }
  .barra { padding-top: 10px; padding-bottom: 4px; }
  .barra-seleccion { bottom: calc(65px + env(safe-area-inset-bottom)); }
}

@media (min-width: 900px) {
  .grupo { margin-inline: 16px 0; }
  .cuerpo:has(.grupos) .voluntarios { margin-top: 8px; }
}

/* Confirmación de guardado. Es breve, textual y no bloquea el trabajo. */
.estado-guardado {
  position: fixed;
  z-index: 60;
  top: 12px;
  right: 12px;
  max-width: min(320px, calc(100vw - 24px));
  padding: 8px 12px;
  border: 1px solid var(--linea);
  border-radius: 18px;
  background: var(--fondo);
  box-shadow: 0 6px 22px rgba(44, 44, 42, .14);
  font-size: 13px;
  color: var(--texto-suave);
  pointer-events: none;
}
.estado-guardado[hidden] { display: none; }
.estado-guardado[data-estado="guardando"] { color: var(--violeta); }
.estado-guardado[data-estado="guardado"] { border-color: #A7DED8; color: var(--turquesa-texto); }
.estado-guardado[data-estado="error"] {
  display: flex;
  align-items: center;
  gap: 10px;
  border-color: #EAB0C9;
  background: #FBEAF0;
  color: var(--magenta-texto);
  pointer-events: auto;
}
.estado-guardado-texto { min-width: 0; }
.boton-reintentar {
  flex-shrink: 0;
  min-height: 34px;
  padding: 5px 10px;
  border-color: var(--magenta-texto);
  background: var(--fondo);
  color: var(--magenta-texto);
  font-size: 12px;
}

/* Los estados vacíos explican el siguiente paso en vez de dejar una pantalla
   sin salida. Mantienen el lenguaje de los grupos, sin sumar otra decoración. */
.estado-vacio {
  max-width: 520px;
  margin-top: 18px;
  padding: 18px;
  border: 1px solid var(--linea);
  border-left: 4px solid var(--turquesa);
  border-radius: 4px 14px 14px 4px;
  background: #F7FBFA;
}
.estado-vacio h3 { margin: 0 0 6px; font-size: 16px; font-weight: 500; }
.estado-vacio .ayuda { margin: 0 0 14px; line-height: 1.5; color: var(--texto-suave); }

@media (max-width: 899px) {
  .estado-guardado {
    top: auto;
    bottom: calc(144px + env(safe-area-inset-bottom));
  }
}