marcos/motor-de-encuestas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(quality): contraste teal, submit red, bottombar mobile, autocomplete touch

Browse Source 
P1: color de texto teal -> #494F4F en 5 clases del wizard (WCAG AA).
P2: try/catch en handleSubmit - error de red muestra estado error del wizard.
P3: flex-wrap + column-reverse en bottombar <=480px.
P4: onTouchEnd fallback en autocomplete barrio y ciudad.
This commit is contained in:
markosbenitez
2026-06-27 15:25:16 -03:00
parent b3f039fbd5
commit ca3af1a750
4 changed files with 31 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
app/globals.css
View File

@@ -316,7 +316,7 @@ body {
.barrio-autocomplete-item:hover,
.barrio-autocomplete-item--active {
background: var(--color-primary-light);
color: var(--color-primary);
color: #494F4F;
}
/* ── Textarea ── */
@@ -377,7 +377,7 @@ body {
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-secondary {
background: transparent;
color: var(--color-primary);
color: #494F4F;
border-color: var(--color-primary);
}
.btn-secondary:hover { background: var(--color-primary-light); }
@@ -428,7 +428,7 @@ body {
}
.summary-code {
font-weight: 700;
color: var(--color-primary);
color: #494F4F;
margin-right: 4px;
}
.summary-answer {
@@ -487,7 +487,7 @@ body {
.consent-checkbox-label:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-light); }
.consent-checkbox-input { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; accent-color: var(--color-primary); cursor: pointer; }
.consent-checkbox-text { flex: 1; }
.consent-required-badge { display: inline-block; font-size: 0.75rem; font-weight: 600; color: var(--color-primary); background: var(--color-primary-light); padding: 1px 6px; border-radius: 4px; }
.consent-required-badge { display: inline-block; font-size: 0.75rem; font-weight: 600; color: #494F4F; background: var(--color-primary-light); padding: 1px 6px; border-radius: 4px; }
.consent-optional-badge { display: inline-block; font-size: 0.75rem; font-weight: 600; color: var(--color-text-muted); background: #f3f4f6; padding: 1px 6px; border-radius: 4px; }
.consent-footer { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.consent-required-hint { margin: 0; font-size: 0.875rem; color: var(--color-text-muted); }
@@ -566,7 +566,7 @@ body {
.wizard-section-number {
font-size: 0.9375rem;
font-weight: 700;
color: var(--color-primary);
color: #494F4F;
margin: 0 0 8px;
}
.wizard-section-title {
@@ -659,6 +659,7 @@ body {
padding: 16px 0;
margin-top: 16px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 12px;
@@ -673,6 +674,11 @@ body {
.wizard-prompt-text { font-size: 1.1875rem; }
.wizard-section-title { font-size: 1.5rem; }
.wizard-answer-area { max-height: 400px; }
/* column-reverse: el botón primario (Siguiente/Enviar) queda arriba —
el pulgar llega más fácil al centro de la pantalla que a la base. */
.wizard-bottombar { flex-direction: column-reverse; }
.wizard-bottombar .btn { width: 100%; }
.wizard-bottombar-hint { order: 3; }
}
/* ── Loading skeleton ── */