:root {
    --ps-ink: #111827;
    --ps-muted: #667085;
    --ps-line: #e7ebf0;
    --ps-panel: #ffffff;
    --ps-soft: #f7f9fc;
    --ps-blue: #0c75e7;
    --ps-cyan: #23b7e8;
    --ps-green: #82d12b;
    --ps-green-dark: #49aa4a;
    --ps-gold: #f2ad2e;
    --ps-gold-light: #ffc94e;
    --ps-pastel-blue: #79baf0;
    --ps-pastel-blue-light: #b9ddf8;
    --ps-radius: 24px;
    --ps-shadow: 0 18px 60px rgba(15, 23, 42, .09);
}

.ps-home,
.ps-dashboard {font-family:inherit;color:var(--ps-ink);box-sizing:border-box;}
.ps-home *, .ps-dashboard * {box-sizing:border-box;}

/* ==============================
   BLOQUE ESTADÍSTICAS · INICIO
   ============================== */
.ps-home {width:100%;padding:18px 0 10px;}
.ps-home-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:stretch;}
.ps-card {background:var(--ps-panel);border:1px solid var(--ps-line);border-radius:var(--ps-radius);padding:24px;min-height:340px;box-shadow:var(--ps-shadow);display:flex;flex-direction:column;align-items:center;text-align:center;overflow:visible;position:relative;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;}
.ps-card::before {content:"";position:absolute;inset:0 0 auto;height:5px;background:var(--tone);border-radius:var(--ps-radius) var(--ps-radius) 0 0;}
.ps-card:hover {transform:translateY(-4px);box-shadow:0 24px 68px rgba(15,23,42,.13);border-color:#dce3eb;z-index:4;}
.ps-tone-blue {--tone:var(--ps-blue);--tone2:var(--ps-cyan);}
.ps-tone-green {--tone:var(--ps-green);--tone2:var(--ps-green-dark);}
.ps-tone-orange,.ps-tone-gold {--tone:var(--ps-gold);--tone2:var(--ps-gold-light);}
.ps-card-label {font-size:16px;line-height:1.45;font-weight:800;min-height:72px;display:flex;align-items:flex-start;justify-content:center;text-transform:uppercase;letter-spacing:.01em;}

.ps-kpi-orb {margin:auto;width:190px;height:190px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;background:linear-gradient(145deg,var(--tone),var(--tone2));box-shadow:0 18px 45px color-mix(in srgb, var(--tone) 25%, transparent);transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease;}
.ps-kpi-card:hover .ps-kpi-orb,.ps-kpi-chart-wrap:hover .ps-kpi-orb,.ps-kpi-chart-wrap:focus .ps-kpi-orb {transform:scale(1.035);box-shadow:0 24px 52px color-mix(in srgb, var(--tone) 32%, transparent);}
.ps-kpi-orb strong {font-size:41px;line-height:1;font-weight:500;letter-spacing:-.04em;}
.ps-kpi-orb span {font-size:12px;margin-top:10px;letter-spacing:.12em;text-transform:uppercase;opacity:.9;}

/* Gráfico de respuestas del home */
.ps-question-card {padding-bottom:18px;}
.ps-chart-wrap {position:relative;margin:auto;width:198px;height:198px;display:grid;place-items:center;outline:none;z-index:2;}
.ps-ring {--ps-pct:0;width:188px;height:188px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--ps-gold) calc(var(--ps-pct) * 1%),var(--ps-pastel-blue) 0);position:relative;box-shadow:0 12px 30px rgba(15,23,42,.08);transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease,filter .28s ease;}
.ps-ring::before {content:"";position:absolute;inset:-9px;border-radius:50%;background:conic-gradient(rgba(242,173,46,.42) calc(var(--ps-pct) * 1%),rgba(121,186,240,.42) 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 0);mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 0);opacity:0;transform:scale(.96);transition:opacity .25s ease,transform .25s ease;pointer-events:none;}
.ps-ring::after {content:"";position:absolute;width:112px;height:112px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px rgba(15,23,42,.04),0 3px 12px rgba(15,23,42,.04);}
.ps-ring > div {position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;}
.ps-ring strong {font-size:29px;line-height:1;font-weight:800;}
.ps-ring span {font-size:11px;color:var(--ps-muted);margin-top:8px;max-width:82px;line-height:1.25;}
.ps-chart-wrap:hover .ps-ring,.ps-chart-wrap:focus .ps-ring,.ps-question-card:hover .ps-ring {transform:scale(1.045);box-shadow:0 20px 45px rgba(242,173,46,.23);filter:saturate(1.05);}
.ps-chart-wrap:hover .ps-ring::before,.ps-chart-wrap:focus .ps-ring::before,.ps-question-card:hover .ps-ring::before {opacity:1;transform:scale(1);}

/* Comentario/tooltip al posicionar el cursor */
.ps-chart-tooltip {position:absolute;left:50%;top:-42px;width:240px;padding:13px 14px;border:1px solid rgba(15,23,42,.10);border-radius:14px;background:rgba(255,255,255,.98);box-shadow:0 18px 45px rgba(15,23,42,.18);text-align:left;opacity:0;visibility:hidden;transform:translate(-50%,10px) scale(.97);transition:opacity .2s ease,transform .2s ease,visibility .2s ease;pointer-events:none;z-index:10;backdrop-filter:blur(8px);}
.ps-chart-tooltip::after {content:"";position:absolute;left:50%;bottom:-8px;width:14px;height:14px;background:#fff;border-right:1px solid rgba(15,23,42,.10);border-bottom:1px solid rgba(15,23,42,.10);transform:translateX(-50%) rotate(45deg);}
.ps-chart-wrap:hover .ps-chart-tooltip,.ps-chart-wrap:focus .ps-chart-tooltip {opacity:1;visibility:visible;transform:translate(-50%,0) scale(1);}
.ps-kpi-tooltip {top:-28px;width:220px;text-align:center;padding:12px 14px;}
.ps-kpi-tooltip strong {display:block;font-size:15px;line-height:1.2;color:var(--ps-ink);}
.ps-kpi-tooltip span {display:block;margin-top:5px;font-size:10.5px;line-height:1.35;color:var(--ps-muted);text-transform:none;}
.ps-tooltip-row {display:grid;grid-template-columns:12px 1fr auto;gap:8px;align-items:center;font-size:12px;line-height:1.3;}
.ps-tooltip-row + small {margin:3px 0 9px 20px;}
.ps-chart-tooltip small {display:block;color:var(--ps-muted);font-size:10px;line-height:1.2;}
.ps-tooltip-row strong {font-size:12px;font-variant-numeric:tabular-nums;}
.ps-dot {display:inline-block;width:10px;height:10px;border-radius:50%;flex:0 0 auto;}
.ps-dot-positive {background:var(--ps-gold);box-shadow:0 0 0 3px rgba(242,173,46,.10);}
.ps-dot-other {background:var(--ps-pastel-blue);box-shadow:0 0 0 3px rgba(121,186,240,.10);}

.ps-question-meta {font-size:12px;color:var(--ps-muted);margin-top:4px;}
.ps-home-legend {width:calc(100% + 48px);margin:15px -24px -18px;padding:13px 18px 2px;border-top:1px solid var(--ps-line);display:flex;flex-direction:column;gap:8px;text-align:left;color:#344054;font-size:10.5px;line-height:1.25;}
.ps-home-legend span {display:flex;align-items:center;gap:8px;}
.ps-empty {margin:auto;color:var(--ps-muted);font-size:14px;line-height:1.5;}
.ps-home-cta {display:flex;justify-content:center;margin-top:24px;}
.ps-button {appearance:none;border:0;border-radius:999px;background:var(--ps-blue);color:#fff!important;text-decoration:none!important;padding:13px 22px;display:inline-flex;align-items:center;justify-content:center;gap:10px;font:inherit;font-size:14px;font-weight:800;cursor:pointer;box-shadow:0 10px 25px rgba(12,117,231,.18);transition:transform .18s ease,box-shadow .18s ease,background .18s ease;}
.ps-button:hover {transform:translateY(-1px);box-shadow:0 14px 30px rgba(12,117,231,.24);background:#075fbe;color:#fff!important;}
.ps-button-secondary {background:#fff;color:var(--ps-ink)!important;border:1px solid var(--ps-line);box-shadow:none;}
.ps-button-secondary:hover {background:#f8fafc;color:var(--ps-ink)!important;box-shadow:none;}

/* ==============================
   DASHBOARD / PÁGINA DETALLE
   ============================== */
.ps-dashboard {width:100%;max-width:1280px;margin:0 auto;padding:18px 0 40px;}
.ps-dashboard-head {display:flex;justify-content:space-between;gap:30px;align-items:flex-end;padding:28px;border-radius:28px;background:linear-gradient(135deg,#f8fbff,#f7fbf3);border:1px solid var(--ps-line);}
.ps-dashboard-head h2 {font-size:clamp(28px,4vw,46px);line-height:1.05;margin:8px 0 12px;letter-spacing:-.035em;}
.ps-dashboard-head p {max-width:780px;margin:0;color:var(--ps-muted);font-size:16px;line-height:1.6;}
.ps-eyebrow {display:inline-block;font-size:12px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--ps-blue);}
.ps-actions {display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
.ps-summary {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:22px 0;}
.ps-summary-card {background:#fff;border:1px solid var(--ps-line);border-radius:20px;padding:18px 20px;box-shadow:0 10px 35px rgba(15,23,42,.05);}
.ps-summary-card span {display:block;color:var(--ps-muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;}
.ps-summary-card strong {display:block;font-size:28px;margin-top:6px;letter-spacing:-.03em;}
.ps-summary-card small {display:block;margin-top:4px;color:var(--ps-muted);font-size:12px;}
.ps-filters {display:grid;grid-template-columns:minmax(220px,280px) minmax(260px,1fr) auto;gap:14px;align-items:end;margin:20px 0;padding:18px;border-radius:20px;background:var(--ps-soft);border:1px solid var(--ps-line);}
.ps-filters label {display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:800;color:#344054;text-transform:uppercase;letter-spacing:.04em;}
.ps-filters select,.ps-filters input {width:100%;height:46px;border:1px solid #d8dee8;border-radius:12px;background:#fff;padding:0 13px;font:inherit;font-size:14px;color:var(--ps-ink);outline:none;}
.ps-filters select:focus,.ps-filters input:focus {border-color:var(--ps-blue);box-shadow:0 0 0 3px rgba(12,117,231,.10);}
.ps-filter-reset {height:46px;border:0;background:transparent;color:var(--ps-blue);font:inherit;font-weight:800;cursor:pointer;padding:0 10px;}
.ps-results-meta {font-size:13px;color:var(--ps-muted);margin:16px 2px;}
.ps-question-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
.ps-question {background:#fff;border:1px solid var(--ps-line);border-radius:22px;padding:22px;box-shadow:0 12px 38px rgba(15,23,42,.055);}
.ps-question-top {display:grid;grid-template-columns:1fr 108px;gap:18px;align-items:start;}
.ps-question h3 {margin:0;font-size:17px;line-height:1.45;letter-spacing:-.01em;}
.ps-question-group {display:inline-flex;margin-bottom:10px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--ps-blue);background:#eef6ff;border-radius:999px;padding:6px 9px;}
.ps-mini-ring {--ps-pct:0;width:98px;height:98px;border-radius:50%;background:conic-gradient(var(--ps-green) calc(var(--ps-pct) * 1%),#edf1f5 0);display:grid;place-items:center;position:relative;}
.ps-mini-ring::after {content:"";position:absolute;width:70px;height:70px;border-radius:50%;background:#fff;}
.ps-mini-ring strong {position:relative;z-index:2;font-size:18px;}
.ps-mini-ring span {position:absolute;z-index:2;top:59px;font-size:9px;color:var(--ps-muted);}
.ps-bars {display:flex;flex-direction:column;gap:10px;margin-top:20px;}
.ps-bar-row {display:grid;grid-template-columns:minmax(118px,1fr) minmax(110px,2fr) 88px;gap:10px;align-items:center;font-size:12px;}
.ps-bar-label {white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#344054;}
.ps-bar-track {height:10px;background:#edf1f5;border-radius:999px;overflow:hidden;}
.ps-bar-fill {height:100%;border-radius:999px;background:linear-gradient(90deg,var(--ps-blue),var(--ps-cyan));min-width:0;}
.ps-bar-value {text-align:right;color:var(--ps-muted);font-variant-numeric:tabular-nums;}
.ps-question-foot {display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--ps-line);margin-top:18px;padding-top:13px;font-size:11px;color:var(--ps-muted);}
.ps-data-note {margin-top:24px;font-size:11px;color:#98a2b3;text-align:center;}
.ps-data-note a{color:inherit;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(152,162,179,.55);transition:color .2s ease,border-color .2s ease;}
.ps-data-note a:hover,.ps-data-note a:focus{color:#1577d3;border-bottom-color:#1577d3;}
.ps-notice {padding:18px;border:1px solid #f1d99c;background:#fff9e8;border-radius:14px;}

@media (max-width:1100px) {
    .ps-home-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
    .ps-dashboard-head {align-items:flex-start;flex-direction:column;}
    .ps-actions {justify-content:flex-start;}
}
@media (max-width:760px) {
    .ps-home-grid,.ps-question-grid,.ps-summary {grid-template-columns:1fr;}
    .ps-card {min-height:310px;}
    .ps-chart-tooltip {top:-30px;width:min(238px,calc(100vw - 48px));}
    .ps-filters {grid-template-columns:1fr;}
    .ps-filter-reset {justify-self:start;padding-left:0;}
    .ps-question-top {grid-template-columns:1fr;}
    .ps-mini-ring {margin-top:4px;}
    .ps-bar-row {grid-template-columns:1fr;gap:5px;}
    .ps-bar-value {text-align:left;}
}


@media (prefers-reduced-motion: reduce) {
    .ps-card,.ps-kpi-orb,.ps-ring,.ps-ring::before,.ps-chart-tooltip,.ps-button {transition:none!important;}
}

@media print {
    .ps-dashboard-head,.ps-filters,.ps-actions,.ps-filter-reset,.ps-data-note {box-shadow:none!important;}
    .ps-actions,.ps-filters {display:none!important;}
    .ps-question-grid {grid-template-columns:1fr 1fr;gap:10px;}
    .ps-question {break-inside:avoid;box-shadow:none;}
}

/* =====================================================
   v0.1.3 · INTERACCIÓN TOUCH / RESPONSIVE EN HOME
   ===================================================== */
.ps-home .ps-chart-wrap {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.ps-home .ps-chart-wrap:focus-visible {
    border-radius: 22px;
    box-shadow: 0 0 0 4px rgba(12,117,231,.14);
}
.ps-home .ps-chart-wrap.ps-is-active .ps-chart-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%,0) scale(1);
}
.ps-home .ps-chart-wrap.ps-is-active .ps-ring {
    transform: scale(1.045);
    box-shadow: 0 20px 45px rgba(242,173,46,.23);
    filter: saturate(1.05);
}
.ps-home .ps-chart-wrap.ps-is-active .ps-ring::before {
    opacity: 1;
    transform: scale(1);
}
.ps-home .ps-kpi-chart-wrap.ps-is-active .ps-kpi-orb {
    transform: scale(1.035);
    box-shadow: 0 24px 52px color-mix(in srgb, var(--tone) 32%, transparent);
}
.ps-home .ps-card.ps-card-active {
    z-index: 20;
    border-color: #dce3eb;
    box-shadow: 0 24px 68px rgba(15,23,42,.13);
}

/* En dispositivos táctiles no existe hover: el tooltip se controla por clic. */
@media (hover:none), (pointer:coarse) {
    .ps-home .ps-card:hover {transform:none;}
    .ps-home .ps-chart-tooltip {
        display:block;
        pointer-events:none;
        top:50%;
        left:50%;
        width:min(250px,calc(100vw - 72px));
        transform:translate(-50%,-44%) scale(.96);
    }
    .ps-home .ps-chart-tooltip::after {display:none;}
    .ps-home .ps-chart-wrap:hover .ps-chart-tooltip,
    .ps-home .ps-chart-wrap:focus:not(.ps-is-active) .ps-chart-tooltip {
        opacity:0;
        visibility:hidden;
        transform:translate(-50%,-44%) scale(.96);
    }
    .ps-home .ps-chart-wrap.ps-is-active .ps-chart-tooltip {
        opacity:1;
        visibility:visible;
        transform:translate(-50%,-50%) scale(1);
    }
    .ps-home .ps-chart-wrap:hover .ps-ring,
    .ps-home .ps-chart-wrap:focus:not(.ps-is-active) .ps-ring,
    .ps-home .ps-question-card:hover .ps-ring {
        transform:none;
        box-shadow:0 12px 30px rgba(15,23,42,.08);
        filter:none;
    }
    .ps-home .ps-chart-wrap:hover .ps-ring::before,
    .ps-home .ps-chart-wrap:focus:not(.ps-is-active) .ps-ring::before,
    .ps-home .ps-question-card:hover .ps-ring::before {
        opacity:0;
        transform:scale(.96);
    }
    .ps-home .ps-chart-wrap.ps-is-active .ps-ring {
        transform:scale(1.045);
        box-shadow:0 20px 45px rgba(242,173,46,.23);
        filter:saturate(1.05);
    }
    .ps-home .ps-chart-wrap.ps-is-active .ps-ring::before {
        opacity:1;
        transform:scale(1);
    }
    .ps-home .ps-kpi-card:hover .ps-kpi-orb,
    .ps-home .ps-kpi-chart-wrap:hover .ps-kpi-orb,
    .ps-home .ps-kpi-chart-wrap:focus:not(.ps-is-active) .ps-kpi-orb {
        transform:none;
        box-shadow:0 18px 45px color-mix(in srgb, var(--tone) 25%, transparent);
    }
    .ps-home .ps-kpi-chart-wrap.ps-is-active .ps-kpi-orb {
        transform:scale(1.035);
        box-shadow:0 24px 52px color-mix(in srgb, var(--tone) 32%, transparent);
    }
}

@media (max-width:760px) {
    .ps-home .ps-card {overflow:visible;}
    .ps-home .ps-chart-wrap {width:210px;height:210px;}
    .ps-home .ps-chart-tooltip {
        font-size:12px;
        padding:14px 15px;
        border-radius:15px;
    }
    .ps-home .ps-tooltip-row {font-size:12px;}
    .ps-home .ps-chart-tooltip small {font-size:10.5px;}
}