/* =====================================================================
   pantallas.css — el acomodo de cada pantalla.
   Solo acomodo: tamaños, columnas y espacios. Los componentes viven en
   componentes.css y los valores en tokens.css.
   ===================================================================== */

/* ─── Marco de la aplicación (todas las pantallas del sistema) ──────── */

.app {
  min-height: var(--alto-pantalla);
  padding-bottom: calc(var(--alto-barra-inferior) + env(safe-area-inset-bottom));
}
.app-contenido {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-5);
  width: 100%;
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  padding: var(--espacio-4) var(--margen-pantalla) var(--espacio-16);
}
@media (min-width: 768px) {
  .app {
    padding-bottom: 0;
    padding-left: var(--ancho-lateral);
  }
  .app-contenido {
    padding: var(--espacio-6);
  }
}

.avisos-sistema {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  padding: var(--espacio-2) var(--margen-pantalla) 0;
}
.avisos-sistema:empty {
  display: none;
}


/* ─── Agenda: ocupa toda la pantalla; la rejilla se desplaza por dentro ─ */

.app-agenda {
  display: flex;
  flex-direction: column;
  height: var(--alto-pantalla);
  overflow: hidden;
}
.app-agenda > .encabezado,
.app-agenda > .aviso-conexion,
.app-agenda > .avisos-sistema {
  flex: none;
}
.pantalla-agenda {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--espacio-3);
  min-height: 0;
  padding: var(--espacio-3) var(--margen-pantalla) var(--espacio-3);
}
.agenda-barra {
  display: flex;
  align-items: center;
  gap: var(--espacio-1);
}
.agenda-barra .navegador-fecha {
  flex: 1;
  gap: var(--espacio-1);
  min-width: 0;
}
.agenda-barra [data-hoy] {
  padding: 0 var(--espacio-3);
}
@media (min-width: 768px) {
  .agenda-barra,
  .agenda-barra .navegador-fecha {
    gap: var(--espacio-2);
  }
}
.agenda-recordatorios > span {
  display: none;
}
@media (min-width: 1024px) {
  .agenda-recordatorios > span {
    display: inline;
  }
}
.zona-rejilla {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}
.zona-rejilla > .rejilla {
  flex: 1;
  min-height: 0;
}
.rejilla-esqueleto {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  padding: var(--espacio-4);
  border: var(--borde-fino) solid var(--color-linea);
  border-radius: var(--radio-tarjeta);
  background: var(--color-tarjeta);
}
@media (min-width: 768px) {
  .pantalla-agenda {
    padding: var(--espacio-4) var(--espacio-6) var(--espacio-4);
  }
}


/* ─── Pantallas de lista (recordatorios, cobrar, clientes) ─────────── */

.pantalla-lista {
  max-width: var(--ancho-lectura);
}
.pantalla-titulo {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
}
/* Título con botones a la derecha; en celular los botones bajan */
.pantalla-titulo-con-accion {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--espacio-3);
}
/* Más juntos, para que "Agregar · Importar · Exportar" quepan en un renglón a 375 px */
.pantalla-titulo-con-accion > .grupo-botones {
  gap: var(--espacio-2);
}
.pantalla-secciones {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-6);
}
.seccion {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
}
.pantalla-lista .fila,
.pantalla-admin .fila,
.pantalla-personalizacion .fila {
  flex-wrap: wrap;
}
.pantalla-lista .fila-texto,
.pantalla-admin .fila-texto,
.pantalla-personalizacion .fila-texto {
  flex-basis: var(--ancho-tarjeta-servicio);
}

/* Clientes: buscador, "Todos / Dormidos" y las semanas */
.barra-herramientas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-3);
}
.barra-herramientas > .buscador {
  flex: 1 1 var(--ancho-texto-min);
}
.barra-herramientas > .fichas {
  flex-basis: 100%;
  align-items: center;
}
.importar-vista {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
}
.importar-vista:empty {
  display: none;
}

/* ─── Panel: cifras arriba y tarjetas en dos columnas en computadora ─ */

.panel-tarjetas {
  display: grid;
  gap: var(--espacio-4);
  align-items: start;
}
@media (min-width: 1024px) {
  .panel-tarjetas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .panel-tarjetas > .tarjeta-ancha {
    grid-column: 1 / -1;
  }
}


/* ─── Entrar ────────────────────────────────────────────────────────── */

.pantalla-entrar {
  display: flex;
  flex-direction: column;
  min-height: var(--alto-pantalla);
}
.entrar {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: var(--espacio-5);
  width: 100%;
  max-width: var(--ancho-ventana);
  margin: 0 auto;
  padding: var(--espacio-10) var(--margen-pantalla) var(--espacio-6);
}
.entrar-marca {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
}
.entrar-logo {
  width: var(--avatar-lg);
  height: var(--avatar-lg);
  border-radius: var(--radio-control);
  font-size: var(--texto-lg);
}
.entrar-recientes {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
}
.entrar-ayuda {
  text-align: center;
}


/* ─── estilos.html: la guía de componentes ──────────────────────────── */

/* Marco: menú de secciones a la izquierda (computadora) o arriba (celular) */
@media (min-width: 1024px) {
  .estilos-marco {
    display: grid;
    grid-template-columns: var(--ancho-lateral) minmax(0, 1fr);
    align-items: start;
  }
}
.estilos-principal {
  min-width: 0;
}

.estilos-encabezado {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  padding: var(--espacio-8) var(--margen-pantalla) var(--espacio-6);
  background: var(--color-tarjeta);
  border-bottom: var(--borde-fino) solid var(--color-linea);
}
.estilos-encabezado > .texto-suave {
  max-width: var(--ancho-lectura);
}
@media (min-width: 1024px) {
  .estilos-encabezado {
    padding: var(--espacio-10) var(--espacio-8) var(--espacio-8);
  }
}

/* Menú de la guía, agrupado por secciones y con un ícono por opción */
.indice {
  position: sticky;
  top: 0;
  z-index: var(--capa-barra);
  border-bottom: var(--borde-fino) solid var(--color-linea);
  background: var(--color-tarjeta);
}
.indice-boton {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  width: 100%;
  min-height: var(--alto-control-grande);
  padding: 0 var(--margen-pantalla);
  border: 0;
  background: transparent;
  font-weight: var(--peso-fuerte);
  text-align: left;
  cursor: pointer;
}
.indice-actual {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--color-texto-suave);
  font-weight: var(--peso-normal);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.indice-boton[aria-expanded="true"] > .icono:last-child {
  transform: rotate(180deg);
}
.indice-lista {
  display: none;
  flex-direction: column;
  gap: var(--espacio-4);
  max-height: calc(var(--alto-pantalla) - var(--alto-control-grande));
  overflow-y: auto;
  padding: var(--espacio-2) var(--espacio-3) var(--espacio-5);
  border-top: var(--borde-fino) solid var(--color-linea);
}
.indice[data-abierto] .indice-lista {
  display: flex;
}
.indice-marca {
  display: none;
  align-items: center;
  gap: var(--espacio-2);
  padding: var(--espacio-2) var(--espacio-3);
  font-family: var(--fuente-titulo);
  font-weight: var(--peso-titulo);
  letter-spacing: var(--letras-titulo);
}
.indice-grupo {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-0);
}
.indice-grupo-titulo {
  padding: var(--espacio-2) var(--espacio-3) var(--espacio-1);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--letras-etiqueta);
  text-transform: uppercase;
  color: var(--color-texto-suave);
}
.indice-enlace {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  min-height: var(--toque-min);
  padding: 0 var(--espacio-3);
  border-radius: var(--radio-control);
  color: var(--color-texto-suave);
  font-weight: var(--peso-medio);
  text-decoration: none;
  transition: background-color var(--duracion) var(--curva), color var(--duracion) var(--curva);
}
.indice-enlace:hover {
  background: var(--color-hundido);
  color: var(--color-texto);
}
.indice-enlace[aria-current="true"] {
  background: var(--color-acento-tenue);
  color: var(--color-texto);
}
.indice-enlace[aria-current="true"] > .icono {
  color: var(--color-acento-texto);
}
@media (min-width: 1024px) {
  .indice {
    height: var(--alto-pantalla);
    overflow-y: auto;
    border-bottom: 0;
    border-right: var(--borde-fino) solid var(--color-linea);
  }
  .indice-boton {
    display: none;
  }
  .indice-lista,
  .indice[data-abierto] .indice-lista {
    display: flex;
    max-height: none;
    padding: var(--espacio-4) var(--espacio-3);
    border-top: 0;
  }
  .indice-marca {
    display: flex;
  }
}

/* Encabezado de cada sección grande de la guía */
.grupo-muestras {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-12);
}
.grupo-encabezado {
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-4);
  padding-bottom: var(--espacio-6);
  border-bottom: var(--borde-grueso) solid var(--color-texto);
}
.grupo-icono {
  display: inline-grid;
  place-items: center;
  width: var(--avatar-lg);
  height: var(--avatar-lg);
  flex: none;
  border-radius: var(--radio-control);
  background: var(--color-acento-tenue);
  color: var(--color-acento-texto);
}
.grupo-texto {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  max-width: var(--ancho-lectura);
}

.controles-personalizacion {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--espacio-5) var(--espacio-10);
}
.boton-muestra-ancho {
  max-width: var(--ancho-maqueta-celular);
}

.selector-acento {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
}
.acento-opcion {
  width: var(--toque-min);
  height: var(--toque-min);
  padding: 0;
  border: var(--borde-grueso) solid var(--color-tarjeta);
  border-radius: var(--radio-pastilla);
  box-shadow: 0 0 0 var(--borde-fino) var(--color-linea);
  cursor: pointer;
  transition: box-shadow var(--duracion) var(--curva);
}
.acento-opcion[aria-pressed="true"] {
  box-shadow: 0 0 0 var(--borde-grueso) var(--color-texto);
}
.acento-naranja  { background: var(--acento-naranja); }
.acento-azul     { background: var(--acento-azul); }
.acento-rosa     { background: var(--acento-rosa); }
.acento-verde    { background: var(--acento-verde); }
.acento-morado   { background: var(--acento-morado); }
.acento-amarillo { background: var(--acento-amarillo); }
.acento-rojo     { background: var(--acento-rojo); }
.acento-grafito  { background: var(--acento-grafito); }

.estilos-contenido {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-16);
  width: 100%;
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  padding: var(--espacio-10) var(--margen-pantalla);
}
@media (min-width: 1024px) {
  .estilos-contenido {
    padding: var(--espacio-12) var(--espacio-8);
  }
}

.muestra {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-6);
  min-width: 0;
  scroll-margin-top: calc(var(--alto-control-grande) + var(--espacio-4));
}
@media (min-width: 1024px) {
  .muestra {
    scroll-margin-top: var(--espacio-6);
  }
}
.muestra-encabezado {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  max-width: var(--ancho-lectura);
}
.muestra-grupo {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  min-width: 0;
}

.estilos-dos-columnas {
  display: grid;
  gap: var(--espacio-6);
  align-items: start;
}
@media (min-width: 1024px) {
  .estilos-dos-columnas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Paleta de colores */
.paleta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--ancho-tarjeta-servicio), 1fr));
  gap: var(--espacio-4);
}
.color {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  margin: 0;
  font-size: var(--texto-sm);
}
.color figcaption {
  display: flex;
  flex-direction: column;
}
.color figcaption .cifra {
  color: var(--color-texto-suave);
  font-size: var(--texto-xs);
}
.color-muestra {
  height: var(--alto-control-grande);
  border: var(--borde-fino) solid var(--color-linea);
  border-radius: var(--radio-control);
}
.muestra-fondo          { background: var(--color-fondo); }
.muestra-tarjeta        { background: var(--color-tarjeta); }
.muestra-texto          { background: var(--color-texto); }
.muestra-texto-suave    { background: var(--color-texto-suave); }
.muestra-linea          { background: var(--color-linea); }
.muestra-acento         { background: var(--color-acento); }
.muestra-acento-texto   { background: var(--color-acento-texto); }
.muestra-apartada       { background: var(--estado-apartada); }
.muestra-por-confirmar  { background: var(--estado-por-confirmar); }
.muestra-confirmada     { background: var(--estado-confirmada); }
.muestra-atendida       { background: var(--estado-atendida); }
.muestra-no-llego       { background: var(--estado-no-llego); }
.muestra-bloqueo {
  background: repeating-linear-gradient(
    135deg,
    var(--estado-bloqueo-raya) 0 var(--borde-grueso),
    var(--estado-bloqueo-fondo) 0 var(--raya-bloqueo)
  );
}

/* Tarjetas de cita sueltas */
.muestra-citas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--ancho-columna-min), 1fr));
  gap: var(--espacio-3);
  align-items: start;
}

.agenda-muestra {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-4);
}

/* Maquetas: marcos punteados donde se muestran piezas que en el sistema
   van fijas (barra inferior, menú lateral, botón flotante, brindis). */
.maqueta {
  min-width: 0;
  overflow: hidden;
  border: var(--borde-fino) dashed var(--color-linea-control);
  border-radius: var(--radio-tarjeta);
  background: var(--color-fondo);
}
.maqueta-celular {
  width: 100%;
  max-width: var(--ancho-maqueta-celular);
  background: var(--color-tarjeta);
}
.maqueta .encabezado,
.maqueta .barra-inferior,
.maqueta .menu-lateral,
.maqueta .boton-flotante,
.maqueta .brindis {
  position: static;
}
.maqueta .barra-inferior {
  display: grid;
  border-top: 0;
}
.maqueta-lateral .menu-lateral {
  display: flex;
  width: 100%;
  max-width: var(--ancho-lateral);
  min-height: var(--alto-maqueta);
}
.maqueta-flotante {
  display: flex;
  justify-content: flex-end;
  padding: var(--espacio-6);
}
.maqueta-brindis {
  display: flex;
  justify-content: center;
  padding: var(--espacio-6);
}
.maqueta .brindis {
  transform: none;
}

.avisos-muestra {
  display: grid;
  gap: var(--espacio-3);
}
@media (min-width: 1024px) {
  .avisos-muestra {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.muestra-panel {
  display: grid;
  gap: var(--espacio-4);
  align-items: start;
}

/* Página pública en la guía: cada muestra en claro y en oscuro */
.muestra-temas > .maqueta {
  justify-self: center;
}
.maqueta-reserva {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-5);
  padding: var(--espacio-5) var(--margen-pantalla);
  background: var(--color-fondo);
  color: var(--color-texto);
}
.maqueta-reserva.perfil > .perfil-portada,
.maqueta-reserva > .barra-reserva {
  margin: calc(var(--espacio-5) * -1) calc(var(--margen-pantalla) * -1) 0;
}
.maqueta-reserva > .barra-reserva {
  position: static;
}
.barra-fija-muestra {
  position: static;
  margin: 0 calc(var(--margen-pantalla) * -1);
}
.progreso-muestra {
  transform: scaleX(0.6);
}
.maqueta-resumen {
  max-width: var(--ancho-resumen);
  padding: var(--espacio-5);
  background: var(--color-fondo);
}
@media (min-width: 1024px) {
  .muestra-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ─── Página pública de reservas: /n/<slug>/citas ───────────────────── */

.publica {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-5);
  padding: var(--espacio-6) var(--margen-pantalla) 0;
  background: var(--color-fondo);
  color: var(--color-texto);
}
.publica-cabecera {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
}
.publica-logo {
  width: var(--avatar-lg);
  height: var(--avatar-lg);
  border-radius: var(--radio-control);
  font-size: var(--texto-lg);
}
.publica-horario {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
}
.publica-promo {
  background: var(--color-acento-tenue);
  color: var(--color-acento-texto);
}
.publica .pie-localiapps {
  margin: 0 calc(var(--margen-pantalla) * -1);
  border-top: var(--borde-fino) solid var(--color-linea);
}

/* La página de verdad (reservar.html) */
.pagina-publica {
  min-height: var(--alto-pantalla);
}
.publica-pagina {
  width: 100%;
  max-width: var(--ancho-ventana);
  margin: 0 auto;
  padding-bottom: var(--espacio-8);
}
.publica-nombre {
  flex: 1;
  min-width: 0;
}
img.publica-logo {
  object-fit: cover;
}
.publica-listo > .icono {
  color: var(--color-acento-texto);
}

/* ─── Página pública nueva (etapa 5): perfil arriba, cita en pasos ──── */

.reserva {
  display: flex;
  flex-direction: column;
  min-height: var(--alto-pantalla);
  background: var(--color-fondo);
  color: var(--color-texto);
}
.reserva-cuerpo {
  flex: 1;
  width: 100%;
  max-width: var(--ancho-publica);
  margin: 0 auto;
  padding: var(--espacio-5) var(--margen-pantalla) var(--espacio-8);
}
.reserva-pasos {
  min-width: 0;
}
.reserva-lateral {
  display: none;
}
.reserva > .pie-localiapps {
  padding-bottom: calc(var(--alto-boton-fijo) + var(--espacio-6) + env(safe-area-inset-bottom));
}
.barra-reserva-fila {
  max-width: var(--ancho-publica);
  margin: 0 auto;
}
/* En celular la portada llega de orilla a orilla. */
.perfil > .perfil-portada {
  margin: calc(var(--espacio-5) * -1) calc(var(--margen-pantalla) * -1) 0;
}
.perfil > .perfil-portada + .perfil-identidad {
  padding-left: var(--espacio-1);
}
.perfil-seccion {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
}
.perfil-sin-solicitudes {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
}

@media (min-width: 900px) {
  .reserva-cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--ancho-resumen);
    align-items: start;
    gap: var(--espacio-10);
    max-width: var(--ancho-publica-doble);
    padding-top: var(--espacio-8);
  }
  .barra-reserva-fila {
    max-width: var(--ancho-publica-doble);
  }
  .reserva-lateral {
    display: block;
    height: 100%;
  }
  .reserva-cuerpo.reserva-una-columna {
    grid-template-columns: minmax(0, 1fr);
    max-width: var(--ancho-publica);
  }
  .reserva-una-columna > .reserva-lateral {
    display: none;
  }
  .reserva > .pie-localiapps {
    padding-bottom: var(--espacio-8);
  }
  .perfil > .perfil-portada {
    margin: 0;
    border-radius: var(--radio-tarjeta);
  }
  .perfil > .perfil-portada + .perfil-identidad {
    padding-left: var(--espacio-6);
  }
  .perfil .resenas {
    margin: 0;
    padding: var(--espacio-1) 0 var(--espacio-2);
    scroll-padding: 0;
  }
  /* En escritorio el botón va dentro de la tarjeta de resumen. */
  .barra-fija {
    display: none !important;
  }
}

/* ─── Personalización ───────────────────────────────────────────────── */

.pantalla-personalizacion {
  max-width: var(--ancho-lectura);
}
.pantalla-personalizacion .tarjeta-encabezado {
  align-items: flex-start;
}
.subir-logo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-4);
}
.logo-vista {
  display: inline-flex;
  flex: none;
}
.subir-logo-controles {
  display: flex;
  flex: 1 1 var(--ancho-texto-min);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espacio-2);
  min-width: 0;
}
.acento-ninguno {
  border-style: dashed;
  border-color: var(--color-linea-control);
  background: var(--color-tarjeta);
}
.acento-propio {
  background: var(--color-servicio);
}

/* Horario por día: en celular el día arriba y las horas abajo */
.lista-horario {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
}
/* Se acomoda solo al ancho que tenga: en angosto, el día arriba y las horas abajo. */
.fila-horario {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-2) var(--espacio-3);
  padding: var(--espacio-2) 0;
  border-bottom: var(--borde-fino) solid var(--color-linea);
}
.fila-horario:last-child {
  border-bottom: 0;
}
.fila-horario-dia {
  flex: 1 0 var(--ancho-tarjeta-servicio);
}
.fila-horario > select.entrada {
  flex: 1 1 var(--ancho-tarjeta-servicio);
  width: auto;
}
.fila-horario-horas {
  display: flex;
  flex: 1 1 calc(var(--ancho-texto-min) + var(--espacio-10));
  align-items: center;
  gap: var(--espacio-2);
  min-width: 0;
}
.fila-horario-horas > .entrada {
  flex: 1 1 calc(var(--ancho-hora) * 2);
  min-width: 0;
}

/* Dos campos lado a lado (en celular, uno bajo otro) */
.campos-en-linea,
.rejilla-campos {
  display: grid;
  gap: var(--espacio-4);
}
@media (min-width: 768px) {
  .campos-en-linea {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}
.fila-servicio > .fila-boton {
  flex: 1 1 var(--ancho-texto-min);
}

/* ─── Administración de Localiapps (/admin): sin menú lateral ───────── */

@media (min-width: 768px) {
  .app-admin {
    padding-left: 0;
  }
}
.pantalla-admin {
  max-width: var(--ancho-lectura);
}
.pantalla-admin > .pantalla-titulo > .boton-texto {
  align-self: flex-start;
  margin-left: calc(var(--espacio-3) * -1);
}
.lista-personas {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
}
.persona-alta {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
}
.persona-alta > .boton-texto {
  align-self: flex-end;
}
.credenciales {
  border-color: var(--aviso-exito);
}
.pantalla-admin .fila-acciones > .boton {
  min-height: var(--toque-min);
}

/* ─── Aviso de privacidad (página pública) ──────────────────────────── */

.publica-texto {
  max-width: var(--ancho-lectura);
  line-height: var(--interlineado);
}
.publica-seccion {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
}
.publica-seccion a {
  color: var(--color-acento-texto);
}
.publica-texto > .boton {
  align-self: flex-start;
}