@acvl/mobile-components 0.0.0-stage → 0.0.2

package/src/componentes/CabeceraEmpujada.tsx

@@ -0,0 +1,69 @@
+import AccionesDelEncabezado, {
+    type AccionDelEncabezado,
+} from "../componentes/AccionesDelEncabezado";
+import { Text } from "../texto";
+import { crearEstilos, tipografia, usePaleta } from "../tema";
+import MaterialIcons from "@expo/vector-icons/MaterialIcons";
+import { router } from "expo-router";
+import type React from "react";
+import { TouchableOpacity, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+/**
+ * La cabecera de una pantalla empujada encima de las pestañas: atrás, el rótulo, el título y, si
+ * hay, sus acciones a la derecha (`AccionesDelEncabezado`). La usan las fichas, las
+ * pantallas de edición y el perfil.
+ *
+ * `estado` va debajo del título —el estado de la ficha, normalmente un `Chip`— y no a su lado: con
+ * acciones a la derecha, un folio largo y su chip en el mismo renglón se peleaban el ancho.
+ */
+const CabeceraEmpujada = ({
+    eyebrow,
+    titulo,
+    acciones,
+    estado,
+}: {
+    eyebrow: string;
+    titulo: string;
+    acciones?: AccionDelEncabezado[];
+    estado?: React.ReactNode;
+}) => {
+    const c = usePaleta();
+    const styles = useStyles();
+    const insets = useSafeAreaInsets();
+    return (
+        <View style={[styles.hdr, { paddingTop: insets.top + 10 }]}>
+            <View style={styles.hdrRow}>
+                <TouchableOpacity onPress={() => router.back()} accessibilityLabel="Atrás">
+                    <MaterialIcons name="arrow-back" size={45} color={c.primary} />
+                </TouchableOpacity>
+                {/* `flexShrink` y no `flex`: con acciones, el título les deja su hueco. */}
+                <View style={acciones?.length ? styles.tituloConAcciones : styles.titulo}>
+                    <Text style={styles.hdrEyebrow}>{eyebrow}</Text>
+                    <Text style={styles.hdrTitle}>{titulo}</Text>
+                    {estado ? <View style={styles.estado}>{estado}</View> : null}
+                </View>
+                {acciones?.length ? <AccionesDelEncabezado acciones={acciones} /> : null}
+            </View>
+        </View>
+    );
+};
+
+const useStyles = crearEstilos((c) => ({
+    hdr: { paddingHorizontal: 18, paddingBottom: 13, backgroundColor: c.superficie },
+    hdrRow: { flexDirection: "row", alignItems: "flex-end", gap: 8 },
+    titulo: { flex: 1, minWidth: 0 },
+    tituloConAcciones: { flexShrink: 1, minWidth: 0 },
+    hdrEyebrow: {
+        fontSize: tipografia.etiqueta,
+        color: c.secondaryLight,
+        textTransform: "uppercase",
+        letterSpacing: 1.6,
+        marginBottom: 4,
+        fontWeight: "600",
+    },
+    hdrTitle: { fontSize: tipografia.titulo, fontWeight: "900", color: c.primary },
+    estado: { marginTop: 6, flexDirection: "row", flexWrap: "wrap", gap: 6 },
+}));
+
+export default CabeceraEmpujada;

package/src/componentes/Chip.tsx

@@ -0,0 +1,60 @@
+import { Text } from "../texto";
+import { crearEstilos, type Paleta, renglon, tipografia, usePaleta } from "../tema";
+import { View, type StyleProp, type ViewStyle } from "react-native";
+
+/**
+ * El tono de un chip, por lo que quiere decir y no por su color: así un estado se ve igual en
+ * claro y en oscuro, y dos pantallas no le ponen dos colores a lo mismo.
+ */
+export type TonoDeChip = "exito" | "aviso" | "info" | "error" | "morado" | "neutro" | "primario";
+
+const colores = (c: Paleta, tono: TonoDeChip) => {
+    switch (tono) {
+        case "exito":
+            return c.exito;
+        case "aviso":
+            return { fondo: c.aviso.fondo, tinta: c.aviso.tinta };
+        case "info":
+            return c.info;
+        case "error":
+            return c.error;
+        case "morado":
+            return c.morado;
+        case "primario":
+            return { fondo: c.primary, tinta: c.sobrePrimario };
+        default:
+            return { fondo: c.superficieTenue, tinta: c.secondary };
+    }
+};
+
+/** Un estado en una pastilla: «En progreso», «Por vencer», «En viaje». */
+const Chip = ({
+    texto,
+    tono = "neutro",
+    style,
+}: {
+    texto: string;
+    tono?: TonoDeChip;
+    style?: StyleProp<ViewStyle>;
+}) => {
+    const c = usePaleta();
+    const styles = useStyles();
+    const { fondo, tinta } = colores(c, tono);
+    return (
+        <View style={[styles.chip, { backgroundColor: fondo }, style]}>
+            <Text style={[styles.texto, { color: tinta }]}>{texto}</Text>
+        </View>
+    );
+};
+
+const useStyles = crearEstilos(() => ({
+    chip: {
+        alignSelf: "flex-start",
+        paddingHorizontal: 9,
+        paddingVertical: 3,
+        borderRadius: 999,
+    },
+    texto: { ...renglon(tipografia.etiqueta), fontWeight: "700" },
+}));
+
+export default Chip;

package/src/componentes/ContenidoDePantalla.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { useWindowDimensions, View } from "react-native";
+import { KeyboardAvoidingView } from "react-native-keyboard-controller";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { crearEstilos } from "../tema";
+
+interface Props {
+    children: React.ReactNode;
+    paddingBottom?: number;
+    /**
+     * Cuando el hijo ya maneja el teclado por su cuenta (p. ej. un `KeyboardAwareScrollView`),
+     * `false` quita el `KeyboardAvoidingView` para no encimar dos manejadores del teclado.
+     */
+    avoidKeyboard?: boolean;
+}
+
+const BASE_PADDING = 20;
+
+/**
+ * El cuerpo de una pantalla debajo de su header: el fondo, el margen a los lados (el doble en una
+ * tableta, más lo que pida la muesca) y, por omisión, que esquive el teclado.
+ */
+const ContenidoDePantalla = ({ paddingBottom, avoidKeyboard = true, children }: Props) => {
+    const styles = useStyles();
+    const insets = useSafeAreaInsets();
+    const { width } = useWindowDimensions();
+    const horizontalPadding = width > 700 ? BASE_PADDING * 2 : BASE_PADDING;
+    const containerStyle = [
+        styles.container,
+        {
+            paddingTop: 20,
+            paddingLeft: horizontalPadding + insets.left,
+            paddingRight: horizontalPadding + insets.right,
+            paddingBottom: paddingBottom ?? 0,
+        },
+    ];
+    if (!avoidKeyboard) {
+        return <View style={containerStyle}>{children}</View>;
+    }
+    return (
+        // `behavior="padding"` funciona en ambas plataformas con edge-to-edge
+        // gracias a react-native-keyboard-controller (RN lo ignora en Android).
+        <KeyboardAvoidingView behavior="padding" style={containerStyle}>
+            {children}
+        </KeyboardAvoidingView>
+    );
+};
+
+const useStyles = crearEstilos((c) => ({
+    container: { flex: 1, backgroundColor: c.fondo },
+}));
+
+export default ContenidoDePantalla;

package/src/componentes/EstadoVacio.tsx

@@ -0,0 +1,45 @@
+import { crearEstilos, renglon, tipografia, usePaleta } from "../tema";
+import { Text } from "../texto";
+import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
+import React from "react";
+import { View } from "react-native";
+
+interface Props {
+    icono: React.ComponentProps<typeof MaterialCommunityIcons>["name"];
+    titulo: string;
+    texto?: string;
+    /** Una acción («Reintentar») que va debajo del texto, centrada con él. */
+    children?: React.ReactNode;
+}
+
+/**
+ * Lo que se pinta cuando una lista no tiene nada que enseñar. Ocupa todo el alto y centra lo suyo,
+ * así que una acción va como hijo: puesta después, como hermano, quedaba hasta abajo de la
+ * pantalla, debajo de la barra de pestañas.
+ */
+const EstadoVacio = ({ icono, titulo, texto, children }: Props) => {
+    const c = usePaleta();
+    const styles = useStyles();
+    return (
+        <View style={styles.root}>
+            <MaterialCommunityIcons name={icono} size={56} color={c.secondaryLight} />
+            <Text style={styles.titulo}>{titulo}</Text>
+            {texto ? <Text style={styles.texto}>{texto}</Text> : null}
+            {children ? <View style={styles.accion}>{children}</View> : null}
+        </View>
+    );
+};
+
+const useStyles = crearEstilos((c) => ({
+    root: { flex: 1, alignItems: "center", justifyContent: "center", gap: 10, padding: 24 },
+    titulo: {
+        ...renglon(tipografia.subtitulo),
+        fontWeight: "700",
+        color: c.secondaryDark,
+        textAlign: "center",
+    },
+    texto: { fontSize: tipografia.cuerpo, color: c.secondary, textAlign: "center" },
+    accion: { alignSelf: "stretch", marginTop: 14 },
+}));
+
+export default EstadoVacio;

package/src/componentes/Foto.tsx

@@ -0,0 +1,92 @@
+import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
+import React from "react";
+import { ActivityIndicator, Image, type ImageProps, StyleSheet, View } from "react-native";
+import { usePaleta } from "../tema";
+
+/**
+ * Una foto: del servidor (`ruta`, la que da el API) o del teléfono (`uri` local, que todavía no
+ * sube).
+ */
+export type FotoAVer = { ruta: string } | { uri: string };
+
+/** Cómo baja la app una foto del servidor: la `uri` local donde quedó. Rechaza si no se pudo. */
+export type BajarFoto = (ruta: string) => Promise<string>;
+
+const Bajar = React.createContext<BajarFoto | null>(null);
+
+/**
+ * Cómo se bajan las fotos del servidor en esta app. Va en el layout raíz, una vez.
+ *
+ * Es de la app y no de la librería porque las fotos piden la sesión: en Android, con la nueva
+ * arquitectura, el `Image` de React Native **no manda las `headers` del `source`**, así que una
+ * foto con `Authorization` se baja primero con `fetch` a un archivo (con el refresh del token de
+ * cada app) y se pinta el archivo. Sin proveedor, la `ruta` se pinta tal cual, como URL pública.
+ */
+export function ProveedorDeFotos({
+    bajar,
+    children,
+}: {
+    bajar: BajarFoto;
+    children: React.ReactNode;
+}) {
+    return <Bajar.Provider value={bajar}>{children}</Bajar.Provider>;
+}
+
+interface Props extends Omit<ImageProps, "source"> {
+    foto: FotoAVer;
+}
+
+/**
+ * Pinta una foto, venga de donde venga: la misma en una tira, el visor o una lista.
+ *
+ * Las del servidor se bajan primero con el `ProveedorDeFotos` de la app y se pinta el archivo
+ * local. Mientras baja, un indicador; si no se pudo, un icono de foto rota en vez de un cuadro gris
+ * sin explicación.
+ *
+ * Una miniatura lleva `resizeMethod="resize"`: en Android, sin él, cada cuadrito de 72 px
+ * decodifica la foto entera de 1920 px en memoria, y con varias la lista se arrastra.
+ */
+const Foto = ({ foto, style, onError, ...props }: Props) => {
+    const c = usePaleta();
+    const bajar = React.useContext(Bajar);
+    const ruta = "ruta" in foto ? foto.ruta : null;
+    // Lo bajado, con la ruta a la que corresponde: si la foto cambia, lo de la anterior no sirve.
+    const [bajada, setBajada] = React.useState<{ ruta: string; uri?: string; fallo?: boolean }>();
+
+    React.useEffect(() => {
+        if (!ruta || !bajar) return;
+        let vigente = true;
+        bajar(ruta)
+            .then((uri) => vigente && setBajada({ ruta, uri }))
+            .catch(() => vigente && setBajada({ ruta, fallo: true }));
+        return () => {
+            vigente = false;
+        };
+    }, [ruta, bajar]);
+
+    const deEstaRuta = bajada && bajada.ruta === ruta ? bajada : undefined;
+    const local = "uri" in foto ? foto.uri : bajar ? (deEstaRuta?.uri ?? null) : ruta;
+    const fallo = Boolean(deEstaRuta?.fallo);
+
+    if (fallo) {
+        return (
+            <View style={[style, styles.centro]}>
+                <MaterialCommunityIcons name="image-broken-variant" size={28} color={c.secondary} />
+            </View>
+        );
+    }
+    if (!local) {
+        return (
+            <View style={[style, styles.centro]}>
+                <ActivityIndicator color={c.secondary} />
+            </View>
+        );
+    }
+    return <Image {...props} style={style} source={{ uri: local }} onError={onError} />;
+};
+
+const styles = StyleSheet.create({
+    centro: { alignItems: "center", justifyContent: "center" },
+});
+
+export default Foto;

package/src/componentes/IconoDeRenglon.tsx

@@ -0,0 +1,42 @@
+import { renglon } from "../tema";
+import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
+import React from "react";
+import { useWindowDimensions, View, type StyleProp, type ViewStyle } from "react-native";
+
+interface Props {
+    name: React.ComponentProps<typeof MaterialCommunityIcons>["name"];
+    color: string;
+    /** El `fontSize` del texto que acompaña. Su estilo tiene que llevar `...renglon(fontSize)`. */
+    fontSize: number;
+    /** El tamaño del icono a escala 1. Por omisión, el de la letra. */
+    size?: number;
+    style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Un icono que acompaña a un renglón de texto y **se queda centrado en él aunque el operador
+ * agrande la letra del teléfono**.
+ *
+ * El texto crece con la escala del sistema (Ajustes › Tamaño de fuente; hay quien la trae al
+ * 180%) y un icono de tamaño fijo no: se quedaba chico y desfasado hacia arriba. Aquí el icono
+ * crece con la misma escala y va en una caja del alto del primer renglón, así que queda centrado
+ * contra la primera línea aunque el texto parta en varias. Para eso el texto necesita un alto de
+ * renglón explícito: el de `renglon()`, que es el mismo que usa esta caja.
+ */
+const IconoDeRenglon = ({ name, color, fontSize, size = fontSize, style }: Props) => {
+    const { fontScale } = useWindowDimensions();
+    const alto = renglon(fontSize).lineHeight * fontScale;
+
+    return (
+        <View
+            style={[
+                { height: alto, minWidth: alto, alignItems: "center", justifyContent: "center" },
+                style,
+            ]}
+        >
+            <MaterialCommunityIcons name={name} size={size * fontScale} color={color} />
+        </View>
+    );
+};
+
+export default IconoDeRenglon;

package/src/componentes/Logo.tsx

@@ -0,0 +1,34 @@
+import { Image } from "react-native";
+import { useEsOscuro } from "../tema";
+
+/**
+ * La bola del header, de los archivos de marca (`O:\Logo ACV`): **a color** en claro
+ * (`bola.png`, el «standalone») y **toda en blanco** en oscuro (`bola-blanca.png`, sacada del
+ * mismo archivo: lo rojo opaco y los trazos huecos), como el `Logo` del portal en oscuro.
+ */
+export const Logo = () => {
+    const oscuro = useEsOscuro();
+    return (
+        <Image
+            source={oscuro ? require("./logos/bola-blanca.png") : require("./logos/bola.png")}
+            // 42 × 36 conserva el aspecto de los PNG (242 × 210).
+            style={{ width: 42, height: 36, resizeMode: "contain" }}
+        />
+    );
+};
+
+/**
+ * El logo con las letras: el del login. En oscuro va **todo en blanco**, como el `Logo` del
+ * portal: `logo-blanco.png` sale del archivo de marca en blanco sobre negro
+ * (`O:\Logo ACV\acv-logo_2012-whitereversed`), con el negro vuelto transparente.
+ */
+export const LogoCompleto = () => {
+    const oscuro = useEsOscuro();
+    return (
+        <Image
+            source={oscuro ? require("./logos/logo-blanco.png") : require("./logos/logo.png")}
+            // 175 × 66 conserva el aspecto del PNG claro (318 × 120); el blanco cabe en la misma caja.
+            style={{ resizeMode: "contain", width: 175, height: 66 }}
+        />
+    );
+};

package/src/componentes/Nota.tsx

@@ -0,0 +1,37 @@
+import IconoDeRenglon from "../componentes/IconoDeRenglon";
+import { Text } from "../texto";
+import { crearEstilos, renglon, tipografia, usePaleta } from "../tema";
+import { View } from "react-native";
+
+/** Un aviso dentro de la pantalla: azul para informar, ámbar para advertir. */
+const Nota = ({ texto, tono = "info" }: { texto: string; tono?: "info" | "aviso" }) => {
+    const c = usePaleta();
+    const styles = useStyles();
+    const aviso = tono === "aviso";
+    return (
+        <View style={[styles.nota, aviso && styles.notaAviso]}>
+            <IconoDeRenglon
+                name={aviso ? "alert-outline" : "information-outline"}
+                fontSize={tipografia.cuerpo}
+                color={aviso ? c.aviso.tinta : c.info.tinta}
+            />
+            <Text style={[styles.notaTexto, aviso && styles.notaTextoAviso]}>{texto}</Text>
+        </View>
+    );
+};
+
+const useStyles = crearEstilos((c) => ({
+    nota: {
+        flexDirection: "row",
+        alignItems: "flex-start",
+        gap: 8,
+        backgroundColor: c.info.fondo,
+        borderRadius: 12,
+        padding: 14,
+    },
+    notaAviso: { backgroundColor: c.aviso.fondo },
+    notaTexto: { flex: 1, ...renglon(tipografia.cuerpo), color: c.info.tinta },
+    notaTextoAviso: { color: c.aviso.tinta },
+}));
+
+export default Nota;

package/src/componentes/OpcionesExcluyentes.tsx

@@ -0,0 +1,62 @@
+import IconoDeRenglon from "../componentes/IconoDeRenglon";
+import { Text } from "../texto";
+import { crearEstilos, renglon, tipografia, usePaleta } from "../tema";
+import { Pressable, View } from "react-native";
+
+/**
+ * Opciones excluyentes como tarjetas, una por renglón: la carga y la razón del cambio de sello en
+ * la caseta, la razón de un rechazo en la oficina.
+ */
+const OpcionesExcluyentes = <V extends string | boolean>({
+    opciones,
+    valor,
+    onElegir,
+}: {
+    opciones: readonly { valor: V; texto: string }[];
+    valor: V | null;
+    onElegir: (valor: V) => void;
+}) => {
+    const c = usePaleta();
+    const styles = useStyles();
+    return (
+        <View style={styles.opciones}>
+            {opciones.map((opcion) => {
+                const elegida = opcion.valor === valor;
+                return (
+                    <Pressable
+                        key={String(opcion.valor)}
+                        onPress={() => onElegir(opcion.valor)}
+                        accessibilityRole="radio"
+                        accessibilityState={{ selected: elegida }}
+                        style={[styles.opcion, elegida && styles.opcionElegida]}
+                    >
+                        <IconoDeRenglon
+                            name={elegida ? "radiobox-marked" : "radiobox-blank"}
+                            fontSize={tipografia.subtitulo}
+                            color={elegida ? c.primary : c.secondaryLight}
+                        />
+                        <Text style={styles.opcionTexto}>{opcion.texto}</Text>
+                    </Pressable>
+                );
+            })}
+        </View>
+    );
+};
+
+const useStyles = crearEstilos((c) => ({
+    opciones: { gap: 10 },
+    opcion: {
+        flexDirection: "row",
+        alignItems: "flex-start",
+        gap: 8,
+        backgroundColor: c.superficie,
+        borderRadius: 14,
+        borderWidth: 2,
+        borderColor: c.secondaryLighter,
+        padding: 14,
+    },
+    opcionElegida: { borderColor: c.primary, backgroundColor: c.primaryWash },
+    opcionTexto: { flex: 1, ...renglon(tipografia.subtitulo), fontWeight: "800", color: c.texto },
+}));
+
+export default OpcionesExcluyentes;

package/src/componentes/PantallaDeError.tsx

@@ -0,0 +1,76 @@
+import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
+import { useEffect } from "react";
+import { ScrollView } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { Text } from "../texto";
+import { crearEstilos, tipografia, usePaleta } from "../tema";
+import BotonGrande from "./BotonGrande";
+
+/** Lo que expo-router le pasa al `ErrorBoundary` de un layout. */
+export interface PropsDePantallaDeError {
+    error: Error;
+    retry: () => Promise<void>;
+}
+
+/**
+ * Lo que se ve cuando una pantalla truena al pintarse, en vez de la pantalla roja (en desarrollo) o
+ * de una app que se cierra sola (en producción). Es el `ErrorBoundary` de expo-router: lo exporta el
+ * layout raíz, envuelto para pasarle `onError`.
+ *
+ * El error se reporta aquí (`onError`, a Sentry): React no lo deja llegar al manejador global una
+ * vez que una frontera lo atrapa. «Reintentar» vuelve a montar la pantalla.
+ *
+ * No usa nada de Paper ni de un proveedor: si lo que tronó es el layout raíz, aquí no hay
+ * proveedores.
+ */
+const PantallaDeError = ({
+    error,
+    retry,
+    onError,
+    mensaje = "Esta pantalla no se pudo abrir. Intenta de nuevo; si vuelve a pasar, avisa a soporte.",
+}: PropsDePantallaDeError & {
+    onError?: (error: Error) => void;
+    /** Lo que se le dice a quien la ve: qué no se perdió y a quién avisar. */
+    mensaje?: string;
+}) => {
+    const c = usePaleta();
+    const styles = useStyles();
+    useEffect(() => {
+        onError?.(error);
+        // Se reporta una vez por error, aunque quien llama pase un `onError` nuevo en cada render.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [error]);
+
+    return (
+        <SafeAreaView style={styles.root}>
+            <ScrollView contentContainerStyle={styles.contenido}>
+                <MaterialCommunityIcons name="alert-octagon-outline" size={64} color={c.primary} />
+                <Text style={styles.titulo}>Algo salió mal</Text>
+                <Text style={styles.texto}>{mensaje}</Text>
+                <BotonGrande icono="refresh" onPress={() => void retry()}>
+                    Reintentar
+                </BotonGrande>
+            </ScrollView>
+        </SafeAreaView>
+    );
+};
+
+const useStyles = crearEstilos((c) => ({
+    root: { flex: 1, backgroundColor: c.fondo },
+    contenido: {
+        flexGrow: 1,
+        justifyContent: "center",
+        alignItems: "stretch",
+        gap: 16,
+        padding: 24,
+    },
+    titulo: {
+        fontSize: tipografia.titulo,
+        fontWeight: "800",
+        color: c.secondaryDark,
+        textAlign: "center",
+    },
+    texto: { fontSize: tipografia.cuerpo, color: c.secondary, textAlign: "center" },
+}));
+
+export default PantallaDeError;

package/src/componentes/Pestanas.tsx

@@ -0,0 +1,86 @@
+import { crearEstilos, renglon, tipografia, usePaleta } from "../tema";
+import { Text } from "../texto";
+import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
+import React from "react";
+import { Pressable, View } from "react-native";
+
+export interface Pestana<K extends string> {
+    key: K;
+    label: string;
+    icono: React.ComponentProps<typeof MaterialCommunityIcons>["name"];
+}
+
+interface Props<K extends string> {
+    pestanas: readonly Pestana<K>[];
+    activa: K;
+    onSelect: (key: K) => void;
+}
+
+/**
+ * La tira de pestañas dentro de una pantalla: la misma de las listas de acv-wms (Cobranza,
+ * Importaciones), con su icono, y la elegida en rojo sobre un lavado rojo. Allá se repite en
+ * cada pantalla; aquí es un componente para que cada sección nueva la reutilice.
+ *
+ * Los iconos son de MaterialCommunityIcons, la familia de Paper, y no de MaterialIcons como en
+ * wms: es la que tiene `progress-clock`, el de Actual.
+ *
+ * **El icono va arriba del texto**, no al lado como en wms: con la letra del operador
+ * (`tipografia.etiqueta`) tres rótulos en fila no caben en un teléfono, y el botón más alto
+ * también se atina mejor con prisa. El rótulo no se encoge por debajo de `etiqueta`, que es el
+ * mínimo: con la letra muy grande, parte en otro renglón.
+ */
+const Pestanas = <K extends string>({ pestanas, activa, onSelect }: Props<K>) => {
+    const c = usePaleta();
+    const styles = useStyles();
+    return (
+        <View style={styles.tabs}>
+            {pestanas.map((p) => {
+                const on = p.key === activa;
+                return (
+                    <Pressable
+                        key={p.key}
+                        onPress={() => onSelect(p.key)}
+                        accessibilityRole="tab"
+                        accessibilityState={{ selected: on }}
+                        style={[styles.tab, on && styles.tabOn]}
+                    >
+                        <MaterialCommunityIcons
+                            name={p.icono}
+                            size={22}
+                            color={on ? c.primary : c.secondaryLight}
+                        />
+                        <Text style={[styles.tabText, on && styles.tabTextOn]}>{p.label}</Text>
+                    </Pressable>
+                );
+            })}
+        </View>
+    );
+};
+
+const useStyles = crearEstilos((c) => ({
+    tabs: { flexDirection: "row", gap: 6, marginBottom: 12 },
+    tab: {
+        flex: 1,
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 2,
+        paddingVertical: 8,
+        paddingHorizontal: 6,
+        borderRadius: 10,
+        borderWidth: 1.5,
+        borderColor: "transparent",
+        backgroundColor: c.superficie,
+    },
+    tabOn: { borderColor: c.primary, backgroundColor: c.primaryWash },
+    tabText: {
+        ...renglon(tipografia.etiqueta),
+        fontWeight: "500",
+        color: c.secondaryLight,
+        textAlign: "center",
+    },
+    // Sólo el color, sin negritas: en negritas «Por iniciar» ya no cabía en un renglón y la pestaña
+    // crecía al elegirla. Lo elegido ya lo dicen el borde y el fondo.
+    tabTextOn: { color: c.primary },
+}));
+
+export default Pestanas;