Feat: Implementar UI completa de RioCata - Sistema de catación de café
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 1m3s
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 1m3s
Agregar sistema completo de catación de café con las siguientes características: - Tipos TypeScript completos para sesiones, muestras, intensidades y notas - Composable useIndexedDB para gestión de sesión activa en cliente - Composable useCatacion con lógica de negocio para actualización de muestras - Componentes reutilizables: * SliderIntensidad: Slider dual para valores descriptivos (1-10) y afectivos (1-15) * SelectorFamilia: Selector jerárquico de familias de notas (3 niveles) * SelectorTazas: Selector de tazas (1-5) para uniformidad y defectos * ResumenMuestra: Header de accordion con progreso y estadísticas * FormularioMuestra: Formulario completo con 3 tabs (Fragancia/Aroma, Sabor, Impresión Global) - Páginas: * /cata: Gestión de sesiones (crear nueva o continuar existente) * /cata/sesion: Interfaz principal de catación con accordions y tabs - Tema dual: * Modo claro: Fondo blanco, texto negro, outlines azules * Modo oscuro: Fondo negro, texto verde terminal, estilo monospace - Diseño mobile-first responsive con CSS vanilla (sin @apply de Tailwind) - Configuración PWA con almacenamiento en IndexedDB
This commit is contained in:
@@ -1,2 +1,355 @@
|
||||
@import "tailwindcss";
|
||||
@import "@nuxt/ui";
|
||||
|
||||
@tailwind utilities;
|
||||
|
||||
/* ========================================================================== */
|
||||
/* ESTILOS PERSONALIZADOS PARA RIOCATA */
|
||||
/* ========================================================================== */
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* MODO CLARO: Estilo papel blanco con outlines azules */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--cata-bg: #ffffff;
|
||||
--cata-fg: #000000;
|
||||
--cata-primary: #4682b4; /* Steel Blue */
|
||||
--cata-primary-light: #87ceeb; /* Sky Blue */
|
||||
--cata-primary-dark: #00008b; /* Dark Blue */
|
||||
--cata-border-width: 1px;
|
||||
--cata-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
:root:not(.dark) {
|
||||
--cata-bg: #ffffff;
|
||||
--cata-fg: #000000;
|
||||
--cata-primary: #4682b4;
|
||||
--cata-primary-light: #87ceeb;
|
||||
--cata-primary-dark: #00008b;
|
||||
--cata-border-width: 1px;
|
||||
--cata-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* MODO OSCURO: Estilo terminal verde antiguo */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--cata-bg: #000000;
|
||||
--cata-fg: #00ff00; /* Terminal Green */
|
||||
--cata-primary: #00ff00; /* Terminal Green */
|
||||
--cata-primary-light: #00cc00; /* Medium Green */
|
||||
--cata-primary-dark: #009900; /* Dark Green */
|
||||
--cata-border-width: 0.75px;
|
||||
--cata-font-family: 'Courier New', Courier, 'Lucida Console', Monaco, monospace;
|
||||
}
|
||||
}
|
||||
|
||||
:root.dark {
|
||||
--cata-bg: #000000;
|
||||
--cata-fg: #00ff00;
|
||||
--cata-primary: #00ff00;
|
||||
--cata-primary-light: #00cc00;
|
||||
--cata-primary-dark: #009900;
|
||||
--cata-border-width: 0.75px;
|
||||
--cata-font-family: 'Courier New', Courier, 'Lucida Console', Monaco, monospace;
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* UTILIDADES GLOBALES */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
/* Outline containers sin fondo relleno */
|
||||
.cata-outline-box {
|
||||
background-color: transparent;
|
||||
border: var(--cata-border-width) solid var(--cata-primary);
|
||||
border-color: color-mix(in srgb, var(--cata-primary) 50%, transparent);
|
||||
}
|
||||
|
||||
.dark .cata-outline-box {
|
||||
border-color: color-mix(in srgb, var(--cata-primary) 70%, transparent);
|
||||
}
|
||||
|
||||
/* Líneas delgadas horizontales */
|
||||
.cata-divider {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: color-mix(in srgb, var(--cata-primary) 30%, transparent);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.dark .cata-divider {
|
||||
background-color: color-mix(in srgb, var(--cata-primary) 50%, transparent);
|
||||
}
|
||||
|
||||
/* Texto con estilo terminal en modo oscuro */
|
||||
.cata-text {
|
||||
color: var(--cata-fg);
|
||||
font-family: var(--cata-font-family);
|
||||
}
|
||||
|
||||
.dark .cata-text {
|
||||
text-shadow: 0 0 2px currentColor;
|
||||
font-weight: 300;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* COMPONENTES ESPECÍFICOS */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
/* Páginas de catación: fondo completo */
|
||||
.cata-page {
|
||||
min-height: 100vh;
|
||||
background-color: var(--cata-bg);
|
||||
color: var(--cata-fg);
|
||||
}
|
||||
|
||||
/* Headers de accordions */
|
||||
.cata-accordion-header {
|
||||
background-color: transparent;
|
||||
border: var(--cata-border-width) solid var(--cata-primary);
|
||||
border-color: color-mix(in srgb, var(--cata-primary) 50%, transparent);
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 0.375rem;
|
||||
transition: all 200ms;
|
||||
}
|
||||
|
||||
.cata-accordion-header:hover {
|
||||
background-color: color-mix(in srgb, var(--cata-primary) 5%, transparent);
|
||||
}
|
||||
|
||||
.dark .cata-accordion-header:hover {
|
||||
background-color: color-mix(in srgb, var(--cata-primary) 10%, transparent);
|
||||
}
|
||||
|
||||
/* Tabs personalizados */
|
||||
.cata-tab {
|
||||
border-bottom: 2px solid transparent;
|
||||
padding: 0.5rem 1rem;
|
||||
transition: all 200ms;
|
||||
color: color-mix(in srgb, var(--cata-fg) 60%, transparent);
|
||||
}
|
||||
|
||||
.cata-tab-active {
|
||||
border-bottom: 2px solid var(--cata-primary);
|
||||
border-color: var(--cata-primary);
|
||||
color: var(--cata-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.dark .cata-tab-active {
|
||||
text-shadow: 0 0 4px currentColor;
|
||||
}
|
||||
|
||||
/* Inputs con outline */
|
||||
.cata-input {
|
||||
background-color: transparent;
|
||||
border: var(--cata-border-width) solid var(--cata-primary);
|
||||
border-color: color-mix(in srgb, var(--cata-primary) 50%, transparent);
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 0.375rem;
|
||||
color: var(--cata-fg);
|
||||
font-family: var(--cata-font-family);
|
||||
}
|
||||
|
||||
.cata-input:focus {
|
||||
outline: 2px solid var(--cata-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.dark .cata-input {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
/* Sliders personalizados */
|
||||
.cata-slider-track {
|
||||
background-color: transparent;
|
||||
border: var(--cata-border-width) solid;
|
||||
border-color: color-mix(in srgb, var(--cata-primary) 50%, transparent);
|
||||
}
|
||||
|
||||
.cata-slider-thumb {
|
||||
background-color: white;
|
||||
border: 2px solid var(--cata-primary);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.dark .cata-slider-thumb {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.dark .cata-slider-thumb {
|
||||
box-shadow: 0 0 6px var(--cata-primary);
|
||||
}
|
||||
|
||||
/* Checkboxes con outline */
|
||||
.cata-checkbox {
|
||||
background-color: transparent;
|
||||
border: var(--cata-border-width) solid var(--cata-primary);
|
||||
border-color: color-mix(in srgb, var(--cata-primary) 50%, transparent);
|
||||
border-radius: 0.375rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
cursor: pointer;
|
||||
transition: all 150ms;
|
||||
}
|
||||
|
||||
.cata-checkbox:hover {
|
||||
background-color: color-mix(in srgb, var(--cata-primary) 5%, transparent);
|
||||
}
|
||||
|
||||
.cata-checkbox-checked {
|
||||
border-color: var(--cata-primary) !important;
|
||||
border-width: 2px;
|
||||
background-color: color-mix(in srgb, var(--cata-primary) 10%, transparent);
|
||||
}
|
||||
|
||||
.dark .cata-checkbox-checked {
|
||||
background-color: color-mix(in srgb, var(--cata-primary) 15%, transparent);
|
||||
box-shadow: 0 0 8px color-mix(in srgb, var(--cata-primary) 30%, transparent);
|
||||
}
|
||||
|
||||
/* Botones con outline */
|
||||
.cata-button {
|
||||
background-color: transparent;
|
||||
border: var(--cata-border-width) solid var(--cata-primary);
|
||||
border-color: color-mix(in srgb, var(--cata-primary) 50%, transparent);
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.375rem;
|
||||
transition: all 200ms;
|
||||
cursor: pointer;
|
||||
color: var(--cata-fg);
|
||||
font-family: var(--cata-font-family);
|
||||
}
|
||||
|
||||
.cata-button:hover {
|
||||
background-color: color-mix(in srgb, var(--cata-primary) 10%, transparent);
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.cata-button:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.dark .cata-button:hover {
|
||||
box-shadow: 0 0 12px color-mix(in srgb, var(--cata-primary) 40%, transparent);
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* ANIMACIONES Y TRANSICIONES */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
/* Fade in suave para contenido */
|
||||
@keyframes cata-fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.cata-fade-in {
|
||||
animation: cata-fade-in 0.3s ease-out;
|
||||
}
|
||||
|
||||
/* Glow effect para modo oscuro */
|
||||
@keyframes cata-glow-pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.dark .cata-glow {
|
||||
animation: cata-glow-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* RESPONSIVE Y MOBILE-FIRST */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
/* Optimizaciones para móvil */
|
||||
@media (max-width: 640px) {
|
||||
.cata-accordion-header {
|
||||
padding: 0.5rem 0.75rem;
|
||||
}
|
||||
|
||||
.cata-tab {
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.cata-button {
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Optimizaciones para tablet */
|
||||
@media (min-width: 641px) and (max-width: 1024px) {
|
||||
.cata-accordion-header {
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Ajustes para orientación landscape en móviles */
|
||||
@media (max-height: 500px) and (orientation: landscape) {
|
||||
.cata-page {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.cata-accordion-header {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Touch-friendly: Aumentar áreas de toque */
|
||||
@media (hover: none) and (pointer: coarse) {
|
||||
.cata-button,
|
||||
.cata-checkbox,
|
||||
.cata-tab {
|
||||
min-height: 44px;
|
||||
min-width: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* ACCESIBILIDAD */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
/* Focus visible mejorado */
|
||||
*:focus-visible {
|
||||
outline: 2px solid var(--cata-primary);
|
||||
outline-offset: 2px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.dark *:focus-visible {
|
||||
outline-width: 3px;
|
||||
box-shadow: 0 0 8px var(--cata-primary);
|
||||
}
|
||||
|
||||
/* Modo de alto contraste */
|
||||
@media (prefers-contrast: high) {
|
||||
:root {
|
||||
--cata-border-width: 2px;
|
||||
}
|
||||
|
||||
.cata-outline-box {
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.dark .cata-text {
|
||||
text-shadow: none;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user