/* ========================================================================== Rspiro — estilos propios sobre Liquid Glass (base.css) Parte de la hoja de la app estacion, que a su vez venía de Gastos: el sistema visual es el mismo en las tres. Aquí solo cambia el vocabulario de las clases (familias y productos en vez de equipos y contadores) y lo propio del resumen mensual. La app es de tema claro siempre (el lleva data-tema="claro", que apaga todo el bloque oscuro de la hoja base): un solo tema bien afinado en vez de dos a medias. ========================================================================== */ :root { /* El índigo y el violeta de Gastos: es el aspecto que se busca. El azul del icono se queda en el fondo y en los orbes, que es donde no compite con los acentos. */ --acento: #5b6cff; --acento-2: #8a5cf6; --acento-vivo: #7c8bff; --sombra-suave: 0 12px 28px -14px rgba(91, 108, 255, 0.35); --barra-tabs-alto: 76px; /* Las tarjetas llevan algo más de cuerpo que las de la hoja base: sobre un fondo tan claro, al 55 % quedaban casi invisibles. */ --vidrio-fondo: rgba(255, 255, 255, 0.66); --vidrio-borde: rgba(255, 255, 255, 0.85); } .oculto { display: none !important; } /* Algo más de aire bajo el último campo: con solo el alto de la barra, el teclado y la propia barra dejaban el último input pegado al borde. */ #contenido { padding-bottom: calc(var(--barra-tabs-alto) + env(safe-area-inset-bottom) + 34px); } .fondo { background: linear-gradient(160deg, #eef2ff 0%, #fdeef7 45%, #e8f7ff 100%); } .orbe-1 { background: #a5b4ff; } .orbe-2 { background: #f3b0e0; } .orbe-3 { background: #a0e6ff; } /* ---------- Login ---------- */ .vista-login { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: calc(env(safe-area-inset-top) + 24px) 24px calc(env(safe-area-inset-bottom) + 24px); } .login-tarjeta { width: 100%; max-width: 380px; padding: 36px 28px; text-align: center; margin: auto; } .login-logo { width: 88px; height: 88px; border-radius: 22px; margin: 0 auto 14px; display: block; border: 1px solid rgba(28, 28, 46, 0.07); box-shadow: 0 10px 24px -12px rgba(28, 28, 46, 0.28); } .login-sub { color: var(--tinta-suave); font-size: 15px; margin: 6px 0 24px; } .login-tarjeta form { display: grid; gap: 14px; text-align: left; } /* ---------- Cabecera ---------- */ /* En Hoy y Mes no hay nada que contar, y una píldora vacía se ve como un defecto. Se esconde sola cuando no tiene texto. */ .cabecera-fecha:empty { display: none; } .cabecera-fecha { font-size: 13px; font-weight: 600; color: var(--acento); background: rgba(91, 108, 255, 0.12); padding: 6px 12px; border-radius: 999px; white-space: nowrap; } /* ---------- Sub-pestañas (control segmentado, como en Gastos) ---------- */ .segmentos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 16px; margin-bottom: 16px; } .segmento { font: inherit; font-size: 14px; font-weight: 600; color: var(--tinta-suave); background: transparent; border: none; border-radius: 12px; padding: 9px 4px; min-height: 44px; /* objetivo táctil mínimo del HIG */ cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: background 0.18s, color 0.18s, transform 0.22s var(--muelle); } .segmento:active { transform: scale(0.95); transition-duration: 0.11s; transition-timing-function: var(--salida); } .segmento.activo { background: rgba(255, 255, 255, 0.92); color: var(--color-grupo, var(--acento)); box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--color-grupo, var(--acento)) 55%, transparent); } /* ---------- Captura del día ---------- */ /* Una tarjeta por familia, con su color en el punto y en las cifras: es lo que le da ritmo y color a la pantalla, como las categorías de Gastos. */ .grupo-tarjeta { padding: 13px 16px; margin-bottom: 10px; } .tarjeta-titulo { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 9px; } .punto-color { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; background: var(--color-grupo, var(--acento)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-grupo, var(--acento)) 18%, transparent); } /* Las casillas van a dos columnas: así la vitrina entera y las nueve recetas programas caben en pantalla casi sin scroll. */ .rejilla-casillas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .casilla { display: grid; gap: 4px; min-width: 0; } .casilla-etiqueta { font-size: 10.5px; font-weight: 700; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .casilla input { font: inherit; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tinta); background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: var(--radio-campo); padding: 9px 12px; width: 100%; min-width: 0; min-height: 46px; outline: none; -webkit-appearance: none; appearance: none; text-align: right; transition: box-shadow 0.15s var(--salida), border-color 0.15s; } .casilla input:focus { border-color: color-mix(in srgb, var(--color-grupo, var(--acento)) 55%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-grupo, var(--acento)) 16%, transparent); } .casilla input.guardado { border-color: rgba(52, 199, 89, 0.55); box-shadow: 0 0 0 4px rgba(52, 199, 89, 0.16); } /* Casilla bloqueada: el cierre del mes anterior se lee, no se toca. iOS pinta los input desactivados con su gris y su opacidad propios, así que se fijan a mano para que no se apague más de la cuenta y la cifra siga leyéndose. */ .casilla input:disabled { background: rgba(28, 28, 46, 0.05); border-color: rgba(28, 28, 46, 0.08); color: var(--tinta-suave); -webkit-text-fill-color: var(--tinta-suave); opacity: 1; cursor: default; } /* Explicación a la izquierda y «Editar» a la derecha, dentro de la tarjeta de cierre. Fuera del a propósito: ahí dentro, el botón plegaría la tarjeta al pulsarlo. */ .cierre-acciones { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .cierre-acciones p { margin: 0; } .cierre-acciones .boton-titulo { flex: 0 0 auto; min-height: 44px; /* objetivo táctil del HIG */ margin-right: -8px; /* el aire del padding no descuadra el borde */ } .casilla-pie { font-size: 12px; font-weight: 600; color: var(--tinta-suave); min-height: 15px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .casilla-pie strong { color: var(--color-grupo, var(--acento)); font-variant-numeric: tabular-nums; } .casilla-pie.aviso, .casilla-pie.aviso strong { color: var(--peligro); } /* Subtítulo dentro de una tarjeta (cada concepto de «días cerrada») */ .sub-nombre { font-size: 13px; font-weight: 700; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: 0.04em; margin: 14px 0 8px; } .sub-nombre:first-of-type { margin-top: 4px; } .sub-etiqueta { font-size: 13px; font-weight: 600; margin: 10px 0 6px; } /* Punto de color al principio de una línea de ingresos */ .punto-linea { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: middle; background: var(--color-grupo, var(--acento)); } /* Las casillas dentro de las tarjetas de Liquidación y Ajustes se separan del título y entre bloques igual que en la captura */ .rejilla-casillas + .sub-nombre { margin-top: 16px; } /* Entrada escalonada de las tarjetas al cambiar de grupo (Lavado / Boxes / Aspirado). Ahí la vista no se mueve, así que el escalonado es lo que hace que el cambio se aprecie sin alargar la duración de nada. Solo las cinco primeras: más allá, el usuario ya está esperando. */ .entra-escalonado > * { animation: aparecer 0.3s var(--salida) backwards; animation-delay: calc(min(var(--i, 0), 4) * 40ms); } /* ---------- Acumulados del mes ---------- */ .linea-resumen { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 14px; padding: 14px 0; border-bottom: 1px solid rgba(28, 28, 46, 0.07); } .linea-resumen:last-of-type { border-bottom: none; } .linea-nombre { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; } .linea-detalle { font-size: 13px; color: var(--tinta-suave); } .linea-importe { grid-row: span 2; align-self: center; font-size: 21px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; } .linea-cifra { color: var(--color-grupo, var(--acento)); font-weight: 700; font-variant-numeric: tabular-nums; } /* ---------- Secciones plegables ---------- */ .desplegable { padding: 4px 16px; margin-bottom: 10px; } .desplegable summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; padding: 12px 2px; min-height: 52px; /* objetivo táctil del HIG */ } .desplegable summary::-webkit-details-marker { display: none; } .desplegable-titulo { flex: 1 1 auto; min-width: 0; } .desplegable-cifra { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--tinta-suave); white-space: nowrap; } .desplegable-flecha { font-size: 22px; font-weight: 600; color: var(--tinta-suave); rotate: 90deg; transition: rotate 0.28s var(--muelle); } .desplegable[open] .desplegable-flecha { rotate: -90deg; } .desplegable[open] .desplegable-cifra { color: var(--color-grupo, var(--acento)); } .desplegable > *:not(summary):last-child { margin-bottom: 12px; } @keyframes desplegar { from { opacity: 0; translate: 0 -14px; } to { opacity: 1; translate: 0 0; } } .desplegable[open] > *:not(summary) { animation: desplegar 0.28s var(--salida) backwards; } /* Escalonado corto para que el despliegue se perciba sin hacerse lento */ .desplegable[open] > *:not(summary):nth-child(3) { animation-delay: 0.045s; } .desplegable[open] > *:not(summary):nth-child(n+4) { animation-delay: 0.09s; } /* ---------- Calendario de control ---------- El control se lleva mirando el mes entero, no leyendo una lista de números de día. Tres estados: verde el día completo, ámbar el que va a medias (café sí y vitrina no, o al revés) y rojo el que no tiene nada. El ámbar es el que de verdad se busca: un día rojo se ve venir, uno a medias pasa desapercibido. */ .calendario { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin: 2px 0 12px; } .calendario-cabecera { font-size: 11px; font-weight: 700; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: 0.04em; text-align: center; padding-bottom: 2px; } .calendario-vacio { visibility: hidden; } .calendario-dia { font: inherit; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; aspect-ratio: 1; min-height: 44px; /* objetivo táctil del HIG */ display: grid; place-items: center; color: var(--tinta); background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(255, 255, 255, 0.85); border-radius: var(--radio-campo); cursor: pointer; transition: transform 0.24s var(--muelle), background 0.2s, border-color 0.2s; } .calendario-dia:active { transform: scale(0.9); transition-duration: 0.11s; transition-timing-function: var(--salida); } /* La cifra lleva una pizca de tinta: el rojo puro sobre su propio fondo se queda en 3,2:1 y a 15 px eso no se lee. Así sube por encima de 4,5:1 sin dejar de ser rojo. */ .calendario-dia.sin-lectura { color: color-mix(in srgb, var(--peligro) 65%, var(--tinta)); background: rgba(255, 59, 48, 0.12); border-color: rgba(255, 59, 48, 0.3); } .calendario-dia.con-lectura { color: color-mix(in srgb, var(--exito) 55%, var(--tinta)); background: rgba(52, 199, 89, 0.13); border-color: rgba(52, 199, 89, 0.32); } .calendario-dia.hoy { color: var(--acento); border-color: var(--acento); box-shadow: 0 0 0 3px rgba(91, 108, 255, 0.14); } .calendario-dia.futuro { color: rgba(28, 28, 46, 0.3); background: transparent; border-color: rgba(255, 255, 255, 0.5); cursor: default; } .calendario-pie { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--tinta-suave); margin-bottom: 12px; } .calendario-punto { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; } .calendario-punto.sin-lectura { background: rgba(255, 59, 48, 0.55); } .calendario-punto.con-lectura { background: rgba(52, 199, 89, 0.6); } /* ---------- Liquidación ---------- */ .resumen-linea { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: baseline; padding: 9px 0; font-size: 15px; border-bottom: 1px solid rgba(28, 28, 46, 0.07); } .resumen-linea:last-child { border-bottom: none; } .resumen-linea .concepto { min-width: 0; } .resumen-linea .concepto small { display: block; font-size: 12px; color: var(--tinta-suave); } .resumen-linea .importe { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 84px; text-align: right; } .resumen-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; margin-top: 6px; border-top: 1.5px solid rgba(28, 28, 46, 0.15); font-size: 17px; font-weight: 700; } .resumen-total .importe { font-variant-numeric: tabular-nums; } /* El neto del mes: es lo primero que se mira al entrar en Resumen */ .neto { text-align: center; padding: 22px 20px; } .neto-etiqueta { font-size: 13px; font-weight: 600; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: 0.04em; } .neto-valor { font-size: 44px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin: 4px 0; } /* El neto no es un aprobado ni un suspenso —en estacion el cuadre sí lo era—, así que va en tinta, con la autoridad del importe grande de Gastos. El único color de la tarjeta es el rojo de la merma, que es lo que hay que mirar. */ .neto-valor { color: var(--tinta); } .neto-nota { font-size: 13px; color: var(--tinta-suave); } .aviso-huecos { display: flex; gap: 10px; align-items: flex-start; background: rgba(255, 149, 0, 0.12); border: 1px solid rgba(255, 149, 0, 0.3); border-radius: var(--radio-campo); padding: 12px 14px; margin-bottom: 16px; font-size: 14px; } /* ---------- Selector de día y de mes ---------- */ .selector-mes { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; } .selector-mes .mes-actual { font-size: 17px; font-weight: 700; text-align: center; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .boton-circulo:disabled { opacity: 0.35; cursor: default; } /* ---------- Ajustes ---------- */ .fila-ajuste { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; min-height: 52px; border-bottom: 1px solid rgba(28, 28, 46, 0.07); } /* Sin esto la etiqueta no puede encogerse y empuja el campo fuera de la pantalla: la página pasa a medir más que el móvil, el navegador aleja el zoom y hasta los toques en la barra de pestañas caen donde no deben. */ .fila-ajuste .etiqueta { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; } .fila-ajuste input { flex: 0 0 auto; } .fila-ajuste:last-child { border-bottom: none; } .fila-ajuste input { font: inherit; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tinta); background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: var(--radio-campo); padding: 10px 12px; max-width: 120px; min-height: 44px; text-align: right; outline: none; -webkit-appearance: none; appearance: none; transition: box-shadow 0.15s var(--salida), border-color 0.15s; } .fila-ajuste input:focus { border-color: rgba(91, 108, 255, 0.5); box-shadow: 0 0 0 4px rgba(91, 108, 255, 0.15); } .fila-ajuste input.guardado { border-color: rgba(52, 199, 89, 0.55); box-shadow: 0 0 0 4px rgba(52, 199, 89, 0.16); } .fila-ajuste .etiqueta { font-size: 15px; font-weight: 600; } .fila-ajuste .etiqueta small { display: block; font-size: 12px; font-weight: 400; color: var(--tinta-suave); } /* ---------- Botones y campos con el acento nuevo ---------- */ .boton-primario { background: linear-gradient(135deg, var(--acento), var(--acento-2)); box-shadow: 0 10px 22px -10px rgba(91, 108, 255, 0.6); } .boton-secundario { color: var(--acento); background: rgba(91, 108, 255, 0.12); } .boton-circulo { color: var(--acento); } .campo input:focus, .campo select:focus, .campo textarea:focus { border-color: rgba(91, 108, 255, 0.5); box-shadow: 0 0 0 4px rgba(91, 108, 255, 0.15); } .chip.activo { background: var(--chip-color, var(--acento)); box-shadow: 0 8px 18px -8px var(--chip-color, var(--acento)); } .boton-titulo { color: var(--acento); } :focus-visible { border-color: rgba(91, 108, 255, 0.5); box-shadow: 0 0 0 4px rgba(91, 108, 255, 0.15); } @media (hover: hover) and (pointer: fine) { .boton-secundario:hover { background: rgba(91, 108, 255, 0.2); } .tab-boton:not(.activo):hover { color: var(--acento); background: rgba(91, 108, 255, 0.1); } .segmento:not(.activo):hover { color: var(--acento); } } /* ---------- Barra de pestañas: más cuerpo que el resto del cristal ---------- Sobre este gradiente tan claro, y con el orbe cian justo debajo, el blanco al 60 % del material de barra se fundía con el fondo: no se veía dónde acababa la barra y la pastilla del tab activo no se leía. Aquí abajo pasa contenido en movimiento, así que se le sube la opacidad, se le pone un filo de tinta y una sombra más marcada. Solo `.barra-tabs`: la cabecera se queda como estaba. */ .barra-tabs { background: rgba(255, 255, 255, 0.88); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); border-color: rgba(255, 255, 255, 0.95); box-shadow: 0 18px 40px -14px rgba(28, 28, 46, 0.45), 0 0 0 0.5px rgba(28, 28, 46, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9); } .tab-boton { color: rgba(28, 28, 46, 0.75); } /* inactivo: era --tinta-suave, 0.68 */ /* El acento puro sobre su propia pastilla se queda en 4,2:1, por debajo del mínimo para una etiqueta de 11 px. Una pizca de tinta lo sube a ~4,8:1 sin cambiarle el tono. El icono va con currentColor y acompaña. */ .tab-boton.activo { color: color-mix(in srgb, var(--acento) 75%, var(--tinta)); background: rgba(91, 108, 255, 0.17); } /* Los modales necesitan más cuerpo que una tarjeta: sobre una pantalla con contenido, el cristal al 55 % deja leer el texto de detrás a través del diálogo. Se sube la opacidad y el blur, y se mantiene el material. */ .hoja, .dialogo { background: rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); } /* Los errores se quedan más tiempo y se distinguen por color: un aviso que desaparece antes de leerlo no sirve de nada */ .toast-error { background: rgba(255, 59, 48, 0.92); } /* ---------- Escritorio ---------- */ @media (min-width: 700px) and (min-height: 600px) { .segmentos { max-width: 460px; margin-inline: auto; } /* Arriba y pegada a la cabecera, la barra no necesita tanta sombra: se le devuelve la corta que traía `base.css`, que la regla de móvil pisaba. */ .barra-tabs { box-shadow: 0 12px 26px -12px rgba(28, 28, 46, 0.4), 0 0 0 0.5px rgba(28, 28, 46, 0.07); } /* Con sitio de sobra, las tarjetas van en dos columnas */ #hoy-grupos { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 20px; align-items: start; } } /* ---------- Calendario: tres estados en vez de dos ---------- Aquí un día puede estar a medias (café anotado pero no la vitrina, o al revés), y esa es justo la situación que interesa cazar: con dos colores se veía verde un día en el que faltaba la mitad del parte. */ .calendario-dia.parcial { background: rgba(255, 149, 0, 0.14); color: #a35c00; border-color: rgba(255, 149, 0, 0.3); } .calendario-punto.parcial { background: #ff9500; } /* ---------- Ajustes: una fila por producto ---------- Nombre editable, precio y papelera. El nombre se puede corregir en el sitio porque la clave interna no cambia al renombrar: el histórico sigue atado a ella, así que un cambio de rótulo no parte el mes en dos. */ .fila-producto { display: grid; grid-template-columns: 1fr 96px 40px; align-items: center; gap: 8px; padding: 8px 0; min-height: 56px; border-bottom: 1px solid rgba(28, 28, 46, 0.07); } .fila-producto:last-of-type { border-bottom: none; } .fila-producto input { font: inherit; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tinta); background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: var(--radio-campo); padding: 10px 12px; min-width: 0; min-height: 46px; outline: none; -webkit-appearance: none; appearance: none; transition: box-shadow 0.15s var(--salida), border-color 0.15s; } .fila-producto input.precio { text-align: right; } .fila-producto input:focus { border-color: color-mix(in srgb, var(--color-grupo, var(--acento)) 55%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-grupo, var(--acento)) 16%, transparent); } .fila-producto input.guardado { border-color: rgba(52, 199, 89, 0.55); box-shadow: 0 0 0 4px rgba(52, 199, 89, 0.16); } .boton-quitar { width: 40px; height: 44px; padding: 0; display: grid; place-items: center; font-size: 17px; line-height: 1; color: var(--peligro); background: rgba(255, 59, 48, 0.1); border: none; border-radius: var(--radio-campo); cursor: pointer; transition: transform 0.3s var(--muelle); } .boton-quitar:active { transform: scale(0.9); } /* ---------- Resumen: el neto y sus dos mitades ---------- El importe grande es el neto (lo vendido menos lo tirado); debajo, las dos cifras de las que sale. Ver solo la venta engaña: una mañana buena con media bandeja a la basura no es una mañana buena. */ .neto-desglose { display: flex; justify-content: center; gap: 22px; margin-top: 10px; font-size: 13px; color: var(--tinta-suave); } .neto-desglose strong { display: block; font-size: 16px; color: var(--tinta); font-weight: 700; } .neto-desglose span { text-align: center; } .neto-desglose .malo strong { color: var(--peligro); } /* Porcentaje de merma sobre lo vendido, en la línea de cada producto */ .pastilla-merma { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: rgba(255, 59, 48, 0.12); color: #c02c22; } .pastilla-merma.leve { background: rgba(52, 199, 89, 0.14); color: #1d7a3a; } /* Total del día al pie de una tarjeta de captura */ .pie-tarjeta { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(28, 28, 46, 0.08); font-size: 14px; color: var(--tinta-suave); } .pie-tarjeta .importe { font-size: 19px; font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }