/* =====================================================================
Klima — App del Trabajador
Design system Mobile-First basado en klima2/stitch/DESIGN.md
Paleta Teal + Coral · DM Sans · 20px radius en cards
NOTA PERF (mayo 2026): los @import de Google Fonts se MOVIERON al
con + para evitar el
render-blocking que provoca un @import dentro de CSS (descarga en serie).
Si en tu entorno el HTML no carga las fuentes via , descomenta abajo.
===================================================================== */
/* @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap'); */
:root{
--surface: #f9f9fb;
--surface-bright: #f9f9fb;
--surface-dim: #d9dadc;
--surface-c-lowest: #ffffff;
--surface-c-low: #f3f3f6;
--surface-c: #edeef0;
--surface-c-high: #e8e8ea;
--surface-c-highest: #e2e2e5;
--on-surface: #1a1c1e;
--on-surface-var: #3f484b;
--primary: #004552;
--primary-c: #0f5e6e;
--primary-fixed: #acedff;
--primary-fixed-dim: #8fd0e3;
--on-primary: #ffffff;
--on-primary-c: #94d5e8;
--on-primary-fixed-var: #004e5c;
--secondary: #a63a19;
--secondary-c: #fd7a53;
--secondary-fixed: #ffdbd1;
--secondary-fixed-dim:#ffb5a0;
--on-secondary: #ffffff;
--on-secondary-c: #6b1900;
--tertiary: #15444f;
--tertiary-c: #305c67;
--tertiary-fixed: #bdeaf6;
--outline: #70797c;
--outline-var: #bfc8cb;
--error: #ba1a1a;
--on-error: #ffffff;
--error-c: #ffdad6;
--success: #1f8c5b;
--warn: #b8770e;
--shadow-soft: 0 1px 2px rgba(15,94,110,.06);
--shadow-md: 0 4px 12px rgba(15,94,110,.08);
--shadow-lg: 0 8px 24px rgba(15,94,110,.06);
--shadow-up: 0 -4px 12px rgba(15,94,110,.04);
--r-card: 20px;
--r-input: 12px;
--r-pill: 9999px;
/* ========= Klima Sur — Capa de marca territorial ========= */
--niebla: #E8EEF1;
--tepa: #6B4A2B;
--copihue: #C8156A;
--valdivia: #2E6B4A;
--alerce: #8B5A3C;
/* Gradientes de marca reutilizables */
--grad-amanecer: linear-gradient(135deg,#FD7A53 0%,#F4A261 50%,#FFD3C4 100%);
--grad-fiordo: linear-gradient(135deg,#004552 0%,#0F5E6E 50%,#1A8A9E 100%);
--grad-celebra: linear-gradient(135deg,#C8156A 0%,#FD7A53 50%,#F4A261 100%);
--grad-bosque: linear-gradient(135deg,#2E6B4A 0%,#1F8C5B 100%);
/* Sombras con tinte de marca */
--sh-teal-glow: 0 8px 24px rgba(15,94,110,.18);
--sh-coral-glow: 0 8px 24px rgba(253,122,83,.28);
--sh-celebra: 0 8px 32px rgba(200,21,106,.30);
/* Escala tipográfica controlable */
--type-scale: 1;
}
/* ========= Modo oscuro — sólo cuando el usuario opta ========= */
html[data-theme='dark']{
--surface: #0B1518;
--surface-bright: #0E1B1F;
--surface-dim: #050A0C;
--surface-c-lowest: #132429;
--surface-c-low: #16282E;
--surface-c: #1B3137;
--surface-c-high: #24414A;
--surface-c-highest: #2C4F5A;
--on-surface: #E6EEF0;
--on-surface-var: #A8BBC1;
--primary: #8FD0E3;
--primary-c: #ACEDFF;
--on-primary: #003540;
--secondary: #FFB5A0;
--secondary-c: #FD7A53;
--outline: #5C7077;
--outline-var: #2E4951;
--niebla: #1B3137;
}
html[data-theme='dark'] body{
background:var(--surface);
color:var(--on-surface);
}
html[data-theme='dark'] .stat-card,
html[data-theme='dark'] .card,
html[data-theme='dark'] .list-card,
html[data-theme='dark'] .row-item,
html[data-theme='dark'] .tline .item,
html[data-theme='dark'] .hero-stat,
html[data-theme='dark'] .fam-card,
html[data-theme='dark'] .benefit-card{
background:var(--surface-c-lowest);
border-color:var(--surface-c-high);
color:var(--on-surface);
}
html[data-theme='dark'] .appbar,
html[data-theme='dark'] .bottomnav{
background:var(--surface-bright);
border-color:var(--surface-c-high);
}
html[data-theme='dark'] input,
html[data-theme='dark'] select,
html[data-theme='dark'] textarea{
background:var(--surface-c-lowest);
color:var(--on-surface);
border-color:var(--surface-c-high);
}
/* ========= Escala de texto controlable (accesibilidad) ========= */
html[data-text-scale='1.15'] body{font-size:17.5px}
html[data-text-scale='1.35'] body{font-size:19px}
/* ========= Alto contraste — WCAG AAA ========= */
html[data-contrast='high']{
--primary: #000000;
--primary-c: #000000;
--on-surface: #000000;
--on-surface-var: #000000;
--surface: #FFFFFF;
--surface-c-lowest: #FFFFFF;
--surface-c-low: #FFFFFF;
--surface-c: #F0F0F0;
--surface-c-high: #E0E0E0;
--outline: #000000;
--outline-var: #000000;
--secondary: #6B1900;
--secondary-c: #6B1900;
}
html[data-contrast='high'] a{text-decoration:underline}
html[data-contrast='high'] .btn,
html[data-contrast='high'] .chip,
html[data-contrast='high'] input,
html[data-contrast='high'] textarea,
html[data-contrast='high'] select{
border:2px solid currentColor !important;
}
html[data-contrast='high'] .pulse-card{
background:#000 !important; color:#fff !important; border:2px solid #fff;
}
/* ========= Modo dislexia ========= */
html[data-dyslexia='on'] body{
font-family:'OpenDyslexic','Atkinson Hyperlegible','DM Sans',sans-serif;
line-height:1.75;
letter-spacing:.035em;
word-spacing:.05em;
}
/* ========= Reducir movimiento ========= */
html[data-motion='reduce'] *,
html[data-motion='reduce'] *::before,
html[data-motion='reduce'] *::after{
animation-duration:.001ms !important;
animation-iteration-count:1 !important;
transition-duration:.001ms !important;
scroll-behavior:auto !important;
}
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{
animation-duration:.001ms !important;
animation-iteration-count:1 !important;
transition-duration:.001ms !important;
}
}
/* ========= Skip link ========= */
.skip-link{
position:absolute;
top:8px;left:8px;
width:1px;height:1px;
padding:0;margin:0;
overflow:hidden;
clip:rect(0 0 0 0);
clip-path:inset(50%);
white-space:nowrap;
background:#004552;color:#fff;
border-radius:8px;
font-weight:700;text-decoration:none;
z-index:200;
}
.skip-link:focus,
.skip-link:focus-visible,
.skip-link:active{
width:auto;height:auto;
padding:10px 16px;margin:0;
overflow:visible;
clip:auto;clip-path:none;
outline:3px solid #C8156A;outline-offset:2px;
}
/* ========= Focus visible global ========= */
*:focus-visible{
outline:3px solid var(--copihue);
outline-offset:2px;
border-radius:6px;
}
.btn:focus-visible,
.chip:focus-visible,
.icon-btn:focus-visible,
.bottomnav a:focus-visible,
.topnav a:focus-visible{
outline:3px solid var(--copihue);
outline-offset:3px;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
font-family:'DM Sans','Helvetica Neue',Arial,sans-serif;
background:var(--surface);
color:var(--on-surface);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
line-height:1.45;
min-height:100vh;
min-height:100dvh;
}
a{color:var(--primary-c);text-decoration:none}
a:hover{color:var(--primary)}
/* iconos */
.material-symbols-outlined{
font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
vertical-align:middle;
}
.mi-fill{font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24}
/* ===================== LAYOUT ===================== */
.app-shell{
display:flex;
flex-direction:column;
min-height:100vh;
min-height:100dvh;
background:var(--surface);
}
.app-shell.has-sidenav{display:block}
@media (min-width:900px){
.app-shell.has-sidenav{display:flex;flex-direction:row}
}
/* Top App Bar (mobile + desktop horizontal) */
.appbar{
position:sticky;top:0;z-index:50;
display:flex;align-items:center;justify-content:space-between;
/* PWA standalone: respetar notch / status bar */
padding:env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
height:calc(64px + env(safe-area-inset-top, 0px));
background:var(--surface);
box-shadow:var(--shadow-soft);
box-sizing:border-box;
}
.appbar .brand{
display:flex;align-items:center;gap:10px;
font-size:22px;font-weight:700;color:var(--primary);letter-spacing:-.02em;
}
.appbar .brand .logo-mark{
display:inline-block;
width:30px;height:30px;border-radius:9px;
background:conic-gradient(from 220deg,#0F5E6E 0%,#1A8A9E 50%,#FF7B54 100%);
position:relative;flex-shrink:0;
}
.appbar .brand .logo-mark::after{
content:"";position:absolute;inset:6px;
background:var(--surface);border-radius:50%;
}
.appbar .brand .logo-mark::before{
content:"";position:absolute;inset:11px;
background:#FF7B54;border-radius:50%;z-index:2;
}
.appbar .brand .brand-name{line-height:1}
.appbar .left,.appbar .right{display:flex;align-items:center;gap:10px}
.appbar .avatar-sm{
width:36px;height:36px;border-radius:50%;
background:var(--surface-c-high);
display:flex;align-items:center;justify-content:center;
color:var(--primary);font-weight:700;font-size:14px;
overflow:hidden;flex-shrink:0;border:1px solid var(--outline-var);
}
.appbar .avatar-sm img{width:100%;height:100%;object-fit:cover}
.appbar .icon-btn{
width:40px;height:40px;border:none;background:transparent;cursor:pointer;
border-radius:50%;color:var(--primary);
display:flex;align-items:center;justify-content:center;position:relative;
transition:background .15s;
}
.appbar .icon-btn:hover{background:var(--surface-c)}
.appbar .icon-btn .dot{
position:absolute;top:8px;right:9px;
width:8px;height:8px;border-radius:50%;background:var(--secondary-c);
border:2px solid var(--surface);
}
/* Top Desktop Nav */
.topnav{
display:none;
}
@media (min-width:900px){
.topnav{
display:flex;align-items:center;gap:8px;
}
.topnav a{
padding:8px 14px;border-radius:10px;font-size:14px;font-weight:500;
color:var(--on-surface-var);
transition:background .15s,color .15s;
}
.topnav a:hover{background:var(--surface-c)}
.topnav a.active{
color:var(--primary);font-weight:700;
background:rgba(253,122,83,.10);
}
}
/* Canvas principal */
.canvas{
flex:1;
width:100%;
max-width:1280px;
margin:0 auto;
/* En mobile dejamos margen para el bottom-nav (72px) + safe-area home indicator */
padding:24px 16px calc(120px + env(safe-area-inset-bottom, 0px));
}
@media (min-width:900px){
.canvas{padding:32px 24px 40px}
}
/* Bottom nav (mobile) — PWA standalone safe:
La altura visible se mantiene en 72px y el safe-area se suma como
espacio extra debajo, para no comerse el contenido del nav cuando el
sistema operativo agrega el home indicator (iOS) o gesture bar. */
.bottomnav{
position:fixed;left:0;bottom:0;width:100%;z-index:50;
display:flex;justify-content:space-around;align-items:center;
/* altura del área táctil */
height:72px;
/* extiende la caja debajo para cubrir el safe-area sin reducir el área usable */
height:calc(72px + env(safe-area-inset-bottom, 0px));
padding-bottom:env(safe-area-inset-bottom, 0px);
box-sizing:border-box;
background:var(--surface-c-lowest);
box-shadow:var(--shadow-up);
border-top:1px solid var(--outline-var);
padding-left:4px;
padding-right:4px;
}
.bottomnav a{
flex:1;
/* asegura mínimo Material 48dp para target táctil */
min-height:48px;
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:2px;
color:var(--on-surface-var);
font-size:11px;font-weight:600;letter-spacing:.02em;
padding:8px 4px;border-radius:14px;
transition:background .15s,color .15s;
/* evitar que labels largos rompan layout */
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
max-width:100%;
}
.bottomnav a > span:not(.material-symbols-outlined){
max-width:100%;
overflow:hidden;
text-overflow:ellipsis;
}
.bottomnav a .material-symbols-outlined{font-size:24px}
.bottomnav a:hover{background:var(--surface-c)}
.bottomnav a.active{
color:var(--primary);
background:rgba(253,122,83,.10);
}
.bottomnav a.active .material-symbols-outlined{font-variation-settings:'FILL' 1}
@media (min-width:900px){.bottomnav{display:none}}
/* ===================== TYPOGRAPHY ===================== */
.h1{font-size:28px;font-weight:700;line-height:1.2;letter-spacing:-.01em;color:var(--primary);margin:0}
.h2{font-size:24px;font-weight:600;line-height:1.25;letter-spacing:-.01em;color:var(--on-surface);margin:0}
.h3{font-size:20px;font-weight:600;line-height:1.3;color:var(--on-surface);margin:0}
.lead{font-size:16px;color:var(--on-surface-var);margin:6px 0 0}
.muted{color:var(--on-surface-var)}
.small{font-size:13px}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--on-surface-var)}
@media (min-width:900px){
.h1{font-size:32px;letter-spacing:-.015em}
}
/* greeting block */
.greet{margin-bottom:24px}
.greet h1{font-size:28px;font-weight:700;color:var(--primary);letter-spacing:-.01em;margin:0}
.greet p{margin:4px 0 0;color:var(--on-surface-var)}
/* sections */
.section-head{
display:flex;justify-content:space-between;align-items:flex-end;
margin:32px 0 12px;gap:12px;
}
.section-head:first-child{margin-top:0}
.section-head h2{font-size:20px;font-weight:700;color:var(--primary);margin:0}
.section-head a{font-size:13px;font-weight:600;color:var(--primary);text-decoration:underline}
/* ===================== CARDS ===================== */
.card{
background:var(--surface-c-lowest);
border:1px solid var(--surface-c);
border-radius:var(--r-card);
padding:24px;
box-shadow:var(--shadow-soft);
}
.card-soft{
background:var(--surface-c-low);
border:1px solid rgba(191,200,203,.3);
border-radius:var(--r-card);
padding:24px;
}
/* Pulse / hero card */
.pulse-card{
background:var(--secondary-c);
color:var(--on-secondary-c);
border-radius:var(--r-card);
padding:24px;
position:relative;
overflow:hidden;
box-shadow:var(--shadow-lg);
}
.pulse-card::before{
content:"";
position:absolute;top:-40px;right:-40px;
width:160px;height:160px;border-radius:50%;
background:rgba(255,255,255,.2);
filter:blur(40px);
}
.pulse-card .material-symbols-outlined{font-size:32px;opacity:.85}
.pulse-card h2{font-size:20px;font-weight:700;margin:8px 0 4px;letter-spacing:-.005em}
.pulse-card p{margin:0;opacity:.9;font-size:15px}
.pulse-card .pulse-cta{
margin-top:20px;
display:inline-flex;align-items:center;gap:8px;
background:#4A1B0C;color:#FFFFFF; /* contraste 11.4:1 sobre coral — WCAG AAA */
padding:12px 20px;min-height:44px;border-radius:var(--r-pill); /* WCAG 2.5.5 */
font-size:14px;font-weight:700;cursor:pointer;border:2px solid transparent;
text-decoration:none;
transition:background .15s,transform .1s,box-shadow .2s;
}
.pulse-card .pulse-cta:hover{background:var(--primary);color:#fff;box-shadow:var(--sh-coral-glow)}
.pulse-card .pulse-cta:active{transform:scale(.97)}
.pulse-card .pulse-cta:focus-visible{outline:3px solid #fff;outline-offset:3px}
/* Variante fiordo (cuando no hay encuesta pendiente) — gradient explícito sin depender de var */
.pulse-card.pulse-card-fiordo{
background:#0F5E6E; /* fallback sólido */
background:linear-gradient(135deg,#004552 0%,#0F5E6E 50%,#1A8A9E 100%) !important;
color:#FFFFFF !important;
}
.pulse-card.pulse-card-fiordo h2,
.pulse-card.pulse-card-fiordo p,
.pulse-card.pulse-card-fiordo .material-symbols-outlined{color:#FFFFFF !important}
/* Stat / KPI card */
.stat-card{
background:var(--surface-c-lowest);
border:1px solid var(--surface-c);
border-radius:var(--r-card);
padding:24px;
text-align:center;
display:flex;flex-direction:column;align-items:center;justify-content:center;
min-height:160px;
}
.stat-card .icon{
width:56px;height:56px;border-radius:50%;
background:rgba(143,208,227,.25);
color:var(--primary);
display:flex;align-items:center;justify-content:center;
margin-bottom:12px;
}
.stat-card .icon .material-symbols-outlined{font-size:28px;font-variation-settings:'FILL' 1}
.stat-card .num{font-size:22px;font-weight:700;color:var(--primary);margin:0;letter-spacing:-.01em}
.stat-card .lbl{font-size:14px;color:var(--on-surface-var);margin:2px 0 0}
/* Bento grid (home) */
.bento{
display:grid;
grid-template-columns:1fr;
gap:16px;
}
@media (min-width:760px){
.bento{grid-template-columns:2fr 1fr 1fr}
.bento .pulse-card{grid-column:span 2}
}
/* Stat grid 2x2 mobile */
.stat-grid{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media (min-width:600px){.stat-grid{grid-template-columns:repeat(4,1fr)}}
/* ===================== BUTTONS ===================== */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:12px 20px;border-radius:var(--r-input);border:none;cursor:pointer;
font-family:inherit;font-size:14px;font-weight:600;
transition:background .15s,transform .1s,box-shadow .15s;
text-decoration:none;
}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--primary-c);color:var(--on-primary)}
.btn-primary:hover{background:var(--primary);color:#fff}
.btn-coral{background:var(--secondary-c);color:#fff}
.btn-coral:hover{background:var(--secondary)}
.btn-ghost{background:transparent;border:1px solid var(--outline-var);color:var(--on-surface)}
.btn-ghost:hover{background:var(--surface-c)}
.btn-text{background:transparent;color:var(--primary);padding:8px 12px}
.btn-text:hover{background:var(--surface-c)}
.btn-lg{padding:14px 24px;font-size:15px}
.btn-block{width:100%}
.btn-icon{padding:10px;border-radius:50%;width:40px;height:40px}
/* ===================== INPUTS ===================== */
.field{margin-bottom:16px}
.field label{
display:block;font-size:14px;font-weight:500;
color:var(--on-surface-var);margin-bottom:6px;
}
.input, input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=tel], input[type=search], select, textarea{
width:100%;padding:12px 14px;
background:var(--surface-c-lowest);
border:1px solid var(--outline-var);
border-radius:var(--r-input);
font-family:inherit;font-size:15px;color:var(--on-surface);
transition:border .15s,box-shadow .15s;
outline:none;
}
input:focus,select:focus,textarea:focus{
border-color:var(--primary);
box-shadow:0 0 0 3px rgba(255,211,196,.5);
}
textarea{resize:vertical;min-height:96px;line-height:1.4}
.hint{font-size:12px;color:var(--on-surface-var);margin-top:4px}
/* ===================== CHIPS ===================== */
.chip-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
.chip-row::-webkit-scrollbar{display:none}
.chip{
display:inline-flex;align-items:center;gap:6px;
height:34px;padding:0 16px;border-radius:var(--r-pill);
background:var(--surface-c-lowest);
border:1px solid var(--outline-var);
color:var(--on-surface);font-size:13px;font-weight:500;
cursor:pointer;white-space:nowrap;text-decoration:none;
transition:background .15s,border .15s,color .15s;
}
.chip:hover{background:var(--surface-c-high)}
.chip.active{
background:var(--primary);color:#fff;border-color:var(--primary);
}
.chip .material-symbols-outlined{font-size:16px}
/* Badge inline */
.badge{
display:inline-flex;align-items:center;gap:4px;
padding:4px 10px;border-radius:var(--r-pill);
font-size:12px;font-weight:600;letter-spacing:.02em;
}
.badge.coral{background:rgba(253,122,83,.15);color:var(--secondary)}
.badge.teal{background:rgba(143,208,227,.25);color:var(--primary)}
.badge.gold{background:#fff3cd;color:#856404}
.badge.ok{background:rgba(31,140,91,.15);color:var(--success)}
.badge.warn{background:rgba(184,119,14,.15);color:var(--warn)}
.badge.err{background:var(--error-c);color:var(--error)}
.badge.neutral{background:var(--surface-c);color:var(--on-surface-var)}
.discount-badge{
display:inline-block;
background:rgba(253,122,83,.12);
color:var(--secondary);
border:1px solid rgba(253,122,83,.25);
font-weight:700;font-size:12px;
padding:4px 10px;border-radius:8px;
}
/* ===================== BENEFIT CARDS ===================== */
/* horizontal carousel */
.carousel{
display:flex;gap:16px;overflow-x:auto;
padding:4px 0 12px;
scroll-snap-type:x mandatory;scrollbar-width:none;
}
.carousel::-webkit-scrollbar{display:none}
.benefit-card{
min-width:260px;max-width:260px;
background:var(--surface-c-lowest);
border:1px solid var(--surface-c);
border-radius:var(--r-card);
overflow:hidden;
box-shadow:var(--shadow-soft);
scroll-snap-align:start;
display:flex;flex-direction:column;
cursor:pointer;
transition:box-shadow .2s,transform .1s;
text-decoration:none;color:inherit;
}
.benefit-card:hover{box-shadow:var(--shadow-lg)}
.benefit-card .cover{
height:140px;position:relative;overflow:hidden;
display:flex;align-items:center;justify-content:center;
color:rgba(255,255,255,.55);font-weight:800;font-size:46px;
background:linear-gradient(135deg,var(--primary-c),var(--tertiary-c));
}
.benefit-card .cover.cat-1{background:linear-gradient(135deg,#fd7a53,#a63a19)}
.benefit-card .cover.cat-2{background:linear-gradient(135deg,#0f5e6e,#004552)}
.benefit-card .cover.cat-3{background:linear-gradient(135deg,#1a8a9e,#0f5e6e)}
.benefit-card .cover.cat-4{background:linear-gradient(135deg,#f4a261,#a05f21)}
.benefit-card .cover.cat-5{background:linear-gradient(135deg,#6b6359,#3f3a33)}
.benefit-card .cover.cat-6{background:linear-gradient(135deg,#e8c547,#a08a1d)}
.benefit-card .cover .cat-pill{
position:absolute;top:12px;left:12px;
display:inline-flex;align-items:center;gap:6px;
background:rgba(255,255,255,.92);
backdrop-filter:blur(8px);
padding:6px 12px;border-radius:var(--r-pill);
font-size:12px;font-weight:600;color:var(--primary);
box-shadow:var(--shadow-soft);
}
.benefit-card .cover .cat-pill .material-symbols-outlined{font-size:14px}
.benefit-card .body{padding:16px;flex:1;display:flex;flex-direction:column}
.benefit-card .body h3{font-size:15px;font-weight:700;color:var(--on-surface);margin:0;line-height:1.3}
.benefit-card .body .pyme-name{font-size:13px;color:var(--on-surface-var);margin:4px 0 0}
.benefit-card .body .desc{font-size:13px;color:var(--on-surface-var);margin:8px 0;flex:1;line-height:1.4}
.benefit-card .body .foot{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
/* List card horizontal (lista cerca de ti) */
.list-card{
display:flex;align-items:center;gap:16px;
background:var(--surface-c-lowest);
border:1px solid var(--surface-c-high);
border-radius:var(--r-card);
padding:16px;
box-shadow:var(--shadow-soft);
cursor:pointer;text-decoration:none;color:inherit;
transition:box-shadow .2s,border-color .15s;
}
.list-card:hover{box-shadow:var(--shadow-lg);border-color:var(--primary-fixed-dim)}
.list-card .avatar{
width:56px;height:56px;border-radius:50%;
background:var(--surface-c);border:1px solid var(--outline-var);
display:flex;align-items:center;justify-content:center;
color:var(--primary);font-weight:700;font-size:18px;flex-shrink:0;
overflow:hidden;
}
.list-card .avatar img{width:100%;height:100%;object-fit:cover}
/* Avatar con ilustración de rubro (PYMEs) */
.list-card .avatar.avatar-img{
background-size:cover;background-position:center;background-repeat:no-repeat;
border-color:transparent;
}
/* Hero rectangular con la ilustración del rubro (detalle de beneficio) */
.rubro-hero{
width:auto;height:160px;
background-size:cover;background-position:center;background-repeat:no-repeat;
border-bottom:1px solid var(--surface-c-high);
}
@media(min-width:600px){
.rubro-hero{height:200px}
}
@media(min-width:900px){
.rubro-hero{height:240px}
}
.list-card .info{flex:1;min-width:0}
.list-card .info h3{font-size:15px;font-weight:600;margin:0;color:var(--on-surface);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list-card .info .meta{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:13px;color:var(--on-surface-var)}
.list-card .info .meta .dot{width:3px;height:3px;border-radius:50%;background:var(--outline-var)}
.list-card .info .meta .dist{color:var(--primary);font-weight:600;display:flex;align-items:center;gap:2px}
.list-card .info .meta .dist .material-symbols-outlined{font-size:14px}
.list-card .right{flex-shrink:0}
/* Family card */
.fam-card{
background:var(--surface-c-lowest);
border:1px solid rgba(191,200,203,.3);
border-radius:var(--r-card);
padding:16px;
display:flex;align-items:center;justify-content:space-between;gap:16px;
box-shadow:var(--shadow-soft);
text-decoration:none;color:inherit;
}
.fam-card .left{display:flex;align-items:center;gap:16px;flex:1;min-width:0}
.fam-card .av{
width:60px;height:60px;border-radius:50%;
background:var(--surface-c);
display:flex;align-items:center;justify-content:center;
color:var(--primary);font-weight:700;font-size:22px;
border:2px solid var(--surface-c);overflow:hidden;flex-shrink:0;
}
.fam-card .av.coral{background:rgba(253,122,83,.15);color:var(--secondary)}
.fam-card .av.teal{background:rgba(143,208,227,.25);color:var(--primary)}
.fam-card .av.gold{background:rgba(244,162,97,.2);color:#a05f21}
.fam-card .name{font-size:16px;font-weight:600;color:var(--primary);margin:0}
.fam-card .row{display:flex;align-items:center;gap:8px}
.fam-card .pill{
display:inline-flex;align-items:center;gap:4px;
background:rgba(143,208,227,.2);color:var(--primary);
padding:3px 10px;border-radius:var(--r-pill);
font-size:11px;font-weight:600;
}
.fam-card .pill.coral{background:rgba(253,122,83,.18);color:var(--secondary)}
.fam-card .meta{font-size:13px;color:var(--on-surface-var);margin-top:4px;display:flex;align-items:center;gap:6px}
/* Family avatar group (home) */
.fam-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fam-row .av{
width:52px;height:52px;border-radius:50%;
background:var(--surface-c);
display:flex;align-items:center;justify-content:center;
color:var(--primary);font-weight:700;font-size:16px;
border:2px solid #fff;box-shadow:var(--shadow-soft);
overflow:hidden;
}
.fam-row .av img{width:100%;height:100%;object-fit:cover}
.fam-row .av-add{
width:52px;height:52px;border-radius:50%;
border:2px dashed var(--outline-var);background:#fff;
display:flex;align-items:center;justify-content:center;
color:var(--primary);cursor:pointer;
text-decoration:none;
}
/* Family CTA box (home) */
.fam-cta{
background:var(--surface-c-low);
border:1px solid rgba(191,200,203,.4);
border-radius:var(--r-card);
padding:20px;
display:flex;flex-direction:column;gap:14px;
}
@media (min-width:760px){
.fam-cta{flex-direction:row;align-items:center;justify-content:space-between;padding:24px}
}
.fam-cta .copy h2{font-size:18px;font-weight:700;color:var(--primary);margin:0}
.fam-cta .copy p{font-size:14px;color:var(--on-surface-var);margin:4px 0 0}
/* ===================== TABLES / TIMELINES ===================== */
.tline{display:flex;flex-direction:column;gap:12px}
.tline .item{
display:flex;align-items:center;gap:14px;
background:var(--surface-c-lowest);
border:1px solid var(--surface-c);
border-radius:16px;
padding:14px 16px;
box-shadow:var(--shadow-soft);
}
.tline .item .icon{
width:42px;height:42px;border-radius:12px;
background:rgba(143,208,227,.25);color:var(--primary);
display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.tline .item .body{flex:1;min-width:0}
.tline .item .body b{display:block;font-size:14px;color:var(--on-surface)}
.tline .item .body .meta{font-size:12px;color:var(--on-surface-var);margin-top:2px}
.tline .item .right{text-align:right;flex-shrink:0}
.tline .item .right .amount{font-size:15px;font-weight:700;color:var(--success)}
.tline .item .right .date{font-size:11px;color:var(--on-surface-var);margin-top:2px}
/* ===================== ALERTS ===================== */
.alert{
padding:12px 16px;border-radius:14px;font-size:14px;margin-bottom:16px;
border:1px solid transparent;
}
.alert.ok{background:rgba(31,140,91,.10);color:var(--success);border-color:rgba(31,140,91,.25)}
.alert.err{background:var(--error-c);color:var(--error);border-color:rgba(186,26,26,.25)}
.alert.warn{background:#fff8e6;color:var(--warn);border-color:#ffe49a}
.alert.info{background:rgba(143,208,227,.20);color:var(--primary);border-color:rgba(143,208,227,.5)}
/* ===================== EMPTY ===================== */
.empty{
text-align:center;padding:48px 16px;color:var(--on-surface-var);
}
.empty .ic{
width:64px;height:64px;border-radius:50%;background:var(--surface-c);
display:inline-flex;align-items:center;justify-content:center;
color:var(--primary);margin-bottom:12px;
}
.empty .ic .material-symbols-outlined{font-size:32px}
.empty h4{margin:6px 0;font-size:18px;font-weight:600;color:var(--on-surface)}
.empty p{font-size:14px;margin:4px 0 0}
/* ===================== AUTH (login screen) ===================== */
.auth-screen{
min-height:100vh;min-height:100dvh;
display:flex;align-items:center;justify-content:center;
padding:24px 16px;
background:linear-gradient(180deg,#f9f9fb 0%,#edeef0 100%);
}
.auth-card-wrap{width:100%;max-width:400px;display:flex;flex-direction:column;gap:32px;align-items:center}
.auth-brand{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.auth-brand .logo{
width:64px;height:64px;border-radius:18px;
background:var(--surface-c);
display:flex;align-items:center;justify-content:center;
font-weight:800;color:var(--primary);font-size:24px;letter-spacing:-.02em;
box-shadow:var(--shadow-soft);margin-bottom:8px;
}
.auth-brand .logo-img{
width:96px;height:96px;margin-bottom:12px;
filter:drop-shadow(0 4px 12px rgba(15,94,110,.18));
}
.auth-brand h1{font-size:28px;font-weight:700;color:var(--on-surface);margin:0;letter-spacing:-.01em}
.auth-brand p{margin:4px 0 0;color:var(--on-surface-var);font-size:15px}
.auth-card{
width:100%;background:var(--surface-c-lowest);
border:1px solid var(--surface-c);
border-radius:var(--r-card);padding:24px;
box-shadow:var(--shadow-soft);
}
.auth-demo{
width:100%;font-size:12px;color:var(--on-surface-var);
background:var(--surface-c-low);border:1px dashed var(--outline-var);
border-radius:14px;padding:12px 14px;
}
.auth-demo b{display:block;color:var(--on-surface);margin-bottom:4px}
.auth-demo code{font-size:12px;color:var(--primary);font-family:'JetBrains Mono','SFMono-Regular',Consolas,monospace}
/* ===================== UTILS ===================== */
.flex{display:flex}
.col{flex-direction:column}
.center{align-items:center}
.between{justify-content:space-between}
.gap-sm{gap:8px}.gap-md{gap:16px}.gap-lg{gap:24px}
.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:32px}
.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}.mb-4{margin-bottom:32px}
.text-center{text-align:center}
.fw-bold{font-weight:700}
.fw-semi{font-weight:600}
.line{height:1px;background:var(--outline-var);opacity:.4;margin:24px 0;border:none}
.divider{border:none;border-top:1px solid var(--surface-c-high);margin:16px 0}
/* code display (canje code) */
.code-display{
display:inline-block;
font-family:'JetBrains Mono','SFMono-Regular',Consolas,monospace;
font-size:24px;font-weight:700;letter-spacing:.05em;
color:var(--primary);
background:var(--surface-c-low);
padding:10px 16px;border-radius:12px;
border:1px dashed var(--outline-var);
}
/* QR container */
.qr-wrap{
display:inline-block;
padding:16px;border-radius:20px;
background:#fff;border:1px solid var(--surface-c-high);
box-shadow:var(--shadow-md);
}
/* Page header with back arrow */
.page-head{
display:flex;align-items:center;gap:8px;margin-bottom:16px;
}
.page-head .back{
width:40px;height:40px;border-radius:50%;
background:var(--surface-c);border:none;cursor:pointer;
display:flex;align-items:center;justify-content:center;
color:var(--primary);
}
.page-head .back:hover{background:var(--surface-c-high)}
.page-head h1{font-size:24px;font-weight:700;color:var(--primary);margin:0;letter-spacing:-.01em}
@media(min-width:760px){.page-head h1{font-size:28px}}
/* hero header with image (detalle beneficio) */
.detail-hero{
position:relative;width:100%;height:240px;
background:linear-gradient(135deg,var(--primary-c),var(--tertiary-c));
display:flex;align-items:flex-end;
}
.detail-hero .back-fab{
position:absolute;top:24px;left:16px;z-index:2;
width:40px;height:40px;border-radius:50%;
background:rgba(255,255,255,.85);backdrop-filter:blur(8px);
border:none;cursor:pointer;color:var(--on-surface);
display:flex;align-items:center;justify-content:center;
box-shadow:var(--shadow-soft);
}
.detail-hero .cat-emoji{
position:absolute;right:24px;bottom:32px;
font-size:96px;color:rgba(255,255,255,.4);font-weight:800;
}
.detail-body{
position:relative;background:var(--surface);
border-top-left-radius:28px;border-top-right-radius:28px;
margin-top:-28px;padding:32px 16px;
box-shadow:0 -4px 12px rgba(15,94,110,.04);
}
@media(min-width:760px){.detail-body{padding:32px 24px}}
/* Sticky bottom CTA (detalle) */
.sticky-cta{
position:fixed;left:0;bottom:72px;width:100%;z-index:40;
background:var(--surface);border-top:1px solid var(--surface-c-high);
padding:14px 16px env(safe-area-inset-bottom);
box-shadow:0 -8px 24px rgba(15,94,110,.06);
}
@media(min-width:900px){.sticky-cta{bottom:0}}
.sticky-cta .btn{width:100%}
@media(min-width:760px){.sticky-cta{display:flex;justify-content:center}.sticky-cta .btn{max-width:360px}}
/* form grid */
.grid-2{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:600px){.grid-2{grid-template-columns:1fr 1fr}}
.grid-3{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:760px){.grid-3{grid-template-columns:1fr 1fr 1fr}}
/* eNPS scale buttons */
.enps-scale{
display:flex;gap:6px;justify-content:space-between;align-items:center;
background:var(--surface);padding:8px;
border-radius:12px;border:1px solid var(--surface-c-high);
}
.enps-scale .opt{
flex:1;min-height:44px;min-width:44px; /* WCAG 2.5.5 target size */
display:flex;align-items:center;justify-content:center;
border:1.5px solid var(--surface-c-high);border-radius:10px;
background:var(--surface-c-lowest);color:var(--on-surface);
font-weight:600;cursor:pointer;font-size:15px;
transition:background .12s,border-color .12s,color .12s,transform .08s;
}
.enps-scale .opt:hover{border-color:var(--primary);color:var(--primary)}
.enps-scale .opt.demotor:hover{border-color:var(--error);color:var(--error)}
.enps-scale .opt.pasivo:hover{border-color:var(--warn);color:var(--warn)}
.enps-scale .opt.promotor:hover{border-color:var(--success);color:var(--success)}
.enps-scale .opt.sel{
background:rgba(143,208,227,.3);color:var(--primary);border-color:var(--primary);
box-shadow:0 1px 2px rgba(15,94,110,.1);
}
.enps-scale .opt.demotor.sel{background:rgba(186,26,26,.10);color:var(--error);border-color:var(--error)}
.enps-scale .opt.pasivo.sel{background:rgba(184,119,14,.10);color:var(--warn);border-color:var(--warn)}
.enps-scale .opt.promotor.sel{background:rgba(31,140,91,.10);color:var(--success);border-color:var(--success)}
.enps-scale .opt input{display:none}
.scale-legend{
display:flex;justify-content:space-between;
font-size:11px;font-weight:600;letter-spacing:.02em;
margin-bottom:8px;padding:0 4px;
}
.scale-legend .neg{color:var(--error)}
.scale-legend .pos{color:var(--success)}
/* multi pregunta cards */
.q-block{
padding:20px 0;border-bottom:1px solid var(--surface-c-high);
}
.q-block:last-of-type{border-bottom:none}
.q-block p{font-size:15px;color:var(--on-surface);margin:0 0 12px;line-height:1.4}
.q-block .dim{font-size:12px;color:var(--on-surface-var);margin-top:2px;display:block}
.q-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(50px,1fr));gap:6px}
.q-opt{
border:1.5px solid var(--surface-c-high);border-radius:10px;
background:var(--surface-c-lowest);padding:10px 4px;cursor:pointer;text-align:center;
transition:all .12s;
}
.q-opt:hover{border-color:var(--primary)}
.q-opt b{display:block;font-size:18px;color:var(--on-surface);margin-bottom:2px}
.q-opt span{font-size:10.5px;color:var(--on-surface-var);line-height:1.2}
.q-opt.sel{
background:rgba(253,122,83,.12);
border-color:var(--secondary-c);color:var(--secondary);
}
.q-opt.sel b{color:var(--secondary)}
.q-opt input{display:none}
/* Notifications popover */
.notif-pop{
position:absolute;right:0;top:48px;width:340px;max-width:calc(100vw - 24px);
background:var(--surface-c-lowest);
border:1px solid var(--surface-c);
border-radius:18px;box-shadow:var(--shadow-lg);
z-index:100;display:none;overflow:hidden;
}
.notif-pop.open{display:block}
.notif-pop .head{
display:flex;justify-content:space-between;align-items:center;
padding:14px 16px;border-bottom:1px solid var(--surface-c);
}
.notif-pop .head b{color:var(--on-surface);font-size:14px}
.notif-pop .head a{font-size:12px;color:var(--primary)}
.notif-pop .item{
display:block;padding:12px 16px;
border-bottom:1px solid var(--surface-c);
text-decoration:none;color:inherit;font-size:13px;
}
.notif-pop .item:hover{background:var(--surface-c-low)}
.notif-pop .item.unread{background:rgba(253,122,83,.04)}
.notif-pop .item b{display:block;color:var(--on-surface);font-size:13px}
.notif-pop .item p{margin:2px 0;color:var(--on-surface-var);font-size:12px;line-height:1.4}
.notif-pop .item .small{font-size:11px;color:var(--outline)}
.notif-pop .empty{padding:24px 16px;text-align:center;font-size:13px;color:var(--on-surface-var)}
.notif-pop .foot{padding:10px 16px;text-align:center;background:var(--surface-c-low)}
.notif-pop .foot a{font-size:12px;font-weight:600;color:var(--primary)}
/* Profile pages list */
.list-rows{display:flex;flex-direction:column;gap:8px}
.row-item{
display:flex;align-items:center;gap:14px;
background:var(--surface-c-lowest);
border:1px solid var(--surface-c);
border-radius:14px;padding:14px 16px;
text-decoration:none;color:inherit;
transition:background .12s;
}
.row-item:hover{background:var(--surface-c-low)}
.row-item .ic{
width:42px;height:42px;border-radius:12px;flex-shrink:0;
background:rgba(143,208,227,.25);color:var(--primary);
display:flex;align-items:center;justify-content:center;
}
.row-item .body{flex:1}
.row-item .body b{display:block;color:var(--on-surface);font-size:14px}
.row-item .body span{font-size:12px;color:var(--on-surface-var)}
.row-item .chev{color:var(--outline)}
/* Stats hero (mis canjes) */
.hero-stats{
display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:24px;
}
@media(min-width:600px){.hero-stats{grid-template-columns:repeat(3,1fr)}}
.hero-stat{
padding:18px 20px;border-radius:18px;
background:var(--surface-c-lowest);
border:1px solid var(--surface-c);
}
.hero-stat.coral{background:linear-gradient(135deg,var(--secondary-c),var(--secondary));color:#fff;border:none}
.hero-stat.coral .lbl,.hero-stat.coral .val{color:#fff}
.hero-stat .lbl{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--on-surface-var);margin:0}
.hero-stat .val{font-size:24px;font-weight:700;color:var(--primary);margin:6px 0 0;letter-spacing:-.01em}
/* QR card box (canje exitoso) */
.qr-success-card{
background:var(--surface-c-lowest);
border:1px solid var(--surface-c);
border-radius:24px;padding:32px 24px;text-align:center;
box-shadow:var(--shadow-md);
}
.qr-success-card .check{
width:72px;height:72px;border-radius:50%;
background:rgba(31,140,91,.15);color:var(--success);
display:inline-flex;align-items:center;justify-content:center;margin-bottom:14px;
}
.qr-success-card .check .material-symbols-outlined{font-size:40px}
/* radio chip group */
.radio-chips{display:flex;flex-wrap:wrap;gap:8px}
.radio-chips label{
position:relative;display:inline-flex;align-items:center;gap:6px;
padding:8px 14px;border:1px solid var(--outline-var);
border-radius:var(--r-pill);cursor:pointer;font-size:13px;
background:var(--surface-c-lowest);
}
.radio-chips input{position:absolute;opacity:0;pointer-events:none}
.radio-chips input:checked + span{color:var(--primary);font-weight:600}
.radio-chips label:has(input:checked){
background:rgba(143,208,227,.25);
border-color:var(--primary);color:var(--primary);
}
/* Filtered location notice */
.geo-banner{
display:flex;align-items:center;gap:10px;
background:rgba(143,208,227,.18);
border:1px solid rgba(143,208,227,.5);
color:var(--primary);
padding:10px 14px;border-radius:14px;
font-size:13px;margin-bottom:16px;
}
.geo-banner .material-symbols-outlined{font-size:20px}
.geo-banner button{
margin-left:auto;background:transparent;border:none;cursor:pointer;
color:var(--primary);text-decoration:underline;font-size:13px;font-weight:600;
}
/* ===================== KLIMA BRAND FOOT (logo footer app.klima.cl) ===================== */
.klima-brand-foot{
display:flex;flex-direction:column;align-items:center;gap:8px;
padding:36px 16px 28px;
margin-top:32px;
color:var(--on-surface-var);
text-align:center;
}
.klima-brand-foot .logo{
display:inline-flex;align-items:center;gap:10px;
font-weight:700;font-size:20px;letter-spacing:-.02em;
color:var(--on-surface);
}
.klima-brand-foot .logo-mark{
width:30px;height:30px;border-radius:9px;
background:conic-gradient(from 220deg,#0F5E6E 0%,#1A8A9E 50%,#FF7B54 100%);
position:relative;flex-shrink:0;
}
.klima-brand-foot .logo-mark::after{
content:"";position:absolute;inset:6px;
background:var(--surface);border-radius:50%;
}
.klima-brand-foot .logo-mark::before{
content:"";position:absolute;inset:11px;
background:#FF7B54;border-radius:50%;z-index:2;
}
.klima-brand-foot .kf-meta{
font-family:'JetBrains Mono',ui-monospace,monospace;
font-size:11.5px;
color:var(--on-surface-var);
opacity:.75;
}
/* Si hay bottom-nav fija, dejamos espacio para que no la tape */
body:has(.bottomnav) .klima-brand-foot{padding-bottom:96px}
html[data-theme='dark'] .klima-brand-foot .logo-mark::after{background:var(--surface)}