/* ===== Modo oscuro (invertido inteligente: imágenes y vídeo conservan sus colores) ===== */
html.spwa-dark{filter:invert(1) hue-rotate(180deg) brightness(var(--spwa-br,1));background:#fff}
html.spwa-dark img,html.spwa-dark picture,html.spwa-dark video,html.spwa-dark canvas,html.spwa-dark iframe,
html.spwa-dark svg image,html.spwa-dark [style*="background-image"],html.spwa-dark .spwa-keep{filter:invert(1) hue-rotate(180deg)}

/* ===== Modo lectura: velo cálido (multiplica) + contraste (backdrop) ===== */
html.spwa-reading::after{content:"";position:fixed;top:0;left:0;right:0;bottom:0;z-index:2147483000;pointer-events:none;
  background:var(--spwa-ov,#fff);mix-blend-mode:multiply}
html.spwa-reading::before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;z-index:2147482999;pointer-events:none;
  -webkit-backdrop-filter:contrast(var(--spwa-ct,1));backdrop-filter:contrast(var(--spwa-ct,1))}

/* ===== Tamaño del texto (zoom del body; respaldo con font-size si no hay zoom) ===== */
html.spwa-fs-1 body{zoom:1.1}
html.spwa-fs-2 body{zoom:1.25}
html.spwa-fs-3 body{zoom:1.5}
html.spwa-fs-4 body{zoom:1.75}
@supports not (zoom:1){
  html.spwa-fs-1{font-size:110%}html.spwa-fs-2{font-size:125%}html.spwa-fs-3{font-size:150%}html.spwa-fs-4{font-size:175%}
}

/* ===== Barra flotante ===== */
.spwa-ui{--spwa-accent:#1d2327;position:fixed;z-index:2147483600;bottom:calc(var(--spwa-bottom,90px) + env(safe-area-inset-bottom));
  font:14px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#1d2327;-webkit-text-size-adjust:100%}
.spwa-side-right{right:12px}.spwa-side-left{left:12px}
.spwa-bar{display:flex;flex-direction:column;gap:6px;padding:6px;border-radius:999px;background:#fff;
  border:1px solid rgba(0,0,0,.1);box-shadow:0 6px 24px rgba(0,0,0,.2)}
.spwa-tb{position:relative;width:42px;height:42px;padding:0;border:0;border-radius:50%;background:transparent;color:#1d2327;
  display:flex;align-items:center;justify-content:center;cursor:pointer}
.spwa-tb:hover{background:rgba(0,0,0,.06)}
.spwa-tb.is-on{background:var(--spwa-accent);color:#fff}
.spwa-tb:focus-visible,.spwa-b:focus-visible,.spwa-seg__b:focus-visible{outline:3px solid #2271b1;outline-offset:2px}
.spwa-ic{display:inline-flex}
.spwa-tb--app img{width:34px;height:34px;border-radius:50%;object-fit:cover;display:block}
.spwa-dl{position:absolute;right:0;bottom:0;width:17px;height:17px;border-radius:50%;background:var(--spwa-accent);color:#fff;
  display:flex;align-items:center;justify-content:center;border:2px solid #fff;box-sizing:border-box}
.spwa-badge{position:absolute;top:0;right:0;min-width:18px;height:18px;padding:0 4px;box-sizing:border-box;border-radius:9px;
  background:#d63638;color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center}

.spwa-pop{position:absolute;bottom:0;width:min(340px,calc(100vw - 84px));max-height:min(70vh,560px);display:flex;flex-direction:column;
  background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:16px;box-shadow:0 10px 36px rgba(0,0,0,.25);overflow:hidden}
.spwa-pop[hidden]{display:none}
.spwa-side-right .spwa-pop{right:62px}.spwa-side-left .spwa-pop{left:62px}
.spwa-pop__head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid rgba(0,0,0,.08);font-size:15px}
.spwa-pop__x{border:0;background:transparent;color:inherit;cursor:pointer;padding:4px;border-radius:8px;display:flex}
.spwa-pop__body{padding:12px 14px;overflow:auto;display:flex;flex-direction:column;gap:10px}
.spwa-pop__body>*{flex-shrink:0} /* si no, con el panel alto (modo lectura) los controles se encogían y se cortaban por la mitad */
.spwa-pop__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:8px;border-top:1px solid rgba(0,0,0,.08)}
.spwa-muted{color:#646970;font-size:12.5px;margin:0}
.spwa-lbl{font-weight:600;margin-top:4px}

.spwa-item{display:flex;gap:10px;padding:8px;border-radius:12px;color:inherit;text-decoration:none;border:1px solid transparent}
.spwa-item:hover{background:rgba(0,0,0,.04)}
.spwa-item.is-read{opacity:.6}
.spwa-item.is-new{background:rgba(255,193,7,.16);border-color:rgba(255,193,7,.45)}
.spwa-item__img{width:56px;height:56px;border-radius:10px;object-fit:cover;flex:none}
.spwa-item__t{display:flex;flex-direction:column;gap:2px;min-width:0}
.spwa-item__b{font-size:13px;opacity:.85;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.spwa-item__c{align-self:flex-start;padding:2px 8px;border-radius:6px;background:rgba(0,0,0,.07);font-size:12.5px}

.spwa-b{font:inherit;font-weight:600;cursor:pointer;border:1px solid rgba(0,0,0,.18);background:#fff;color:inherit;padding:8px 12px;border-radius:10px}
.spwa-b:disabled{opacity:.45;cursor:default}
.spwa-b--primary{background:var(--spwa-accent);border-color:var(--spwa-accent);color:#fff}
.spwa-b--full{width:100%}
.spwa-seg{display:flex;border:1px solid rgba(0,0,0,.18);border-radius:10px;overflow:hidden}
.spwa-seg__b{flex:1;font:inherit;padding:8px 6px;border:0;background:#fff;color:inherit;cursor:pointer}
.spwa-seg__b+.spwa-seg__b{border-left:1px solid rgba(0,0,0,.18)}
.spwa-seg__b.is-on{background:var(--spwa-accent);color:#fff;font-weight:700}
.spwa-row{display:flex;flex-direction:column;gap:4px}
.spwa-row__l{display:flex;justify-content:space-between}
.spwa-row input[type=range]{width:100%;accent-color:var(--spwa-accent)}
.spwa-fs{display:flex;align-items:center;gap:10px}
.spwa-fs__v{flex:1;text-align:center;font-weight:600}
.spwa-actions{display:flex;flex-wrap:wrap;gap:8px}
.spwa-status{margin:0;padding:10px 12px;border-radius:10px;background:rgba(0,0,0,.05)}
.spwa-status.is-granted{background:rgba(0,163,42,.13)}
.spwa-status.is-denied,.spwa-status.is-unsupported{background:rgba(214,54,56,.12)}
.spwa-diag{font-size:13px}.spwa-diag.ok{color:#007017}.spwa-diag.bad{color:#b32d2e}
.spwa-diagbox{display:flex;flex-direction:column;gap:6px}
.spwa-steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:13px}

@media (max-width:520px){
  .spwa-pop{position:fixed;left:8px;right:8px;bottom:8px;width:auto;max-height:78vh}
  .spwa-tb{width:44px;height:44px}
}
@media (prefers-color-scheme:dark){
  .spwa-ui{color:#f1f1f1}
  .spwa-bar,.spwa-pop{background:#1e1f22;border-color:rgba(255,255,255,.14)}
  .spwa-tb{color:#f1f1f1}.spwa-tb:hover{background:rgba(255,255,255,.1)}
  .spwa-tb.is-on{background:#f1f1f1;color:#111}
  .spwa-dl{border-color:#1e1f22}
  .spwa-b,.spwa-seg__b{background:#2a2b2f;color:#f1f1f1;border-color:rgba(255,255,255,.22)}
  .spwa-b--primary,.spwa-seg__b.is-on{background:#f1f1f1;color:#111;border-color:#f1f1f1}
  .spwa-muted{color:#a7aaad}
  .spwa-pop__head,.spwa-pop__foot{border-color:rgba(255,255,255,.12)}
  .spwa-item:hover{background:rgba(255,255,255,.07)}.spwa-item__c{background:rgba(255,255,255,.12)}
  .spwa-status{background:rgba(255,255,255,.08)}
}
/* En modo oscuro del plugin la barra ya se invierte junto con la página: se usa su versión clara */
html.spwa-dark .spwa-ui{color:#1d2327}
html.spwa-dark .spwa-bar,html.spwa-dark .spwa-pop{background:#fff;border-color:rgba(0,0,0,.1)}
html.spwa-dark .spwa-tb{color:#1d2327}html.spwa-dark .spwa-tb.is-on{background:var(--spwa-accent);color:#fff}
html.spwa-dark .spwa-b,html.spwa-dark .spwa-seg__b{background:#fff;color:#1d2327;border-color:rgba(0,0,0,.18)}
html.spwa-dark .spwa-b--primary,html.spwa-dark .spwa-seg__b.is-on{background:var(--spwa-accent);color:#fff;border-color:var(--spwa-accent)}
html.spwa-dark .spwa-muted{color:#646970}
@media (prefers-reduced-motion:no-preference){.spwa-pop{animation:spwa-pop .16s ease-out}}
@keyframes spwa-pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}