josedario87
1eff0772ab
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 1m8s
- Cambiar botón expandir a estilo texto (solo icono) - Agregar colores específicos por categoría a iconos de intensidades - Agregar sección de características organolépticas con notas - Agregar sección de notas adicionales - Cambiar badges de puntajes a solo outline (sin relleno) - Respetar preferencias de color del usuario en badges excepto SCAA - Corregir tipo de longPressTimer (ReturnType<typeof setTimeout>)
628 lines
17 KiB
Vue
628 lines
17 KiB
Vue
<template>
|
|
<div class="resumen-expandido cata-text">
|
|
<!-- Header con título y puntajes principales -->
|
|
<div class="header-section">
|
|
<div class="muestra-info">
|
|
<div class="muestra-numero">#{{ muestra.muestraId }}</div>
|
|
<h3 class="muestra-nombre">{{ muestra.nombre }}</h3>
|
|
</div>
|
|
|
|
<!-- Puntajes destacados -->
|
|
<div class="puntajes-principales">
|
|
<div class="puntaje-grande puntaje-sumatoria">
|
|
<div class="puntaje-label">Sumatoria Afectiva</div>
|
|
<div class="puntaje-valor">{{ sumatoriaAfectiva }}</div>
|
|
</div>
|
|
|
|
<div class="puntaje-grande puntaje-scaa" :class="scaaClass">
|
|
<div class="puntaje-label">SCAA Score</div>
|
|
<div class="puntaje-valor">{{ scaaScore.toFixed(2) }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Intensidades Afectivas -->
|
|
<div class="seccion">
|
|
<h4 class="seccion-titulo">Valores Afectivos</h4>
|
|
<div class="intensidades-grid">
|
|
<div v-if="muestra.intensidades.fragancia.afectiva !== null" class="intensidad-item">
|
|
<UIcon :name="getCategoryIcon('fragancia')" class="intensidad-icon" :style="{ color: getCategoryColor('fragancia') }" />
|
|
<div class="intensidad-info">
|
|
<div class="intensidad-nombre">Fragancia</div>
|
|
<div class="intensidad-valor">{{ muestra.intensidades.fragancia.afectiva }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="muestra.intensidades.aroma.afectiva !== null" class="intensidad-item">
|
|
<UIcon :name="getCategoryIcon('aroma')" class="intensidad-icon" :style="{ color: getCategoryColor('aroma') }" />
|
|
<div class="intensidad-info">
|
|
<div class="intensidad-nombre">Aroma</div>
|
|
<div class="intensidad-valor">{{ muestra.intensidades.aroma.afectiva }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="muestra.intensidades.sabor.afectiva !== null" class="intensidad-item">
|
|
<UIcon :name="getCategoryIcon('sabor')" class="intensidad-icon" :style="{ color: getCategoryColor('sabor') }" />
|
|
<div class="intensidad-info">
|
|
<div class="intensidad-nombre">Sabor</div>
|
|
<div class="intensidad-valor">{{ muestra.intensidades.sabor.afectiva }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="muestra.intensidades.saborResidual.afectiva !== null" class="intensidad-item">
|
|
<UIcon :name="getCategoryIcon('saborResidual')" class="intensidad-icon" :style="{ color: getCategoryColor('saborResidual') }" />
|
|
<div class="intensidad-info">
|
|
<div class="intensidad-nombre">Sabor Residual</div>
|
|
<div class="intensidad-valor">{{ muestra.intensidades.saborResidual.afectiva }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="muestra.intensidades.acidez.afectiva !== null" class="intensidad-item">
|
|
<UIcon :name="getCategoryIcon('acidez')" class="intensidad-icon" :style="{ color: getCategoryColor('acidez') }" />
|
|
<div class="intensidad-info">
|
|
<div class="intensidad-nombre">Acidez</div>
|
|
<div class="intensidad-valor">{{ muestra.intensidades.acidez.afectiva }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="muestra.intensidades.dulzor.afectiva !== null" class="intensidad-item">
|
|
<UIcon :name="getCategoryIcon('dulzor')" class="intensidad-icon" :style="{ color: getCategoryColor('dulzor') }" />
|
|
<div class="intensidad-info">
|
|
<div class="intensidad-nombre">Dulzor</div>
|
|
<div class="intensidad-valor">{{ muestra.intensidades.dulzor.afectiva }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="muestra.intensidades.sensacionBoca.afectiva !== null" class="intensidad-item">
|
|
<UIcon :name="getCategoryIcon('sensacionBoca')" class="intensidad-icon" :style="{ color: getCategoryColor('sensacionBoca') }" />
|
|
<div class="intensidad-info">
|
|
<div class="intensidad-nombre">Sensación en Boca</div>
|
|
<div class="intensidad-valor">{{ muestra.intensidades.sensacionBoca.afectiva }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="muestra.intensidades.impresionGlobal.afectiva !== null" class="intensidad-item">
|
|
<UIcon :name="getCategoryIcon('impresionGlobal')" class="intensidad-icon" :style="{ color: getCategoryColor('impresionGlobal') }" />
|
|
<div class="intensidad-info">
|
|
<div class="intensidad-nombre">Impresión Global</div>
|
|
<div class="intensidad-valor">{{ muestra.intensidades.impresionGlobal.afectiva }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Características Organolépticas (si existen) -->
|
|
<div v-if="hasOrganolepticData" class="seccion">
|
|
<h4 class="seccion-titulo">Características Organolépticas</h4>
|
|
<div class="organoleptica-grid">
|
|
<!-- Fragancia/Aroma Notas -->
|
|
<div v-if="muestra.fraganciaAromaNotas.categorias.length > 0" class="organoleptica-item">
|
|
<div class="organoleptica-label">
|
|
<UIcon name="i-lucide-flower-2" class="organoleptica-icon" />
|
|
Fragancia/Aroma
|
|
</div>
|
|
<div class="organoleptica-contenido">
|
|
<div class="categorias-list">
|
|
<span v-for="cat in muestra.fraganciaAromaNotas.categorias" :key="cat" class="categoria-chip">
|
|
{{ cat }}
|
|
</span>
|
|
</div>
|
|
<div v-if="muestra.fraganciaAromaNotas.notaEspecifica" class="notas-texto">
|
|
{{ muestra.fraganciaAromaNotas.notaEspecifica }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sabor Notas -->
|
|
<div v-if="muestra.saborNotas.categorias.length > 0" class="organoleptica-item">
|
|
<div class="organoleptica-label">
|
|
<UIcon name="i-lucide-candy" class="organoleptica-icon" />
|
|
Sabor
|
|
</div>
|
|
<div class="organoleptica-contenido">
|
|
<div class="categorias-list">
|
|
<span v-for="cat in muestra.saborNotas.categorias" :key="cat" class="categoria-chip">
|
|
{{ cat }}
|
|
</span>
|
|
</div>
|
|
<div v-if="muestra.saborNotas.notaEspecifica" class="notas-texto">
|
|
{{ muestra.saborNotas.notaEspecifica }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Gustos Predominantes -->
|
|
<div v-if="muestra.gustosPredominantes.length > 0" class="organoleptica-item">
|
|
<div class="organoleptica-label">
|
|
<UIcon name="i-lucide-sparkles" class="organoleptica-icon" />
|
|
Gustos Predominantes
|
|
</div>
|
|
<div class="organoleptica-contenido">
|
|
<div class="categorias-list">
|
|
<span v-for="gusto in muestra.gustosPredominantes" :key="gusto" class="categoria-chip">
|
|
{{ gusto }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sensación en Boca -->
|
|
<div v-if="muestra.sensacionEnBoca" class="organoleptica-item">
|
|
<div class="organoleptica-label">
|
|
<UIcon name="i-lucide-droplets" class="organoleptica-icon" />
|
|
Sensación en Boca
|
|
</div>
|
|
<div class="organoleptica-contenido">
|
|
<div class="sensacion-valor">{{ muestra.sensacionEnBoca }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Defectos (si existen) -->
|
|
<div v-if="muestra.tazasNoUniformes.length > 0 || muestra.tazasDefectuosas.length > 0" class="seccion">
|
|
<h4 class="seccion-titulo">Penalizaciones</h4>
|
|
<div class="defectos-info">
|
|
<div v-if="muestra.tazasNoUniformes.length > 0" class="defecto-item defecto-warning">
|
|
<UIcon name="i-lucide-alert-circle" class="defecto-icon" />
|
|
<div>
|
|
<div class="defecto-label">Tazas No Uniformes</div>
|
|
<div class="defecto-detalle">{{ muestra.tazasNoUniformes.length }} taza(s) - {{ muestra.tazasNoUniformes.join(', ') }}</div>
|
|
<div class="defecto-penalizacion">-{{ muestra.tazasNoUniformes.length * 2 }} puntos</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="muestra.tazasDefectuosas.length > 0" class="defecto-item defecto-error">
|
|
<UIcon name="i-lucide-x-circle" class="defecto-icon" />
|
|
<div>
|
|
<div class="defecto-label">Tazas Defectuosas</div>
|
|
<div class="defecto-detalle">{{ muestra.tazasDefectuosas.length }} taza(s) - {{ muestra.tazasDefectuosas.join(', ') }}</div>
|
|
<div v-if="muestra.defecto" class="defecto-tipo">Tipo: {{ muestra.defecto }}</div>
|
|
<div class="defecto-penalizacion">-{{ muestra.tazasDefectuosas.length * 4 }} puntos</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Notas Adicionales (si existen) -->
|
|
<div v-if="muestra.otrasNotas" class="seccion">
|
|
<h4 class="seccion-titulo">Notas Adicionales</h4>
|
|
<div class="notas-adicionales-box">
|
|
<p class="notas-adicionales-texto">{{ muestra.otrasNotas }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Muestra } from '~/types/catacion'
|
|
import { calcularSumatoriaAfectiva, calcularSCAA } from '~/types/catacion'
|
|
|
|
interface Props {
|
|
muestra: Muestra
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
// Cálculos de puntajes
|
|
const sumatoriaAfectiva = computed(() => calcularSumatoriaAfectiva(props.muestra))
|
|
const scaaScore = computed(() => calcularSCAA(props.muestra))
|
|
|
|
// Clase CSS para el SCAA Score basado en el valor
|
|
const scaaClass = computed(() => {
|
|
const scaa = scaaScore.value
|
|
if (scaa >= 90) return 'scaa-excelente'
|
|
if (scaa >= 85) return 'scaa-muy-bueno'
|
|
if (scaa >= 80) return 'scaa-bueno'
|
|
if (scaa >= 70) return 'scaa-regular'
|
|
return 'scaa-bajo'
|
|
})
|
|
|
|
// Función para obtener el icono de cada categoría
|
|
const getCategoryIcon = (category: string): string => {
|
|
const icons: Record<string, string> = {
|
|
fragancia: 'i-lucide-flower-2',
|
|
aroma: 'i-lucide-wind',
|
|
sabor: 'i-lucide-candy',
|
|
saborResidual: 'i-lucide-timer',
|
|
acidez: 'i-lucide-citrus',
|
|
dulzor: 'i-lucide-cookie',
|
|
sensacionBoca: 'i-lucide-droplets',
|
|
impresionGlobal: 'i-lucide-star',
|
|
}
|
|
return icons[category] || 'i-lucide-circle'
|
|
}
|
|
|
|
// Función para obtener el color de cada categoría
|
|
const getCategoryColor = (category: string): string => {
|
|
const colors: Record<string, string> = {
|
|
fragancia: '#8B7AB8',
|
|
aroma: '#26A69A',
|
|
sabor: '#E53935',
|
|
saborResidual: '#F57C00',
|
|
acidez: '#FDD835',
|
|
dulzor: '#EC407A',
|
|
sensacionBoca: '#1E88E5',
|
|
impresionGlobal: '#00ACC1',
|
|
}
|
|
return colors[category] || 'var(--cata-primary)'
|
|
}
|
|
|
|
// Verificar si hay datos organolépticos
|
|
const hasOrganolepticData = computed(() => {
|
|
return props.muestra.fraganciaAromaNotas.categorias.length > 0 ||
|
|
props.muestra.saborNotas.categorias.length > 0 ||
|
|
props.muestra.gustosPredominantes.length > 0 ||
|
|
props.muestra.sensacionEnBoca
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.resumen-expandido {
|
|
padding: 1.5rem;
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* Header Section */
|
|
.header-section {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.muestra-info {
|
|
text-align: center;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.muestra-numero {
|
|
font-size: 1.25rem;
|
|
font-weight: bold;
|
|
opacity: 0.6;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.muestra-nombre {
|
|
font-size: 1.75rem;
|
|
font-weight: bold;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Puntajes Principales */
|
|
.puntajes-principales {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.puntaje-grande {
|
|
padding: 1.5rem;
|
|
border-radius: 0.75rem;
|
|
border: 2px solid;
|
|
text-align: center;
|
|
}
|
|
|
|
.puntaje-label {
|
|
font-size: 0.875rem;
|
|
opacity: 0.75;
|
|
margin-bottom: 0.5rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.puntaje-valor {
|
|
font-size: 2.5rem;
|
|
font-weight: bold;
|
|
line-height: 1;
|
|
}
|
|
|
|
.puntaje-sumatoria {
|
|
background-color: color-mix(in srgb, var(--cata-primary) 15%, transparent);
|
|
border-color: color-mix(in srgb, var(--cata-primary) 40%, transparent);
|
|
color: var(--cata-text);
|
|
}
|
|
|
|
/* SCAA Score Colors */
|
|
.scaa-excelente {
|
|
background-color: color-mix(in srgb, #10b981 20%, transparent);
|
|
border-color: #10b981;
|
|
color: #10b981;
|
|
}
|
|
|
|
.scaa-muy-bueno {
|
|
background-color: color-mix(in srgb, #3b82f6 20%, transparent);
|
|
border-color: #3b82f6;
|
|
color: #3b82f6;
|
|
}
|
|
|
|
.scaa-bueno {
|
|
background-color: color-mix(in srgb, #f59e0b 20%, transparent);
|
|
border-color: #f59e0b;
|
|
color: #f59e0b;
|
|
}
|
|
|
|
.scaa-regular {
|
|
background-color: color-mix(in srgb, #ef4444 20%, transparent);
|
|
border-color: #ef4444;
|
|
color: #ef4444;
|
|
}
|
|
|
|
.scaa-bajo {
|
|
background-color: color-mix(in srgb, #6b7280 20%, transparent);
|
|
border-color: #6b7280;
|
|
color: #6b7280;
|
|
}
|
|
|
|
/* Secciones */
|
|
.seccion {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.seccion-titulo {
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
margin-bottom: 1rem;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* Intensidades Grid */
|
|
.intensidades-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.intensidad-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 1rem;
|
|
border-radius: 0.5rem;
|
|
background-color: color-mix(in srgb, var(--cata-primary) 10%, transparent);
|
|
border: 1px solid color-mix(in srgb, var(--cata-primary) 30%, transparent);
|
|
}
|
|
|
|
.intensidad-icon {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
color: var(--cata-primary);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.intensidad-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.intensidad-nombre {
|
|
font-size: 0.75rem;
|
|
opacity: 0.75;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.intensidad-valor {
|
|
font-size: 1.5rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Defectos */
|
|
.defectos-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.defecto-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 1rem;
|
|
padding: 1rem;
|
|
border-radius: 0.5rem;
|
|
border: 1px solid;
|
|
}
|
|
|
|
.defecto-icon {
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
flex-shrink: 0;
|
|
margin-top: 0.125rem;
|
|
}
|
|
|
|
.defecto-label {
|
|
font-weight: 600;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.defecto-detalle {
|
|
font-size: 0.875rem;
|
|
opacity: 0.8;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.defecto-tipo {
|
|
font-size: 0.875rem;
|
|
opacity: 0.8;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.defecto-penalizacion {
|
|
font-weight: 600;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.defecto-warning {
|
|
background-color: color-mix(in srgb, #f59e0b 15%, transparent);
|
|
border-color: #f59e0b;
|
|
color: #f59e0b;
|
|
}
|
|
|
|
.defecto-error {
|
|
background-color: color-mix(in srgb, #ef4444 15%, transparent);
|
|
border-color: #ef4444;
|
|
color: #ef4444;
|
|
}
|
|
|
|
/* Organoléptica */
|
|
.organoleptica-grid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.organoleptica-item {
|
|
padding: 1rem;
|
|
border-radius: 0.5rem;
|
|
background-color: color-mix(in srgb, var(--cata-primary) 10%, transparent);
|
|
border: 1px solid color-mix(in srgb, var(--cata-primary) 30%, transparent);
|
|
}
|
|
|
|
.organoleptica-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-weight: 600;
|
|
margin-bottom: 0.75rem;
|
|
font-size: 0.875rem;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.organoleptica-icon {
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
color: var(--cata-primary);
|
|
}
|
|
|
|
.organoleptica-contenido {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.categorias-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.categoria-chip {
|
|
padding: 0.375rem 0.75rem;
|
|
border-radius: 0.375rem;
|
|
background-color: color-mix(in srgb, var(--cata-primary) 20%, transparent);
|
|
border: 1px solid color-mix(in srgb, var(--cata-primary) 40%, transparent);
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.notas-texto {
|
|
font-size: 0.875rem;
|
|
opacity: 0.85;
|
|
line-height: 1.5;
|
|
font-style: italic;
|
|
}
|
|
|
|
.sensacion-valor {
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Notas Adicionales */
|
|
.notas-adicionales-box {
|
|
padding: 1rem;
|
|
border-radius: 0.5rem;
|
|
background-color: color-mix(in srgb, var(--cata-primary) 10%, transparent);
|
|
border: 1px solid color-mix(in srgb, var(--cata-primary) 30%, transparent);
|
|
}
|
|
|
|
.notas-adicionales-texto {
|
|
font-size: 0.875rem;
|
|
line-height: 1.6;
|
|
margin: 0;
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
/* Modo oscuro */
|
|
.dark .puntaje-sumatoria {
|
|
background-color: color-mix(in srgb, var(--cata-primary) 20%, transparent);
|
|
}
|
|
|
|
.dark .scaa-excelente {
|
|
background-color: color-mix(in srgb, #10b981 30%, transparent);
|
|
}
|
|
|
|
.dark .scaa-muy-bueno {
|
|
background-color: color-mix(in srgb, #3b82f6 30%, transparent);
|
|
}
|
|
|
|
.dark .scaa-bueno {
|
|
background-color: color-mix(in srgb, #f59e0b 30%, transparent);
|
|
}
|
|
|
|
.dark .scaa-regular {
|
|
background-color: color-mix(in srgb, #ef4444 30%, transparent);
|
|
}
|
|
|
|
.dark .scaa-bajo {
|
|
background-color: color-mix(in srgb, #6b7280 30%, transparent);
|
|
}
|
|
|
|
.dark .intensidad-item {
|
|
background-color: color-mix(in srgb, var(--cata-primary) 15%, transparent);
|
|
}
|
|
|
|
.dark .defecto-warning {
|
|
background-color: color-mix(in srgb, #f59e0b 20%, transparent);
|
|
}
|
|
|
|
.dark .defecto-error {
|
|
background-color: color-mix(in srgb, #ef4444 20%, transparent);
|
|
}
|
|
|
|
.dark .organoleptica-item {
|
|
background-color: color-mix(in srgb, var(--cata-primary) 15%, transparent);
|
|
}
|
|
|
|
.dark .categoria-chip {
|
|
background-color: color-mix(in srgb, var(--cata-primary) 25%, transparent);
|
|
}
|
|
|
|
.dark .notas-adicionales-box {
|
|
background-color: color-mix(in srgb, var(--cata-primary) 15%, transparent);
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 640px) {
|
|
.resumen-expandido {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.muestra-nombre {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.puntajes-principales {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.puntaje-valor {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.intensidades-grid {
|
|
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.intensidad-item {
|
|
padding: 0.75rem;
|
|
}
|
|
|
|
.intensidad-icon {
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
}
|
|
|
|
.intensidad-valor {
|
|
font-size: 1.25rem;
|
|
}
|
|
}
|
|
</style>
|