@acvl/mobile-components 0.0.4 → 0.0.6

package/src/listas/HojaDeFiltros.tsx

@@ -6,6 +6,7 @@ import MaterialIcons from "@expo/vector-icons/MaterialIcons";
 import React from "react";
 import { Modal, Pressable, ScrollView, Switch, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useTextos } from "../idioma";
 
 /**
  * La hoja de filtros y orden de una lista (viajes, recursos), a pantalla completa
@@ -35,17 +36,18 @@ export default function HojaDeFiltros({
     const c = usePaleta();
     const styles = useStyles();
     const insets = useSafeAreaInsets();
+    const t = useTextos();
     return (
         <Modal visible={abierta} animationType="slide" onRequestClose={onCerrar}>
             <View style={[styles.hoja, { paddingTop: insets.top + 10 }]}>
                 <View style={styles.cabecera}>
-                    <TouchableOpacity onPress={onCerrar} accessibilityLabel="Cerrar">
+                    <TouchableOpacity onPress={onCerrar} accessibilityLabel={t.comun.cerrar}>
                         <MaterialIcons name="arrow-back" size={45} color={c.primary} />
                     </TouchableOpacity>
-                    <Text style={styles.titulo}>Filtros</Text>
+                    <Text style={styles.titulo}>{t.listas.filtros}</Text>
                     {hayAlgo ? (
                         <TouchableOpacity onPress={onQuitar}>
-                            <Text style={styles.limpiar}>Quitar</Text>
+                            <Text style={styles.limpiar}>{t.comun.quitar}</Text>
                         </TouchableOpacity>
                     ) : null}
                 </View>
@@ -54,9 +56,7 @@ export default function HojaDeFiltros({
 
                 <View style={{ paddingBottom: insets.bottom + 16 }}>
                     <BotonGrande onPress={onCerrar}>
-                        {visibles === null
-                            ? "Listo"
-                            : `Ver ${visibles} ${visibles === 1 ? nombres[0] : nombres[1]}`}
+                        {visibles === null ? t.comun.listo : t.listas.ver(visibles, nombres)}
                     </BotonGrande>
                 </View>
             </View>
@@ -205,17 +205,18 @@ export function OrdenDeLista({
     onOrdenar: (orden: string | null) => void;
     porOmision?: string;
 }) {
+    const t = useTextos();
     const descendente = orden?.startsWith("-") ?? false;
     const campo = orden?.replace(/^-/, "");
     const elegido = campos.find((c) => c.value === campo);
-    const sentidos = elegido?.sentidos ?? { asc: "Ascendente", desc: "Descendente" };
+    const sentidos = elegido?.sentidos ?? { asc: t.listas.ascendente, desc: t.listas.descendente };
     // El sentido con el que arranca va primero: en una fecha se lee «Recientes primero» antes
     // que «Antiguos primero».
     const ordenDeSentidos: ("asc" | "desc")[] =
         elegido?.primero === "desc" ? ["desc", "asc"] : ["asc", "desc"];
     return (
         <>
-            <SeccionDeFiltros>Ordenar por</SeccionDeFiltros>
+            <SeccionDeFiltros>{t.listas.ordenarPor}</SeccionDeFiltros>
             {porOmision ? (
                 <OpcionDeFiltro
                     texto={porOmision}
@@ -240,7 +241,7 @@ export function OrdenDeLista({
             ))}
             {campo !== undefined ? (
                 <>
-                    <SeccionDeFiltros>Sentido</SeccionDeFiltros>
+                    <SeccionDeFiltros>{t.listas.sentido}</SeccionDeFiltros>
                     {ordenDeSentidos.map((sentido) => (
                         <OpcionDeFiltro
                             key={sentido}

package/src/listas/ListaPaginada.tsx

@@ -7,6 +7,7 @@ import type MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIco
 import React from "react";
 import { ActivityIndicator, FlatList, RefreshControl } from "react-native";
 import { renglonesDe, type Pagina } from "./paginado";
+import { useTextos } from "../idioma";
 
 /** Lo que la lista lee de un `use…InfiniteQuery` de RTK Query. */
 export interface ConsultaPaginada<T> {
@@ -50,6 +51,7 @@ export default function ListaPaginada<T>({
 }: Props<T>) {
     const c = usePaleta();
     const styles = useStyles();
+    const t = useTextos();
     const renglones = renglonesDe(consulta.data);
     const total = consulta.data?.pages[0]?.count;
 
@@ -60,11 +62,11 @@ export default function ListaPaginada<T>({
         return (
             <EstadoVacio
                 icono="cloud-off-outline"
-                titulo="No se pudo cargar"
-                texto="Revisa tu señal e intenta de nuevo."
+                titulo={t.comun.noSePudoCargar}
+                texto={t.comun.revisaLaSenal}
             >
                 <BotonGrande icono="refresh" onPress={() => consulta.refetch()}>
-                    Reintentar
+                    {t.comun.reintentar}
                 </BotonGrande>
             </EstadoVacio>
         );
@@ -78,9 +80,7 @@ export default function ListaPaginada<T>({
             contentContainerStyle={[styles.contenido, !renglones.length && styles.vacia]}
             ListHeaderComponent={
                 total !== undefined && renglones.length ? (
-                    <Text style={styles.total}>
-                        {total === 1 ? `1 ${nombres[0]}` : `${total} ${nombres[1]}`}
-                    </Text>
+                    <Text style={styles.total}>{t.listas.cuantos(total, nombres)}</Text>
                 ) : null
             }
             ListEmptyComponent={

package/src/listas/piezas.tsx

@@ -20,6 +20,7 @@ import {
     type TextInputProps,
     type ViewStyle,
 } from "react-native";
+import { useTextos } from "../idioma";
 
 /**
  * Las piezas de las listas y las fichas: la cabecera de una lista (buscador y pestañas), la
@@ -58,6 +59,7 @@ export function Buscador({
 }) {
     const c = usePaleta();
     const styles = useStyles();
+    const t = useTextos();
     const Campo = Entrada ?? TextInput;
     return (
         <View style={[styles.buscador, style]}>
@@ -90,7 +92,7 @@ export function Buscador({
                 <Pressable
                     onPress={() => onCambiar("")}
                     hitSlop={8}
-                    accessibilityLabel="Borrar búsqueda"
+                    accessibilityLabel={t.listas.borrarBusqueda}
                 >
                     <MaterialCommunityIcons name="close-circle" size={22} color={c.secondary} />
                 </Pressable>
@@ -114,13 +116,14 @@ export interface FiltrosDeCabecera {
  */
 function BotonDeFiltros({ cuenta, punto, onPress }: FiltrosDeCabecera) {
     const c = usePaleta();
+    const t = useTextos();
     const styles = useStyles();
     const activo = Boolean(cuenta) || punto;
     return (
         <Pressable
             onPress={onPress}
             accessibilityRole="button"
-            accessibilityLabel={cuenta ? `Filtros, ${cuenta} puestos` : "Filtros y orden"}
+            accessibilityLabel={cuenta ? t.listas.filtrosPuestos(cuenta) : t.listas.filtrosYOrden}
             hitSlop={4}
             style={({ pressed }) => [
                 styles.botonDeFiltros,
@@ -361,6 +364,7 @@ export function RenglonDeContacto({
 }) {
     const c = usePaleta();
     const styles = useStyles();
+    const t = useTextos();
     const boton = (
         icono: React.ComponentProps<typeof MaterialCommunityIcons>["name"],
         etiqueta: string,
@@ -386,15 +390,17 @@ export function RenglonDeContacto({
                 {correo ? <Text style={styles.linea}>{correo}</Text> : null}
             </View>
             <View style={styles.acciones}>
-                {telefono ? boton("phone", `Llamar a ${nombre}`, `tel:${telefono}`) : null}
+                {telefono ? boton("phone", t.contacto.llamar(nombre), `tel:${telefono}`) : null}
                 {telefono
                     ? boton(
                           "whatsapp",
-                          `WhatsApp a ${nombre}`,
+                          t.contacto.whatsapp(nombre),
                           `https://wa.me/${digitos(telefono)}`,
                       )
                     : null}
-                {correo ? boton("email-outline", `Correo a ${nombre}`, `mailto:${correo}`) : null}
+                {correo
+                    ? boton("email-outline", t.contacto.correo(nombre), `mailto:${correo}`)
+                    : null}
             </View>
         </View>
     );
@@ -418,7 +424,7 @@ const abrirEnMapas = (direccion: string) => {
  * no hay renglón. Es el hermano de `RenglonDeContacto`.
  */
 export function RenglonDeDireccion({
-    etiqueta = "Dirección",
+    etiqueta,
     lineas,
     enHoja,
 }: {
@@ -430,13 +436,14 @@ export function RenglonDeDireccion({
 }) {
     const c = usePaleta();
     const styles = useStyles();
+    const t = useTextos();
     const presentes = lineas.map((l) => l?.trim()).filter((l): l is string => Boolean(l));
     if (!presentes.length) return null;
     return (
         <Pressable
             onPress={() => abrirEnMapas(presentes.join(", "))}
             accessibilityRole="link"
-            accessibilityLabel={`Abrir en el mapa: ${presentes.join(", ")}`}
+            accessibilityLabel={t.contacto.abrirEnElMapa(presentes.join(", "))}
             style={({ pressed }) => [
                 styles.renglon,
                 enHoja && styles.renglonEnHoja,
@@ -444,7 +451,7 @@ export function RenglonDeDireccion({
             ]}
         >
             <View style={styles.renglonTexto}>
-                <Text style={styles.etiqueta}>{etiqueta}</Text>
+                <Text style={styles.etiqueta}>{etiqueta ?? t.contacto.direccion}</Text>
                 {presentes.map((l, i) => (
                     <Text key={i} style={i === 0 ? styles.valor : styles.linea}>
                         {l}
@@ -544,9 +551,9 @@ export function EstadoDeHoja({
 }) {
     const c = usePaleta();
     const styles = useStyles();
+    const t = useTextos();
     if (cargando) return <ActivityIndicator color={c.primary} />;
-    if (fallo)
-        return <Text style={styles.linea}>No se pudo cargar. Jala la ficha para releer.</Text>;
+    if (fallo) return <Text style={styles.linea}>{t.ficha.seccionNoCargo}</Text>;
     return vacio ? <Text style={styles.linea}>{vacio}</Text> : null;
 }
 

package/src/pantallas/PantallaDeAcceso.tsx

@@ -10,6 +10,7 @@ import { setErrors } from "../formularios/errores";
 import TextoDeAccesoControlado from "../formularios/TextoDeAccesoControlado";
 import { crearEstilos, usePaleta } from "../tema";
 import { Text } from "../texto";
+import { useTextos } from "../idioma";
 
 // Mismo corte que ContenidoDePantalla: de aquí para abajo es teléfono.
 const ANCHO_DE_TABLETA = 700;
@@ -58,6 +59,7 @@ export default function PantallaDeAcceso({
     const form = useForm<DatosDeAcceso>({ defaultValues: { username: "", password: "" } });
     const [entrando, setEntrando] = useState(false);
     const [aviso, setAviso] = useState<string | null>(null);
+    const t = useTextos();
 
     const entrar = form.handleSubmit(async (datos) => {
         setEntrando(true);
@@ -77,7 +79,7 @@ export default function PantallaDeAcceso({
         } catch {
             // `onEntrar` contesta lo que conoce; lo que se le escape no deja el botón cargando.
             Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
-            setAviso("No se pudo iniciar sesión. Intente de nuevo.");
+            setAviso(t.acceso.noSePudo);
         } finally {
             setEntrando(false);
         }
@@ -97,13 +99,13 @@ export default function PantallaDeAcceso({
                 <TextoDeAccesoControlado
                     name="username"
                     control={form.control}
-                    etiqueta="Usuario"
+                    etiqueta={t.acceso.usuario}
                     entrada={{ autoCapitalize: "none" }}
                 />
                 <TextoDeAccesoControlado
                     name="password"
                     control={form.control}
-                    etiqueta="Contraseña"
+                    etiqueta={t.acceso.contrasena}
                     contrasena
                     entrada={{ autoCapitalize: "none" }}
                 />
@@ -116,7 +118,7 @@ export default function PantallaDeAcceso({
                 onPress={entrar}
                 style={styles.boton}
             >
-                Iniciar Sesión
+                {t.acceso.entrar}
             </Button>
         </>
     );

package/src/pantallas/PantallaDeEdicion.tsx

@@ -8,6 +8,7 @@ import EstadoVacio from "../componentes/EstadoVacio";
 import Nota from "../componentes/Nota";
 import { mensajeDeError } from "../formularios/errores";
 import { crearEstilos, usePaleta } from "../tema";
+import { useTextos } from "../idioma";
 
 /**
  * El armazón de una pantalla que edita algo (un viaje, un tracto, una caja, un operador). Dos
@@ -43,19 +44,24 @@ export function EsperaDeEdicion({
 }) {
     const c = usePaleta();
     const styles = useStyles();
+    const t = useTextos();
     return (
         <View style={styles.root}>
             <CabeceraEmpujada eyebrow={eyebrow} titulo="…" />
             {!puede ? (
-                <EstadoVacio icono="lock-outline" titulo="No tienes permiso" texto={sinPermiso} />
+                <EstadoVacio
+                    icono="lock-outline"
+                    titulo={t.edicion.sinPermiso}
+                    texto={sinPermiso}
+                />
             ) : consulta.isError ? (
                 <EstadoVacio
                     icono="cloud-alert"
-                    titulo={`No se pudo cargar ${queEs}`}
-                    texto={mensajeDeError(consulta.error, "Revisa la señal e intenta de nuevo.")}
+                    titulo={t.edicion.noSePudoCargar(queEs)}
+                    texto={mensajeDeError(consulta.error, t.comun.revisaLaSenal)}
                 >
                     <BotonGrande icono="refresh" modo="contorno" onPress={consulta.refetch}>
-                        Reintentar
+                        {t.comun.reintentar}
                     </BotonGrande>
                 </EstadoVacio>
             ) : (
@@ -71,7 +77,7 @@ export function FormularioDeEdicion({
     error,
     guardando,
     onGuardar,
-    textoDeGuardar = "Guardar",
+    textoDeGuardar,
     children,
 }: {
     eyebrow: string;
@@ -86,6 +92,7 @@ export function FormularioDeEdicion({
 }) {
     const styles = useStyles();
     const insets = useSafeAreaInsets();
+    const t = useTextos();
     return (
         <View style={styles.root}>
             <CabeceraEmpujada eyebrow={eyebrow} titulo={titulo} />
@@ -99,7 +106,7 @@ export function FormularioDeEdicion({
                 </ScrollView>
                 <View style={[styles.pie, { paddingBottom: insets.bottom + 16 }]}>
                     <BotonGrande icono="check" onPress={onGuardar} cargando={guardando}>
-                        {guardando ? "Guardando…" : textoDeGuardar}
+                        {guardando ? t.edicion.guardando : (textoDeGuardar ?? t.edicion.guardar)}
                     </BotonGrande>
                 </View>
             </KeyboardAvoidingView>

package/src/pantallas/PantallaDeFicha.tsx

@@ -6,6 +6,7 @@ import BotonGrande from "../componentes/BotonGrande";
 import CabeceraEmpujada from "../componentes/CabeceraEmpujada";
 import EstadoVacio from "../componentes/EstadoVacio";
 import { crearEstilos, usePaleta } from "../tema";
+import { useTextos } from "../idioma";
 
 /** Lo que la ficha lee de un `use…Query` de RTK Query. */
 interface ConsultaDeFicha {
@@ -54,6 +55,7 @@ export default function PantallaDeFicha({
     const c = usePaleta();
     const styles = useStyles();
     const insets = useSafeAreaInsets();
+    const t = useTextos();
 
     let cuerpo: React.ReactNode;
     if (consulta.isLoading) {
@@ -62,17 +64,17 @@ export default function PantallaDeFicha({
         cuerpo = esNoEncontrado(consulta.error) ? (
             <EstadoVacio
                 icono="file-hidden"
-                titulo="No existe"
-                texto="Puede que lo hayan borrado, o que no tengas permiso de verlo."
+                titulo={t.ficha.noExiste}
+                texto={t.ficha.noExisteTexto}
             />
         ) : (
             <EstadoVacio
                 icono="cloud-off-outline"
-                titulo="No se pudo cargar"
-                texto="Revisa tu señal e intenta de nuevo."
+                titulo={t.comun.noSePudoCargar}
+                texto={t.comun.revisaLaSenal}
             >
                 <BotonGrande icono="refresh" onPress={() => consulta.refetch()}>
-                    Reintentar
+                    {t.comun.reintentar}
                 </BotonGrande>
             </EstadoVacio>
         );

package/src/pantallas/PantallaDeHistorial.tsx

@@ -8,6 +8,7 @@ import EstadoVacio from "../componentes/EstadoVacio";
 import Tarjeta from "../componentes/Tarjeta";
 import { crearEstilos, renglon, tipografia, usePaleta, type Paleta } from "../tema";
 import { Text } from "../texto";
+import { type Idioma, type Textos, useIdiomaDeLaLibreria, useTextos } from "../idioma";
 
 /**
  * Un movimiento de la bitácora de un registro, como lo responde cualquier endpoint `historial/`
@@ -64,20 +65,20 @@ const partirTipo = (tipo: string) => {
 };
 
 /** El valor de un campo tal como viene de la bitácora, listo para pintarse. */
-const formatear = (valor: unknown): string => {
+const formatear = (valor: unknown, t: Textos): string => {
     if (valor === null || valor === undefined || valor === "") return "—";
-    if (typeof valor === "boolean") return valor ? "Sí" : "No";
+    if (typeof valor === "boolean") return valor ? t.comun.si : t.comun.no;
     if (Array.isArray(valor)) return valor.length ? valor.join(", ") : "—";
     if (typeof valor === "object") return JSON.stringify(valor);
     return String(valor);
 };
 
 /** La fecha y hora del movimiento, en la hora del teléfono. */
-const fechaHora = (iso: string) => {
+const fechaHora = (iso: string, idioma: Idioma) => {
     const fecha = new Date(iso);
     return Number.isNaN(fecha.getTime())
         ? "—"
-        : fecha.toLocaleString("es-MX", {
+        : fecha.toLocaleString(idioma === "en" ? "en-US" : "es-MX", {
               day: "2-digit",
               month: "short",
               year: "numeric",
@@ -102,6 +103,8 @@ export function TarjetaDeEvento({
 }) {
     const c = usePaleta();
     const styles = useStyles();
+    const t = useTextos();
+    const idioma = useIdiomaDeLaLibreria();
     const [abierto, setAbierto] = React.useState(false);
 
     const { accion, modelo } = partirTipo(evento.history_type);
@@ -121,16 +124,18 @@ export function TarjetaDeEvento({
                 <View style={styles.flex}>
                     <Text style={styles.titulo}>{modelo}</Text>
                     <Text style={styles.linea}>
-                        {[accion, evento.history_user || "Sistema"].filter(Boolean).join(" · ")}
+                        {[accion, evento.history_user || t.historial.sistema]
+                            .filter(Boolean)
+                            .join(" · ")}
                     </Text>
-                    <Text style={styles.linea}>{fechaHora(evento.history_date)}</Text>
+                    <Text style={styles.linea}>{fechaHora(evento.history_date, idioma)}</Text>
                 </View>
             </View>
 
             {/* Un arreglo vacío es «se guardó sin mover nada»; nulo es la creación, que no lista
                 cambios. */}
             {!abierto && cambiados?.length === 0 ? (
-                <Text style={styles.sinCambios}>Sin cambios en los campos.</Text>
+                <Text style={styles.sinCambios}>{t.historial.sinCambios}</Text>
             ) : null}
 
             {visibles.map((campo) => {
@@ -140,7 +145,7 @@ export function TarjetaDeEvento({
                         <Text style={[styles.etiqueta, cambiado && styles.etiquetaCambiada]}>
                             {labels[campo]}
                         </Text>
-                        <Text style={styles.valor}>{formatear(evento[campo])}</Text>
+                        <Text style={styles.valor}>{formatear(evento[campo], t)}</Text>
                     </View>
                 );
             })}
@@ -154,10 +159,10 @@ export function TarjetaDeEvento({
                 >
                     <Text style={styles.alternarTexto}>
                         {abierto
-                            ? "Ocultar campos"
+                            ? t.historial.ocultarCampos
                             : cambiados?.length
-                              ? "Ver todos los campos"
-                              : "Ver los campos"}
+                              ? t.historial.verTodos
+                              : t.historial.verCampos}
                     </Text>
                     <MaterialCommunityIcons
                         name={abierto ? "chevron-up" : "chevron-down"}
@@ -205,20 +210,21 @@ export default function PantallaDeHistorial({
     const insets = useSafeAreaInsets();
     const { data, isLoading, isFetching, isError, refetch } = consulta;
     const eventos = data?.history ?? [];
+    const t = useTextos();
 
     return (
         <View style={styles.root}>
-            <CabeceraEmpujada eyebrow={eyebrow} titulo="Historial" />
+            <CabeceraEmpujada eyebrow={eyebrow} titulo={t.historial.titulo} />
             {/* El error sólo se queda con la pantalla cuando no hay nada que enseñar: un refresco
                 que falla no debe borrar el historial que ya se estaba leyendo. */}
             {isError && !data ? (
                 <EstadoVacio
                     icono="cloud-off-outline"
-                    titulo="No se pudo cargar el historial"
-                    texto="Revisa tu señal e intenta de nuevo."
+                    titulo={t.historial.noCargo}
+                    texto={t.comun.revisaLaSenal}
                 >
                     <BotonGrande icono="refresh" modo="contorno" onPress={() => refetch()}>
-                        Reintentar
+                        {t.comun.reintentar}
                     </BotonGrande>
                 </EstadoVacio>
             ) : isLoading ? (
@@ -240,7 +246,7 @@ export default function PantallaDeHistorial({
                     }
                 >
                     {eventos.length === 0 ? (
-                        <EstadoVacio icono="history" titulo="Sin movimientos registrados" />
+                        <EstadoVacio icono="history" titulo={t.historial.sinMovimientos} />
                     ) : (
                         eventos.map((evento, indice) => (
                             // El backend no da una llave por evento (mezcla modelos con ids que se

package/src/pantallas/PantallaDePerfil.tsx

@@ -13,16 +13,17 @@ import {
     type PreferenciaDeTema,
 } from "../tema";
 import { Text } from "../texto";
+import { type Textos, useTextos } from "../idioma";
 
 /**
  * La apariencia: **igual que el teléfono** por omisión, o fija. Tres opciones y no un interruptor de
  * «modo oscuro», como el del portal: con un interruptor, quien lo toca una vez ya no vuelve a seguir
  * al teléfono.
  */
-const APARIENCIAS: Pestana<PreferenciaDeTema>[] = [
-    { key: "sistema", label: "Teléfono", icono: "cellphone" },
-    { key: "claro", label: "Claro", icono: "white-balance-sunny" },
-    { key: "oscuro", label: "Oscuro", icono: "weather-night" },
+const aparienciasDe = (t: Textos): Pestana<PreferenciaDeTema>[] => [
+    { key: "sistema", label: t.perfil.telefono, icono: "cellphone" },
+    { key: "claro", label: t.perfil.claro, icono: "white-balance-sunny" },
+    { key: "oscuro", label: t.perfil.oscuro, icono: "weather-night" },
 ];
 
 /**
@@ -52,10 +53,11 @@ export default function PantallaDePerfil({
     const styles = useStyles();
     const [tema, setTema] = usePreferenciaDeTema();
     const insets = useSafeAreaInsets();
+    const t = useTextos();
 
     return (
         <View style={styles.root}>
-            <CabeceraEmpujada eyebrow={rotulo} titulo="Perfil" />
+            <CabeceraEmpujada eyebrow={rotulo} titulo={t.perfil.titulo} />
 
             <ContenidoDePantalla paddingBottom={insets.bottom + 20}>
                 <ScrollView
@@ -66,13 +68,13 @@ export default function PantallaDePerfil({
                         {/* Paper recorta título y subtítulo a un renglón por omisión: un nombre
                             largo con la letra al 180% se perdía. */}
                         <Card.Title
-                            title={nombre || "N/A"}
+                            title={nombre || t.comun.noDisponible}
                             titleVariant={"titleLarge"}
                             titleStyle={{ fontWeight: "bold" }}
                             titleNumberOfLines={0}
                             subtitleNumberOfLines={0}
                             subtitleStyle={renglon(tipografia.secundario)}
-                            subtitle={subtitulo || "N/A"}
+                            subtitle={subtitulo || t.comun.noDisponible}
                             subtitleVariant={"bodySmall"}
                             left={(props) => (
                                 <Avatar.Text
@@ -85,8 +87,8 @@ export default function PantallaDePerfil({
                     </Card>
 
                     <View style={styles.apariencia}>
-                        <Text style={styles.rotulo}>Apariencia</Text>
-                        <Pestanas pestanas={APARIENCIAS} activa={tema} onSelect={setTema} />
+                        <Text style={styles.rotulo}>{t.perfil.apariencia}</Text>
+                        <Pestanas pestanas={aparienciasDe(t)} activa={tema} onSelect={setTema} />
                     </View>
 
                     {/* El tope de ancho vive en este View y no en el Button: el Surface de
@@ -100,7 +102,7 @@ export default function PantallaDePerfil({
                             loading={saliendo}
                             disabled={saliendo}
                         >
-                            Cerrar sesión
+                            {t.perfil.cerrarSesion}
                         </Button>
                     </View>
                     {children}