/* Encuestas (Surveys) section. Uses the portal house system (tokens, .card, .ch,
   .row, .status-badge, ECharts). Only survey-specific bits live here.
   Gold (#FFC808) is reserved for the giros/spins metric, everything else uses tokens. */
.enc { display: block; }
.enc .enc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.enc .back { background: none; border: 0; color: var(--t3); cursor: pointer; font-size: 12.5px; font-weight: 600; padding: 4px 0; margin-bottom: 10px; letter-spacing: .01em; }
.enc .back:hover { color: var(--t1); }

.enc .ebtns { display: flex; gap: 8px; flex-wrap: wrap; }
.enc .ebtn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 10px; border: 1px solid var(--b2); background: var(--s1); color: var(--t1); font-weight: 600; font-size: 12.5px; cursor: pointer; text-decoration: none; transition: border-color .15s, color .15s, background .15s; white-space: nowrap; }
.enc .ebtn:hover { border-color: var(--brand, #EA8FD7); color: var(--brand, #EA8FD7); }
.enc .ebtn.primary { background: var(--brand, #EA8FD7); border-color: var(--brand, #EA8FD7); color: #000; }
.enc .ebtn.primary:hover { filter: brightness(1.06); color: #000; }
.enc .ebtn.sm { padding: 6px 10px; font-size: 11.5px; }

/* survey list cards */
.enc .scards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.enc .scard { display: flex; flex-direction: column; gap: 13px; }
.enc .scard .sc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.enc .scard h3 { font-size: 16.5px; font-weight: 700; margin: 0; letter-spacing: -.01em; color: var(--t1); }
.enc .scard .sc-meta { color: var(--t4); font-size: 11.5px; margin-top: 3px; }
.enc .linkrow { display: flex; gap: 7px; align-items: center; background: var(--bg); border: 1px solid var(--b1); border-radius: 10px; padding: 7px 9px; }
.enc .linkrow code { flex: 1; color: var(--t3); font-size: 11px; font-family: "Noto Sans Mono", ui-monospace, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.enc .sc-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* status badges: map survey status to the house status-badge look */
.enc .sb { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 100px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.enc .sb .dot { width: 7px; height: 7px; border-radius: 50%; }
.enc .sb.active { background: rgba(76,209,122,.12); color: var(--green); }
.enc .sb.active .dot { background: var(--green); box-shadow: 0 0 8px var(--green); }
.enc .sb.draft { background: rgba(255,200,8,.12); color: #FFC808; }
.enc .sb.draft .dot { background: #FFC808; }
.enc .sb.closed { background: rgba(255,90,90,.12); color: var(--red); }
.enc .sb.closed .dot { background: var(--red); }

/* KPI accent: gold reserved for giros */
.enc .card.gold .val { color: #FFC808; }

/* chart panels */
.enc .ch { display: flex; flex-direction: column; }
.enc .ch .chart { width: 100%; min-height: 0; }
.enc .donut-wrap { position: relative; }
.enc .donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.enc .donut-center .dc-v { font-size: 30px; font-weight: 800; letter-spacing: -1.5px; line-height: 1; }
.enc .donut-center .dc-l { font-size: 8.5px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--t4); margin-top: 4px; }

/* small CSS bars for brand-knowledge mini funnel */
.enc .mf { margin-top: 4px; }
.enc .mf .mfrow { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.enc .mf .mfl { width: 130px; font-size: 12px; color: var(--t3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.enc .mf .mftrack { flex: 1; height: 18px; background: var(--s2); border-radius: 5px; overflow: hidden; }
.enc .mf .mffill { height: 100%; border-radius: 5px; background: linear-gradient(90deg, #EA8FD7, #F4B8E6); transition: width .5s; }
.enc .mf .mfv { width: 62px; text-align: right; font-size: 12px; color: var(--t3); font-variant-numeric: tabular-nums; }
.enc .mf .mfv b { color: var(--t1); }

/* recent responses table */
.enc .tbl-wrap { overflow-x: auto; }
.enc table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.enc th { text-align: left; padding: 10px 12px; font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--t4); border-bottom: 1px solid var(--b2); font-weight: 700; }
.enc td { padding: 10px 12px; border-bottom: 1px solid var(--b1); color: var(--t2); font-variant-numeric: tabular-nums; }
.enc td b { color: var(--t1); font-weight: 600; }
.enc tr:hover td { background: rgba(255,255,255,.02); }
.enc .badge-lang { font-size: 9.5px; padding: 2px 7px; border-radius: 5px; background: var(--s2); color: var(--t3); text-transform: uppercase; letter-spacing: .04em; }
.enc .nps-chip { font-weight: 700; padding: 2px 8px; border-radius: 6px; font-size: 11.5px; }

.enc .empty { text-align: center; color: var(--t4); padding: 44px 20px; font-size: 14px; }
.enc .sec-label { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--t3); margin: 6px 0 12px; }