/* ==========================================================
   PANEL GRID - tarjetas que se agrandan, achican y mueven

   Grilla CSS de 12 columnas: cambiar el ancho de una tarjeta es
   cambiarle el "grid-column: span N", y el resto se reacomoda solo
   -es el motor nativo de CSS Grid, no hay que calcular colisiones a
   mano-. Mover una tarjeta es cambiarle el "order": tampoco hace
   falta reordenar el DOM. Todo lo pinta y persiste js/panel-grid.js
   (localStorage, por pantalla y por dispositivo).
   ========================================================== */

.panel-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
    align-items: stretch;
}

.panel-item {
    position: relative;
    min-width: 0;
    height: var(--panel-h, auto);
}

/* Ancho de fabrica (antes de que el usuario redimensione algo: el
   inline-style que pone panel-grid.js le gana a esto apenas exista). */
.panel-item--3 { grid-column: span 3; }
.panel-item--4 { grid-column: span 4; }
.panel-item--12 { grid-column: span 12; }

/* Las .chart-card necesitan ser columna (header arriba, cuerpo que
   estire abajo) para que el cuerpo aproveche el alto que le dieron
   al redimensionar. Las .metric-card ya son una fila fija (icono +
   numero) y no necesitan estirar nada adentro. */
.panel-item.chart-card {
    display: flex;
    flex-direction: column;
}

.panel-item.chart-card .chart-body {
    flex: 1 1 auto;
    min-height: 0;
}

/* index.css le pone un alto FIJO (220px) al chart-body que tiene un
   canvas adentro, para que Chart.js no crezca sin techo (ver el
   comentario ahi). Adentro de una tarjeta redimensionable eso anula
   el redimensionado: el canvas se queda en 220px por mas que la
   tarjeta se agrande. Aca se lo cambia por el alto real de la
   tarjeta -Chart.js sigue acotado, solo que el techo ahora es "lo que
   mida el panel", no un numero fijo. */
.panel-item.chart-card .chart-body:has(> canvas) {
    height: 100%;
    min-height: 140px;
    max-height: none;
}

.panel-item.chart-card .campaign-grid,
.panel-item.chart-card .overview-grid {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

/* --- Boton para prender/apagar el modo edicion ------------------- */

.panel-editar-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 1rem;
}

.panel-editar-btn.es-activo {
    background: var(--primary) !important;
    color: #06110b !important;
    border-color: var(--primary) !important;
}

/* --- Modo edicion: agarraderas visibles --------------------------- */

.panel-item__grip,
.panel-item__resize {
    display: none;
}

.panel-grid--editando .panel-item {
    outline: 1.5px dashed rgba(var(--acento-rgb), 0.45);
    outline-offset: 3px;
    border-radius: var(--radius-md, 10px);
}

.panel-grid--editando .panel-item__grip {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 8px;
    left: 8px;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: rgba(var(--acento-rgb), 0.16);
    border: 1px solid rgba(var(--acento-rgb), 0.4);
    color: var(--primary);
    cursor: grab;
    z-index: 5;
    font-size: 0.85rem;
}

.panel-grid--editando .panel-item__grip:active { cursor: grabbing; }

.panel-grid--editando .panel-item__resize {
    display: block;
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    cursor: nwse-resize;
    z-index: 5;
    background:
        linear-gradient(135deg, transparent 0 45%, rgba(var(--acento-rgb), 0.7) 45% 55%, transparent 55% 100%),
        linear-gradient(135deg, transparent 0 65%, rgba(var(--acento-rgb), 0.7) 65% 75%, transparent 75% 100%);
}

.panel-item--arrastrando {
    opacity: 0.4;
}

@media (max-width: 900px) {
    /* En celular la grilla libre estorba mas de lo que ayuda: todo
       pasa a una columna, en el orden guardado, sin ancho para elegir. */
    .panel-grid { grid-template-columns: 1fr; }
    .panel-item { grid-column: span 1 !important; height: auto !important; }
    .panel-grid--editando .panel-item__resize { display: none; }
}