{
  "meta": {
    "producto": "Billetera de Carga",
    "version": "1.0.0",
    "fecha": "2026-09-08",
    "origen": "Mockup de Claude Design — Billetera de Carga.dc.html",
    "unidad": "px (puntos lógicos iOS · dp en Android)",
    "referencia": "iPhone 16 Pro — 402 × 874 pt"
  },
  "comment_color": "El sistema whitelabel se define con 4 colores por marca (+2 de apoyo). Los 3 derivados NUNCA se escriben a mano: se calculan por mezcla sobre ink/brand. Cambiar de marca = cambiar estos 6 valores.",
  "color": {
    "brand": {
      "descripcion": "Marca. Acción primaria, acentos, estados positivos, iconos activos.",
      "uso": [
        "botón primario",
        "iconos activos",
        "insignia disponible",
        "anillo de progreso",
        "enlaces"
      ]
    },
    "deep": {
      "descripcion": "Profundo. Superficies oscuras de marca, siempre con texto blanco encima.",
      "uso": [
        "tarjeta de saldo (E1)",
        "toast",
        "fondo de foto de portada"
      ]
    },
    "ink": {
      "descripcion": "Tinta. Texto principal y base de los derivados.",
      "uso": [
        "texto principal",
        "base de line y muted"
      ]
    },
    "paper": {
      "descripcion": "Fondo de pantalla.",
      "uso": [
        "fondo de la app",
        "fondo de barras fijas",
        "fondo de hojas inferiores"
      ]
    },
    "surface": {
      "descripcion": "Superficie de tarjetas, campos y filas.",
      "uso": [
        "tarjetas",
        "campos de formulario",
        "filas de lista",
        "barra de pestañas (al 90%)"
      ]
    },
    "onBrand": {
      "descripcion": "Texto e iconos sobre brand.",
      "uso": [
        "etiqueta del botón primario",
        "check dentro de la casilla activa"
      ]
    }
  },
  "derivados": {
    "line": {
      "formula": "mix(ink, transparent, 13%)",
      "uso": "bordes de tarjetas, separadores, borde de campos en reposo"
    },
    "muted": {
      "formula": "mix(ink, transparent, 68%)",
      "uso": "texto secundario, iconos inactivos, placeholders"
    },
    "tint": {
      "formula": "mix(brand, transparent, 16%)",
      "uso": "fondo de insignias, contenedores de icono, pista del anillo, avisos"
    }
  },
  "marcas": {
    "grc": {
      "nombre": "GRC",
      "modo": "claro y oscuro",
      "porDefecto": true,
      "brand": "#0e8a46",
      "deep": "#0b3d29",
      "ink": "#101614",
      "paper": "#f1f4f2",
      "surface": "#ffffff",
      "onBrand": "#ffffff",
      "oscuro": {
        "comment": "Se activa desde F5 · Configuración → Tema (Claro / Oscuro / Automático). El verde sube un paso para dar 5.3:1 como texto sobre el fondo; con ese verde más claro el texto del botón pasa a oscuro.",
        "brand": "#1a9c53",
        "deep": "#12523a",
        "ink": "#eef2ee",
        "paper": "#0d1210",
        "surface": "#161c18",
        "onBrand": "#06140c"
      }
    },
    "nocturne": {
      "nombre": "Nocturne",
      "modo": "oscuro",
      "brand": "#9184d9",
      "deep": "#0f111b",
      "ink": "#e9e9ed",
      "paper": "#161826",
      "surface": "#232532",
      "onBrand": "#161826"
    },
    "volt": {
      "nombre": "Volt",
      "modo": "claro",
      "brand": "#0f9b6c",
      "deep": "#0a3a2b",
      "ink": "#111815",
      "paper": "#f1f4f2",
      "surface": "#ffffff",
      "onBrand": "#ffffff"
    },
    "solaris": {
      "nombre": "Solaris",
      "modo": "claro",
      "brand": "#b8542f",
      "deep": "#3a1a10",
      "ink": "#1a1411",
      "paper": "#f7f3ef",
      "surface": "#ffffff",
      "onBrand": "#ffffff"
    },
    "comment_oscuro": "Las marcas con bloque «oscuro» tienen las dos versiones. Nocturne y DevChefs son oscuras siempre; Volt y Solaris, claras siempre. Los 3 derivados se calculan igual en los dos modos."
  },
  "colorFijo": {
    "comment": "Únicos colores que NO cambian con la marca.",
    "ubicacionUsuario": "#1d7cf2",
    "pinBadgeFondo": "#ffffff",
    "pinBadgeTexto": "#101614",
    "textoSobreDeep": "#ffffff",
    "textoSobreDeepSecundario": "mix(#ffffff, transparent, 62%)"
  },
  "tipografia": {
    "familias": {
      "texto": {
        "nombre": "Inter",
        "pesos": [
          400,
          500,
          600,
          700
        ],
        "fallback": "system-ui, sans-serif"
      },
      "mono": {
        "nombre": "IBM Plex Mono",
        "pesos": [
          400,
          500
        ],
        "fallback": "monospace",
        "uso": "códigos de pantalla, versiones legales, etiquetas micro en mayúsculas, ejes de gráfica"
      }
    },
    "escala": [
      {
        "token": "display",
        "size": 46,
        "weight": 600,
        "tracking": "-0.035em",
        "lineHeight": 1,
        "uso": "valor central del anillo (SOC, cuenta regresiva)"
      },
      {
        "token": "amount",
        "size": 40,
        "weight": 600,
        "tracking": "-0.03em",
        "uso": "importe del recibo (D2)"
      },
      {
        "token": "balance",
        "size": 34,
        "weight": 600,
        "tracking": "-0.03em",
        "uso": "saldo en la tarjeta del wallet (E1)"
      },
      {
        "token": "title-xl",
        "size": 27,
        "weight": 600,
        "tracking": "-0.03em",
        "lineHeight": 1.15,
        "uso": "título de acceso (A7 tipografía)"
      },
      {
        "token": "title-lg",
        "size": 25,
        "weight": 600,
        "tracking": "-0.025em",
        "lineHeight": 1.2,
        "uso": "título de bienvenida (A2)"
      },
      {
        "token": "title-md",
        "size": 21,
        "weight": 600,
        "tracking": "-0.02em",
        "lineHeight": 1.2,
        "uso": "título de pantalla en contenido (B3, D4)"
      },
      {
        "token": "title-sm",
        "size": 20,
        "weight": 600,
        "tracking": "-0.02em",
        "uso": "título centrado de tarjeta de acceso, encabezado de proceso"
      },
      {
        "token": "sheet-title",
        "size": 19,
        "weight": 600,
        "tracking": "-0.02em",
        "uso": "título de hoja inferior, nombre de perfil"
      },
      {
        "token": "dialog",
        "size": 18,
        "weight": 600,
        "tracking": "-0.02em",
        "lineHeight": 1.25,
        "uso": "título de diálogo de confirmación"
      },
      {
        "token": "header",
        "size": 17,
        "weight": 600,
        "tracking": "-0.01em",
        "uso": "título del header, nombre de sitio en tarjeta del mapa"
      },
      {
        "token": "section",
        "size": 16,
        "weight": 600,
        "uso": "encabezado de sección, dato destacado"
      },
      {
        "token": "button",
        "size": 15,
        "weight": 600,
        "uso": "etiqueta de botón primario, valor de campo"
      },
      {
        "token": "body-strong",
        "size": 14.5,
        "weight": 600,
        "uso": "título de fila, tipo de conector"
      },
      {
        "token": "body",
        "size": 14,
        "weight": 500,
        "uso": "texto de fila, movimientos, importes de lista"
      },
      {
        "token": "body-sm",
        "size": 13.5,
        "weight": 400,
        "lineHeight": 1.55,
        "uso": "párrafos, mensajes de chat"
      },
      {
        "token": "meta",
        "size": 13,
        "weight": 400,
        "uso": "texto secundario, filas de resumen"
      },
      {
        "token": "caption",
        "size": 12.5,
        "weight": 400,
        "lineHeight": 1.5,
        "uso": "metadatos, direcciones, avisos"
      },
      {
        "token": "label",
        "size": 12,
        "weight": 500,
        "uso": "etiqueta de campo de formulario"
      },
      {
        "token": "badge",
        "size": 11.5,
        "weight": 600,
        "uso": "insignias de estado, chips de conteo"
      },
      {
        "token": "micro",
        "size": 11,
        "weight": 400,
        "uso": "pie de métrica del anillo"
      },
      {
        "token": "mono-label",
        "size": 10.5,
        "weight": 400,
        "tracking": "0.12em",
        "transform": "uppercase",
        "familia": "mono",
        "uso": "mes en historial, versión legal"
      },
      {
        "token": "mono-micro",
        "size": 9.5,
        "weight": 400,
        "tracking": "0.14em",
        "transform": "uppercase",
        "familia": "mono",
        "uso": "leyenda bajo el anillo, anotaciones de slot"
      }
    ]
  },
  "radio": {
    "chip": 999,
    "pill": 999,
    "control": 12,
    "field": 12,
    "row": 14,
    "card": 16,
    "cardLg": 20,
    "chart": 18,
    "tabbar": 22,
    "sheet": 26,
    "loginSheet": 30,
    "device": 48,
    "iconBox": {
      "sm": 10,
      "md": 12,
      "lg": 14,
      "xl": 16
    },
    "checkbox": 6
  },
  "medida": {
    "ctaPrimario": 54,
    "ctaSecundario": 50,
    "botonEnFila": 46,
    "campo": 52,
    "campoTarjetaLogin": 54,
    "botonHeader": 36,
    "botonFlotante": 40,
    "buscadorMapa": 48,
    "sliderCargar": 60,
    "sliderPerilla": 48,
    "anilloExterior": 212,
    "anilloInterior": 172,
    "grosorAnillo": 20,
    "avatarPerfil": 74,
    "logoAcerca": 76,
    "iconBoxSm": 38,
    "iconBoxMd": 42,
    "iconBoxLg": 44,
    "miniaturaSitio": 78,
    "heroSitio": 216,
    "heroPortadaLogin": 238,
    "cabeceraLoginTarjeta": 252,
    "areaImagenBienvenida": 270,
    "interruptor": {
      "ancho": 44,
      "alto": 26,
      "perilla": 20
    },
    "checkbox": 20,
    "estrella": 32
  },
  "espaciado": {
    "comment": "Valores realmente usados. Los laterales estándar son 16 (24 en el bloque de acceso).",
    "pantallaX": 16,
    "pantallaXAcceso": 24,
    "pantallaXFormulario": 20,
    "gapSeccion": 16,
    "gapTarjeta": 14,
    "gapCampo": 12,
    "gapFila": 10,
    "gapEtiqueta": 7,
    "cardPadding": 16,
    "rowPadding": 14,
    "sheetPadding": {
      "top": 14,
      "x": 20,
      "bottom": 30
    }
  },
  "safeArea": {
    "comment": "Medidas del marco del mockup. En la app real usar las safe areas del sistema; estos son los mínimos que respeta el diseño.",
    "statusBar": 62,
    "headerPaddingTop": 66,
    "contenidoSinHeaderPaddingTop": 66,
    "accesoPaddingTop": 74,
    "barraFijaPaddingBottom": 26,
    "homeIndicator": 34,
    "tabBarBottom": 22,
    "paddingInferiorConTabs": 120,
    "botonFlotanteTop": 62
  },
  "sombra": {
    "tarjetaMapa": "0 14px 40px rgba(0,0,0,.28)",
    "buscadorMapa": "0 8px 22px rgba(0,0,0,.18)",
    "botonFlotante": "0 6px 16px rgba(0,0,0,.25)",
    "hojaInferior": "0 -18px 50px rgba(0,0,0,.35)",
    "hojaLogin": "0 -12px 34px rgba(0,0,0,.09)",
    "tabBar": "0 14px 34px rgba(0,0,0,.24)",
    "toast": "0 14px 34px rgba(0,0,0,.35)",
    "dialogo": "0 20px 50px rgba(0,0,0,.4)",
    "pinMapa": "drop-shadow(0 8px 12px rgba(0,0,0,.32))",
    "badgePin": "0 5px 14px rgba(0,0,0,.24)",
    "cargadorLogin": "drop-shadow(0 18px 26px rgba(0,0,0,.16))"
  },
  "movimiento": {
    "curva": "cubic-bezier(.32,.72,0,1)",
    "transicionPantalla": {
      "duracion": 300,
      "curva": "cubic-bezier(.32,.72,0,1)"
    },
    "push": {
      "desde": "translateX(30px)",
      "opacidadInicial": 0.35,
      "uso": "avanzar en la jerarquía"
    },
    "pop": {
      "desde": "translateX(-30px)",
      "opacidadInicial": 0.35,
      "uso": "regresar"
    },
    "fade": {
      "desde": "scale(.985)",
      "opacidadInicial": 0,
      "uso": "cambio de pestaña, entrar/salir de sesión"
    },
    "sheet": {
      "desde": "translateY(34px)",
      "opacidadInicial": 0.2,
      "uso": "hoja inferior"
    },
    "carruselImagen": {
      "duracion": 420,
      "desde": "translateY(14px) scale(.97)"
    },
    "carruselTexto": {
      "duracion": 480,
      "desde": "translateX(16px)"
    },
    "toast": {
      "duracion": 260,
      "desde": "translateY(14px)",
      "visible": 2800
    },
    "spinner": {
      "duracion": 800,
      "curva": "linear"
    },
    "pulso": {
      "duracion": 1600,
      "curva": "ease-in-out",
      "opacidad": [
        0.3,
        1
      ]
    },
    "splashAuto": 1900
  },
  "reglasDeNegocioDelMockup": {
    "comment": "Valores de ejemplo que el backend debe sustituir por datos reales.",
    "tarifaEjemplo": 7.7,
    "monedas": "MXN",
    "montosSugeridos": [
      100,
      200,
      500
    ],
    "rangoAbono": {
      "min": 20,
      "max": 5000
    },
    "duracionReserva": [
      10,
      20
    ],
    "ventanaConexionCable": 30,
    "capacidadBateriaEjemplo": 40,
    "socInicialEjemplo": 38,
    "potenciaEjemplo": 48.2
  }
}