/* DEEC Studio · panel administrativo: dashboards personalizables (ver admin-dashboard.js). Se carga después de admin-layout.css y admin-mobile.css.
   Los resúmenes pasan a una cuadrícula de 12 columnas (6 en tableta, 2 en móvil); los widgets son los mismos elementos de siempre. */
#view.is-dash{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;align-items:start}
#view.is-dash>.kpis,#view.is-dash>.cols{display:contents}
#view.is-dash>*{min-width:0}
#view.is-dash .dw{margin:0!important;grid-column:span var(--us,var(--ds));min-width:0}
#view.is-dash .dw--kpi{--ds:2;align-self:stretch}
#view.is-dash .dw--card{--ds:6;display:block;width:100%;max-width:100%;break-inside:auto}
#view.is-dash .dw--prio{--ds:12}
#view.is-dash .dw--off{display:none!important}
@media (max-width:1280px){#view.is-dash .dw--kpi{--ds:4}}
@media (max-width:1100px){
  #view.is-dash{grid-template-columns:repeat(6,minmax(0,1fr))}
  #view.is-dash .dw{grid-column:span var(--um,var(--dm))}
  #view.is-dash .dw--kpi{--dm:2}#view.is-dash .dw--card,#view.is-dash .dw--prio{--dm:6}
}
@media (max-width:640px){
  #view.is-dash{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  #view.is-dash .dw{grid-column:span var(--ux,var(--dx))}
  #view.is-dash .dw--kpi{--dx:1}#view.is-dash .dw--card,#view.is-dash .dw--prio{--dx:2}
}

/* Escritorio (≥901 px): distribución compacta tipo mosaico. Las filas de la cuadrícula miden 4 px y cada elemento ocupa tantas como necesita su altura real (admin-dashboard.js calcula grid-row-end);
   con grid-auto-flow:dense un panel corto no deja detrás un hueco del alto del panel vecino: el siguiente ocupa el espacio libre. Cada panel conserva su altura natural (no se igualan alturas); el hueco entre
   filas (16 px) va en el margen inferior. En tableta y móvil no se aplica. */
@media (min-width:901px){
  #view.is-dash{grid-auto-rows:4px;grid-auto-flow:row dense;gap:0 16px}
  #view.is-dash .dw,#view.is-dash>.dbar{margin:0 0 16px!important}
}

/* Barra de edición */
.dbar{grid-column:1/-1;order:-1;position:sticky;z-index:40;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:12px 16px;border:1px solid var(--acc);border-radius:12px;background:var(--card);box-shadow:0 14px 34px -20px color-mix(in srgb,var(--acc) 55%,transparent)}
.dbar__t b{display:block;font-weight:600;color:var(--fg)}
.dbar__t span{font-size:13px;color:var(--muted)}
.dbar__a{display:flex;flex-wrap:wrap;gap:8px}
.dbar__a svg{width:17px;height:17px;margin-right:6px;vertical-align:-3px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dbar__a em{margin-left:6px;padding:0 7px;border-radius:99px;background:var(--acc);color:var(--accfg);font-style:normal;font-size:12px;line-height:20px;display:inline-block}
.dbar__tray{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:8px;padding-top:12px;border-top:1px solid var(--line)}
.dbar__tray[hidden]{display:none}
.dbar__tray p{margin:0;font-size:14px;color:var(--muted)}
.dbar__add{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:1px dashed var(--acc);border-radius:99px;background:var(--acc-l);color:var(--acc);font:inherit;font-size:14px;cursor:pointer}
.dbar__add svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.dpers svg{width:17px;height:17px;margin-right:6px;vertical-align:-3px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* Edición directa: sin botones dentro de las tarjetas. Contorno discreto; la capa .dov (fuera de las tarjetas) aporta las asas de ancho y el menú contextual */
#view.is-dash--edit{position:relative}
body.dash-edit .dw{outline:1.5px dashed color-mix(in srgb,var(--acc) 38%,transparent);outline-offset:3px;cursor:grab;transition:outline-color .15s}
body.dash-edit .dw:hover{outline-color:var(--acc)}
body.dash-edit .dw:focus-visible,body.dash-edit .dw.dw--sel{outline:2px solid var(--acc)}
body.dash-edit .dw>*{pointer-events:none;-webkit-user-select:none;user-select:none}
body.dash-dragging,body.dash-dragging *{cursor:grabbing!important;-webkit-user-select:none;user-select:none}
.dw--drag{outline:2px solid var(--acc)!important;box-shadow:0 22px 50px -14px color-mix(in srgb,var(--acc) 60%,transparent)!important;opacity:.95;z-index:50;pointer-events:none!important;transition:none!important;will-change:transform}
.dov{position:absolute;z-index:30;pointer-events:none}
.dov>*{pointer-events:auto}
.dov__e{position:absolute;top:0;bottom:0;right:-9px;width:18px;cursor:ew-resize;touch-action:none;display:grid;place-items:center}
.dov__e i{display:block;width:5px;height:42px;max-height:60%;border-radius:99px;background:var(--acc);opacity:.55;box-shadow:0 0 0 2px var(--card);transition:opacity .15s,height .15s}
.dov__e:hover i,body.dash-edit .dw--rs ~ .dov .dov__e i{opacity:1;height:58px}
.dov__c{position:absolute;right:-7px;bottom:-7px;width:14px;height:14px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 2px var(--card);cursor:ew-resize;touch-action:none;opacity:.8}
.dov__p{position:absolute;top:-17px;right:14px;display:flex;gap:2px;padding:3px;border-radius:99px;background:var(--card);box-shadow:0 8px 22px -8px color-mix(in srgb,var(--shadow) 40%,transparent),0 0 0 1px var(--line)}
.dov__p button{display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:none;color:var(--fg);cursor:pointer;-webkit-tap-highlight-color:transparent}
.dov__p button:hover{background:var(--acc-l);color:var(--acc)}
.dov__p svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media (pointer:coarse),(max-width:900px){.dov__e{width:30px;right:-15px}.dov__c{width:22px;height:22px;right:-11px;bottom:-11px}.dov__p button{width:40px;height:40px}.dov__p{top:-22px}}
.dbar__h--m{display:none}
@media (max-width:900px){.dbar__h--d{display:none}.dbar__h--m{display:block}}
@media (max-width:640px){
  /* «Personalizar panel» en móvil = hoja inferior con el estándar de los modales (.mdl): cabecera (título + Cancelar), cuerpo (ayuda, acciones y widgets ocultos) y pie con «Guardar cambios».
     Es la misma barra que en escritorio, reordenada con una cuadrícula: la hoja queda fija abajo sin tapar el inicio del panel, con área segura y desplazamiento interno si el contenido no cabe. */
  body.dash-edit{padding-bottom:310px}
  .dbar{position:fixed;left:0;right:0;bottom:0;top:auto!important;z-index:60;order:0;grid-column:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:start;gap:0;max-height:min(78dvh,560px);overflow-y:auto;overscroll-behavior:contain;padding:0;border:0;border-top:1px solid var(--acc);border-radius:16px 16px 0 0;background:var(--card);box-shadow:0 -14px 34px -18px color-mix(in srgb,var(--shadow) 40%,transparent)}
  .dbar__t{grid-column:1;grid-row:1;position:sticky;top:0;z-index:1;padding:16px 4px 12px 16px;background:var(--card)}
  .dbar__t b{display:block;font-size:17px;font-weight:500;line-height:1.3;color:var(--fg)}
  .dbar__t .dbar__h{margin-top:4px;font-size:13px;line-height:1.4;color:var(--muted)}
  .dbar__t .dbar__h--m{display:block}
  .dbar__t .dbar__h--d{display:none}
  .dbar__a{display:contents}
  #app .dbar__a .btn{min-height:48px;padding:0 16px;font-size:15px;line-height:1.2;white-space:normal;justify-content:flex-start}
  #app .dbar__a [data-dd=cancel]{grid-column:2;grid-row:1;position:sticky;top:0;z-index:2;align-self:start;min-height:48px;margin:6px 4px 0 0;padding:0 12px;background:var(--card)}
  #app .dbar__a [data-dd=add]{grid-column:1/-1;grid-row:2;border-top:1px solid var(--line)}
  #app .dbar__a [data-dd=reset]{grid-column:1/-1;grid-row:3;border-top:1px solid var(--line)}
  .dbar__tray{grid-column:1/-1;grid-row:4;order:0;max-height:none;padding:12px 16px;border-top:1px solid var(--line)}
  #app .dbar__a [data-dd=save]{grid-column:1/-1;grid-row:5;position:sticky;bottom:0;z-index:1;justify-content:flex-end;padding:0 16px calc(env(safe-area-inset-bottom));min-height:calc(52px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--card);order:0}
}