/* =========================================================
   benvinguda-personalitzar.css — mode "Personalitzar" dels widgets
   Fora del mode edició no es veu res de tot això (només el botó).
   ========================================================= */

/* Perquè el "−" quedi ancorat a la cantonada de cada widget */
.benv-mini-card,
.benv-cal-destacat{position:relative}

/* ---------- Barra amb el botó ---------- */
.benv-editor-barra{grid-column:1 / -1;display:flex;align-items:center;justify-content:flex-end;gap:10px;min-height:30px}
.benv-editor-estat{margin-right:auto;font-size:12px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.35);line-height:1.3}
.benv-editor-desfer{font-size:12px;font-weight:800;color:#fff;text-decoration:underline;padding:2px 4px}
.benv-editor-bt{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:6px 13px;border-radius:20px;
  background:rgba(255,255,255,.92);color:var(--gris);border:1px solid rgba(255,255,255,.6);flex-shrink:0}
.benv-editor-bt:hover{color:var(--verd-fort);background:#fff}
.benv-editant .benv-editor-bt{background:var(--verd-fort);color:#fff;border-color:var(--verd-fort)}

/* ---------- Controls que només existeixen en mode edició ---------- */
#benv-wrap:not(.benv-editant) .benv-widget-handle,
#benv-wrap:not(.benv-editant) .benv-widget-moure{display:none}

.benv-widget-treu{display:none;position:absolute;top:-9px;left:-9px;width:26px;height:26px;padding:0;border-radius:50%;
  align-items:center;justify-content:center;background:var(--vermell-clar);border:1px solid var(--vermell);color:var(--vermell);
  font-size:18px;line-height:1;font-weight:800;z-index:4;box-shadow:var(--ombra)}
.benv-widget-treu:hover{background:var(--vermell);color:#fff}
.benv-editant .benv-widget-treu{display:flex}

/* Els widgets es distingeixen com a "editables" amb una vora discontínua */
.benv-editant .benv-mini-card[data-widget],
.benv-editant #benv-calendari-destacat{outline:1.5px dashed var(--linia-forta);outline-offset:2px}

/* Requadre "+ Afegir widget" (com un forat lliure a la pantalla d'inici) */
.benv-afegir-tile{min-height:76px;display:flex;align-items:center;justify-content:center;gap:8px;border:1.5px dashed rgba(255,255,255,.85);
  border-radius:14px;background:rgba(255,255,255,.35);color:var(--tinta);font-weight:700;font-size:13px}
.benv-afegir-tile:hover{background:#fff;border-color:var(--verd-mig);color:var(--verd-fort)}

/* Ressaltat del widget que s'acaba d'afegir */
@keyframes benv-nou{0%{box-shadow:0 0 0 3px var(--verd-mig)}100%{box-shadow:0 0 0 0 rgba(67,160,71,0)}}
.benv-widget-nou{animation:benv-nou 2.2s ease-out}

/* ---------- Galeria (finestra "Afegir widgets") ---------- */
.benv-gal-fila{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--linia)}
.benv-gal-fila:last-child{border-bottom:none}
.benv-gal-ico{width:38px;height:38px;border-radius:12px;background:var(--fons);display:grid;place-items:center;color:var(--gris);flex-shrink:0}
.benv-gal-text{flex:1;min-width:0}
.benv-gal-nom{font-size:14px;font-weight:800}
.benv-gal-desc{font-size:12px;color:var(--gris);line-height:1.3}
.benv-gal-afegir{display:inline-flex;align-items:center;gap:5px;flex-shrink:0;font-size:12.5px;font-weight:700;padding:8px 13px;
  border-radius:var(--radi-petit);background:var(--verd-fort);color:#fff;min-height:38px}
.benv-gal-afegir:hover:not(:disabled){background:#276a2b}
.benv-gal-afegir:disabled{opacity:.6}

@media(max-width:640px){
  .benv-editor-estat{font-size:11.5px}
  .benv-widget-treu{width:30px;height:30px;top:-11px;left:-8px}   /* més gran per al dit */
}