/* inicio.css — estilos propios de /inicio.html. El resto (page-wrap, page-title,
   metrics-grid, metric-card, card, btn) vienen de /style.css; acá solo lo que
   es exclusivo de esta página. */

#inicio-saludo-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}

/* .metric-card en /style.css es un <div> de solo lectura en el resto del panel;
   acá cada widget es un <a> clickeable, así que el estilo de link va scopeado
   a "a.metric-card" para no afectar los usos existentes en otras páginas. */
a.metric-card {
  display: block; text-decoration: none;
  transition: transform .12s, border-color .15s;
}
a.metric-card:hover { border-color: var(--accent); transform: translateY(-2px); }

#inicio-widgets:empty::after,
#inicio-widgets.loading::after {
  content: 'Cargando...'; color: var(--text-muted); font-size: 13px; padding: 20px;
}

#inicio-accesos-section { margin-top: 4px; }
#inicio-accesos {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px;
}
.acceso-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--radius-md);
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); font-size: 13px; text-decoration: none;
  transition: border-color .15s, background .15s;
}
.acceso-chip:hover { border-color: var(--accent); background: var(--surface2); }
.acceso-chip svg { flex-shrink: 0; color: var(--text-dim); }

/* ── Modal de personalización ── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.modal-box { width: 100%; max-width: 420px; max-height: 85vh; overflow-y: auto; }
.modal-actions {
  display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px;
}

.picker-list { display: flex; flex-direction: column; gap: 2px; }
.picker-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 6px; border-radius: var(--radius-sm);
  font-size: 13px; color: var(--text); cursor: pointer;
}
.picker-item:hover { background: var(--surface2); }
.picker-item input[type=checkbox] { flex-shrink: 0; }
.picker-item.disabled { opacity: .4; cursor: not-allowed; }
.picker-item svg { flex-shrink: 0; color: var(--text-dim); }

@media (max-width: 480px) {
  #inicio-saludo-row { flex-direction: column; align-items: flex-start; }
}