/* * Cuaderno del prestamista — estilos. * Celular primero. Código de color fijo: VERDE = capital, ROJO = interés (KIT.md §2.14). * El atraso va en ámbar y los fallos en carmesí, para no confundirlos con el interés. * Los colores son fichas (tokens) en :root; el modo oscuro solo las redefine. */ :root { --fondo: #f2f5f3; /* blanco verdoso, como la franja blanca de la bandera a la sombra */ --superficie: #fdfefd; --superficie-2: #e9eeea; --linea: #d9e1db; --renglon: #cbd8cf; /* la raya bajo los títulos */ --tinta: #13201a; --tinta-suave: #536058; --acento: #1f47b8; /* tinta de bolígrafo azul */ --acento-suave: #e6ebf6; --verde: #0f7a43; --whatsapp: #1a9e4b; --verde-suave: #dcf1e4; --rojo: #c42b2b; --rojo-suave: #fbe4e1; --ambar: #8a5200; --ambar-suave: #fff0d4; --peligro: #9e1450; --peligro-suave: #fbe3ee; --sombra: none; --pestana-activa: #fdfefd; --demo-fondo: #131a26; --demo-texto: #f2f4f8; --grafico-rojo: #c42b2b; /* interés en los gráficos (validado para daltonismo con leyenda y tabla) */ --grafico-verde: #0f7a43; /* capital en los gráficos */ --estrella: #c98a00; /* las estrellas de confianza */ --radio: 10px; /* Letra: Archivo (la misma de la web), normal para leer y apretada para los títulos, como los carteles. Las cifras, tabulares: los importes se alinean en columnas. La de máquina de escribir, solo para códigos. */ --letra: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif; --letra-titulo: "Archivo", "Arial Narrow", "Segoe UI", system-ui, sans-serif; --letra-num: ui-monospace, "SF Mono", Menlo, Consolas, monospace; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fondo: #0f1412; --superficie: #161c19; --superficie-2: #1f2723; --linea: #2d3832; --renglon: #243650; --tinta: #e8eee9; --tinta-suave: #a5b2aa; --acento: #8fa9ff; --acento-suave: #1b2747; --verde: #4fcb8c; --whatsapp: #25d366; --verde-suave: #133322; --rojo: #ff7b72; --rojo-suave: #3b1b1b; --ambar: #ffc46a; --ambar-suave: #37280e; --peligro: #ff8fbf; --peligro-suave: #3a1426; --sombra: none; --pestana-activa: #1f2723; --demo-fondo: #05080c; --demo-texto: #e7ecf3; --grafico-rojo: #e0564f; --grafico-verde: #2a9a64; --estrella: #ffc94d; color-scheme: dark; } } :root[data-theme="dark"] { --fondo: #0f1412; --superficie: #161c19; --superficie-2: #1f2723; --linea: #2d3832; --renglon: #243650; --tinta: #e8eee9; --tinta-suave: #a5b2aa; --acento: #8fa9ff; --acento-suave: #1b2747; --verde: #4fcb8c; --whatsapp: #25d366; --verde-suave: #133322; --rojo: #ff7b72; --rojo-suave: #3b1b1b; --ambar: #ffc46a; --ambar-suave: #37280e; --peligro: #ff8fbf; --peligro-suave: #3a1426; --sombra: none; --pestana-activa: #1f2723; --demo-fondo: #05080c; --demo-texto: #e7ecf3; --grafico-rojo: #e0564f; --grafico-verde: #2a9a64; --estrella: #ffc94d; color-scheme: dark; } /* Colores que elige cada persona en Mi cuenta (data-color en ). Van DESPUÉS del tema a propósito. */ :root[data-color="morado"] { --acento: #6a3fb8; --acento-suave: #efe8fb; } :root[data-color="grafito"] { --acento: #3a4556; --acento-suave: #e6e9ee; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-color="morado"] { --acento: #bca0ff; --acento-suave: #2b2047; } :root:not([data-theme="light"])[data-color="grafito"] { --acento: #c6cdd8; --acento-suave: #262e3a; } } :root[data-theme="dark"][data-color="morado"] { --acento: #bca0ff; --acento-suave: #2b2047; } :root[data-theme="dark"][data-color="grafito"] { --acento: #c6cdd8; --acento-suave: #262e3a; } *, *::before, *::after { box-sizing: border-box; } /* El "lienzo" (lo que asoma bajo la barra de estado y sobre el borde de abajo del iPhone) es del color de la cabecera y de la barra, para que no se note ninguna franja. */ html { -webkit-text-size-adjust: 100%; background: var(--superficie); } body { margin: 0; /* A toda la altura: en una pantalla grande, debajo de lo pintado no asoma otro color (la franja). */ min-height: 100vh; min-height: 100dvh; background: var(--fondo); color: var(--tinta); font-family: var(--letra); font-size: 16px; line-height: 1.45; } a { color: var(--acento); } /* Un enlace dentro de un texto también tiene que poder tocarse con el dedo (24 px como poco). */ p a, .leyenda a, .tabla a, .datos a { padding: 6px 0; } h1, h2, h3 { text-wrap: balance; } code { font-family: var(--letra-num); font-size: 0.9em; } :focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; border-radius: 4px; } .num { font-family: var(--letra); font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0; } .verde { color: var(--verde); } .rojo { color: var(--rojo); } .apagado { color: var(--tinta-suave); } .oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ─── Marco ─── */ .demo-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: calc(8px + env(safe-area-inset-top)) 16px 8px; background: var(--demo-fondo); color: var(--demo-texto); font-size: 0.8rem; } .demo-personas { display: flex; gap: 6px; width: 100%; } .demo-persona { flex: 1; display: flex; flex-direction: column; align-items: center; min-height: 40px; padding: 4px 6px; border: 1px solid rgb(255 255 255 / 0.25); border-radius: 10px; background: transparent; color: var(--demo-texto); font: inherit; font-weight: 600; font-size: 0.85rem; cursor: pointer; } .demo-persona small { font-weight: 500; font-size: 0.72rem; } .demo-persona-activa { background: var(--ambar-suave); color: var(--ambar); border-color: transparent; } .demo-marca { padding: 1px 8px; border-radius: 999px; background: var(--ambar-suave); color: var(--ambar); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.72rem; } .cabecera { /* En iPhone, la barra de estado (hora, batería) es un cristal que desenfoca lo que hay debajo: se deja ese hueco liso para que la cabecera empiece por debajo de ella. */ padding-top: env(safe-area-inset-top); background: var(--superficie); border-bottom: 2px solid var(--acento); } .cabecera-dentro { max-width: 34rem; margin: 0 auto; padding: 10px 16px 8px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .cabecera-texto { display: flex; flex-direction: column; min-width: 0; flex: 1; } .foto-negocio { display: block; border-radius: 50%; object-fit: cover; background: var(--superficie-2); } .foto-cabecera { width: 40px; height: 40px; flex: none; } .foto-grande { width: 88px; height: 88px; } /* El logo de la marca del negocio (js/marca.js): cuadrado con esquinas redondeadas, como el icono de la app. */ .logo-marca { display: block; flex: none; border-radius: 22%; overflow: hidden; line-height: 0; } .logo-marca svg { width: 100%; height: 100%; display: block; } .logo-entrar { width: 72px; height: 72px; } .logo-espacio { width: 52px; height: 52px; } .marca-entrar { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 8px; text-align: center; } .marca-nombre { margin: 4px 0 0; font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; } .marca-lema { margin: 0; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tinta-suave); } .foto-vacia { display: flex; align-items: center; justify-content: center; flex: none; width: 88px; height: 88px; border-radius: 50%; background: var(--superficie-2); color: var(--tinta-suave); font-size: 0.8rem; } .perfil-foto { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .perfil-foto-botones { display: flex; flex-direction: column; gap: 8px; } .campo textarea { padding: 10px 12px; border: 1px solid var(--linea); border-radius: 10px; background: var(--superficie); color: var(--tinta); font: inherit; font-size: 16px; resize: vertical; } .opciones { display: flex; flex-wrap: wrap; gap: 8px; } .opcion { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--linea); background: var(--superficie); color: var(--tinta); font: inherit; font-weight: 500; cursor: pointer; } .opcion-activa { border-color: var(--acento); background: var(--acento-suave); color: var(--acento); font-weight: 600; } .muestra { width: 16px; height: 16px; border-radius: 50%; box-shadow: 0 0 0 2px var(--superficie), 0 0 0 3px var(--tinta-suave); } .muestra-azul { background: #1f47b8; } .muestra-morado { background: #6a3fb8; } .muestra-grafito { background: #3a4556; } .fila-persona { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; } .fila-persona-nombre { font-weight: 600; } .cabecera-enlace { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--linea); color: var(--acento); font-weight: 600; font-size: 0.9rem; text-decoration: none; } .cabecera-enlace[aria-current="page"] { background: var(--acento-suave); border-color: transparent; } .cabecera-negocio { color: var(--tinta); text-decoration: none; font-weight: 600; font-size: 1.1rem; } .cabecera-hoy { margin: 0; color: var(--tinta-suave); font-size: 0.85rem; } .contenido { max-width: 34rem; margin: 0 auto; padding-inline: 16px; padding-block: 16px 56px; } .vista { display: flex; flex-direction: column; gap: 20px; } .cargando { color: var(--tinta-suave); padding-block: 40px; text-align: center; } /* ─── Avisos ─── */ .avisos { display: flex; flex-direction: column; gap: 8px; } .aviso { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--linea); background: var(--superficie); font-size: 0.92rem; } .aviso-atraso { background: var(--ambar-suave); border-color: transparent; color: var(--tinta); } .aviso-atraso strong { color: var(--ambar); } .aviso-fallo { background: var(--peligro-suave); border-color: transparent; } .aviso-fallo strong { color: var(--peligro); } /* ─── Cifras del panel ─── */ .cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .cifra { margin: 0; padding: 12px 14px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); min-width: 0; } .cifra-capital { grid-column: 1 / -1; } .cifra p { margin: 0; } .cifra-etiqueta { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tinta-suave); } .cifra-valor { font-size: 1.35rem; font-weight: 600; line-height: 1.2; margin-top: 4px !important; overflow-wrap: anywhere; } .cifra-capital .cifra-valor { font-size: 2rem; color: var(--verde); } .cifra-interes .cifra-valor { color: var(--rojo); } .cifra-nota { font-size: 0.8rem; color: var(--tinta-suave); } /* ─── Bloques y tarjetas ─── */ .bloque { display: flex; flex-direction: column; gap: 10px; } .bloque-titulo { margin: 0; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-suave); } .vacio { color: var(--tinta-suave); margin: 0; } .lista-tarjetas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .tarjeta { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); color: var(--tinta); text-decoration: none; -webkit-tap-highlight-color: transparent; } .tarjeta:active { background: var(--superficie-2); } @media (hover: hover) { .tarjeta:hover { border-color: var(--acento); } } .tarjeta-arriba { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .tarjeta-nombre { font-weight: 600; font-size: 1.02rem; min-width: 0; overflow-wrap: anywhere; } .tarjeta-saldo { display: flex; flex-direction: column; } .tarjeta-saldo-valor { font-size: 1.6rem; font-weight: 600; line-height: 1.15; } .etiqueta { font-size: 0.78rem; color: var(--tinta-suave); } .tarjeta-datos { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .tarjeta-datos dt { font-size: 0.78rem; color: var(--tinta-suave); } .tarjeta-datos dd { margin: 0; font-size: 0.95rem; display: flex; flex-direction: column; } .dato-fecha { font-size: 0.8rem; color: var(--tinta-suave); } .dato-fecha.vencida { color: var(--ambar); } .vencida { color: var(--ambar); font-weight: 600; } .barra { height: 6px; border-radius: 999px; background: var(--superficie-2); overflow: hidden; } .barra-capital { display: block; height: 100%; background: var(--verde); border-radius: 999px; } .barra-texto { margin: -4px 0 0; font-size: 0.78rem; color: var(--tinta-suave); } .lista-filas { list-style: none; margin: 0; padding: 0; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); } .lista-filas li + li { border-top: 1px solid var(--linea); } .fila-enlace { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 12px; min-height: 48px; padding: 8px 14px; color: var(--tinta); text-decoration: none; } .fila-enlace:active { background: var(--superficie-2); } .fila-enlace-dato { font-size: 0.85rem; color: var(--tinta-suave); } /* ─── Chips de estado ─── */ .chip { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; white-space: nowrap; } .chip-al-dia { background: var(--acento-suave); color: var(--acento); } .chip-debe { background: var(--ambar-suave); color: var(--ambar); } .chip-devuelto { background: var(--superficie-2); color: var(--tinta-suave); } .chip-reestructurado { background: transparent; color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento); } .chip-error { background: var(--peligro-suave); color: var(--peligro); } /* ─── Ficha del préstamo ─── */ .volver { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; font-size: 0.95rem; text-decoration: none; } .volver::before { content: "‹"; font-size: 1.4rem; line-height: 1; margin-right: 6px; } .ficha-cabecera { display: flex; flex-direction: column; gap: 4px; margin-top: -12px; } .ficha-titulo { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .ficha-titulo h1 { margin: 0; font-size: 1.4rem; line-height: 1.2; } .ficha-condiciones { margin: 0; color: var(--tinta-suave); font-size: 0.9rem; } .resumen { display: flex; flex-direction: column; gap: 12px; padding: 14px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); } .resumen p { margin: 0; } .resumen-saldo-valor { font-size: 2rem; font-weight: 600; line-height: 1.15; } .resumen-desglose { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.88rem; color: var(--tinta-suave); } .resumen-datos { margin: 0; display: flex; flex-direction: column; gap: 8px; } .resumen-datos dt { font-size: 0.78rem; color: var(--tinta-suave); } .resumen-datos dd { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: 1.05rem; } .resumen-fecha { font-size: 0.85rem; color: var(--tinta-suave); } .resumen-fecha.vencida { color: var(--ambar); } .resumen-proyeccion { padding-top: 10px; border-top: 1px solid var(--linea); font-size: 0.92rem; } .pestanas { display: flex; gap: 4px; padding: 4px; background: var(--superficie-2); border-radius: 10px; } .pestana { flex: 1; min-width: 0; padding: 0 4px; display: flex; align-items: center; justify-content: center; min-height: 40px; border-radius: 8px; color: var(--tinta-suave); font-weight: 600; font-size: 0.95rem; text-decoration: none; } .pestana[aria-current="page"] { background: var(--pestana-activa); color: var(--tinta); box-shadow: var(--sombra); } /* ─── Tablas: rayadas como un cuaderno ─── */ .leyenda { margin: 0; font-size: 0.82rem; color: var(--tinta-suave); } .punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin: 0 4px 0 2px; vertical-align: 1px; } .punto-verde { background: var(--verde); } .punto-rojo { background: var(--rojo); margin-left: 8px; } .tabla-caja { overflow-x: auto; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); } .tabla { width: 100%; border-collapse: collapse; font-size: 0.8rem; } .tabla th { padding: 8px 5px; text-align: right; font-size: 0.72rem; font-weight: 600; color: var(--tinta-suave); border-bottom: 2px solid var(--renglon); white-space: nowrap; } .tabla td { padding: 7px 5px; text-align: right; border-bottom: 1px solid var(--renglon); white-space: nowrap; vertical-align: top; } .tabla th:first-child, .tabla td:first-child { padding-left: 8px; color: var(--tinta-suave); } .tabla th:last-child, .tabla td:last-child { padding-right: 8px; } .tabla tbody tr:last-child td { border-bottom: none; } .tabla tfoot th, .tabla tfoot td { border-top: 2px solid var(--renglon); border-bottom: none; font-weight: 600; padding-top: 9px; padding-bottom: 9px; } .tabla tfoot th { text-align: left; text-transform: none; letter-spacing: 0; font-size: 0.8rem; color: var(--tinta); } .fila-actual td { background: var(--acento-suave); } .estado-celda { text-align: left !important; font-size: 0.75rem; color: var(--tinta-suave); } .fila-impaga .estado-celda, .fila-incompleta .estado-celda { color: var(--rojo); font-weight: 600; } .barrita { display: flex; height: 3px; margin-top: 3px; margin-left: auto; width: 100%; min-width: 2.5em; border-radius: 2px; overflow: hidden; background: var(--superficie-2); } .barrita .bi { background: var(--rojo); } .barrita .bc { background: var(--verde); } .totales { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .totales div { padding: 10px 12px; background: var(--superficie); border: 1px solid var(--linea); border-radius: 10px; } .totales dt { font-size: 0.78rem; color: var(--tinta-suave); } .totales dd { margin: 0; font-weight: 600; } /* ─── Avisos ─── */ .titulo-pantalla { margin: 6px 0 0; font-size: 1.4rem; line-height: 1.2; } /* Tras el enlace "Volver" (que ya trae su aire), el título se pega a él. */ .volver + .titulo-pantalla, .volver + .titulo-con-boton { margin-top: -12px; } .tarjeta-plana { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); } .tarjeta-plana p { margin: 0; } .botones { display: flex; flex-wrap: wrap; gap: 8px; } .botones .boton { flex: 1 1 14rem; } .estado-ok { color: var(--verde); font-weight: 600; font-size: 1.05rem; } .mensaje-ok { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--acento-suave); font-weight: 500; } .error-texto { color: var(--peligro); } .pasos, .consejos { margin: 0; padding-left: 1.3rem; display: flex; flex-direction: column; gap: 6px; } .consejos { font-size: 0.9rem; color: var(--tinta-suave); } .lista-avisos { list-style: none; margin: 0; padding: 0; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); } .lista-avisos li + li { border-top: 1px solid var(--linea); } .fila-aviso { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; } .fila-aviso-titulo { font-weight: 600; } .fila-aviso-dato { font-size: 0.85rem; color: var(--tinta-suave); } /* ─── Entrar y pantallas sueltas ─── */ .acceso { display: flex; flex-direction: column; gap: 12px; max-width: 24rem; margin: calc(8vh + env(safe-area-inset-top)) auto 0; } .acceso p { margin: 0; } .acceso-titulo { margin: 0 0 4px; font-size: 1.5rem; } /* "Tu espacio" (cuenta nueva): "Pedir un préstamo" en grande, que se vea que para eso es la app. */ .espacio { margin-top: calc(4vh + env(safe-area-inset-top)); } .espacio > .leyenda { margin: -8px 0 4px; } .pedir-prestamo { display: flex; flex-direction: column; gap: 6px; padding: 22px 20px; border-radius: 16px; background: var(--acento); color: var(--superficie); text-decoration: none; box-shadow: var(--sombra); } .pedir-prestamo:active { transform: scale(0.99); } .pedir-titulo { font-size: 1.6rem; font-weight: 700; line-height: 1.15; } .pedir-texto { font-size: 0.95rem; opacity: 0.92; line-height: 1.35; } .pedir-otro { margin: 12px 0; padding: 16px 18px; } .pedir-otro .pedir-titulo { font-size: 1.25rem; } .espacio-estado p { margin: 0 0 6px; } .espacio-estado p:last-child { margin-bottom: 0; } .espacio .bloque { margin-top: 8px; } .codigo { padding: 12px; background: var(--superficie); border: 1px dashed var(--acento); border-radius: 10px; font-size: 1rem; overflow-wrap: anywhere; user-select: all; } .formulario { display: flex; flex-direction: column; gap: 14px; } .campo { display: flex; flex-direction: column; gap: 6px; font-weight: 500; font-size: 0.95rem; } .campo input { min-height: 48px; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 10px; background: var(--superficie); color: var(--tinta); font: inherit; font-size: 16px; /* 16px o más: el iPhone no hace zoom al escribir */ } .campo input:focus-visible { border-color: var(--acento); } .error-campo { color: var(--peligro); font-weight: 600; } .boton { display: inline-flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; min-height: 48px; padding: 10px 18px; border-radius: 10px; border: 1px solid var(--linea); background: var(--superficie); color: var(--tinta); font: inherit; font-weight: 600; cursor: pointer; } .boton-principal { background: var(--acento); border-color: var(--acento); color: var(--superficie); } .boton:disabled { opacity: 0.6; cursor: default; } .boton-texto { align-self: center; min-height: 44px; padding: 8px 12px; border: none; background: none; color: var(--acento); font: inherit; font-weight: 600; cursor: pointer; } .ayuda { padding: 4px 14px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); } .ayuda summary { display: flex; align-items: center; min-height: 48px; color: var(--acento); font-weight: 600; cursor: pointer; } .ayuda[open] { display: flex; flex-direction: column; gap: 10px; padding-bottom: 14px; } .ayuda p { margin: 0; } .aviso-solicitud, .aviso-solicitud-cliente { display: flex; flex-direction: column; gap: 10px; background: var(--acento-suave); border-color: transparent; } .aviso-solicitud p, .aviso-solicitud-cliente p { margin: 0; } .aviso-solicitud .campo input { background: var(--superficie); } /* ─── Cartel de fallo (para mandar en una foto) ─── */ .cartel-fallo { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 2px solid var(--peligro); border-radius: var(--radio); background: var(--peligro-suave); } .cartel-fallo p { margin: 0; } .cartel-titulo { font-weight: 600; color: var(--peligro); } .cartel-detalle { margin: 0; padding: 8px; background: var(--superficie); border-radius: 8px; font-family: var(--letra-num); font-size: 0.75rem; white-space: pre-wrap; overflow-wrap: anywhere; } .cartel-pie { font-size: 0.85rem; } /* ─── Barra de abajo (secciones) y moverse deslizando ─── */ .contenido.con-barra { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } .barra-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; justify-content: space-around; padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); background: var(--superficie); border-top: 1px solid var(--linea); box-shadow: 0 -2px 10px rgb(19 26 38 / 0.06); } .nav-item { flex: 1; max-width: 7rem; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 52px; padding: 6px 2px 4px; border-radius: 10px; color: var(--tinta-suave); text-decoration: none; font-size: 0.72rem; font-weight: 600; -webkit-tap-highlight-color: transparent; } .nav-item[aria-current="page"] { color: var(--acento); background: var(--acento-suave); } .nav-icono-caja { position: relative; display: inline-flex; } .nav-icono { width: 24px; height: 24px; } .punto-rojo { position: absolute; top: -2px; right: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--peligro); box-shadow: 0 0 0 2px var(--superficie); } .punto-en-linea { position: static; display: inline-block; vertical-align: 1px; margin-left: 4px; } /* Punto verde: esa persona ha entrado en la app hace poco. */ .punto-activo { display: inline-block; width: 10px; height: 10px; margin-left: 6px; vertical-align: 1px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 2px var(--superficie); } .aviso-version { position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 21; display: flex; align-items: center; justify-content: space-between; gap: 10px; max-width: 34rem; margin: 0 auto; padding: 8px 8px 8px 14px; border-radius: 12px; background: var(--tinta); color: var(--fondo); font-weight: 600; font-size: 0.92rem; box-shadow: 0 4px 16px rgb(0 0 0 / 0.2); } .aviso-version.sobre-barra { bottom: calc(70px + env(safe-area-inset-bottom)); } .contenido.con-aviso-version { padding-bottom: calc(160px + env(safe-area-inset-bottom)); } #vista { touch-action: pan-y; } /* Transiciones suaves (pedido de Jerry): la pantalla nueva aparece con un fundido corto y un leve desliz; al deslizar el dedo, entra desde su lado. Nada de librerías: animaciones del propio navegador (y ninguna si el celular pide "reducir movimiento"). */ .entra-suave { animation: aparecer 240ms cubic-bezier(0.2, 0.7, 0.2, 1); } .entra-desde-izquierda { animation: entrar-izquierda 280ms cubic-bezier(0.2, 0.7, 0.2, 1); } .entra-desde-derecha { animation: entrar-derecha 280ms cubic-bezier(0.2, 0.7, 0.2, 1); } @keyframes aparecer { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes entrar-izquierda { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes entrar-derecha { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } } /* Botones, opciones y tarjetas cambian de color con suavidad y "se hunden" un poco al tocarlos. */ .boton, .opcion, .nav-item, .tarjeta, .fila-enlace, .pedir-prestamo, .boton-ojo, .pestana { transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 120ms ease; } .boton:active, .opcion:active, .pedir-prestamo:active, .nav-item:active { transform: scale(0.98); } details[open] > :not(summary) { animation: aparecer 200ms ease-out; } .boton-ojo { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--linea); border-radius: 50%; background: var(--superficie); color: var(--tinta-suave); cursor: pointer; } .boton-ojo[aria-pressed="true"] { color: var(--acento); background: var(--acento-suave); border-color: transparent; } /* Discreción: los importes se tapan (se ven al quitar el ojo). */ :root[data-discreto] .num, :root[data-discreto] .g-svg text.g-eje:not(:last-child) { filter: blur(6px); } :root[data-discreto] .g-tip { filter: blur(6px); } .aviso-ver-como { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 16px; background: var(--ambar-suave); color: var(--tinta); font-size: 0.9rem; } /* ─── Botones y formularios ─── */ .boton-pequeno { min-height: 40px; padding: 6px 12px; font-size: 0.9rem; } .boton-grande { min-height: 56px; font-size: 1.1rem; } .botones-grandes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .botones-grandes .boton:only-child { grid-column: 1 / -1; } .boton-peligro { background: var(--peligro); border-color: var(--peligro); color: var(--superficie); } .boton-texto-izq { align-self: flex-start; padding-left: 0; } .boton-texto-peligro { color: var(--peligro); } .botones-texto { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; } .botones-texto a.boton-texto { display: inline-flex; align-items: center; text-decoration: none; } .titulo-con-boton { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; } .titulo-con-boton .titulo-pantalla { margin: 0; } .campo select { min-height: 48px; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 10px; background: var(--superficie); color: var(--tinta); font: inherit; font-size: 16px; } .campo-en-linea { flex-direction: row; align-items: center; gap: 10px; } .campo-en-linea span { flex: none; font-size: 0.9rem; color: var(--tinta-suave); } .campo-en-linea select { flex: 1; min-width: 0; min-height: 44px; } .campo-buscar input { width: 100%; } .opciones-orden .opcion { min-height: 40px; padding: 0 12px; font-size: 0.9rem; } .confirmar { border-color: var(--peligro); } .previa { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 10px; background: var(--superficie-2); } .previa p { margin: 0; } .mensaje-previo { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--superficie-2); font-family: var(--letra); font-size: 0.88rem; white-space: pre-wrap; overflow-wrap: anywhere; } .casillas { margin: 0; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 10px; display: flex; flex-direction: column; gap: 6px; } .casillas legend { font-weight: 600; font-size: 0.9rem; padding: 0 4px; } .casilla { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 0.92rem; } .casilla input { width: 24px; height: 24px; flex: none; } .etapas { display: flex; flex-direction: column; gap: 10px; } .etapa { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--linea); border-radius: 10px; } .etapa p { margin: 0; } .etapa-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .etapa-campos input { min-height: 44px; min-width: 0; padding: 8px 10px; border: 1px solid var(--linea); border-radius: 10px; background: var(--superficie); color: var(--tinta); font: inherit; font-size: 16px; } /* ─── Inicio: agenda de cobro ─── */ .cifra-mora .cifra-valor, .ambar { color: var(--ambar); } .cifra-verde .cifra-valor { color: var(--verde); } .linea-mora { margin: -4px 0 0; font-size: 0.82rem; color: var(--ambar); } .agenda-grupo { display: flex; justify-content: space-between; margin: 4px 2px 0; font-size: 0.9rem; font-weight: 600; } .agenda-grupo .num { color: var(--tinta-suave); font-weight: 500; } .fila-agenda { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; padding: 10px 14px; } .fila-agenda-datos { display: flex; flex-direction: column; color: var(--tinta); text-decoration: none; min-width: 0; min-height: 40px; justify-content: center; } .fila-agenda-nombre { font-weight: 600; overflow-wrap: anywhere; } .fila-agenda-cuando { font-size: 0.82rem; color: var(--tinta-suave); } .fila-agenda-monto { font-weight: 600; } .fila-agenda-botones { grid-column: 1 / -1; display: flex; gap: 8px; } .fila-agenda-botones .boton { flex: 1; } /* ─── Clientes ─── */ .fila-cliente { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; color: var(--tinta); text-decoration: none; min-height: 48px; } .fila-cliente:active { background: var(--superficie-2); } .fila-cliente-arriba, .fila-cliente-abajo { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .fila-cliente-nombre { font-weight: 600; min-width: 0; overflow-wrap: anywhere; } .chips { display: inline-flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; } .chip-score { background: var(--superficie-2); color: var(--tinta); } .chip-score .estrella-icono { color: var(--estrella); } .score-alto { box-shadow: inset 0 0 0 1px var(--estrella); background: transparent; } .estrella-icono { width: 1em; height: 1em; fill: currentColor; vertical-align: -0.12em; flex: none; } .estrella-dorada { color: var(--estrella); } .datos { margin: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); } .datos dt { font-size: 0.78rem; color: var(--tinta-suave); } .datos dd { margin: 0; overflow-wrap: anywhere; } .enlace-titulo { color: inherit; text-decoration: none; } .ficha-nota { margin: 0; font-size: 0.9rem; color: var(--tinta-suave); font-style: italic; } /* ─── Ficha del préstamo ─── */ .guia-cobro { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: var(--radio); background: var(--ambar-suave); } .guia-titulo { margin: 0; } .guia-titulo strong { color: var(--ambar); } .guia-pasos { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; } .guia-paso { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 8px 10px; border-radius: 10px; background: var(--superficie); font-size: 0.9rem; color: var(--tinta-suave); } .guia-paso-actual { color: var(--tinta); font-weight: 600; box-shadow: inset 0 0 0 2px var(--ambar); } .guia-paso-hecho { opacity: 0.75; } .concepto { display: block; font-size: 0.68rem; font-family: var(--letra); color: var(--tinta-suave); } .concepto-capital { color: var(--verde); } .concepto-interes { color: var(--rojo); } .fila-perdonado .estado-celda { color: var(--tinta-suave); font-style: italic; } .nota-celda { display: block; font-size: 0.7rem; color: var(--ambar); white-space: normal; max-width: 9rem; } .lista-pagos .fila-pago { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; } .fila-pago-arriba { display: flex; justify-content: space-between; gap: 8px; } .fila-archivada .fila-pago-arriba { text-decoration: line-through; color: var(--tinta-suave); } .tabla-comparar th { text-align: left; } .tabla-comparar tbody th { font-weight: 500; color: var(--tinta-suave); border-bottom: 1px solid var(--renglon); padding: 7px 8px; } .resumen-compacto { gap: 4px; padding: 10px 14px; } .hecho { border-color: var(--verde); } /* ─── Registro, mensajes, personas, prestatario ─── */ .lista-registro { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .registro-dia { margin: 12px 0 4px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tinta-suave); } .registro-linea { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--renglon); font-size: 0.92rem; } .registro-hora { flex: none; color: var(--tinta-suave); font-size: 0.82rem; padding-top: 1px; } .texto-mensaje { white-space: pre-wrap; overflow-wrap: anywhere; } .mensaje-cliente { background: var(--acento-suave); border-color: transparent; } .mensaje-cliente p { margin: 0; } .qr-previo { display: block; max-width: 240px; width: 100%; height: auto; margin: 0 auto; border-radius: 10px; background: #ffffff; } .centrado { align-items: center; text-align: center; } .suya-proxima { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--superficie-2); } .suya-proxima p { margin: 0; } .suya-monto { font-size: 1.2rem; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; } .vencida-caja { background: var(--ambar-suave); } .lista-simple { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 4px; font-size: 0.92rem; } /* ─── Números: gráficos ─── */ .filtros { display: flex; flex-direction: column; gap: 8px; } .filtros-selects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .filtros-selects .campo { min-width: 0; } .filtros-selects select { width: 100%; } .cifras-numeros { grid-template-columns: 1fr 1fr; } .cifras-numeros .cifra-valor { font-size: 1.2rem; } .g-caja { position: relative; } .g-svg { display: block; width: 100%; height: auto; overflow: visible; } .g-rejilla { stroke: var(--linea); stroke-width: 1; } .g-base { stroke: var(--tinta-suave); stroke-width: 1; } .g-eje { fill: var(--tinta-suave); font-family: var(--letra); font-variant-numeric: tabular-nums; font-size: 11px; } .g-rojo { fill: var(--grafico-rojo); } .g-verde { fill: var(--grafico-verde); } .g-acento { fill: var(--acento); } .g-toque { fill: transparent; cursor: pointer; outline: none; } .g-toque.g-activo, .g-toque:focus-visible { fill: var(--tinta); fill-opacity: 0.06; } .g-tip { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--superficie-2); font-size: 0.85rem; } .g-tip[hidden] { display: none; } .g-tip strong { font-size: 0.9rem; text-transform: capitalize; } .g-leyenda { display: flex; gap: 14px; margin: 0; font-size: 0.85rem; color: var(--tinta-suave); } .g-leyenda span { display: inline-flex; align-items: center; gap: 6px; } .g-muestra { display: inline-block; width: 12px; height: 12px; border-radius: 3px; } i.g-rojo { background: var(--grafico-rojo); } i.g-verde { background: var(--grafico-verde); } .g-tabla { padding: 0 10px; } .tabla-clientes td:first-child { color: var(--tinta); text-align: left; white-space: normal; min-width: 7.5rem; } .tabla-clientes td:first-child a { color: var(--tinta); } .orden-col { border: none; background: none; padding: 4px 0; min-height: 32px; font: inherit; font-weight: 600; color: var(--tinta-suave); cursor: pointer; } .orden-activa { color: var(--acento); } /* Un enlace dentro de un texto también tiene que poder tocarse con el dedo (24 px como poco). */ p a, .leyenda a, .tabla a, .datos a { padding: 6px 0; } @media (min-width: 560px) { .cifras { grid-template-columns: 1.4fr 1fr 1fr; } .cifras-numeros { grid-template-columns: 1fr 1fr 1fr; } .cifra-capital { grid-column: auto; } .cifra-capital .cifra-valor { font-size: 1.6rem; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ─── El formulario público de solicitud (solicitud.html) y la bandeja "pendientes de aprobar" ─── */ .pagina-publica .cabecera-negocio { pointer-events: none; } .pasos-barra { display: flex; gap: 4px; } .pasos-barra span { flex: 1; height: 6px; border-radius: 3px; background: var(--linea); } .pasos-barra .paso-hecho { background: var(--acento); } .paso-de { margin: 0; font-size: 0.82rem; color: var(--tinta-suave); } .paso-titulo { margin: 0; font-size: 1.3rem; line-height: 1.2; } .explicacion { margin: 0; font-size: 0.92rem; color: var(--tinta-suave); } .foto-caja { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px dashed var(--linea); border-radius: 10px; } .foto-caja p { margin: 0; font-weight: 500; font-size: 0.95rem; } .foto-caja .leyenda { font-weight: 400; } .foto-mini { width: 100%; max-height: 220px; object-fit: contain; border-radius: 8px; background: var(--superficie-2); } .foto-caja .botones .boton { flex: 1 1 8rem; } .consentimiento { max-height: 42vh; overflow: auto; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 10px; background: var(--superficie-2); font-size: 0.88rem; white-space: pre-wrap; overflow-wrap: anywhere; } .consentimiento p { margin: 0 0 10px; } .casilla-larga { align-items: flex-start; } .casilla-larga input { margin-top: 8px; } .enviada { text-align: center; padding-block: 12px; } .enviada .estado-ok { font-size: 1.3rem; } .ubicacion-ok { margin: 0; color: var(--verde); font-weight: 600; } /* El mapa para marcar la casa (js/mapa-casa.js): el dedo mueve el mapa; el punto se queda en el centro. */ .mapa-hueco { position: relative; height: 280px; border-radius: 10px; overflow: hidden; border: 1px solid var(--linea); background: var(--fondo); display: flex; align-items: center; justify-content: center; } .mapa-hueco > .leyenda { margin: 0; } .mapa-marco { position: relative; isolation: isolate; width: 100%; height: 100%; } .mapa { width: 100%; height: 100%; background: #e8e4dc; } .mapa-punto { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%); z-index: 650; color: var(--acento); pointer-events: none; filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.35)); line-height: 0; } .mapa-punto::after { content: ""; position: absolute; left: 50%; bottom: -3px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: rgb(0 0 0 / 0.35); } .mapa .leaflet-control-attribution { font-size: 11px; } /* Los enlaces del crédito del plano también se tocan con el dedo (24 px de alto como mínimo). */ .mapa .leaflet-control-attribution a { display: inline-block; line-height: 24px; } .aviso-recuperado { display: flex; flex-direction: column; gap: 2px; background: var(--acento-suave); border-color: transparent; } .aviso-recuperado p, [data-aviso="empezar"] p { margin: 0; } [data-aviso="empezar"] { display: flex; flex-direction: column; gap: 10px; } .fila-solicitud { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; min-height: 48px; color: var(--tinta); text-decoration: none; } .fila-solicitud:active { background: var(--superficie-2); } .fila-solicitud-arriba { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; } .fila-solicitud-nombre { font-weight: 600; } .fila-solicitud-dato { font-size: 0.85rem; color: var(--tinta-suave); } .chip-ambar { background: var(--ambar-suave); color: var(--ambar); } .chip-carmesi { background: var(--peligro-suave); color: var(--peligro); } .chip-verde { background: var(--verde-suave); color: var(--verde); } .chips-izq { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; } .chips-izq .chip { white-space: normal; overflow-wrap: anywhere; } .chips-izq a.chip { text-decoration: none; min-height: 32px; padding: 4px 12px; } .fotos-grandes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .fotos-grandes figure { margin: 0; display: flex; flex-direction: column; gap: 4px; } .fotos-grandes button { padding: 0; border: none; background: none; cursor: pointer; border-radius: 8px; min-height: 24px; } .fotos-grandes img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: var(--superficie-2); } .fotos-grandes figcaption { font-size: 0.78rem; color: var(--tinta-suave); } .foto-ampliada { display: flex; flex-direction: column; gap: 8px; } .foto-ampliada img { width: 100%; border-radius: 8px; background: var(--superficie-2); } .datos-solicitud { margin: 0; display: grid; grid-template-columns: 1fr; gap: 6px; } .datos-solicitud dt { font-size: 0.78rem; color: var(--tinta-suave); } .datos-solicitud dd { margin: 0; } .decision { display: flex; flex-direction: column; gap: 10px; } .consejo-aval { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--ambar-suave); color: var(--tinta); font-size: 0.88rem; } /* ─── Las estrellas de confianza y su escalera ─── */ .estrellas-num { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 1.9rem; font-weight: 600; line-height: 1.1; } .estrellas-num .estrella-icono { color: var(--estrella); font-size: 1.7rem; } .estrellas-de { font-size: 0.9rem; font-weight: 400; color: var(--tinta-suave); } .estrellas-hasta { margin: 0; font-size: 1.05rem; } .escalera { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .escalera li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--linea); font-size: 0.92rem; } .escalera li span:first-child { display: inline-flex; align-items: center; gap: 6px; } .escalera .estrella-icono { color: var(--estrella); } .escalera .escalon-hecho { background: var(--superficie-2); color: var(--tinta-suave); } .escalera .escalon-hecho .estrella-icono { color: var(--tinta-suave); } .escalera .escalon-actual { border-color: var(--estrella); background: var(--acento-suave); font-weight: 600; } /* ─── Pantallas grandes (pedido de Jerry: "que se adapte a la pantalla: iPad, teléfono, ordenador") ─── Celular: tal cual, una columna. iPad (≥ 768 px): todo más ancho, la barra de abajo agrupada, entrar en una tarjeta. Ordenador (≥ 1100 px): el menú de secciones a la izquierda, Inicio en dos columnas, listas más anchas y los formularios y las fichas a un ancho cómodo (las líneas muy largas cansan). */ @media (min-width: 768px) { .contenido, .cabecera-dentro, .aviso-version { max-width: 46rem; } .contenido { padding-inline: 24px; padding-top: 24px; } .cabecera-dentro { padding-inline: 24px; } .barra-nav { justify-content: center; gap: 12px; } .nav-item { max-width: 8rem; } .cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cifra-capital { grid-column: span 2; } [data-vista="prestamos"] .lista-tarjetas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Entrar, crear cuenta y Tu espacio: una tarjeta en el centro de la pantalla. */ .acceso { max-width: 30rem; margin-top: 8vh; padding: 28px 32px; background: var(--superficie); border: 1px solid var(--linea); border-radius: 18px; box-shadow: var(--sombra); } .contenido.pagina-publica { max-width: 40rem; } } @media (min-width: 1100px) { /* El menú de secciones a la izquierda (bajo la cabecera y siempre a la vista), en lugar de la barra de abajo. */ #app:has(> .barra-nav) { display: grid; grid-template-columns: 15rem minmax(0, 1fr); grid-auto-flow: row dense; align-items: start; } #app:has(> .barra-nav) > * { grid-column: 1 / -1; } #app:has(> .barra-nav) > .contenido { grid-column: 2; width: 100%; } /* con márgenes automáticos se encogería */ #app:has(> .barra-nav) > .barra-nav { grid-column: 1; } .barra-nav { position: sticky; top: 0; left: auto; right: auto; bottom: auto; flex-direction: column; justify-content: flex-start; gap: 4px; padding: 20px 12px; background: transparent; border-top: 0; box-shadow: none; } .nav-item { flex: none; max-width: none; flex-direction: row; gap: 12px; min-height: 48px; padding: 0 14px; font-size: 0.95rem; color: var(--tinta); } .nav-item:hover { background: var(--superficie-2); } .nav-item[aria-current="page"]:hover { background: var(--acento-suave); } .contenido, .aviso-version { max-width: 68rem; } .contenido { padding-inline: 32px; } .contenido.con-barra { padding-bottom: 56px; } .cabecera-dentro { max-width: none; padding-inline: 28px; } .aviso-version.sobre-barra { bottom: 16px; } .contenido.con-aviso-version { padding-bottom: 96px; } /* Inicio: lo de arriba a lo ancho; la agenda de cobro a la izquierda y los préstamos vivos a la derecha. */ .vista-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 32px; align-items: start; } .vista-panel > .avisos, .vista-panel > .botones-grandes, .vista-panel > .cifras { grid-column: 1 / -1; } .vista-panel > .botones-grandes { max-width: 40rem; } [data-vista="prestamos"] .lista-tarjetas { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Formularios y pantallas de ajustes: a un ancho cómodo, en el centro. */ [data-vista="prestamo-nuevo"], [data-vista="pago"], [data-vista="pago-elegir"], [data-vista="pago-hecho"], [data-vista="cliente-editar"], [data-vista="reestructurar"], [data-vista="persona"], [data-vista="persona-nueva"], [data-vista="persona-creada"], [data-vista="cuenta"], [data-vista="avisos"], [data-vista="mensajes"], [data-vista="negocio"], [data-vista="calculadoras"], [data-vista="solicitud-cliente"] { width: 100%; max-width: 44rem; margin-inline: auto; } /* Fichas y listas de filas: algo más anchas. */ [data-vista="cliente"], [data-vista="prestamo"], [data-vista="clientes"], [data-vista="personas"], [data-vista="registro"], [data-vista="prestatario"], [data-vista="numeros"] { width: 100%; max-width: 56rem; margin-inline: auto; } .contenido.pagina-publica { max-width: 44rem; } } /* El icono de WhatsApp en todo lo que abre WhatsApp (Jerry: "para identificarlo más rápido"). Máscara: toma el color. */ a[href^="https://wa.me/"]::before, [data-accion="recordar"]::before, [data-whatsapp]::before { content: ""; display: inline-block; flex: none; width: 1.15em; height: 1.15em; margin-right: 0.4em; vertical-align: -0.2em; background-color: var(--whatsapp); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round' d='M12 2.6a9.4 9.4 0 0 0-8.1 14.2L2.6 21.4l4.7-1.2A9.4 9.4 0 1 0 12 2.6z'/%3E%3Cpath d='M8.6 7.2c.3-.1.6-.1.8.1l1 1.9c.1.3.1.6-.1.8l-.6.7c.6 1.3 1.7 2.4 3 3l.7-.6c.2-.2.5-.3.8-.1l1.9 1c.3.1.4.5.3.8-.3 1-1.2 1.6-2.2 1.5-3.5-.4-6.4-3.3-6.8-6.8-.1-1 .5-1.9 1.2-2.3z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round' d='M12 2.6a9.4 9.4 0 0 0-8.1 14.2L2.6 21.4l4.7-1.2A9.4 9.4 0 1 0 12 2.6z'/%3E%3Cpath d='M8.6 7.2c.3-.1.6-.1.8.1l1 1.9c.1.3.1.6-.1.8l-.6.7c.6 1.3 1.7 2.4 3 3l.7-.6c.2-.2.5-.3.8-.1l1.9 1c.3.1.4.5.3.8-.3 1-1.2 1.6-2.2 1.5-3.5-.4-6.4-3.3-6.8-6.8-.1-1 .5-1.9 1.2-2.3z'/%3E%3C/svg%3E") center / contain no-repeat; } .boton-principal[href^="https://wa.me/"]::before, .boton-principal[data-whatsapp]::before { background-color: currentColor; } .avisar-pago { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linea); } .qr-en-mensaje { display: block; margin: 10px auto 0; max-width: 240px; } .pedido-mio { margin: 12px 0; } .pedido-mio p { margin: 4px 0; } .como-funciona { margin: 0 0 8px; padding-left: 1.3em; } .como-funciona li { margin: 6px 0; line-height: 1.4; } .como-funciona-caja { margin: 12px 0; } button.pedir-prestamo { width: 100%; border: 0; font: inherit; text-align: left; cursor: pointer; } /* La pantalla del cliente, simple: cabecera con el logo, "Pagar con QR" como botón que se despliega, estrellas en una línea y lo demás plegado en "Más". */ .cliente-cabecera { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .cliente-cabecera .titulo-pantalla { margin: 0; } .cliente-cabecera .leyenda { margin: 2px 0 0; } .foto-cliente { width: 48px; height: 48px; flex: none; } .pagar-qr, .estrellas-linea, .mas { margin: 12px 0; } .pagar-qr > summary, .estrellas-linea > summary, .mas > summary { list-style: none; cursor: pointer; } .pagar-qr > summary::-webkit-details-marker, .estrellas-linea > summary::-webkit-details-marker, .mas > summary::-webkit-details-marker { display: none; } .pagar-qr > summary { width: 100%; } .pagar-qr[open] > summary { margin-bottom: 12px; } .estrellas-linea { padding: 0 16px; } .estrellas-linea > summary { display: flex; align-items: center; gap: 6px; min-height: 52px; flex-wrap: wrap; } .estrellas-linea[open] { padding-bottom: 12px; } .estrellas-linea .bloque { margin: 0; } .estrellas-linea .bloque-titulo { display: none; } .estrellas-linea .tarjeta-plana { padding: 0; border: 0; box-shadow: none; background: none; } .mas > summary { display: flex; align-items: center; justify-content: center; min-height: 48px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); color: var(--acento); font-weight: 600; } .mas[open] > summary { margin-bottom: 8px; } .cliente-avisos { margin: 12px 0; } .cliente-avisos p { margin: 0 0 8px; } /* El contrato: se lee entero en un recuadro con su propio desplazamiento; al imprimir, solo sale el contrato. */ .contrato-texto { white-space: pre-wrap; font-size: 0.86rem; line-height: 1.5; max-height: 55vh; overflow-y: auto; padding: 12px 14px; background: var(--superficie-2); border: 1px solid var(--linea); border-radius: 10px; } .aviso-contrato { display: flex; flex-direction: column; gap: 10px; } .aviso-contrato p { margin: 0; } @media print { body * { visibility: hidden !important; } .contrato-imprimir, .contrato-imprimir * { visibility: visible !important; } .contrato-imprimir { position: absolute; left: 0; top: 0; width: 100%; max-height: none; overflow: visible; border: 0; background: #fff; color: #000; font-size: 11pt; } details:not([open]) .contrato-imprimir { display: none; } } .ambar { color: var(--ambar); } /* La dirección vieja avisa de la nueva (dominio propio). */ .aviso-nueva-direccion { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 16px; background: var(--ambar-suave); color: var(--tinta); border-bottom: 1px solid var(--linea); font-size: 0.92rem; } /* Firmar con el dedo (contrato): el recuadro blanco en claro y en noche, y las firmas al pie del contrato. */ .firma-campo { display: flex; flex-direction: column; gap: 6px; } .firma-pad { display: block; width: 100%; height: 170px; background: #fff; border: 1.5px dashed var(--linea-fuerte, var(--linea)); border-radius: 10px; touch-action: none; cursor: crosshair; } .firma-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .contrato-firmas { white-space: normal; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; } .firma-bloque p { margin: 2px 0; font-size: 0.82rem; } .firma-imagen { display: block; width: 100%; max-width: 260px; height: auto; background: #fff; border-radius: 6px; } .firma-ficha { margin: 8px 0; border: 1px solid var(--linea); } .firma-hueco { height: 64px; display: flex; align-items: flex-end; font-weight: 600; font-size: 0.9rem; } .firma-linea { border-top: 1px solid currentColor; padding-top: 4px; font-weight: 600; } .firma-cuando { color: var(--tinta-suave); } @media print { .contrato-firmas { page-break-inside: avoid; } } /* ─── Estilo "Claro" (Jerry, 27/09/2026: "una aplicación más general, bonita, minimalista, con interacciones y movimientos", que sirva para cualquier prestamista). Una sola letra, Archivo, con los títulos en minúscula normal y un poco apretados; superficies blancas que flotan con sombras suaves, sin rayas; botones y opciones en cápsula, campos de 12 px y tarjetas de 18 px. Movimiento con sentido: la pantalla nueva entra suave, los números suben contando, lo que se toca responde. Con "reducir movimiento", nada se mueve. ─── */ :root { --radio: 18px; --radio-campo: 12px; --sombra-1: 0 1px 2px rgb(15 23 19 / 0.05), 0 8px 22px -14px rgb(15 23 19 / 0.22); --sombra-2: 0 2px 4px rgb(15 23 19 / 0.05), 0 16px 34px -16px rgb(15 23 19 / 0.32); --ease: cubic-bezier(0.22, 1, 0.36, 1); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sombra-1: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 22px -14px rgb(0 0 0 / 0.7); --sombra-2: 0 2px 4px rgb(0 0 0 / 0.4), 0 16px 34px -16px rgb(0 0 0 / 0.8); } } :root[data-theme="dark"] { --sombra-1: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 22px -14px rgb(0 0 0 / 0.7); --sombra-2: 0 2px 4px rgb(0 0 0 / 0.4), 0 16px 34px -16px rgb(0 0 0 / 0.8); } body { font-size: 16px; line-height: 1.5; font-variant-numeric: tabular-nums; font-stretch: 108%; } h1, h2, h3, .titulo-pantalla, .acceso-titulo, .marca-nombre, .pedir-titulo { font-family: var(--letra-titulo); } h2, h3 { font-weight: 700; letter-spacing: -0.01em; } .titulo-pantalla, .acceso-titulo { font-weight: 720; letter-spacing: -0.025em; line-height: 1.08; text-transform: none; } .titulo-pantalla { font-size: 1.95rem; margin-top: 6px; } .acceso-titulo { font-size: 2.1rem; } .ficha-titulo h1 { font-weight: 720; letter-spacing: -0.02em; font-size: 1.7rem; line-height: 1.12; } .marca-nombre, .pedir-titulo { font-weight: 720; letter-spacing: -0.02em; } .bloque-titulo { font-family: var(--letra); font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; text-transform: none; color: var(--tinta); padding: 0; border: 0; } .cifra-etiqueta, .registro-dia, .demo-marca, .marca-lema { letter-spacing: 0; text-transform: none; } .cifra-etiqueta { font-size: 0.86rem; font-weight: 600; } .registro-dia { font-weight: 700; font-size: 1rem; color: var(--tinta); } .marca-lema { font-size: 0.95rem; } .marca-nombre { font-size: 1.8rem; } .etiqueta { font-size: 0.86rem; } @media (min-width: 600px) { .tabla { font-size: 0.86rem; } .tabla th { font-size: 0.78rem; } } .tabla { font-stretch: 94%; } .resumen-saldo-valor, .tarjeta-saldo-valor, .cifra-valor { font-weight: 720; letter-spacing: -0.02em; } .agenda-grupo { font-size: 1.12rem; font-weight: 700; color: var(--tinta); } .cabecera { border-bottom: 0; box-shadow: 0 1px 0 var(--linea); } .cabecera-negocio { font-weight: 700; font-size: 1.1rem; letter-spacing: -0.01em; } ::selection { background: var(--acento-suave); color: var(--tinta); } /* Superficies que flotan: sin raya, con sombra suave. */ .tarjeta, .cifra, .resumen, .lista-filas, .tarjeta-plana, .datos, .capital-libre { border-color: transparent; box-shadow: var(--sombra-1); border-radius: var(--radio); } .tarjeta-plana .tarjeta-plana, .tarjeta .tarjeta-plana { box-shadow: none; border: 0; padding: 0; background: none; } .aviso { border-radius: 14px; border-color: transparent; } .tarjeta { transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), background-color 180ms ease; } @media (hover: hover) { .tarjeta:hover { border-color: transparent; transform: translateY(-2px); box-shadow: var(--sombra-2); } } .tarjeta:active { transform: scale(0.99); } .barra { height: 8px; } .barra-capital { transform-origin: left; animation: crecer 700ms var(--ease) both; } @keyframes crecer { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* Botones y opciones en cápsula; el principal, con una sombra de su color. */ .boton, .boton-pequeno, .boton-grande { border-radius: 999px; } .boton { border-color: transparent; background: var(--superficie-2); } .boton-principal { background: var(--acento); border-color: var(--acento); color: #fff; box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--acento) 70%, transparent); } .boton-peligro { color: #fff; } .boton:active, .opcion:active, .nav-item:active, .pedir-prestamo:active { transform: scale(0.97); } .chip { border-radius: 999px; } .campo input, .campo select, .campo textarea { border-radius: var(--radio-campo); transition: border-color 160ms ease, box-shadow 160ms ease; } .campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { outline: none; border-color: var(--acento); box-shadow: 0 0 0 4px var(--acento-suave); } .pestanas { border-radius: 999px; padding: 4px; } .pestana { border-radius: 999px; transition: background-color 200ms var(--ease), color 200ms ease, box-shadow 200ms ease; } .pestana[aria-current="page"] { box-shadow: var(--sombra-1); } /* La barra de abajo: la sección activa en su cápsula (.nav-indicador), que se desliza a la nueva al cambiar. */ .barra-nav { box-shadow: 0 -1px 0 var(--linea); border-top: 0; } .nav-item { position: relative; z-index: 1; border-radius: 16px; } .nav-item[aria-current="page"] { background: transparent; } .nav-indicador { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 16px; background: var(--acento-suave); pointer-events: none; } /* Las listas entran escalonadas al abrir la pantalla. */ .entra-suave .lista-tarjetas > li, .entra-suave .cifras > *, .entra-suave .capital-libre { animation: aparecer 420ms var(--ease) both; } .entra-suave .cifras > :nth-child(2), .entra-suave .lista-tarjetas > li:nth-child(2) { animation-delay: 40ms; } .entra-suave .cifras > :nth-child(3), .entra-suave .lista-tarjetas > li:nth-child(3) { animation-delay: 80ms; } .entra-suave .cifras > :nth-child(4), .entra-suave .lista-tarjetas > li:nth-child(4) { animation-delay: 120ms; } .entra-suave .lista-tarjetas > li:nth-child(n+5) { animation-delay: 160ms; } .texto-ayuda p, .instalar-caja p { margin: 0 0 10px; } /* Los avisos de Inicio: botón a su medida (no una franja azul a todo lo ancho), así no compiten con "Ha pagado". */ .aviso .botones .boton, .aviso-solicitud .botones .boton, .aviso-solicitud-cliente .botones .boton { flex: 0 0 auto; } .aviso-solicitud, .aviso-solicitud-cliente { gap: 8px; } /* Para prestar (Inicio, solo el dueño): cuánto capital queda libre; y "Mi capital" (#/capital). */ .capital-libre { margin: 0 0 14px; padding: 16px 18px; background: var(--superficie); border: 1px solid transparent; } .capital-libre .cifra-valor { font-size: 2.3rem; line-height: 1.05; margin: 4px 0 6px; } .capital-libre .cifra-nota { margin: 0; color: var(--tinta-suave); font-size: 0.92rem; } .capital-libre .botones { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; } .capital-libre .botones .boton { flex: 1 1 8rem; } .capital-libre.capital-pasado { box-shadow: var(--sombra-1), inset 0 0 0 2px var(--ambar-suave); } .capital-texto { margin: 4px 0 0; } .campos-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .campos-fila > * { min-width: 0; } .capital-rinde { margin: 6px 0 10px; font-size: 1.05rem; } .fila-capital { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--linea); } /* El botón redondo de WhatsApp, abajo a la derecha, para escribir al negocio (entrar, Tu espacio, pantalla del cliente). */ .wa-flotante { position: fixed; z-index: 30; right: max(16px, env(safe-area-inset-right)); bottom: calc(18px + env(safe-area-inset-bottom)); width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #1faa55; color: #fff; text-decoration: none; box-shadow: 0 12px 26px -10px rgb(20 120 64 / 0.7); transition: transform 160ms var(--ease), box-shadow 160ms var(--ease); animation: wa-entra 520ms var(--ease) 300ms both; } a.wa-flotante[href]::before { width: 30px; height: 30px; margin: 0; vertical-align: 0; background-color: #fff; } .wa-flotante:active { transform: scale(0.93); } @media (hover: hover) { .wa-flotante:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -10px rgb(20 120 64 / 0.75); } } .wa-flotante:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; } @keyframes wa-entra { from { opacity: 0; transform: translateY(18px) scale(0.85); } to { opacity: 1; transform: none; } } .contenido.con-wa { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }