/* Los Cabos 2050 — Pulso ciudadano — Ánimo y satisfacción ciudadana V1 */
.mood{padding:8px 0 22px}
.mood-shell{background:#fff;border:1px solid #e1e6e8;border-radius:14px;box-shadow:0 5px 20px rgba(6,43,70,.05);padding:24px}
.mood .eyebrow{font-size:10px}
.mood-muted{color:#6a7b84;font-size:12px;margin:0}
.mood-notice{font-size:13px;color:#7a5b2c;background:#fff6e8;border:1px solid #f3dcb5;border-radius:10px;padding:12px 14px;margin:6px 0 0}

.mood-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:20px}
.mood-head h2{font-size:26px;line-height:1.15;margin:0 0 8px;color:var(--navy,#062b46)}
.mood-head p{font-size:13px;color:#5d707a;max-width:720px;margin:0}
.mood-period{display:flex;gap:6px;flex-wrap:wrap;flex:0 0 auto}
.mood-period button{border:1px solid #d8e0e4;background:#fff;border-radius:8px;padding:7px 11px;font-size:12px;cursor:pointer;color:#33505f;transition:.15s ease}
.mood-period button:hover{border-color:#91a8b5;background:#f7fafb}
.mood-period button.active{background:#082f4e;color:#fff;border-color:#082f4e}
.mood.is-loading .mood-grid,.mood.is-loading .mood-overview{opacity:.55;transition:opacity .2s}

/* Termómetro y prioridades */
.mood-overview{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;margin-bottom:16px}
.mood-thermo{background:linear-gradient(135deg,#062b46,#0a3d63);color:#fff;border-radius:12px;padding:20px 22px}
.mood-thermo .eyebrow{color:#6ed7e4}
.mood-thermo .mood-muted{color:#cfe0e8}
.thermo-main{display:flex;align-items:center;gap:16px;margin:6px 0 14px}
.thermo-face{font-size:58px;line-height:1;filter:drop-shadow(0 4px 10px rgba(0,0,0,.25));animation:mood-pop .5s ease}
.thermo-main strong{display:block;font-size:18px;line-height:1.25}
.thermo-main em{font-style:normal;background:#fff;border-radius:6px;padding:0 6px}
.thermo-main p{font-size:12px;color:#cfe0e8;margin:4px 0 0}
.thermo-gauge{position:relative;padding:18px 0 6px}
.thermo-track{height:10px;border-radius:10px;background:linear-gradient(90deg,#d64545,#ef8a3a 25%,#e2b42f 50%,#7cb65a 75%,#2f9a5c)}
.thermo-marker{position:absolute;top:2px;transform:translateX(-50%);font-size:24px;line-height:1;transition:left .6s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}
.thermo-scale{display:flex;justify-content:space-between;font-size:14px;margin-top:6px;opacity:.85}
.thermo-dist{margin-top:12px;height:12px;background:rgba(255,255,255,.15)}
.thermo-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:9px;font-size:12px;color:#e2eef3}
.thermo-legend span{display:flex;align-items:center;gap:5px}
.thermo-legend b{width:9px;height:9px;border-radius:50%;display:inline-block}
.thermo-picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-top:16px}
.thermo-pick{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:10px 12px;text-align:left;color:#fff;cursor:pointer;transition:background .15s}
.thermo-pick:hover,.thermo-pick:focus-visible{background:rgba(255,255,255,.16);outline:none}
.thermo-pick small{display:block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#6ed7e4;font-weight:800}
.thermo-pick strong{display:block;font-size:14px;margin:3px 0 1px}
.thermo-pick span{font-size:12px;color:#cfe0e8}
.thermo-foot{display:block;margin-top:10px;font-size:11px;color:#b7cdd8}

.mood-priority{border:1px solid #e1e6e8;border-radius:12px;padding:18px 18px 14px;background:#fbfcfc}
.mood-priority h3{font-size:16px;margin:0 0 10px;color:var(--navy,#062b46)}
.priority-list{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:6px}
.priority-empty{font-size:12px;color:#6a7b84;padding:8px 0}
.priority-row{width:100%;display:grid;grid-template-columns:22px minmax(110px,1fr) 1.2fr 44px;gap:4px 10px;align-items:center;border:1px solid transparent;background:none;border-radius:9px;padding:7px 8px;text-align:left;cursor:pointer;color:inherit}
.priority-row:hover,.priority-row:focus-visible{background:#fff;border-color:#e1e6e8}
.priority-rank{font-weight:800;color:#ef7b12;font-size:14px}
.priority-name{font-weight:750;font-size:13px}
.priority-bar{height:9px;background:#edf1f3;border-radius:9px;overflow:hidden}
.priority-bar i{display:block;height:100%;background:linear-gradient(90deg,#ef8a3a,#d64545);border-radius:9px;transition:width .5s ease}
.priority-pct{font-weight:800;font-size:13px;text-align:right}
.priority-row small{grid-column:2 / -1;font-size:11px;color:#6a7b84;display:flex;align-items:center;gap:6px;flex-wrap:wrap}

/* Distribución */
.mood-dist{display:flex;height:8px;border-radius:8px;overflow:hidden;background:#edf1f3;width:100%}
.mood-dist i{display:block;height:100%;transition:width .5s ease}
.mood-dist.is-empty{opacity:.6}

/* Cambio vs periodo anterior */
.mood-change{font-size:11px;font-weight:800;border-radius:12px;padding:2px 7px;white-space:nowrap}
.mood-change.up{background:#e7f5ec;color:#2b7f4c}
.mood-change.down{background:#fdecea;color:#b53a30}
.mood-change.flat{background:#eef2f4;color:#5d707a}

/* Tarjetas por tema */
.mood-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.mood-card{position:relative;border:1px solid #e1e6e8;border-radius:12px;background:#fff;display:flex;flex-direction:column;overflow:hidden;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.mood-card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--mood)}
.mood-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(6,43,70,.09)}
.mood-card.is-selected{border-color:#082f4e;box-shadow:0 0 0 2px rgba(8,47,78,.15)}
.mood-card-main{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:16px 15px 12px;background:none;border:0;text-align:left;cursor:pointer;color:inherit;width:100%}
.mood-card-main:focus-visible{outline:3px solid #2f6fb6;outline-offset:-3px;border-radius:12px}
.mood-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:6px;width:100%;min-height:38px;flex-wrap:wrap}
.mood-topic{font-size:13px;font-weight:800;color:#183f57}
.mood-card-face{font-size:44px;line-height:1.1;margin-top:4px}
.mood-card:hover .mood-card-face{animation:mood-wiggle .5s ease}
.mood-card-label{font-size:13px;font-weight:750;color:#33505f}
.mood-card-score{font-size:22px;font-weight:850;color:#0b2c45;line-height:1.1}
.mood-card-score small{font-size:12px;font-weight:600;color:#6a7b84}
.mood-card-meta{font-size:11px;color:#6a7b84}
.mood-card-quick{border-top:1px solid #edf1f2;padding:9px 12px 11px;background:#fafbfb;margin-top:auto}
.mood-card-quick>span{display:block;font-size:11px;font-weight:700;color:#4e6470;margin-bottom:5px}
.quick-faces{display:flex;justify-content:space-between;gap:2px}
.quick-face{font-size:22px;line-height:1;background:none;border:2px solid transparent;border-radius:50%;width:36px;height:36px;display:grid;place-items:center;cursor:pointer;transition:transform .12s ease,background .12s ease;padding:0}
.quick-face:hover,.quick-face:focus-visible{transform:scale(1.22);background:#fff;outline:none;border-color:#d8e0e4}
.quick-face.is-mine{background:#fff;border-color:#082f4e}

/* Detalle del tema */
.mood-detail{margin-top:16px;border:1px solid #e1e6e8;border-radius:12px;padding:20px;background:#fbfcfc;animation:mood-fade .25s ease}
.mood-detail-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:14px}
.mood-detail-head h3{font-size:20px;margin:0 0 4px;color:var(--navy,#062b46)}
.mood-detail-body{display:grid;grid-template-columns:1.15fr 1fr;gap:20px}
.mood-trend-chart{width:100%;height:auto;display:block;overflow:visible;margin-top:6px}
.mood-grid-line{stroke:#e5ebee;stroke-width:1}
.mood-axis{fill:#74848c;font-size:11px}
.mood-axis-face{font-size:14px}
.mood-line-general{fill:none;stroke:#b6c3ca;stroke-width:2;stroke-dasharray:5 5}
.mood-line-topic{fill:none;stroke:#082f4e;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.mood-point{stroke:#fff;stroke-width:2;cursor:help}
.mood-trend-empty{fill:#74848c;font-size:13px}
.mood-trend-note{display:block;font-size:12px;color:#5d707a;margin-top:6px;line-height:1.5}
.mood-trend-note .key{display:inline-block;width:16px;height:3px;vertical-align:middle;margin-right:4px;border-radius:2px}
.mood-trend-note .key.topic{background:#082f4e}
.mood-trend-note .key.general{background:repeating-linear-gradient(90deg,#b6c3ca 0 4px,transparent 4px 7px);margin-left:8px}

.mood-reason-filter{display:flex;gap:5px;flex-wrap:wrap;margin:6px 0 10px}
.mood-reason-filter button{border:1px solid #d8e0e4;background:#fff;border-radius:16px;padding:4px 10px;font-size:13px;cursor:pointer;line-height:1.3}
.mood-reason-filter button.active{background:#082f4e;color:#fff;border-color:#082f4e}
.mood-reason-list{display:flex;flex-direction:column;gap:8px;max-height:330px;overflow:auto;padding-right:4px}
.mood-reason{margin:0;display:grid;grid-template-columns:32px 1fr;gap:10px;align-items:start;background:#fff;border:1px solid #e4e9eb;border-left:4px solid var(--mood);border-radius:9px;padding:10px 12px}
.mood-reason-face{font-size:24px;line-height:1}
.mood-reason p{margin:0;font-size:13px;color:#24404f;line-height:1.45;overflow-wrap:anywhere}
.mood-reason cite{display:block;font-style:normal;font-size:11px;color:#7b8b94;margin-top:4px}

/* Botones */
.mood-rate-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:linear-gradient(180deg,#ff961f,#e9720b);color:#fff;border:0;border-radius:9px;padding:10px 16px;font-size:13px;font-weight:850;cursor:pointer;text-decoration:none;white-space:nowrap}
.mood-rate-btn:disabled{opacity:.5;cursor:not-allowed}
.mood-secondary{background:#fff;border:1px solid #d4dde1;color:#33505f;border-radius:9px;padding:10px 16px;font-size:13px;font-weight:750;cursor:pointer}
.pressure-card .pressure-mood-link{margin-left:6px;border-color:#6ed7e4}

/* Diálogo */
.mood-dialog{border:0;padding:0;background:transparent;max-width:min(560px,calc(100% - 24px));width:100%;color:#0b2c45}
.mood-dialog::backdrop{background:rgba(4,24,40,.55);backdrop-filter:blur(2px)}
.mood-dialog[open]{animation:mood-fade .2s ease}
.mood-dialog-card{position:relative;background:#fff;border-radius:16px;padding:26px 24px 20px;box-shadow:0 24px 60px rgba(0,0,0,.25);max-height:calc(100vh - 32px);overflow:auto}
.mood-dialog-close{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;border:1px solid #e1e6e8;background:#fff;cursor:pointer;font-size:14px}
.mood-dialog-topic{font-size:34px;display:block;line-height:1}
.mood-dialog h2{font-size:20px;line-height:1.25;margin:8px 34px 4px 0}
.mood-picks{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:18px 0 16px}
.mood-pick{display:flex;flex-direction:column;align-items:center;gap:5px;border:2px solid #e1e6e8;background:#fff;border-radius:12px;padding:10px 4px;cursor:pointer;transition:transform .12s ease,border-color .12s ease,background .12s ease}
.mood-pick span{font-size:34px;line-height:1;transition:transform .15s ease;filter:grayscale(.15)}
.mood-pick small{font-size:10.5px;font-weight:700;color:#4e6470;text-align:center;line-height:1.2}
.mood-pick:hover span{transform:scale(1.15)}
.mood-pick:focus-visible{outline:3px solid #2f6fb6;outline-offset:2px}
.mood-pick.active{border-color:#082f4e;background:#f2f7fb;transform:translateY(-2px)}
.mood-pick.active span{transform:scale(1.25);filter:none;animation:mood-pop .35s ease}
#mood-form label{display:block;font-size:13px;font-weight:800;margin:12px 0 6px}
#mood-form textarea,#mood-form input[type=text]{width:100%;border:1px solid #d4dde1;border-radius:10px;padding:10px 12px;font-size:14px;font-family:inherit;color:#0b2c45;resize:vertical}
#mood-form textarea:focus,#mood-form input[type=text]:focus{outline:2px solid #2f6fb6;border-color:transparent}
.mood-form-row{display:flex;justify-content:space-between;gap:10px;margin-top:4px}
#mood-form label.mood-check{display:flex;align-items:center;gap:8px;font-weight:600;margin-top:14px}
.mood-check input{width:17px;height:17px;accent-color:#082f4e}
#mood-update-note{margin-top:8px;background:#f2f7fb;border-radius:8px;padding:8px 10px}
.mood-dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.mood-dialog-status{font-size:13px;margin:12px 0 0;min-height:1em}
.mood-dialog-status.good{color:#2b7f4c;font-weight:700}
.mood-dialog-status.bad{color:#b53a30;font-weight:700}
.mood-login{margin-top:14px;background:#f6f9fa;border:1px solid #e1e6e8;border-radius:12px;padding:16px}
.mood-login p{font-size:13px;margin:0 0 12px;color:#33505f}

@keyframes mood-pop{0%{transform:scale(.6)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes mood-wiggle{0%,100%{transform:rotate(0)}30%{transform:rotate(-8deg)}60%{transform:rotate(6deg)}}
@keyframes mood-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.mood *{animation:none!important;transition:none!important}.mood-dialog[open]{animation:none}}

@media(max-width:980px){
  .mood-overview,.mood-detail-body{grid-template-columns:1fr}
  .mood-head{flex-direction:column;align-items:flex-start}
}
@media(max-width:560px){
  .mood-shell{padding:16px;border-radius:12px}
  .mood-head h2{font-size:22px}
  .thermo-face{font-size:46px}
  .thermo-main strong{font-size:16px}
  .mood-grid{grid-template-columns:1fr 1fr;gap:9px}
  .mood-card-main{padding:13px 11px 10px}
  .mood-card-face{font-size:36px}
  .mood-card-score{font-size:18px}
  .quick-face{width:28px;height:28px;font-size:18px}
  .mood-detail{padding:14px}
  .mood-detail-head{flex-direction:column}
  .priority-row{grid-template-columns:20px 1fr 40px}
  .priority-bar{grid-column:2 / -1;grid-row:2}
  .priority-row small{grid-row:3}
  .mood-picks{gap:5px}
  .mood-pick{padding:8px 2px}
  .mood-pick span{font-size:28px}
  .mood-pick small{font-size:9px}
  .mood-dialog-card{padding:22px 16px 16px}
}
@media(max-width:380px){.mood-grid{grid-template-columns:1fr}}

/* V1.1: enlace al eje y compartir */
.quick-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:5px}
.mood-card-quick>.quick-head>span{font-size:11px;font-weight:700;color:#4e6470}
.quick-axis-link{font-size:11px;font-weight:800;color:#1e70a1;text-decoration:none;white-space:nowrap}
.quick-axis-link:hover{text-decoration:underline}
.mood-detail-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.mood-detail-actions .mood-secondary{text-decoration:none;display:inline-flex;align-items:center}
.mood-share{margin-top:14px;background:#f2f7fb;border:1px solid #dbe7ef;border-radius:12px;padding:16px}
.mood-share p{font-size:13px;margin:0 0 12px;color:#24404f}
.mood-share-actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.mood-share-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:9px;padding:10px 14px;font-size:13px;font-weight:800;text-decoration:none;border:0;cursor:pointer}
.mood-share-btn.wa{background:#1f9d55;color:#fff}
.mood-share-btn.fb{background:#1877f2;color:#fff}
.mood-share-btn.copy{background:#fff;border:1px solid #cdd7dd;color:#1f2d36}