/* Estilos globales, parte 3 de 12: Modal de eliminación con formato (confirmarEliminacion), de toda la app.
   Antes vivían en style.css. Las páginas cargan las 12 partes seguidas y
   en orden (la lista está al inicio de style.css): no cambies ese orden. */

/* El modal de eliminación con formato se fue: confirmarEliminacion delega en
   la confirmación editorial única (js/ui_modal.js, visual-7). */

/* Dashboard layout */
.dash-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 1024px) {
    .dash-row { grid-template-columns: 2fr 1fr; }
}

.dash-leyenda-planes {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.dash-leyenda-planes li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
}
.dash-leyenda-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}
.dash-leyenda-lbl { flex: 1; color: var(--color-acento); }
.dash-leyenda-val { font-weight: 600; color: var(--xt-terracota-texto); }

.dash-funnel {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.dash-funnel-paso { display: flex; flex-direction: column; gap: 0.25rem; }
.dash-funnel-bar {
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    padding: 0 0.7rem;
    color: #fff;
    transition: width 0.5s ease;
    min-width: 60px;
}
.dash-funnel-val { font-weight: 700; font-size: 0.95rem; }
.dash-funnel-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
}
.dash-funnel-lbl { color: var(--color-acento); font-weight: 500; }
.dash-funnel-pct { color: var(--color-texto-sec); }

.dash-top-lista { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.dash-top-item {
    background: var(--color-fondo);
    border-radius: 10px;
    padding: 0.65rem 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.dash-top-rank {
    background: var(--xt-terracota-dark, #BF360C);
    color: #fff;
    font-weight: 700;
    font-size: 0.75rem;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dash-top-ltv {
    font-weight: 700;
    color: var(--xt-terracota-texto);
    font-size: 0.9rem;
    white-space: nowrap;
}

.dash-heatmap {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}
.dash-heatmap-dias {
    display: grid;
    grid-template-rows: repeat(7, 1fr);
    gap: 3px;
    font-size: 0.75rem;
    color: var(--color-texto-sec);
    padding-top: 2px;
}
.dash-heatmap-dias span {
    height: 16px;
    display: flex;
    align-items: center;
}
.dash-heatmap-grid {
    display: flex;
    gap: 3px;
    flex: 1;
}
.dash-heatmap-col {
    display: grid;
    grid-template-rows: repeat(7, 1fr);
    gap: 3px;
    flex: 1;
    min-width: 16px;
}
.dash-heatmap-celda {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    display: inline-block;
}
.dash-heatmap-leyenda {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--color-texto-sec);
    margin-top: 0.75rem;
    justify-content: flex-end;
}