275 lines
19 KiB
HTML
275 lines
19 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="es">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Dashboard 3 Miradas — Mockup Propuesta</title>
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@2.44.0/tabler-icons.min.css">
|
||
<style>
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#0b1220;color:#e7eef7;padding:1.5rem}
|
||
.wrap{max-width:1100px;margin:0 auto}
|
||
.head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.4rem;flex-wrap:wrap;gap:10px}
|
||
.head h1{font-size:22px;font-weight:600}
|
||
.sub{color:#7d8da5;font-size:13px;margin-bottom:1.2rem}
|
||
.badge-prop{display:inline-block;background:#3a2a08;color:#f0b429;font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px;border:1px solid #6b4d12;margin-left:8px}
|
||
.org-sel{display:flex;gap:6px}
|
||
.org-sel button{background:#16203a;color:#9fb0cc;border:1px solid #243352;border-radius:20px;padding:5px 14px;font-size:12px;cursor:pointer}
|
||
.org-sel button.active{background:#43BBC8;color:#04161a;border-color:#43BBC8;font-weight:600}
|
||
.tabs{display:flex;gap:4px;margin-bottom:1.2rem;border-bottom:1px solid #1d2a44}
|
||
.tab{padding:10px 20px;font-size:14px;font-weight:500;color:#7d8da5;cursor:pointer;border-bottom:2px solid transparent;display:flex;align-items:center;gap:7px}
|
||
.tab:hover{color:#cdd9ec}
|
||
.tab.active{color:#43BBC8;border-bottom-color:#43BBC8}
|
||
.tab .lens{font-size:11px;color:#5e6f8c;display:block;font-weight:400}
|
||
.lens-intro{background:#101a30;border-left:3px solid #43BBC8;border-radius:0 8px 8px 0;padding:10px 14px;margin-bottom:1.2rem;font-size:13px;color:#9fb0cc;line-height:1.5}
|
||
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
|
||
.card{background:#101a30;border:1px solid #1d2a44;border-radius:12px;padding:16px;position:relative}
|
||
.card.c3{grid-column:span 3}.card.c4{grid-column:span 4}.card.c6{grid-column:span 6}.card.c8{grid-column:span 8}.card.c12{grid-column:span 12}
|
||
.card h3{font-size:12px;font-weight:600;color:#9fb0cc;text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px}
|
||
.card .qref{font-size:10px;color:#5e6f8c;margin-bottom:10px}
|
||
.big{font-size:38px;font-weight:700;color:#43BBC8;line-height:1}
|
||
.big.warn{color:#f0b429}.big.danger{color:#f06b6b}
|
||
.big-sub{font-size:12px;color:#7d8da5;margin-top:4px}
|
||
.star{border-color:#43BBC8;background:linear-gradient(135deg,#0e1b2e,#10243000)}
|
||
.star h3{color:#43BBC8}
|
||
.bar-row{display:flex;align-items:center;gap:8px;margin-bottom:7px;font-size:12px}
|
||
.bar-row .lab{width:130px;color:#9fb0cc;text-align:right;flex-shrink:0}
|
||
.bar-track{flex:1;background:#16203a;border-radius:4px;height:16px;overflow:hidden}
|
||
.bar-fill{height:100%;background:#43BBC8;border-radius:4px}
|
||
.bar-fill.amber{background:#f0b429}.bar-fill.rose{background:#f06b6b}.bar-fill.slate{background:#5e7299}
|
||
.bar-row .val{width:42px;color:#cdd9ec;font-weight:600}
|
||
.donut-wrap{display:flex;align-items:center;gap:18px}
|
||
.donut{width:120px;height:120px;flex-shrink:0}
|
||
.legend{font-size:12px}
|
||
.legend div{display:flex;align-items:center;gap:7px;margin-bottom:5px;color:#9fb0cc}
|
||
.legend .dot{width:9px;height:9px;border-radius:50%}
|
||
.dual{display:flex;gap:14px}
|
||
.dual>div{flex:1;background:#0c1426;border-radius:8px;padding:12px;border:1px solid #1a2640}
|
||
.dual .dtag{font-size:10px;color:#5e6f8c;text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
|
||
.dual .dn{font-size:26px;font-weight:700;color:#43BBC8}
|
||
.dual .dbase{font-size:11px;color:#7d8da5;margin-top:2px}
|
||
.gap-viz{display:flex;align-items:flex-end;gap:20px;justify-content:center;padding:10px 0}
|
||
.gap-col{text-align:center}
|
||
.gap-bar{width:60px;border-radius:6px 6px 0 0;margin:0 auto}
|
||
.gap-lab{font-size:11px;color:#9fb0cc;margin-top:6px}
|
||
.gap-val{font-size:13px;font-weight:600;margin-bottom:4px}
|
||
.note{font-size:11px;color:#5e6f8c;margin-top:10px;font-style:italic}
|
||
.req{background:#2a1208;border:1px dashed #6b3d12;color:#f0975a}
|
||
.req .big{color:#f0975a}
|
||
.footnote{margin-top:1.5rem;padding:12px;background:#101a30;border-radius:8px;font-size:11px;color:#7d8da5;line-height:1.6}
|
||
.k{font-size:10px;color:#4a5a76;text-align:right;margin-top:6px}
|
||
@media(max-width:900px){.card.c3,.card.c4,.card.c6,.card.c8{grid-column:span 12}}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="wrap">
|
||
<div class="head">
|
||
<div>
|
||
<h1>Economía del Cuidado — Paraguay <span class="badge-prop">PROPUESTA · datos de ejemplo</span></h1>
|
||
</div>
|
||
<div class="org-sel">
|
||
<button class="active">Todos</button>
|
||
<button>InQuality</button>
|
||
<button>Fundación</button>
|
||
<button>Demo</button>
|
||
</div>
|
||
</div>
|
||
<div class="sub">Mockup de validación · k-anonimato k≥5 · datos ilustrativos, NO reales · n = 142 (ejemplo)</div>
|
||
|
||
<div class="tabs">
|
||
<div class="tab active" onclick="showLens('empresa',this)"><i class="ti ti-building"></i> <span>Mirada Empresa<span class="lens">rendimiento · rotación · clima</span></span></div>
|
||
<div class="tab" onclick="showLens('pais',this)"><i class="ti ti-map-2"></i> <span>Mirada País<span class="lens">desarrollo · vulnerabilidad · política</span></span></div>
|
||
<div class="tab" onclick="showLens('humana',this)"><i class="ti ti-heart-handshake"></i> <span>Mirada Humana<span class="lens">bienestar · derechos · desarrollo</span></span></div>
|
||
</div>
|
||
|
||
<!-- ===== MIRADA EMPRESA ===== -->
|
||
<div id="empresa" class="lens-content">
|
||
<div class="lens-intro"><strong>Mirada Empresa.</strong> Traduce el cuidado a lenguaje de negocio: cuánto cuesta el punto ciego y qué talento está en riesgo. Inspirada en la investigación de Harvard Business School (Fuller) sobre el impacto del cuidado en productividad y rotación.</div>
|
||
<div class="grid">
|
||
<div class="card c4 star">
|
||
<h3><i class="ti ti-alert-triangle"></i> Talento en riesgo</h3>
|
||
<div class="qref">7.6 + 7.3 + 7.5 · métrica compuesta</div>
|
||
<div class="big danger">18.3%</div>
|
||
<div class="big-sub">de la plantilla cuidadora muestra señales de fuga (alta probabilidad de salida + ausentismo + carrera congelada)</div>
|
||
</div>
|
||
<div class="card c4">
|
||
<h3>Cuidadores en la plantilla</h3>
|
||
<div class="qref">4.1 · vínculo de cuidado activo</div>
|
||
<div class="big">54.2%</div>
|
||
<div class="big-sub">tiene algún rol de cuidado</div>
|
||
</div>
|
||
<div class="card c4">
|
||
<h3>Punto ciego organizacional</h3>
|
||
<div class="qref">9.1 vs prevalencia real</div>
|
||
<div class="gap-viz">
|
||
<div class="gap-col"><div class="gap-val" style="color:#43BBC8">54%</div><div class="gap-bar" style="height:70px;background:#43BBC8"></div><div class="gap-lab">carga real</div></div>
|
||
<div class="gap-col"><div class="gap-val" style="color:#f06b6b">27%</div><div class="gap-bar" style="height:35px;background:#f06b6b"></div><div class="gap-lab">se siente apoyado</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="card c6">
|
||
<h3>Señales de impacto laboral</h3>
|
||
<div class="qref">7.2 / 7.3 / 7.6</div>
|
||
<div class="bar-row"><span class="lab">Presentismo</span><div class="bar-track"><div class="bar-fill amber" style="width:41%"></div></div><span class="val">41%</span></div>
|
||
<div class="bar-row"><span class="lab">Ausentismo frecuente</span><div class="bar-track"><div class="bar-fill amber" style="width:27%"></div></div><span class="val">27%</span></div>
|
||
<div class="bar-row"><span class="lab">Riesgo de salida</span><div class="bar-track"><div class="bar-fill rose" style="width:23%"></div></div><span class="val">23%</span></div>
|
||
<div class="bar-row"><span class="lab">Carrera congelada</span><div class="bar-track"><div class="bar-fill rose" style="width:19%"></div></div><span class="val">19%</span></div>
|
||
</div>
|
||
<div class="card c6">
|
||
<h3>Apoyos más demandados</h3>
|
||
<div class="qref">9.2 · qué beneficios diseñar (máx 3)</div>
|
||
<div class="bar-row"><span class="lab">Flexibilidad horaria</span><div class="bar-track"><div class="bar-fill" style="width:68%"></div></div><span class="val">68%</span></div>
|
||
<div class="bar-row"><span class="lab">Apoyo económico</span><div class="bar-track"><div class="bar-fill" style="width:54%"></div></div><span class="val">54%</span></div>
|
||
<div class="bar-row"><span class="lab">Apoyo psicológico</span><div class="bar-track"><div class="bar-fill" style="width:47%"></div></div><span class="val">47%</span></div>
|
||
<div class="bar-row"><span class="lab">Convenios/descuentos</span><div class="bar-track"><div class="bar-fill" style="width:39%"></div></div><span class="val">39%</span></div>
|
||
</div>
|
||
<div class="card c12">
|
||
<h3>Dónde se concentra la carga</h3>
|
||
<div class="qref">4.1 cruzado con 2.6 (nivel) y 2.7 (modalidad)</div>
|
||
<div class="bar-row"><span class="lab">Operativo</span><div class="bar-track"><div class="bar-fill slate" style="width:62%"></div></div><span class="val">62%</span></div>
|
||
<div class="bar-row"><span class="lab">Jefatura</span><div class="bar-track"><div class="bar-fill slate" style="width:51%"></div></div><span class="val">51%</span></div>
|
||
<div class="bar-row"><span class="lab">Gerencial</span><div class="bar-track"><div class="bar-fill slate" style="width:44%"></div></div><span class="val">44%</span></div>
|
||
<div class="note">Permite a RRHH ver si el cuidado afecta más a ciertos niveles — insumo para políticas diferenciadas.</div>
|
||
</div>
|
||
</div>
|
||
<div class="k">k≥5 aplicado · segmentos con n<5 suprimidos</div>
|
||
</div>
|
||
|
||
<!-- ===== MIRADA PAÍS ===== -->
|
||
<div id="pais" class="lens-content" style="display:none">
|
||
<div class="lens-intro"><strong>Mirada País.</strong> Insumo para el estudio país y el Sistema Nacional de Cuidados (SINACUP). Dialoga con la Política Nacional de Cuidados del Paraguay (PNCUPA, 2022) y el marco de la CEPAL sobre la sociedad del cuidado.</div>
|
||
<div class="grid">
|
||
<div class="card c4">
|
||
<h3>Carga económica privada</h3>
|
||
<div class="qref">8.1 · gasto mensual de bolsillo</div>
|
||
<div class="big">Gs. 2.8M</div>
|
||
<div class="big-sub">gasto mensual mediano en cuidado</div>
|
||
</div>
|
||
<div class="card c4">
|
||
<h3>Vulnerabilidad económica</h3>
|
||
<div class="qref">8.1 vs 8.4 · gasto/ingreso</div>
|
||
<div class="big warn">31%</div>
|
||
<div class="big-sub">destina más del 30% de su ingreso al cuidado</div>
|
||
</div>
|
||
<div class="card c4">
|
||
<h3>Dependencia del Estado</h3>
|
||
<div class="qref">8.3 · subsidios estatales</div>
|
||
<div class="big">12%</div>
|
||
<div class="big-sub">apoya los gastos con subsidios estatales</div>
|
||
</div>
|
||
<div class="card c6">
|
||
<h3>Perfil de la población dependiente cuidada</h3>
|
||
<div class="qref">4.1 · por instancia de vínculo</div>
|
||
<div class="donut-wrap">
|
||
<svg class="donut" viewBox="0 0 42 42">
|
||
<circle cx="21" cy="21" r="15.9" fill="none" stroke="#16203a" stroke-width="6"/>
|
||
<circle cx="21" cy="21" r="15.9" fill="none" stroke="#43BBC8" stroke-width="6" stroke-dasharray="38 62" stroke-dashoffset="25"/>
|
||
<circle cx="21" cy="21" r="15.9" fill="none" stroke="#f0b429" stroke-width="6" stroke-dasharray="29 71" stroke-dashoffset="-13"/>
|
||
<circle cx="21" cy="21" r="15.9" fill="none" stroke="#f06b6b" stroke-width="6" stroke-dasharray="33 67" stroke-dashoffset="-42"/>
|
||
</svg>
|
||
<div class="legend">
|
||
<div><span class="dot" style="background:#43BBC8"></span> Niñez (0-13) — 38%</div>
|
||
<div><span class="dot" style="background:#f0b429"></span> Persona con discapacidad — 29%</div>
|
||
<div><span class="dot" style="background:#f06b6b"></span> Adulto mayor dependiente — 33%</div>
|
||
</div>
|
||
</div>
|
||
<div class="note">Las tres poblaciones objetivo del SINACUP. Métrica por instancia (familiares declarados), no por persona.</div>
|
||
</div>
|
||
<div class="card c6">
|
||
<h3>Quién sostiene el cuidado</h3>
|
||
<div class="qref">5.3 + 8.3 · red de soporte</div>
|
||
<div class="bar-row"><span class="lab">Otro familiar</span><div class="bar-track"><div class="bar-fill" style="width:58%"></div></div><span class="val">58%</span></div>
|
||
<div class="bar-row"><span class="lab">Cuidador contratado</span><div class="bar-track"><div class="bar-fill" style="width:34%"></div></div><span class="val">34%</span></div>
|
||
<div class="bar-row"><span class="lab">Centro de cuidado</span><div class="bar-track"><div class="bar-fill" style="width:22%"></div></div><span class="val">22%</span></div>
|
||
<div class="bar-row"><span class="lab">Comunidad/vecinos</span><div class="bar-track"><div class="bar-fill slate" style="width:14%"></div></div><span class="val">14%</span></div>
|
||
</div>
|
||
<div class="card c8">
|
||
<h3>Prevalencia de cuidado por departamento</h3>
|
||
<div class="qref">4.1 × 2.1 · concentración geográfica</div>
|
||
<div class="bar-row"><span class="lab">Central</span><div class="bar-track"><div class="bar-fill" style="width:61%"></div></div><span class="val">61%</span></div>
|
||
<div class="bar-row"><span class="lab">Asunción</span><div class="bar-track"><div class="bar-fill" style="width:48%"></div></div><span class="val">48%</span></div>
|
||
<div class="bar-row"><span class="lab">Alto Paraná</span><div class="bar-track"><div class="bar-fill" style="width:39%"></div></div><span class="val">39%</span></div>
|
||
<div class="bar-row"><span class="lab">Itapúa</span><div class="bar-track"><div class="bar-fill slate" style="width:0%"></div></div><span class="val" style="color:#5e6f8c">n<5</span></div>
|
||
<div class="note">Itapúa suprimido por k-anonimato (n<5). Solo se muestran departamentos con datos suficientes.</div>
|
||
</div>
|
||
<div class="card c4">
|
||
<h3>Cuidado de larga duración</h3>
|
||
<div class="qref">5.4 · cronicidad</div>
|
||
<div class="big">46%</div>
|
||
<div class="big-sub">cuida hace más de 3 años</div>
|
||
</div>
|
||
<div class="card c12 req">
|
||
<h3><i class="ti ti-circle-plus"></i> Tiempo de cuidado no remunerado — requiere nueva pregunta</h3>
|
||
<div class="qref">aproximado hoy por 6.1×6.2 en rangos</div>
|
||
<div class="big-sub" style="color:#f0975a">Para conectar con el indicador de CEPAL/Uso del Tiempo (el cuidado no remunerado fue 22,4% del PIB paraguayo en 2016), convendría una pregunta de horas semanales de cuidado no remunerado. Hoy se aproxima con rangos de días×horas, pero no es comparable con la Encuesta de Uso del Tiempo nacional.</div>
|
||
</div>
|
||
</div>
|
||
<div class="k">k≥5 sobre count(DISTINCT response_id), también en métricas por instancia</div>
|
||
</div>
|
||
|
||
<!-- ===== MIRADA HUMANA ===== -->
|
||
<div id="humana" class="lens-content" style="display:none">
|
||
<div class="lens-intro"><strong>Mirada Humana.</strong> Bienestar de quien cuida y de quien es cuidado. <em>Estos indicadores dialogan con agendas de UNICEF, UNFPA y la Convención de Derechos de PcD; no son indicadores oficiales de esos organismos, son lecturas propias del instrumento.</em></div>
|
||
<div class="grid">
|
||
<div class="card c4 star">
|
||
<h3><i class="ti ti-battery-2"></i> Agotamiento del cuidador</h3>
|
||
<div class="qref">7.1 + 7.4 · sobrecarga</div>
|
||
<div class="big danger">37%</div>
|
||
<div class="big-sub">descansa muy poco y el agotamiento afecta su desempeño</div>
|
||
</div>
|
||
<div class="card c8">
|
||
<h3>Aspectos de vida sacrificados por cuidar</h3>
|
||
<div class="qref">7.4 · qué pierde la persona</div>
|
||
<div class="bar-row"><span class="lab">Tiempo libre</span><div class="bar-track"><div class="bar-fill rose" style="width:71%"></div></div><span class="val">71%</span></div>
|
||
<div class="bar-row"><span class="lab">Sueño y descanso</span><div class="bar-track"><div class="bar-fill rose" style="width:58%"></div></div><span class="val">58%</span></div>
|
||
<div class="bar-row"><span class="lab">Salud emocional</span><div class="bar-track"><div class="bar-fill amber" style="width:49%"></div></div><span class="val">49%</span></div>
|
||
<div class="bar-row"><span class="lab">Vida social</span><div class="bar-track"><div class="bar-fill amber" style="width:44%"></div></div><span class="val">44%</span></div>
|
||
<div class="bar-row"><span class="lab">Desarrollo profesional</span><div class="bar-track"><div class="bar-fill" style="width:33%"></div></div><span class="val">33%</span></div>
|
||
</div>
|
||
<div class="card c4">
|
||
<h3>Soledad del cuidado</h3>
|
||
<div class="qref">5.3 · cuida sin red</div>
|
||
<div class="big warn">21%</div>
|
||
<div class="big-sub">no tiene quién lo releve mientras trabaja</div>
|
||
</div>
|
||
<div class="card c4">
|
||
<h3>Cuidado permanente</h3>
|
||
<div class="qref">6.4 · guardia sin horario</div>
|
||
<div class="big warn">28%</div>
|
||
<div class="big-sub">debe estar disponible de forma permanente</div>
|
||
</div>
|
||
<div class="card c4">
|
||
<h3>Inclusión laboral de PcD</h3>
|
||
<div class="qref">3.1 · discapacidad propia</div>
|
||
<div class="big">9%</div>
|
||
<div class="big-sub">de la plantilla tiene discapacidad propia</div>
|
||
</div>
|
||
<div class="card c4">
|
||
<h3>Disposición solidaria</h3>
|
||
<div class="qref">9.3 + 9.4 · voluntariado</div>
|
||
<div class="big">43%</div>
|
||
<div class="big-sub">participaría en redes de apoyo o voluntariado</div>
|
||
</div>
|
||
<div class="card c12 req">
|
||
<h3><i class="ti ti-circle-plus"></i> Escolarización de niñez cuidada — requiere nueva pregunta</h3>
|
||
<div class="qref">propuesta: 4.4 (instance_of 4.1, condicional a vínculo niño)</div>
|
||
<div class="big-sub" style="color:#f0975a">Para la lectura que dialoga con UNICEF/UNESCO sobre educación inclusiva, faltaría capturar si la niñez cuidada está escolarizada y enfrenta barreras de aprendizaje. La arquitectura de instancias ya existente lo soporta: sería una pregunta de instancia que aparece solo cuando el vínculo es un niño/a. Sugerencia para validar con el equipo.</div>
|
||
</div>
|
||
</div>
|
||
<div class="k">k≥5 aplicado · datos sensibles agregados</div>
|
||
</div>
|
||
|
||
<div class="footnote">
|
||
<strong>Nota de honestidad metodológica.</strong> Todos los números son datos de ejemplo ilustrativos, NO datos reales. Cada métrica está anclada a preguntas reales del instrumento v3 (referencia bajo cada título) y es construible con queries sobre la tabla <code>answers</code>, respetando k≥5. Las métricas marcadas en naranja <strong>requieren agregar una pregunta</strong> al instrumento. Los marcos internacionales (OIT 5R, CEPAL, PNCUPA, UNICEF/UNFPA) se citan como referencia conceptual; el alineamiento formal con cualquier organismo debe validarlo el equipo. Propuesta para discusión, no especificación final.
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
function showLens(id, el){
|
||
document.querySelectorAll('.lens-content').forEach(c=>c.style.display='none');
|
||
document.getElementById(id).style.display='block';
|
||
document.querySelectorAll('.tab').forEach(t=>t.classList.remove('active'));
|
||
el.classList.add('active');
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |