/* (5-nov, widgets-5nov) El apartado Widgets del panel: solo lo que no da ya sabo.css + style.css. Fuera de los tokens, ningún color. */
#view-widgets [hidden]{display:none !important;}
.wg-botones{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:12px;}
.wg-boton{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 18px;border-radius:6px;background:var(--brand);color:var(--on-brand);font:500 16px/1 var(--sans);text-decoration:none;}
.wg-boton:hover{color:var(--on-brand);opacity:.92;}
.wg-sec{background:transparent;color:var(--txt);border:1px solid var(--line-control);}
.wg-sec:hover{color:var(--txt);}
.wg-hecho{color:var(--dim);font-size:15px;}
.wg-campos{display:grid;grid-template-columns:minmax(0,1fr) 130px auto;gap:12px;align-items:end;margin-top:14px;}
.wg-dos{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
.wg-marco{background:var(--hueco);border:1px solid var(--line);border-radius:6px;padding:12px;margin:12px 0;overflow:hidden;}
.wg-marco iframe{display:block;border:0;width:100%;background:transparent;color-scheme:light;}
.wg-lp{max-width:320px;aspect-ratio:320/120;} .wg-elo{aspect-ratio:960/64;} .wg-sig{max-width:420px;aspect-ratio:420/64;}
.wg-url{display:flex;gap:8px;align-items:center;}
.wg-url input{flex:1;min-width:0;font:400 13px/20px var(--mono);transition:border-color .1s;}
.wg-aviso{color:var(--dek);font-size:15px;line-height:22px;margin:10px 0;}
.wg-legal{color:var(--muted);font-size:13px;line-height:19px;margin-top:24px;}
/* Seis pestañas en el movil: en una fila, las que haya (la de Widgets puede estar escondida) */
.pestanas{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);grid-template-columns:none !important;}
@media(max-width:560px){.wg-campos,.wg-dos{grid-template-columns:minmax(0,1fr);}}

/* (5-nov, Amor: «cada clic, una recompensa») Pulsado, ocupado y hecho. Nada se queda sin reacción. */
#view-widgets button,#view-widgets .wg-boton{transition:transform .06s linear,background-color .1s linear,color .1s linear;}
#view-widgets button{min-height:44px;}
#view-widgets button:active,#view-widgets .wg-boton:active{transform:translateY(2px);}
#view-widgets button:focus-visible,#view-widgets .wg-boton:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}
.wg-ocupado{cursor:progress;opacity:.85;gap:8px;display:inline-flex !important;align-items:center;justify-content:center;}
.wg-ocupado::before{content:'';width:12px;height:12px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:wg-gira .7s linear infinite;flex:none;}
@keyframes wg-gira{to{transform:rotate(360deg);}}
#view-widgets .wg-listo,#view-widgets .wg-listo:hover{background:transparent;color:var(--brand);outline:2px solid var(--brand);outline-offset:-2px;opacity:1;}
#view-widgets .wg-copiada{border-color:var(--brand);outline:1px solid var(--brand);}
.wg-estado{margin:12px 0 0;display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.wg-estado p{margin:0;flex:1 1 240px;color:var(--dek);font-size:15px;line-height:22px;}
.wg-barra{flex:1 0 100%;height:6px;background:var(--line);border-radius:3px;overflow:hidden;}
.wg-barra i{display:block;height:100%;min-width:12px;width:0;background:var(--brand);transition:width .25s linear;}
.wg-esperando .wg-marco iframe{visibility:hidden;}
.wg-esperando .wg-marco{animation:wg-late 1.1s ease-in-out infinite;}
@keyframes wg-late{50%{opacity:.45;}}
@media(prefers-reduced-motion:reduce){.wg-ocupado::before{animation-duration:2s;}.wg-esperando .wg-marco{animation-duration:3s;}#view-widgets button:active,#view-widgets .wg-boton:active{transform:none;opacity:.7;}}

/* El modo claro, con los tokens de docs/marca. El panel aún no tiene botón de tema: el día que lo ponga, este apartado ya está. */
:root[data-tema="claro"] #view-widgets{color-scheme:light;--bg:#fff;--card:#f7f7f8;--hueco:#eff0f1;--line:rgba(0,0,0,.12);--line-fina:rgba(0,0,0,.07);--line-control:rgba(0,0,0,.24);--rule:#000;--txt:#000;--dek:#3a3a3a;--dim:#54595d;--muted:#5f656a;--brand:#00707a;--brand-claro:#005a62;--on-brand:#fff;--error:#b3261e;--hover:rgba(0,0,0,.05);--win:#0b6b2e;--loss:#b3261e;color:var(--txt);background:var(--bg);}