@acvl/mobile-components 0.0.0-stage → 0.0.1

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;

package/src/componentes/Rotulo.tsx

@@ -0,0 +1,21 @@
+import { Text } from "../texto";
+import { crearEstilos, renglon, tipografia } from "../tema";
+
+/** El rótulo de una sección de un formulario, en mayúsculas: «Referencias», «Sello». */
+const Rotulo = ({ children }: { children: string }) => {
+    const styles = useStyles();
+    return <Text style={styles.rotulo}>{children}</Text>;
+};
+
+const useStyles = crearEstilos((c) => ({
+    rotulo: {
+        ...renglon(tipografia.etiqueta),
+        fontWeight: "800",
+        color: c.secondary,
+        textTransform: "uppercase",
+        letterSpacing: 0.8,
+        marginTop: 8,
+    },
+}));
+
+export default Rotulo;

package/src/componentes/RotuloDeSeccion.tsx

@@ -0,0 +1,71 @@
+import { crearEstilos, renglon, tipografia, usePaleta } from "../tema";
+import { Text } from "../texto";
+import { Pressable, useWindowDimensions, View } from "react-native";
+
+interface Props {
+    children: string;
+    /** El número de la sección, en un círculo rojo (gris si es cero). Sin él, sólo el rótulo. */
+    cuantas?: number;
+    /**
+     * La puerta a lo que la sección resume, a la derecha: «Editar ›», «Ver todos ›». Va en el rótulo
+     * y no como botón aparte para que no le robe un renglón a la lista.
+     */
+    accion?: { texto: string; onPress: () => void };
+}
+
+/**
+ * El rótulo de una sección de lista —«EN CURSO», «PENDIENTES 3»—, el `SectionLabel` de las
+ * revisiones de wms con la letra grande de las apps.
+ */
+const RotuloDeSeccion = ({ children, cuantas, accion }: Props) => {
+    const c = usePaleta();
+    const styles = useStyles();
+    // El círculo crece con la letra del sistema, igual que el número que lleva adentro.
+    const { fontScale } = useWindowDimensions();
+    const alto = renglon(tipografia.etiqueta).lineHeight * fontScale;
+
+    return (
+        <View style={styles.root}>
+            <Text style={styles.texto}>{children}</Text>
+            {cuantas != null ? (
+                <View
+                    style={[
+                        styles.cuenta,
+                        { minWidth: alto, height: alto, borderRadius: alto / 2 },
+                        { backgroundColor: cuantas > 0 ? c.primary : c.secondaryLight },
+                    ]}
+                >
+                    <Text style={styles.cuentaTexto}>{cuantas}</Text>
+                </View>
+            ) : null}
+            {accion ? (
+                <Pressable
+                    onPress={accion.onPress}
+                    accessibilityRole="button"
+                    hitSlop={8}
+                    style={styles.accion}
+                >
+                    <Text style={styles.accionTexto}>{accion.texto} ›</Text>
+                </Pressable>
+            ) : null}
+        </View>
+    );
+};
+
+const useStyles = crearEstilos((c) => ({
+    root: { flexDirection: "row", alignItems: "center", gap: 8, flexWrap: "wrap" },
+    texto: {
+        ...renglon(tipografia.etiqueta),
+        color: c.texto,
+        textTransform: "uppercase",
+        letterSpacing: 1.4,
+        fontWeight: "800",
+    },
+    cuenta: { paddingHorizontal: 6, alignItems: "center", justifyContent: "center" },
+    cuentaTexto: { ...renglon(tipografia.etiqueta), color: c.sobrePrimario, fontWeight: "800" },
+    // `marginLeft: auto` la manda a la orilla derecha sin un separador que mida nada.
+    accion: { marginLeft: "auto" },
+    accionTexto: { ...renglon(tipografia.etiqueta), color: c.primary, fontWeight: "800" },
+}));
+
+export default RotuloDeSeccion;

package/src/componentes/Tarjeta.tsx

@@ -0,0 +1,44 @@
+import { Pressable, View, type StyleProp, type ViewStyle } from "react-native";
+import { crearEstilos } from "../tema";
+
+/**
+ * La tarjeta de la casa, sola: la superficie, sus esquinas y su aire, con lo que se le ponga
+ * adentro. Es de lo que están hechas `TarjetaDeLista` y las fichas; una pantalla la usa para lo que
+ * no es un renglón de lista —un bloque de fotos, el resumen de un cobro, un grupo de campos—.
+ *
+ * **Sin sombra**: en oscuro casi no se ve, así que lo que separa la tarjeta del fondo es el color
+ * de la superficie y, en oscuro, un borde. Con `onPress` se toca y se atenúa al presionarla.
+ */
+export default function Tarjeta({
+    children,
+    onPress,
+    style,
+}: {
+    children: React.ReactNode;
+    onPress?: () => void;
+    style?: StyleProp<ViewStyle>;
+}) {
+    const styles = useStyles();
+    if (!onPress) return <View style={[styles.tarjeta, style]}>{children}</View>;
+    return (
+        <Pressable
+            onPress={onPress}
+            accessibilityRole="button"
+            style={({ pressed }) => [styles.tarjeta, style, pressed && styles.presionada]}
+        >
+            {children}
+        </Pressable>
+    );
+}
+
+const useStyles = crearEstilos((c) => ({
+    tarjeta: {
+        backgroundColor: c.superficie,
+        borderRadius: 14,
+        padding: 14,
+        gap: 4,
+        borderWidth: c.esOscuro ? 1 : 0,
+        borderColor: c.secondaryLighter,
+    },
+    presionada: { opacity: 0.7 },
+}));

package/src/componentes/TarjetaDeDatos.tsx

@@ -0,0 +1,62 @@
+import { Text } from "../texto";
+import { crearEstilos, renglon, tipografia } from "../tema";
+import { useWindowDimensions, View } from "react-native";
+
+/** Desde qué ancho los datos van a dos columnas: una tableta. */
+const ANCHO_A_DOS_COLUMNAS = 700;
+
+/**
+ * Datos de solo lectura, cada uno con su rótulo arriba: la ficha de una estancia de caseta, la de
+ * un viaje o un tracto en la oficina.
+ *
+ * **En una pantalla ancha van a dos columnas**; en un teléfono, uno debajo del otro. Los vacíos no
+ * se pintan. `atenuada` es la de algo que ya no cuenta (un movimiento anulado).
+ */
+const TarjetaDeDatos = ({
+    datos,
+    atenuada,
+}: {
+    datos: [string, string | null | undefined][];
+    atenuada?: boolean;
+}) => {
+    const styles = useStyles();
+    const { width } = useWindowDimensions();
+    const dosColumnas = width >= ANCHO_A_DOS_COLUMNAS;
+    return (
+        <View
+            style={[
+                styles.tarjeta,
+                dosColumnas && styles.tarjetaAncha,
+                atenuada && styles.atenuada,
+            ]}
+        >
+            {datos
+                .filter(([, valor]) => valor)
+                .map(([etiqueta, valor]) => (
+                    <View key={etiqueta} style={[styles.dato, dosColumnas && styles.datoEnColumna]}>
+                        <Text style={styles.etiquetaDeDato}>{etiqueta}</Text>
+                        <Text style={styles.valor}>{valor}</Text>
+                    </View>
+                ))}
+        </View>
+    );
+};
+
+const useStyles = crearEstilos((c) => ({
+    tarjeta: { backgroundColor: c.superficie, borderRadius: 14, padding: 14, gap: 10 },
+    tarjetaAncha: { flexDirection: "row", flexWrap: "wrap", columnGap: 24, rowGap: 12 },
+    atenuada: { opacity: 0.55 },
+    dato: { gap: 2 },
+    // Dos por renglón: la mitad del ancho menos la mitad del espacio entre columnas.
+    datoEnColumna: { width: "48%", flexGrow: 1 },
+    etiquetaDeDato: {
+        ...renglon(tipografia.etiqueta),
+        fontWeight: "800",
+        color: c.secondary,
+        textTransform: "uppercase",
+        letterSpacing: 0.8,
+    },
+    valor: { ...renglon(tipografia.subtitulo), fontWeight: "800", color: c.texto },
+}));
+
+export default TarjetaDeDatos;